<template>
  <!-- Copyright (c) 2022/6/15 Zhaozhenxing -->
  <div class="container">
    <div class="header">
      <div class="header_background">
        <website-header />
        <div class="header_container">
          <div style="padding-right: 10%">
            <h1>海纳数据，不凡潜力</h1>
            <p>
              采用分布式集群等技术，构建的可弹性伸缩云存储服务，基于10多年的技术沉淀，保护您在云上的应用系统和数据安全，为您提供超高效率比的高性能云服务器。
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="service">
      <p class="service_title">海量云端数据存储服务</p>
      <p class="service_txt">稳定、安全、高效的云存储服务</p>
      <div class="service_tabs">
        <div class="service_img">
          <img
            src="../../assets/serviceone.png"
            style="width: 58px; height: 58px"
            v-if="activeName != 'imgandvideo'"
          />
          <img
            src="../../assets/serviceone_click.png"
            style="width: 58px; height: 58px"
            v-if="activeName == 'imgandvideo'"
          />
          <img
            src="../../assets/servicetwo.png"
            style="width: 58px; height: 58px"
            v-if="activeName != 'video'"
          />
          <img
            src="../../assets/servicetwo_click.png"
            style="width: 58px; height: 58px"
            v-if="activeName == 'video'"
          />
          <img
            src="../../assets/servicethree.png"
            style="width: 58px; height: 58px"
            v-if="activeName != 'storage'"
          />
          <img
            src="../../assets/servicethree_click.png"
            style="width: 58px; height: 58px"
            v-if="activeName == 'storage'"
          />
        </div>
        <div class="elTabs">
          <el-tabs
            v-model="activeName"
            style="margin: 0 auto; width: 100%"
            stretch
          >
            <el-tab-pane label="数据上云" name="imgandvideo">
              <div class="service_card">
                <p class="service_card_title">本地数据上云</p>
                <p class="service_card_txt">
                  系统基于IPFS架构研发，能够实现千节点，EB级扩展，能够帮助您轻松通过Internet传输数据，为您带来极致的数据上云体验
                </p>
              </div>
              <div class="service_card">
                <p class="service_card_title">第三方数据上云</p>
                <p class="service_card_txt">
                  支持数据从第三方存储平台快速备份或迁徙到土星云，土星云有更高的数据存储性价比和更快的传输速度
                </p>
              </div>
              <div class="service_card">
                <p class="service_card_title">多种写入API</p>
                <p class="service_card_txt">
                  根据不同写入场景，土星云提供丰富的写入API：简单上传、表单上传、断点续传、追加上传、第三方资源抓取等
                </p>
              </div>
              <div class="service_card">
                <p class="service_card_title">多种接口兼容</p>
                <p class="service_card_txt">
                  土星云兼容了AWS S3接口，支持众多基于AWS
                  S3开发的应用程序、SDK及第三方服务在不修改代码同时支持更多基于AWS
                  S3的开源应用
                </p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="云端数据管理" name="video">
              <div class="service_card">
                <p class="service_card_title">数据监控</p>
                <p class="service_card_txt">
                  多维度展示数据使用量信息，用户可随时查看自己的存储用量以及数据使用情况
                </p>
              </div>
              <div class="service_card">
                <p class="service_card_title">子账号</p>
                <p class="service_card_txt">
                  支持创建多个子账号，实现数据访问隔离，满足访客用户临时访问对象存储场景，提高数据安全性
                </p>
              </div>
              <div class="service_card">
                <p class="service_card_title">增删改查</p>
                <p class="service_card_txt">
                  通过控制台或API接口，用户可以对数据进行上传、下载、删除、查询替换等操作，并对存储桶和对象进行处理
                </p>
              </div>
              <div class="service_card">
                <p class="service_card_title">加密存储</p>
                <p class="service_card_txt">
                  用户数据经过分片和加密处理后，存储在不同区域存储节点，除数据所有者外，即使后台管理员也无法读取完整数据
                </p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="数据分发" name="storage">
              <div class="service_card">
                <p class="service_card_title">数据联动</p>
                <p class="service_card_txt">
                  土星云支持数据与其他云计算或应用实时联动，包括CDN加速，数字图片处理，音视频转码等
                </p>
              </div>
              <div class="service_card">
                <p class="service_card_title">数据池</p>
                <p class="service_card_txt">
                  土星云存储可作为大数据计算、分析和应用调用的数据池，为数据分析与计算提供数据源
                </p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="productAdvan">
      <p class="tabs_content_title">产品优势</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 class="carousel">
        <p class="tabs_content_title">多行业数据云存储方案</p>
        <p class="service_txt">精准适配多种应用场景数据存储需求</p>
        <div class="carouselContent">
          <el-carousel
            :interval="4000"
            type="card"
            :height="bannerHeight + 'px'"
          >
            <el-carousel-item v-for="item in imgList" :key="item.src">
              <p class="carouselP">
                {{ item.title }}
              </p>
              <img
                class="carousel_img"
                :src="item.url"
                alt
                style="
                  -webkit-filter: brightness(80%);
                  opacity: 1;
                  width: 100%;
                  height: inherit;
                "
              />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="priceCard">
        <p class="tabs_content_title">价格最优的云存储服务</p>
        <p class="service_txt">仅收取存储费用，流量、请求等永久免费</p>
        <div class="priceContent">
          <div class="package_info">
            <p class="package_cost_Name">请求费用</p>
            <p class="package_cost_value">读请求次数</p>
            <p class="package_cost_value">写请求次数</p>
            <p class="package_cost_name">永久免费</p>
          </div>
          <div class="package_info">
            <p class="package_cost_Name">流量费用</p>
            <p class="package_cost_value">外网数据流出</p>
            <p class="package_cost_value">跨区域数据流出</p>
            <p class="package_cost_name">永久免费</p>
          </div>
          <div class="package_info">
            <p class="package_cost_Name">存储费用</p>
            <p class="package_cost_value">适用类型<span>全场景文件</span></p>
            <p class="package_cost_value">访问特点<span>实时访问</span></p>
            <p class="package_cost_name">0.05元/GB/月</p>
          </div>
        </div>
        <!-- <div class="freeUse">
                免费试用
            </div> -->
        <div class="package_icon">
          <div class="package_icon_con">
            <img src="../../assets/package_icon_one.png" />
            <p>7天无理由退款</p>
          </div>
          <div class="package_icon_con">
            <img src="../../assets/package_icon_two.png" />
            <p>专业售前、售后支持团队</p>
          </div>
          <div class="package_icon_con">
            <img src="../../assets/package_icon_three.png" />
            <p>7*24客户服务应答</p>
          </div>
        </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 {
      // 图片父容器高度
      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: 2,
      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/public_topbar.png');
  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;
}
.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;
}
</style>
