<template>
    <div class="rightMenu-wrap">
        <div class="left-border"></div>
        <div class="content">
            <div class="list-item" v-if="pageType == 1">
                <div class="item-content">
                    <div class="item-title"><span></span>智能监测</div>
                    <div>
                        <ul class="monitor-list">
                            <li v-for="(item,index) in statisticsDevCount" :key="index">
                                <p><b>{{item.devOnline}}</b>/{{item.devNum}}</p>
                                <span>{{item.name}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="list-item" v-if="pageType == 1">
                <div class="item-content">
                    <div class="item-title"><span></span>巡检情况</div>
                    <div class="item-detail">暂无数据
                       <!-- <div class="condition-title">检查总数<span>208</span></div>
                         <div ref="echart1" style="width:100%; height:148px"></div> -->
                    </div>
                </div>
            </div>

            <div class="list-item" v-if="pageType == 1">
                <div class="item-content">
                    <div class="item-title"><span></span>累计预警工程排行</div>
                    <div class="item-detail">暂无数据
                        <!-- <div ref="echart2" style="width:100%; height:177px"></div> -->
                    </div>
                </div>
            </div>

            <div class="list-item" v-if="pageType == 1">
                <div class="item-content">
                    <div class="item-title"><span></span>设备预警</div>
                    <div class="item-detail">
                        <ul class="warning-list">
                            <li :class="{'active': warningIndex == index}" v-for="(item,index) in warningData" :key="index" @click="selectEchartData(index)">
                                {{item.num}}
                                <span>{{item.name}}</span>
                            </li>
                        </ul>
                        <div ref="echart3" style="width:100%; height:151px"></div>
                    </div>
                </div>
            </div>

            <div class="viedo-list" v-if="pageType == 2">
                <div class="video-title">
                    <span>视频回放</span>
                    <el-select v-model="value" size="small" placeholder="请选择">
                        <el-option
                            v-for="item in dateList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        <span style="float: left">时间：</span>
                        <span style="float: right; font-size: 13px">{{ item.label.split("：")[1] }}</span>
                        </el-option>
                    </el-select>
                </div>
                <div class="video-content">
                    <ul>
                        <li v-for="i in 20" :key="i">
                            <!-- <video src=""></video> -->
                            <img src="./../../../assets/images/bigScreen/demo.jpg" style="width: 90%; height: 130px; margin: 0 auto; display: block;"/>
                            <div class="video-message"><span>2020-06-13</span></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="right-border"></div>
    </div>
</template>

<script>
import echarts from 'echarts4';;
import {
    selectDevCountStatistics,
    selectDevCurrentAlarmCount,
    selectDischargingSevenDayAlarmList,
    selectEnvironmentSevenDayAlarmList,
    selectVideoSevenDayAlarmList,
    selectLifterSevenDayAlarmList,
    selectTowerSevenDayAlarmList,
} from './../../../assets/js/api/companyBigScreen.js'
export default {
    name: "rightMenu",
    props:{
        pageType:{
            type: Number,
            default: 1
        },
        projectSn:{
            type: String,
            default: ""
        }
    },
    data(){
        return{
            dateList: [
                {
                    label: "时间：2021-06-13",
                    value: "1"
                }
            ],
            value: "",
            monitorData: [
                {
                    name: '扬尘',
                    params: '4',
                    num: '103'
                },
                {
                    name: '塔吊',
                    params: '4',
                    num: '103'
                },
                {
                    name: '升降机',
                    params: '4',
                    num: '103'
                },
                {
                    name: '卸料',
                    params: '4',
                    num: '103'
                },
                {
                    name: '水表',
                    params: '4',
                    num: '103'
                },
                {
                    name: '烟感',
                    params: '4',
                    num: '103'
                },
                {
                    name: '电表',
                    params: '4',
                    num: '103'
                },
                {
                    name: '养护室',
                    params: '4',
                    num: '103'
                }
            ],
            warningData: [],
            echart1: Object,
            option1: {},
            echart2: Object,
            option2: {},
            echart3: Object,
            option3: {},
            statisticsDevCount: [],
            warningIndex: 0,
        }
    },
    watch:{
        pageType(val, oldval){
            if(val == 1){
                this.$nextTick(()=>{
                    this.createEchart1();
                    this.createEchart2();
                    this.getDevCurrentAlarmCount();
                })
            }
        },
        projectSn(val, oldval){
            console.log(val)
            this.getDevCountStatistics();
            this.getDevCurrentAlarmCount();
        }
    },
    created(){
        // this.projectSn = JSON.parse(sessionStorage.getItem('vuex')).userInfo.sn;
        this.getDevCountStatistics();
        this.getDevCurrentAlarmCount();
    },
    mounted(){
        if(this.pageType == 1){
            this.createEchart1();
            this.createEchart2();
            this.createEchart3();
        }
    },
    methods: {
        createEchart1(){
            let echart1 = echarts.init(this.$refs['echart1']);
            this.echart1 = echart1
            echart1.clear();
            this.option1 = {
                legend: {
                    show:false
                },
                grid: {
                    right: "5%",
                    top: "20%",
                    left: "5%",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    boundaryGap: true,
                    data: ["安全检查","综合检查",'质量检查'],
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                        //	margin:15,
                        textStyle: {
                            color: "rgba(255,255,255,0.4)",
                            fontStyle: "normal",
                            fontSize: 12
                        }
                    },
                    axisTick: {
                        //坐标轴刻度相关设置。
                        show: false
                    },
                    splitLine: {
                        //坐标轴在 grid 区域中的分隔线。
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                },
                yAxis: [{
                    type: "value",
                    splitNumber: 6,
                    axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,0.4)",
                        fontSize: 12
                    }
                    },
                    axisLine:{
                        show: true,
                        lineStyle:{
                            type: 'dashed',
                            color: 'rgba(255,255,255,0.2)'
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255, 0.2)",
                            type: 'dashed'
                        }
                    }
                }
                ],
                series: [{
                    name: '巡检情况',
                    type: "pictorialBar",
                    barWidth: "60%",
                    label: {
                            show: true,
                            position: 'top',
                            color: "rgba(255,255,255, 0.8)"
                    },
                    symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAA+CAYAAAC1BDz9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4NjI5QTRCRDg3RDExRUJCQjVERThGMEY5QkU2NTFGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ4NjI5QTRDRDg3RDExRUJCQjVERThGMEY5QkU2NTFGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDg2MjlBNDlEODdEMTFFQkJCNURFOEYwRjlCRTY1MUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDg2MjlBNEFEODdEMTFFQkJCNURFOEYwRjlCRTY1MUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7SyNc1AAAU6ElEQVR42uxca4wd110/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",
                    data: [23,84,101,74,87]
                }],
            };
            echart1.setOption(this.option1);
        },
        createEchart2(){
            let echart2 = echarts.init(this.$refs['echart2']);
            this.echart2 = echart2
            echart2.clear();

            this.option2 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '0%',
                    right: '10%',
                    bottom: '0',
                    top: "0",
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    show: false
                },
                yAxis: {
                    type: 'category',
                    data: ['御花园一期…', '御花园一期…', '御花园一期…', '御花园一期…', '御花园一期…',"御花园一期…"],
                    axisLabel: {
                        color: "rgba(255,255,255,0.8)",
                        formatter: function(value){
                            let valueTxt = ''
                            if (value.length > 5) {
                                valueTxt = value.substring(0,5) + '...'
                            } else {
                                valueTxt = value
                            }
                            return valueTxt
                        }
                    },
                },
                series: [
                    {
                        name: '累计预警次数',
                        type: 'bar',
                        data: [ 100, 50, 30, 5, 15, 85 ],
                        label : {
                            normal : {
                                show : true,//显示数字
                                position : 'right',
                                color: "#fff"
                            }
                        },
                        barHeight: '12',
                        symbol: 'circle',
                        itemStyle:{
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                            [
                                {offset: 0, color: 'rgba(2,251,256,0.8)'},
                                {offset: 1, color: 'rgba(238,115,25,0.8)'}
                            ])
                        },
                        barCategoryGap: 14,
                        // barWidth: "40%"
                    }
                ]
            };
            echart2.setOption(this.option2);
        },
        createEchart3(val1,val2){
            let echart3 = echarts.init(this.$refs['echart3']);
            this.echart3 = echart3
            echart3.clear();
            let data1 = val1 ?  val1 : []
            let data2 = val2 ?  val2 : []
            this.option3 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '3%',
                    right: '20',
                    bottom: '3%',
                    top: '20',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: data1,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.6)',
                                type: 'dashed',
                                show: false,
                                fontSize: 10
                            }
                        },
                        nameTextStyle: {
                            fontSize: 10
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                        },
                        boundaryGap: false
                        }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine:{
                            show: false,
                            lineStyle:{
                                type: 'dashed',
                                color: 'rgba(255,255,255,0.3)'
                            },
                        },
                        axisTick: {
                            show: false
                        },
                        nameTextStyle:{
                            color: "#fff"
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0.3)',
                                type: 'dashed'
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: '设备预警',
                        type: 'line',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                            [
                                {offset: 0, color: 'rgba(252,201,16,0.3)'},
                                {offset: 1, color: 'rgba(238,115,25,0.3)'}
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: data2,
                        symbol: 'circle',
                        symbolSize: 5,
                        itemStyle: {
                            normal: {
                               color: "#FCC710",//折线点的颜色
                               lineStyle: {
                                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                [
                                    {offset: 0, color: 'rgba(252,201,16,1)'},
                                    {offset: 1, color: 'rgba(238,115,25,1)'}
                                ])//折线的颜色
                                }
                            }
                        }
                    }
                ]
            }
            echart3.setOption(this.option3);
        },
        // 获取智能检测数据
        getDevCountStatistics(){
            let data = {
                sn: this.projectSn
            }
            selectDevCountStatistics(data).then(res=>{
                // console.log(res)
                if(res.code == 200){
                    let arr = []
                    for(let key in res.result){
                        arr.push(res.result[key])
                    }
                    this.statisticsDevCount = arr
                    // console.log(this.statisticsDevCount)
                }
            })
        },
        // 获取每日设备预警数
        getDevCurrentAlarmCount(){
            let data = {
                sn: this.projectSn
            }
            selectDevCurrentAlarmCount(data).then(res=>{
                // console.log(res)
                if(res.code == 200){
                    let arr = []
                    for(let i in res.result){
                        var obj = {}
                        if(i == 'dischargingAlarmNum'){
                            obj.name = "卸料"
                            obj.num = res.result[i]
                            arr.push(obj)
                        } else if(i == 'environmentAlarmNum'){
                            obj.name = "扬尘"
                            obj.num = res.result[i]
                            arr.push(obj)
                        }else if(i == 'lifterAlarmNum'){
                            obj.name = "升降机"
                            obj.num = res.result[i]
                            arr.push(obj)
                        }else if(i == 'towerAlarmNum'){
                            obj.name = "塔吊"
                            obj.num = res.result[i]
                            arr.push(obj)
                        }else if(i == 'videoAlarmCount'){
                            obj.name = "视频"
                            obj.num = res.result[i]
                            arr.push(obj)
                        }
                    }
                    this.warningData = arr
                    this.selectEchartData(this.warningIndex)
                }
            })
        },
        // 切换预警展示数据
        selectEchartData(index){
            this.warningIndex = index
            if(this.warningData[index].name == '卸料'){
                this.getDischargingSevenDayAlarmList()
            } else if(this.warningData[index].name == '扬尘'){
                this.getEnvironmentSevenDayAlarmList()
            } else if(this.warningData[index].name == '视频'){
                this.getVideoSevenDayAlarmList()
            } else if(this.warningData[index].name == '升降机'){
                this.getLifterSevenDayAlarmList()
            } else if(this.warningData[index].name == '塔吊'){
                this.getTowerSevenDayAlarmList()
            }
            // console.log(this.warningData[index])
        },
        // 获取卸料七日内数据
        getDischargingSevenDayAlarmList(){
            let data = {
                sn: this.projectSn
            }
            selectDischargingSevenDayAlarmList(data).then(res=>{
                // console.log(res)
                if(res.code == 200){
                    let arr1 = [],
                        arr2 = [];
                   res.result.forEach(item=>{
                       let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
                       arr1.push(str)
                       arr2.push(item.num)
                   })
                   this.createEchart3(arr1,arr2)
                }
            })
        },
        // 获取扬尘七日内数据
        getEnvironmentSevenDayAlarmList(){
            let data = {
                sn: this.projectSn
            }
            selectEnvironmentSevenDayAlarmList(data).then(res=>{
                // console.log(res)
                if(res.code == 200){
                    let arr1 = [],
                        arr2 = [];
                   res.result.forEach(item=>{
                       let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
                       arr1.push(str)
                       arr2.push(item.num)
                   })
                   this.createEchart3(arr1,arr2)
                }
            })
        },
        // 获取视频预警七日内数据
        getVideoSevenDayAlarmList(){
            let data = {
                sn: this.projectSn
            }
            selectVideoSevenDayAlarmList(data).then(res=>{
                // console.log(res)
                if(res.code == 200){
                    let arr1 = [],
                        arr2 = [];
                   res.result.forEach(item=>{
                       let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
                       arr1.push(str)
                       arr2.push(item.num)
                   })
                   this.createEchart3(arr1,arr2)
                }
            })
        },
        // 获取升降机七日内数据
        getLifterSevenDayAlarmList(){
            let data = {
                sn: this.projectSn
            }
            selectLifterSevenDayAlarmList(data).then(res=>{
                // console.log(res)
                if(res.code == 200){
                    let arr1 = [],
                        arr2 = [];
                   res.result.forEach(item=>{
                       let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
                       arr1.push(str)
                       arr2.push(item.num)
                   })
                   this.createEchart3(arr1,arr2)
                }
            })
        },
        // 获取塔吊七日内数据
        getTowerSevenDayAlarmList(){
            let data = {
                sn: this.projectSn
            }
            selectTowerSevenDayAlarmList(data).then(res=>{
                // console.log(res)
                if(res.code == 200){
                    let arr1 = [],
                        arr2 = [];
                   res.result.forEach(item=>{
                       let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
                       arr1.push(str)
                       arr2.push(item.num)
                   })
                   this.createEchart3(arr1,arr2)
                }
            })
        },

    }
}
</script>

