<template>
  <div class="pageHome">
    <el-row class="logo" :gutter="20">
      <el-col class="logoLeft" :span="12">
        <img :src="logoImg" alt="" />
        <span class="logoText">{{ logoText }}</span>
      </el-col>
      <el-col class="logoRight" :span="12">
        <ul class="liList">
          <li v-for="(item, index) in menuList" :key="index" :class="{ active: isActive === index }" @click="menuChange(index)">
            {{ item.name }}
          </li>
          <li>
            <span @click="register" style="color: #fa6e00">注册</span>/
            <span @click="login">登录</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <!-- 中间图片 -->
    <el-row class="banner">
      <el-col :span="24">
        <div class="image">
          <img src="../../assets/logo/banner.jpg" />
        </div>
      </el-col>
    </el-row>

    <el-row class="content">
      <div class="contentCenter">
        <el-row type="flex" align="middle" class="nav">
          <img src="../../assets/logo/icontront1.png" alt="" />
          <span class="currentPosition">当前位置:</span>
          <span class="home">首页</span>
          <span class="currentMenu">/{{ currentMenu }}</span>
        </el-row>
        <el-row v-if="isActive == 0" class="zixunshoufei">
          <el-row class="title">
            <el-col :span="10" class="titleCol">
              <img src="../../assets/logo/icontfont2.png" alt="" />
              <span class="titleText">产品</span>
            </el-col>
          </el-row>
          <el-row class="con">
            <ul class="zixunUl">
              <li class="zixunLi" v-for="(item, index) in zixunList" :key="index">
                <el-row>
                  <el-col :span="12" class="left">
                    <span>{{ item.title }}</span>
                    <!-- <span>观看次数:{{ item.viewCount }}</span> -->
                  </el-col>
                  <el-col :span="12" class="right">
                    <span class="btn" @click="pay">查看</span>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </el-row>
        </el-row>
        <el-row v-if="isActive == 1" class="about">
          <p>
            开元云(北京)科技有限公司,成立于2020年5月,在南京设有研发中心。创始团队核心成员来自一流的云计算公司及电信运营商,拥有云计算、超算、智算和网络运营专业经验。
          </p>
          <p>
            公司致力于打造新一代算力云应用服务新模式，通过自主研发的开元算力云应用服务平台，面向超算、智算提供算力服务，形成“
            算力云+ 算力网络+ 算力应用”的一体化解决方案。
          </p>
          <p>
            公司聚焦算力服务，行业覆盖人工智能、芯片仿真、生物制药、工业仿真、材料研发、精尖制造、海洋勘探、气象监测等高科技领域。
          </p>
          <p>
            公司拥有全国范围内的所有互联网增值服务牌照,能充分发挥公司网络结构优势,以企业互联网提供商为目标,致力于解决企业数字化转型面对的混合IT架构搭建、应用部署、多云管理、成本控制等问题,凭借云网生态创新产品,可以最大化的满足企业客户-云、数据中心-云、数据中心-数据中心的互联需求，能帮助企业快速构建高质量私有网络，实现降本增效，全力与各企业互惠共赢，携手未来！
          </p>
        </el-row>
        <el-row v-if="isActive == 2" class="helpCenter">
          <el-row class="title">
            <el-col :span="10" class="titleCol">
              <img src="../../assets/logo/helpCenter.png" alt="" />
            </el-col>
          </el-row>
          <el-row class="mapBox">
            <el-col :span="12" class="map">
              <span>网站地图/Site map</span>
            </el-col>
            <el-col :span="12" class="map">
              <img src="../../assets/logo/myPostion.png" alt="" />
            </el-col>
          </el-row>
        </el-row>
      </div>
    </el-row>
    <!-- 底部 -->
    <el-row class="footer" style="height: 240px; background-color: #94d1d7; color: white">
      <el-col :span="24" style="line-height: 60px; font-size: 26px">
        联系我们
      </el-col>
      <el-col :span="24" style="line-height: 32px; font-size: 18px">
        公司名称:{{logoText}}
      </el-col>
      <el-col :span="24" style="line-height: 32px; font-size: 18px">
       公司地址: {{address}}
      </el-col>
      <el-col :span="24" style="line-height: 32px; font-size: 18px">
        <a href="http://beian.miit.gov.cn/" target="_blank" title="点击查询备案号">ICP备案号:{{ICP}}</a>
        <span>&nbsp;</span>
        <router-link  target="_blank" :to="{ name: 'homePageImage' }">经营性网站备案信息</router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getLogoAPI } from "@/api/login";
