uniapp-shikongwang/pages/index/index.vue

<template>
	<view class="content">
		<view class="ctab">
			<u-tabs :list="list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="com">
			<view class="list">
				<view class="left">
					<image src="../../static/tu.png" mode=""></image>
				</view>
				<view class="right">
					<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
					<view class="tips">
						<view class="u-line-progress">
							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
						</view>
						<text class="progress">已抢25%</text>
						<text class="bought">2.4万人已购买</text>
					</view>
					<view class="price">
						<text>￥</text><text>19</text>.<text>90</text>
						<text>￥39.00</text>
						<button>立即抢购</button>
					</view>
				</view>
			</view>
			
			<view class="list">
				<view class="left">
					<image src="../../static/tu.png" mode=""></image>
				</view>
				<view class="right">
					<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
					<view class="tips">
						<view class="u-line-progress">
							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
						</view>
						<text class="progress">已抢25%</text>
						<text class="bought">2.4万人已购买</text>
					</view>
					<view class="price">
						<text>￥</text><text>19</text>.<text>90</text>
						<text>￥39.00</text>
						<button>立即抢购</button>
					</view>
				</view>
			</view>
			
			<view class="list">
				<view class="left">
					<image src="../../static/tu.png" mode=""></image>
				</view>
				<view class="right">
					<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
					<view class="tips">
						<view class="u-line-progress">
							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
						</view>
						<text class="progress">已抢25%</text>
						<text class="bought">2.4万人已购买</text>
					</view>
					<view class="price">
						<text>￥</text><text>19</text>.<text>90</text>
						<text>￥39.00</text>
						<button>立即抢购</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '推荐'
				}, {
					name: '每日必抢'
				}, {
					name: '生活用品'
				},{
					name: '家政服务'
				},{
					name: '美食部落'
				},{
					name: '奶茶夏日'
				},{
					name: '奶茶夏日'
				}],
				current: 0
			}
		},
		onLoad() {

		},
		methods: {
			change(index) {
				this.current = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
	
	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}
	
	.button-demo {
		margin-top: 80rpx;
	}
	
	.link-demo {
		margin-top: 80rpx;
	}
	.ctab{
		width: 100%;
		margin: 20rpx 0  0rpx 0rpx;
		padding: 0 22rpx;
	}
	.com{
		width: 100%;
		overflow: hidden;
		.list{
			border-radius: 10rpx;
			overflow: hidden;
			margin: 20rpx 32rpx;
			background-color: #FFFFFF;
			box-shadow:0 0 10px 5px #e5e5e5;
			.left{
				overflow: hidden;
				float: left;
				image{
					width: 204rpx;
					height: 204rpx;
					margin: 20rpx;
					border-radius: 10rpx;
				}
			}
			.right{
				overflow: hidden;
				.title{
					margin: 18rpx 20rpx 0 0;
					overflow: hidden;
					color: #222222;
					font-size: 32rpx;
					height: 80rpx;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
				.tips{
					margin: 16rpx 0;
					overflow: hidden;
					.u-line-progress{
						width: 112rpx;
						overflow: hidden;float: left;
						margin-right:20rpx ;
					}
					.progress{
						color: #777777;
						font-size: 24rpx;
					}
					.bought{
						color: #777777;
						font-size: 24rpx;
						float: right;
						margin-right: 20rpx;
					}
				}
				.price{
					overflow: hidden;
					color:#FF0000;
					text{
						font-size: 48rpx;
						color:#FF0000;
						font-weight: 500;
					}
					text:nth-child(1){
						color: #FF0000;
						font-size: 28rpx;
					}
					text:nth-child(2){
						color: #FF0000;
						font-size: 48rpx;
					}
					text:nth-child(3){
						color: #FF0000;
						font-size: 28rpx;
					}
					text:nth-child(4){
						color: #777777;
						font-size: 28rpx;
						text-decoration:line-through;
						font-weight: 400;
					}
					button{
						width: 176rpx;
						height: 60rpx;
						background: #FE9903;
						border-radius: 15px;
						font-size: 24rpx;
						color: #FFFFFF;
						float: right;
						margin: 10rpx 20rpx 20rpx 20rpx;
						border: none;
					}
				}
			}
		}
	}
</style>