<template>
  <!-- <Resize> -->
  <div>
    <!-- <div class="bgPicture" :style="{ height: vdaH }">
                <div class="title"></div>
                <div class="titTop">
                    <div class="titLeft">
                        <span @click="goBack(1)">首页</span>
                        <span>/</span>
                        <span @click="goBack(2)">安全管理</span>
                    </div>
                    <div class="titRight">
                        <span>2023年2月17日 星期四 14:26</span>
                        <span></span>
                        <span>&nbsp;&nbsp;天气&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>晴 12℃</span>
                    </div>
                </div>
            </div> -->
    <div
      @click="disBox"
      class="screenBox"
      v-if="disBoxShow"
      :style="{
        'background-image': boxNone
          ? `url(${require(`../assets/pic/exitFull.png`)}`
          : `url(${require(`../assets/pic/fullScreen.png`)}`,
        right: boxNone ? '483px' : '10px',
      }"
    ></div>
     <div :class="[boxNone ? 'centerBottom' : 'centerBottom2']">
         <div class="titName">
        <span></span>
        <span>告警详情</span>
        <span></span>
      </div>
      <!-- <el-scrollbar> -->
        <div class="centerBottom3">
             <swiperManagement></swiperManagement>
        </div>
      <!-- </el-scrollbar> -->
    </div>
    <!-- 左侧模块1 -->
    <div class="leftOneBox" :style="{ left: boxNone ? '27px' : '-444px' }">
      <div class="titName">
        <span></span>
        <span>安全检查统计</span>
        <span></span>
      </div>
      <div class="concet">
        <div class="ftahBox">
          <span class="iconBox1"></span>
          <div class="ftahBox1">
            <div>检查项</div>
            <div style="color: #1cd1ff">{{ checkNum }}</div>
            <div>项</div>
          </div>
        </div>
        <div class="ftahBox" style="margin-left: 25px">
          <span class="iconBox2"></span>
          <div class="ftahBox1">
            <div>问题项</div>
            <div style="color: #ffb54f">{{ questionNum }}</div>
            <div>项</div>
          </div>
        </div>
        <div class="ftahBox" style="margin-left: 17px">
          <span class="iconBox3"></span>

          <div class="ftahBox1">
            <div>已处理</div>
            <div style="color: #00d896">{{ resolvedNum }}</div>
            <div>项</div>
          </div>
        </div>
        <div class="ftahBox" style="margin-left: 4px">
          <span class="iconBox4"></span>
          <div class="ftahBox1">
            <div>待处理</div>
            <div style="color: #ecda4b">{{ unresolvedNum }}</div>
            <div>项</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧模块2 -->
    <div class="leftTwoBox" :style="{ left: boxNone ? '27px' : '-444px' }">
      <div class="titName">
        <span></span>
        <span>检查次数统计</span>
        <span></span>
      </div>
      <div class="seleChange">
        <div
          :class="[timeType === 1 ? 'timeBoxType2' : 'timeBoxType1']"
          @click="chooseType(0)"
        >
          年
        </div>
        <div
          :class="[timeType === 2 ? 'timeBoxType2' : 'timeBoxType1']"
          @click="chooseType(1)"
        >
          月
        </div>
        <div
          :class="[timeType === 3 ? 'timeBoxType2' : 'timeBoxType1']"
          @click="chooseType(2)"
        >
          日
        </div>
      </div>
      <div class="pie2Box">
        <lineChart
          ref="lineRef"
          style="width: 100%; height: 100%"
          grid-bottom="1%"
          :color-array="['#021C9F', '#01B1FF']"
          :chart-data="qyList"
          :x-axis-data="qyList.map((item) => item.name)"
          :checkCountList="checkCountList"
        />
      </div>
    </div>
    <!-- 左侧模块3 -->
    <div class="leftThreeBox" :style="{ left: boxNone ? '27px' : '-444px' }">
      <div class="titName">
        <span></span>
        <span>安全告警</span>
        <span></span>
      </div>
      <div class="seleChange">
        <div
          :class="[time2Type === 1 ? 'timeBoxType2' : 'timeBoxType1']"
          @click="choose2Type(0)"
        >
          年
        </div>
        <div
          :class="[time2Type === 2 ? 'timeBoxType2' : 'timeBoxType1']"
          @click="choose2Type(1)"
        >
          月
        </div>
        <div
          :class="[time2Type === 3 ? 'timeBoxType2' : 'timeBoxType1']"
          @click="choose2Type(2)"
        >
          日
        </div>
      </div>
      <div class="pieBox">
        <threeBarChart
          style="width: 100%; height: 100%"
          grid-bottom="1%"
          :color-array="['#021C9F', '#01B1FF']"
          :chart-data3="aq3List"
          :chart-data2="aq2List"
          :chart-data="aqList"
          :x-axis-data="aqList.map((item) => item.name)"
          :safeList="safeList"
        />
      </div>
    </div>
    <!-- 右侧模块1 -->
    <div class="rightOneBox" :style="{ right: boxNone ? '27px' : '-444px' }">
      <div class="titName">
        <span></span>
        <span>隐患检查统计</span>
        <span></span>
      </div>
      <div class="concet" style="left: 48px">
        <div class="ftahBox">
          <span class="iconBox1"></span>
          <div class="ftahBox1">
            <div>整改项</div>
            <div style="color: #1cd1ff">{{ total }}</div>
            <div>项</div>
          </div>
        </div>
        <div class="ftahBox" style="margin-left: 53px">
          <span class="iconBox2"></span>
          <div class="ftahBox1">
            <div>已处理</div>
            <div style="color: #00d896">{{ resolve }}</div>
            <div>项</div>
          </div>
        </div>
        <div class="ftahBox" style="margin-left: 43px">
          <span class="iconBox3"></span>
          <div class="ftahBox1">
            <div>待处理</div>
            <div style="color: #fde54a">{{ unresolve }}</div>
            <div>项</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧模块2 -->
    <div class="rightTwoBox" :style="{ right: boxNone ? '27px' : '-444px' }">
      <div class="titName">
        <span></span>
        <span>高频问题项</span>
        <span></span>
      </div>
      <div class="pie3Box">
        <RankBarChart
          style="width: 100%; height: 100%"
          :color-array="['#021C9F', '#01B1FF']"
          :highIssues="highIssues"
        />
      </div>
    </div>
    <!-- 右侧模块3 -->
    <div class="rightThreeBox" :style="{ right: boxNone ? '27px' : '-444px' }">
      <div class="titName">
        <span></span>
        <span @click="gantDialog">隐患整改记录</span>
        <span></span>
      </div>
      <div class="yhBox">
        <swiper></swiper>
      </div>
    </div>
    <!-- 右侧菜单 -->
    <!-- <div class="container" :style="{ right: !type ? '-13px' : '0' }">
            <div class="box" id="box" :style="{ width: !type ? '267px' : '0' }">
                <div v-if="!type" :class="[menuType === 1 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(1)">
                    <span class="icon1"></span>
                    <span>人员管理</span>
                    <span class="picture1"></span>
                </div>
                <div v-if="!type" :class="[menuType === 2 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(2)">
                    <span class="icon2"></span>
                    <span>视频监控</span>
                    <span class="picture1"></span>
                </div>
                <div v-if="!type" :class="[menuType === 3 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(3)">
                    <span class="icon3"></span>
                    <span>进度管理</span>
                    <span class="picture1"></span>
                </div>
                <div v-if="!type" :class="[menuType === 4 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(4)">
                    <span class="icon4"></span>
                    <span>安全管理</span>
                    <span class="picture1"></span>
                </div>
            </div>
            <div class="switchBtn" ref="switchBtn" @click="switchDiv()">
            </div>
            <div class="closeBtn" :style="{ display: type ? 'none' : 'block' }" @click="switchDiv()"></div>
        </div> -->
  </div>

  <!-- </Resize> -->
