siyu_app/components/es-integral-sign/es-integral-sign.vue

<template>
	<view class="es-fw-500">

		<!-- 第一行图标 -->
		<view class="es es-oh es-pt-15 es-pb-10">
			<block v-for="v,i in integralData.list">
				<view class="es es-ac es-pc" :style="'width:'+(100/integralData.list.length)+'%'">
					<view class="es-icon-60" :class="'es-icon-integral-node-'+v.icon"></view>
				</view>
			</block>
		</view>

		<!-- 第二行进度 -->
		<view class="es es-oh es-pt-15 es-pb-10">
			<block v-for="v,i in integralData.list">
				<view class="es es-ac es-pc" :style="'width:'+(100/integralData.list.length)+'%'">
					
					<view class="es-icon-13 es-bc es-br point"></view>
					
					<view class="line1 es">
						<view class="es-h-8 es-wp-50" :class="i<integralData.index?'es-bc':'es-bc-tint05'" v-if="i!=0"></view>
						<view class="es-f1"></view>
						<view class="es-h-8 es-wp-50" :class="i+1<integralData.index?'es-bc':'es-bc-tint05'" v-if="i!=integralData.list.length-1"></view>
					</view>
					
					<view class="point2 es es-ac es-pc">
						<view class="es-icon-20 es-br es-bc" v-if="integralData.index>i"></view>
					</view>					
				</view>
			</block>
		</view>
		
		<view class="es es-oh es-pt-15 es-pb-10">
			<block v-for="v,i in integralData.list">
				<view class="es es-ac es-pc es es-ver" :style="'width:'+(100/integralData.list.length)+'%'">
					<view class="es-fs-20 es-omit" :class="integralData.index>=i?'es-c':'es-c-99'">{{v.title}}</view>
					<view class="es-fs-22 es-omit" :class="integralData.index>=i?'es-c':''">{{v.remark}}</view>
				</view>
			</block>
		</view>

	</view>
</template>

<script>
	export default {
		name: "es-integral-sign",
		data() {
			return {
				integralData: {
					index: 2, //当前选中第几个，从1开始
					list: [{
							icon: 2, //1-显示芳华币  2-显示勾  3-显示红包
							title: '+10芳华币',
							remark: '第一天',
						},
						{
							icon: 2, //1-显示芳华币  2-显示勾  3-显示红包
							title: '+10芳华币',
							remark: '第二天',
						},
						{
							icon: 1, //1-显示芳华币  2-显示勾  3-显示红包
							title: '+30芳华币',
							remark: '第三天',
						},
						{
							icon: 1, //1-显示芳华币  2-显示勾  3-显示红包
							title: '+50芳华币',
							remark: '第四天',
						},
						{
							icon: 1, //1-显示芳华币  2-显示勾  3-显示红包
							title: '+50芳华币',
							remark: '第五天',
						},
						{
							icon: 1, //1-显示芳华币  2-显示勾  3-显示红包
							title: '+60芳华币',
							remark: '第六天',
						},
						{
							icon: 3, //1-显示芳华币  2-显示勾  3-显示红包
							title: '芳华币礼包',
							remark: '签到完成',
						},

					]
				},
			};
		}
	}
</script>

<style>
	.es-icon-integral-node-1 {
		background-image: url(/static/images/other/integral/node-1.png);
	}

	.es-icon-integral-node-2 {
		background-image: url(/static/images/other/integral/node-2.png);
	}

	.es-icon-integral-node-3 {
		background-image: url(/static/images/other/integral/node-3.png);
	}
	.line1{
		position: absolute;
		width: 100%;
		height: 8rpx;
		z-index: 1;
	}
	
	.point{
		z-index: 2;
	}
	
	.point2{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 3;
	}
	
</style>