sisMobilePhone/components/task/taskCard/taskCard.vue

<template>
	<view>
		<!--导航栏-->
		<view @tap="closeFrame">
			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
				<block slot="backText"><view style="height: 80rpx;line-height: 80rpx;color: silver;">返回</view></block>
				<block slot="content"><view style="color: silver;">任务详情</view></block>
			</cu-custom>
		</view>
		<!-- 导航栏 -->
		<scroll-view scroll-x class=" nav navigationBar">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == TabCur ? 'text-orange cur' : ''" v-for="(item, index) in nameList" :key="index" @tap="tabSelect" :data-id="index">
					{{ item }}
				</view>
			</view>
		</scroll-view>
		<!-- 任务卡片 -->
		<view v-if="TabCur == 0">
			<view class="cu-card dynamic">
				<view class="cu-item shadow">
					<view class="cu-item">
						<view class="content flex-sub"><view class="text-gray text-sm flex justify-end">2019年12月3日</view></view>
					</view>
					<view class="text-content">未完成</view>
				</view>
			</view>

			<view class="cu-card dynamic">
				<view class="cu-item shadow">
					<view class="cu-item">
						<view class="content flex-sub"><view class="text-gray text-sm flex justify-end">2019年12月3日</view></view>
					</view>
					<view class="text-content">未完成</view>
				</view>
			</view>
		</view>

		<view v-if="TabCur == 1">
			<view class="cu-card dynamic">
				<view class="cu-item shadow">
					<view class="cu-item">
						<view class="content flex-sub"><view class="text-gray text-sm flex justify-end">2019年12月3日</view></view>
					</view>
					<view class="text-content">已完成</view>
				</view>
			</view>
		</view>

		<view v-if="TabCur == 2">
			<view class="cu-card dynamic">
				<view class="cu-item shadow">
					<view class="cu-item">
						<view class="content flex-sub"><view class="text-gray text-sm flex justify-end">2019年12月3日</view></view>
					</view>
					<view class="text-content">分配我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			nameList: ['未完成', '已完成', '分配我的'],
			TabCur: 0,
			scrollLeft: 0
		};
	},
	methods: {
		closeFrame: function() {
			this.count = this.count + 1;
			if (this.isFrameShow) {
				this.isFrameShow = false;
				this.sanJiao = 'sanJiaoDown';
			}
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		}
	}
};
</script>

<style>
	body {
		font-family: '方正兰亭细黑_GBK';
		font-size: 20px;
		color: silver;
		background: #fff;
	}
	
	@font-face {
		font-family: '方正兰亭细黑_GBK';
		src: url(../../../static/fzltxh.TTF);
	}
	
	page {
		background-color: #1f1f1f;
		font-family: '方正兰亭细黑_GBK';
		overflow-x: hidden;
	}
	
	.top {
		width: 100%;
		height: 130upx;
		padding-top: 5upx;
		background-color: #1f1f1f;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 100;
	}
	.navigationBar{
		margin-left: 5%;
		width: 90%;
		background-color: #242424;
		color: white;
	}
	.navigationBar{
		color: #B7B6B7;
	}
	
</style>