<template>
    <div class="status content">
        <div class="content-left">
            <div class="left-view1">
                <div class="main-title"><span>灌溉状态 </span></div>
                <div class="view-content">
                    <div>
                        <div class="input-50">
                            <div class="input-title">灌溉剩余时长</div>
                            <div class="input">{{ countData(inputData['36']) }}</div>
                        </div>
                        <div class="input-50">
                            <div class="input-title">灌溉瞬时流量</div>
                            <div class="input">{{ countData(inputData['28']) }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="input-50">
                            <div class="input-title">本次灌溉量</div>
                            <div class="input">{{ countData(inputData['37']) }}</div>
                        </div>
                        <div class="input-50">
                            <div class="input-title">启动方式</div>
                            <div class="input green">{{ openType }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="input-50">
                            <div class="input-title">使用灌溉配方号</div>
                            <div class="input">{{ countData(inputData['31']) }}</div>
                        </div>
                        <div class="input-50">
                            <div class="input-title">执行灌溉组号</div>
                            <div class="input">{{ countData(inputData['38']) }}</div>
                        </div>
                    </div>
                    <div class="left-btn">
                        <div :class="left1Act == 1 || left1Act == 3 ? 'active' : ''">进水泵</div>
                        <div :class="left1Act == 2 || left1Act == 3 ? '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 v-if="deviceDetail">{{ deviceDetail.stationName }}</span></div>
            <div>
                <div class="center-center">
                    <div class="view view-1">
                        <div class="name">目标PH</div>
                        <div class="number">{{ countData100(inputData['6']) }}</div>
                    </div>
                    <div class="view view-2">
                        <div class="name">实测PH</div>
                        <div class="number">{{ countData100(inputData['8']) }}</div>
                    </div>
                    <div class="view view-3">
                        <div class="name">实测EC</div>
                        <div class="number">{{ countData100(inputData['9']) }}</div>
                    </div>
                    <div class="view view-4">
                        <div class="name">目标EC</div>
                        <div class="number">{{ countData100(inputData['7']) }}</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 64">
                            <div v-if="centerBottom.indexOf(index) != -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-table-title">
                    <div>传感器数据</div>
                    <div>数值</div>
                    <div>AD值</div>
                </div>
                <div class="table-content">
                    <div class="seamless-warp" v-if="!loading">
                        <div class="tr" v-for="item, index in tableList1" :key="index" :class="'tr-' + (index + 1)">
                            <div class="td name">
                                <div>
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="td number">{{ item.data }}</div>
                            <div class="td ADnumber">{{ item.ADdata }}</div>
                        </div>
                    </div>
                    <!-- <vue-seamless class="seamless-warp" :data="tableList1" :class-option="defaultOption">
                     
                    </vue-seamless> -->
                </div>
            </div>
            <div class="right-view2">
                <div>
                    <div v-for="item, index in rightList2.slice(0, 4)"
                        :class="right2Index.indexOf(index) != -1 ? 'active' : ''">{{ item }}</div>
                </div>
                <div>
                    <div v-for="item, index in rightList2.slice(4, 8)"
                        :class="right2Index.indexOf(index + 4) != -1 ? 'active' : ''">{{ item }}</div>
                </div>
            </div>
            <div class="right-view3">
                <div class="main-title"><span>配肥速度 (L/h) </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>
    </div>
</template>
<script>
import vueSeamless from 'vue-seamless-scroll'
export default {
    data() {
        return {
            pageTimer: null,
            left1Act: -1,
            openType: '',
            left2List: [
                {
                    title: 'A',
                    name: 'A肥',
                    number: '26%',
                    img: ''
                }, {
                    title: 'B',
                    name: 'B肥',
                    number: '26%',
                    img: ''
                }, {
                    title: 'C',
                    name: 'C肥',
                    number: '26%',
                    img: ''
                }, {
                    title: 'D',
                    name: 'D肥',
                    number: '26%',
                    img: ''
                }, {
                    title: 'E',
                    name: 'E肥',
                    number: '26%',
                    img: ''
                }, {
                    title: 'F',
                    name: 'F肥',
                    number: '26%',
                    img: ''
                }, {
                    title: 'G',
                    name: 'G肥',
                    number: '26%',
                    img: ''
                }, {
                    title: '',
                    name: '酸',
                    number: '26%',
                    img: require('../../assets/image/left2-icon1.png')
                },
            ],
            rightList3: [
                {
                    name: 'A肥',
                    number: '0',
                }, {
                    name: 'B肥',
                    number: '0',
                }, {
                    name: 'C肥',
                    number: '0',
                }, {
                    name: 'D肥',
                    number: '0',
                }, {
                    name: 'E肥',
                    number: '0',
                }, {
                    name: 'F肥',
                    number: '0',
                }, {
                    name: 'G肥',
                    number: '0',
                }, {
                    name: '酸肥',
                    number: '0',
                },
            ],
            centerAct: 0,
            tableList1: [{
                name: 'PH传感器',
                data: '1#PH 0',
                ADdata: '2#PH 0',
            }, {
                name: 'EC传感器',
                data: '1#EC 0',
                ADdata: '2#EC 0',
            }, {
                name: '传感器1',
                data: 0,
                ADdata: 0,
            }, {
                name: '传感器2',
                data: 0,
                ADdata: 0,
            }, {
                name: '传感器3',
                data: 0,
                ADdata: 0,
            }, {
                name: '传感器4',
                data: 0,
                ADdata: 0,
            }, {
                name: '传感器5',
                data: 0,
                ADdata: 0,
            }, {
                name: '传感器6',
                data: 0,
                ADdata: 0,
            },],
            right2Index: [],
            rightList2: ['外控信号1#',
                '外控信号2#',
                '外控信号3#',
                '外控信号4#',
                '高液位信号',
                '中液位信号',
                '低液位信号',
                '电机信号',],
            inputData: [],
            deviceDetail: null,
            centerBottom: [],
            numberList: [273, 278, 283, 288, 293, 298],
            inputData1: [],
            loading: true,
        }
    },
    components: { vueSeamless },
    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')) {
            that.getEqbyid();
            this.getReg()
            setTimeout(() => {
                that.pageTimer && clearInterval(that.pageTimer)
                that.pageTimer = setInterval(() => {
                    that.getEqbyid();
                }, 5000);
            }, 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)
},
        getTypeData(dataCode, typeCode) {
            var typeList = this.$store.state.typeList

            var countType = 0
            typeList.forEach((el, index) => {

                if (el.value == this.inputData1[typeCode]) {
                    countType = el.countType
                }
            })


            if (countType == 0) {
                return this.inputData[dataCode]
            } else if (countType == 1) {
                return this.countType1(this.inputData[dataCode])
            } else if (countType == 2) {
                return this.countType2(this.inputData[dataCode])
            } else if (countType == 3) {
                return this.countType3(this.inputData[dataCode])
            }
        },
        getTabelList() {

            var inputData = this.inputData
            this.tableList1[0] = {
                name: 'PH传感器',
                data: '1#PH ' + this.countData100(inputData['51']),
                ADdata: '2#PH ' + this.countData100(inputData['53']),
            }

            this.tableList1[1] = {
                name: 'EC传感器',
                data: '1#EC ' + this.countData100(inputData['52']),
                ADdata: '2#EC ' + this.countData100(inputData['54']),
            }

            this.tableList1[2] = {
                name: '传感器1',
                data: this.getTypeData('40', '273'),
                ADdata: inputData['39'],
            }

            this.tableList1[3] = {
                name: '传感器2',
                data: this.getTypeData('42', '278'),
                ADdata: inputData['41'],
            }

            this.tableList1[4] = {
                name: '传感器3',
                data: this.getTypeData('44', '283'),
                ADdata: inputData['43'],
            }

            this.tableList1[5] = {
                name: '传感器4',
                data: this.getTypeData('46', '288'),
                ADdata: inputData['45'],
            }

            this.tableList1[6] = {
                name: '传感器5',
                data: this.getTypeData('48', '293'),
                ADdata: inputData['47'],
            }

            this.tableList1[7] = {
                name: '传感器6',
                data: this.getTypeData('50', '298'),
                ADdata: inputData['49'],
            }
            this.loading = false
        },
        getEqbyid() {
            var store = this.$store.state
            this.deviceDetail = store.equipmentList[store.equipmentIndex - 1]
            this.dataInit()

        },
        getcenterBottom() {
            this.centerBottom = []
            var inputData = this.inputData
            var list1 = this.padString(inputData['32'].toString(2), 16)
            var list2 = this.padString(inputData['33'].toString(2), 16)
            var list3 = this.padString(inputData['34'].toString(2), 16)
            var list4 = this.padString(inputData['35'].toString(2), 16)
            var number = 16
            for (var i = 0; i < number; i++) {
                if (Number(list1[list1.length - 1 - i])) {
                    this.centerBottom.push(i)
                }
            }
            for (var j = 0; j < number; j++) {
                if (Number(list2[list2.length - 1 - j])) {
                    this.centerBottom.push(j + 16)
                }
            }
            for (var k = 0; k < number; k++) {
                if (Number(list3[list3.length - 1 - k])) {
                    this.centerBottom.push(k + 32)
                }
            }
            for (var l = 0; l < number; l++) {
                if (Number(list4[list4.length - 1 - l])) {
                    this.centerBottom.push(l + 48)
                }
            }
        },
        getrightList3() {
            var list = [19, 20, 21, 22, 23, 24, 25, 27]
            list.forEach((el, index) => {
                this.rightList3[index].number = this.inputData[el]
            })
        },
        getleft2List() {
            var list = [10, 11, 12, 13, 14, 15, 16, 18]
            list.forEach((el, index) => {
                this.left2List[index].number = this.inputData[el] + '%'
            })
        },
        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
            }
        },
        getType29(index) {
            if (index == 0) {
                return '手动开启动'
            } else if (index == 1) {
                return '外控模式启动'
            } else if (index == 2) {
                return '光照积累启动'
            } else if (index == 3) {
                return '土壤湿度控制'
            } else if (index == 4) {
                return '间隔启动'
            } else if (index == 5) {
                return '定时启动'
            } else {
                return '无'
            }
        },
        //什么方式启动的灌溉
        getData29() {
            var number = this.padString(this.inputData['29'].toString(2), 14)
            var index = 6
            var typeNumber = -1

            for (var i = 0; i < index; i++) {
                if (Number(number[i])) {
                    typeNumber = i
                }
            }
            this.openType = this.getType29(typeNumber)

            var statusIndex = 8
            for (var j = 0; j < statusIndex; j++) {
                if (Number(number[number.length - 1 - j])) {
                    if (j == 0) {
                        this.right2Index.push('1')
                    } else if (j == 1) {
                        this.right2Index.push('0')
                    } else {
                        this.right2Index.push(j)
                    }
                }
            }
        },
        //进水泵和出水泵状态
        getData30() {
                var number = this.padString(this.inputData['30'].toString(2), 2)
                if (Number(number[0])) {
                    this.left1Act = 1
                }
               if (Number(number[1])) {
                    this.left1Act = 0
                }
                if (Number(number[0])&&Number(number[1])) {
                    this.left1Act = 3
                }
            else {
                this.left1Act = -1
            }
        },
        dataInit() {
            const that = this
            var deviceDetail = this.deviceDetail
            var data = {
                "equipmentId": deviceDetail.deviceId,
                "pattern": 0,//需要根据文档填写 //6目标ph-数值
                "regNum": 72
            }
            var week = [
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
            ]
            this.api.postState(data).then(res => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.getData30()    //数据30/进水出水泵
                    this.getData29()//数据29 启动方式/信号

                  
                    this.getleft2List()//获取左下角数据
                    this.getrightList3()//获取又下角数据
                    this.getcenterBottom()//获取电磁阀
                    var h = this.checkTime(this.inputData[3])
                    var m = this.checkTime(this.inputData[4])
                    var month_ = this.checkTime(this.inputData[1])
                    var date_ = this.checkTime(this.inputData[2])
                    var time = {
                        year: { year: this.inputData[0], month: month_, date: date_ },
                        week: week[this.inputData[5]],
                        time: h + ":" + m,
                    }
                    this.$bus.$emit('refreshTime',time)
                } else {
                    this.$message.error(res.data.msg);
                }
            })

        },
        checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }

            return i;
        },
        getReg() {
            var store = this.$store.state
            var deviceDetail = store.equipmentList[store.equipmentIndex - 1]
            //获取传感器种类
            var data1 = {
                equipmentId: deviceDetail.deviceId,
                pattern: 272, //需要根据文档填写 //6目标ph-数值
                regNum: 31,//从pattern取多少个数据
            };
            this.api.postReg(data1).then((res) => {
                if (res.data.code == 200) {
                    this.inputData1 = res.data.data;
                    this.getTabelList()//右上角标题
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
    },

}
</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-between;

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

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

                .left-btn {
                    justify-content: flex-start;

                    >div {
                        margin-right: 20px;
                        width: 140px;
                        height: 44px;
                        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: 321px;
                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;

                        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(4, 1fr);
                grid-row-gap: 30px; //纵向间隔
                grid-column-gap: auto; //横向间隔

                >div {
                    width: 86px;
                    height: 117px;
                    background: url(../../assets/image/right-view3.png) no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 20px;
                    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: 24px;
                        font-family: Alibaba PuHuiTi;
                        font-weight: 500;
                        color: #FFFFFF;
                    }
                }
            }
        }

        .right-view2 {
            width: 100%;
            height: 136px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            white-space: nowrap;

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

                >div {
                    width: 90px;
                    height: 34px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    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;
                    }
                }
            }
        }

        .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;
                        }
                    }
                }

            }
        }
    }

    .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 20px;

        >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>
  