<template>
  <div class="container">
    <div class="header">
      <div class="header_background">
        <website-header />
        <div class="header_container">
          <div style="padding-right: 10%">
            <h1>用创想与技术</h1>
            <h1>推动中国云存储市场发展</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="productAdvan">
      <p class="tabs_content_title">关于我们</p>
      <div class="productMessage">
        <p class="productMessage_title">公司简介</p>
        <p class="productMessage_txt">
          北京国科环宇科技股份有限公司成立于2004年，隶属于中科院，是一家自主可
          控的关键电子系统解决方案提供商。参与了载人航天工程、北斗卫星导航系统、高分辨率对地观测系统等国家重大专项。
          目前在北京、西安 、天津、上 海
          、成都、深圳、长沙等7个地区设立子公司和研发中心
        </p>
        <div class="map_info_serve">
          <p class="map_info_title">客户服务</p>
          <p class="map_info_txt">提供各类客户业务支持，包括产品咨询、</p>
          <p class="map_info_txt">技术支持建议反馈、以及购买帮助等</p>
          <p class="map_info_txt">电话：400-6405-800</p>
          <p class="map_info_txt">邮箱：ucasscs@ucas.com.cn</p>
        </div>
        <div class="map_info_serve">
          <p class="map_info_title">商务合作</p>
          <p class="map_info_txt">合作伙伴战略合作、数据存储解决方案合作、</p>
          <p class="map_info_txt">
            媒体合作、会议合作、渠道分销代理合作等合作洽谈
          </p>
          <p class="map_info_txt">电话：137-1680-3033</p>
          <p class="map_info_txt">邮箱：yongchao.fan@ucas.com.cn</p>
        </div>
      </div>
      <div class="map_img">
        <img src="../../assets/aboutus_map.png" />
      </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 {
      // 图片父容器高度
      bannerHeight: 1300,
      // 浏览器宽度
      screenWidth: 0,
      imgList: [
        {
          title: '物联网数据云存储',
          url: require('../../assets/carousel_four.jpg'),
          content:
            '随着物联网监控视频的普及，监控产生的数据需大量上传至云端存储，现有的视频云存储面临上传慢、访问慢、流量贵等问题。土星云基于IPFS架构，数据通过千万级节点同时传输分布式存储在不同终端，上传、下载、访问速度快，同时仅收取数据存储费用，是目前市面上性价比最优的物联网视频云存储服务',
        },
        {
          title: 'SaaS应用数据云存储',
          url: require('../../assets/carousel_one.jpg'),
          content:
            '地图、打车、外卖、租房、交友等Saas应用有大量底层数据和实时交互数据，土星云存储根据SaaS应用数据云存储解决方案，数据访问毫秒级延时，同时完美兼容第三方平台云应用',
        },
        {
          title: '教育行业数据云存储',
          url: require('../../assets/carousel_two.jpg'),
          content:
            '远程教育的普及，每天产生大量直播和录屏的音频、互动、视频需要云端存储，土星云存储根据远程教育访问量大，回放多的特点，提供远程视频数据云存储解决方案，在低延迟的基础上实现数据的高并发，同时仅收取数据存储费用，数据访问、调用等永久免费',
        },
        {
          title: '医疗数据云存储',
          url: require('../../assets/carousel_three.jpg'),
          content:
            '随着医联体和医共体近几年快速发展，云影像、远程问诊、医生远程教育等产生大量图片、影音，图片等数据，土星云存储根据医疗行业数据安全性高，存储周期长、数据后期访问频次低的特点，提供医疗行业数据云存储解决方案，在医疗数据安全和存储成本方面做到极致',
        },
        {
          title: 'VR数据云存储',
          url: require('../../assets/carousel_five.jpg'),
          content:
            'VR已经深入到教育、游戏、工业、影音等多个方面，同时VR也产生大量实时数据需要云端存储。土星云存储根据VR行业实时数据量大、并发访问量高的数据特点，提供VR数据云存储解决方案，可实现VR数据快速上传、访问、调用、交互。',
        },
        {
          title: '影视频数据云存储',
          url: require('../../assets/carousel_six.jpg'),
          content:
            '视频特效公司、视频后期制作公司、直播平台等大量的影视频数据云存储需求，土星云存储根据影视频公司和直播平台的数据存储特点，提供视频数据云存储解决方案，数据上传、下载可达宽带理论值，超大容量数据也能轻松上云',
        },
        {
          title: '其它',
          url: require('../../assets/carousel_seven.jpg'),
          content:
            '在工业互联网、车联网、自动驾驶、三维仿真等领域，土星云存储均有完备的数据云存储解决方案，土星云存储无存储容量上线，可存储任意数量和形式的数据',
        },
      ],
      activeName: 'imgandvideo',
      value1: 5,
      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: {
    setSize() {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = (600 / 1920) * this.screenWidth
    },
    // 跳转到主页
    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
      }
    },
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth
    this.setSize()
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.setSize()
    }
  },
}
</script>
<style>
.el-tabs__header.is-top {
  position: relative;
  margin: 0 0 0px;
  height: 56px;
  line-height: 56px;
}
.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/aboutus_tabbar.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;
  text-align: center;
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 42px;
}
.header_container p {
  margin-top: 45px;
}
.header_container h1 {
  font-size: 34px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #3b426b;
  line-height: 42px;
}
.header_container h1:last-child {
  margin-top: 20px;
}
.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;
    } */
