forked from ccsens_fe/tall-mui-3
12 changed files with 238 additions and 31 deletions
@ -0,0 +1,26 @@ |
|||||
|
<!-- |
||||
|
* @Author: aBin |
||||
|
* @email: binbin0314@126.com |
||||
|
* @Date: 2021-07-19 14:22:54 |
||||
|
* @LastEditors: aBin |
||||
|
* @LastEditTime: 2021-07-19 17:01:58 |
||||
|
--> |
||||
|
<template> |
||||
|
<view> |
||||
|
<view class="bg-blue-400 h-8 pl-7 text-white" style="line-height: 2rem">辅助时间隔栏 </view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Barrier', |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.container { |
||||
|
height: 200vh; |
||||
|
margin-top: 150rpx; |
||||
|
} |
||||
|
</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:10:38 |
||||
|
--> |
||||
|
<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 h-16 ml-3.5"> |
||||
|
<view class="ml-4 h-16 shadow-lg"> |
||||
|
<u-card margin="0" :show-head="false" :show-foot="false" border-radius="25"> |
||||
|
<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,109 @@ |
|||||
|
<!-- |
||||
|
* @Author: aBin |
||||
|
* @email: binbin0314@126.com |
||||
|
* @Date: 2021-07-19 15:47:38 |
||||
|
* @LastEditors: aBin |
||||
|
* @LastEditTime: 2021-07-19 17:24:21 |
||||
|
--> |
||||
|
<template> |
||||
|
<view> |
||||
|
<view v-if="status === 0" class="rounded-full h-7 w-7 flex items-center justify-center text-blue-400"> |
||||
|
<u-circle-progress width="66" borderWidth="4" active-color="#2979ff" :percent="100"> |
||||
|
<view class="u-progress-content" @tap="changeStatus(0)"> |
||||
|
<view class="u-progress-dot"></view> |
||||
|
<text class="u-progress-info"> |
||||
|
<u-icon size="30" name="checkmark"></u-icon> |
||||
|
</text> |
||||
|
</view> |
||||
|
</u-circle-progress> |
||||
|
</view> |
||||
|
<view v-if="status === 1" class="rounded-full h-7 w-7 flex items-center justify-center text-black"> |
||||
|
<u-circle-progress width="66" borderWidth="6" active-color="#2979ff" :percent="80"> |
||||
|
<view class="u-progress-content" @tap="changeStatus(1)"> |
||||
|
<view class="u-progress-dot"></view> |
||||
|
<view class="u-progress-info"> |
||||
|
{{ time }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-circle-progress> |
||||
|
</view> |
||||
|
<view v-if="status === 2" class="rounded-full h-7 w-7 flex items-center justify-center text-gray-400"> |
||||
|
<u-circle-progress width="66" borderWidth="6" active-color="#2979ff" :percent="40"> |
||||
|
<view class="u-progress-content" @tap="changeStatus(2)"> |
||||
|
<view class="u-progress-dot"></view> |
||||
|
<text class="u-progress-info"> |
||||
|
<u-icon size="30" name="play-right-fill"></u-icon> |
||||
|
</text> |
||||
|
</view> |
||||
|
</u-circle-progress> |
||||
|
</view> |
||||
|
<view v-if="status === 3" class="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black"> |
||||
|
<u-circle-progress width="66" borderWidth="6" active-color="#2979ff" :percent="80"> |
||||
|
<view class="u-progress-content" @tap="changeStatus(3)"> |
||||
|
<view class="u-progress-dot"></view> |
||||
|
<text class="u-progress-info"> |
||||
|
<u-icon size="30" name="pause"></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