<template>
  <view class="activity_detail">
    <dHeader :title="'活动详情'"></dHeader>
    <view class="container">
      <view class="img-box">
        <image class="img" src="../../static/img/company.png"></image>
      </view>
      <view class="container-main">
        <view class="activity-title">转发领优惠</view>
        <view class="activity-remark"
          >活动时间：2020-12-12 12:12:12活动时间：2020-12-12 12:12:12活动时间：2020-12-12
          12:12:12活动时间：2020-12-12 12:12:12活动时间：2020-12-12 12:12:12活动时间：2020-12-12
          12:12:12活动时间：2020-12-12 12:12:12活动时间：2020-12-12 12:12:12</view
        >
        <view class="activity-cell">
          <view class="cell-label">积分说明</view>
          <view class="cell-content">
            <image class="cell-image" src="../../static/img/score_b.png"></image>
            <view class="cell-text">10</view>
          </view>
        </view>
        <view class="activity-cell">
          <view class="cell-label">累计最高积分</view>
          <view class="cell-content">
            <image class="cell-image" src="../../static/img/score_b.png"></image>
            <view class="cell-text">100</view>
          </view>
        </view>
        <view class="activity-cell">
          <view class="cell-label">有效期</view>
          <view class="cell-content"> 2024-12-12 12:12:12 </view>
        </view>
        <view class="activity-cell">
          <view class="cell-label">规则说明</view>
          <view class="cell-content"> 每转发并邀请1人成功注册并登录获得10积久300 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
  components: {
    dHeader
  }
}
</script>

<style lang="scss">
page {
  /* #ifdef H5 */
  padding-top: 140upx;
  /* #endif */
  /* #ifdef APP-PLUS */
  padding-top: calc(var(--status-bar-height) + 100upx);
  /* #endif */
  background-color: #d4e5fe;
}
.container {
  padding: 20upx;
  background-color: #fff;
  border-radius: 20upx;
}
.img-box {
  width: 100%;
  height: 400upx;
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.container-main {
  padding: 12upx;
}
.activity-title {
  font-size: 28upx;
  height: 84upx;
  display: flex;
  align-items: center;
  color: var(--c2);
}
.activity-remark {
  font-size: 24upx;
  color: #7f7f7f;
}
.activity-cell {
  margin-top: 20upx;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.cell-label {
  font-size: 24upx;
  color: #7f7f7f;
}
.cell-content {
  max-width: 60%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 24upx;
  color: #7f7f7f;
}
.cell-image {
  width: 24upx;
  height: 24upx;
}
.cell-text {
  margin-left: 6upx;
  font-weight: 600;
  font-size: 26upx;
  color: #000;
}
</style>
