<template>
    <div class="mmtt111">
        <!-- <span @click="aa1" style="font-size:36px;color:#fff;position:relative;cursor: pointer;">1111</span> -->
        <div v-if="!isShow">
            <a-form :selfUpdate="true" :form="formScreen" class="formDiv" @submit="handleSubmit">
                <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="口令">
                    <a-input type="password" id='inputId' v-focus="true" ref="id" v-decorator="['passowrd',{ rules: [{ required: true, message: '请输入口令' }] }]" onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);" :readonly="true" autocomplete="new-password" autoComplete="new-password" placeholder="请输入口令" />
                </a-form-item>
                <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
                    <a-button type="primary" html-type="submit">
                        确定
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
        <div v-else>
            <!-- <div> -->
            <div class="static" v-if="!imgCarouselShow">
                <div class="s_left">
                    <h4 class="f24 cf s_title fwb">交付中心实时数据
                        <!-- <span @click="aa1">1111</span> <span @click="aa2">2222</span> -->
                        <div class="f14 pr">
                            <!-- <span>昨日18:15-当日18:15</span> -->
                            <!-- <span class="right-h5">延误 {{delayNum.delay18}} 逾期 {{delayNum.delay36}}</span> -->
                        </div>
                    </h4>
                    <div class="tth" style="margin-top:48px;position:relative;">
                        <div style="display:table-row;font-weight:500">
                            <div class="ttd tc1 fwb" style="">排名</div>
                            <div class="ttd tc2 fwb" style="">姓名</div>
                            <!-- <div class="ttd tc7" style=""></div> -->
                            <!-- @click="ani" -->
                            <div class="ttd tc3 fwb" style="">简历数</div>
                            <!-- <div class="ttd">已处理</div> -->
                            <!-- <div class="ttd">约面数</div> -->
                            <div class="ttd tc4 fwb" style=""><span @click="playAudio1">约面丨到面</span>丨<span @click="playAudio2">通过</span></div>
                            <!-- @click="playAudio1" -->
                            <!-- <div class="ttd" @click="playAudio2">通过数</div> -->
                            <div class="ttd  tc5 fwb" style="" @click="playAudio3">　入职数</div>
                            <!-- @click="aaa" -->
                            <div class="ttd tc6 fwb">转化率丨漏斗</div>
                            <!-- @click="aaa" -->
                        </div>
                    </div>
                    <a-carousel effect="scrollx" ref="welcome" autoplay :autoplaySpeed="autoSpeed" :speed="1000" :pauseOnHover="false">
                        <div v-for="(item1, index1) in array" v-bind:key="index1">
                            <div v-for="(item, index) in item1" v-bind:key="index">
                                <div class="tth" style="margin-top:48px;position:relative;margin-top: 0 !important;">
                                    <div style="display:table-row;font-weight:500">
                                        <div class="ttd tc1" style="">{{index1 * pageSize + index + 1}}</div>
                                        <div class="ttd tc2" :class="showUserName_curr == item.userName ?'numeAni' : ''" style="">{{item.aliasName}}</div>
                                        <!-- <div class="ttd tc7"></div> -->
                                        <div class="ttd tc3">{{item.resumeNum}}</div>
                                        <div class="ttd tc4" style="">{{item.signUps}} | {{item.arrived}} | {{item.passed}}</span></div>
                                        <div class="ttd tc5" style="">{{item.entry}}</span>
                                        <!-- /{{parseFloat(item.entryMonthNum).toFixed(1).replace(/(.0)$/,'')}} -->
                                    </div>
                                        <div class="ttd tc6">
											{{item.transferRatio}}丨<span style="display: inline-block;">{{item.funnel}}</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-carousel>
                    <!-- </div> -->
                    <!--  <div class="f14 cf tl" style="margin-left: 146px;margin-top: 10px;">
                            （昨天 18:30 - 今天 18:30  招聘数据）
                    </div> -->
                </div>
                <div class="clb"></div>
                <div class=" fullPage" v-if="ifani">
                    <div class="bgppp">
                    </div>
                    <div class="animate__animated animate__zoomInDown animate_h animate__infinite animate__zoomOutUp">
                        <!-- {{showUserName}} -->
						墨竹/王泽流
                        <!-- 12 -->
                    </div>
                </div>
            </div>
           <!--  <div class="imgPlay" @click="hideImg" v-if="imgCarouselShow">
                <a-carousel autoplay effect="fade" :autoplaySpeed="5000" :speed="1000" :dots="false" :pauseOnHover="false">
                    <div class="tcImg" v-for="(image, index) in slideImages">
                        <div class="pr">
                            <h3 class="imgText" v-text="image.aliasName">1</h3>
                            <img :src="image.url" class="mw100" alt="" />
                        </div>
                    </div>
                </a-carousel>
            </div> -->
        </div>
    </div>
</template>
<script>
import { axios, doAsyncHttpRequest } from '@/utils/request';
import { isNotEmptyCheck, timeagoOfDateStr } from '@/utils/commonUtil';
import {
 screen
} from "../../api/screen";
// import { serverAddress, numFormat3 } from '@/utils/global';
// import store from '@/store';

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};
const formTailLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 8, offset: 6 },
};
var timeClear;
var timer //定时器
var flag = false;
var timeStamp = 0;

var tempJson = { "classify": 0, "message": [] }
export default {
    directives: {
        focus: {
            inserted: function(el, { value }) {
                console.log(el, { value })
                if (value) {
                    el.focus();
                }
            }
        }
    },

    data() {
        return {
            recordTodayList: [],
            delayNum: { delay18: 0, delay36: 0 },
            formLayout: 'horizontal',
            formScreen: this.$form.createForm(this),
            isShow: true,
            formItemLayout,
            formTailLayout,
            passowrd: '',
            // audioUrl1: 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/money.wav', //声音文件
            // audioUrl2: 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/mario.wav', //声音文件
            // audioUrl3: 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/huanhu.wav', //声音文件
            //websocket参数===================start
            // wsUri: 'ws://127.0.0.1:9004/webSocket/' + this.$route.query.id,
            // wsUri: 'ws://127.0.0.1:9004/webSocket/',
            isWebSocket: false, //判断是否链接成功！
            reconnect: 0,
            ifani: false,
            showUserName: '',
            showUserName_curr: '专员B',
            nameArray: [],
            daomianStyle: '',
            tongguoStyle: '',
            ruzhiStyle: '',
            array: [],
            isAuto: true,
            autoSpeed: 10000,
            pageSize: 10,
            // pageSize: 5,

            imgCarouselShow: false,
            // [{"allotNum":1,"disposeNum":0,"entryMonthNum":15,"entryNum":0,"funnelRate7":"2.03","interviewNum":0,"interviewPassNum":0,"interviewPassPercent":"3.23","interviewedNum":1,"showScreen":0,"userId":236530,"userName":"百合/刘月霞"}

            //websocket参数===================end
            //所有店铺信息
            storeImages: [],
            //轮播的店铺图片
            slideImages: [],
            slideImgNum: 10,
        }
    },
    mounted() {
        var that = this;
        // document.getElementById('inputId').focus();
        // this.$refs.id.focus();
        // document.querySelector('html').setAttribute('style', 'background-image: url(http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/screen_bg.png);background-size: 100% 100%;min-height:100vh;');
        // // overflow:hidden;
        // document.querySelector('body').setAttribute('style', 'background: none');
	
	// 	that.initWebSocket();
	// 	that.initClock();
		
	// 	if (that.isShow) {
	// 	    setInterval(() => that.websocketHeartCheck(), 60000); //每隔1分钟刷新一次
	// 	}
	
		that.getData()
	   
	    timer = setInterval(() => that.getData(), 60000*5); //每隔5分钟刷新一次


    },
	
	
    destroyed() {
        // this.websock.close() //离开路由之后断开websocket连接
    },
    beforeDestroy() { //在组件生命周期结束的时候销毁。
        var that = this;
		if(timer){
			clearInterval(timer);
		}
        document.querySelector('html').removeAttribute('style', '')
        document.querySelector('body').removeAttribute('style', '')
    },

    methods: {
		async getData(){
			var that = this;
			try {
			  const data = await screen();
			  console.log(data);
			  if (data.status === 200) {
				  that.array = [];
				  // this.array = data.data.data.list
				  for (var i = 0; i < data.data.data.list.length; i += that.pageSize) {
				      this.array.push(data.data.data.list.slice(i, i + that.pageSize));
				  }
			  } else {
			    console.log(1);
			  }
			} catch (error) {
			  console.log(error);
			  this.$message.warning(error.message);
			}
			
		},
		
        showTargetResume(item) {
          /*if(item.targetResume - item.monthEntryNum <= 0) {
            return "（★）";
          }
          return "（" + new Number(item.targetResume - item.monthEntryNum).toFixed(1) + "）";*/
          return "（" + item.monthEntryNum + "/" + item.targetResume + "）";
        },
        ani() { //点击专员
            var that = this;

            console.log(that.nameArray);
            return new Promise((resolve, reject) => {
                // alert(that.showUserName);
                if (that.showUserName != '' && flag) {
                    this.ifani = true;
                    that.playAudio3();
                    setTimeout(function() {
                        that.ifani = false;
                        flag = false;
                        resolve();
                    }, 15000)
                }
            })
        },
        func() {
            var that = this;
            // console.log(that.nameArray);
            // console.log("==================");
            //1.到面 2.通过 3.入职
            clearTimeout(timeClear);

            if (this.nameArray[0].type == '1') {

                that.showUserName_curr = this.nameArray[0].name
                that.daomianStyle = this.nameArray[0].name;
                that.playAudio1();


                let pageInt = parseInt(this.nameArray[0].indexA / that.pageSize)
                console.log("到面===" + pageInt);
                setTimeout(function() {
                    that.autoSpeed = 10000;
                    that.$refs.welcome.goTo(pageInt, true);
                }, 0);


                setTimeout(function() {
                    that.showUserName_curr = '';
                    that.daomianStyle = '';
                    // console.log(JSON.stringify(that.nameArray));
                    that.nameArray.shift();
                    if (that.nameArray.length > 0) {
                        that.func();

                        that.imgCarouselShow = false;

                    } else {

                        // that.imgCarouselShow = false;
                        // that.showPictures(90000);

                        that.autoSpeed = 10000;
                    }
                }, 10000)

            } else if (this.nameArray[0].type == '2') {
                that.showUserName_curr = this.nameArray[0].name
                that.tongguoStyle = this.nameArray[0].name;
                that.playAudio2();


                let pageInt = parseInt(this.nameArray[0].indexA / that.pageSize)
                console.log("通过===" + pageInt);
                console.log("序列===" + this.nameArray[0].indexA);
                console.log("↑↑↑↑↑↑↑");

                // that.$refs.welcome.goTo(pageInt, true)
                setTimeout(function() {
                    that.autoSpeed = 10000;
                    that.$refs.welcome.goTo(pageInt, true)

                }, 0);


                setTimeout(function() {
                    that.showUserName_curr = '';
                    that.tongguoStyle = '';
                    // console.log(JSON.stringify(that.nameArray));
                    that.nameArray.shift();
                    if (that.nameArray.length > 0) {
                        that.func();
                        that.imgCarouselShow = false;
                    } else {
                        // debugger;
                        // that.showPictures(90000);
                        that.autoSpeed = 10000;
                    }
                }, 10000)
            } else if (this.nameArray[0].type == '3') {
                that.showUserName = this.nameArray[0].name;
                that.showUserName_curr = this.nameArray[0].name
                that.ruzhiStyle = this.nameArray[0].name;

                // if (that.showUserName != '') {
                // that.playAudio3();
                // that.ani();

                let pageInt = parseInt(this.nameArray[0].indexA / that.pageSize)
                console.log("入职===" + pageInt);
                // that.$refs.welcome.goTo(pageInt, true)
                setTimeout(function() {
                    that.autoSpeed = 30000;
                    that.$refs.welcome.goTo(pageInt, true)
                }, 0);
                flag = true;
                // }
                console.log("00=====================")
                that.ani().then(() => {
                    setTimeout(function() {
                        flag = false;
                        console.log("11111=====================")
                        that.nameArray.shift();
                        that.showUserName_curr = '';
                        // that.showUserName = '';
                        that.ruzhiStyle = '';
                        // console.log(JSON.stringify(that.nameArray));
                        if (that.nameArray.length > 0) {
                            console.log("=====================")
                            console.log(new Date());

                            setTimeout(function() {
                                that.func();
                            }, 15000)


                            that.imgCarouselShow = false;
                        } else {
                            // debugger;
                            console.log("33333=====================")

                            // that.showPictures(90000);
                            that.autoSpeed = 10000;
                        }
                    }, 10000)
                })
            }


            // }
        },
        aa1() {
            var that = this;
            console.log(tempJson)

            var tempList = tempJson.message;
            that.recordTodayList = JSON.parse(JSON.stringify(tempList));

            tempJson.message[7].entryNum = tempJson.message[7].entryNum + 1;
            tempJson.message[8].entryNum = tempJson.message[8].entryNum + 1;
            tempJson.message[8].interviewPassNum = tempJson.message[8].interviewPassNum + 1;

            console.log(that.recordTodayList);
            console.log(tempList);

            // debugger;
            if (timeStamp == 0 || new Date().getTime() - timeStamp >= 180 ) {

                console.log("ssssssssssssss");
                timeStamp = new Date().getTime();
                if (tempJson.classify == 0) {
                    // var tempList = JSON.parse(e.data);
                    if (that.recordTodayList != null && that.recordTodayList.length > 0) {
                        //到面
                        that.recordTodayList.forEach(item1 => {
                            tempList.forEach((item2, index) => {
                                if (item1.userId == item2.userId && item1.interviewedNum != item2.interviewedNum) {
                                    this.nameArray.push({ type: '1', name: item1.userName, daomianStyle: item1.userName, indexA: index });
                                }
                            });
                        });
                        //面试通过
                        that.recordTodayList.forEach(item1 => {
                            tempList.forEach((item2, index) => {
                                if (item1.userId == item2.userId && item1.interviewPassNum != item2.interviewPassNum) {
                                    this.nameArray.push({ type: '2', name: item1.userName, tongguoStyle: item1.userName, indexA: index });
                                }
                            });
                        });
                        //入职
                        that.recordTodayList.forEach(item1 => {
                            tempList.forEach((item2, index) => {
                                if (item1.userId == item2.userId && item1.entryNum != item2.entryNum) {
                                    this.nameArray.push({ type: '3', name: item1.userName, ruzhiStyle: item1.userName, indexA: index });
                                }
                            });
                        });

                        console.log(this.nameArray);

                        if (this.nameArray.length >= 1) {
                            this.func();
                            that.imgCarouselShow = false;
                        }

                    }

                }

            } else if (tempJson.classify == 1) {

                that.delayNum = tempJson.message;

            }

        },
        websocketonmessage(e) { //数据接收
            // const redata = JSON.parse(e.data);
            var that = this;
            console.log("接收消息", e.data)
            console.log(new Date());

            // 180000

            if (isNotEmptyCheck(e.data) && (timeStamp == 0 || new Date().getTime() - timeStamp >= 180000 )) {
                timeStamp = new Date().getTime();
                var tempJson = JSON.parse(e.data);

                if (tempJson.classify == 1) {
                    var tempList = tempJson.message.cols.concat(tempJson.message.pmls);

                    that.array = [];
                    for (var i = 0; i < tempList.length; i += that.pageSize) {
                        this.array.push(tempList.slice(i, i + that.pageSize));
                    }
					for (var i = 0; i < this.array.length; i ++) {
					   i.disposeNum = 100
					}
                    // console.log(that.recordTodayList);
                    // console.log(tempList);
                    // console.log(that.recordTodayList == tempList);


                    if (that.recordTodayList != null && that.recordTodayList.length > 0) {
                        //到面
                        that.recordTodayList.forEach(item1 => {
                            tempList.forEach((item2, index) => {
                                if (item1.userId == item2.userId && item1.interviewedNum != item2.interviewedNum && item2.interviewedNum > 0) {
                                    // for (var i = 0; i <= Math.floor(item2.interviewedNum - item1.interviewedNum); i++) {
                                    this.nameArray.push({ type: '1', name: item1.userName, daomianStyle: item1.userName, indexA: index });
                                    // }
                                }
                            });
                        });
                        //面试通过
                        that.recordTodayList.forEach(item1 => {
                            tempList.forEach((item2, index) => {
                                if (item1.userId == item2.userId && item1.interviewPassNum != item2.interviewPassNum && item2.interviewPassNum > 0) {
                                    // for (var i = 0; i <= Math.floor(item2.interviewPassNum - item1.interviewPassNum); i++) {
                                    this.nameArray.push({ type: '2', name: item1.userName, tongguoStyle: item1.userName, indexA: index });
                                    // }
                                }
                            });
                        });
                        //入职
                        that.recordTodayList.forEach(item1 => {
                            tempList.forEach((item2, index) => {
                                if (item1.userId == item2.userId && item1.entryNum != item2.entryNum && item2.entryNum > 0) {
                                    this.nameArray.push({ type: '3', name: item1.userName, ruzhiStyle: item1.userName, indexA: index });
                                }
                            });
                        });
                        if (this.nameArray.length >= 1) {
                            this.func();
                            that.imgCarouselShow = false;
                        }

                    }

                    that.recordTodayList = tempList;

                } else if (tempJson.classify == 0) {

                    that.delayNum = tempJson.message;

                }

            }
        },

        playAudio1() { //点击约面 到面
			var that = this;
            let audio1 = new Audio()
            audio1.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/money.wav"
            audio1.play();
			this.showUserName_curr = '木槿/韩丽蕊'
			setTimeout(function() {
			    that.showUserName_curr = '';
			}, 5000)

        },
        playAudio2() {
				var that = this;
            let audio2 = new Audio()
            audio2.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/mario.wav"
            audio2.play();
			this.showUserName_curr = '木槿/韩丽蕊'
			setTimeout(function() {
			    that.showUserName_curr = '';
			}, 5000)
			

        },
        playAudio3() {
			var that = this;
            let audio3 = new Audio()
			 this.ifani = true;
			
            audio3.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/huanhu.wav"
            audio3.play();
			
			setTimeout(function() {
			    that.ifani = false;
			}, 15000)
			

        },
        playClockAudio(type) {
            let clockAudio = new Audio()
            var _src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/5416.wav";
            if (type == 2) {
                _src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/4031076792.mp3";
            }
            clockAudio.src = _src;
            clockAudio.play();

        },

        initClock() { //初始化闹钟，每天12：00，13：30执行
            var that = this;
            console.log('初始化闹钟')
            setInterval(() => {
                var d = new Date();
                var hour = d.getHours();
                var minues = d.getMinutes();
                var seconds = d.getSeconds();
                if (hour - 11 == 0 && minues - 59 == 0) { //12：00
                    setTimeout(function() {
                        that.playClockAudio(1);
                    }, 1000 * (60 - seconds));

                }
                if (hour - 13 == 0 && minues - 29 == 0) { //13：30
                    setTimeout(function() {
                        that.playClockAudio(2);
                    }, 1000 * (60 - seconds));
                }

                //that.playClockAudio();


                //console.log(hour + ":" + minues);
            }, 60000); //每隔1分钟刷新一次
        },
        initWebSocket() { //初始化weosocket
            var wsUri = serverAddress + '/websocket/statisticsServer/' + this.reconnect;
            wsUri = wsUri.replace("https", "ws").replace("http", "ws");
            this.websock = new WebSocket(wsUri);
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onopen = this.websocketonopen;
            this.websock.onerror = this.websocketonerror;
        },
        websocketonopen() { //连接建立之后执行send方法发送数据
            this.isWebSocket = true;
            this.reconnect = 0;
            console.log("链接成功！", this.isWebSocket)
            // this.websocketsend(JSON.stringify(actions));
        },
        websocketonerror() { //连接建立失败重连
            console.log("连接建立失败");

            var that = this;
            that.reconnect = 1;

            setTimeout(function() {
                that.initWebSocket();
            }, 2000);

            // this.$message.info("重新建立链接中");
            // this.initWebSocket();
        },

        websocketsend(data) { //数据发送
            let actions = {
                "msg": data
            };
            console.log("您正在发送消息", actions);
            if (this.isWebSocket) {
                this.websock.send(JSON.stringify(actions));
            } else {
                console.log("请先建立链接");
                // this.$message.error("请先建立链接")
            }

        },
        websocketclose(e) { //关闭
            console.log('断开连接', e);
            this.isWebSocket = false;
            this.websock.close();
            this.initWebSocket();
        },
        websocketHeartCheck() {
            console.log("readyState===", this.websock.readyState);

            if (this.websock.readyState == 2 || this.websock.readyState == 3) {
                this.reconnect = 1;
                this.initWebSocket();
            } else {
                console.log('连接中...');
            }
            this.websocketsend("保持联系");
        },
        handleSubmit(e) {
            var that = this;
            e.preventDefault();
            this.formScreen.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                    that.passowrd = values.passowrd;
                    that.checkPagePassowrd();

                }
            });
        },
        checkPagePassowrd() {
            var that = this;
            axios({
                url: '/admin/v3/user/allotOrder/checkPagePassowrd',
                method: 'post',
                data: {
                    passowrd: that.passowrd
                },
            }).then(response => {
                console.log(response);
                if (response.status == 200) {


                    // 测试的时候需要注释

                    that.initWebSocket();
                    that.initClock();

                    if (that.isShow) {
                        setInterval(() => that.websocketHeartCheck(), 60000); //每隔1分钟刷新一次
                    }
                    // 测试的时候需要注释
                    that.isShow = false;
                } else {
                    that.isShow = true;
                    that.$message.error(response.msg);
                }
            })
        },
        timeagoOfDateStr(_time) {

            return timeagoOfDateStr(_time);

        },

    },
}
</script>
<style scoped>
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/ant.css';
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/animate.min.css';
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/bigScreen1.css';
div{
	color: #fff;
}
.mmtt111{
  background-image: url('http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/screen_bg.png');background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height:100vh;
}
.imgPlay .ant-carousel .slick-slide img {
    display: inline-block;
}


