<route lang="yaml">
  name: home
  meta:
    title: 数据资产管理
  </route>
<script lang="ts" setup name="home">
import homeDamRegister from './homeDamRegister.vue';
import homeDamDataCircule from './homeDamDataCircule.vue';
import homeDamDemand from './homeDamDemand.vue';
import homeDamAlgorithm from './homeDamAlgorithm.vue';
import homeDamFinance from './homeDamFinance.vue';
import homeDamMarket from './homeDamMarket.vue';

const activeName = ref('register');

const enterCompany = () => {
  window.open('https://www.csbr.cn/');
}

const logon = () => {
  window.open('/login-zgsjzc');
}

const register = () => {
  window.open('/register');
}

const companyDesc = ref('国家级数据交易所经纪服务商，为客户提供数据资产登记服务、数据要素及数据产品交易服务、数据要素金融服务等一揽子经纪服务。\n北京传世博润科技有限公司以软硬件一体化的人工智能物流网为基础，结合大数据技术提供数字化综合解决方案，帮助客户在数字经济时代转型为数字化企业的飞跃。');

const tabsInfo = ref({
  activeName: "index",
  tabs: [
    { label: "首页", name: 'index' },
    { label: "资产登记服务", name: "dam", description: '' },
    { label: "数据供给", name: "dataCircule" },
    { label: "供需信息", name: "demand" },
    { label: "算法竞赛", name: "algorithm" },
    { label: "服务工具", name: "market" },
    { label: "融资服务", name: "service" },
  ]
});

const homeDamFinanceRef = ref();

const homeDamDataCirculeRef = ref();

const homeDamDemandRef = ref();

const homeDamAlgorithmRef = ref();

const homeDamMarketRef = ref();

const tabClick = (val) => {
  if (val?.props.name == 'dataCircule') {
    homeDamDataCirculeRef.value.initPage();
  }  else if (val?.props.name == 'demand') {
    homeDamDemandRef.value.initPage();
  } else if (val?.props.name == 'algorithm') {
    homeDamAlgorithmRef.value.initPage();
  } else if (val?.props.name == 'market') {
    homeDamMarketRef.value.initPage();
  } else if (val?.props.name == 'service') {
    homeDamFinanceRef.value.initPage();
  }
}

</script>

