|
|
@@ -0,0 +1,112 @@
|
|
|
+<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="bg-white nav">
|
|
|
+ <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-list menu-avatar">
|
|
|
+ <view class="cu-item">
|
|
|
+ <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
|
|
+ <view class="content flex-sub">
|
|
|
+ <view>凯尔</view>
|
|
|
+ <view class="text-gray text-sm flex justify-between">2019年12月3日</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="text-content">未完成</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="cu-card dynamic" >
|
|
|
+ <view class="cu-item shadow">
|
|
|
+ <view class="cu-list menu-avatar">
|
|
|
+ <view class="cu-item">
|
|
|
+ <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
|
|
+ <view class="content flex-sub">
|
|
|
+ <view>凯尔</view>
|
|
|
+ <view class="text-gray text-sm flex justify-between">2019年12月3日</view>
|
|
|
+ </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-list menu-avatar">
|
|
|
+ <view class="cu-item">
|
|
|
+ <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
|
|
+ <view class="content flex-sub">
|
|
|
+ <view>凯尔</view>
|
|
|
+ <view class="text-gray text-sm flex justify-between">2019年12月3日</view>
|
|
|
+ </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-list menu-avatar">
|
|
|
+ <view class="cu-item">
|
|
|
+ <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
|
|
+ <view class="content flex-sub">
|
|
|
+ <view>凯尔</view>
|
|
|
+ <view class="text-gray text-sm flex justify-between">2019年12月3日</view>
|
|
|
+ </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></style>
|
zhaomiao