.productAdvan {
  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%);
}
.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;
}
.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%;
}
.service {
  width: 100%;
  height: auto;
  padding: 48px 5% 48px 5%;
  box-sizing: border-box;
}
.service_title {
  font-size: 28px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #3b426b;
  text-align: center;
}
.service_txt {
  font-size: 22px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #3b426b;
  line-height: 44px;
  text-align: center;
}
.service_tabs {
  margin-top: 30px;
}
.service_img {
  margin-top: 50px;
  display: flex;
  display: -webkit-flex; /* Safari */
  -webkit-justify-content: space-around; /* Safari 6.1+ */
  justify-content: space-around;
}
/deep/ .el-tabs__content {
  margin-top: 50px;
}
/deep/ .el-tabs__item {
  margin-top: 50px;
  margin-bottom: 30px;
}
.elTabs {
  margin-top: -50px;
}
.service_card {
  margin-top: 44px;
}
.service_card_title {
  font-size: 24px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #3b426b;
  line-height: 44px;
}
.service_card_txt {
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 32px;
}
.carousel {
  margin-top: 80px;
}
.carouselContent {
  margin-top: 63px;
}
.carouselP {
  z-index: 99;
  position: absolute;
  top: 80%;
  left: 10%;
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 32px;
}
.priceCard {
  margin-top: 140px;
  padding: 0px 5% 54px 5%;
}
.priceContent {
  margin-top: 45px;
  box-shadow: 2px 5px 5px #ccc;
  width: 100%;
  height: auto;
  display: flex;
  padding: 53px 5% 67px 5%;
  box-sizing: border-box;
}
.freeUse {
  width: 100%;
  height: 84px;
  line-height: 84px;
  background: #3181f5;
  border-radius: 0px 0px 4px 4px;
  text-align: center;
  font-size: 24px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
}
.package_icon {
  margin-top: 65px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.package_icon_con img {
  width: 60px;
  height: 60px;
}
.package_icon_con p {
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 32px;
}
.package_info {
  width: 30%;
  margin-right: 2%;
}
.package_info span {
  color: #3181f5;
}
.package_info:last-child {
  width: 36%;
}
.package_cost_Name {
  font-size: 24px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #3b426b;
  line-height: 44px;
  margin-bottom: 20px;
}
.package_cost_value {
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 32px;
}
.package_cost_name {
  font-size: 20px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #374567;
  line-height: 32px;
  margin-top: 30px;
}
.productMessage {
  width: 100%;
  height: auto;
  padding: 48px 5% 0 5%;
  box-sizing: border-box;
}
.productMessage_title {
  font-size: 28px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #3b426b;
  line-height: 54px;
}
.productMessage_txt {
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 44px;
}
.map_info_serve {
  margin-top: 40px;
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #e0e0e0;
  padding: 35px 0px 30px 44px;
  box-sizing: border-box;
}
.map_info_txt {
  font-size: 20px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #374567;
  line-height: 34px;
}
.map_info_title {
  font-size: 24px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #3b426b;
  line-height: 54px;
}
.map_img {
  width: 100%;
  margin-top: 50px;
  padding: 0 5% 0 5%;
  box-sizing: border-box;
}
.map_img img {
  width: 100%;
  height: 100%;
}
</style>
