web-base-h5/pages/mine/yearGift/index.vue

<template>
  <view class="content">
    <view
      v-for="(item, index) in awardsList"
      :key="index"
      :class="item.nowFlag == 0 ? 'huang' : 'kuang'"
    >
      <view class="kuang_t">
        <view>{{ item.dateYear }}</view>
        <view>{{ item.dateMonth }}月</view>
      </view>
      <view class="kuang_b">{{ item.awardsName }}</view>
    </view>
  </view>
</template>

<script>
import * as api from "@/config/mine.js";
export default {
  data() {
    return {
      awardsList: [],
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    getData() {
      api.yearAwards().then((res) => {
        this.awardsList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx 20rpx;
  .kuang {
    padding: 16rpx 20rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    .kuang_t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      :nth-child(1) {
        color: #5f5f5f;
      }
      :nth-child(2) {
        color: #333;
        font-size: 36rpx;
        font-weight: 600;
      }
    }
    .kuang_b {
      color: #333;
      font-size: 36rpx;
      font-weight: 600;
    }
  }
  .huang {
    padding: 16rpx 20rpx;
    background: linear-gradient(#dca665, #d1924d);
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    .kuang_t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      :nth-child(1) {
        color: #fff;
      }
      :nth-child(2) {
        color: #fff;
        font-size: 36rpx;
        font-weight: 600;
      }
    }
    .kuang_b {
      color: #fff;
      font-size: 36rpx;
      font-weight: 600;
    }
  }
}
</style>