<style lang="less" scoped>
.rightMenu-wrap{
   position: absolute;
   right: 0;
   top: 50px;
   width: 24%;
   bottom: 0;
   height:calc(100% - 50px);
   z-index: 10;
   display: flex;
}
.left-border{
    width: 34px;
    height: 100%;
    background: url("./../../../assets/images/bigScreen/right-border.png") center no-repeat;
    background-size: contain;
}
.right-border{
    width: 34px;
    height: 100%;
    background: url("./../../../assets/images/bigScreen/body-right.png") center no-repeat;
    background-size: contain;
}
.content{
    flex: 1;
    width: calc(100% - 68px);
    height: 100%;
    background-color: rgba(18, 65, 68, .2);
}

   .list-item{
       position: relative;
       width: 100%;
       margin-bottom: 12px;
       padding: 13px 0;
       .item-content{
           background-color: rgba(18, 65, 68,0.3);
           .item-title{
               height: 22px;
               color: #02FBE2;
               font-size: 14px;
               position: relative;
               padding-left: 19px;
               display: flex;
               align-items: center;
               margin-bottom: 18px;
               span{
                   width: 3px;
                   height: 13px;
                   background: #02FBE2;
                   margin-right: 6px;
               }
           }
           .item-title::before{
               content: "";
               position: absolute;
               left: 0;
               top: 0;
               width: 40px;
               height: 100%;
               background: linear-gradient(to right, rgba(2, 251, 226, 0.5),rgba(0,0,0,0));
           }
       }
   }
   .list-item::before{
       content: "";
       display: block;
       background: url("./../../../assets/images/bigScreen/top-border.png") center no-repeat;
       background-size: 100%;
       width: 100%;
       height: 10px;
       position: absolute;
       top: 0;
       left: 0;
   }
   .list-item::after{
       content: "";
       display: block;
       background: url("./../../../assets/images/bigScreen/bottom-border.png") center no-repeat;
       background-size: 100%;
       width: 100%;
       height: 10px;
       position: absolute;
       bottom: 0;
       left: 0;
   }

