<template>
  <!-- Copyright (c) 2022/6/12 Zhaozhenxing -->
  <div class="container">
    <div class="header">
      <div class="header_background">
        <website-header />
        <div class="header_container">
          <p>土星云分布式存储服务器，</p>
          <p style="margin-top: 10px">全国首家金属导冷存储服务器</p>
        </div>
      </div>
    </div>
    <div class="content_tabs">
      <van-tabs
        type="card"
        background="#7A7A7B"
        color="#2F60F1"
        title-inactive-color="#FFFFFF"
      >
        <van-tab title="企业级分布式存储一体机">
          <div class="tabs_content">
            <div class="service_container">
              <img src="../../assets/mache_five.jpg" />
            </div>
            <p class="tabs_content_title">产品优势</p>
            <div class="advanContents">
              <div class="advanContent">
                <div class="advanLeft">
                  <img src="../../assets/advan_two.png" />
                </div>
                <div class="advanRight">
                  <div style="display: table-cell; vertical-align: middle">
                    <p>超低功耗</p>
                    <div class="advanTxt">
                      1PB功耗小于1KW，配备睡眠模式，待机功耗小于0.3KW
                    </div>
                  </div>
                </div>
              </div>
              <div class="advanContent">
                <div class="advanLeft">
                  <img src="../../assets/advan_three.png" />
                </div>
                <div class="advanRight">
                  <div style="display: table-cell; vertical-align: middle">
                    <p>超低PUE值</p>
                    <div class="advanTxt">
                      首家金属导冷存储服务器，无需专用空调机房降温，PUE小于1.04
                    </div>
                  </div>
                </div>
              </div>
              <div class="advanContent">
                <div class="advanLeft">
                  <img src="../../assets/advan_one.png" />
                </div>
                <div class="advanRight">
                  <div style="display: table-cell; vertical-align: middle">
                    <p>高稳定</p>
                    <div class="advanTxt">
                      百亿小文件读写性能波动小于10%，数据存储/复制速度提升10倍
                    </div>
                  </div>
                </div>
              </div>
              <div class="advanContent">
                <div class="advanLeft">
                  <img src="../../assets/advan_four.png" />
                </div>
                <div class="advanRight">
                  <div style="display: table-cell; vertical-align: middle">
                    <p>国产自主可控</p>
                    <div class="advanTxt">
                      采用全国产基础硬件，全产业链自主可控，全体系自主研发整条产品线不受限
                    </div>
                  </div>
                </div>
              </div>
              <div class="advanContent">
                <div class="advanLeft">
                  <img src="../../assets/advan_five.png" id="changeAdvan" />
                </div>
                <div class="advanRight">
                  <div style="display: table-cell; vertical-align: middle">
                    <p>即插即用</p>
                    <div class="advanTxt">
                      外壳和内部结构加固，环境适应性强，1PB存储30分钟内配置完成，即插即用，无需专业机房和电力改造
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="土星云存储">
          <div class="tabs_content">
            <p class="tabs_content_title">产品优势</p>
            <p class="tabs_content_des">金属导冷，超低功耗，运维超简单</p>
            <div class="advanContents">
              <div class="advanContent">
                <div class="advanLeft">
                  <img src="../../assets/advantage_three.png" />
                </div>
                <div class="advanRight">
                  <div style="display: table-cell; vertical-align: middle">
                    <p>传输速度快</p>
                    <div class="advanTxt">
                      3GB/S，数据上传、下载速度快，土星云存储基于IPFS技术研发，支持多点下载、全局访问，能大幅提升数据传输速度
                    </div>
                  </div>
                </div>
              </div>
              <div class="advanContent">
                <div class="advanLeft">
                  <img src="../../assets/advantage_one.png" />
                </div>
                <div class="advanRight">
                  <div style="display: table-cell; vertical-align: middle">
                    <p>可靠性高</p>
                    <div class="advanTxt">
                      提供12个9的数据持久性，同时土星云存储将数据加密切片存储在多台独立设备上，天然防DDOS、CC攻击
                    </div>
                  </div>
                </div>
              </div>
              <div class="advanContent">
                <div class="advanLeft">
                  <img src="../../assets/advantage_two.png" />
                </div>
                <div class="advanRight">
                  <div style="display: table-cell; vertical-align: middle">
                    <p>并发量高</p>
                    <div class="advanTxt">
                      千万级TPS，基于去中心化架构，千万级节点可以同时对外数据传输，无需担心网络阻塞
                    </div>
                  </div>
                </div>
              </div>
              <div class="advanContent">
                <div class="advanLeft">
                  <img src="../../assets/advantage_four.png" />
                </div>
                <div class="advanRight">
                  <div style="display: table-cell; vertical-align: middle">
                    <p>接入便捷</p>
                    <div class="advanTxt">
                      支持多协议访问，土星云提供了多种API，兼容AWS
                      S3接口，支持更多在服务不修改代码前提下接入，数据可无缝迁移，免除高昂的迁移成本和接入成本
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="applicableScens">
      <p class="tabs_content_title">适用场景</p>
      <div class="applicableScen">
        <div class="applicable_one">
          <div class="applicable_oneContentdiv">
            <img src="../../assets/appli_three_active.png" />
            <p>数据中心建设</p>
            <div class="applicableScenTxt">
              运营商、互联网、第三方海量数据存储、绿色低碳需求
            </div>
          </div>
          <div class="applicable_oneContentdiv">
            <img src="../../assets/appli_one_active.png" />
            <p>公检司法</p>
            <div class="applicableScenTxt">
              公安、交警、法院、检察院等案件资料，庭审视频多维度业务数据
            </div>
          </div>
          <div class="applicable_oneContentdiv">
            <img src="../../assets/appli_two_active.png" />
            <p>政府机关</p>
            <div class="applicableScenTxt">
              各委办局政府信息、大数据态势留存历史数据存储
            </div>
          </div>
        </div>
        <div class="applicable_one">
          <div class="applicable_oneContentdiv">
            <img src="../../assets/appli_five_active.png" />
            <p>遥感高分</p>
            <div class="applicableScenTxt">
              国土、海洋、气象等部门、测绘遥感影像数据
            </div>
          </div>
          <div class="applicable_oneContentdiv">
            <img src="../../assets/appli_four_active.png" />
            <p>生物医疗</p>
            <div class="applicableScenTxt">
              医院、制药企业、医疗影像、电子病历等重要个人信息数据
            </div>
          </div>
          <div class="applicable_oneContentdiv">
            <img src="../../assets/appli_six_active.png" />
            <p>广电媒资</p>
            <div class="applicableScenTxt">
              广电、影视、广告企业、节目编辑、影视素材等多结构化数据
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="customerCase">
      <p class="tabs_content_title">客户实践</p>
      <img src="../../assets/companies.png" style="width: 100%; height: 100%" />
    </div>
    <div class="footer">
      <div class="footbox">
        <div class="footer_container">
          <div class="footer_one">
            <p class="footer_title">产品与服务</p>
            <p class="footer_link" @click="toHomePage">
              企业级分布式存储一体机
            </p>
            <p class="footer_link" @click="toPublicScs">公有云数据存储服务</p>
          </div>
          <div class="footer_two">
            <div class="aboutUs">
              <p class="footer_title">关于我们</p>
              <p class="footer_link" @click="toAboutUs">关于我们</p>

              <p class="footer_link" @click="toCooperate">生态合作</p>
            </div>
          </div>
          <div class="footer_three">
            <p class="footer_title">联系我们</p>
            <p class="footer_link">137-1680-3033</p>
            <div class="clip_img">
              <img
                src="../../assets/clip_saturn.png"
                style="width: 100%; position: absolute"
              />
            </div>
          </div>
          <div class="copyRight">
            © 2021 北京国科环宇科技股份有限公司.京ICP备05035332号-11
          </div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: 0,
      option1: [
        { text: '首页', value: 0 },
        { text: '私有云', value: 1 },
        { text: '公有云', value: 2 },
        { text: '生态合作', value: 3 },
        { text: '控制台', value: 4 },
        { text: '关于我们', value: 5 },
      ],
      images: [require('@/assets/topbar.png'), require('@/assets/topbar.png')],
    }
  },
  methods: {
    // 跳转到主页
    toHomePage() {
      this.$router.push({ path: '/homePage' })
    },
    toPublicScs() {
      this.$router.push({ path: '/publicScs' })
    },
    toAboutUs() {
      this.$router.push({ path: '/aboutUs' })
    },
    toCooperate() {
      this.$router.push({ path: '/cooperate' })
    },
    toScs() {
      window.open(
        'https://saturncloud.com.cn/#/scs?id=1.1.1&titleShow=false',
        '_self'
      )
    },
    toBrowser() {
      window.open(
        'https://saturncloud.com.cn/#/scs?id=1.5.1&titleShow=false',
        '_self'
      )
    },
    toquickstart() {
      window.open(
        'https://saturncloud.com.cn/#/scs?id=1.3.1&titleShow=false',
        '_self'
      )
    },
    toAPI() {
      window.open(
        'https://saturncloud.com.cn/#/scs?id=1.6.1&titleShow=false',
        '_self'
      )
    },
    toSDK() {
      window.open(
        'https://saturncloud.com.cn/#/scs?id=1.7.1&titleShow=false',
        '_self'
      )
    },
    toWhere(e) {
      console.log(e)
      let url = ''
      if (this.$route.query.friendlink) {
        url =
          'https://xxyy.co/#/register?' +
          'friendlink' +
          '=' +
          this.$route.query.friendlink
      } else {
        url = 'https://xxyy.co/#/register'
      }
      switch (this.value1) {
        case 0:
          this.$router.push({ path: '/homePage' })
          break
        case 1:
          this.$router.push({ path: '/homePage' })
          break
        case 2:
          this.$router.push({ path: '/publicScs' })
          break
        case 3:
          this.$router.push({ path: '/cooperate' })
          break
        case 4:
          window.open(url, '_self')
          break
        case 5:
          this.$router.push({ path: '/aboutUs' })
          break
      }
    },
  },
}
</script>
<style>
.van-dropdown-menu__bar {
  opacity: 0;
}
.container {
  overflow: hidden;
}
.tabar_logo {
  width: 100px;
  height: 100px;
}
.tabar_title {
  font-size: 50px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 100px;
  color: #000000;
  opacity: 1;
  padding-left: 10px;
}
.navBar {
  background: #ffffff;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  position: absolute;
  right: 10%;
  top: 10%;
  cursor: pointer;
  width: 72px;
  height: 56px;
  line-height: 100px;
}
.navBarLine {
  position: absolute;
  width: 42px;
  height: 5px;
  background: #000000;
  box-sizing: border-box;
  left: 15px;
}
.navBarLine:first-child {
  top: 10px;
}
.navBarLine:nth-child(2) {
  top: 25px;
}
.navBarLine:nth-child(3) {
  top: 40px;
}
.van-tabs__nav--card {
  margin: 0;
}
.van-tabs__wrap,
.van-tabs__wrap scroll-view,
.van-tabs__nav,
.van-tab {
  height: 84px !important;
  font-size: 24px !important;
  line-height: 84px !important;
}
</style>
<style scoped>
.header_background {
  width: 100%;
  height: 511px;
  padding: 0 0 0 5%;
  background-image: url('../../assets/topbar.png');
  display: table;
}
.header_topBar {
  width: 100%;
  position: sticky;
  top: 0px;
  z-index: 99;
}
.header_container {
  display: table-row;
  vertical-align: middle;
  font-size: 34px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #3b426b;
}
.header_btn {
  margin-top: 40px;
  width: 160px;
  height: 46px;
  background: #2f60f1;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  line-height: 46px;
  text-align: center;
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.tabs_content {
  width: 100%;
  height: auto;
  background: url('../../assets/appliBackground.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 57px;
}
.advanContents {
  width: 100%;
  height: auto;
  padding: 48px 5% 0 5%;
  box-sizing: border-box;
}
.advanContent {
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #e0e0e0;
  display: flex;
  box-sizing: border-box;
  padding: 28px 35px 30px 0px;
}
.advanContent:not(:last-child) {
  margin-bottom: 24px;
}
.advanLeft {
  width: 40%;
}
.advanLeft img {
  width: 160px;
  height: 160px;
  position: relative;
  top: 50%;
  /* left: 50%; */
  transform: translate(10%, -50%);
}
#changeAdvan {
  width: 120px;
  height: 120px;
  position: relative;
  top: 50%;
  /* left: 50%; */
  transform: translate(32%, -50%);
}
.advanRight {
  width: 60%;
  display: table;
}
.advanRight p {
  font-size: 24px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #3b426b;
  line-height: 44px;
}
.advanTxt {
  width: 100%;
  height: auto;
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 32px;
}
.tabs_content_title {
  text-align: center;
  font-size: 28px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #3b426b;
}
.tabs_content_des {
  margin-top: 8px;
  text-align: center;
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
}
.applicableScens {
  width: 100%;
  height: auto;
  padding-top: 57px;
  padding-bottom: 57px;
  background: url('../../assets/appliBackground.png') no-repeat;
  background-size: 100% 100%;
}
.applicableScen {
  width: 100%;
  height: auto;
  padding: 0.64rem 5% 0 5%;
  box-sizing: border-box;
}
.applicable_one {
  display: flex;
  width: 100%;
  height: auto;
}
.applicable_one:not(:first-child) {
  margin-top: 65px;
}
.applicable_oneContentdiv {
  width: 32%;
  margin-right: 2%;
  text-align: center;
}
.applicable_oneContentdiv img {
  width: 100px;
  height: 100px;
  vertical-align: middle;
}
.applicable_oneContentdiv p {
  font-size: 24px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #3b426b;
  margin: 20px 0px;
}
.applicableScenTxt {
  width: 100%;
  height: auto;
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 32px;
}
.customerCase {
  width: 100%;
  height: auto;
  padding-top: 0.76rem;
}
.footer {
  background: #f7f8fb;
  width: 100%;
  height: auto;
}
.footbox {
  padding: 0.64rem 5% 0px 5%;
}
.footer_title {
  font-size: 28px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #3b426b;
  line-height: 40px;
}
.footer_link {
  font-size: 24px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 40px;
  cursor: pointer;
}
.footer_one {
  width: 50%;
  padding: 0px 0px 33px 0px;
  border-bottom: 1px solid #969696;
}
.footer_two {
  width: 70%;
  padding: 33px 0px 33px 0px;
  border-bottom: 1px solid #969696;
  display: flex;
}
.aboutUs {
  width: 50%;
}
.techDesc {
  width: 50%;
}
.footer_link_right {
  margin-left: 28px;
}
.footer_three {
  width: 100%;
  padding: 33px 0px 33px 0px;
  border-bottom: 1px solid #969696;
}
.clip_img {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.copyRight {
  width: 100%;
  padding: 40px 0px 40px 0px;
  text-align: center;
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 34px;
}
.service_container img {
  width: 100%;
}
</style>
