11 changed files with 233 additions and 14 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