<template>
    <div class="status content">
        
      <largeNav :active="3"></largeNav>
        <div class="content-left">
            <div class="left-view1">
                <div class="view-content">
                  <div>
                        <div class="input-50">
                            <div class="input-title">工作状态</div>
                            <div class="input">{{ newData.Data_3=='0'?'待机':'自动运行' }}</div>
                        </div>
                        <div class="input-50">
                            <div class="input-title">控制方式</div>
                            <div class="input">{{ newData.Data_2=='0'?'手动':'自动' }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="input-50">
                            <div class="input-title">自动工作方式</div>
                            <div class="input">{{ getType3(newData.Data_3) }}</div>
                        </div>
                          <div class="input-50 w-100">
                            <div class="input-title">吸肥泵压力 MP</div>
                            <div class="input green">{{ newData1.Data_35 }}</div>
                        </div>
                    </div>
                     <div>
                        <div class="input-50 w-100">
                            <div class="input-title">主管道累计流量 m³</div>
                            <div class="input green">{{ newData1.Data_33 }}</div>
                        </div>
                        <div class="input-50 w-100">
                            <div class="input-title">主管道瞬时流量 m³/H</div>
                            <div class="input green">{{ newData1.Data_34?Number(newData1.Data_34).toFixed(2):'0' }}</div>
                        </div>
                  </div>
                 
                    <!-- <div class="left-btn">
                        <div :class="newData.Data_4==1 ? 'active' : ''">水泵</div>
                        <div :class="newData.Data_5==1 ? 'active' : ''">吸肥泵</div>
                    </div> -->
                </div>

            </div>
            <div class="left-view2">
                <div class="main-title"><span>输出脉宽</span></div>
                <div class="view-content">
                    <div v-for="item, index in left2List" :key="index">
                        <div class="left" :style="item.img ? `background: url(${item.img}) no-repeat center;` : ''"><span>{{
                            item.title }}</span></div>
                        <!-- <div class="name">{{ item.name }}</div> -->
                        <div class="number">{{ item.number }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-center">
            <div class="center-title"><span>智能施肥机</span></div>
            <div>
                <div class="center-center">
                    <div class="view view-1">
                        <div class="name">PH实际值</div>
                        <div class="number">{{ countType5(newData1.Data_2) }}</div>
                    </div>
                    <!-- <div class="view view-2">
                        <div class="name">2#PH</div>
                        <div class="number">{{ newData.Data_10 }}</div>
                    </div>
                    <div class="view view-3">
                        <div class="name">1#EC</div>
                        <div class="number">{{ newData.Data_11 }}</div>
                    </div> -->
                    <div class="view view-4">
                        <div class="name">EC实际值</div>
                        <div class="number">{{ countType5(newData1.Data_1) }}</div>
                    </div>
                </div>
                <div class="center-bottom">
                    <div class="center-bottom-title"><span>田间阀状态</span></div>
                    <div class="center-bottom-flex">
                        <template v-for="item, index in 40">
                            <div v-if="newData['Data_'+(index+1+20)] == '1'">
                                <span> {{ index + 1 }}#</span>
                                <img src="../../assets/image/center-flex-active.png" alt="">
                            </div>
                        </template>
                    </div>
                </div>
            </div>

        </div>
        <div class="content-right">
            <div class="right-view1">
                     <div class="main-title"><span>设备状态 </span></div>
               
            </div>
            <div class="right-view2">
                    <div v-for="item, index in rightList2"
                        :class="newData[item.value] == 1 ? 'active' : ''">{{ item.label }}</div>
            </div>
            <div class="right-view3">
                <div class="main-title"><span>吸肥阀运行状态 </span></div>
                <div class="view-content">
                    <div v-for="item, index in rightList3" :key="index">
                        <div class="name">{{ item.name }}</div>
                        <div class="number">{{ item.number }}</div>
                    </div>
                </div>
            </div>
            <div class="right-view4">
                <el-button type="primary" @click="openModel">修改设定值</el-button>
            </div>
        </div>
                <el-dialog title="修改设定值" :append-to-body="true" :visible.sync="statusShow" width="70%">
            <div class="model-title">修改设定值</div>
            <div class="model-sel largeScreen4 scroll">
                <div v-for="item, index in statusList" :key="index">
                  <div class="w-100 label">
                      {{ item.label }}
                  </div>
                    <div>
                        <span>当前状态：</span>
                          <el-switch
                    v-if="index==0"
  v-model="item.value"
    active-value="1"
     inactive-value="0"
  active-text="自动"
  @change='setData($event,item)'
  inactive-text="手动">
</el-switch>
  <el-switch
                    v-if="index!=0"
  v-model="item.value"
  @change='setData($event,item)'
    active-value="1"
     inactive-value="0">
</el-switch>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="statusShow = false">确认</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import largeNav from '@/components/large-nav.vue'
import vueSeamless from 'vue-seamless-scroll'
import { log } from 'video.js'
export default {
    data() {
        return {
            pageTimer: null,
            left1Act: [0,0],
            openType: '',
            centerAct: 0,
            right2Index: [],
            inputData: [],
            deviceDetail: null,
            centerBottom: [],
            numberList: [273, 278, 283, 288, 293, 298],
            inputData1: [],
            loading: true,
           newData:{},//pinfengGetstate接口
           newData1:{},//pinfengGetrtdata接口
           rightList2:[
              {label:'水泵',value:'Data_4'},
              {label:'吸肥泵',value:'Data_5'},
              {label:'1#搅拌',value:'Data_16'},
              {label:'2#搅拌',value:'Data_17'},
              {label:'3#搅拌',value:'Data_18'},
              {label:'4#搅拌',value:'Data_19'},
              {label:'5#搅拌',value:'Data_20'},
                ],
           rightList3:[{
                    name: '1#',
                    number: '0',
                }, {
                    name: '2#',
                    number: '0',
                }, {
                    name: '3#',
                    number: '0',
                }, {
                    name: '4#',
                    number: '0',
                }, {
                    name: '5#',
                    number: '0',
                },],
                left2List:[
                {
                    title: '1#',
                    name:'',
                    number: '0%',
                    img: ''
                }, {
                    title: '2#',
                    name:'',
                    number: '0%',
                    img: ''
                }, {
                   title: '3#',
                    name:'',
                    number: '0%',
                    img: ''
                }, {
                    title: '4#',
                    name:'',
                    number: '0%',
                    img: ''
                }, {
                    title: '5#',
                    name:'',
                    number: '0%',
                    img: ''
                },
            ],
            statusShow:false,
            statusList:[
            {label:'控制方式',value:0,name:'Data_2',changeName:'Data_1'},
            {label:'1#搅拌',value:0,name:'Data_16',changeName:'Data_4'},
            {label:'2#搅拌',value:0,name:'Data_17',changeName:'Data_5'},
            {label:'3#搅拌',value:0,name:'Data_18',changeName:'Data_6'},
            {label:'4#搅拌',value:0,name:'Data_19',changeName:'Data_7'},
            {label:'酸搅拌',value:0,name:'Data_20',changeName:'Data_8'},
            {label:'水泵',value:0,name:'Data_4',changeName:'Data_2'},
            {label:'肥泵',value:0,name:'Data_5',changeName:'Data_3'},
            {label:'1#阀',value:0,name:'Data_21',changeName:'Data_19'},
            {label:'2#阀',value:0,name:'Data_22',changeName:'Data_20'},
            {label:'3#阀',value:0,name:'Data_23',changeName:'Data_21'},
            {label:'4#阀',value:0,name:'Data_24',changeName:'Data_22'},
            {label:'5#阀',value:0,name:'Data_25',changeName:'Data_23'},
            {label:'6#阀',value:0,name:'Data_26',changeName:'Data_24'},
            {label:'7#阀',value:0,name:'Data_27',changeName:'Data_25'},
            {label:'8#阀',value:0,name:'Data_28',changeName:'Data_26'},
            {label:'9#阀',value:0,name:'Data_29',changeName:'Data_27'},
            {label:'10#阀',value:0,name:'Data_30',changeName:'Data_28'},
            {label:'11#阀',value:0,name:'Data_31',changeName:'Data_29'},
            {label:'12#阀',value:0,name:'Data_32',changeName:'Data_30'},
            {label:'13#阀',value:0,name:'Data_33',changeName:'Data_31'},
            {label:'14#阀',value:0,name:'Data_34',changeName:'Data_32'},
            {label:'15#阀',value:0,name:'Data_35',changeName:'Data_33'},
            {label:'16#阀',value:0,name:'Data_36',changeName:'Data_34'},
            {label:'17#阀',value:0,name:'Data_37',changeName:'Data_35'},
            {label:'18#阀',value:0,name:'Data_38',changeName:'Data_36'},
            {label:'19#阀',value:0,name:'Data_39',changeName:'Data_37'},
            {label:'20#阀',value:0,name:'Data_40',changeName:'Data_38'},
            {label:'21#阀',value:0,name:'Data_41',changeName:'Data_39'},
            {label:'22#阀',value:0,name:'Data_42',changeName:'Data_40'},
            {label:'23#阀',value:0,name:'Data_43',changeName:'Data_41'},
            {label:'24#阀',value:0,name:'Data_44',changeName:'Data_42'},
            {label:'25#阀',value:0,name:'Data_45',changeName:'Data_43'},
            {label:'26#阀',value:0,name:'Data_46',changeName:'Data_44'},
            {label:'27#阀',value:0,name:'Data_47',changeName:'Data_45'},
            {label:'28#阀',value:0,name:'Data_48',changeName:'Data_46'},
            {label:'29#阀',value:0,name:'Data_49',changeName:'Data_47'},
            {label:'30#阀',value:0,name:'Data_50',changeName:'Data_48'},
            {label:'31#阀',value:0,name:'Data_51',changeName:'Data_49'},
            {label:'32#阀',value:0,name:'Data_52',changeName:'Data_50'},
            {label:'33#阀',value:0,name:'Data_53',changeName:'Data_51'},
            {label:'34#阀',value:0,name:'Data_54',changeName:'Data_52'},
            {label:'35#阀',value:0,name:'Data_55',changeName:'Data_53'},
            {label:'36#阀',value:0,name:'Data_56',changeName:'Data_54'},
            {label:'37#阀',value:0,name:'Data_57',changeName:'Data_55'},
            {label:'38#阀',value:0,name:'Data_58',changeName:'Data_56'},
            {label:'39#阀',value:0,name:'Data_59',changeName:'Data_57'},
            {label:'40#阀',value:0,name:'Data_60',changeName:'Data_58'}]
        }
    },
    components: { vueSeamless,largeNav },
    computed: {
        defaultOption() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        },
 
   
    },
    //清除监听
    beforeDestroy() {
        const that = this;
        this.$bus.$off('refreshData')
        that.pageTimer && clearInterval(that.pageTimer)
    },
    mounted() {
        const that = this;
        if (localStorage.getItem('token')) {
               this.dataInit()
            setTimeout(() => {
                that.pageTimer && clearInterval(that.pageTimer)
                that.pageTimer = setInterval(() => {
                     that.dataInit()
                }, 10000);
            }, 0);
        } else {
            //   this.$router.push({ name: 'login' })
        }
        // this.$bus.$on('refreshData', (res) => {
        //     that.getEqbyid();
        // })
    },
    methods: {
        //countType计算类型 
        //0是原数据 
        //1是原数据-400 
        //2是原数据/10 
        //3是(原数据-400) / 10
        countType1(data) {
            var num = data - 400
            return num.toFixed(2)
        },
        countType2(data) {
            var num = data / 10
            return num.toFixed(2)
        },
        countType3(data) {

            var num = (data - 400) / 10
            return num.toFixed(2)
        },
        countType4(data) {

            var num = (data - 1000) / 10
            return num.toFixed(2)
        },
   countType5(data) {
    if(data){
          var num = data / 100
            return num.toFixed(2)
    }else{
        return 0
    }
          
        },
     
         compare(property) {
            return function (a, b) {
                let value1 = a[property];
                let value2 = b[property];
                return value1 - value2;
            };
        },
      
     
        countData(data) {
            if (data) {
                return data
            } else {
                return 0
            }
        },
        padString(str, length) {
            return str.padStart(length, '0');
        },
        countData100(data) {
            if (data) {
                return data / 100
            } else {
                return 0
            }
        },
         getType3(index) {
          if (index == 0) {
                return  '灌溉模式'
            } else if (index == 1) {
                return  'EC施肥'
            } else if (index == 2) {
                return  '定量施肥'
            } else if (index == 3) {
                return  '定时施肥'
            }
        },
      
        //进水泵和出水泵状态
        getData30() {
            var num =this.inputData['30']?this.inputData['30']:0
            var number = this.padString(num.toString(2), 2)
            this.left1Act=number
        },
        dataInit() {
            this.api.pinfengGetstate().then(res=>{
                if(res.data.code==200){
                    this.newData=res.data.data.result.data
                    this.rightList3=[
                {
                    name: '1#',
                    number:`${this.newData.Data_6=='1'?'开启':'关闭'}`,
                }, {
                    name: '2#',
                    number:`${this.newData.Data_8=='1'?'开启':'关闭'}`,
                }, {
                    name: '3#',
                    number:`${this.newData.Data_10=='1'?'开启':'关闭'}`,
                }, {
                    name: '4#',
                   number:`${this.newData.Data_12=='1'?'开启':'关闭'}`,
                }, {
                    name: '5#',
                    number:`${this.newData.Data_14=='1'?'开启':'关闭'}`,
                },
            ]
            this.left2List=[
                {
                    title: '1#',
                    name:'',
                    number: this.newData.Data_7+'%',
                    img: ''
                }, {
                    title: '2#',
                    name:'',
                    number: this.newData.Data_9+'%',
                    img: ''
                }, {
                   title: '3#',
                    name:'',
                    number: this.newData.Data_11+'%',
                    img: ''
                }, {
                    title: '4#',
                    name:'',
                    number: this.newData.Data_13+'%',
                    img: ''
                }, {
                    title: '5#',
                    name:'',
                    number: this.newData.Data_15+'%',
                    img: ''
                },
            ]
                }else{
                     this.newData={}
                }
                
            })
            this.api.pinfengGetrtdata().then(res=>{
                if(res.data.code==200){
                    this.newData1=res.data.data.result.data
                }else{
                     this.newData1={}
                }
                
            })
        },
        setData(e,item){
                var data={name:item.changeName,value:e}
                this.api.pinfengSetdevice(data).then(res=>{
                   
                    if(res.data.code==200){
                        this.$message.success('修改成功')
                        this.newData[item.name]=e
                    }else{
                         this.$message.warning('修改失败')
                    }
                })
        },
        openModel(){
            this.statusList= this.statusList.map(item=>{
                var data={
                    ...item,
                    value:this.newData[item.name]
                }
               return data
            })
        setTimeout(() => {
                this.statusShow=true
        }, 0);
           
        },
        checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }

            return i;
        },
      
    },

}
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    padding: 0 3.6%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    >div {
        height: 100%;
    }

    .content-left {
        width: 25.8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .left-view1 {
            width: 100%;

            .view-content {
                height:400px;
                padding: 20px 16px 37px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;

                >div {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                }

                .input-50 {
                    width: calc((100% - 14px) / 2);
              
                    
                }

                .left-btn {
                    justify-content: space-between;

                    >div {
                        // margin-right: 20px;
                        min-width: 140px;
                        height: 44px;
                        padding: 0 5px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: url(../../assets/image/left1-btn.png) no-repeat center;
                        background-size: 100% 100%;
                        font-size: 24px;
                        font-family: Alibaba PuHuiTi;
                        font-weight: 500;
                        color: #A2C9F8;
                        cursor: pointer;

                        &.active {
                            background: url(../../assets/image/left1-btn-act.png) no-repeat center;
                            background-size: 100% 100%;
                            color: #fff;
                        }
                    }
                }
            }
        }

        .left-view2 {
            width: 100%;

            .view-content {
                height: 350px;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-row-gap: 10px; //纵向间隔
                grid-column-gap: auto; //横向间隔
                padding: 20px 20px 0;

                >div {
                    display: flex;
                    align-items: center;

                    .left {
                        width: 65px;
                        height: 65px;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        background: url(../../assets/image/left2-icon0.png) no-repeat center;
                        background-size: 100% 100%;

                        span {
                            font-size: 34px;
                            font-family: Oswald;
                            font-weight: 500;
                            color: #FFFFFF;

                            background: linear-gradient(0deg, #F9FBFF 0%, #74EFFF 100%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }

                    .name {
                        font-size: 20px;
                        font-family: Alibaba PuHuiTiR;
                        font-weight: 400;
                        color: #FFFFFF;
                        width: 49px;
                        padding-left: 5px;
                    }

                    .number {
                        font-size: 32px;
                        font-family: Oswald;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-left: 10px;
                        background: linear-gradient(180deg, #34AFF6 0%, #EDFDFF 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
            }
        }
    }

    .content-right {
        width: 25.8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        >div {
            width: 100%;
        }

        .right-view3 {
            width: 100%;

            .view-content {
                padding: 20px 20px 0;
                // display: grid;
                // grid-template-columns: repeat(3, 1fr);
                // grid-row-gap: 30px; //纵向间隔
                // grid-column-gap: auto; //横向间隔
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                height: 350px;
                >div {
                 
                    flex-shrink: 0;
                    width:130px;
                    height: 117px;
                    background: url(../../assets/image/right-view3.png) no-repeat center;
                    background-size:86px 100%;
                       padding: 20px 15px 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;

                    .name {
                        font-size: 20px;
                        font-family: Alibaba PuHuiTi;
                        font-weight: 500;
                        color: #FFFFFF;

                        background: linear-gradient(0deg, #F9FBFF 0%, #74EFFF 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }

                    .number {
                        width: 100%;
                        height: 32px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 18px;
                        font-family: Alibaba PuHuiTi;
                        font-weight: 500;
                        color: #FFFFFF;
                    }
                }
            }
        }

        .right-view2 {
            width: 100%;
          
            white-space: nowrap;
                display: grid;
	grid-template-columns: repeat(2,1fr);
grid-row-gap:30px;//纵向间隔
grid-column-gap:20px;//横向间隔
padding: 20px 0;
                >div {
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 24px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 500;
                    color: #A9D1FF;
                    background: url(../../assets/image/right-view2.png) no-repeat center;
                    background-size: 100% 100%;
                    cursor: pointer;

                    &.active {
                        background: url(../../assets/image/right-view2-act.png) no-repeat center;
                        background-size: 100% 100%;

                        text-shadow: 0px 2px 0px rgba(0, 111, 128, 0.5);
                        color: #FFFFFF;
                    }
                }
        }
        .right-view4{
            display: flex;
            margin-top: 20px;
            align-items: center;
            justify-content: flex-end;
        }
        .main-table-title {
            width: 100%;
            height: 41px;
            display: flex;
            align-items: center;
            background: url(../../assets/image/main-title.png) no-repeat center;
            background-size: 100% 100%;

            >div {
                width: calc(100% / 3);
                height: 100%;
                text-align: center;
                line-height: 41px;
                font-size: 16px;
                font-family: Alibaba PuHuiTiR;
                font-weight: 400;
                color: #FFFFFF;
            }
        }

        .table-content {
            width: 100%;
            height: 314px;
            overflow: hidden;

            .seamless-warp {
                width: 100%;
                height: 100%;




                .tr {
                    width: 100%;
                    height: calc(314px / 8);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                    font-family: Alibaba PuHuiTiR;
                    font-weight: 400;
                    color: #FFFFFF;
                    border-bottom: 1px solid rgba(216, 227, 238, 0.1);
                    ;

                    &:nth-child(odd) {
                        background: rgba(0, 84, 170, 0.25);
                    }

                    &:nth-child(even) {

                        background: rgba(23, 158, 228, 0.22);
                    }
                }

                .td {
                    width: calc(100% / 3);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    line-height: 100%;
                    font-family: Alibaba PuHuiTiR;

                    &.name {
                        >div {
                            width: 80px;
                            height: 24px;
                            background: rgba(23, 158, 228, 0.3);
                            border: 1px solid rgba(20, 197, 255, 0.5);
                            line-height: 24px;
                            text-align: center;
                            white-space: nowrap;
                        }
                    }
                }

            }
        }
    }

    .content-center {
        width: calc(100% - 51.6%);
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 60px 20px 240px;

        >div {
            width: 100%;
        }

        .center-title {
            width: 660px;
            height: 68px;
            background: url(../../assets/image/center-title.png) no-repeat center;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
                font-size: 40px;
                font-family: Alimama ShuHeiTiB;
                color: #F9CB9D;
                // text-shadow: 0px 2px 0px rgba(0,55,160,0.75);

                background: linear-gradient(180deg, #F3F9FF 0%, #A4C9F3 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .center-center {
            width: 100%;
            position: relative;

            .view {
                width: 222px;
                height: 234px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;

                .name {
                    font-size: 27px;
                    font-family: Alimama ShuHeiTiB;
                    color: #FFFFFF;
                }

                .number {
                    font-size: 36px;
                    font-family: Oswald;
                    font-weight: 500;
                    color: #3CFDFF;
                }

                &.view-1,
                &.view-2 {
                    background: url(../../assets/image/PH.png) no-repeat center;
                    background-size: 100% 100%;
                }

                &.view-3,
                &.view-4 {
                    background: url(../../assets/image/EC.png) no-repeat center;
                    background-size: 100% 100%;
                }

                &.view-1 {
                    position: absolute;
                    bottom: 245px;
                    left: -20px;
                }

                &.view-2 {
                    position: absolute;
                    bottom: 30px;
                    left: 87px;
                }

                &.view-3 {
                    position: absolute;
                    bottom: 30px;
                    right: 87px;
                }

                &.view-4 {
                    position: absolute;
                    bottom: 245px;
                    right: -20px;
                }
            }
        }

        .center-bottom {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .center-bottom-title {
            width: 427px;
            height: 54px;
            background: url(../../assets/image/center-title.png) no-repeat center;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
                font-size: 24px;
                font-family: Alimama ShuHeiTiB;
                color: #F9CB9D;
                // text-shadow: 0px 2px 0px rgba(0,55,160,0.75);

                background: linear-gradient(180deg, #F3F9FF 0%, #A4C9F3 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .center-bottom-flex {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            >div {
                flex-shrink: 0;
                width: 64px;
                height: 64px;
                background: url(../../assets/image/center-flex.png) no-repeat;
                background-size: 100% 100%;
                background-position: center center;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                font-family: Alibaba PuHuiTi;
                font-weight: 500;
                color: #FFFFFF;
                cursor: pointer;

                >img {
                    width: 81px;
                    height: 81px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 1;
                }

                span {
                    position: relative;
                    z-index: 2;
                }

                &.active {
                    background: unset;
                }
            }
        }
    }
}
</style>
  