|
@ -1,25 +1,34 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view> |
|
|
<view> |
|
|
<view class="flex items-center justify-center text-blue-400 rounded-full h-7 w-7" v-if="status === 0" @tap="changeStatus($event, 0)"> |
|
|
<view @tap="changeStatus($event, 0)" class="flex items-center justify-center text-blue-400 rounded-full h-7 w-7" v-if="status === 0"> |
|
|
<u-circle-progress :percent="100" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="4" width="66"> |
|
|
<view class="circular text-center"> |
|
|
|
|
|
<u-icon color="#2979ff" name="checkmark" size="30"></u-icon> |
|
|
|
|
|
</view> |
|
|
|
|
|
<!-- <u-circle-progress |
|
|
|
|
|
:percent="100" |
|
|
|
|
|
active-color="#2979ff" |
|
|
|
|
|
bg-color="rgba(255,255,255,0)" |
|
|
|
|
|
borderWidth="4" |
|
|
|
|
|
width="66" |
|
|
|
|
|
> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-info"> |
|
|
<view class="u-progress-info"> |
|
|
<u-icon name="checkmark" size="30"></u-icon> |
|
|
<u-icon name="checkmark" size="30"></u-icon> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</u-circle-progress> |
|
|
</u-circle-progress>--> |
|
|
</view> |
|
|
</view> |
|
|
<view class="flex items-center justify-center text-black rounded-full h-7 w-7" v-if="status === 1" @tap="changeStatus($event, 1)"> |
|
|
<view @tap="changeStatus($event, 1)" class="flex items-center justify-center text-black rounded-full h-7 w-7" v-if="status === 1"> |
|
|
<u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66"> |
|
|
<u-circle-progress :percent="80" active-color="#2979ff" bg-color="rgba(255,255,255,0)" borderWidth="6" width="66"> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-info">{{ time }}</view> |
|
|
<view class="u-progress-info">{{ time }}</view> |
|
|
</view> |
|
|
</view> |
|
|
</u-circle-progress> |
|
|
</u-circle-progress> |
|
|
</view> |
|
|
</view> |
|
|
<view class="flex items-center justify-center text-gray-400 rounded-full h-7 w-7" v-if="status === 2" @tap="changeStatus($event, 2)"> |
|
|
<view @tap="changeStatus($event, 2)" class="flex items-center justify-center text-gray-400 rounded-full h-7 w-7" v-if="status === 2"> |
|
|
<u-circle-progress :percent="40" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66"> |
|
|
<u-circle-progress :percent="40" active-color="#2979ff" bg-color="rgba(255,255,255,0)" borderWidth="6" width="66"> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-info"> |
|
|
<view class="u-progress-info"> |
|
@ -29,11 +38,11 @@ |
|
|
</u-circle-progress> |
|
|
</u-circle-progress> |
|
|
</view> |
|
|
</view> |
|
|
<view |
|
|
<view |
|
|
|
|
|
@tap="changeStatus($event, 3)" |
|
|
class="flex items-center justify-center font-black text-red-800 rounded-full h-7 w-7" |
|
|
class="flex items-center justify-center font-black text-red-800 rounded-full h-7 w-7" |
|
|
v-if="status === 3" |
|
|
v-if="status === 3" |
|
|
@tap="changeStatus($event, 3)" |
|
|
|
|
|
> |
|
|
> |
|
|
<u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66"> |
|
|
<u-circle-progress :percent="80" active-color="#2979ff" bg-color="rgba(255,255,255,0)" borderWidth="6" width="66"> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-info"> |
|
|
<view class="u-progress-info"> |
|
@ -96,3 +105,13 @@ export default { |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
.circular { |
|
|
|
|
|
width: 62rpx; |
|
|
|
|
|
height: 62rpx; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
border: 6rpx solid #2979ff; |
|
|
|
|
|
line-height: 56rpx; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|