</template>

<script>
import threeBarChart from "@/components/common/threeBarChart";
import lineChart from "@/components/common/lineChart";
import pieChart from "@/components/common/pieChart";
import pieDateChart from "@/components/common/pieDateChart";
import Resize from "../utils/Resize.vue";
import tabGtt from "@/components/common/tableGantt";
import RankBarChart from "@/components/common/RankBarChart";
import swiper from "./swiper.vue";
import swiperManagement from "./swiperManagement.vue";
import {
  getCheckTotalCensus,
  getCheckTimesCensus,
  getResolveTroubleCensus,
  getWarnSurveillance,
  getMostTroubleCensus
} from "../api/api";
export default {
  name: "report",
  components: {
    pieChart,
    lineChart,
    pieDateChart,
    Resize,
    threeBarChart,
    RankBarChart,
    tabGtt,
    swiper,
    swiperManagement
  },
  data() {
    return {
        highIssues:[], //高频问题项
      safeList:[], //安全告警
      resolve:0,//已处理
      total: 0, //整改项
      unresolve:0, //待处理
      checkCountList: [], //检查次数统计
      checkNum: 0, //检查项
      questionNum: 0, //问题项
      resolvedNum: 0, //已处理
      unresolvedNum: 0, //待处理
      dialogShow: false,
      timeType: 1,
      time2Type: 1,
      colorList: ["#00A572", "#007EC1", "#DA9300", "#878787"],
      iconPicList: [
        {
          icon: "wendu",
          name: "温度",
          val: "19.8",
          tem: "℃",
        },
        {
          icon: "shidu",
          name: "湿度",
          val: "19.8",
          tem: "%",
        },
        {
          icon: "yangqi",
          name: "氧气值",
          val: "19.8",
          tem: "%VOL",
        },
        {
          icon: "co2",
          name: "二氧化碳",
          val: "19.8",
          tem: "%VOL",
        },
        {
          icon: "ch4",
          name: "甲烷",
          val: "19.8",
          tem: "ppm",
        },
        {
          icon: "h2s",
          name: "硫化氢",
          val: "19.8",
          tem: "ppm",
        },
      ],
      tableData: [
        {
          entName: "我打打死",
        },
        {
          entName: "我打打死",
        },
        {
          entName: "我打打死",
        },
        {
          entName: "我打打死",
        },
        {
          entName: "我打打死",
        },
        {
          entName: "我打打死",
        },
        {
          entName: "我打打死",
        },
        {
          entName: "我打打死",
        },
      ],
      aq3List: [
        {
          name: "2月",
          value: 1,
        },
        {
          name: "3月",
          value: 2,
        },
        {
          name: "4月",
          value: 13,
        },
        {
          name: "5月",
          value: 24,
        },
        {
          name: "6月",
          value: 24,
        },
        {
          name: "7月",
          value: 31,
        },
      ],
      aq2List: [
        {
          name: "2月",
          value: 10,
        },
        {
          name: "3月",
          value: 6,
        },
        {
          name: "4月",
          value: 3,
        },
        {
          name: "5月",
          value: 14,
        },
        {
          name: "6月",
          value: 4,
        },
        {
          name: "7月",
          value: 3,
        },
      ],
      aqList: [
        {
          name: "2月",
          value: 12,
          value2: 10,
        },
        {
          name: "3月",
          value: 13,
          value2: 6,
        },
        {
          name: "4月",
          value: 12,
          value2: 3,
        },
        {
          name: "5月",
          value: 10,
          value2: 14,
        },
        {
          name: "6月",
          value: 7,
          value2: 4,
        },
        {
          name: "7月",
          value: 11,
          value2: 3,
        },
      ],
      qyList: [
        {
          name: "1月",
          value: 12,
        },
        {
          name: "2月",
          value: 112,
        },
        {
          name: "3月",
          value: 132,
        },
        {
          name: "4月",
          value: 12,
        },
        {
          name: "5月",
          value: 132,
        },
        {
          name: "6月",
          value: 132,
        },
        {
          name: "7月",
          value: 132,
        },
        {
          name: "8月",
          value: 32,
        },
        {
          name: "9月",
          value: 22,
        },
        {
          name: "10月",
          value: 152,
        },
        {
          name: "11月",
          value: 132,
        },
        {
          name: "12月",
          value: 132,
        },
      ],
      xArry: [],
      chartData: [],
      peopleList: [
        {
          name: "姓名",
          value: "：王刚",
        },
        {
          name: "岗位",
          value: "：项目经理",
        },
        {
          name: "体温",
          value: "：36.5℃",
        },
        {
          name: "入场时间",
          value: "：2022-11-26",
        },
        {
          name: "考勤类型",
          value: "：进场",
        },
        {
          name: "打卡设备",
          value: "：1号打卡机",
        },
      ],
      vdaH: 0,
      type: false,
      menuType: 4,
      numberList: [5, 5],
      boxNone: true,
      disBoxShow:true,
    };
  },
  created() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.vdaH = h - 0 + "px";
  },
  methods: {
    //获取数据
    getData() {
      let projectId = sessionStorage.getItem("projectId");
      //获取安全检查统计
      getCheckTotalCensus({
        projectId: projectId,
      }).then((res) => {
        this.checkNum = res.data.data.checkNum; //检查项
        this.questionNum = res.data.data.questionNum; //问题项
        this.resolvedNum = res.data.data.resolvedNum; //已处理
        this.unresolvedNum = res.data.data.unresolvedNum; //待处理
      });
      //隐患检查统计
      getResolveTroubleCensus({
        projectId: projectId,
      }).then((res) => {
        this.resolve = res.data.data.resolve;
        this.total = res.data.data.total;
        this.unresolve = res.data.data.unresolve;
      });
      //高频问题项
      getMostTroubleCensus({
          projectId: projectId,
      }).then((res)=>{
          this.highIssues = res.data.data
      }).catch((err)=>{
          console.log(err);
      })
    },
    disBox() {
      this.boxNone = !this.boxNone;
       if(this.boxNone == true){
        console.log("closeBig")
          window.parent.closeBig();
          this.disBoxShow=true
      }else if(this.boxNone == false){
        console.log("openBig")
          window.parent.openBig("openBig");
           this.disBoxShow=false
      }
      this.$refs.screenBox.style.animationPlayState = "running";
    },
    goBack(val) {
      if (val === 1) {
        this.$router.push("/");
      } else {
        this.$router.go(0);
      }
    },
    chooseType(val) {
      this.timeType = val + 1;
      //检查次数统计
      getCheckTimesCensus({
        projectId: sessionStorage.getItem("projectId"),
        type: val,
      }).then((res) => {
        this.checkCountList = res.data.data;
        this.$refs.lineRef.resetOption();
      });
    },

    choose2Type(val) {
      this.time2Type = val + 1;
      getWarnSurveillance({
          projectId: sessionStorage.getItem("projectId"),
         type: val,
      }).then((res)=>{
        //  this.$refs.lineRef.resetOption();
         this.safeList = res.data.data
      })
    },
    //查看甘特图
    gantDialog() {
      this.dialogShow = true;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    // 菜单点击
    childBoxClick(val) {
      this.menuType = val;
      if (val === 3) {
        this.$router.push("/progress");
      } else if (val === 2) {
        this.$router.push("/videoSurveillance");
      } else if (val === 1) {
        this.$router.push("/personnel");
      }
    },
    switchDiv() {
      if (this.type) {
        this.type = false;
        this.$refs.switchBtn.style.display = "none";
      } else {
        this.type = true;
        setTimeout(() => {
          // 俩秒之后让模块消失
          this.$refs.switchBtn.style.display = "block";
        }, 800);
      }
    },
  },
  mounted() {
    //获取数据
    this.getData();
    //获取年的检查次数
    this.chooseType(0);
    //默认获取年的安全告警统计
    this.choose2Type(0);
    this.switchDiv();
    window.onresize = () => {
      return (() => {
        let h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.vdaH = h - 0 + "px";
      })();
    };
  },
};
</script>

