assess-app/page_task/module/task_tab.vue

<template>
	<view class="page-box m-lr20">
		<view class="from-title sys-radius-20">
			<view class="title-list">
				<view class="title-text  sys-size-28 text-center sys-weight-600" :class="{'default-text':type===1}"
					@click="setType(1)">基础信息</view>
				<view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===2}"
					@click="setType(2)">资产/征信</view>
				<view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===3}"
					@click="setType(3)">跟进记录</view>
				<view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===4}"
					@click="setType(4)">审核进度</view>
			</view>
			<view class="title-bg"
				:class="{'title-bg-two':type===2,'title-bg-three':type===3,'title-bg-four':type===4}">
				<view class="bg-icon sys-background-dominant sys-radius-100"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import EnNav from "@/components/en-utils/en-nav/en-nav.vue";

	export default {
		components: {
			EnNav
		},
		props: {
			current: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				type: 1,
				list: [
					'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
					'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
					'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
				],
				options: {
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					coverflowEffect: {
						rotate: 50,
						stretch: 0,
						depth: 100,
						modifier: 1,
						slideShadows: true,
					},
				},
				slideCustomStyle: {
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					borderRadius: '6rpx'
				},
			};
		},
		created() {
			this.type = this.current
		},
		methods: {
			setType(type) {
				if (type !== this.type) {
					this.type = type
					this.$emit('onChange', type)
				}
			},
		}
	}
</script>

<style lang="scss">
	.page-box {
		.top {
			position: relative;
			padding: 20rpx;

			.top-img {
				width: calc(100vw - 40rpx);
			}

			.top-status {
				position: absolute;
				top: 47rpx;
				right: 54rpx;
				width: 75rpx;
			}
		}

		.from-title {
			// margin: 20rpx 20rpx 34rpx 20rpx;
			height: 90rpx;
			position: relative;
			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% 103rpx;
				height: 103rpx;
				width: 25%;

				.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: #333333;
				}

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

			}

		}

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

			.image {
				width: 90vw;
			}
		}
	}
</style>