dvcp_v2_wechat_app/src/mods/AppIntegralApply/detail.vue

<template>
  <div class="page">
    <div class="header-content">
      <div class="header-middle">
        <div class="img-title">{{ detail.title }}</div>

        <div class="cards">
          <div class="cards-left">活动时间</div>
          <div class="cards-right">{{ detail.beginTime }}</div>
        </div>

        <div class="cards">
          <div class="cards-left">活动人数</div>
          <div class="cards-right">
            <span style="color: #1c6bdf">{{ detail.realNum }}</span>
          </div>
        </div>

        <div class="cards">
          <div class="cards-left">活动地点</div>
          <div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
        </div>

        <div class="cards">
          <div class="cards-left">活动地点</div>
          <div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
        </div>

        <div class="cards">
          <div class="cards-left">活动地点</div>
          <div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
        </div>

        <div class="cards">
          <div class="cards-left">活动地点</div>
          <div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  computed: {},
  data() {
    return {
      id: '',
      detail: {},
    }
  },
  onLoad(option) {
    this.id = option.id

    this.$dict.load('').then(() => {
      this.getDetail()
    })
  },
  onShow() {},
  methods: {
    getDetail() {
      var ids = 'f16e54058cab4099bf3ee6e03e750b93'
      this.$instance.post(`/app/appvillageactivityinfo/queryDetailById?id=${ids}`).then((res) => {
        if (res.code == 0) {
          this.detail = res.data
        }
      })
    },
  },
}
</script>
<style scoped lang="scss">
.page {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .info-title {
    padding-left: 32px;
    line-height: 108px;
    font-size: 32px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
  }
  .tab-title {
    line-height: 108px;
    font-size: 32px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    span {
      display: inline-block;
      width: 192px;
      text-align: center;
    }
    .active {
      color: #3671ee;
      border-bottom: 4px solid #3671ee;
    }
  }
  .status0 {
    background: #000;
  }
  .status1 {
    background: #ff883c;
  }
  .status3 {
    background: #1aaaff;
  }
  .status2 {
    background: #42d784;
  }
  .status4,
  .status5 {
    background: #e4e4e4;
  }
  .header-content {
    // padding-bottom: 80px;
    .header-top {
      width: 100%;
      height: 440px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .header-middle {
      padding: 32px 32px 0 32px;

      .img-title {
        font-size: 36px;
        font-weight: 600;
      }

      .cards {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #eee;
        padding: 36px 0;
        line-height: 40px;
        font-size: 28px;

        .cards-left {
          color: #999;
        }

        .cards-right {
          color: #333;
        }
      }
    }
  }
}
</style>