XEH-miniProgram/pages/index/product/category.vue

<template>
	<view class="page-wrap">
		<scroll-view scroll-y class="nav-panel">
			<view :class="{ item: true, active: navActive === item.value }" @click="navActive = item.value" v-for="(item, index) in navList" :key="index">
				{{ item.label }}
			</view>
		</scroll-view>
		<view class="product-panel">
			<view class="item">
				<view class="box">记账报税（年度）</view>
				<view class="name">记账报税（年度）</view>
				<view class="desc">记账+报税记账+报税记账+报税记账+报税记账+报税记账+报税记账+报税记账+报税记账+报税</view>
				<view class="tags">
					<view class="tag">下单送礼品</view>
					<view class="tag">返券</view>
				</view>
				<view class="price" data-text="年">3600</view>
			</view>
			<view class="item">
				<view class="box">记账报税（年度）</view>
				<view class="name">记账报税（年度）</view>
				<view class="desc">记账+报税</view>
				<view class="tags">
					<view class="tag">下单送礼品</view>
					<view class="tag">返券</view>
				</view>
				<view class="price" data-text="年">3600</view>
			</view>
			<view class="item">
				<view class="box">记账报税（年度）</view>
				<view class="name">记账报税（年度）</view>
				<view class="desc">记账+报税</view>
				<view class="tags">
					<view class="tag">下单送礼品</view>
					<view class="tag">返券</view>
				</view>
				<view class="price" data-text="年">3600</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navActive: 1,
			navList: [
				{
					label: '记账报税',
					value: 1
				},
				{
					label: '税控托管',
					value: 2
				},
				{
					label: '社保代缴',
					value: 3
				},
				{
					label: '出口退税',
					value: 4
				},
				{
					label: '财税代办',
					value: 5
				},
				{
					label: '工商代办',
					value: 6
				},
				{
					label: '银行代办',
					value: 7
				},
				{
					label: '资质·许可',
					value: 8
				},
				{
					label: '法律咨询',
					value: 9
				},
				{
					label: '超值套餐',
					value: 10
				}
			]
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	padding-left: 164.84rpx;
}
.nav-panel {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: 164.84rpx;
	background: #f2f2f2;
	.item{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 89.29rpx;
		text-align: center;
		padding: 0 13.74rpx;
		font-size: 24.73rpx;
		color: #333;
	}
	.active{
		color: #00bcd2;
		background: #fff;
	}
}
.product-panel{
	.item{
		height: 192.31rpx;
		background: #fff;
		position: relative;
		padding: 13.74rpx 20.6rpx 0 199.18rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #e0e0e0;
		&:last-child{
			border: none;
		}
	}
	.box{
		width: 157.97rpx;
		height: 157.97rpx;
		position: absolute;
		left: 20.6rpx;
		top: 13.74rpx;
		font-size: 27.47rpx;
		color: #fff;
		text-align: center;
		word-break: break-all;
		background: #0a9efe;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 13.74rpx;
		box-sizing: border-box;
	}
	.name{
		font-size: 27.47rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.desc{
		font-size: 24.73rpx;
		color: #999;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2; 
		-webkit-box-orient: vertical;
		max-height: 82.42rpx;
		word-break: break-all;
	}
	.tags{
		overflow: hidden;
		.tag{
			float: left;
			font-size: 21.98rpx;
			color: #F97631;
			padding: 2.75rpx 13.74rpx;
			border: 1rpx solid #F97631;
			margin: 13.74rpx 13.74rpx 0 0;
		}
	}
	.price{
		font-size: 41.21rpx;
		color: #F97631;
		position: absolute;
		right: 20.6rpx;
		bottom: 20.6rpx;
		line-height: 1;
		&:before{
			content: '￥';
			font-size: 24.73rpx;
		}
		&::after{
			content: attr(data-text);
			font-size: 21.98rpx;
			color: #999;
			margin-left: 4.12rpx;
			vertical-align: middle;
		}
	}
}
</style>