FE-SchoolBigData/src/views/newSafetyOverview/index.vue

<!-- 安全总览 -->
<template>
  <div class="newSafetyOverview">
    <!--背景遮罩层-->
    <img class="map-back-img" src="@/assets/ZDimages/map_back.png">
    <!--背景地图-->
    <canvasMap  ref="canvasMap" class="canvasMap-box"></canvasMap>
    <!--左侧-->
    <div class="left-max-big-box">
      <laboratoryData></laboratoryData>
      <secondaryCollegeUnitLaboratoryStatistics></secondaryCollegeUnitLaboratoryStatistics>
      <subComponents></subComponents>
    </div>
    <!--中间-->
    <div class="center-max-big-box">
      <div class="center-top-button-max-box">
        <img class="position-img position-img-1" src="@/assets/ZDimages/img_bg_cdo@1x.png">
        <img class="position-img position-img-2" src="@/assets/ZDimages/img_bg_xz@1x.png">
        <img class="position-img position-img-3" src="@/assets/ZDimages/img_bg_zc@1x.png">
        <img class="position-img position-img-4" src="@/assets/ZDimages/img_bg_zc@1x.png">
        <img class="position-img position-img-5" src="@/assets/ZDimages/img_bg_zc@1x.png">
        <img class="position-img position-img-6" src="@/assets/ZDimages/img_bg_zc@1x.png">
        <img class="position-img position-img-7" src="@/assets/ZDimages/img_bg_zc@1x.png">
        <img class="position-img position-img-8" src="@/assets/ZDimages/img_bg_cdo@1x.png">
        <p class="null-p"></p>
        <p class="button-check-p">安全总览</p>
        <p class="button-p" @click="goPage(2)">资源设备</p>
        <p class="button-p" @click="goPage(3)">三维模型</p>
        <p class="button-p" @click="goPage(4)">视频监控</p>
        <p class="button-p" @click="goPage(5)">应急管控</p>
        <p class="button-p" @click="goPage(6)">纯水监测</p>
        <p class="null-p"></p>
      </div>
      <centerNumData></centerNumData>
    </div>
    <!--右侧-->
    <div class="right-max-big-box">
      <statisticalAnalysisOfHazardSources></statisticalAnalysisOfHazardSources>
      <statisticalAnalysisOfHazardousChemicals></statisticalAnalysisOfHazardousChemicals>
      <resourceAndEquipmentStatistics></resourceAndEquipmentStatistics>
    </div>
  </div>
