assess-app/page_subpack/module/task_tab.vue

<template>
	<view class="task-tab">
		<scroll-view class="scroll-Y row" scroll-x="true">
			<view class="column-c p-lr40" v-for="(item,index) in navList" :key="index" @click="setType(index)">
				<image class="wh-60 r-circle" :class="index===current?'double-border':''" :src="item.icon" mode="">
				</image>
				<view class="m-t16 sys-size-24 text-center sys-weight-600" :class="{'default-text':index===current}">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				navList: [{
					name: '基础信息',
					icon: '/static/img/task/task-all.png'
				}, {
					name: '资产/征信',
					icon: '/static/img/task/task-repayment.png'
				}, {
					name: '跟进记录',
					icon: '/static/img/task/task-business.png'
				}, {
					name: '审核进度',
					icon: '/static/img/task/task-money.png'
				}, ]
			}
		},
		methods: {
			setType(current) {
				if (current !== this.current) {
					this.current = current
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.task-tab {
		padding: 34rpx 20rpx 20rpx 20rpx;
		border-radius: 30rpx;
		background: #fff;
	}

	.from-title {
		// height: 90rpx;
		// position: relative;
		background: #fff;
		// background: linear-gradient(180deg, rgba(255, 255, 255, 0.57) 0%, rgba(255, 255, 255, 0.86) 100%);

		.title-bg {
			position: absolute;
			top: 0;
			left: 0;
			transition: .5s ease;
			z-index: 1;
			background-image: url("/static/img/test/tab-bg.png");
			background-repeat: no-repeat;
			background-size: 100% auto;
			height: 103rpx;
			width: 161rpx;
			bottom: 0;

			.bg-icon {
				margin-top: 68rpx;
				margin-left: 63rpx;
				width: 45rpx;
				height: 4rpx;
			}
		}

		.title-bg-two {
			left: 25%;
			transition: .5s ease;
		}

		.title-bg-three {
			left: 50%;
			transition: .5s ease;
		}

		.title-bg-four {
			left: 75%;
			transition: .5s ease;
		}

		.title-list {
			display: flex;
			justify-content: space-between;
			z-index: 2;
			position: relative;

			.title-text {
				// width: 25%;
				// height: 90rpx;
				// line-height: 90rpx;
				color: #444444;
			}

			.default-text {
				color: #10B261;
			}

		}

	}

	.data-box {
		margin-top: 20rpx;

		.image {
			width: 90vw;
		}
	}

	.double-border {
		// position: relative;
		// width: 60rpx;
		// height: 60rpx;
		// background-color: #fff;
		// border: 2px solid #0FB160;
		// /* 外边框 */
		// box-sizing: border-box;
		// border: solid 2px #fff;
		// outline: solid 2px #888;
		// border-radius: 50%;
		box-shadow: 0 0 0 6rpx #fff, 0 0 0 12rpx #10B261;
	}

	// .double-border::before {
	// 	content: '';
	// 	position: absolute;
	// 	top: -5px;
	// 	/* 调整边框的大小 */
	// 	left: -5px;
	// 	right: -5px;
	// 	bottom: -5px;
	// 	border: 1px solid #fff;
	// 	/* 内边框 */
	// 	pointer-events: none;
	// 	/* 防止影响鼠标事件 */
	// }
</style>