|
|
@ -0,0 +1,97 @@ |
|
|
|
|
|
<template> |
|
|
|
|
|
<view class="flex card"> |
|
|
|
|
|
<view class="flex price"> |
|
|
|
|
|
¥<view class="highlight">{{ data.price }}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="flex flex-column info"> |
|
|
|
|
|
<view class="title">{{ data.label }}</view> |
|
|
|
|
|
<view class="desc">{{ `有效期至 ${data.validTime}` }}</view> |
|
|
|
|
|
<button class="btn" @click="jumpToCategory">去使用</button> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
export default { |
|
|
|
|
|
props: { |
|
|
|
|
|
data: { |
|
|
|
|
|
type: Object, |
|
|
|
|
|
default() { |
|
|
|
|
|
return {} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
value: { |
|
|
|
|
|
type: String, |
|
|
|
|
|
default: null, |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
jumpToCategory() { |
|
|
|
|
|
this.$utils.navigateTo(`/pages/index/category`) |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
|
|
|
|
|
|
|
.card { |
|
|
|
|
|
column-gap: 24rpx; |
|
|
|
|
|
padding: 8rpx; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
line-height: 1.4; |
|
|
|
|
|
background: #FFFFFF; |
|
|
|
|
|
border-radius: 24rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.price { |
|
|
|
|
|
width: 164rpx; |
|
|
|
|
|
height: 224rpx; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
color: #FF4800; |
|
|
|
|
|
background: #FFF2F2; |
|
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
|
|
|
|
|
|
|
.highlight { |
|
|
|
|
|
font-size: 48rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
align-items: flex-start; |
|
|
|
|
|
row-gap: 16rpx; |
|
|
|
|
|
height: 224rpx; |
|
|
|
|
|
padding-left: 24rpx; |
|
|
|
|
|
border-left: 2rpx dashed #DADADA; |
|
|
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
|
font-size: 32rpx; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
color: #181818; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.desc { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #9B9B9B; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
|
|
padding: 6rpx 34rpx; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
line-height: 1.4; |
|
|
|
|
|
background: linear-gradient(to right, #21FEEC, #019AF9); |
|
|
|
|
|
border: 2rpx solid #00A9FF; |
|
|
|
|
|
border-radius: 28rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |