金诚优选前端代码
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.
 
 
 
 
 

134 lines
3.3 KiB

<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 style="height: 60rpx;"></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>