projectDetail.vue

<template>
  <div class="project_container">
    <NafmHeader navClass="nafmii-head-bg3" title="项目详情" />
    <main class="project_content">
      <h2 class="title">
        {{detailInfo.title}}
      </h2>
      <p class="status">
        <span>
          {{detailInfo.status}}
        </span>
      </p>
      <section class="basic_info">
        <h3 class="section_title">
          项目基本信息
        </h3>
        <div class="basic_content">
          <p>
            <span class="item_title">企业名称</span>
            <span class="item_info">{{detailInfo.basicInfo.companyName}}</span>
          </p>
          <p>
            <span class="item_title">品种</span>
            <span class="item_info">{{detailInfo.basicInfo.variety}}</span>
          </p>
          <p>
            <span class="item_title">注册或备案</span>
            <span class="item_info">{{detailInfo.basicInfo.record}}</span>
          </p>
          <p>
            <span class="item_title">注册金额（亿元）</span>
            <span class="item_info">{{detailInfo.basicInfo.registeredCapital}}</span>
          </p>
          <p>
            <span class="item_title">主承销商</span>
            <span class="item_info">{{detailInfo.basicInfo.leadUnderwriter}}</span>
          </p>
          <p>
            <span class="item_title">会计师事务所</span>
            <span class="item_info">{{detailInfo.basicInfo.CPAFirm}}</span>
          </p>
          <p>
            <span class="item_title">律师事务所</span>
            <span class="item_info">{{detailInfo.basicInfo.lawFirm}}</span>
          </p>
          <p>
            <span class="item_title">注册通知书文号</span>
            <span class="item_info">{{detailInfo.basicInfo.registrationNoticeNo}}</span>
          </p>
          <p>
            <span class="item_title">更新日期</span>
            <span class="item_info">{{detailInfo.basicInfo.updateTime}}</span>
          </p>
        </div>
      </section>
      <section class="msg_open">
        <h3 class="section_title">
          信息披露
        </h3>
        <nav>
          <span :class="actNav === item.id ? 'act_nav' : ''" v-for="item in navList" :key="item.id" @click="navSwitch(item.id)">{{item.name}}</span>
        </nav>
        <main class="msg_content">
          <div class="msg_item" v-for="item in msgList" :key="item.id">
            <p class="msg_title">
              <van-icon :name="PDFIcon" />
              <a href="">{{item.title}}</a>
            </p>
            <p class="update_time">
              <van-icon :name="clockIcon" />
              更新时间：
              {{item.updateTime}}
            </p>
          </div>
        </main>
      </section>
    </main>
  </div>
</template>
<script>
export default {
  name: 'ProjectDetail',
  data() {
    return {
      detailInfo: {
        title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册文件',
        status: '已受理',
        basicInfo: {
          companyName: '南京市高淳区城市投资有限公司',
          variety: 'MTN',
          record: '注册',
          registeredCapital: '8',
          leadUnderwriter: 'XXX',
          CPAFirm: 'XXX',
          lawFirm: 'XXX',
          registrationNoticeNo: '中市协注[2021]MTN199号',
          updateTime: '2021.05.01'
        }
      },
      navList: [{
        name: '初稿',
        id: 'first',
      }, {
        name: '上会稿',
        id: 'middle'
      }, {
        name: '终稿',
        id: 'final'
      }],
      actNav: 'first',
      msgList: [{
        title: '【初稿】无锡产业发展集团有限公司2020年三季度财务报表',
        updateTime: '2021-4-12 ',
        id: 1
      }, {
        title: '【初稿】无锡产业发展集团有限公司2020年三季度财务报表',
        updateTime: '2021-4-12 ',
        id: 2
      }],
      PDFIcon: require('@/assets/icon/pdf.png'),
      clockIcon: require('@/assets/icon/icon_clock.png')
    }
  },
  methods: {
    navSwitch(actNav) {
      this.actNav = actNav
    }
  }
}
</script>
<style lang="less" scoped>
.project_container {
  width: 100%;
  height: 100%;
  .project_content {
    width: 384px;
    margin: 16px auto 0;
    .title {
      color: #333333;
      font-size: 19px;
      font-family: PingFangSC-Semibold;
    }
    .status {
      text-align: right;
      padding: 13px 0;
      span {
        display: inline-block;
        width: 51px;
        text-align: center;
        font-size: 11px;
        line-height: 20px;
        color: #ffffff;
        border-radius: 10px;
        background-color: #0079ff;
      }
    }
    .section_title {
      color: #222222;
      font-size: 16px;
      font-family: PingFangSC-Semibold;
      line-height: 16px;
      padding-left: 6px;
      border-left: 2.5px solid #135faa;
    }
    .basic_info {
      padding: 5px 0;
      .basic_content {
        margin: 15px 0;
        padding: 0px 15px;
        border-radius: 8px;
        background-color: #ffffff;
        box-shadow: 0px 0px 6px 0px rgba(2, 15, 41, 0.06);
        p {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          line-height: 34px;
          .item_title {
            color: #666666;
          }
          .item_info {
            color: #333333;
          }
        }
      }
    }
    .msg_open {
      nav {
        text-align: center;
        margin: 20px 0;
        span {
          color: #666666;
          font-size: 12px;
          margin: 0 24px;
        }
        .act_nav {
          color: #135faa;
          font-size: 14px;
          font-family: PingFangSC-Semibold;
          border-bottom: 2.5px solid #135faa;
        }
      }
      .msg_item {
        border-radius: 8px;
        background-color: #ffffff;
        box-shadow: 0px 0px 6px 0px rgba(2, 15, 41, 0.06);
        margin-bottom: 10px;
      }
      .msg_title {
        font-size: 13px;
        margin-left: 15px;
        border-bottom: 0.5px solid rgba(2, 15, 41, 0.06);
        display: flex;
        padding: 10px 0;
        .van-icon {
          font-size: 35px;
        }
        a {
          color: #388de2;
          padding: 0 15px;
        }
      }
      .update_time {
        display: flex;
        align-items: center;
        text-align: right;
        color: #888d8d;
        font-size: 12px;
        padding: 10px 15px;
      }
    }
  }
}
</style>