forked from ccsens_fe/tall-mui-3
unknown
4 years ago
17 changed files with 505 additions and 35 deletions
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<time-bar /> |
|||
<view class="container p-4"> |
|||
<time-line /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import TimeBar from './components/TimeBar'; |
|||
import TimeLine from './components/TimeLine'; |
|||
|
|||
export default { |
|||
name: 'Project', |
|||
components: { TimeBar, TimeLine }, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,37 @@ |
|||
<template> |
|||
<view class> |
|||
<!-- :class="{ active: cycleTasks.time.start === filter.startTime }" --> |
|||
<view class="cycle-time active"> |
|||
<!-- {{ $util.formatStartTimeToCycleTime(filter.time, cycleTasks.time.start) }} --> |
|||
2021年30周 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'TimeBar', |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.cycle-time { |
|||
padding: 8rpx 16rpx; |
|||
margin-bottom: 16rpx; |
|||
background: #fafafc; |
|||
color: $uni-text-color; |
|||
font-size: 14px; |
|||
position: sticky; |
|||
top: -1px; |
|||
left: 0; |
|||
z-index: 99; |
|||
|
|||
&.active { |
|||
background: $uni-color-primary; |
|||
color: $uni-text-color-inverse; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,80 @@ |
|||
<template> |
|||
<u-time-line> |
|||
<u-time-line-item nodeTop="2"> |
|||
<!-- 此处自定义了左边内容，用一个图标替代 --> |
|||
<template v-slot:node> |
|||
<view class="u-node state"> |
|||
<!-- 此处为uView的icon组件 --> |
|||
<!-- <u-icon :size="24" color="#fff" name="play-right-fill"></u-icon> --> |
|||
<u-circle-progress :percent="100" active-color="#2979ff" borderWidth="4" width="66"> |
|||
<view class="u-progress-content"> |
|||
<view class="u-progress-dot"></view> |
|||
<text class="u-progress-info"> |
|||
<u-icon name="checkmark" size="30"></u-icon> |
|||
</text> |
|||
</view> |
|||
</u-circle-progress> |
|||
</view> |
|||
</template> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-title">待取件</view> |
|||
<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米。</view> |
|||
<view class="u-order-time">2019-05-08 12:12</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
<u-time-line-item> |
|||
<!-- 此处没有自定义左边的内容，会默认显示一个点 --> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view> |
|||
<view class="u-order-time">2019-12-06 22:30</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
</u-time-line> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'TimeLine', |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-node { |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
border-radius: 100rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #d0d0d0; |
|||
} |
|||
|
|||
.state { |
|||
border: 2px solid #999; |
|||
background: #fff; |
|||
} |
|||
|
|||
.u-order-title { |
|||
color: #333333; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.u-order-desc { |
|||
color: rgb(150, 150, 150); |
|||
font-size: 28rpx; |
|||
margin-bottom: 6rpx; |
|||
} |
|||
|
|||
.u-order-time { |
|||
color: rgb(200, 200, 200); |
|||
font-size: 26rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,73 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 10:52:05 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-19 18:02:10 |
|||
--> |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="rolebar"> |
|||
<view> |
|||
<view class="container" v-if="roles || roles.length"> |
|||
<!-- <u-tabs |
|||
:bar-width="barWidth" |
|||
:current="currentRoleIndex" |
|||
:list="roles" |
|||
@change="handleClickRole" |
|||
class="u-skeleton-rect" |
|||
name="value" |
|||
ref="tabs" |
|||
></u-tabs>--> |
|||
|
|||
<u-tabs |
|||
:bar-width="barWidth" |
|||
:class="'isMine' ? '#f00' : ''" |
|||
:current="currentRoleIndex" |
|||
:list="roles" |
|||
@change="handleClickRole" |
|||
class="u-skeleton-rect" |
|||
name="value" |
|||
ref="tabs" |
|||
> |
|||
<template slot="name">+++</template> |
|||
</u-tabs> |
|||
</view> |
|||
<u-skeleton :animation="true" :loading="loading" bgcolor="#fff" v-else></u-skeleton> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Roles', |
|||
data() { |
|||
return { |
|||
roles: [ |
|||
{ id: 1, value: '项目经理', isMine: 0 }, |
|||
{ id: 2, value: '运维', isMine: 0 }, |
|||
{ id: 3, value: '导师一', isMine: 1 }, |
|||
{ id: 4, value: '导师二', isMine: 1 }, |
|||
{ id: 5, value: '导师三', isMine: 1 }, |
|||
], |
|||
currentRoleIndex: 0, |
|||
barWidth: 80, |
|||
|
|||
loading: false, // 是否显示骨架屏组件 |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleClickRole(index) { |
|||
console.log('index: ', index); |
|||
this.currentRoleIndex = index; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
padding: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,42 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 14:22:54 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-19 17:01:58 |
|||
--> |
|||
<template> |
|||
<view class> |
|||
<!-- :class="{ active: cycleTasks.time.start === filter.startTime }" --> |
|||
<view class="cycle-time active"> |
|||
<!-- {{ $util.formatStartTimeToCycleTime(filter.time, cycleTasks.time.start) }} --> |
|||
2021年30周 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'Barrier', |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.cycle-time { |
|||
padding: 8rpx 16rpx; |
|||
margin-bottom: 16rpx; |
|||
background: #fafafc; |
|||
color: $uni-text-color; |
|||
font-size: 14px; |
|||
position: sticky; |
|||
top: -1px; |
|||
left: 0; |
|||
z-index: 99; |
|||
|
|||
&.active { |
|||
background: $uni-color-primary; |
|||
color: $uni-text-color-inverse; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,42 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 15:36:28 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-19 17:44:18 |
|||
--> |
|||
<template> |
|||
<view class="px-4"> |
|||
<view v-for="item in list" :key="item" class="mt-2"> |
|||
<view class="flex items-center"> |
|||
<TimeStatus :status="item" /> |
|||
<view class="flex-1 ml-2 flex justify-between"> |
|||
<view>任务时间栏</view> |
|||
<view>任务快捷方式</view> |
|||
</view> |
|||
</view> |
|||
<view class="border-l-2 border-gray-300 ml-3.5"> |
|||
<view class="ml-4 shadow-lg"> |
|||
<u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" class="h-16"> |
|||
<view slot="body"> |
|||
<view class="u-col-between p-0 u-skeleton"> |
|||
<view class="u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view> |
|||
</view> |
|||
</view> |
|||
</u-card> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import TimeStatus from './TimeStatus.vue'; |
|||
export default { |
|||
name: 'TimeBox', |
|||
components: { TimeStatus }, |
|||
data() { |
|||
return { list: [0, 1, 2, 3] }; |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,107 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 15:47:38 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-19 18:01:59 |
|||
--> |
|||
<template> |
|||
<view> |
|||
<view class="rounded-full h-7 w-7 flex items-center justify-center text-blue-400" v-if="status === 0"> |
|||
<u-circle-progress :percent="100" active-color="#2979ff" bgcolor="rgba(255,255,255,0)" borderWidth="4" width="66"> |
|||
<view @tap="changeStatus(0)" class="u-progress-content"> |
|||
<view class="u-progress-dot"></view> |
|||
<text class="u-progress-info"> |
|||
<u-icon name="checkmark" size="30"></u-icon> |
|||
</text> |
|||
</view> |
|||
</u-circle-progress> |
|||
</view> |
|||
<view class="rounded-full h-7 w-7 flex items-center justify-center text-black" v-if="status === 1"> |
|||
<u-circle-progress :percent="80" active-color="#2979ff" bgcolor="rgba(255,255,255,0)" borderWidth="6" width="66"> |
|||
<view @tap="changeStatus(1)" class="u-progress-content"> |
|||
<view class="u-progress-dot"></view> |
|||
<view class="u-progress-info">{{ time }}</view> |
|||
</view> |
|||
</u-circle-progress> |
|||
</view> |
|||
<view class="rounded-full h-7 w-7 flex items-center justify-center text-gray-400" v-if="status === 2"> |
|||
<u-circle-progress :percent="40" active-color="#2979ff" bgcolor="rgba(255,255,255,0)" borderWidth="6" width="66"> |
|||
<view @tap="changeStatus(2)" class="u-progress-content"> |
|||
<view class="u-progress-dot"></view> |
|||
<text class="u-progress-info"> |
|||
<u-icon name="play-right-fill" size="30"></u-icon> |
|||
</text> |
|||
</view> |
|||
</u-circle-progress> |
|||
</view> |
|||
<view class="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black" v-if="status === 3"> |
|||
<u-circle-progress :percent="80" active-color="#2979ff" bgcolor="rgba(255,255,255,0)" borderWidth="6" width="66"> |
|||
<view @tap="changeStatus(3)" class="u-progress-content"> |
|||
<view class="u-progress-dot"></view> |
|||
<text class="u-progress-info"> |
|||
<u-icon name="pause" size="30"></u-icon> |
|||
</text> |
|||
</view> |
|||
</u-circle-progress> |
|||
</view> |
|||
<u-action-sheet :list="chooseList()" v-model="show"></u-action-sheet> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'TimeStatus', |
|||
props: { |
|||
status: { |
|||
default: 0, |
|||
type: Number, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
time: 20, |
|||
start: [ |
|||
{ |
|||
text: '确认开始任务', |
|||
color: 'blue', |
|||
}, |
|||
], |
|||
pause: [ |
|||
{ text: '继续' }, |
|||
{ |
|||
text: '重新开始任务', |
|||
color: 'blue', |
|||
}, |
|||
{ text: '结束' }, |
|||
], |
|||
proceed: [ |
|||
{ text: '暂停' }, |
|||
{ |
|||
text: '重新开始任务', |
|||
color: 'blue', |
|||
}, |
|||
{ text: '结束' }, |
|||
], |
|||
again: [ |
|||
{ |
|||
text: '重新开始任务', |
|||
color: 'blue', |
|||
}, |
|||
], |
|||
change: 0, |
|||
show: false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
chooseList() { |
|||
return this.start; |
|||
}, |
|||
changeStatus(num) { |
|||
this.change === num; |
|||
this.show = true; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
@ -0,0 +1,7 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 15:40:02 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-19 15:40:03 |
|||
--> |
|||
@ -0,0 +1,28 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 14:15:35 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-19 16:44:12 |
|||
--> |
|||
<template> |
|||
<view> |
|||
<Barrier /> |
|||
<scroll-view scroll-y="true" style="height: 1000rpx"> |
|||
<view style="position: relative"> |
|||
<TimeBox /> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import Barrier from './components/Barrier.vue'; |
|||
import TimeBox from './components/TimeBox.vue'; |
|||
export default { |
|||
name: 'TimeLine', |
|||
components: { Barrier, TimeBox }, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue