| @ -0,0 +1,143 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <view class="box d"> | |||
| <uv-checkbox-group shape="circle" v-model="checkboxValue"> | |||
| <view v-for="(item, index) in list" | |||
| :key="index" | |||
| @click="" class="item"> | |||
| <view class="checkbox"> | |||
| <uv-checkbox | |||
| :name="item.id" | |||
| activeColor="#FA5A0A" | |||
| size="40rpx" @click.stop | |||
| icon-size="35rpx"></uv-checkbox> | |||
| </view> | |||
| <image class="image" | |||
| :src="item.image" mode=""> | |||
| </image> | |||
| <view class="info"> | |||
| <view class="title"> | |||
| <view class="text-ellipsis">{{ item.name }}</view> | |||
| <!-- <view style="flex-shrink: 0;"> | |||
| 数量:{{ item.num }} | |||
| </view> --> | |||
| </view> | |||
| <view class="unit"> | |||
| {{ item.nameSub }} | |||
| </view> | |||
| <view class="price-box"> | |||
| <view class="price"> | |||
| 现价<text>¥{{ item.price }}</text>元 | |||
| </view> | |||
| <view class="del"> | |||
| 原价¥{{ item.oldPrice }} | |||
| </view> | |||
| </view> | |||
| <view class="unit"> | |||
| <uv-number-box v-model="item.selectNum" :max="item.num"> | |||
| </uv-number-box> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </uv-checkbox-group> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| props : { | |||
| list : { | |||
| default : [] | |||
| }, | |||
| }, | |||
| data() { | |||
| return { | |||
| }; | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| .d { | |||
| .item { | |||
| background-color: #fff; | |||
| display: flex; | |||
| padding: 30rpx; | |||
| width: 690rpx; | |||
| .checkbox { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| flex-shrink: 0; | |||
| } | |||
| .image { | |||
| width: 200rpx; | |||
| height: 200rpx; | |||
| border-radius: 20rpx; | |||
| flex-shrink: 0; | |||
| } | |||
| .info { | |||
| flex: 1; | |||
| .title { | |||
| display: flex; | |||
| padding: 6rpx 20rpx; | |||
| justify-content: space-between; | |||
| .text-ellipsis { | |||
| width: 410rpx; | |||
| // width: 280rpx; | |||
| overflow: hidden; //超出的文本隐藏 | |||
| text-overflow: ellipsis; //溢出用省略号显示 | |||
| white-space: nowrap; //溢出不换行 | |||
| } | |||
| } | |||
| .unit { | |||
| font-size: 24rpx; | |||
| padding: 6rpx 20rpx; | |||
| color: #717171; | |||
| } | |||
| .price-box{ | |||
| display: flex; | |||
| align-items: end; | |||
| padding-left: 20rpx; | |||
| .price{ | |||
| color: $uni-price-color; | |||
| margin-top: 6rpx; | |||
| font-size: 24rpx; | |||
| text{ | |||
| font-size: 28rpx; | |||
| font-weight: 900; | |||
| } | |||
| } | |||
| .del{ | |||
| font-size: 22rpx; | |||
| color: #888; | |||
| font-weight: 500; | |||
| text-decoration : line-through; | |||
| margin-top: auto; | |||
| margin-left: 10rpx; | |||
| } | |||
| } | |||
| .wan { | |||
| color: $uni-color; | |||
| font-size: 26rpx; | |||
| padding: 10rpx 20rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||