<style scoped lang="less">
.fathe {
  width: 100%;
  height: 144px;
}
.centerBottom2 {
  width: calc(100% - 968px);
//   height: 166px;
 height: 200px;
  position: absolute;
  bottom: -205px;
  left: 50%;
  transform: translateX(-50%);
  background: url("~@/assets/pic/jdin.png") no-repeat;
  background-size: 100% 100%;
  // display: flex;
  // display: -webkit-box;
  // flex-direction: row;
  // overflow-x: hidden;
  transition: bottom 0.6s;
  // overflow-y: hidden; //重点
  ::-webkit-scrollbar {
    display: none;
  }
  @media only screen and (max-height: 1000px) {
    bottom: -64px;
  }
}
.centerBottom {
  width: calc(100% - 968px);
//   height: 246px;
   height: 298px;
  position: absolute;
  bottom: 35px;
  left: 25%;
  // transform: translateX(-50%);
  background: url("~@/assets/pic/jdin.png") no-repeat;
  background-size: 100% 100%;
  // display: flex;
  // display: -webkit-box;
  // flex-direction: row;
  overflow-x: hidden;
  transition: bottom 0.6s;
  // overflow-y: hidden; //重点
  // z-index: 999;
//   padding: 0px 70px 0 70px;
   padding: 0px 10px 0 10px;
   overflow-y: hidden;
  box-sizing: border-box;
  ::-webkit-scrollbar {
    display: none;
  }
  @media only screen and (max-height: 1000px) {
    bottom: 160px;
    height: 298px;
     height: 246px;
  }

}
.centerBottom3 {
    height: 239px;
    position: absolute;
    top: 54px;
    overflow: auto;
    width: 99%;
     @media only screen and (max-height: 1000px) {
   
     height: 181px;
  }
}
.yhBox {
  width: 95%;
  height: 60%;
  position: absolute;
  top: 83px;

  @media only screen and (max-height: 1000px) {
    top: 60px;
  }
}

