assess-app/page_task/task_details/task_details.vue

<template>
	<view class="total-page page-env-20 page-box">
		<Nav :title="'任务详情'" :genre="1" :fixedHeight="135"></Nav>
		<view class="task-tabs task-tabs-width m-t30">
			<view class="m-lr20 m-b20 detail-bg">
				<image class="detail-img" src="/static/img/task/details-bg.png" mode=""></image>
				<view class="detail-content">
					<view class="row-c top-titke">
						<image class="wh-60 r-circle" src="../../static/img/logo.png" mode=""></image>
						<text>张三</text>
						<text>张三</text>
						<text>张三</text>
					</view>
					<view class="row-justify-sb center buttom-titke" style="">
						<image class="wh-60 r-circle" src="../../static/img/logo.png" mode=""></image>
						<text>张三</text>
						<text>张三</text>
						<text>张三</text>
					</view>
				</view>
			</view>
			<TaskTab></TaskTab>
			<view class="m-lr20 m-t20" style="width: 95vw;">
				<z-swiper v-model="list" :options="{slidesPerView : 1,centeredSlides : true}">
					<z-swiper-item :custom-style="{width:'90vw'}" v-for="(item,index) in list" :key="index">
						<image class="image" style="width: 88vw;" :src="item" mode="aspectFill">
						</image>
					</z-swiper-item>
				</z-swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import TaskItem from "@/common/task/task-item.vue"
	import TaskTab from "@/page_task/module/task_tab.vue"

	export default {
		components: {
			TaskTab,
			TaskItem
		},
		data() {
			return {
				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',
				],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.detail-bg {
		position: relative;
	}

	.detail-img {
		width: 100%;
		height: 220rpx;
	}

	.detail-content {
		position: absolute;
		top: 10rpx;
		left: 20rpx;

		.top-titke {
			height: 75rpx;
			line-height: 75rpx;
			// background: red;
		}

		.buttom-titke {
			flex: 1;
			margin-top: 26rpx;
			height: 90rpx;
			width: 635rpx;
			line-height: 90rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 20rpx;
		}
	}
</style>