LiuTeng
/
xagx-tp-ws-lx


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    </script>
    <title>条屏</title>
</head>

<body>
    <div id="bar-scren">
        <div class="bar"></div>
        <div class="line"></div>
        <div class="screen">
            <div class="screen-info">
                <div class="info-num"></div>
                <div class="info-textbox">
                    <!-- <div class="info-text"></div> -->

                    <div class="intextbox">
                        <div class="info-text"></div>
                        <!-- <div class="info-text1"></div> -->
                    </div>
                </div>
                <!-- <div class="info-line"></div> -->
                <div class="info-type">
                    <img class="img" id="myImage" src="">

                </div>
                <div class="info-typetext"></div>
            </div>
            <div class="screen-ing">正在办理：<span class="screen-inginfo"></span></div>
            <div class="screen-ings">当前等待：<span class="screen-loadinginfo"></span> </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var url = window.location.search.slice(1).split("&");
    // 条屏编号设定
    var tpname = url[0].slice(url[0].lastIndexOf("=") + 1);
    var sljgdm = url[1].slice(url[1].lastIndexOf("=") + 1);
    // var bsfwtdm = url[2].slice(url[2].lastIndexOf("=") + 1);
    // var bsfwtdm = "1706226277373812738";


    // 判断是否可用ws
    function WebSocketTest() {
        if ("WebSocket" in window) {
            console.log("您的浏览器支持 WebSocket!");
            // ws参数
            var msg = {
                userType: "ET条屏",
                machineName: tpname,
                sljgdm: sljgdm,
            }
            var wsUrl = "wss://pdjh.shizhi.tv/websocket/gw/{" + JSON.stringify(msg) + "}"
            var connection = null
            // 心跳倒计时
            var heartTimer = null
            // 重连倒计时
            var reConnectTimer = null

            function connectWS() {
                connection = new WebSocket(wsUrl);
                // ws 连接成功
                connection.onopen = wsOpen;
                function wsOpen(event) {
                    heart()
                }
                connection.onclose = wsClose;
                function wsClose() {
                    reConnect()
                    console.log("%c" + "连接关闭，正在重连...", "color:" + "#fe4c40")
                }
                // 接收消息
                connection.onmessage = wsMessage;
                function wsMessage(event) {
                    var response = JSON.parse(event.data);
                    console.log(response);


                    switch (response.code) {
                        default:
                            return
                        // 初始化
                        case "ettpInit":

                            //  修改标题
                            document.querySelector(".bar").innerHTML = response.tpxxVO.dttsy;
                            //  修改业务类型
                            document.querySelector(".info-num").innerHTML = response.tpxxVO.ckhm;
                            //  修改业务标题
                            document.querySelector(".info-text").innerHTML = response.tpxxVO.slyw.join(' ');

                            if (response.tpxxVO.slyw.join(' ').length > 5) {
                                // scroll();
                                document.querySelector(".info-text").innerHTML = '<div>' + element.slyw.join(' ').slice(0, 5) + '</div><div>' + element.slyw.join(' ').slice(5) + '</div>'


                                document.querySelector(".info-textbox").style.cssText = 'height:600px;white-space: wrap';
                                document.querySelector(".info-text").style.cssText = 'height:600px;white-space: wrap;line-height:150px; font-size: 120px;text-align: center; margin-top: -20px;';
                            }
                            // document.querySelector(".info-text1").innerHTML = element.slyw.join(' ');

                            //  修改图标以及颜色
                            var img = document.getElementById("myImage");

                            img.src = response.tpxxVO.ckzt == '空闲' ? './image/frees.png' : response.tpxxVO.ckzt === '暂停服务' ? './image/wites.png' : './image/xlb.png';
                            // document.querySelector('.info-typetext').style.color = response.tpxxVO.ckzt === '空闲' ? '#00FFFF' : response.tpxxVO.ckzt === '暂停服务' ? '#FFF700' : '#ff0000';
                            document.querySelector('.info-typetext').style.color = response.tpxxVO.ckzt === '空闲' ? '#00FFFF' : response.tpxxVO.ckzt === '暂停服务' ? '#FFF700' : '#00FFFF';
                            //  修改号码

                            document.querySelector(".info-typetext").innerHTML = response.tpxxVO.ckzt === '空闲' ? "空闲中" : response.tpxxVO.ckzt;
                            //  修改正在办理
                            document.querySelector(".screen-inginfo").innerHTML = response.tpxxVO.ckzt != '空闲' && response.tpxxVO.ckzt != '暂停服务' ? response.tpxxVO.ckzt : "暂无";
                            // document.querySelector(".screen-inginfo").style.color = response.tpxxVO.ckzt != '空闲' && response.tpxxVO.ckzt != '暂停服务' ? "#00FFFF" : "#ffffff";
                            //  修改等待人数
                            document.querySelector(".screen-loadinginfo").innerHTML = response.tpxxVO.ckzt != '暂停服务' && response.tpxxVO.ddrs != '0' ? response.tpxxVO.ddrs + '人' : "暂无";
                            break;
                        //取号完成
                        case "qhwc":
                            for (var i = 0; i < response.tpList.length; i++) {
                                if (response.tpList[i].tpbh == tpname) {

                                    var list = response.tpList[i].tpxxVO;
                                    console.log(list);
                                    //  修改标题
                                    document.querySelector(".bar").innerHTML = list.dttsy;
                                    //  修改业务类型
                                    document.querySelector(".info-num").innerHTML = list.ckhm;
                                    //  修改业务标题
                                    document.querySelector(".info-text").innerHTML = list.slyw.join(' ');


                                    // document.querySelector(".info-text1").innerHTML = element.slyw.join(' ');

                                    //  修改图标以及颜色
                                    var img = document.getElementById("myImage");

                                    img.src = list.ckzt == '空闲' ? './image/frees.png' : list.ckzt === '暂停服务' ? './image/wites.png' : './image/xlb.png';
                                    // document.querySelector('.info-typetext').style.color = list.ckzt === '空闲' ? '#00FFFF' : list.ckzt === '暂停服务' ? '#FFF700' : '#FF0000';
                                    document.querySelector('.info-typetext').style.color = list.ckzt === '空闲' ? '#00FFFF' : list.ckzt === '暂停服务' ? '#FFF700' : '#00FFFF';
                                    //  修改号码

                                    document.querySelector(".info-typetext").innerHTML = list.ckzt === '空闲' ? "空闲中" : list.ckzt;
                                    //  修改正在办理
                                    document.querySelector(".screen-inginfo").innerHTML = list.ckzt != '空闲' && list.ckzt != '暂停服务' ? list.ckzt : "暂无";
                                    // document.querySelector(".screen-inginfo").style.color = list.ckzt != '空闲' && list.ckzt != '暂停服务' ? "#00FFFF" : "#ffffff";
                                    //  修改等待人数
                                    //  修改等待人数
                                    document.querySelector(".screen-loadinginfo").innerHTML = list.ckzt != '暂停服务' && list.ddrs != '0' ? list.ddrs + '人' : "暂无";

                                    break;
                                }

                            }


                            break;
                        // 综合完成
                        case "zhwc":
                            for (var i = 0; i < response.tpList.length; i++) {
                                if (response.tpList[i].tpbh == tpname) {

                                    var list = response.tpList[i].tpxxVO;
                                    //  修改标题
                                    document.querySelector(".bar").innerHTML = list.dttsy;
                                    //  修改业务类型
                                    document.querySelector(".info-num").innerHTML = list.ckhm;
                                    //  修改业务标题
                                    document.querySelector(".info-text").innerHTML = list.slyw.join(' ');


                                    // document.querySelector(".info-text1").innerHTML = element.slyw.join(' ');

                                    //  修改图标以及颜色
                                    var img = document.getElementById("myImage");

                                    img.src = list.ckzt == '空闲' ? './image/frees.png' : list.ckzt === '暂停服务' ? './image/wites.png' : './image/xlb.png';
                                    // document.querySelector('.info-typetext').style.color = list.ckzt === '空闲' ? '#00FFFF' : list.ckzt === '暂停服务' ? '#FFF700' : '#FF0000';
                                    document.querySelector('.info-typetext').style.color = list.ckzt === '空闲' ? '#00FFFF' : list.ckzt === '暂停服务' ? '#FFF700' : '#00FFFF';
                                    //  修改号码

                                    document.querySelector(".info-typetext").innerHTML = list.ckzt === '空闲' ? "空闲中" : list.ckzt;
                                    //  修改正在办理
                                    document.querySelector(".screen-inginfo").innerHTML = list.ckzt != '空闲' && list.ckzt != '暂停服务' ? list.ckzt : "暂无";
                                    // document.querySelector(".screen-inginfo").style.color = list.ckzt != '空闲' && list.ckzt != '暂停服务' ? "#00FFFF" : "#ffffff";

                                    //  修改等待人数
                                    document.querySelector(".screen-loadinginfo").innerHTML = list.ckzt != '暂停服务' && list.ddrs != '0' ? list.ddrs + '人' : "暂无";

                                    break;
                                }

                            }

                            break;
                        // 叫号完成
                        case "jhwc":
                            for (var i = 0; i < response.tpList.length; i++) {
                                if (response.tpList[i].tpbh == tpname) {

                                    var list = response.tpList[i].tpxxVO;
                                    //  修改标题
                                    document.querySelector(".bar").innerHTML = list.dttsy;
                                    //  修改业务类型
                                    document.querySelector(".info-num").innerHTML = list.ckhm;
                                    //  修改业务标题
                                    document.querySelector(".info-text").innerHTML = list.slyw.join(' ');


                                    // document.querySelector(".info-text1").innerHTML = element.slyw.join(' ');

                                    //  修改图标以及颜色
                                    var img = document.getElementById("myImage");

                                    img.src = list.ckzt == '空闲' ? './image/frees.png' : list.ckzt === '暂停服务' ? './image/wites.png' : './image/xlb.png';
                                    // document.querySelector('.info-typetext').style.color = list.ckzt === '空闲' ? '#00FFFF' : list.ckzt === '暂停服务' ? '#FFF700' : '#FF0000';
                                    document.querySelector('.info-typetext').style.color = list.ckzt === '空闲' ? '#00FFFF' : list.ckzt === '暂停服务' ? '#FFF700' : '#00FFFF';
                                    //  修改号码

                                    document.querySelector(".info-typetext").innerHTML = list.ckzt === '空闲' ? "空闲中" : list.ckzt;
                                    //  修改正在办理
                                    document.querySelector(".screen-inginfo").innerHTML = list.ckzt != '空闲' && list.ckzt != '暂停服务' ? list.ckzt : "暂无";
                                    // document.querySelector(".screen-inginfo").style.color = list.ckzt != '空闲' && list.ckzt != '暂停服务' ? "#00FFFF" : "#ffffff";

                                    //  修改等待人数
                                    document.querySelector(".screen-loadinginfo").innerHTML = list.ckzt != '暂停服务' && list.ddrs != '0' ? list.ddrs + '人' : "暂无";

                                    break;
                                }

                            }


                            break;
                        // 心跳
                        case "heart":
                            clearTimeout(reConnectTimer)
                            heartTimer = setTimeout(function () {
                                heart()
                            }, 10 * 1000);
                            break;
                    }
                }
            }

            // 心跳
            function heart() {
                clearTimeout(heartTimer)
                if (connection != null) {
                    var heartText = {
                        code: "heart",
                        text: "这只是一个心跳"
                    }
                    connection.send(JSON.stringify(heartText));
                }
                reConnectTimer = setTimeout(function () {
                    reConnect()
                }, 30 * 1000);
            }

            // 重连
            function reConnect() {
                clearTimeout(reConnectTimer)
                if (connection) {
                    connection.close()
                    connection = null
                }
                connection = null
                reConnectTimer = setTimeout(function () {
                    connectWS()
                }, 3 * 1000);
            }
            connectWS()

        }

        else {
            // 浏览器不支持 WebSocket
            console.log("您的浏览器不支持 WebSocket!");


            // 初始化接口
            //1、创建xhr的对象
            var xhr = new XMLHttpRequest();
            //2、调用open函数('请求类型','url')
            // xhr.open('post', 'http://1.82.219.239:8092/machine/init/old/ettp');
            xhr.open('post', 'https://pdjh.shizhi.tv/machine/init/old/ettp');
            //3、设置 Content-Type属性（固定写法）
            xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");//可以发送json格式字符串
            //4、调用send函数
            var data = JSON.stringify({
                machineName: tpname,
                sljgdm: sljgdm,
                userType: "ET条屏"
            });
            xhr.send(data);
            //5、监听事件
            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status === 200) {

                    var beginarr = xhr.status == 200 ? JSON.parse(xhr.responseText) : '{}';


                    var element = beginarr.tpxxVO;

                    //  修改标题
                    document.querySelector(".bar").innerHTML = element.dttsy;

                    //  修改业务类型
                    document.querySelector(".info-num").innerHTML = element.ckhm;
                    //  修改业务标题
                    document.querySelector(".info-text").innerHTML = element.slyw.join(' ');

                    if (element.slyw.join(' ').length > 5) {
                        document.querySelector(".info-text").innerHTML = '<div>' + element.slyw.join(' ').slice(0, 5) + '</div><div>' + element.slyw.join(' ').slice(5) + '</div>'


                        document.querySelector(".info-textbox").style.cssText = 'height:600px;white-space: wrap';
                        document.querySelector(".info-text").style.cssText = 'height:600px;white-space: wrap;line-height:150px; font-size: 120px;text-align: center; margin-top: -20px;';
                        // scroll();
                    }
                    // document.querySelector(".info-text1").innerHTML = element.slyw.join(' ');

                    //  修改图标以及颜色
                    var img = document.getElementById("myImage");

                    img.src = element.ckzt == '空闲' ? './image/frees.png' : element.ckzt === '暂停服务' ? './image/wites.png' : './image/xlb.png';
                    // document.querySelector('.info-typetext').style.color = element.ckzt === '空闲' ? '#00FFFF' : element.ckzt === '暂停服务' ? '#FFF700' : '#FF0000';
                    document.querySelector('.info-typetext').style.color = element.ckzt === '空闲' ? '#00FFFF' : element.ckzt === '暂停服务' ? '#FFF700' : '#00FFFF';
                    //  修改号码

                    document.querySelector(".info-typetext").innerHTML = element.ckzt === '空闲' ? "空闲中" : element.ckzt;
                    //  修改正在办理
                    document.querySelector(".screen-inginfo").innerHTML = element.ckzt != '空闲' && element.ckzt != '暂停服务' ? element.ckzt : "暂无";
                    // document.querySelector(".screen-inginfo").style.color = element.ckzt != '空闲' && element.ckzt != '暂停服务' ? "#00FFFF" : "#ffffff";

                    //  修改等待人数
                    document.querySelector(".screen-loadinginfo").innerHTML = element.ckzt != '暂停服务' && element.ddrs != '0' ? element.ddrs + '人' : "暂无";


                } else {
                    // console.log(1111);
                    // console.log('失败了');
                }
            }


            //轮询获取数据
            setTimeout(function () {
                lxtv()

            }, 800);
            function lxtv() {
                var pd = {};
                var xhr1 = new XMLHttpRequest();

                // xhr1.open('get', ' http://1.82.219.239:8092/machine/init/old/split/getRedis?machineName=' + tpname);// 请求的地址，即要给那里发送请求
                xhr1.open('get', 'https://pdjh.shizhi.tv/machine/init/old/split/getRedis?machineName=' + tpname);// 请求的地址，即要给那里发送请求

                xhr1.send();
                xhr1.onreadystatechange = function () {

                    if (xhr1.readyState == 4 && xhr1.status === 200) {
                        console.log(xhr1.status);

                        var screenarr = {};
                        screenarr = xhr1.status == 200 ? JSON.parse(xhr1.responseText) : '{}';

                        var arr = null;
                        arr = screenarr.code == '0' ? screenarr.msg : null;


                        if (arr != null) {


                            var list = JSON.parse(arr).tpxxVO;
                            //  修改标题
                            if (list.dttsy != document.querySelector(".bar").innerHTML) {
                                document.querySelector(".bar").innerHTML = list.dttsy;

                            }
                            if (list.ckhm != document.querySelector(".info-num").innerHTML) {
                                document.querySelector(".info-num").innerHTML = list.ckhm;
                            }
                            if (list.ckhm != document.querySelector(".info-num").innerHTML) {
                                //  修改业务类型
                                document.querySelector(".info-num").innerHTML = list.ckhm;

                            }
                            if (list.slyw.join(' ') != document.querySelector(".info-text").innerHTML) {
                                console.log(12345);
                                //  修改业务标题
                                document.querySelector(".info-text").innerHTML = list.slyw.join(' ');

                                if (list.slyw.join(' ').length > 5) {
                                    // scroll();
                                    document.querySelector(".info-text").innerHTML = '<div>' + list.slyw.join(' ').slice(0, 5) + '</div><div>' + list.slyw.join(' ').slice(5) + '</div>'


                                    document.querySelector(".info-textbox").style.cssText = 'height:600px;white-space: wrap';
                                    document.querySelector(".info-text").style.cssText = 'height:600px;white-space: wrap;line-height:150px; font-size: 120px;text-align: center; margin-top: -20px;';
                                }
                            }


                            var img = document.getElementById("myImage");

                            img.src = list.ckzt === '空闲' ? './image/frees.png' : list.ckzt === '暂停服务' ? './image/wites.png' : './image/xlb.png';

                            // document.querySelector('.info-typetext').style.color = list.ckzt === '空闲' ? '#00FFFF' : list.ckzt === '暂停服务' ? '#FFF700' : '#FF0000';
                            document.querySelector('.info-typetext').style.color = list.ckzt === '空闲' ? '#00FFFF' : list.ckzt === '暂停服务' ? '#FFF700' : '#00FFFF';
                            //  修改号码
                            document.querySelector(".info-typetext").innerHTML = list.ckzt === '空闲' ? "空闲中" : list.ckzt;
                            // 修改正在办理
                            document.querySelector(".screen-inginfo").innerHTML = list.ckzt != '空闲' && list.ckzt != '暂停服务' ? list.ckzt : "暂无";
                            // document.querySelector(".screen-inginfo").style.color = list.ckzt != '空闲' && list.ckzt != '暂停服务' ? "#00FFFF" : "#ffffff";

                            // 修改等待人数
                            document.querySelector(".screen-loadinginfo").innerHTML =
                                list.ckzt != '暂停服务' && list.ddrs != '0' ? list.ddrs + '人' : "暂无";
                        }


                        setTimeout(function () {
                            lxtv()

                        }, 800);
                    } else {
                        // console.log('失败了');
                    }

                };
            }
        }
    }
    WebSocketTest();


    // 文字滚动效果
    var tab = document.querySelector(".info-textbox");
    var oFig = document.querySelector(".intextbox");
    var tab1 = document.querySelector(".info-text");
    // var tab2 = document.querySelector(".info-text1");
    // function scroll() {
    //     var now = 0;
    //     setInterval(
    //         function () {
    //             now = now + 10;
    //             oFig.style.marginLeft = '-' + now + "px";
    //             if (now >= tab1.scrollWidth) {
    //                 now = 0;
    //             }
    //         }
    //         , 100);
    // }
    // scroll()


</script>

<script>
    // var container = document.getElementById("bar-scren");
    // function setSize() {
    //     var width = window.innerWidth || document.documentElement.clientWidth;
    //     var height = window.innerHeight || document.documentElement.clientHeight;
    //     // container.style.width = width + 'px';
    //     // container.style.height = height + 'px';
    //     document.getElementsByTagName('html')[0].style.fontSize = (width / 1920) + 'px';
    // }
    // window.addEventListener('resize', setSize);
    // setSize();
</script>
<style>
    /* =================专门用来写一些清除样式的代码==== */
    /* 清除所有标签自带的内外间距 */
    * {
        padding: 0;
        margin: 0;
    }

    /* 清除标签自带的下划线 */
    a,
    u {
        text-decoration: none;
    }

    /* 清除有序和无序列表自带的符号 */
    ol,
    ul {
        list-style: none;
    }

    /* 让倾斜标签不倾斜 */
    i,
    em {
        font-style: normal;
    }

    /* 让加粗标签不加粗 */
    b,
    strong {
        font-weight: normal;
    }

    /* 让文章标题标签字号和加粗都回归到正常 */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 16rem;
        font-weight: normal;
    }

    /* 清除自带的边框线 */
    input {
        border: none;
    }

    html {

        overflow: hidden;
    }

    body {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        ;
        overflow: hidden;
    }

    #bar-scren {
        width: 1920px;
        height: 1080px;


    }

    .bar {
        width: 100%;
        height: 100px;
        background-image: url(./image/bar.png);
        /* background-color: #4285f7; */
        /* background: linear-gradient(107deg, #4c74f7 9%, #3896f8 93%); */
        font-size: 70px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: center;
        padding: 20px 0;
        color: #ffffff;
        display: flex;
        justify-content: center;
        line-height: 100px;
        align-items: center;
    }

    .line {
        width: 100%;
        height: 1%;
        background: #00FFFF;
    }

    .screen {
        width: 100%;
        height: 89.2%;
        background-image: url(./image/bg.png);
        /* background-color: #4ca3fe; */
        /* background: linear-gradient(180deg, #4c74f7, #4ca3fe); */
        position: relative;
    }

    .screen-info {
        /* display: flex;
        justify-content: flex-start;
        align-items: center; */
        position: relative;
        padding: 3% 0;
    }

    .info-num {
        position: absolute;
        left: 20px;
        width: 250px;
        height: 250px;
        background: #ff0000;
        border-radius: 50%;
        font-size: 150px;
        font-family: DIN, DIN-Regular;
        top: 80px;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        line-height: 250px;
        /* display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 30rem 0 69rem; */
    }

    .info-textbox {
        width: 750px;
        height: 300px;
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
        left: 290px;
        /* font-size: 218rem; */
        /* background-color: #ff0909; */
    }

    /* 
    .intextbox {
        width: fit-content;
        margin-left: 0;
        display: flex;
        justify-content: flex-start;
        white-space: nowrap;
    } */

    .info-text {

        height: 300px;
        line-height: 300px;
        font-size: 150px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #ffffff;
        white-space: nowrap;
        float: left;


    }

    .info-text1 {
        height: 300px;
        line-height: 300px;
        font-size: 150px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #ffffff;
        white-space: nowrap;
        float: left;
    }

    /* 中线 */
    .info-line {
        width: 10px;
        height: 350px;
        background: #ffffff;

        position: absolute;
        left: 1065px;
    }

    .info-type {
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Medium;
        font-weight: 500;
        color: #ff0909;
        position: absolute;
        left: 1120px;
        /* left:1666px; */
    }

    .img {
        margin-top: 65px;

    }

    .info-typetext {
        width: 610px;
        height: 300px;
        /* background-color: #ff0909; */

        font-size: 150px;

        font-weight: 400;
        text-align: center;
        color: #fff700;
        margin-left: 20px;
        position: absolute;
        left: 1270px;
        line-height: 300px;
    }

    .screen-ing {
        width: 1370px;
        height: 170px;

        font-size: 130px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
        font-weight: 400;
        color: #ffffff;

        position: absolute;
        left: 480px;
        top: 480px;
    }

    .screen-ings {

        width: 1300px;
        height: 170px;

        font-size: 130px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
        font-weight: 400;
        color: #ffffff;

        position: absolute;
        left: 480px;
        top: 730px;
    }
</style>

</html>