.timeBoxType1 {
  background: url("~@/assets/pic/tap1.png") no-repeat;
  background-size: 100% 100%;
}

.timeBoxType2 {
  background: url("~@/assets/pic/tap2.png") no-repeat;
  background-size: 100% 100%;
}

.seleChange {
  width: 130px;
  height: 22px;
  position: absolute;
  right: 27px;
  top: 63px;
  display: flex;
  justify-content: space-around;
  z-index: 1;

  div {
    margin-right: 5px;
    cursor: pointer;
    width: 43px;
    height: 21px;
    font-size: 12px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 21px;
  }
}

.tabGtBox {
  position: absolute;
  top: 50px;
  width: 660px;
  padding: 0 40px;
}

.gttBox {
  width: 739px;
  height: 628px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("~@/assets/pic/boxDialog.png") no-repeat;
  background-size: 100% 100%;
  transform: translate(-50%, -50%);

  .closeIcon {
    width: 33px;
    height: 33px;
    color: #0dffff;
    float: right;
    font-size: 50px;
    cursor: pointer;
    margin-right: 10px;
  }
}

.tableBox {
  width: 90%;
  height: 75%;
  bottom: 15px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.dh1 {
  animation: mytest 0.5s linear;
  animation-fill-mode: forwards;
}

@keyframes mytest {
  100% {
    right: 10px;
  }
  90% {
    right: 120px;
  }

  80% {
    right: 160px;
  }

  70% {
    right: 200px;
  }

  60% {
    right: 240px;
  }

  50% {
    right: 300px;
  }

  40% {
    right: 340px;
  }

  30% {
    right: 380px;
  }

  20% {
    right: 420px;
  }

  10% {
    right: 460px;
  }
  1% {
    right: 480px;
  }
}

@keyframes myt2est {
  1% {
    right: 10px;
  }

  10% {
    right: 120px;
  }

  20% {
    right: 160px;
  }

  30% {
    right: 200px;
  }

  40% {
    right: 240px;
  }

  50% {
    right: 300px;
  }

  60% {
    right: 340px;
  }

  70% {
    right: 380px;
  }

  80% {
    right: 420px;
  }

  90% {
    right: 460px;
  }

  100% {
    right: 480px;
  }
}

.dh2 {
  animation-fill-mode: forwards;
  animation: myt2est 0.5s linear;
}

.screenBox {
  width: 46px;
  height: 46px;
  background: url("~@/assets/pic/fullScreen.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
//   bottom: 34px;
//   bottom: 210px;
//  bottom: 250px;
//   bottom: 289px;
  bottom: 335px;
  right: 480px;
  overflow-x: hidden;
  transition: right 0.8s, height 1s;
  overflow-y: hidden; //重点
  cursor: pointer;
  @media only screen and (max-height: 1000px) {
    // bottom: 157px;
    // bottom: 339px;
    // bottom: 371px;
    // bottom: 461px;
    bottom: 417px;
  }
}

.nameMessage {
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  margin-top: 10px;
  margin-left: 18px;
  span:nth-child(1) {
    display: inline-block;
    width: 56px;
    text-align-last: justify;
  }
}

.meeting {
  width: 76px;
  height: 29px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
    no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 29px;
  position: absolute;
  top: 305px;
  left: 29px;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #ffffff;
  padding-right: 6px;
}

.mettiogBox {
  text-align: center;
  line-height: 29px;
  position: absolute;
  top: 345px;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #ffffff;
  padding: 0 22px 0 33px;
  height: 260px;
}

.lookFor {
  width: 57px;
  height: 24px;
  background: url("~@/assets/pic/view.png") no-repeat;
  background-size: 100% 100%;
  float: right;
  margin-top: 20px;
}

.videoBox {
  width: 100%;
  height: 239px;
  position: absolute;
  top: 21px;
  left: 50%;
  transform: translateX(-50%);
}

.fxBox {
  width: 385px;
  height: 208px;
  background: rgba(0, 38, 36, 0.2);
  position: absolute;
  bottom: 18px;
  box-shadow: inset 0px 0px 25px 0px rgba(255, 255, 255, 0.2);
  border: 1px solid #007b7b52;
  left: 50%;
  transform: translateX(-50%);
}

.fxBoxChild {
  font-weight: 500;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  margin: 10px auto 0;
  width: 90%;
  border-bottom: 1px solid rgba(96, 213, 205, 0.4);
}

.pie3Box {
  width: 100%;
  height: 90%;
  position: absolute;
  bottom: 0;
}

.pie2Box {
  width: 100%;
  height: 90%;
  position: absolute;
  bottom: 0;

  @media only screen and (max-height: 1000px) {
    top: 50px;
  }
}

.pieBox {
  width: 100%;
  height: 90%;
  position: absolute;
  bottom: 0;

  @media only screen and (max-height: 1000px) {
    height: 262px;
    top: 38px;
  }
}

.kqjk {
  width: 100%;
  height: 170px;
  position: absolute;
  top: 48px;
  display: flex;

  .oneKqjk {
    width: 135px;
    height: 140px;
    padding: 5px;
    border: 1px solid #00ebeb;
    margin-top: 52px;
    margin-left: 13px;
    margin-right: 14px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .twoKqjk {
    width: 226px;
    height: 180px;
    margin-top: 36px;
    background: rgba(0, 84, 79, 0.3);
  }
}

.concet {
  position: absolute;
  top: 58px;
  left: 23px;
  display: flex;
}

.ftahBox {
  text-align: center;
  padding-top: 17px;
  width: 89px;

  @media only screen and (max-height: 1000px) {
    padding-top: 7px;
  }

  .iconBox1 {
    background: url("~@/assets/pic/check.png") no-repeat;
  }

  .iconBox2 {
    background: url("~@/assets/pic/question.png") no-repeat;
  }

  .iconBox3 {
    background: url("~@/assets/pic/deal.png") no-repeat;
  }

  .iconBox4 {
    background: url("~@/assets/pic/todo.png") no-repeat;
  }

  span:nth-child(1) {
    display: inline-block;
    width: 34px;
    height: 37px;
    background-size: 100% 100%;
  }

  span:nth-child(2) {
    display: inline-block;
    font-size: 18px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #e2e2e2;
    margin-top: 8px;
  }

  span:nth-child(3) {
    display: inline-block;
    font-size: 30px;
    font-weight: 500;
    margin-top: 5px;
  }

  span:nth-child(4) {
    font-size: 17px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    color: #fff;
  }
}
.ftahBox1 {
  // text-align: center;
  padding-top: 17px;
  width: 89px;
  height: 100px;
  display: flex;
  flex-direction: column;
  @media only screen and (max-height: 1000px) {
    padding-top: 7px;
  }
  div:nth-child(1) {
    display: inline-block;
    font-size: 18px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #e2e2e2;
    margin-top: 8px;
  }

  div:nth-child(2) {
    display: inline-block;
    font-size: 30px;
    font-weight: 500;
    margin-top: 5px;
  }

  div:nth-child(3) {
    font-size: 17px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    color: #fff;
  }
}
.bgPicture {
  width: 100%;
  background: url("~@/assets/pic/BG.jpg") no-repeat;
  background-size: 100% 100%;
}

.title {
  width: 100%;
  height: 168px;
  background: url("~@/assets/pic/title1 22).png") no-repeat;
  background-size: 100% 100%;
}

.titTop {
  width: 100%;
  position: absolute;
  top: 9px;
  left: 9px;
  display: flex;
  justify-content: space-between;

  .titLeft {
    width: 138px;
    height: 40px;
    background: #025a5f;
    line-height: 40px;
    text-align: center;

    span:nth-child(1),
    span:nth-child(2) {
      font-size: 14px;
      color: #3cfff9;
      letter-spacing: 1px;
      font-weight: 400;
      cursor: pointer;
    }

    span:nth-child(3) {
      font-size: 14px;
      color: #fff;
      letter-spacing: 1px;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .titRight {
    padding-top: 11px;
    padding-right: 25px;
    font-size: 14px;
    font-weight: 400;
    color: #d1fffe;

    span:nth-child(2) {
      display: inline-block;
      position: absolute;
      right: 80px;
      width: 17.5px;
      height: 18px;
      background: url("~@/assets/pic/sun.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}

.titName {
  width: 100%;
  height: 30px;
  position: absolute;
  top: 15px;

  span:nth-child(1) {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("~@/assets/pic/titleMark.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 16px;
    margin-right: 8px;
  }

  span:nth-child(2) {
    display: inline-block;
    font-size: 22px;
    font-family: ht2;
    font-weight: bold;
    color: #86eee7;
    margin-right: 7px;
  }

  span:nth-child(3) {
    display: inline-block;
    width: 248px;
    height: 12px;
    background: url("~@/assets/pic/4words.png") no-repeat;
    background-size: 100% 100%;
  }
}

.leftOneBox {
  width: 444px;
  height: 242px;
  background: url("~@/assets/pic/boxOneCz.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  overflow-x: hidden;
  transition: left 0.8s, height 1s;
  overflow-y: hidden; //重点
  top: 96px;
  left: 27px;
  @media only screen and (max-height: 1000px) {
    top: 76px;
    height: 222px;
  }
}
.rightTwoBox {
  width: 444px;
  height: 362px;
  background: url("~@/assets/pic/second.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  overflow-x: hidden;
  transition: right 0.8s, height 1s;
  overflow-y: hidden; //重点
  top: 360px;
  right: 27px;
  @media only screen and (max-height: 1000px) {
    top: 317px;
    height: 342px;
  }
}

.leftTwoBox {
  width: 444px;
  height: 322px;
  background: url("~@/assets/pic/second.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  overflow-x: hidden;
  transition: left 0.8s, height 1s;
  overflow-y: hidden; //重点
  top: 361px;
  left: 27px;

  @media only screen and (max-height: 1000px) {
    height: 302px;
    top: 317px;
  }
}

.leftThreeBox {
  width: 444px;
  height: 342px;
  background: url("~@/assets/pic/second.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 707px;
  left: 27px;
  overflow-x: hidden;
  transition: left 0.8s, height 1s;
  overflow-y: hidden; //重点

  @media only screen and (max-height: 1000px) {
    height: 279px;
    top: 638px;
  }
}

.rightOneBox {
  overflow-x: hidden;
  transition: right 0.8s, height 1s;
  overflow-y: hidden; //重点
  width: 444px;
  height: 240px;
  background: url("~@/assets/pic/boxOneCz.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 96px;
  right: 27px;

  @media only screen and (max-height: 1000px) {
    top: 76px;
    height: 222px;
  }
}

.securityCheck {
  width: 100%;
  height: 80%;
  position: absolute;
  bottom: 0;
}

.rightThreeBox {
  width: 442px;
  height: 300px;
  background: url("~@/assets/pic/boxOneCz.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 746px;
  overflow-x: hidden;
  transition: right 0.8s, height 1s;
  overflow-y: hidden; //重点
  right: 27px;

  @media only screen and (max-height: 1000px) {
    top: 678px;
    height: 240px;
  }
}

.container {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

.box {
  height: 784px;
  overflow-x: hidden;
  transition: width 0.8s, height 1s;
  overflow-y: hidden; //重点
  background: url("~@/assets/pic/closeMenu.png") no-repeat;
  background-size: 100% 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;

  .childBoxChoose {
    cursor: pointer;
    width: 166px;
    height: 54px;
    margin-bottom: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("~@/assets/pic/btn1.png") no-repeat;
    background-size: 100% 100%;
    font-size: 19px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #ffffff;
    margin-left: 20px;

    span:nth-child(1) {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    span:nth-child(3) {
      display: inline-block;
      width: 10px;
      height: 17px;
      margin-left: 10px;
      background: url("~@/assets/pic/enter1.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .childBox:hover {
    background: url("~@/assets/pic/btn1.png") no-repeat;
  }

  .childBox {
    cursor: pointer;
    width: 166px;
    height: 54px;
    margin-bottom: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("~@/assets/pic/btn2.png") no-repeat;
    background-size: 100% 100%;
    font-size: 19px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #ffffff;
    margin-left: 20px;

    span:nth-child(1) {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    span:nth-child(3) {
      display: inline-block;
      width: 10px;
      height: 17px;
      margin-left: 10px;
      background: url("~@/assets/pic/enter2.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}

.icon1 {
  background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
  background-size: 100% 100%;
}

.icon2 {
  background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
  background-size: 100% 100%;
}

.icon3 {
  background: url("~@/assets/pic/jinduguanli.png") no-repeat;
  background-size: 100% 100%;
}

.icon4 {
  background: url("~@/assets/pic/anquanguanli.png") no-repeat;
  background-size: 100% 100%;
}

.closeBtn {
  position: relative;
  top: 343px;
  height: 53px;
  width: 14px;
  cursor: pointer;
  left: -265px;
}

.switchBtn {
  position: absolute;
  transform: rotateY(358deg);
  left: -14px;
  top: 44%;
  height: 53px;
  width: 14px;
  background: url("~@/assets/pic/openMenu.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  display: none;
}
</style>