export default {
  data() {
    return {
      logoImg: require("../../assets/logo/colorLogo.png"),
      logoText: "开元云(北京)科技有限公司",
      optionsViewer: {
        zIndex: 99999,
        inline: true,
        button: false,
        navbar: true,
        title: false,
        toolbar: true,
        tooltip: true,
        movable: true,
        zoomable: true,
        rotatable: true,
        scalable: true,
        transition: true,
        fullscreen: false,
        keyboard: true,
        url: "data-source",
      },
      pics: ["@/src/image/homePage/kyy.jpg"],
      isActive: 0,
      menuList: [
        {
          name: "产品",
        },
        {
          name: "关于我们",
        },
        {
          name: "帮助中心",
        },
      ],
      currentMenu: "",
      zixunList: [
        {
          title: "云企业网_跨境(预付费)",
          viewCount: 7215,
        },
        {
          title: "智能语音交互4.0",
          viewCount: 7639,
        },
        {
          title: "QuickBI",
          viewCount: 2697,
        },
        {
          title: "网络点对点专线",
          viewCount: 1582,
        },
        {
          title: "超算底价产品测试",
          viewCount: 9162,
        },
        {
          title: "标准型S6 2核",
          viewCount: 1587,
        },
        {
          title: "标准型S6 16核",
          viewCount: 8125,
        },
        {
          title: "计算型C6 4核",
          viewCount: 8425,
        },
        {
          title: "内存型M6 2核",
          viewCount: 5226,
        },
        {
          title: "高IO型IT5 16核",
          viewCount: 5984,
        },
        {
          title: "GPU计算型GT4 16核",
          viewCount: 2613,
        },
      ],
      url: window.location.href,
      ICP:"京ICP备2022001945号-1",
      address:"农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)",
      photos: [],
      photosUrl: [],
    };
  },

  created() {
    this.init();
  },
  mounted() { },
  methods: {
    init() {
      getLogoAPI({ url_link: this.GetQueryString(this.url) }).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",
          });
        }
      });
    },
    open() {
      window.open("http://beian.miit.gov.cn/", "miit");
    },
    pay() {
      // this.$router.push('/payPage')
      this.$router.push({ name: "Login" });
    },
    menuChange(index) {
      this.isActive = index;
    },
    register() {
      this.$router.push({ name: "registrationPage" });
    },
    login() {
      this.$router.push({ name: "Login" });
    },

    GetQueryString(name) {
      if (this.url.indexOf("#") != -1) {
        const params = name.split("#")[0];
        return params;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pageHome {
  background-color: #f9f5f5;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;

  .logo {
    padding-left:0.1875rem;
    padding-right: 0.1875rem;
    .logoLeft {
      display: flex;
      flex-direction: row;
      padding-top: 0.25rem;
      img {
        width: 0.625rem;
        height: 0.4375rem;
        margin-right: 20px;
      }
      .logoText {
        font-size: 32px;
      }
    }
    .logoRight {
      .liList {
        li {
          float: left;
          list-style: none;
          border: 1px solid;
          //padding: 5px 20px 5px 20px;
          cursor: pointer;
        }
      }
    }
    .active {
      background-color: #94d1d7;
    }
  }
  .banner {
    margin-bottom: 15px;
    .image {
      padding-top: 20px;
      width: 100%;
      // overflow: hidden;
      display: block;
      margin: 0 auto;
      img {
        width: 100%;
      }
    }
  }
  .content {
    width: 100%;
    display: flex;
    justify-content: center;

    .contentCenter {
      width: 60%;
      .nav {
        border-bottom: 1px solid #ccc;
        .currentPosition {
        }
        .home {
          color: #999;
        }
      }

      .zixunshoufei {
        .title {
          margin: 10px 0px;
          .titleCol {
            height: 40px;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            .titleText {
              font-size: 16px;
              margin-left: 10px;
            }
          }
        }
        .con {
          .zixunUl {
            margin-top: 0;
            .zixunLi {
              list-style: none;
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              .left {
                display: flex;
                justify-content: space-between;
              }
              .right {
                display: flex;
                justify-content: flex-end;
                .btn {
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
      .about {
        height: 280px;
        margin-top: 20px;
      }
      .helpCenter {
        .title {
          margin: 10px 0px;
          .titleCol {
            height: 40px;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
          }
        }
        .mapBox {
          .map {
            // width: 100%;
            height: 430px;
          }
        }
      }
    }
  }
  .footer {
    padding-left: 20%;
    padding-right: 20%;
  }
}
</style>
