<template>
  <div class="container">
    <div class="header">
      <div class="header_background">
        <website-header />
        <div class="header_container">
          <div style="padding-right: 10%">
            <p>土星云生态合作伙伴</p>
            <p class="cooperateDes" style="margin-top: 10px">
              土星云以软件定义存储技术为核心竞争力的高新技术企业，在分布式存储等关键技术上拥有自主知识产权，针对各行业业务特性，打造个性化行业解决方案，提供一站式的产品与服务。
            </p>
            <!-- <div class="header_btn">
                        了解详情
                    </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="applicableScens">
      <p class="tabs_content_title">为什么加入土星云合作伙伴</p>
      <div class="advanContents">
        <div class="advanContent">
          <div class="advanLeft">
            <img src="../../assets/joinus_one.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/joinus_two.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/joinus_three.png" />
          </div>
          <div class="advanRight">
            <div style="display: table-cell; vertical-align: middle">
              <p>领先的云存储技术</p>
              <div class="advanTxt">
                土星云存储软件基于IPFS分布式架构开发，服务器及其他硬件均基于军工技术研发，产品拥有完整的自主知识产权
              </div>
            </div>
          </div>
        </div>
        <div class="advanContent">
          <div class="advanLeft">
            <img src="../../assets/joinus_four.png" />
          </div>
          <div class="advanRight">
            <div style="display: table-cell; vertical-align: middle">
              <p>开放的土星云生态</p>
              <div class="advanTxt">
                土星云开放的心态和资源，合作伙伴互联共赢，共建分布式存储新生态
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cooperate_step">
        <p class="tabs_content_title">合作伙伴申请</p>
        <div class="setps">
          <el-steps direction="vertical" style="max-height: 500px" :space="100">
            <el-step
              title="Step 1 "
              description="在线申请：填写下方申请表单，申请土星云合作伙伴。"
            ></el-step>
            <el-step
              title="Step 2 "
              description="认证适配：通过认证审核，适配企业合作模式。"
            ></el-step>
            <el-step
              title="Step 3 "
              description="业务沟通：根据合作模式进行相应的土星云技术培训与支持。"
            ></el-step>
            <el-step
              title="Step 4 "
              description="展开合作：达成战略合作，形成生态共赢。"
            ></el-step>
          </el-steps>
        </div>
        <!-- <div class="onlineApply">
                    在线申请
                </div> -->
      </div>
    </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: 3,
      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() {
      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('https://xxyy.co/#/login', '_self')
          break
        case 5:
          this.$router.push({ path: '/aboutUs' })
          break
      }
    },
  },
}
</script>
<style>
.el-step__head {
  visibility: hidden;
}
.el-step__title {
  font-size: 26px !important;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN !important;
  font-weight: 400 !important;
  color: #2f60f1 !important;
  line-height: 34px !important;
}
.el-step__description {
  font-size: 20px !important;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN !important;
  font-weight: 400 !important;
  color: #374567 !important;
  line-height: 34px !important;
}
.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/cooperate_topbar.png');
  background-size: 100% 100%;
  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: 50%;
}
.advanLeft img {
  width: 80%;
  height: 170px;
  position: relative;
  top: 50%;
  /* left: 50%; */
  transform: translate(10%, -50%);
}
.advanRight {
  width: 50%;
  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;
}
.cooperate_step {
  width: 100%;
  height: auto;
  padding: 44px 0% 70px 0%;
}
.setps {
  overflow-y: auto;
  padding: 50px 5% 50px 5%;
}
.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;
}
.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%;
}
.cooperateDes {
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #3b426b;
  line-height: 42px;
}
.onlineApply {
  width: 20%;
  margin: 0 auto;
  text-align: center;
  height: 60px;
  background: #2f60f1;
  border-radius: 4px 4px 4px 4px;
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 60px;
}
</style>
