tz-onest-system/system_ui/src/views/newpage-demo.vue

<template>
  <div class="yying-bg">
    <!-- 头部 -->
    <div class="yy-header">
      <div class="head-left">
        <div class="head-time">
          <!-- 风向 -->
          <span><i class="head-fx"></i>东南西北风</span>
          <span
            ><i class="head-fs"></i>{{ weatherinformationPower
            }}<u>m/s</u></span
          >
          <span
            ><i class="head-jsl"></i>{{ weatherinformationTemperature
            }}<u>%</u></span
          >
          <span
            ><i class="head-wd"></i>{{ weatherinformationLow }}<u>℃</u></span
          >
        </div>
        <!-- <el-select
          v-model="place"
          size="small"
          placeholder="请选择"
          class="select-newpage"
          :popper-append-to-body="false"

        >
          <el-option
            v-for="item in deptList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </div>
      <div class="yy-header-tit">
        <div class="yy-header-tit-text">{{ headerTitle }}</div>
      </div>
<!--      <div class="head-right">-->
<!--        <div-->
<!--          style="-->
<!--            color: #eee;-->
<!--            height: 2rem;-->
<!--            line-height: 2rem;-->
<!--            border: 0px;-->
<!--            padding: 0 10px;-->
<!--            background-size: 100% 100%;-->
<!--            background: url(/static/img/leader-topk.d4e183b5.png) no-repeat-->
<!--              center;-->
<!--          "-->
<!--        >-->
<!--          <span-->
<!--            ><i class="el-icon-box"></i>-->
<!--            <a-->
<!--              style="font-size: 14px; margin-left: 0.5rem"-->
<!--              href="./General_DSS-LightWeight-Client_x64_V2.6.0.2205.R.20220621.exe"-->
<!--              >下载插件</a-->
<!--            ></span-->
<!--          >-->
<!--        </div>-->
<!--      </div>-->
      <!---demo-管辖区导航 开始--->
      <div class="new-header-nav-list">
        <div class="new-header-nav-list-btn" v-for="(item ,index) in deptList" :key="index">
          {{ item.label }}
        </div>
      </div>
      <rightClock></rightClock>
    </div>
    <div style="width: 100%; height: 100%; position: absolute; z-index: 1">
      <div class="starfield">
        <div class="static"></div>
        <div class="moving-1"></div>
        <div class="moving-2"></div>
        <div class="moving-3"></div>
      </div>
    </div>

    <div class="go-center-top" ref="centerHeight">
      <div class="c-left" ref="sideWidth">
        <div
          class="icon-list-con"
          v-for="(item, index) in iList.slice(0, 4)"
          ref="conWid"
          @click="goCenter(item.to)"
        >
          <div class="icon-list-img" style="margin-top: 2rem;">
            <el-image
              :src="item.imgSrc"
              :class="{ l1: item.limits === 1, l2: item.limits === 2 }"
              fit="scale-down"
              id="lineHeight222"
              @load="imgLoad2"
              style="transform: rotateY(180deg)"
            >
            </el-image>
            <div
              class="icon-list-tit"
              style="margin-top: 1rem;"
              :class="{
                'tit-gray': item.limits === 1,
                'tit-red': item.limits === 2,
              }"
            >
              {{ item.name }}
            </div>
          </div>
          <div
            class="icon-line"
            :class="{
              'icon-line1': item.limits === 1,
              'icon-line2': item.limits === 2,
            }"
            style="transform: rotateY(180deg)"
          >
            <dv-border-box-8
              class="i-x-line"
              style="width: 70px; height: 3px"
              :dur="2.5"
              v-if="item.limits === 0"
            ></dv-border-box-8>
            <dv-border-box-7
              class="i-x-line"
              style="width: 70px; height: 3px"
              :dur="2.5"
              v-if="item.limits === 1"
            ></dv-border-box-7>
            <dv-border-box-7
              class="i-x-line"
              style="width: 70px; height: 3px"
              :dur="2.5"
              v-if="item.limits === 2"
              :color="['red', 'red']"
            ></dv-border-box-7>
          </div>
          <div class="i-origin0 to-right-31" v-if="item.limits === 0"></div>
          <div
            class="i-origin1 to-right-31"
            v-else-if="item.limits === 1"
          ></div>
          <div class="i-origin2 to-right-31" v-else-if="item.limits === 2">
            <i class="el-icon-warning-outline"></i>
          </div>
        </div>
      </div>
      <div
        class="center-ring-click"
        @click="ringClick(ldUrl)"
        v-if="ldUrl != ''"
      ></div>
      <div class="container-c">
        <div class="circle1"></div>
        <!-- <div class="circle2"></div> -->
        <!-- <div class="circle3"></div> -->
      </div>
      <div class="c-right">
        <div
          class="icon-list-con"
          v-for="(item, index) in iList.slice(4, 8)"
          ref="conWid2"
          @click="goCenter(item.to)"
        >
          <div class="i-origin0 to-left-31" v-if="item.limits === 0"></div>
          <div class="i-origin1 to-left-31" v-else-if="item.limits === 1"></div>
          <div class="i-origin2 to-left-31" v-else-if="item.limits === 2">
            <i class="el-icon-warning-outline"></i>
          </div>
          <div
            class="icon-line"
            :class="{
              'icon-line1': item.limits === 1,
              'icon-line2': item.limits === 2,
            }"
          >
            <dv-border-box-8
              class="i-x-line"
              style="width: 70px; height: 3px"
              :dur="2.5"
              v-if="item.limits === 0"
            ></dv-border-box-8>
            <dv-border-box-7
              class="i-x-line"
              style="width: 70px; height: 3px"
              :dur="2.5"
              v-if="item.limits === 1"
            ></dv-border-box-7>
            <dv-border-box-7
              class="i-x-line"
              style="width: 70px; height: 3px"
              :dur="2.5"
              v-if="item.limits === 2"
              :color="['red', 'red']"
            ></dv-border-box-7>
          </div>
          <div class="icon-list-img" style="margin-top: 2rem;">
            <el-image
              :src="item.imgSrc"
              :class="{ l1: item.limits === 1, l2: item.limits === 2 }"
              fit="scale-down"
            >
            </el-image>
            <div
              class="icon-list-tit"
              style="margin-top: 1rem;"
              :class="{
                'tit-gray': item.limits === 1,
                'tit-red': item.limits === 2,
              }"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <!-- <div
        class="icon-list-con team-last"
        @click="
          $router.push({
            path: centerList[8].to,
          })
        "
      >
        <div
          class="icon-list-img"
          style="
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
          "
        >
          <el-image
            :src="centerList[8].imgSrc"
            :class="{
              l1: centerList[8].limits === 1,
              l2: centerList[8].limits === 2,
            }"
            fit="scale-down"
            :style="'width:' + bottomH + 'px'"
          >
          </el-image>
          <div
            class="icon-list-tit"
            :class="{
              'tit-gray': centerList[8].limits === 1,
              'tit-red': centerList[8].limits === 2,
            }"
          >
            {{ centerList[8].name }}
          </div>
        </div>
      </div> -->
    </div>
    <!-- 上一体化入口 -->
    <div class="go-integration-button" ref="lineHeight1">
      <!-- 入口容器 -->
      <div class="img-con">
        <!-- 入口单元格 -->
        <div
          class="img-l-con"
          v-for="(item, index) in centerList"
          ref="lineHeight222"
          @click="goCenter(item.to)"
        >
          <el-image
            :src="item.imgSrc"
            :class="{ l1: item.limits === 1, l2: item.limits === 2 }"
            style="width:110px"
          ></el-image>
          <div class="i-name-con" ref="lineHeight4">
            <div class="name-item">
              <div
                class="i-name"
                :class="{
                  'name-gray': item.limits === 1,
                  'name-red': item.limits === 2,
                }"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间动画 -->
    <div class="yyzx-center-container">
      <!-- 圆环 -->
      <!-- 	<div class="ring-outside">
				<div class="c c13"></div>
				<div class="c c14"></div>
				<div class="c c15"></div>
				<div class="c c16"></div>
				<div class="c c17"></div>
				<div class="c c18"></div>
				<div class="c c19"></div>
				<div class="c c20"></div>
				<div class="c c21"></div>
				<div class="c c22"></div>
				<div class="c c23"></div>
				<div class="c c24"></div>
				<div class="c c25"></div>
				<div class="c c26"></div>
				<div class="c c27"></div>
				<div class="c c28"></div>
				<div class="c c29"></div>
				<div class="c c30"></div>
				<div class="l"></div>
			</div> -->
      <div class="center-demon-container">
        <div class="center-demon" style="">
          <img src="../assets/yyzx2/logo-bg.png" />
        </div>
        <div class="center-demon1" style="">
          <img src="../assets/yyzx2/ring-in.png" />
        </div>
        <div class="center-demon2" style="">
          <img src="../assets/yyzx2/ring-kd.png" />
        </div>
        <div class="center-demon3" style="">
          <img src="../assets/yyzx2/ring-out.png" />
        </div>
        <div class="center-demon4" style="">
          <img src="../assets/yyzx2/ring-t.png" />
        </div>
        <div class="center-demon5" style="">
          <img src="../assets/yyzx2/ring-t-out.png" />
        </div>
        <div id="atome">
          <div class="atome-wrap">
            <div class="circle circle_0"></div>
            <div class="circle circle_1"></div>
            <div class="circle circle_2"></div>
            <div class="circle circle_3"></div>
            <div class="circle circle_4"></div>
            <div class="circle circle_5"></div>
            <div class="circle circle_6"></div>
          </div>
        </div>
      </div>

      <div class="bg-bt"><img src="../assets/yyzx2/center1.png" /></div>
      <!-- <img class="center-building" src="../assets/yyzx2/yy-bg.png" ref="centerFlash" /> -->
      <div class="ring">
        <div class="particle" v-for="(item, index) in 58"></div>
      </div>
    </div>
    <!-- 弹层 -->
    <el-dialog
      title="简介"
      :visible.sync="infoDialogVisible"
      width="80%"
      :before-close="handleClose"
      class="info-d"
    >
      <div class="info-con">
        <div class="img-con">
          <el-image
            :src="img"
            fit="scale-down"
            class="dia-img"
            v-for="(img, index) in infoDialogData.imgList"
            key="index"
          >
          </el-image>
        </div>
        <span class="info-text">{{ infoDialogData.info }}</span>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: center"
      >
        <el-button @click="infoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="goIntegratime(infoDialogData.to)"
          >进入</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selectRoleMenuVisuTreest } from "@/api/system/user";
import { fontConfig } from "@/api/login";
import rightClock from "@/components/clock";
import { getWeather } from "@/api/system/commandCenter";
import { selectConfigKey, getConfigKey } from "@/api/system/config";
import Cookies from "js-cookie";
export default {
  components: {
    rightClock,
  },
  data() {
    return {
      //天气信息
      weatherinformationLow: 0,
      weatherinformationTemperature: 0,
      weatherinformationPower: 0,

      headerTitle: "全域视联平台",
      bottomW: 0, //  中心入口 下方按钮宽
      bottomH: 0, //  中心入口 下方按钮高

      // 可视化入口
      // name:    入口名称
      // imgSrc:  图片路径
      // limits:  权限状态 0 === 默认 正常
      //          权限状态 1 === 无权限 置灰
      //          权限状态 2 === 断开连接 置红
      // to:      入口路径
      ldUrl: "",
      deptList: [
        {
          value: "365",
          label: "四平市",
        }, // 365_四平市
        {
          value: "369",
          label: "双辽市",
        }, // 369_双辽市
        {
          value: "371",
          label: "梨树县",
        }, // 371_梨树县
        {
          value: "373",
          label: "铁西区",
        }, // 373_铁西区
        {
          value: "372",
          label: "铁东区",
        }, // 372_铁东区
        {
          value: "370",
          label: "伊通县",
        }, // 370_伊通县
      ],
      place: "365",
      dept: "365",
      iList: [
        {
          name: "数字林业",
          imgSrc: require("@/assets/yyzx2/icon-szly.png"),
          limits: 0,
          to: "",
          info: "",
          imgList: "",
        },
        {
          name: "数字农业",
          imgSrc: require("@/assets/yyzx2/icon-szny.png"),
          limits: 0,
          to: "",
          info: "",
          imgList: "",
        },
        {
          name: "数字水利",
          imgSrc: require("@/assets/yyzx2/icon-szsl.png"),
          limits: 0,
          to: "",
          info: "",
          imgList: "",
        },
        {
          name: "数字环保",
          imgSrc: require("@/assets/yyzx2/icon-szhb.png"),
          limits: 0,
          to: "",
          info: "",
          imgList: "",
        },
        {
          name: "数字应急",
          imgSrc: require("@/assets/yyzx2/icon-szyj.png"),
          limits: 0,
          to: "",
          info: "",
          imgList: "",
        },
        {
          name: "数字交通",
          imgSrc: require("@/assets/yyzx2/icon-szjt.png"),
          limits: 0,
          to: "",
          info: "",
          imgList: "",
        },
        {
          name: "数字资源",
          imgSrc: require("@/assets/yyzx2/icon-szzy.png"),
          limits: 0,
          to: "",
          info: "",
          imgList: "",
        },
        {
          name: "数字消防",
          imgSrc: require("@/assets/yyzx2/icon-szxf.png"),
          limits: 0,
          to: "",
          info: "",
          imgList: "",
        },

        // {
        //   name: "数字城管",
        //     imgSrc: require("@/assets/yyzx2/icon-szzy.png"),
        //   limits: 0,
        //   to: "",
        //   info: "",
        //   imgList: "",
        // },
        // {
        //   name: "数字食药",
        //     imgSrc: require("@/assets/yyzx2/icon-szzy.png"),
        //   limits: 0,
        //   to: "",
        //   info: "",
        //   imgList: "",
        // },
        // {
        //   name: "数字文旅",
        //     imgSrc: require("@/assets/yyzx2/icon-szzy.png"),
        //   limits: 0,
        //   to: "",
        //   info: "",
        //   imgList: "",
        // },
        // {
        //   name: "数字教育",
        //     imgSrc: require("@/assets/yyzx2/icon-szzy.png"),
        //   limits: 0,
        //   to: "",
        //   info: "",
        //   imgList: "",
        // },
        // {
        //   name: "数字计生",
        //     imgSrc: require("@/assets/yyzx2/icon-szzy.png"),
        //   limits: 0,
        //   to: "",
        //   info: "",
        //   imgList: "",
        // },
        // {
        //   name: "数字医保",
        //     imgSrc: require("@/assets/yyzx2/icon-szzy.png"),
        //   limits: 0,
        //   to: "",
        //   info: "",
        //   imgList: "",
        // },
        // {
        //   name: "数字社保",
        //     imgSrc: require("@/assets/yyzx2/icon-szzy.png"),
        //   limits: 0,
        //   to: "",
        //   info: "",
        //   imgList: "",
        // },
        // {
        //   name: "城乡治理",
        //   imgSrc: require("@/assets/yyzx2/icon-szzy.png"),
        //   limits: 0,
        //   to: "",
        //   info: "",
        //   imgList: "",
        // },
        // {
        //   name: "基层党建",
        //   imgSrc: require("@/assets/yyzx2/icon-szxf.png"),
        //   limits: 0,
        //   to: "",
        //   info: "",
        //   imgList: "",
        // },
      ],

      //中心入口
      centerList: [
        {
          name: "任务中心",
          imgSrc: require("@/assets/yyzx2/icon-rwzx.png"),
          limits: 0,
          to: "",
        },
        {
          name: "消息中心",
          imgSrc: require("@/assets/yyzx2/icon-xxzx.png"),
          limits: 0,
          to: "",
        },
        {
          name: "测评中心",
          imgSrc: require("@/assets/yyzx2/icon-pczx.png"),
          limits: 0,
          to: "",
        },
        {
          name: "档案中心",
          imgSrc: require("@/assets/yyzx2/icon-dazx.png"),
          limits: 0,
          to: "",
        },

        {
          name: "数据中心",
          imgSrc: require("@/assets/yyzx2/icon-sjzx.png"),
          limits: 0,
          to: "",
        },
        {
          name: "事件中心",
          imgSrc: require("@/assets/yyzx2/icon-sjianzx.png"),
          limits: 0,
          to: "",
        },
        {
          name: "监控中心",
          imgSrc: require("@/assets/yyzx2/icon-jkzx.png"),
          limits: 0,
          to: "",
        },
        {
          name: "维护中心",
          imgSrc: require("@/assets/yyzx2/icon-ygzx.png"),
          limits: 0,
          to: "",
        },
        {
          name: "运营中心",
          imgSrc: require("@/assets/yyzx2/icon-yyzx.png"),
          limits: 0,
          to: "",
        },
      ],

      roleMenuVisuList: [],

      //弹层
      infoDialogVisible: false,
      infoDialogData: {
        info: "第十六课积分啊拉萨款到即发阿里斯顿抗击非典拉克丝大姐夫拉屎订单交付拉萨款到即发拉松了萨顶顶啦蛇口街道法老师叫发的卢卡斯积分卢萨卡积分阿斯利康放假阿斯利康大姐夫拉屎抗击非典",
        imgList: [
          require("@/assets/yyzx2/icon-dazx.png"),
          require("@/assets/yyzx2/icon-dazx.png"),
          require("@/assets/yyzx2/icon-dazx.png"),
        ],
        to: "",
      },
    };
  },
  created() {
    this.selectRoleMenuVisuTreest();
    // 获取天气
    this.getWeather();
    //进入主页时就获取超图地址并存入cookie
    this.getConfigKey("superMap.iServer").then((response) => {
      console.log("///////////" + response.msg);
      Cookies.set("superMap.iServer", response.msg, {
        expires: 300,
      });
    });
    this.getheaderTitle();
  },
  mounted() {
    window.onresize = () => {
      this.imgLoad2();
    };
  },
  methods: {
    //获取标题
    getheaderTitle() {
      const that = this;
      selectConfigKey("titlename").then((res) => {
        that.headerTitle = res.data;
      });
    },
    // 获取天气数据
    getWeather() {
      let that = this;
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let str = y + "-" + m + "-" + d;
      getWeather({
        day: str,
      }).then((res) => {
        if (res.data.length > 0) {
          that.weatherinformationLow = res.data[0].weatherinformationLow;
          that.weatherinformationPower = res.data[0].weatherinformationPower;
          that.weatherinformationTemperature =
            res.data[0].weatherinformationTemperature;
        }
        console.log("获取天气数据=", res.data[0]);
      });
    },

    // 获取用户权限
    selectRoleMenuVisuTreest() {
      let _that = this;
      selectRoleMenuVisuTreest().then((response) => {
        // debugger
        for (let i in response.list) {
          if (response.list[i].menuType == "ZC") {
            for (let j in _that.iList) {
              if (response.list[i].menuName == _that.iList[j].name) {
                _that.iList[j].name = response.list[i].menuName;
                _that.iList[j].limits = response.list[i].roleMenuVisuIsShow
                  ? 0
                  : 1;
                _that.iList[j].to = response.list[i].roleMenuVisuIsShow
                  ? response.list[i].pageRouterUrl
                  : "";
                _that.iList[j].info = response.list[i].remark;
                _that.iList[j].imgList = response.list[i].imageUrl;
                _that.iList[j].imgSrc = response.list[i].imageId;
              } else if (response.list[i].perms == "index:lingdaoshouye") {
                _that.ldUrl = response.list[i].roleMenuVisuIsShow
                  ? response.list[i].pageRouterUrl
                  : "";
              }
            }
          } else if (response.list[i].menuType == "FC") {
            for (let j in _that.centerList) {
              if (response.list[i].menuName == _that.centerList[j].name) {
                _that.centerList[j].name = response.list[i].menuName;
                _that.centerList[j].limits = response.list[i].roleMenuVisuIsShow
                  ? 0
                  : 1;
                _that.centerList[j].to = response.list[i].roleMenuVisuIsShow
                  ? response.list[i].pageRouterUrl
                  : "";
              }
            }
          }
        }
      });
    },

    //获取一体化入口宽高
    getHeight() {
      this.$nextTick(() => {
        var h1 = this.$refs.lineHeight1.offsetHeight;
        var h4 = this.$refs.lineHeight4[0].offsetHeight;
        var w1 = this.$refs.lineHeight1.offsetWidth;
        var w2 = this.$refs.lineHeight222[0].offsetWidth;
        var h5 = this.$refs.centerHeight.offsetHeight;
        var w3 = this.$refs.sideWidth.offsetWidth;
        var w4 = this.$refs.conWid[0].offsetWidth;
        var w444 = this.$refs.conWid2[0].offsetWidth;
        var h6 = this.$refs.conWid[0].offsetHeight;

        this.conHeight1 = h1;
        this.conHeight4 = h4;
        this.conWidth1 = w1 - w2;
        this.conWidth2 = w2;
        this.conHeight5 = h5 / 6;
        this.conWidth3 = w3 - w4;
        this.position1 = w4;
        this.conHeight6 = h6 * 3;
      });
    },
    //获取一体化入口宽高
    imgLoad() {
      var imgH = document.getElementById("lineHeight2");
      this.$nextTick(() => {
        this.conHeight3 = this.conHeight1 - imgH.offsetHeight - this.conHeight4;
        this.lineTop = imgH.offsetHeight + this.conHeight3;
        this.conHeight2 = imgH.offsetHeight;
      });
    },
    imgLoad2() {
      var imgH2 = document.getElementById("lineHeight222");
      this.$nextTick(() => {
        this.bottomW = imgH2.offsetWidth; //  中心入口 下方按钮宽
        this.bottomH = imgH2.offsetHeight;

        // console.log(this.bottomW ,this.bottomH ,'这是啥')
      });
    },
    // 中间logo点击事件
    ringClick(to) {
      window.location.href = to;
    },
    //一体化入口点击跳转
    goIntegratime(to) {
      window.location.href = to;
    },
    //中心入口点击跳转
    goCenter(to) {
      if (to != "") {
        window.location.href = to;
      }
    },

    //点击弹出简介pop
    showInfoPop(item) {
      this.infoDialogData.info = item.info;
      this.infoDialogData.imgList =
        item.imgList != null ? item.imgList.split(",") : [];
      this.infoDialogData.to = item.to;
      this.infoDialogVisible = true;
    },
    //弹层关闭
    handleClose(done) {
      this.infoDialogVisible = false;
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/base.scss";

@keyframes shineB {
  0% {
    box-shadow: 0 0 0px #097bde;
  }

  50% {
    box-shadow: 0 0 15px #01dcde;
  }

  100% {
    box-shadow: 0 0 0px #097bde;
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes shineimg2 {
  0% {
    box-shadow: 0 0 0px #1aa7ff;
  }

  50% {
    box-shadow: 0 0 25px #90d3ff;
  }

  100% {
    box-shadow: 0 0 0px #1aa7ff;
  }
}

@keyframes shinetext2 {
  0% {
    text-shadow: 0 0 0px #1aa7ff;
  }

  50% {
    text-shadow: 0 0 10px #90d3ff;
  }

  100% {
    text-shadow: 0 0 0px #1aa7ff;
  }
}

@keyframes shineheader {
  0% {
    text-shadow: 0 0 2px #1aa7ff;
  }

  50% {
    text-shadow: 0 0 18px #90d3ff;
  }

  100% {
    text-shadow: 0 0 2px #1aa7ff;
  }
}

@keyframes shinetextred {
  0% {
    text-shadow: 0 0 0px #ffb403;
  }

  50% {
    text-shadow: 0 0 10px #ff7300;
  }

  100% {
    text-shadow: 0 0 0px #ffb403;
  }
}

//弹层
.info-d {
  .el-dialog {
    background: #04080c !important;
    border: 1px $barBorder !important;
    height: 70%;
  }

  .el-dialog__header {
    padding: 15px 20px !important;
    background-image: -moz-linear-gradient($GradualGreen) !important;
    background-image: -webkit-linear-gradient($GradualGreen) !important;
    background-image: linear-gradient($GradualGreen) !important;
    box-shadow: $shadowTitle !important;

    .el-dialog__title {
      font-weight: bolder !important;
      color: #3cd7ef;
    }
  }

  .el-dialog__body {
    height: 80%;
    overflow-y: scroll;

    .info-con {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem;

      .info-text {
        color: $white;
      }

      .img-con {
        width: 100%;
        display: flex;
        margin-bottom: 2rem;
        justify-content: space-between;

        .dia-img {
          width: 31%;
        }
      }
    }
  }
}

.select-newpage {
  width: 8rem;
  height: 2.4rem;
  z-index: 1000;
  display: flex;
  align-items: center;
  border-radius: 30px;
  margin-left: 1rem !important;
  .el-select-dropdown {
    border: none;
    background-color: rgba(1, 28, 82, 0.8);
  }

  .el-input {
    position: relative;
  }

  .el-input:after {
    content: " ";
    display: block;
    position: absolute;
    left: 0.5rem;
    top: 0.25rem;
    width: 1rem;
    height: 1.3rem;
    z-index: 11;
    background: url("../assets/images/leader-icon1.png") no-repeat center;
  }

  //聚焦时的样式
  .el-select .el-input.is-focus .el-input__inner {
    border-color: #0b61aa;
    background-color: rgba(1, 28, 82, 0.8);
    color: #00d3e9;
  }

  //下拉框选中
  .el-select-dropdown__item {
    color: #eee;
    padding: 0 20px;
  }

  //鼠标经过下拉框
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    color: #00d3e9;
    background-color: #0f3360;
  }

  //输入框
  .el-input__inner {
    color: #eee;
    border: 0px;
    padding-left: 2rem;
    background-size: 100% 100%;
    background: url("../assets/images/leader-topk.png") no-repeat center;
  }
}
</style>
<style lang="scss" scoped>
@import url("../assets/yyzx2/yyzx.css");
@import url("../assets/yyzx2/starflash.css");
@import "@/assets/styles/base.scss";

.center-ring-click {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: none;
  // background: #615426;
  z-index: 100;
  cursor: pointer;
}

.team-last {
  position: absolute !important;
  z-index: 200 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: -5rem !important;
}

.to-right-31 {
  position: absolute;
  right: -33px;
  z-index: 100;
}

.to-left-31 {
  position: absolute;
  left: -33px;
  z-index: 100;
}

.container-c {
  width: 60%;
  height: 59vh;
  text-align: center;
  position: absolute;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.circle1 {
  width: 90%;
  height: 110vh;
  border: 2px solid #295587;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
}

//头部
.yy-header {
  width: 100%;
  height: 7rem;
  position: absolute;
  top: 0;
  background: url("../assets/yyzx2/yy-header-bg.png") no-repeat;
  background-size: 100%;
  z-index: 999999999999999;
  .new-header-nav-list {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    .new-header-nav-list-btn {
      font-size: 1rem;
      text-align: center;
      width: 176px;
      height: 55px;
      line-height: 55px;
      background: url("../assets/images/new-nav-btn-bg.png") no-repeat;
      cursor: pointer;
    }
    .new-header-nav-list-btn:hover {
      background: url("../assets/images/new-nav-btn-bg-hover.png") no-repeat;
    }
  }

  .head-left {
    position: absolute;
    left: 0;
    height: 5vh;
    display: flex;
    align-items: center;

    .head-time {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;

      i {
        display: inline-block;
        width: 2rem;
        height: 2rem;
      }
      .head-fx {
        background: url("../assets/images/leader-icon-fengxiang.png") no-repeat
          5px 5px;
      }

      .head-fs {
        background: url("../assets/images/leader-icon2.png") no-repeat 5px 5px;
      }

      .head-jsl {
        background: url("../assets/images/leader-icon3.png") no-repeat 4px 5px;
      }

      .head-wd {
        background: url("../assets/images/leader-icon4.png") no-repeat 5px 6px;
      }
    }

    span {
      margin-right: 1rem;
      color: #fff;
      font-size: 1rem;
      display: flex;
      flex-direction: row;
      align-items: center;

      u {
        text-decoration: none;
      }
    }

    .timer {
      padding-right: 1rem;
      font-weight: bold;
      font-style: oblique;
    }
  }
  .head-right {
    height: 5vh;
    position: absolute;
    right: 340px;
    display: flex;
    font-size: 1rem;
    align-items: center;
    color: $white;
  }
  .yy-header-tit {
    width: 35%;
    height: 5rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    // background: url('../assets/yyzx2/yy-header-tit.png') no-repeat;
    display: flex;
    justify-content: center;
    background-size: 100%;
    align-items: flex-start;

    .yy-header-tit-text {
      display: flex;
      align-items: center;
      text-align: center;
      color: #d5f2ff;
      // background-image:linear-gradient(180deg,  #0cfbff,#ffffff);
      // background-clip: text;
      // -webkit-background-clip: text;
      font-size: 2rem;
      line-height: 3.5rem;
      letter-spacing: 0.5rem;
      font-family: $fontHk;
      // text-shadow:0 0 0px #fff;
      animation: shineheader 2s infinite;
    }
  }
}

//中心入口
.go-center-top {
  width: 100%;
  position: absolute;
  height: 62%;
  top: 15%;
  left: 0;
  z-index: 12;
  display: flex;
  justify-content: space-between;

  .i-line-x {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #003d2b;
    height: 3px;
    width: 50%;
  }

  .i-line-y {
    height: 75%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #003d2b;
    width: 3px;
  }

  // .icon-list-con:last-child,.icon-list-con:first-child{
  // 	left:-14% !important
  // }
  // .icon-list-con:last-child,.icon-list-con:first-child{
  // 	left:14% !important
  // }

  .icon-list-con {
    height: 25%;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    justify-content: center;

    .icon-list-img {
      -webkit-transition: all 0.5s;
      transition: all 0.5s;

      .el-image {
      }

      .l1 {
        filter: grayscale(100%) !important;
      }

      .l2 {
        filter: sepia(100%) saturate(500%) brightness(54%) hue-rotate(308deg) !important;
      }

      .icon-list-tit {
        // position: relative;
        transform: translateY(-1.3rem);
        font-size: 1.1rem;
        text-align: center;
        color: #fff;
        font-family: zk;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        white-space: nowrap;
      }

      .tit-gray {
        color: #999999 !important;
      }

      .tit-red {
        color: #ff8e01;
      }
    }

    .icon-line {
      width: 70px;
      height: 3px;
      z-index: 9;
      background-color: #1a6a8c !important;
    }

    .icon-line1 {
      width: 70px;
      background-color: #495051 !important;
      height: 3px;
      z-index: 9;
    }

    .icon-line2 {
      width: 70px;
      background-color: #f67300 !important;
      height: 3px;
      z-index: 9;
    }

    .i-origin0 {
      width: 30px;
      height: 30px;
      z-index: 13;
      box-shadow: 0 0 15px #159fd4;
      transform: rotate(45deg);
      animation: shineB 2s infinite;
      // padding: 10em;
      border: 1px solid #159fd4;
    }

    .i-origin0:after {
      width: 8px;
      height: 8px;
      background: none;
      content: "";
      display: block;
      position: absolute;
      background: #0ff;
      background-image: linear-gradient(
        180deg,
        rgba($color: #0085f6, $alpha: 1),
        rgba($color: #0ff, $alpha: 1)
      );
      border: 2px solid #01dcde;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      // width: 20px;
      // height: 20px;
      // padding: 5px;
      //  background: none;
      //   border: 1px solid #fff;
      //   content:"";
      //   display: block;
      //   position: absolute;
      //   top: 10px;
      //   left: 10px;
      //   right: 10px;
      //   bottom: 10px;
      //   pointer-events: none;
      //   z-index: 100;
      // width: 1.5rem;
      // height: 1.5rem;
      // position: absolute;
      // right: 0;
      // background:none;
      // border: 1px solid #01dcde;
      // z-index: 13;
      // transform: rotate(45deg);
      // animation: shineB 2s infinite;
      // z-index: 1000
    }

    .i-origin1 {
      width: 30px;
      height: 30px;
      z-index: 13;
      transform: rotate(45deg);
      // padding: 10em;
      border: 1px solid #acbbbf;
    }
    .i-origin1:after {
      width: 8px;
      height: 8px;
      background: none;
      content: "";
      display: block;
      position: absolute;
      background: #acbbbf;
      background-image: linear-gradient(
        180deg,
        rgba($color: #acbbbf, $alpha: 1),
        rgba($color: #acbbbf, $alpha: 1)
      );
      border: 2px solid #acbbbf;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .i-origin2 {
      width: 32px;
      height: 32px;
      background: #0ff;
      background-image: linear-gradient(
        180deg,
        rgba($color: #f60000, $alpha: 1),
        rgba($color: #ff8e0c, $alpha: 1)
      );
      border-radius: 100%;
      border: 1px solid #ff6e06;
      z-index: 13;
      animation: shineRed22 2s infinite;
      display: flex;
      justify-content: center;
      align-items: center;

      i {
        color: #fed507;
        font-size: 1.5rem;
      }
    }

    @keyframes shineRed22 {
      0% {
        box-shadow: 0 0 3px #ffef07;
      }

      50% {
        scale: 1;
        box-shadow: 0 0 20px #ff6702;
      }

      100% {
        box-shadow: 0 0 3px #ffef07;
      }
    }
  }

  .icon-list-con:hover {
    .icon-list-img {
      transform: scale(1.2, 1.2);

      .el-image {
        animation: cccbt 2s infinite;
      }

      .l1 {
        filter: grayscale(100%) !important;
      }

      .l2 {
        filter: sepia(100%) saturate(500%) brightness(54%) hue-rotate(308deg) !important;
      }

      .icon-list-tit {
        // position: relative;
        transform: translateY(-1rem);
        text-align: center;
        color: #ffffff;
        font-family: zk;
        animation: shinetext2 1s infinite;
      }

      .tit-gray {
        color: #999999 !important;
        animation: none !important;
      }

      .tit-red {
        color: #ff8e01;
        animation: shinetextred 1s infinite;
      }
    }
  }

  .c-left {
    width: 10.8%;
    display: flex;
    flex-direction: column;
    position: relative;
    left: 11.6%;
    justify-content: center;
    align-items: center;

    .icon-list-con:last-child,
    .icon-list-con:first-child {
      left: 20% !important;
    }
  }

  .c-right {
    width: 10.8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    right: 11.6%;
    align-items: center;

    .icon-list-con:last-child,
    .icon-list-con:first-child {
      left: -20% !important;
    }
  }
}

//一体化入口
.go-integration-button {
  width: 100%;
  height: 150px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: url("../assets/yyzx2/btm-menu-bg.png") no-repeat bottom;
  align-items: center;
  background-size: contain;

  .i-line-y {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: #003d2b;
    height: 50%;
  }

  //图片
  .img-con {
    width: 85%;
    z-index: 7;
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    bottom: 0.2rem;

    .i-x-line {
    }

    .img-l-con {
      // width: 11%;
      // height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      transform: scale(1, 1) translateY(0px);
      transition: all 1s;

      .el-image {
        // box-shadow: 0 0 5px #00ffb7;
        // border: 1px solid #01458e;
        z-index: 10;
        transition: all 0.5s;

        img {
          width: 100%;
        }
      }

      .show-button {
        width: 100%;
        height: 50px;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0);
        z-index: 11;
        // transition: all 0.5s;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .button-item {
          width: 100%;
          position: relative;
          z-index: 14;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          padding: 5%;
          transition: all 0.5s;
          transform: translateY(-50px);

          button {
            width: 40%;
            height: 2rem;
            background-image: linear-gradient(
              180deg,
              rgba($color: #215de8, $alpha: 0.8),
              rgba($color: #3d7bdd, $alpha: 1)
            );
            color: #fff;
            border: 1px solid #33467f;
            display: flex;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          button:hover {
            width: 40%;
            background-image: linear-gradient(
              180deg,
              rgba($color: #215de8, $alpha: 0.8),
              rgba($color: #4edda6, $alpha: 1)
            );
            color: #fff;
            border: 1px solid #8de9fe;
            box-shadow: 0 0 6px #00ffb7;
            animation: shineimg2 2s infinite;
            padding: 0;
            align-items: center;
            justify-content: center;
          }
        }
      }

      .l1 {
        filter: grayscale(100%) !important;
      }

      .l2 {
        filter: sepia(100%) saturate(500%) brightness(54%) hue-rotate(308deg);
        animation: shineimg 1s infinite;
      }

      @keyframes shineimg {
        0% {
          box-shadow: 0 0 0px #00ffb7;
        }

        50% {
          box-shadow: 0 0 15px #00ffb7;
        }

        100% {
          box-shadow: 0 0 0px #44ff00;
        }
      }

      .img-line0 {
        width: 1px;
        top: -8px;
        position: relative;
        z-index: 9;
        background-color: #1a6a8c !important;
      }

      .img-line1 {
        background-color: #495051 !important;
      }

      .img-line2 {
        background-color: #f67300 !important;
      }

      //名称
      .i-name-con {
        width: 100%;
        height: 25%;
        display: flex;
        justify-content: space-between;
        z-index: 10;

        .name-item {
          width: 100%;
          height: 100%;
          // background: red;
          display: flex;
          flex-direction: column;
          position: relative;
          justify-content: center;

          .i-origin0 {
            width: 0.5rem;
            height: 0.5rem;
            background: #0ff;
            background-image: linear-gradient(
              180deg,
              rgba($color: #0085f6, $alpha: 1),
              rgba($color: #0ff, $alpha: 1)
            );
            position: absolute;
            border: 1px solid #01dcde;
            top: -0.4rem;
            z-index: 8;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            box-shadow: 0 0 15px #00ffb7;
            animation: shineB 2s infinite;
          }

          .i-origin1 {
            width: 0.3rem;
            height: 0.3rem;
            background: #0ff;
            background-image: linear-gradient(
              180deg,
              rgba($color: #676767, $alpha: 1),
              rgba($color: #cccccc, $alpha: 1)
            );
            border-radius: 100%;
            position: absolute;
            border: 1px solid #ebebeb;
            top: -0.4rem;
            z-index: 8;
            left: 50%;
            transform: translateX(-50%);
          }

          .i-origin2 {
            width: 0.3rem;
            height: 0.3rem;
            background: #0ff;
            background-image: linear-gradient(
              180deg,
              rgba($color: #f60000, $alpha: 1),
              rgba($color: #ff8e0c, $alpha: 1)
            );
            border-radius: 100%;
            position: absolute;
            border: 1px solid #ff6e06;
            top: -0.4rem;
            z-index: 8;
            left: 50%;
            transform: translateX(-50%) scale(1, 1);
            box-shadow: 0 0 15px #ffef07;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 1s;
            animation: shineRed 1s infinite;

            i {
              color: #fed507;
            }
          }

          @keyframes shineRed {
            0% {
              box-shadow: 0 0 3px #ffef07;
            }

            50% {
              transform: translateX(-50%) scale(1.5, 1.5);
              box-shadow: 0 0 15px #ff6702;
            }

            100% {
              box-shadow: 0 0 3px #ffef07;
            }
          }

          .i-name {
            font-size: 1.1rem;
            text-align: center;
            color: #ffffff;
            font-family: $fontFk;
            transition: all 0.5s;
          }

          .name-gray {
            color: #999999 !important;
          }

          .name-red {
            color: #ff8e01;
          }
        }
      }
    }

    //一体化窗口滑过

    .img-l-con:hover {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      cursor: pointer;
      transform: scale(1.1, 1.1) translateY(-10px);
      transition: all 0.5s;

      .el-image {
        // box-shadow: 0 0 10px #00ffb7;
        // border: 2px solid #95ecff;
        // animation: shineimg2 2s infinite;

        // img {
        // 	width: 100%;
        // }
        animation: cccbt 2s infinite;
      }

      .show-button {
        transform: translateX(-50%) translateY(-8px);
        opacity: 1;
        z-index: 11;
        transition: all 0.5s;
        background: rgba(0, 0, 0, 0.5);

        .button-item {
          width: 100%;
          position: relative;
          z-index: 14;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          padding: 5%;
          transform: translateY(0);
        }
      }

      .l1 {
        filter: grayscale(100%) !important;
        animation: none !important;
      }

      .l2 {
        filter: sepia(100%) saturate(500%) brightness(54%) hue-rotate(308deg);
        animation: shineimg 1s infinite;
      }

      .img-line0 {
        width: 1px;
        background-color: #69cbff !important;
        animation: shineimg2 1s infinite;
      }

      .img-line1 {
        background-color: #495051 !important;
      }

      .img-line2 {
        background-color: #f67300 !important;
      }

      //名称
      .i-name-con {
        width: 100%;
        height: 25%;
        display: flex;
        justify-content: space-between;
        z-index: 10;

        .name-item {
          width: 100%;
          height: 100%;
          // background: red;
          display: flex;
          flex-direction: column;
          position: relative;
          justify-content: center;

          .i-origin0 {
            width: 10px;
            height: 10px;
            background: #0ff;
            background-image: linear-gradient(
              180deg,
              rgba($color: #0077f6, $alpha: 1),
              rgba($color: #d3ff0c, $alpha: 1)
            );
            border-radius: 100%;
            position: absolute;
            border: 1px solid #01dcde;
            top: -0.4rem;
            z-index: 8;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            box-shadow: 0 0 15px #00ffb7;
            animation: shineB 2s infinite;
          }

          .i-origin1 {
            width: 10px;
            height: 10px;
            background: #0ff;
            background-image: linear-gradient(
              180deg,
              rgba($color: #676767, $alpha: 1),
              rgba($color: #cccccc, $alpha: 1)
            );
            border-radius: 100%;
            position: absolute;
            border: 1px solid #ebebeb;
            top: -0.4rem;
            z-index: 8;
            left: 50%;
            transform: translateX(-50%);
            animation: none !important;
          }

          .i-origin2 {
            width: 10px;
            height: 10px;
            background: #0ff;
            background-image: linear-gradient(
              180deg,
              rgba($color: #f60000, $alpha: 1),
              rgba($color: #ff8e0c, $alpha: 1)
            );
            border-radius: 100%;
            position: absolute;
            border: 1px solid #ff6e06;
            top: -0.4rem;
            z-index: 8;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 15px #ffef07;
            display: flex;
            justify-content: center;
            align-items: center;

            i {
              color: #fed507;
            }

            animation: shineRed 1s infinite;
          }

          .i-name {
            text-align: center;
            font-family: $fontFk;
            animation: shinetext2 1s infinite;
          }

          .name-gray {
            color: #999999 !important;
            animation: none !important;
          }

          .name-red {
            color: #ff8e01;
            animation: shinetextred 1s infinite;
          }
        }
      }
    }
  }
}

.ring-outside {
  width: 445px;
  height: 510px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.center-demon-container {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 23%;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;

  .center-demon {
    animation: ccc 3s infinite;
    -webkit-filter: hue-rotate(20deg);
    position: absolute;
    z-index: 3;
  }

  .center-demon1 {
    animation: spin 5s infinite;
    position: absolute;
    z-index: 3;
  }

  .center-demon2 {
    animation: spin2 5s infinite;
    position: absolute;
    z-index: 3;
  }

  .center-demon3 {
    animation: spin 10s infinite;
    position: absolute;
    z-index: 3;
  }

  .center-demon4 {
    animation: spin2 8s infinite;
    position: absolute;
    z-index: 3;
  }

  .center-demon5 {
    position: absolute;
    z-index: 3;
  }
}

.bg-bt {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  // -webkit-filter: hue-rotate(20deg);
  animation: cccbt 3.5s infinite;
}

@keyframes ccc {
  0% {
    -webkit-filter: hue-rotate(0deg) brightness(1);
  }

  50% {
    -webkit-filter: hue-rotate(0deg) brightness(1.5);
  }

  100% {
    -webkit-filter: hue-rotate(0deg) brightness(1);
  }
}

@keyframes cccbt {
  0% {
    -webkit-filter: hue-rotate(0deg) brightness(1);
  }

  25% {
    -webkit-filter: hue-rotate(0deg) brightness(1.1);
  }

  50% {
    -webkit-filter: hue-rotate(0deg) brightness(1);
  }

  75% {
    -webkit-filter: hue-rotate(0deg) brightness(1.3);
  }

  100% {
    -webkit-filter: hue-rotate(0deg) brightness(1);
  }
}

@keyframes cc {
  0% {
    -webkit-filter: hue-rotate(0deg);
    top: 35%;
  }

  20% {
    -webkit-filter: hue-rotate(343deg);
    top: 36%;
  }

  50% {
    -webkit-filter: hue-rotate(0deg);
    top: 35%;
  }

  70% {
    -webkit-filter: hue-rotate(216deg);
    top: 36%;
  }

  100% {
    -webkit-filter: hue-rotate(0deg);
    top: 35%;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
  // 容器
  .yyzx-center-container {
    // transform:scale(2,2);
    width: 50%;
    height: 45rem;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
  }

  .team-last {
    position: absolute !important;
    z-index: 200 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -5rem !important;
  }
}

@media screen and (min-width: 1930px) and (max-width: 2660px) {
  .go-integration-button .img-con .img-l-con .i-name-con .name-item .i-name,
  .go-center-top .icon-list-con .icon-list-img .icon-list-tit {
    font-size: 1.6rem;
  }

  .yy-header .yy-header-tit .yy-header-tit-text {
    font-size: 3rem;
    line-height: 5rem;
  }

  // 容器
  .yyzx-center-container {
    width: 50%;
    height: 45rem;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) scale(1.3, 1.3);
  }

  .team-last {
    position: absolute !important;
    z-index: 200 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -10rem !important;
  }
}

@media screen and (min-width: 2670px) and (max-width: 3850px) {
  // 容器

  .go-integration-button .img-con .img-l-con .i-name-con .name-item .i-name,
  .go-center-top .icon-list-con .icon-list-img .icon-list-tit {
    font-size: 2rem;
  }

  .yy-header .yy-header-tit .yy-header-tit-text {
    font-size: 3rem;
    line-height: 5rem;
  }

  .yyzx-center-container {
    width: 50%;
    height: 45rem;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%) scale(1.8, 1.8);
  }

  .team-last {
    position: absolute !important;
    z-index: 200 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -15rem !important;
  }

  .starfield {
    display: none !important;
  }
}

.center-building {
  height: 50%;
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  height: 510px;
  animation: abc 15s infinite;
  -webkit-filter: hue-rotate(0deg);
}

@keyframes abc {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }

  20% {
    -webkit-filter: hue-rotate(343deg);
  }

  50% {
    -webkit-filter: hue-rotate(30deg);
  }

  70% {
    -webkit-filter: hue-rotate(216deg);
  }

  100% {
    -webkit-filter: hue-rotate(0deg);
  }
}

.yying-bg {
  width: 100%;
  height: 100%;
  // background-color: #010739;
  background: url("../assets/yyzx2/bg.jpg") no-repeat center;
  background-size: cover;
  overflow: hidden;
  position: absolute;
  font-size: 16px;
}

#atome {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.atome-wrap {
  height: 200px;
  width: 200px;
  margin: auto;
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: turn 8s infinite;
  animation-timing-function: linear;
}

.atome-wrap:after,
.atome-wrap:before {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 100%;
  background-color: #fff;
  box-shadow: 0 0 10px #000, 0 0 15px #4fff34, 0 0 30px #31ff42;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -4px;
}

.atome-wrap:before {
  transform: rotateX(90deg);
}

.circle {
  height: 200px;
  width: 200px;
  position: absolute;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-radius: 100%;
  border: dashed 1.5px rgba(0, 255, 255, 0.1);
  animation-timing-function: linear;
}

.circle:before {
  content: "";
  position: absolute;
  height: 4px;
  width: 8px;
  border-radius: 100%;
  background-color: #fff;
  box-shadow: 0 0 10px #c1fffd, 0 0 15px #3bff1d, 0 0 30px #f9ff74,
    0 0 40px #69cbff;
  animation: electrons 3s infinite;
  animation-timing-function: linear;
}

.circle:after {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 100%;
  background-color: #fff;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -4px;
  box-shadow: 0 0 10px #000, 0 0 15px #64fff9, 0 0 30px #0ff;
}

.circle_0 {
  transform: translateZ(0px) rotateY(0deg) rotateX(0deg);
  animation: rotate_0 1.8s infinite;
  animation-timing-function: linear;

  height: 300px;
  width: 300px;
  top: -50px;
  left: -50px;
}

.circle_0:before {
  top: 50%;
  left: 0;
  margin-left: -3px;
  margin-top: 0;
  height: 8px;
  width: 3px;
}

.circle_1 {
  transform: translateZ(0px) rotateY(90deg) rotateX(0deg);
  animation: rotate_1 1.8s infinite;
  animation-timing-function: linear;

  height: 300px;
  width: 300px;
  top: -50px;
  left: -50px;
}

.circle_1:before {
  top: 50%;
  right: 0;
  margin-right: -2px;
  margin-top: 0px;
  width: 3px;
  height: 8px;
}

.circle_2 {
  transform: translateZ(0px) rotateY(45deg) rotateX(0deg);
  animation: rotate_2 1.2s infinite;
  animation-timing-function: linear;
}

.circle_2:before {
  top: 50%;
  right: 0;
  margin-right: -3px;
  margin-top: 0;
  height: 8px;
  width: 3px;
}

.circle_3 {
  transform: translateZ(0px) rotateY(135deg) rotateX(0deg);
  animation: rotate_3 1.2s infinite;
  animation-timing-function: linear;
}

.circle_3:before {
  bottom: 50%;
  right: 0;
  margin-right: -3px;
  margin-bottom: 0;
  height: 8px;
  width: 3px;
}

.circle_4 {
  transform: rotateX(90deg) rotateY(-30deg) translateZ(0px) translateY(0px);
  animation: rotate_4 0.5s infinite;
  animation-timing-function: linear;

  height: 100px;
  width: 100px;
  top: 50px;
  left: 50px;
}

.circle_4:before {
  top: 50%;
  left: 0;
  margin-left: -3px;
  margin-top: 0;
  height: 8px;
  width: 3px;
}

.circle_5 {
  transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px);
  animation: rotate_5 0.5s infinite;
  animation-timing-function: linear;

  height: 100px;
  width: 100px;
  top: 50px;
  left: 50px;
}

.circle_5:before {
  top: 50%;
  right: 0;
  margin-right: -2px;
  margin-top: 0px;
  width: 3px;
  height: 8px;
}

.circle_6 {
  transform: rotateX(50deg) rotateY(90deg) translateZ(0px) translateY(0px);
  animation: rotate_5 0.5s infinite;
  animation-timing-function: linear;

  height: 100px;
  width: 100px;
  top: 50px;
  left: 50px;
}

.circle_6:before {
  top: 50%;
  right: 0;
  margin-right: -2px;
  margin-top: 0px;
  width: 3px;
  height: 8px;
}

@keyframes turn {
  0% {
    transform: rotateX(0deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(360deg) rotateZ(360deg);
  }
}

@keyframes electrons {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  50% {
    transform: rotateY(180deg);
    opacity: 0.2;
  }

  100% {
    transform: rotateY(360deg);
    opacity: 1;
  }
}

@keyframes rotate_0 {
  0% {
    transform: translateZ(0px) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    border: dashed 1.5px rgba(0, 255, 255, 0.1);
  }

  50% {
    transform: translateZ(0px) rotateY(0deg) rotateX(0deg) rotateZ(180deg);
    border: dashed 1.5px rgba(16, 244, 255, 1);
  }

  100% {
    transform: translateZ(0px) rotateY(0deg) rotateX(0deg) rotateZ(360deg);
    border: dashed 1.5px rgba(0, 255, 255, 0.1);
  }
}

@keyframes rotate_1 {
  0% {
    transform: translateZ(0px) rotateY(90deg) rotateX(0deg) rotateZ(0deg);
    border: dashed 3px rgba(0, 255, 255, 0.1);
  }

  50% {
    transform: translateZ(0px) rotateY(90deg) rotateX(0deg) rotateZ(-180deg);
    border: dashed 1.5px rgba(0, 255, 29, 1);
  }

  100% {
    transform: translateZ(0px) rotateY(90deg) rotateX(0deg) rotateZ(-360deg);
    border: dashed 1.5px rgba(0, 255, 255, 0.1);
  }
}

@keyframes rotate_2 {
  0% {
    transform: translateZ(0px) rotateY(0deg) rotateX(135deg) rotateZ(0deg);
    border: dashed 6px rgba(0, 255, 255, 0.1);
  }

  50% {
    transform: translateZ(0px) rotateY(0deg) rotateX(135deg) rotateZ(180deg);
    border: dashed 1.5px rgba(0, 255, 255, 1);
  }

  100% {
    transform: translateZ(0px) rotateY(0deg) rotateX(135deg) rotateZ(360deg);
    border: dashed 1.5px rgba(0, 255, 255, 0.1);
  }
}

@keyframes rotate_3 {
  0% {
    transform: translateZ(0px) rotateY(0deg) rotateX(45deg) rotateZ(0deg);
    border: dashed 1.5px rgba(0, 255, 255, 0.1);
  }

  50% {
    transform: translateZ(0px) rotateY(0deg) rotateX(45deg) rotateZ(-180deg);
    border: dashed 6px rgba(130, 255, 209, 1);
  }

  100% {
    transform: translateZ(0px) rotateY(0deg) rotateX(45deg) rotateZ(-360deg);
    border: dashed 5px rgba(0, 255, 255, 0.1);
  }
}

@keyframes rotate_4 {
  0% {
    transform: rotateX(90deg) rotateY(-30deg) translateZ(0px) translateY(0px)
      rotateZ(0deg);
    border: dashed 1.5px rgba(255, 255, 255, 1);
  }

  50% {
    transform: rotateX(90deg) rotateY(-30deg) translateZ(0px) translateY(0px)
      rotateZ(180deg);
    border: dashed 1.5px rgba(0, 255, 255, 0.1);
  }

  100% {
    transform: rotateX(90deg) rotateY(-30deg) translateZ(0px) translateY(0px)
      rotateZ(360deg);
    border: dashed 1.5px rgba(255, 255, 255, 1);
  }
}

@keyframes rotate_5 {
  0% {
    transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px)
      rotateZ(0deg);
    border: dashed 1.5px rgba(245, 255, 39, 1);
  }

  50% {
    transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px)
      rotateZ(-180deg);
    border: dashed 1.5px rgba(0, 255, 255, 0.1);
  }

  100% {
    transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px)
      rotateZ(-360deg);
    border: dashed 1.5px rgba(255, 255, 255, 1);
  }
}

@keyframes rotate_6 {
  0% {
    transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px)
      rotateZ(0deg);
    border: dashed 1.5px rgba(255, 193, 164, 1);
  }

  50% {
    transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px)
      rotateZ(-180deg);
    border: dashed 1.5px rgba(43, 32, 27, 0.1);
  }

  100% {
    transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px)
      rotateZ(-360deg);
    border: dashed 1.5px rgba(255, 81, 23, 1);
  }
}

.c {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(45deg);
  /* 	Native CSS properties don't support the customization of border-style. Therefore, we use a trick with an SVG image inside background-image property.
		https://kovart.github.io/dashed-border-generator/
		*/
  /* 	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='aqua' stroke-width='1' stroke-dasharray='1' stroke-dashoffset='1' stroke-linecap='butt'/%3e%3c/svg%3e"); */
  border-radius: 50%;
  border: 1px dotted aqua;
  animation: dripBounce 5s infinite;
}

@keyframes dripBounce {
  /* 	0%{top:50%} */
  10% {
    top: calc(50% + 5px);
  }

  20% {
    top: calc(50% - 5px);
  }

  35% {
    top: 50%;
  }
}

.c13 {
  height: 130px;
  width: 260px;
  animation-delay: -7.6s;
  top: calc(50% + 12px);
}

.c14 {
  height: 140px;
  width: 280px;
  animation-delay: -7.4s;
  top: calc(50% + 13px);
}

.c15 {
  height: 150px;
  width: 300px;
  animation-delay: -7.2s;
  top: calc(50% + 14px);
}

.c16 {
  height: 160px;
  width: 320px;
  animation-delay: -7s;
  top: calc(50% + 15px);
}

.c17 {
  height: 170px;
  width: 340px;
  animation-delay: -6.8s;
  top: calc(50% + 16px);
}

.c18 {
  height: 180px;
  width: 360px;
  animation-delay: -6.6s;
  top: calc(50% + 17px);
}

.c19 {
  height: 190px;
  width: 380px;
  animation-delay: -6.4s;
  top: calc(50% + 18px);
}

.c20 {
  height: 200px;
  width: 400px;
  animation-delay: -6.2s;
  top: calc(50% + 19px);
}

.c21 {
  height: 210px;
  width: 420px;
  animation-delay: -6s;
  top: calc(50% + 20px);
}

.c22 {
  height: 220px;
  width: 440px;
  animation-delay: -5.8s;
  top: calc(50% + 21px);
}

.c23 {
  height: 230px;
  width: 460px;
  animation-delay: -5.6s;
  top: calc(50% + 22px);
}

.c24 {
  height: 240px;
  width: 480px;
  animation-delay: -5.4s;
  top: calc(50% + 23px);
}

.c25 {
  height: 250px;
  width: 500px;
  animation-delay: -5.2s;
  top: calc(50% + 24px);
}

.c26 {
  height: 260px;
  width: 520px;
  animation-delay: -5s;
  top: calc(50% + 25px);
}

.c27 {
  height: 270px;
  width: 540px;
  animation-delay: -4.8s;
  top: calc(50% + 26px);
}

.c28 {
  height: 280px;
  width: 560px;
  animation-delay: -4.6s;
  top: calc(50% + 27px);
}

.c29 {
  height: 290px;
  width: 580px;
  animation-delay: -4.4s;
  top: calc(50% + 28px);
}

.c30 {
  height: 300px;
  width: 600px;
  animation-delay: -4.2s;
  top: calc(50% + 29px);
}

.l {
  height: 20px;
  width: 1px;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -70%);
  background: aqua;
  animation: drip 5s infinite;
  animation-delay: -10.3s;
}

@keyframes drip {
  0% {
    opacity: 1;
    top: 0%;
  }

  10% {
    opacity: 0.1;
    top: calc(50% + 10px);
  }

  100% {
    opacity: 0;
  }
}

.bg-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  // background: url('../assets/yyzx2/b-bg.png') no-repeat center;
  background-size: cover;
  z-index: 1;
}
</style>