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.
|
|
<template> <view> <lf-nav :spreadOut="true" :showIcon="true" bgColor="white" title="购物车"></lf-nav> <view style="height: 1rpx;"></view> <view> <view v-for="i of 4" class="online-card"> <view class="lf-m-b-20"> <text class="lf-iconfont icon-Group- lf-font-28"></text> <text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">精品超市</text> <text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text> </view> <view class="lf-row-between"> <view class="lf-flex"> <view class="gray-tag"> 满减 </view> <view class="lf-m-l-15 lf-font-24 lf-color-333">母婴产品教师节满1200减200</view> </view> <view class="red-tag">去凑单</view> </view> <view v-for="i of 2" class="lf-row-between"> <view> <u-checkbox-group> <u-checkbox shape="circle" active-color="#15716E" @change="checkboxChange" v-model="checked"></u-checkbox> </u-checkbox-group> </view> <view class="lf-m-t-30" style="display: flex;"> <image class="content-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> <view class="lf-m-l-15"> <view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g</view> <view class="lf-font-24 lf-color-777 lf-m-t-14 lf-row-between"> <view>1件;900g</view> <view class="lf-font-32 lf-color-price">¥385</view> </view> </view> </view> </view> </view> </view> <view class="cart-bottom"> <view class="lf-flex"> <u-checkbox-group> <u-checkbox shape="circle" active-color="#15716E" @change="checkboxChange" v-model="checked"></u-checkbox> </u-checkbox-group> <view class="lf-font-28 lf-color-777" style="margin-left: -20rpx;"> 全选 </view> </view> <view class="lf-row-between"> <view class="lf-font-32 lf-color-222 lf-font-bold lf-m-r-30"> 合计: ¥1150 </view> <view class="cart-btn"> 结算 (6) </view> </view> </view> </view></template>
<script> export default { data() { return { checked: false } }, methods: { checkboxChange(e) { console.log(e) } } }</script>
<style> page { background-color: #F8F8F8; }</style>
<style scoped lang="scss"> .cart-btn { display: flex; justify-content: center; align-items: center; width: 200rpx; height: 80rpx; background: #15716E; border-radius: 40rpx; color: #FFFFFF; font-size: 28rpx; } .cart-bottom { display: flex; justify-content: space-between; width: 750rpx; height: 120rpx; background: #FFFFFF; position: fixed; bottom: 0; padding: 32rpx; } .gray-tag { border-radius: 2rpx; border: 1rpx solid #979797; color: #777; padding: 0 6rpx; font-size: 20rpx; width: max-content; } .red-tag { font-size: 20rpx; color: #F63434; } .content-img { width: 130rpx; height: 130rpx; border-radius: 5rpx; } .online-card { width: 686rpx; height: auto; background: #FFFFFF; border-radius: 20rpx; // margin-bottom: 30rpx;
padding: 30rpx; margin: 30rpx auto; &:last-child { margin-bottom: 150rpx; } }</style>
|