konggang-city-miniprogram/pages/policy/policy_deatil.vue

<template>
  <div class="content">
    <div class="title-box">
      <div class="title">【工信部】关于推动民营经济高质量发展的若干意见</div>
      <div class="title-time">
        <p class="time">2021-05-07 10:15</p>
        <p class="read-count">阅读量 488</p>
      </div>
    </div>
    <div class="video-box">
      <image src="/static/policy/u575.png"></image>
    </div>
    <!-- 企业研发投入补贴 -->
    <div class="card-input-content">
      <div class="card-input">
        <div class="card-title">企业研发投入补贴</div>
        <div class="table">
          <p class="table-item">
            <span>项目金额:</span>
            <span>最高500.00万</span>
          </p>
          <p class="table-item">
            <span>申报时间:</span>
            <span>2021-08-20 至 2021-09-20</span>
          </p>
          <p class="table-item">
            <span>申报状态:</span>
            <span>剩5天</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 项目概况 -->
    <div class="card-situation">
      <div class="card-title">项目概况</div>
      <p>
        为贯彻落实《加强信息共享 促进产融合作行动方案》 （工信部联财 [2014]
        83号）、和《推进工业化文化发展实施方案（2021-2025年）》工信部联政法（
        [2021]
        54号）等文件精神，壮大工旅文融合发展格局，助力制造强国和网络强国建设，现组织开展2021年度工业文化产业项目征集工作。
      </p>
    </div>
    <div class="card-group" v-for="(item, idx) in model" :key="idx">
      <policy-deatil-card
        :model="item"
        :isMar="idx == model.length - 1"
      ></policy-deatil-card>
    </div>
    <div class="share-collection">
      <div class="share">
        <span>分享</span>
        <image src="/static/policy/u2091.png" />
      </div>
      <div class="collection">
        <span>收藏</span>
        <image src="/static/policy/u2096.png" />
      </div>
    </div>
  </div>
</template>

<script>
import policy_deatil_card from "./policy_deatil_card";
export default {
  components: {
    policyDeatilCard: policy_deatil_card,
  },
  data() {
    return {
      model: [
        {
          title: "基本信息",
          item: [
            {
              name: "项目名称",
              value: ["企业研发投入补贴"],
            },
            {
              name: "受理部门",
              value: ["区科技创新局"],
            },
            {
              name: "政策层级",
              value: ["西咸新区"],
            },
            {
              name: "信息提供日期",
              value: ["2021-08-20"],
            },
          ],
        },
        {
          title: "支持力度",
          item: [
            {
              name: "支持金额",
              value: ["最高500.00万"],
            },
            {
              name: "支持金额",
              value: [
                "1. 对研发投入达到1000万元的企业，给予20万元研发投入补贴；",
                "2. 研发超过1000万的部分，每增长1000万追加奖励5万元；",
                "3. 本项目受企业纳税额限制。",
              ],
            },
          ],
        },
      ],
      id: "",
    };
  },
  onLoad(option) {
    let id = option.id;
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.content {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  .title-box {
    display: flex;
    flex-direction: column;

    padding-bottom: 10rpx;
    .title {
      letter-spacing: 5rpx;
      font-size: 35rpx;
      font-weight: 500;
    }
    .title-time {
      display: flex;
      font-size: 20rpx;
      color: $uni-text-color-grey;
      margin-top: 20rpx;
      .time {
        margin-left: 20rpx;
        margin-right: 100rpx;
      }
    }
  }
  .video-box {
    width: 100%;
    image {
      width: 100%;
      height: 400rpx;
      border-radius: 32rpx;
    }
  }
  .card-input-content {
    width: 100%;
    margin-top: 20rpx;
    .card-input {
      padding: 30rpx 30rpx;
      box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
      border-radius: 32rpx;
      .card-title {
        font-weight: 600;
        padding: 20rpx 20rpx 0rpx 20rpx;
      }
      .table {
        border-radius: 32rpx;
        background-color: #f2f2f2;
        margin-top: 20rpx;
        display: flex;
        padding: 0 20rpx;
        flex-direction: column;
        .table-item {
          box-sizing: border-box;
          width: 100%;
          margin: 20rpx 0;
          font-size: 27rpx;
          font-weight: 300;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }

  .card-situation {
    margin-top: 20rpx;
    padding: 20rpx;
    border-top: 8rpx solid #f2f2f2;
    box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
    border-radius: 32rpx;
    .card-title {
      font-weight: 600;
      padding: 20rpx 20rpx 0rpx 20rpx;
    }
    p {
      padding: 20rpx;
      margin-top: 20rpx;
      font-size: 27rpx;
      letter-spacing: 1rpx;
      line-height: 50rpx;
    }
  }
  .card-group {
    width: 100%;
  }
  .share-collection {
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .share,
    .collection {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .share {
      border-right: 1px solid $uni-border-color;
    }
    image {
      width: 50rpx;
      height: 50rpx;
      margin-left: 40rpx;
    }
  }
}
</style>