.item-detail{
    padding: 0 20px;
    box-sizing: border-box;
    padding-bottom: 6px;
}
.item-detail:nth-child(2){
    line-height: 180px;
    text-align: center;
    width: 100%;
    height:180px;
}
.item-detail:nth-child(3){
    line-height: 180px;
    text-align: center;
    width: 100%;
    height:180px;
}
.monitor-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 25%;
        height: 74px;
        background: url('./../../../assets/images/bigScreen/num-border.png') no-repeat center;
        margin-bottom: 9px;
        color: #02FBE2;
        b{
            font-weight: normal;
            color: #FFDF10;
        }
        span{
            color: rgba(255, 255, 255, 0.8);
            margin-top: 2px;
        }
    }
}
.condition-title{
    display: flex;
    color: rgba(255, 255, 255, 0.8);
    align-items: center;
    justify-content: flex-end;
    margin-top: -30px;
    span{
        width: 65px;
        height: 35px;
        display: block;
        background: url('./../../../assets/images/bigScreen/inspect-border.png') no-repeat center;
        font-size: 20px;
        font-weight: 600;
        color: #02FBE2;
        text-align: center;
        line-height: 35px;
        margin-left: 15px;
        position: relative;
    }
}

.warning-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #02FBE2;
        font-size: 16px;
        margin: 0 2px;
        width: 69px;
        opacity: 0.5;
        cursor: pointer;
        height: 58px;
        background: url('./../../../assets/images/bigScreen/item-border.png') no-repeat center;
        span{
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            padding-bottom: 6px;
        }
    }
    .active{
        opacity: 1;
    }
}

