鸿宇研学生前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

85 lines
1.4 KiB

<template>
<view class="flex card">
<view class="radio">
<uv-radio :name="data.id"></uv-radio>
</view>
<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>
</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>