  <template>
    <div style="height: 100vh;overflow-y: auto">
      <!--  头部-->
      <header class="header-top">
        <div class="left-style">
          <div class="logo">
            <img :src="logoImg" alt="" v-if="logoImg">
            <img src="../../assets/kyy/temporaryPic/img_3.png" alt="" class="img" v-else>
          </div>
          <ul class="titleWord">
            <li>首页</li>
            <li @click="goOtherPage('product')">产品服务</li>
            <li @click="goOtherPage('solve')">解决方案</li>
            <li @click="goOtherPage('service')">服务中心</li>
            <li @click="goOtherPage('news')">新闻资讯</li>
            <li @click="goOtherPage('aboutUs')">关于我们</li>
          </ul>
        </div>
        <div class="right-style">
          <el-dropdown @visible-change="visibleChange" @command="handleCommand">
            <span class="el-dropdown-link download" style="font-size: 0.187rem">
              用户手册
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template slot-scope="">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="item" v-for="item in selectData" :key="item.id">{{item.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>

          </el-dropdown>
          <span class="download"></span>
          <el-button @click="login" class="loginBtn-style" style="color: white">登录</el-button>
          <el-button @click="register" class="register-style">注册</el-button>
        </div>
      </header>

      <!--  轮播图-->
      <div class="banner" >
        <el-carousel :interval="50000" arrow="always" style="height: 4.8rem;">
          <el-carousel-item style="height: 4.8rem;" class="banner-item">
            <img src="../../assets/kyy/banner01.png">
          </el-carousel-item>
          <el-carousel-item style="height: 4.8rem;" class="banner-item">
            <img src="../../assets/kyy/temporaryPic/bann2.png">
          </el-carousel-item>
          <el-carousel-item style="height: 4.8rem;" class="banner-item">
            <img src="../../assets/kyy/temporaryPic/banner5.jpg">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="clearFloat"></div>
      <div>
        <ul style="display: flex;justify-content: space-between;margin-top: 1.333rem;padding-left:0;" >
          <li class="content-footer-item" style="padding-left:0;display: flex;flex-direction:row;justify-content: center;align-items: center">
            <img class="icon-footer" src="../../assets/kyy/Icon-kexuejishu-.svg" alt="">
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
              <span class="footer-title" style="cursor: pointer" @click="goProduct('http://tmpweb.opencomputing.cn/col.jsp?id=146')">公有云</span>
              <!--            <span class="footer-content">算力互联网络和算力调度核心技术</span>-->
            </div>

          </li>
          <li class="content-footer-item" style="display: flex;flex-direction:row;justify-content: center;align-items: center">
            <img class="icon-footer" src="../../assets/kyy/Icon-_khgx.svg" alt="">
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
              <span class="footer-title" style="cursor: pointer" @click="goProduct('http://tmpweb.opencomputing.cn/col.jsp?id=138')">超算</span>
              <!--            <span class="footer-content" >中立的全国性网络资源算力中心资源</span>-->
            </div>
          </li>
          <li class="content-footer-item" style="display: flex;flex-direction:row;justify-content: center;align-items: center">
            <img class="icon-footer" src="../../assets/kyy/Icon-a-01changjing.svg" alt="">
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
              <span class="footer-title" style="cursor: pointer" @click="goProduct('http://tmpweb.opencomputing.cn/col.jsp?id=139')">智算</span>
              <!--            <span class="footer-content">面向行业<br/>-->
              <!--面向应用</span>-->
            </div>
          </li>
          <li class="content-footer-item" style="display: flex;flex-direction:row;justify-content: center;align-items: center">
            <img class="icon-footer" src="../../assets/kyy/Icon-yunyingzhongxin.svg" alt="">
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
              <span class="footer-title" style="cursor: pointer" @click="goProduct('http://tmpweb.opencomputing.cn/col.jsp?id=140')">网络</span>
              <!--            <span class="footer-content">多年运营服务经验 <br/>市场客户沉淀</span>-->
            </div>
          </li>

        </ul>
      </div>

      <!--    核心业务-->
      <div class="business">
        <span class="business-title" style="margin-bottom: 0.2rem;margin-top: 1.133rem">核心业务</span>
        <span class="business-content" style="margin-bottom: 0.2rem">提供领先、可靠、多场景的应用解决方案安全、稳定、确定</span>
        <!--      四个li-->
        <ul style="display: flex;justify-content: center;padding-left: 0">
          <li class="content-footer-item">
            <img style="width: 2.667rem;height: 2.667rem;" src="../../assets/kyy/temporaryPic/w1.png" alt="">
            <span class="footer-title">智算中心</span>
            <span class="footer-content">智算中心咨询
              /规划/建设/运营/运维</span>
          </li>
          <li class="content-footer-item">
            <img style="width: 2.667rem;height: 2.667rem;" src="../../assets/kyy/temporaryPic/w2.png" alt="">
            <span class="footer-title">算力网络</span>
            <span class="footer-content">云互联、超算互联、智算互联</span>
          </li>
          <li class="content-footer-item">
            <img style="width: 2.667rem;height: 2.667rem;" src="../../assets/kyy/temporaryPic/w3.png" alt="">
            <span class="footer-title">算力服务</span>
            <span class="footer-content">融合云、HPC、AI算力、信创</span>
          </li>
          <li class="content-footer-item">
            <img style="width: 2.667rem;height: 2.667rem;" src="../../assets/kyy/temporaryPic/w4.png" alt="">
            <span class="footer-title">应用解决方案</span>
            <span class="footer-content">企业多场景云服务、高校科学计算、大模型架构及应用</span>
          </li>
        </ul>
        <span class="business-title" style="margin-top: 0.3rem;margin-bottom: 0.2rem">深入业务场景的算网解决方案</span>
        <span class="business-content" style="margin-bottom: 0.333rem">以高水平算网调度解决方案助力各行业高质量发展</span>
        <!--      图片-->
        <div>
          <img class="business-pic" style="width: 16rem;height: 4rem;" src="../../assets/kyy/深入方案bg.png">
        </div>
      </div>

      <!--    全国高校算力网络-->
      <!--    <div class="shcool" style="margin-bottom: 50px;margin-top: 55px">-->
      <!--      <span class="business-title" style="margin-bottom: 15px">全国算力网络</span>-->
      <!--      <span class="business-content" style="margin-bottom: 15px">算力统一管理 算网一体服务</span>-->
      <!--      <div class="shcool-main">-->
      <!--        <img alt="" src="../../assets/kyy/Map.png">-->
      <!--        1di -->

      <!--            新闻板块-->
      <!--        <div class="news-block">-->
      <!--          <span class="title-news">创新论坛</span>-->
      <!--          <p class="news-content">   2023全国高校算力网络创新论坛聚焦高校数字化转型背景下针对高校科研领域的新要求，分享算力网络最新的前沿技术，共话算力网络技术与服务企业产业布局，研讨高校科研需求与算力技术的供应。</p>-->
      <!--   <div style="display: flex;justify-content: center;align-items: center">-->
      <!--     <div class="pic-news">-->
      <!--       <img src="../../assets/kyy/temporaryPic/640(1).jpg" alt="">-->
      <!--     </div>-->
      <!--     <div class="pic-news">-->
      <!--       <img src="../../assets/kyy/temporaryPic/640.jpg" alt="">-->
      <!--     </div>-->
      <!--   </div>-->
      <!--        </div>-->

      <!--        1di -->
      <!--        <div class="left-content">-->

      <!--          <div class="top-school">-->
      <!--            <div class="c-one">-->
      <!--              <span class="school-title">二级ROADM节点</span>-->
      <!--              <span class="school-school">106-->
      <!--              <span class="school-title">个</span>-->
      <!--              </span>-->

      <!--            </div>-->
      <!--            <div class="c-two">-->
      <!--              <span class="school-title">核心节点</span>-->
      <!--              <span class="school-school">106-->
      <!--              <span class="school-title">个</span></span>-->
      <!--            </div>-->
      <!--            <div class="c-thr">-->
      <!--              <span class="school-title" style="font-size: 14px">OA节点</span>-->
      <!--              <span class="school-school" style="font-size: 24px">306-->
      <!--              <span class="school-title">个</span></span>-->
      <!--            </div>-->
      <!--            <span class="tip-word">-->
      <!--              局部配套-->
      <!--            </span>-->

      <!--            &lt;!&ndash;            系统组成&ndash;&gt;-->
      <!--            <div class="main-content">-->
      <!--              <span class="main-title">  系统组成</span>-->
      <!--              <div class="shcool-dscribtion">-->
      <!--                <ul>-->
      <!--                  <li>· 华为OSN9800</li>-->
      <!--                  <li>· 40x100G ROADM平台</li>-->
      <!--                  <li>· 40x400G演进能力</li>-->
      <!--                </ul>-->
      <!--              </div>-->
      <!--            </div>-->

      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </div>-->

      <!--中国地图-->
      <!--    <div class="wrapper">-->
      <!--      <div class="map-container" ref="myEchart"></div>-->
      <!--    </div>-->

      <!--    企业资讯-->
      <div class="business" style="margin-top: 3rem">
        <span class="business-title" style="margin-top: 0.667rem;margin-bottom: 0.2rem">企业资讯</span>
        <div>
          <img @click="goNewsPage" style="height: 10.667rem;width: 16rem;cursor: pointer" class="business-pic" src="../../assets/kyy/temporaryPic/ff.png">
        </div>
      </div>

      <!--    核心业务-->
      <div class="business" style="height: 7.333rem;">
        <span class="business-title" style="margin-bottom: 0.2rem;margin-top: 0.467rem">全国高校算力网络创新论坛</span>
        <span class="business-content" style="width: 16rem;margin-bottom: 0.333rem">由江苏未来网络集团主办、中国高等教育学会教育信息化分会指导、开元云（北京）科技有限公司协办的全国高校算力网络创新论坛成功举办，该论坛聚焦高校数字化转型背景下，针对高校科研领域的新要求，分享算力网络最新的前沿技术，共话算力网络技术与服务企业产业布局，研讨高校科研需求与算力技术的供应。</span>
        <!--      图片-->
        <div style="display: flex;justify-content: center;align-items: space-between;padding-top: 0.2rem" class="ckl">
          <div style="width: 4.667rem;height: 4rem;">
            <img src="../../assets/kyy/temporaryPic/640.jpg" alt="" />
          </div>
          <div style="width: 4.667rem;height: 4rem;">
            <img src="../../assets/kyy/temporaryPic/640(1).jpg" alt="" />
          </div>
          <div style="width: 4.667rem;height: 4rem;">
            <img src="../../assets/kyy/temporaryPic/643.png" alt="" />
          </div>
        </div>
      </div>

      <!--    合作伙伴-->
      <div class="friends">
        <span class="business-title" style="margin-top: 0.667rem;margin-bottom: 0.2rem">合作伙伴</span>
        <div class="logo-item-s">
          <img src="../../assets/kyy/temporaryPic/logo1.jpg" style="width: 1.333rem;height: 0.867rem;" alt="">
          <img src="../../assets/kyy/temporaryPic/logo8.png" style="width: 1.333rem;height: 0.867rem;" alt="">
          <img src="../../assets/kyy/temporaryPic/logo5.png" style="width: 1.333rem;height: 0.867rem;" alt="">
          <img src="../../assets/kyy/temporaryPic/logo2.jpg" alt="">
          <img src="../../assets/kyy/temporaryPic/lofo3.jpg" alt="">
          <img src="../../assets/kyy/temporaryPic/logo4.jpg" alt="">
          <img src="../../assets/kyy/temporaryPic/logo6.png" alt="">
          <img src="../../assets/kyy/temporaryPic/logo7.jpg" alt="">

        </div>
      </div>

      <!--    欢迎使用-->
      <div class="like">
        <img src="../../assets/kyy/编组_10.png" alt="">
        <div class="pic-word">
          <span class="hiTitle">欢迎体验开元云</span>
          <span class="goLogin-style" @click="login">立即体验</span>
        </div>
      </div>

      <div class="footer-top-style">
        <div class="item-footer-top">
          <div>
            <img src="../../assets/kyy/temporaryPic/Icon-1.png" alt="">
          </div>
          <span class="resource">资源全覆盖</span>
        </div>

        <div class="item-footer-top">
          <div>
            <img src="../../assets/kyy/temporaryPic/Icon-2.png" alt="">
          </div>
          <span class="resource">体验极速</span>
        </div>
        <div class="item-footer-top">
          <div>
            <img src="../../assets/kyy/temporaryPic/Icon-3.png" alt="">
          </div>
          <span class="resource">用户满意</span>
        </div>
        <div class="item-footer-top">
          <div>
            <img src="../../assets/kyy/temporaryPic/Icon-4.png" alt="">
          </div>
          <span class="resource">省心计算</span>
        </div>
      </div>
      <!--    footer-->
      <div class="footer">
        <div class="left-box">
          <div class="logo-footer">
            <img :src="logoImg" alt="" v-if="logoImg">
            <img src="../../assets/kyy/LOGO.png" alt="" class="img" v-else>
          </div>
          <div class="content-main">
            <ul>
              <li>地址:{{address}}</li>
              <li>电话：400-6150805 &nbsp;&nbsp;&nbsp;&nbsp; <span style="margin-left: 0.267rem">010-65917875 </span>
              </li>
              <li>邮箱：Open-computing@kaiyuancloud.cn</li>
              <li>IPC备案号:{{ICP}} <span style="margin-left: 0.267rem">版权所有 @kaiyuanyun 2023</span></li>
              <li>
                <img src="../../image/login/policeInsignia/policeInsignia.png" alt="" style="width:0.227rem;height:0.227rem;margin-right: 0.027rem;">
                <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer" target="_blank" style="margin-right:0.4rem;">京公网安备11010502054007</a>
                <span>
                  <router-link tag="a" target="_blank" :to="{ name: 'homePageImage' }">经营许可证:京B2-20232313</router-link>
                </span>
              </li>
              <li>
                <!-- <a href="" rel="noreferrer" target="_blank"></a> -->
              </li>
            </ul>
          </div>
        </div>
        <div class="right-box">
          <div class="qr-box">
            <div class="qr-code">
              <img src="../../assets/kyy/客服wechat.png" style="padding: 0.08rem" alt="">
            </div>
            <span class="qr-content">微信客服</span>
          </div>
          <div class="qr-box" style="margin-left: 0.667rem">
            <div class="qr-code">
              <img src="../../assets/kyy/kyy公众号.jpg" alt="">
            </div>
            <span class="qr-content">扫描关注二维码</span>
          </div>
        </div>
        <div class="intrudceMessage">
          <span style="margin-left: 2em">开元云科技（北京）公司是一家注册于2020年的高科技企业，在上海、南京、深圳、济南设有分支机构。公司通过自主研发的开元算力应用服务平台，将算力资源和算力应用进行整合，利用算力调度和确定性
          </span>
          <span>网络技术，为科研、XR、数字孪生和AI等行业提供专业算力服务，形成“算力服务+算力网络+算力应用”的一体化解决方案。</span>
        </div>
      </div>
    </div>
  </template>

  <script type="text/javascript">
  window._MICHAT = window._MICHAT || function () { (_MICHAT.a = _MICHAT.a || []).push(arguments) };
  _MICHAT("cptid", "3d1ac49f26c5");
  _MICHAT("domain", "emdchk.xianshangkefu.net");
  (function (m, d, q, j, s) {
    j = d.createElement(q), s = d.getElementsByTagName(q)[0];
    j.async = true;
    j.charset = "UTF-8";
    j.src = ("https:" == document.location.protocol ? "https://" : "http://") + "emdchk.xianshangkefu.net/Web/JS/mivisit.js?_=t";
    s.parentNode.insertBefore(j, s);
  })(window, document, "script");
  </script>


  <script>
  import { getDocListAPI, } from "@/api/operationAndMaintenance/documentManagement";
  import { getLogoAPI } from "@/api/login";
  import echarts from "echarts";
  import china from 'echarts/map/json/china.json'
  import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
  export default {
    name: "indexNew",
    data() {
      return {
        myChart: null,
        logoImg: require("../../assets/logo/colorLogo.png"),
        logoText: "开元云(北京)科技有限公司",
        url: window.location.href,
        photos: [],
        photosUrl: [],
        ICP: "京ICP备2022001945号-1",
        address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)",
        selectData: [],
        fileUrl: null,
        fileName: null,
        title: null,
      }
    },
    created() {
      this.init()
    },
    mounted() {
      this.$nextTick(() => {
        // this.initEchartMap();
        // this.initEcahrtkk()
        // this.initEcahrtkk1()
        //上线时应解开
        // this.initMapOne()
        // this.initMapTwo()
      })
    },
    methods: {
      visibleChange(row) {
        if (row) {
          this.getDocList()
        }
      },
      handleCommand(row) {
        this.fileUrl = row.file_path,
          this.fileName = row.name
        const url = this.GetQueryString(this.url) + 'idfile?path=' + row.file_path;
        this.downloadFile(url);
      },
      downloadFile(url) {//下载文件
        let a = document.createElement("a");
        a.setAttribute("href", url);
        a.setAttribute("download", this.fileName);
        a.setAttribute("target", "_blank");
        let clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", true, true);
        a.dispatchEvent(clickEvent);
      },
      getDocList() {//获取文档列表
        getDocListAPI({ status: 1 }).then(res => {
          if (res.status) {
            this.selectData = res.data.map(item => {
              let xitem = {
                id: item.id,
                file_path: item.file_path,
                // name: item.file_path.slice(item.file_path.lastIndexOf("/") + 1),
                name: item.title
              }
              return xitem
            })
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
      },
      init() {
        let params = {
          url_link: this.GetQueryString(this.url)
        }
        getLogoAPI(params).then((res) => {
          if (res.status == true && res.data && res.data.length) {
            this.photosUrl = res.data[0];
            if (this.photosUrl.orgname != '业主机构') {
              this.logoImg = this.photosUrl.logo;
              this.logoText = this.photosUrl.orgname;
              this.ICP = this.photosUrl.license_number;
              this.address = this.photosUrl.address;
            }
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      },
      goProduct(path) {
        window.open(path)
      },
      goNewsPage() {
        window.open('http://tmpweb.opencomputing.cn/col.jsp?id=136')
      },
      login() {
        window.dispatchEvent(new Event('kboss-open-login-dialog'))
      },
      register() {
        this.$router.push('/registrationPage')
      },
      goOtherPage(value) {
        if (value === 'product') {
          window.open('http://tmpweb.opencomputing.cn/col.jsp?id=146')
        } else if (value === 'aboutUs') {
          window.open('http://tmpweb.opencomputing.cn/col.jsp?id=134')
        } else if (value === 'news') {
          window.open('http://tmpweb.opencomputing.cn/col.jsp?id=136')
        } else if (value === 'service') {
          window.open('http://tmpweb.opencomputing.cn/col.jsp?id=137')
        } else if (value === 'solve') {
          window.open('http://tmpweb.opencomputing.cn/col.jsp?id=104')
        }
      },

      dealWithData() {// 初始化地图
        let geoCoordMap = {
          北京: [116.46, 39.92, 100],
          上海: [121.48, 31.22, 200],
        };
        let data = [];
        for (let key in geoCoordMap) {
          data.push({ name: key, value: geoCoordMap[key] });
        }
        return data;
      },
      initMapOne() {
        this.myEchart = echarts.init(this.$refs.myEchart);
        let option = {
          tooltip: {
            show: false
          },
          geo: {
            map: "china",
            roam: false,// 一定要关闭拖拽
            zoom: 1.23,
            center: [105, 36], // 调整地图位置
            label: {
              normal: {
                show: false, //关闭省份名展示
                fontSize: "10",
                color: "rgba(0,0,0,0.7)"
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#0d0059",
                borderColor: "#389dff",
                borderWidth: 1, //设置外层边框
                shadowBlur: 5,
                shadowOffsetY: 8,
                shadowOffsetX: 0,
                shadowColor: "#ecf0f7"
              },
              emphasis: {
                areaColor: "#184cff",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          series: [
            {
              type: "map",
              map: "china",
              roam: false,
              zoom: 1.23,
              center: [105, 36],
              // geoIndex: 1,
              // aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: "#fff"
                  }
                }
              },
              itemStyle: {
                normal: {
                  areaColor: "#0d0059",
                  borderColor: "#389dff",
                  borderWidth: 0.5
                },
                emphasis: {
                  areaColor: "#17008d",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 5,
                  borderWidth: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        };
        this.myEchart.setOption(option);

      },
      initMapTwo() {
        this.myEchart = echarts.init(this.$refs.myEchart);
        let dataValue = this.dealWithData();
        // var data1 = dataValue.splice(0, 6);
        let citySchoolMap = [
          { '北京': ['北京大学', '清华大学', '北京航空航天大学'] },
          { '上海': ['同济大学', '上海交通大学'] },
          { '邢台': ['邢台学院', '邢台一中'] },
          { '泸州': ['泸州大学'] },
        ]
        let option = {
          series: [
            {
              type: "map",
              map: "china",
              roam: false,
              zoom: 1.23,
              center: [105, 36],
              // geoIndex: 1,
              // aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  areaColor: "#fbfdff",
                  borderColor: "#389dff",
                  borderWidth: 0.5
                },
                emphasis: {
                  areaColor: "#fbfdff",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 5,
                  borderWidth: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            },
            {
              name: "",
              type: "scatter",
              coordinateSystem: "geo",
              data: dataValue,
              // symbolSize: function(val) {
              //   return val[2] / 10;
              // },
              symbol: "circle",
              symbolSize: 10,
              hoverSymbolSize: 15,
              tooltip: {
                formatter(value) {
                  const cityName = value.data.name;
                  let schoolInfo = '';
                  citySchoolMap.forEach(obj => {
                    if (obj[cityName]) {
                      schoolInfo = obj[cityName].join("<br/>");
                    }
                  });
                  const resultDiv = '<div class="custom-tooltip">' +
                    cityName + '市' + "<br/>" +
                    '<span class="highlight">' + schoolInfo + '</span>' +
                    '</div>';
                  // return cityName +'市'+ "<br/>"+  '<span class="highlight">' + schoolInfo + '</span>';
                  return resultDiv
                },
                show: true,
                backgroundColor: '#f4f6f8',
                textStyle: {
                  color: "#333",
                  fontSize: 12
                },
                borderColor: '#333',
                padding: 7
              },
              encode: {
                value: 2
              },
              label: {
                formatter: "{b}",
                position: "right",
                show: true,  //展示城市名称
                fontWeight: 'bolder'
              },
              itemStyle: {
                color: "#1907f8"
              },
              emphasis: {
                label: {
                  show: false
                }
              }
            }
          ]
        };
        this.myEchart.setOption(option);
      },
      GetQueryString(name) {
        if (name.indexOf("#") != -1) {
          const params = name.split("#")[0];
          return params;
        }
      },

    }
  }
  </script>

  <style scoped lang="scss">
  .left-style {
    display: flex;
    justify-content: flex-start;
  }

  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 0.747rem;
  }

  ul {
    list-style: none;
  }

  //

  .logo {


    background-color: #32abfc;
    margin-left: 0.467rem;
    width: 0.6rem;
    height: 0.6rem;
    margin-top: -0.4rem;
    .img {
      width: 100%;
      border:0.013rem solid red;
      height: 100%;

    }
    img {
      padding: 0;
      margin: 0;
    }
  }

  .titleWord {
    font-weight: 550;
    mix-blend-mode: normal;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    font-family: "Microsoft YaHei", serif;
    font-size: 0.187rem;
    display: flex;
    justify-content: flex-start;

    li {
      cursor: pointer;
      margin-right: 0.2rem;
    }
  }

  .right-style {
    margin-top: -0.533rem;
    .download {
      padding-right: 0.133rem;
      color: #909090;
    }
  }

  .loginBtn-style {
    color: black;
    font-size: 0.187rem;
    mix-blend-mode: normal;
    border-radius: 0.32rem;
    background: linear-gradient(
        132.63deg,
        rgba(17, 93, 245, 1) 2.35%,
        rgba(0, 117, 252, 1) 94.2%
    );
    padding: 0.2rem;
  }

  .register-style {
    font-size: 0.187rem;
    mix-blend-mode: normal;
    color: rgba(144, 144, 144, 1);
    font-family: PingFang SC, serif;
    font-weight: 600;
    margin-right: 0.067rem;
    padding: 0.2rem;
  }

  //轮播图
  .banner {
    position: relative;
    //width: 1200px;
    width: 100%;
    height: 4.8rem;
    //border:1px solid red;
    margin: 0 auto;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 0.24rem;
    opacity: 0.75;
    line-height: 4rem;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .banner-item {
    img {
      width: 100%;
      height: 100%;
    }
  }

  .title-word-style {
    mix-blend-mode: normal;
    color: rgba(0, 0, 0, 1);
    font-family: PingFang SC, serif;
    font-weight: 600;
    font-size: 0.427rem;
  }

  .content-style {
    mix-blend-mode: normal;
    color: rgba(98, 98, 98, 1);
    font-family: PingFang SC, serif;
    font-weight: 600;
    font-size: 0.16rem;
  }

  .banner-all {
    z-index: 9;
    position: absolute;
    top: 25%;
    left: 10%;
    display: flex;
    flex-direction: column;
    width: 4rem;
  }

  //实施算网融合发展行动
  .action {
    position: relative;
    height: 11.573rem;
    //border: 1px solid red;
    //background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    img {
      width: 80%;
      height: 50%;
    }
  }

  .clearFloat {
    clear: both;
  }

  .top-right {
    position: absolute;
    right: 0;
    top: 0;
  }

  .top-left {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .action-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    margin: 0 auto;
    width: 80%;
    height: 100%;
  }

  .content-title-before {
    mix-blend-mode: normal;
    border: 0.04rem solid rgba(255, 255, 255, 1);
    text-align: center;
    color: rgba(0, 0, 0, 1);
    font-family: PingFang SC, serif;
    font-weight: 600;
    font-size: 0.4rem;
  }

  .content-title-last {
    mix-blend-mode: normal;
    border: 0.04rem solid rgba(255, 255, 255, 1);
    text-align: center;
    font-family: PingFang SC, serif;
    font-weight: 600;
    font-size: 0.4rem;
    color: rgba(17, 93, 245, 1);
  }

  .num {
    //margin-top: px;
    width: 35%;

    height: 6.667rem;
  }

  .pic-right {
    width: 40%;
    height: 100%;
    //background-color: skyblue;
    display: flex;
    flex-direction: column;

    img {
      margin: 0.2rem 0;
      margin-left: 2rem;
      width: 2.667rem;

      height: 2.667rem;
    }
  }

  .content-main {
    display: flex;
    justify-content: center;
    align-items: center;

    ul {
      li {
        margin-bottom: 0.2rem;
        cursor: default;
      }
    }
  }

  .content-item {
    margin-bottom: 0.2rem;
    width: 4.587rem;
    height: 1.253rem;
    mix-blend-mode: normal;
    border-radius: 0rem 0.107rem 0.107rem 0.107rem;
    border: 0.013rem solid rgba(239, 239, 239, 1);
    box-sizing: border-box;
    position: relative;
  }

  .little-item {
    width: 4.587rem;
    height: 1.253rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 0.267rem;
  }

  .h-word {
    mix-blend-mode: normal;
    color: rgba(0, 0, 0, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.213rem;
  }

  .c-word {
    mix-blend-mode: normal;
    color: rgba(138, 138, 138, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.16rem;
    margin-top: 0.067rem;
  }

  .num-icon {
    position: absolute;
    top: 0.04rem;
    left: -0.24rem;
    width: 30%;
    height: 1.067rem;
  }

  .icon-footer {
    width: 0.64rem;
    height: 0.64rem;
  }

  .content-footer-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0.733rem;

    img {
      width: 1.12rem;
      height: 0.64rem;
      margin: 0.2rem 0;
    }
  }

  .footer-title {
    mix-blend-mode: normal;
    color: rgba(0, 0, 0, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.28rem;
  }

  .footer-content {
    margin-top: 5px;
    mix-blend-mode: normal;
    text-align: center;
    color: rgba(138, 138, 138, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.187rem;
    width: 1.8rem;
  }

  //核心业务
  .business {
    width: 100%;
    height: 10.893rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .business-title {
    mix-blend-mode: normal;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.4rem;
  }

  .business-content {
    mix-blend-mode: normal;
    text-align: center;
    color: rgba(138, 138, 138, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.213rem;
  }

  .business-icon-footer {
  }

  .business-pic {
    width: 13.867rem;
    height: 4.8rem;
  }

  //高校网络
  .shcool {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .shcool-main {
    position: relative;
    width: 16.16rem;
    height: 8.213rem;

    //border:1px solid red;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .left-content {
    position: absolute;
    top: 0.667rem;
    left: 0.333rem;
    width: 6.667rem;
    height: 6.667rem;
  }

  .c-one {
    position: absolute;
    top: 0.667rem;
    left: 0;
    width: 2.04rem;
    height: 2.04rem;
    border-radius: 50%;
    background: rgba(255, 169, 0, 0.74);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .school-title {
    mix-blend-mode: normal;
    text-align: center;
    color: rgba(161, 67, 0, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.213rem;
  }

  .school-school {
    mix-blend-mode: normal;
    text-align: center;
    color: rgba(161, 67, 0, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.48rem;
  }

  .c-two {
    position: absolute;
    top: 0;
    left: 1.6rem;
    width: 1.56rem;
    height: 1.56rem;
    border-radius: 50%;
    background: rgba(0, 119, 255, 0.74);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .school-title-two {
    font-size: 0.213rem;
  }

  .c-thr {
    position: absolute;
    top: 1.24rem;
    left: 1.853rem;
    width: 1.173rem;
    height: 1.173rem;
    border-radius: 50%;
    background: rgba(0, 155, 24, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .top-school {
    position: relative;
  }

  .tip-word {
    mix-blend-mode: normal;
    color: rgba(65, 70, 79, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.24rem;
  }

  .shcool-dscribtion {
    mix-blend-mode: normal;
    color: rgba(0, 0, 0, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.187rem;
  }

  .main-content {
    position: absolute;
    top: 3.333rem;
  }

  .main-title {
    mix-blend-mode: normal;
    color: rgba(65, 70, 79, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.24rem;
  }

  //欢迎体验
  .like {
    position: relative;
    width: 100%;
    height: 3.2rem;

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

  .footer {
    width: 100%;
    height: 3.333rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .left-box {
    width: 50%;
    //border: 1px solid red;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .right-box {
    width: 50%;
    //border: 1px solid red;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content-main {
    mix-blend-mode: normal;
    color: rgba(0, 0, 0, 1);
    font-family: PingFang SC;
    font-size: 0.187rem;
  }

  .logo-footer {
    width: 2.667rem;
    height: 0.667rem;
    .img {
      width: 1.067rem;
      height: 1.067rem;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }

  .qr-code {
    img {
      width: 100%;
      height: 100%;
    }

    width: 1.853rem;
    height: 1.853rem;
    //border:1px solid red;
  }

  .qr-content {
    mix-blend-mode: normal;
    color: rgba(24, 24, 24, 1);
    font-family: PingFang SC, serif;
    font-weight: 600;
    font-size: 0.187rem;
  }

  .qr-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .logo {
    background-color: #32abfc;
    img {
      width: 100%;
      height: 100%;
    }
  }

  //ecahrt
  .leftCard {
    width: 100%;
    height: 100%;

    #chinaMap {
      width: 100%;
      height: 100vh;
    }
  }

  .wrapper {
    width: 100%;
    border: 0.013rem solid red;
    height: 6.667rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .map-container {
    width: 16rem;
    height: 6.667rem;
    border: 0.013rem solid red;
  }

  .highlight {
    font-size: 1.667rem;
  }

  .custom-tooltip {
    width: 6.667rem;
    height: 6.667rem;
  }

  .pic-word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hiTitle {
    font-size: 0.373rem;
    padding: 0.16rem;
    opacity: 0.8;
    mix-blend-mode: normal;

    color: #f35626;
    font-weight: 700;
    background: coral;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(17, 239, 222, 1),
        rgba(2, 117, 250, 1)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 6s infinite linear;
  }

  .goLogin-style {
    &:hover {
      background-color: #aad1fd;
      color: white;
    }
    font-size: 0.32rem;
    cursor: pointer;
    color: #32abfc;
    width: 2.667rem;
    height: 0.56rem;
    opacity: 0.8;
    mix-blend-mode: normal;
    border-radius: 0.04rem;
    border: 0.013rem solid rgba(54, 147, 251, 1);
    box-sizing: border-box;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .news-block {
    padding: 0.027rem;
    width: 4.667rem;
    height: 4.267rem;
    border: 0.013rem solid #4191e0;
    position: absolute;
    top: 3.733rem;
    right: 0;
  }

  .pic-news {
    width: 2.667rem;
    height: 2.667rem;
  }

  .title-news {
    mix-blend-mode: normal;
    color: rgba(1, 119, 248, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.28rem;
  }

  .news-content {
    mix-blend-mode: normal;
    text-align: justify;
    color: rgba(0, 0, 0, 1);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 0.187rem;
  }

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

    div {
      margin-right: 0.2rem;
    }
  }

  .footer-top-style {
    width: 16rem;
    height: 1.333rem;
    margin: 0 auto;
    margin-top: 0.133rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .item-footer-top {
    img {
      width: 0.427rem;
      height: 0.427rem;
    }

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .resource {
    mix-blend-mode: normal;
    color: rgba(0, 0, 0, 1);
    font-family: PingFang SC;
    font-size: 0.267rem;
    margin-left: 0.133rem;
  }

  .friends {
    width: 16rem;
    height: 2.667rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.2rem;
  }

  .logo-item-s {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    img {
      margin-right: 0.267rem;
      //border:1px solid red;
      width: 1.333rem;
    }

    width: 100%;
    height: 6rem;
  }

  .intrudceMessage {
    width: 16rem;
    height: 0.667rem;
    margin: 0 auto;
    margin-top: -0.333rem;
    font-size: 0.173rem;
    margin-bottom: 0.2rem;
  }
  ::v-deep .el-carousel__container{
    height: 4.8rem;
  }
  </style>
