wms_pda/pages/sample/group_new.vue

<script setup lang="ts">
	//
</script>

<template>
	
	<scroll-view scroll-y class="scroll-view">
		<!-- 已登录: 显示购物车 -->
		<template>
			<!-- 购物车列表 -->
			<view class="cart-list">
				<!-- 滑动操作分区 -->
				<uni-swipe-action>
					<!-- 滑动操作项 -->
					<uni-swipe-action-item v-for="item in 10" :key="item" class="cart-swipe">
						<!-- 商品信息 -->
						<view class="goods" style="border:1px solid red">
							<view class="meta" style="border:1px solid green">
								<view class="name ellipsis">木箱</view>
								<view class="attrsText ellipsis">黄色小象 140cm</view>
								<view class="price">待组盘</view>
							</view>
							<!-- 商品数量 -->
							<view class="count">
								<text class="text_1">重量</text>
								<input class="input" type="number" value="1" />
								<text class="text">Kg</text>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		
		</template>
	</scroll-view>

</template>

<style lang="scss">
	// 根元素
	:host {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #f7f7f8;
	}

	// 滚动容器
	.scroll-view {
		flex: 1;
	}

	// 购物车列表
	.cart-list {
		padding: 0 20rpx;

		// 优惠提示
		.tips {
			display: flex;
			align-items: center;
			line-height: 1;
			margin: 30rpx 10rpx;
			font-size: 26rpx;
			color: #666;

			.label {
				color: #fff;
				padding: 7rpx 15rpx 5rpx;
				border-radius: 4rpx;
				font-size: 24rpx;
				background-color: #27ba9b;
				margin-right: 10rpx;
			}
		}

		// 购物车商品
		.goods {
			display: flex;
			padding: 10rpx;
			border-radius: 10rpx;
			background-color: #fff;
			position: relative;

			.navigator {
				display: flex;
			}

			.checkbox {
				position: absolute;
				top: 0;
				left: 0;

				display: flex;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				height: 100%;

				&::before {
					content: '\e6cd';
					font-family: 'erabbit' !important;
					font-size: 40rpx;
					color: #444;
				}

			}

			.picture {
				width: 170rpx;
				height: 170rpx;
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 5rpx;
			}

			.name {
				height: 72rpx;
				font-size: 26rpx;
				color: #444;
			}

			.attrsText {
				line-height: 1.8;
				padding: 0 15rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.price {
				line-height: 1;
				font-size: 26rpx;
				color: #444;
				margin-bottom: 2rpx;
				color: #cf4444;

				&::before {
					// content: '￥';
					font-size: 80%;
				}
			}

			// 商品数量
			.count {
				position: absolute;
				bottom: 20rpx;
				right: 5rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 220rpx;
				height: 48rpx;

				.text_1 {
					border:1px solid red;
					width: 250rpx;
					height: 100%;
					padding: 0 ;
					font-size: 32rpx;
					color: #444;
				}

				.text {
					height: 100%;
					padding: 0 20rpx;
					font-size: 32rpx;
					color: #444;
				}

				.input {
					height: 100%;
					text-align: center;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #444;
					background-color: #f6f6f6;
				}
			}
		}

		.cart-swipe {
			display: block;
			margin: 20rpx 0;
		}


	}

</style>