3
0
Fork 0
web-store-retail-h5/pages/mine/yearGift/index.vue

92 lines
1.7 KiB
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>