| <template> | |
|   <view class="flex card"> | |
|     <view class="radio"> | |
|       <uv-radio :name="data.id"></uv-radio> | |
|     </view> | |
|     <view class="flex price"> | |
|       ¥<view class="highlight">{{ data.discountAmount }}</view> | |
|     </view> | |
|     <view class="flex flex-column info"> | |
|       <view class="title">{{ data.title }}</view> | |
|       <view class="desc">{{ `有效期至 ${data.validDate}` }}</view> | |
|     </view> | |
|   </view> | |
| </template> | |
| 
 | |
| <script> | |
|   export default { | |
|     props: { | |
|       data: { | |
|         type: Object, | |
|         default() { | |
|           return {} | |
|         } | |
|       }, | |
|       value: { | |
|         type: String, | |
|         default: null, | |
|       } | |
|     }, | |
|     data() { | |
|       return { | |
|       } | |
|     }, | |
|     methods: { | |
|     }, | |
|   } | |
| </script> | |
| 
 | |
| <style scoped lang="scss"> | |
| 
 | |
|   .card { | |
|     column-gap: 24rpx; | |
|     padding: 8rpx 8rpx 8rpx 26rpx; | |
|     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; | |
|     } | |
|   } | |
| 
 | |
| </style> |