lh-mobile/pages/jiance/order/top.vue

<template>
	<view>
		<uni-group mode="card">
			<u-line-progress active-color="#3396d1" :percent="activeNum == 1 ? 33 : activeNum == 2 ? 66 : 100"
				:show-percent="false"></u-line-progress>
			<u-row>
				<u-col span="4">
					<view class="nameTop" @click="activeNumClick(1)">
						<image src="../../../static/weitou/weituo-active.png" class="iamgeTop" v-if="activeNum == 1">
						</image>
						<image src="../../../static/weitou/weituo.png" class="iamgeTop" v-else></image>
						<view class="textName" :class="activeNum == 1 ? 'textName-active':''">{{weitTouTop[0].name}}
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="nameTop" @click="activeNumClick(2)">
						<image src="../../../static/weitou/yangpin-active.png" class="iamgeTop" v-if="activeNum == 2">
						</image>
						<image src="../../../static/weitou/yangpin.png" class="iamgeTop" v-else></image>
						<view class="textName" :class="activeNum == 2 ? 'textName-active':''">{{weitTouTop[1].name}}
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="nameTop" @click="activeNumClick(3)">
						<image src="../../../static/weitou/renyuan-active.png" class="iamgeTop" v-if="activeNum == 3">
						</image>
						<image src="../../../static/weitou/renyuan.png" class="iamgeTop" v-else></image>
						<view class="textName" :class="activeNum == 3 ? 'textName-active':''">{{weitTouTop[2].name}}
						</view>
					</view>
				</u-col>
			</u-row>
		</uni-group>
	</view>
</template>

<script>
	import order from './test.json'
	export default {
		data() {
			return {
				activeNum: 1,
				weitTouTop: order.weiTouTop
			}
		},
		methods: {
			activeNumClick(index) {
				// this.activeNum = index
				this.$emit("activeNumClick", index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nameTop {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 15rpx 0;

		.iamgeTop {
			height: 30rpx;
			width: 30rpx;
			color: red;
		}

		.textName {
			margin-left: 5rpx;
			color: #8a8a8a;
		}

		.textName-active {
			color: #3396d1;
		}
	}
</style>