yicangzongtai_app_240321/components/selected/service.vue

<template>
	<view class="service">
					<view class="recommend">
						<view class="recommend-item" :class="{red:recommend==index}" v-for="(item,index) in choice" :key="item.id">
							{{item.name}}
						</view>
		
					</view>
		
					<view class="content">
						<view class="content-item" v-for="(item,index) in 8">
							<image src="" mode="" class="neironga2"></image>
							<view class="name">
								清洁控油去角质洁面乳套装洗面奶氨基酸...
							</view>
							<view class="number">
								<view class="large">
									￥ <text>269.</text>00 
								</view>
								
								<view class="small">￥298.00</view>
							</view>
							<view class="sell">
								已售12件
							</view>
						</view>
				</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				choice:[
					{
						id:1,
						name:"推荐",
					},
					{
						id:2,
						name:"热销",
					},
					{
						id:3,
						name:"新品",
					},
					{
						id:4,
						name:"皮肤美容"
					}
				]
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped lang="scss">
	.content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #f5f5f5;
		.content-item{
			background-color: #ffffff;
			border-radius: 18rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			image{
				width: 336rpx;
				height: 336rpx;
				background-color: red;
			}
			.number{
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				.large{
					color: #ED3D07;
					font-size: 20rpx;
					font-weight: Medium;
					text{
						font-size: 36rpx;
						font-weight: Bold;
						
					}
				}
				.small{
					font-size: 22rpx;
					color: #999999;
					font-weight: 400;
					text-decoration: line-through;
					margin-left: 16rpx;
					
				}
			}
			.sell{
				padding: 0 30rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
				margin-bottom: 36rpx;
				margin-top: 8rpx;
			}
			.name{
			width: 276rpx;
			padding: 0 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-wrap: break-word;
				word-break: break-all;
				white-space: normal !important
			}
		}
	}
	.recommend {
		display: flex;
		background-color: #f5f5f5;
		border-radius: 40rpx 40rpx 0 0;
		.recommend-item {
			font-weight: 500;
			padding: 15rpx 30rpx;
			background-color: #ffffff;
			margin: 40rpx 0 30rpx 30rpx;
			border-radius: 34rpx;
		}
	}
</style>