<template>
  <div class="home-full-wrap">
    <div class="home-container">
      <div class="logo-header">
        <img style="width: 120px;height: 36px;margin-left: 27px;" src="../assets/images/logo-white.png" alt="" />
        <el-tabs v-model="tabsInfo.activeName" class="header-tabs" @tab-click="tabClick">
          <el-tab-pane v-for="tab in tabsInfo.tabs" :label="tab.label" :name="tab.name">
          </el-tab-pane>
        </el-tabs>
        <div class="logon-btns">
          <el-button class="logon-btn" @click="register">注册</el-button>
          <el-button class="logon-btn main-btn" @click="logon">登录</el-button>
        </div>
      </div>
      <div v-show="tabsInfo.activeName == 'index'">
        <div class="banner">
          <img style="width: 100%;height: 100%;" src="../assets/images/home-banner.png" alt="" />
          <div class="header">
            <div class="header-content">
              <!-- <div class="header-top">
                <img src="../assets/images/logo.png" class="logo" />
              </div> -->
              <div class="header-bottom">
                <div class="title">数据资产管理系统</div>
                <div class="header-right">激活数据流通体系，释放数据要素新质生产力</div>
              </div>
            </div>
          </div>
        </div>
        <div class="second-container">
          <div class="content">
            <div class="chunk">
              <img class="effect-img" src="../assets/images/financial-optimization.png" alt="" />
            </div>
            <div class="chunk">
              <img class="effect-img" src="../assets/images/enhance.png" alt="" />
            </div>
            <div class="chunk">
              <img class="effect-img" src="../assets/images/promote-circulation.png" alt="" />
            </div>
            <div class="chunk">
              <img class="effect-img" src="../assets/images/data-element.png" alt="" />
            </div>
          </div>
        </div>
        <el-tabs class="three-tabs" v-model="activeName">
          <el-tab-pane label="数据资产登记服务" name="register" class="register">
            <div class="title-a">确权凭证可交易</div>
            <div class="step-main">
              <div class="step-one">
                <div class="left">1</div>
                <div class="right">加入数据资产生产体系</div>
              </div>
              <div class="step-one">
                <div class="left">2</div>
                <div class="right">资源盘点资产规划</div>
              </div>
              <div class="step-one">
                <div class="left">3</div>
                <div class="right">合规核验权利梳理</div>
              </div>
              <div class="step-one">
                <div class="left">4</div>
                <div class="right">资产登记确权凭证</div>
              </div>
              <div class="step-one">
                <div class="left">5</div>
                <div class="right">确定目标资产质量评价</div>
              </div>
              <div class="step-one">
                <div class="left">6</div>
                <div class="right">确定目标资产价值评估</div>
              </div>
            </div>
            <div class="title-a" style="margin-top: 0px">确权凭证不可交易</div>
            <div class="step-main">
              <div class="step-one">
                <div class="left">1</div>
                <div class="right">加入数据资产生产体系</div>
              </div>
              <div class="step-one">
                <div class="left">2</div>
                <div class="right">资源盘点资产规划</div>
              </div>
              <div class="step-one">
                <div class="left">3</div>
                <div class="right">合规核验权利梳理</div>
              </div>
              <div class="step-one">
                <div class="left">4</div>
                <div class="right">资产登记确权凭证</div>
              </div>
              <div class="step-one" style="background: transparent"></div>
              <div class="step-one" style="background: transparent"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="数据资产入表服务" name="entry" class="entry">
            <div style="width: 100%; position: relative;">
              <img style="width: 100%;height: 208px;" src="../assets/images/entry-bg.png" alt="" />
              <div class="content">
                <div class="title">提供入表咨询服务</div>
                <div class="desc">提供权威会计师律师事务所辅导资产入表工作 上市公司 拟上市公司 国有企业 事业单位</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="数据场内交易服务" name="transactio" class="transactio">
            <div class="title-a">获取加工及产品经营授权，将数据资源形成数据产品，在可信空间进行买卖双方的交易</div>
            <div class="step-main">
              <div class="step-one" style="width: calc(25% - 25px)">
                <div class="left">1</div>
                <div class="right">数据产品设计</div>
              </div>
              <div class="step-one" style="width: calc(25% - 25px)">
                <div class="left">2</div>
                <div class="right">数据产品发布</div>
              </div>
              <div class="step-one" style="width: calc(25% - 25px)">
                <div class="left">3</div>
                <div class="right">寻找数据需求方</div>
              </div>
              <div class="step-one" style="width: calc(25% - 25px)">
                <div class="left">4</div>
                <div class="right">撮合成交</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="数据金融化服务" name="finace" class="finace">
            <div class="title-a">提供辅导完成数据资产金融化业务，获取以数据资产或数据产品的融资</div>
            <div class="step-main">
              <div class="step-one" style="width: calc(33% - 35px)">
                <div class="left">1</div>
                <div class="right">提出金融需求</div>
              </div>
              <div class="step-one" style="width: calc(33% - 35px)">
                <div class="left">2</div>
                <div class="right">寻找资金方</div>
              </div>
              <div class="step-one" style="width: calc(33% - 35px)">
                <div class="left">3</div>
                <div class="right">撮合成交</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="治理及挖掘服务" name="governance" class="governance">
            <div style="width: 100%; position: relative;">
              <img style="width: 100%;height: 208px;" src="../assets/images/governance-bg.png" alt="" />
              <div class="content">
                <div class="title">治理及挖掘服务</div>
                <div class="desc">提供专业的数据治理服务商为其提供数据治理服务及建议咨询</div>
                <div class="desc">提供专业的数据挖掘应用服务</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="four-container">
          <div style="height: 100%; width: 100%;">
            <div class="title">重点领域数据要素乘数效应</div>
            <div class="desc">12重点领域</div>
            <img style="width: 100%;margin-bottom: 61px;" src="../assets/images/primary-area.png" alt="" />
          </div>
        </div>
        <div class="company">
          <div style="height: 100%; width: 100%;">
            <div class="title">北京传世博润科技有限公司</div>
            <div class="desc">{{ companyDesc }}</div>
            <div class="btn-dom">
              <el-button class="btn" @click="enterCompany">了解我们</el-button>
            </div>
            <img style="width: 100%;height: 543px;" src="../assets/images/company-bg.png" alt="" />
          </div>
        </div>
        <div class="exchange">
          <div class="title">合作交易所</div>
          <div class="img-main">
            <img class="img-exchange" src="../assets/images/exchange-beijing.png" alt="" />
            <img class="img-exchange" src="../assets/images/exchange-guiyang.png" alt="" />
            <img class="img-exchange" src="../assets/images/exchange-xibu.png" alt="" />
            <img class="img-exchange" src="../assets/images/exchange-wenzhou.png" alt="" />
          </div>
        </div>
      </div>
      <homeDamRegister v-show="tabsInfo.activeName == 'dam'"></homeDamRegister>
      <!-- 数据供给页面 -->
      <homeDamDataCircule ref="homeDamDataCirculeRef" v-show="tabsInfo.activeName == 'dataCircule'"></homeDamDataCircule>
      <!-- 供需信息页面 -->
      <homeDamDemand ref="homeDamDemandRef" v-show="tabsInfo.activeName == 'demand'"></homeDamDemand>
      <!--  算法竞赛页面  -->
      <homeDamAlgorithm ref="homeDamAlgorithmRef" v-show="tabsInfo.activeName == 'algorithm'"></homeDamAlgorithm>
      <!-- 服务工具 -->
      <homeDamMarket ref="homeDamMarketRef" v-show="tabsInfo.activeName == 'market'"></homeDamMarket>
      <homeDamFinance ref="homeDamFinanceRef" v-show="tabsInfo.activeName == 'service'"></homeDamFinance>
      <div class="footer-link">
        <div class="link-title">友情链接</div>
        <div class="link-main">
          <div class="column">
            <!-- 目前没找到官网，暂时先不跳转，跟统计局不是同一个。 -->
            <span class="link-detail" href="https://data.stats.gov.cn" target="_blank">国家数据局</span>
            <a class="link-detail" href="https://www.miit.gov.cn" target="_blank">中华人民共和国工业和信息化部</a>
            <a class="link-detail" href="http://www.caict.ac.cn" target="_blank">中国信息通信研究院</a>
            <a class="link-detail" href="https://www.trimps.ac.cn" target="_blank">公安部第三研究所</a>
          </div>
          <div class="column">
            <a class="link-detail" href="https://www.cufe.edu.cn" target="_blank">中央财经大学</a>
            <a class="link-detail" href="https://www.henu.edu.cn" target="_blank">河南大学</a>
            <a class="link-detail" href="https://www.wzu.edu.cn" target="_blank">温州大学</a>
          </div>
          <div class="column">
            <a class="link-detail" href="https://www.landinglawyer.com" target="_blank">上海兰迪律师事务所</a>
            <a class="link-detail" href="https://www.cairui.com.cn" target="_blank">上海财瑞会计事务所</a>
            <a class="link-detail" href="https://www.cairui.com.cn" target="_blank">上海财瑞资产评估有限公司</a>
          </div>
          <div class="column">
            <a class="link-detail" href="https://ebanking1.ccb.com.cn" target="_blank">中国建设银行</a>
            <a class="link-detail" href="https://bankofbeijing.com.cn" target="_blank">北京银行股份有限公司</a>
            <a class="link-detail" href="https://www.cebbank.com" target="_blank">中国光大银行股份有限公司</a>
            <a class="link-detail" href="https://www.zybank.com.cn" target="_blank">中原银行股份有限公司</a>
            <a class="link-detail" href="https://www.shxibank.com" target="_blank">山西银行股份有限公司</a>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="desc">北京传世博润科技有限公司 Copyright @ 2023-2024 <a style="color: #fff" href="https://beian.miit.gov.cn"
            target="_blank">京ICP备2024044205号 </a>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-full-wrap {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.home-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.logo-header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  :deep(.header-tabs.el-tabs) {
    margin-top: 14px;
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }

    .el-tabs__nav-wrap::after {
      height: 0px;
    }

    .el-tabs__nav {
      margin: 0px 20px;
    }

    .el-tabs__item:focus-visible {
      box-shadow: none;
    }
  }
}

.banner {
  height: 500px;
  position: relative;

  .header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;

    .header-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .header-top {
        height: 80px;
        display: flex;
        align-items: center;

        .logo {
          margin-left: 40px;
          height: 40px;
        }
      }

      .header-bottom {
        height: calc(100% - 120px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 40px;

        .title {
          font-size: 56px;
          color: #FFFFFF;
          font-weight: 400;
          margin-bottom: 18px;
          display: block;
          margin-left: 213px;
        }

        .header-right {
          font-size: 30px;
          font-weight: 200;
          padding-top: 25px;
          margin-left: 331px;
        }
      }
    }
  }

}

.logon-btns {
  display: flex;
  margin-right: 55px;
}

.logon-btn {
  font-size: 14px;
  color: #666666;
  text-align: center;
  height: 32px;
  width: 64px;
  display: block;
  border-radius: 4px;
  &.main-btn {
    background: #0098E6;
    color: #fff;
  }
}

.second-container {
  height: auto;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;

  .content {
    width: 100%;
    display: flex;
    height: 100%;
    justify-content: space-between;

    .chunk {
      min-width: 250px;
      width: 23.5%;

      .effect-img {
        height: 100%;
        width: 100%;
      }

      .text {
        font-size: 24px;
        color: #1B1B1B;
        font-weight: 200;
        padding-left: 20px;
        padding-right: 40px;
        padding-top: 12px;
        height: 118px;
      }
    }
  }
}

:deep(.three-tabs.el-tabs) {
  background-color: #EAEDF4;

  .el-tabs__content {
    padding: 0px 20px;
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    top: 35px;
  }

  .el-tabs__nav-scroll {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0px 20px;

    .el-tabs__nav {
      width: 100%;
    }
  }

  .el-tabs__active-bar {
    background-color: #E1822F;
  }

  .el-tabs__item {
    height: 110px;
    width: 256px;
    font-size: 24px;
    color: #414141;
    font-weight: 200;
    padding-right: 30px;
    flex: 1;

    &.is-active {
      color: #E1822F;
      font-weight: 500;
    }
  }

  .el-tab-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .title-a {
    margin-top: 37px;
    margin-bottom: 16px;
    font-size: 24px;
    color: #2B2B2B;
    font-weight: 200;
    width: 100%;
  }

  .governance,
  .entry {
    margin-bottom: 50px;
    margin-top: 36px;
    position: relative;

    .content {
      position: absolute;
      left: 60px;
      top: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        font-size: 32px;
        color: #FFFFFF;
        font-weight: 200;
      }

      .desc {
        margin-top: 12px;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 200;
      }
    }
  }

  .step-main {
    margin-bottom: 81px;
    display: flex;
    width: 100%;
    justify-content: space-between;

    .step-one {
      height: 127px;
      background-image: linear-gradient(90deg, #D96D03 2%, #F1A981 100%);
      display: flex;
      min-width: 205px;
      width: calc(16.7% - 20px);

      .left {
        display: flex;
        align-items: center;
        margin-left: 12px;
        font-size: 80px;
        color: #FFFFFF;
        font-weight: 500;
      }

      .right {
        display: flex;
        align-items: center;
        margin-left: 8px;
        margin-right: 24px;
        font-size: 24px;
        color: #FFFFFF;
        font-weight: 200;
      }
    }
  }
}

.four-container {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 20px;

  .title {
    width: 100%;
    margin-top: 80px;
    font-size: 40px;
    color: #242424;
    line-height: 56px;
    font-weight: 200;
  }

  .desc {
    width: 100%;
    font-size: 24px;
    color: #242424;
    line-height: 33px;
    font-weight: 200;
    margin-bottom: 32px;
  }
}

.company {
  background: #EAEDF4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 20px;

  .title {
    width: 100%;
    margin-top: 80px;
    font-size: 40px;
    color: #2B2B2B;
    font-weight: 200;
    height: 56px;
  }

  .desc {
    width: 100%;
    margin-top: 14px;
    font-size: 20px;
    color: #2B2B2B;
    font-weight: 200;
    white-space: pre-line;
    line-height: 28px;
  }

  .btn-dom {
    width: 100%;
  }

  .btn {
    font-size: 18px;
    margin-top: 21px;
    margin-bottom: 23px;
    background: #0759B7;
    border-radius: 0px;
    color: #fff;
    font-weight: 500;
    padding: 8px 33px;
    height: 40px;
    width: 120px;
  }
}

.exchange {
  height: 394px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 20px;

  .title {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 30px;
    font-size: 40px;
    color: #2B2B2B;
    font-weight: 200;
  }

  .img-main {
    width: 100%;
    height: 228px;
    display: flex;
    justify-content: space-between;

    .img-exchange {
      width: 23%;
      min-width: 230px;
    }
  }
}

.footer {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2A2B2C;

  .desc {
    font-size: 14px;
    color: #FFFFFF;
    font-weight: 200;
  }
}

.footer-link {
  height: 262px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #2A2B2C;
  padding: 0px 90px;

  .link-title {
    margin: 28px 0px;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 600;
  }

  .link-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    .column {
      display: flex;
      flex-direction: column;
    }
    .link-detail {
      font-size: 16px;
      color: #C9C9C9;
      line-height: 18px;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 8px;
      text-decoration: none;
      cursor: pointer;
    }
  }

}

:deep(.el-overlay) {
  background-color: transparent;
}
</style>