</template>
<script>
  import mqtt from 'mqtt'
  import {
    laboratoryBigViewSelectTriggerInfo,
  } from "@/api/index";
  import laboratoryData from "./pageComponent/laboratoryData.vue";
  import secondaryCollegeUnitLaboratoryStatistics from "./pageComponent/secondaryCollegeUnitLaboratoryStatistics.vue";
  import subComponents from "./pageComponent/subComponents.vue";
  import statisticalAnalysisOfHazardSources from "./pageComponent/statisticalAnalysisOfHazardSources.vue";
  import statisticalAnalysisOfHazardousChemicals from "./pageComponent/statisticalAnalysisOfHazardousChemicals.vue";
  import resourceAndEquipmentStatistics from "./pageComponent/resourceAndEquipmentStatistics.vue";
  import centerNumData from "./pageComponent/centerNumData.vue";
  import canvasMap from "./pageComponent/canvasMap.vue";
  export default {
    name: 'index',
    components: {
      laboratoryData,
      secondaryCollegeUnitLaboratoryStatistics,
      subComponents,
      statisticalAnalysisOfHazardSources,
      statisticalAnalysisOfHazardousChemicals,
      resourceAndEquipmentStatistics,
      centerNumData,
      canvasMap,
    },
    data () {
      return {
        //预案MQTT
        planOpic:'lab/risk/plan/change',
        planClient:{},
        //预案数据
        alarmPropsData:{},
        //校区模型关系
        schoolModelList:[
          // {school:'B',	name:'5号楼',	buildId:'101093843117592833',buildIdList:[],},
          {school:'B',	name:'6B教学楼',	buildId:'101093843117592815',buildIdList:[],},
          {school:'B',	name:'中心实验楼',	buildId:'101093843117592829',buildIdList:[],},
          {school:'B',	name:'信息工程学院教学楼',	buildId:'101093843117592812',buildIdList:[],},
          {school:'B',	name:'养虫楼',	buildId:'101093843117592805',buildIdList:[],},
          {school:'B',	name:'农业机械实验室平房',	buildId:'101093843117592807',buildIdList:[],},
          {school:'B',	name:'农药研究所',	buildId:'101093843117592804',buildIdList:[],},
          {school:'B',	name:'动物中心B座',	buildId:'101093843117592785',buildIdList:[],},
          {school:'B',	name:'动物中心实验楼A',	buildId:'101093843117592765',buildIdList:[],},
          {school:'B',	name:'动物中心实验楼B',	buildId:'101093843117592764',buildIdList:[],},
          {school:'B',	name:'动物科技学院楼',	buildId:'101093843117592831',buildIdList:[],},
          {school:'B',	name:'动科楼',	buildId:'101093843117592832',buildIdList:[],},
          {school:'B',	name:'北1号教学楼',	buildId:'101093843117592802',buildIdList:[],},
          {school:'B',	name:'北2号教学楼',	buildId:'101093843117592813',buildIdList:[],},
          {school:'B',	name:'北3号教学楼',	buildId:'101093843117592782',buildIdList:[],},
          {school:'B',	name:'北4号教学楼',	buildId:'101093843117592781',buildIdList:[],},
          {school:'B',	name:'北5号教学楼',	buildId:'101093843117592783',buildIdList:['101093843117592783','101093843117592833'],},
          {school:'B',	name:'北6号教学楼',	buildId:'101093843117592814',buildIdList:[],},
          {school:'B',	name:'北7号教学楼',	buildId:'101093843117592816',buildIdList:[],},
          {school:'B',	name:'危化品服务中心',	buildId:'101093843117592826',buildIdList:[],},
          // {school:'B',	name:'原农一站办公楼',	buildId:'101093843117592811',buildIdList:[],},
          // {school:'B',	name:'工程训练中心楼',	buildId:'101093843117592808',buildIdList:[],},
          // {school:'B',	name:'教学办公楼',	buildId:'101093843117592806',buildIdList:[],},
          // {school:'B',	name:'未知实验室	',buildId:'1855791848753147906',buildIdList:[],},
          // {school:'B',	name:'机械及液压实验室平房',	buildId:'101093843117592810',buildIdList:[],},
          {school:'B',	name:'机电锻铸车间',	buildId:'101093843117592809',buildIdList:['101093843117592809','101093843117592811','101093843117592808','101093843117592806','1855791848753147906','101093843117592810'],},
          // {school:'B',	name:'水利与建筑工程学院',	buildId:'101093843117592788',buildIdList:[],},
          // {school:'B',	name:'水利与建筑工程学院A',	buildId:'101093843117592766',buildIdList:[],},
          // {school:'B',	name:'水利与建筑工程学院B',	buildId:'101093843117592768',buildIdList:[],},
          // {school:'B',	name:'水利与建筑工程学院C',	buildId:'101093843117592769',buildIdList:[],},
          // {school:'B',	name:'水利与建筑工程学院D',	buildId:'101093843117592767',buildIdList:[],},
          {school:'B',	name:'水工厅', buildId:'1871736666456633346',buildIdList:['1871736666456633346','101093843117592788','101093843117592766','101093843117592768','101093843117592769','101093843117592767'],},
          {school:'B',	name:'水工水力学实验大厅', buildId:'1871729400227606529',buildIdList:[],},
          {school:'B',	name:'理科综合实验楼A',	buildId:'101093843117592774',buildIdList:['101093843117592774','101093843117592779','101093843117592775','101093843117592776','101093843117592780'],},
          // {school:'B',	name:'理科综合实验楼B',	buildId:'101093843117592779',buildIdList:[],},
          // {school:'B',	name:'理科综合实验楼C',	buildId:'101093843117592775',buildIdList:[],},
          // {school:'B',	name:'理科综合实验楼D',	buildId:'101093843117592776',buildIdList:[],},
          // {school:'B',	name:'理科综合实验楼E',	buildId:'101093843117592780',buildIdList:[],},
          {school:'B',	name:'老昆虫博物馆',	buildId:'101093843117592786',buildIdList:[],},
          {school:'B',	name:'食品楼',	buildId:'101093843117592789',buildIdList:['101093843117592789','101093843117592771','101093843117592770','101093843117592772','101093843117592773'],},
          // {school:'B',	name:'食品楼A',	buildId:'101093843117592771',buildIdList:[],},
          // {school:'B',	name:'食品楼B',	buildId:'101093843117592770',buildIdList:[],},
          // {school:'B',	name:'食品楼C',	buildId:'101093843117592772',buildIdList:[],},
          // {school:'B',	name:'食品楼D',	buildId:'101093843117592773',buildIdList:[],},
          {school:'N',	name:'农科楼(农学院)',	buildId:'101084081109864872',buildIdList:['101084081109864872','101084081109864874','101084081109864873','101093843117592803'],},
          // {school:'N',	name:'农科楼(园艺学院)',	buildId:'101084081109864874',buildIdList:[],},
          // {school:'N',	name:'农科楼(植物保护学院)',	buildId:'101084081109864873',buildIdList:[],},
          // {school:'N',	name:'农科楼(资源环境学院)',	buildId:'101093843117592803',buildIdList:[],},
          {school:'N',	name:'农科院子校教学楼（初中）',	buildId:'101093843117592823',buildIdList:[],},
          {school:'N',	name:'南2号教学楼',	buildId:'101093843117592817',buildIdList:[],},
          {school:'N',	name:'南3号教学楼',	buildId:'101093843117592820',buildIdList:[],},
          {school:'N',	name:'南校子校楼',	buildId:'101093843117592800',buildIdList:[],},
          {school:'N',	name:'南校水保楼',	buildId:'101093843117592801',buildIdList:[],},
          {school:'N',	name:'家畜生物学重点实验室楼',	buildId:'101093843117592787',buildIdList:[],},
          {school:'N',	name:'木艺坊',	buildId:'101093843117592819',buildIdList:[],},
          {school:'N',	name:'林学院实验楼',	buildId:'101093843117592818',buildIdList:[],},
          {school:'N',	name:'科研主楼',	buildId:'101093843117592784',buildIdList:['101093843117592784','101093843117592822'],},
          // {school:'N',	name:'科研楼',	buildId:'101093843117592822',buildIdList:[],},
          {school:'N',	name:'经管园林楼（文科楼）A',	buildId:'101093843117592777',buildIdList:[],},
          {school:'N',	name:'经管园林楼（文科楼）C',	buildId:'101093843117592778',buildIdList:[],},
          {school:'N',	name:'草业与草原楼',	buildId:'101093843117592825',buildIdList:[],},
          {school:'N',	name:'林学院实验楼',	buildId:'101093843117592821',buildIdList:[],},
          {school:'旱研院校区',	name:'农一站科研楼',	buildId:'101093843117592827',buildIdList:[],},
          {school:'旱研院校区',	name:'农机一站平房',	buildId:'101093843117592828',buildIdList:[],},
          {school:'校外',	name:'农三站科研办公楼',	buildId:'101093843117592790',buildIdList:[],},
          {school:'校外',	name:'器材楼',	buildId:'101093843117592792',buildIdList:[],},
          {school:'水保所校区',	name:'人工降雨实验大厅',	buildId:'101093843117592793',buildIdList:[],},
          {school:'水保所校区',	name:'南校区农科楼',	buildId:'101093843117592799',buildIdList:[],},
          {school:'水保所校区',	name:'国家重点实验室西楼',	buildId:'101093843117592798',buildIdList:[],},
          {school:'水保所校区',	name:'水保所人工干旱环境气候室工程',	buildId:'101093843117592795',buildIdList:[],},
          {school:'水保所校区',	name:'水保所国家重点实验室楼',	buildId:'101093843117592794',buildIdList:[],},
          {school:'水保所校区',	name:'水保所科研大楼',	buildId:'101093843117592797',buildIdList:[],},
          {school:'水保所校区',	name:'水保所西区科研楼',	buildId:'101093843117592796',buildIdList:[],},
          {school:'老附中校区',	name:'附中实验楼',	buildId:'101093843117592830',buildIdList:[],},
          {school:'老附中校区',	name:'附中教学楼',	buildId:'101093843117592791',buildIdList:[],},
        ],
      }
    },
    created () {

    },
    mounted () {
      //判断是否已有预警MQTT链接
      if(!this.planClient.unsubscribe){
        this.offPlanMQTT('on');
      }
      //查询是否有预案发生
      this.laboratoryBigViewSelectTriggerInfo();
    },
    methods: {
      demo(){
        console.log('demo')
        // let list = [{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592777",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101084081109864872",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592817",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592820",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592787",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592819",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592784",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592825",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592821",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592821",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },{
        //   "subName": "分子设计育种实验室",
        //   "riskPlanName": "温度测试预案",
        //   "eventStartTime": "2025-03-12T10:42:18",
        //   "deptName": "草业学院",
        //   "schoolName": "南校区",
        //   "buildId": "101093843117592821",
        //   "buildName": "草业与草原楼",
        //   "floorName": "1层",
        //   "roomNum": "109",
        //   "classLevelName": "Ⅲ级",
        //   "classLevelColor": "#FFBB00",
        // },];
        let list = [{
          "subName": "分子设计育种实验室",
          "riskPlanName": "温度测试预案",
          "eventStartTime": "2025-03-12T10:42:18",
          "deptName": "草业学院",
          "schoolName": "南校区",
          "buildId": "101093843117592809",
          "buildName": "草业与草原楼",
          "floorName": "1层",
          "roomNum": "109",
          "classLevelName": "Ⅲ级",
          "classLevelColor": "#FFBB00",
          "school":'B'
        },{
          "subName": "分子设计育种实验室",
          "riskPlanName": "温度测试预案",
          "eventStartTime": "2025-03-12T10:42:18",
          "deptName": "草业学院",
          "schoolName": "南校区",
          "buildId": "101093843117592809",
          "buildName": "草业与草原楼",
          "floorName": "1层",
          "roomNum": "109",
          "classLevelName": "Ⅲ级",
          "classLevelColor": "#FFBB00",
          "school":'B'
        }]
        let obj = {
          "subName": "分子设计育种实验室",
          "riskPlanName": "温度测试预案",
          "eventStartTime": "2025-03-12T10:42:18",
          "deptName": "草业学院",
          "schoolName": "南校区",
          "buildId": "101093843117592809",
          "buildName": "草业与草原楼",
          "floorName": "1层",
          "roomNum": "109",
          "classLevelName": "Ⅲ级",
          "classLevelColor": "#FFBB00",
          "school":'B'
        };
        this.$refs['canvasMap'].alarmTrigger(list,obj,obj.school);
      },
      demo1(){
        this.$refs['canvasMap'].alarmOff();
      },
      //页面切换
      goPage(type){
        this.$parent.pageCheck(type);
      },
      checkComponentType(type){
        this.$set(this,'pageType',type);
      },
      //预案-MQTT连接
      offPlanMQTT(type){
        let self = this;
        if(self.planClient.unsubscribe){
          self.planClient.unsubscribe(self.planOpic, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.planClient.end();
          this.$set(this,'planClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.planMQTT();
        }
      },
      //预案-MQTT订阅
      planMQTT(){
        let self = this;
        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.planClient.on("connect", e =>{
          this.planClient.subscribe(self.planOpic, (err) => {
            if (!err) {
              // console.log("预案-订阅成功:" + self.planOpic);
            }else{
              // console.log("预案-连接错误:" + err);
            }
          });
        });
        this.planClient.on("message", (topic, message) => {
          if (message){
            //获取预案数据
            this.laboratoryBigViewSelectTriggerInfo();
          }
        });
      },
      //查询当前正在发生的预案
      laboratoryBigViewSelectTriggerInfo(){
        let self = this;
        laboratoryBigViewSelectTriggerInfo().then(response => {
          if(response.data[0]){
            response.data.forEach((item)=>{
              item.triggerUploadData = JSON.parse(item.triggerUploadData);
              item.alarmText = item.riskPlanName.split('预案');
              item.alarmText = item.alarmText[0].split('预警');
              item.alarmText = item.alarmText[0]+'预警';
              //修正楼栋ID用于匹配本地数据
              self.schoolModelList.forEach((minItem)=>{
                if(minItem.buildIdList[0]){
                  minItem.buildIdList.forEach((minItemMin)=>{
                    if(item.buildId == minItemMin){
                      item.buildId = minItem.buildId;
                    }
                  })
                }
              })
            })
            //报警提示title信息
            this.$set(this,'alarmTitle',response.data[response.data.length-1].alarmText);
            //报警窗口数据
            this.$set(this,'alarmPropsData',response.data[response.data.length-1]);
            //报警窗口开启
            this.$set(this,'pageType',2);
            this.$set(this,'deptVideoType',false);
            //判断报警楼栋属于南北校区
            setTimeout(function(){
              self.schoolModelList.forEach((item)=>{
                if(item.buildId == response.data[response.data.length-1].buildId){
                  self.$refs['canvasMap'].alarmTrigger(response.data,response.data[response.data.length-1],item.school);
                }
              })
            },1500);
            //报警声音
            if(this.audioType){
              /* 报警音频播放 */
              const audio = this.$refs.audioPlayer;
              // 尝试静音自动播放
              audio.play().catch(() => {
                // 如果失败，延迟 2 秒再次尝试（趁浏览器未完全冻结）
                setTimeout(() => audio.play(), 2000);
              });
              // 延迟 3 秒后尝试取消静音（需浏览器允许）
              setTimeout(() => {
                audio.muted = false;
              }, 3000);
            }
          }else{
            //报警结束
            this.$set(this,'pageType',1);
            this.$set(this,'deptVideoType',false);
            setTimeout(function(){
              self.$refs['canvasMap'].alarmOff();
            },1500);
          }
        })
      },
    },
    beforeDestroy() {
      let self = this;
      // MQTT预警
      self.offPlanMQTT();
    },
    destroyed() {
    }
  }
</script>
<style scoped lang="scss">
  .newSafetyOverview{
    padding:0 62px;
    height:1409px;
    display: flex;
    //地图背景遮罩
    .map-back-img{
      position: absolute;
      z-index:11;
      width:2594px;
      height:1320px;
      top: 122px;
      left: 64px;
    }
    //地图
    .canvasMap-box{
      z-index: 10;
    }
    //左侧
    .left-max-big-box{
      width:652px;
      padding-top:10px;
      z-index: 15;
    }
    //中间
    .center-max-big-box{
      width:1293px;
      position: relative;
      z-index: 15;
      .center-top-button-max-box{
        width:911px;
        position: absolute;
        left:50%;
        margin:0 -445px;
        height:60px;
        display: flex;
        .position-img-1{
          position:absolute;
          top:0;
          left:-74px;
        }
        .position-img-2{
          position:absolute;
          top:0;
          left:9px;
        }
        .position-img-3{
          position:absolute;
          top:0;
          left:154px;
        }
        .position-img-4{
          position:absolute;
          top:0;
          left:300px;
        }
        .position-img-5{
          position:absolute;
          top:0;
          left:446px;
        }
        .position-img-6{
          position:absolute;
          top:0;
          left:592px;
        }
        .position-img-7{
          position:absolute;
          top:0;
          left:740px;
        }
        .position-img-8{
          position:absolute;
          top:0;
          left:888px;
        }
        .null-p{
          flex:1;
        }
        .button-p{
          z-index:5;
          cursor: pointer;
          font-family: Source Han Sans, Source Han Sans;
          width:145px;
          font-size:24px;
          font-weight:700;
          line-height:60px;
          text-align: center;
          background: -webkit-linear-gradient(0deg, #FFFFFF, #FFFFFF); /* Chrome, Safari */
          background: linear-gradient(0deg, #FFFFFF, #FFFFFF); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 其他浏览器 */
        }
        .button-check-p{
          z-index:5;
          cursor: pointer;
          font-family: Source Han Sans, Source Han Sans;
          width:145px;
          font-weight:700;
          font-size:24px;
          line-height:24px;
          height:24px;
          margin-top:18px;
          text-align: center;
          background: -webkit-linear-gradient(0deg, #34e4ff, #FFFFFF); /* Chrome, Safari */
          background: linear-gradient(0deg, #34e4ff, #FFFFFF); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 其他浏览器 */
        }
      }
    }
    //右侧
    .right-max-big-box{
      width:652px;
      padding-top:10px;
      z-index: 15;
    }
  }
</style>