.viedo-list{
    height: calc(100% - 10px);
    .video-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10px;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 10px;
        /deep/ .el-input{
            display: flex;
            align-items: center;
            margin-right: 18px;
        }
        /deep/ .el-input__inner{
            height: 34px;
            background: rgba(5, 12, 17, 0.5);
            color: rgba(255, 255, 255, 0.8);
            border-radius: 16px;
            border: 1px solid rgba(4, 134, 123, 0.28);
        }
        /deep/ .el-input__icon{
            color: #02FBE2;
            line-height: 34px;
        }
        /deep/ .el-input__inner:focus {
            outline: none;
            border: 1px solid rgba(4, 134, 123, 0.8);
        }
    }
    .video-content{
        height: calc(100% - 40px);
        overflow: auto;
        ul{
            li{
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                padding: 10px 0;
                .video-message{
                    margin-left: 5%;
                    margin-top: 10px;
                    color: rgba(255, 255, 255, 0.8);
                }
            }
        }
    }
}

/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar{
  width: 4px;
  height: 26px;
  background-color: transparent;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track{
  background-color: transparent;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: rgba(4, 106, 169,0.3);
  box-shadow: inset 0 0 5px rgba(4, 186, 169,0.3);
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button{
  height: 0;
  background-color: rgba(4, 186, 169,0.3);
}
 
// 两个滚动条的交汇处
::-webkit-scrollbar-corner{
  background-color: transparent;
}

div{
  /*三角箭头的颜色*/
  scrollbar-arrow-color: rgba(4, 186, 169,0.3);
  /*滚动条滑块按钮的颜色*/
  scrollbar-face-color: rgba(4, 186, 169,0.3);
  /*滚动条整体颜色*/
  scrollbar-highlight-color: rgb(12,23,35);
  /*滚动条阴影*/
  scrollbar-shadow-color: transparent;
  /*滚动条轨道颜色*/
  scrollbar-track-color: transparent;
  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
  scrollbar-3dlight-color:rgba(4, 186, 169,0.3);
  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
  scrollbar-darkshadow-color: rgba(4, 186, 169,0.3);
  /*滚动条基准颜色*/
  scrollbar-base-color: rgba(4, 186, 169,0.3);
}
</style>