.imgPlay .slick-list {
    display: flex;
    align-items: center;
}


.imgPlay .ant-carousel {

    background-color: rgba(0, 0, 0, 1);
}


.imgPlay .tcImg {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
}


.imgPlay .mw100 {
    max-width: 100%;
    max-height: 100vh;
}


.imgPlay .imgText {
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    font-size: 36px;
    margin-left: 24px;
    color: #FFF;
}

.imgPlay .slick-track {
    display: flex;
    align-items: center;
}




.ant-carousel>>>.slick-slide {
    /*text-align: center;*/
    /*height: 560px;
    line-height: 160px;
    background: #364d79;*/
    color: #fff;
    overflow: hidden;
}

.ant-carousel>>>.slick-slide h3 {
    color: #fff
}

.tth {
    width: 100%;
}

.tc1, .tc7 {
    width: 4%;
    min-width: 70px;
}

.tc2 {
    width: 25%;
    padding-left: 60px;
    text-align: left;
}

.tc3 {
    width: 10%;
}

.tc4 {
    width: 25%;
}

.tc5 {
    width: 14%;
}

@media screen and (max-width: 1400px) {
    .s_left {
        width: 96%;
    }

    .tc1 {
        min-width: 50px;
    }

}
</style>
<style>
::-webkit-scrollbar {
    display: none;
}
</style>