lirenGO_uniapp/pages/shop/cart.vue

<template>
	<view class="cartPage">
		<view class="cart">
			<view class="list">
				<view class="listItem" v-for="item in 5">
					<uni-icons :type="isSelect?'checkbox-filled':'circle'" class="uni-icons"
						:color="isSelect?'#3A71FF':'#999999'" size="28" @click.stop="changeSelect"></uni-icons>
					<view class="proBox">
						<image class="proImg" src="/static/test/test.png" mode="aspectFill"></image>
						<view class="proText">
							<text class="title">Apple/苹果 Watch Series 10 智能手表</text>
							<text class="subTitle">Watch S10 银色 铝金属 GPS...</text>
							<uni-tag :inverted="true" text="秒杀" type="primary" size="mini" />
							<view class="priceBox">
								<view class="price">
									<text class="yuan"><text class="yuanText">￥</text>3139</text>
									<text>到手价</text>
								</view>
								<uni-number-box v-model="number" ></uni-number-box>
							</view>
						</view>
					</view>	
				</view>
			</view>
		</view>
		
		
		<view class="tabBox">
			<text>猜你喜欢</text>
		</view>
		<view class="productBox">
			<view class="list">
				<view class="listItem">
					<view class="listItemBody">
						<view class="card" v-for="item in 5">
							<view class="cardHead">
								<image src="/static/test/test.png" mode="aspectFill"></image>
							</view>
							<view class="cardBody">
								<text class="title">智能产线升级改造配套方案定制</text>
								<text class="subTitle">单一线缆提供丰富IO接口，可接入多路输入、输出信号顶部环形指示灯，快速观察工作状态</text>
								<view class="">
									<text class="yuan"><text class="yuanText">￥</text>12333</text>
									<text class="yuan1"><text class="yuanText1">￥</text>12333</text>
								</view>
							</view>
						</view>
					</view>
									
				</view>
			</view>
			
		</view>
	
		<view class="bottomBox">
			<view class="" style="height:200rpx"></view>
			<view class="bottom">
				<view class="bottomLeft">
					<view class="" @click.stop="changeSelect">
						<uni-icons :type="isSelect?'checkbox-filled':'circle'" class="uni-icons"
							:color="isSelect?'#3A71FF':'#999999'" size="28"></uni-icons>
						<text>全选</text>	
					</view>
					<view class="total">
						<text>合计：</text>
						<text class="yuan"><text class="yuanText">￥</text>3000</text>
					</view>
				</view>
				<button class="buyBtn">结算</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';
	
const isSelect = ref(false)
const number = ref(5)
const changeSelect= ()=>{
	isSelect.value = !isSelect.value
}
</script>

<style lang="scss" scoped>
.cartPage{
	width: 100%;
	min-height: 100vh;
	background-color: #FAFBFF;
	box-sizing: border-box;
	padding-top: 26rpx;
}
.cart{
	.list{
		margin: 0 26rpx 26rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		.listItem{
			width: 100%;
			box-sizing: border-box;
			padding: 16rpx 26rpx 26rpx 16rpx;
			@include flexBox(start,center);
			.proBox{
				@include flexBox(start,center);
				.proImg{
					width: 182rpx;
					height: 182rpx;
					border-radius: 18rpx;
					margin-right: 10rpx;
				}
				.proText{
					flex: 1;
					.title{
						@include fontStyle(28rpx,#000000,left,500,48rpx);
						@include truncateText(1);
					}
					.subTitle{
						@include fontStyle(24rpx,#333333,left,400,34rpx);
						@include truncateText(2);
					}
					.priceBox{
						@include flexBox(between,center);
						margin-top: 10rpx;
						.price{
							@include fontStyle(24rpx,#3A71FF,left,400,34rpx);
							.yuan{
								@include fontStyle(36rpx,#3A71FF,left,bold,34rpx);
								padding-right: 10rpx;
								.yuanText{
									@include fontStyle(26rpx,#3A71FF,left,500,34rpx);
								}
							}
						}
					}
				}
			}
			&:not(:last-child){
				border-bottom: 2rpx solid rgba(0,0,0,0.08);
			}
		}
	}
}   
.tabBox{
	width: 100%;
	margin: 26rpx 0;
	background-color: #FFFFFF;
	box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.05);
	box-sizing: border-box;
	padding: 26rpx;
	@include fontStyle(32rpx,#000000,left,bold,48rpx);
}
.productBox{
	margin: 26rpx;
	.list {
		.listItem {
			.listItemHead {
				margin: 26rpx 0 16rpx;
				@include flexBox(between, center);
				@include fontStyle(34rpx, #000000, left, bold, 44rpx);
	
				.seeMore {
					@include fontStyle(26rpx, #666666, right, 400, 44rpx);
				}
	
				.titleBox {
					position: relative;
					text {
						position: relative;
						z-index: 2;
					}
					.purpleBox {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, 0%);
						width: 92rpx;
						height: 28rpx;
						background: linear-gradient(180deg, #86AAFA 0%, #C9D6FF 100%);
						opacity: 0.9;
						z-index: 1;
					}
				}
			}
	
			.listItemBody {
				@include flexBox(between, center);
				flex-wrap: wrap;
	
				.card {
					width: 334rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 26rpx;
	
					.cardHead {
						image {
							width: 100%;
							height: 334rpx;
							display: block;
							margin: 0;
						}
					}
	
					.cardBody {
						box-sizing: border-box;
						padding: 16rpx 26rpx;
	
						.title {
							@include fontStyle(28rpx, #000000, left, 500, 48rpx);
							@include truncateText(1);
						}
	
						.subTitle {
							@include fontStyle(26rpx, #666666, left, 500, 38rpx);
							@include truncateText();
						}
	
						.yuan {
							@include fontStyle(36rpx, #3A71FF, left, bold, 48rpx);
							padding-right: 20rpx;
	
							.yuanText {
								@include fontStyle(26rpx, #3A71FF, left, bold, 48rpx);
							}
						}
	
						.yuan1 {
							@include fontStyle(26rpx, #666666, left, 400, 48rpx);
							text-decoration: line-through;
	
							.yuanText1 {
								@include fontStyle(24rpx, #666666, left, 400, 48rpx);
							}
						}
					}
				}
			}
		}
	}
}
.bottomBox{
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0,0,0,0.1);
		@include flexBox(between,center);
		box-sizing: border-box;
		padding: 26rpx;
		.bottomLeft{
			margin-right: 10rpx;
			&>view{
				@include flexBox(start,start);
				@include fontStyle(28rpx,#333333,left,400,38rpx);
				margin: 6rpx;
			}
			.total{
				@include flexBox(start,center);
				@include fontStyle(28rpx,#333333,left,400,46rpx);
			}
			.yuan{
				@include fontStyle(36rpx, #3A71FF, left, bold, 46rpx);
				.yuanText{
					@include fontStyle(28rpx, #3A71FF, left, 500, 46rpx);
				}
			}
		}
		.buyBtn{
			width: 200rpx;
			height: 80rpx;
			background: linear-gradient( 270deg, #7299FF 0%, #3A71FF 100%);
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			@include flexBox();
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			margin: 0;
		}
	}
}
</style>