forked from ccsens_fe/tall-mui-3
8 changed files with 325 additions and 84 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 { status: 0 }; |
|||
}, |
|||
}; |
|||
</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,85 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 10:52:05 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-19 11:09:23 |
|||
--> |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="rolebar"> |
|||
<view> |
|||
<view class="container u-skeleton" v-if="roles || roles.length"> |
|||
<!-- <u-tag |
|||
:key="role.id" |
|||
:mode="currentRoleIndex === index ? 'dark' : 'light'" |
|||
:text="role.value" |
|||
:type="role.isMine === 1 ? 'warning' : role.isMine === 0 && currentRoleIndex === index ? 'primary' : ''" |
|||
@tap="handleClickRole(index)" |
|||
class="u-m-15" |
|||
shape="circle" |
|||
v-for="(role, index) in roles" |
|||
></u-tag>--> |
|||
|
|||
<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" |
|||
:current="currentRoleIndex" |
|||
:list="roles" |
|||
@change="handleClickRole" |
|||
class="u-skeleton-rect" |
|||
ref="tabs" |
|||
> |
|||
<template v-slot:name> |
|||
<span :key="role.id" v-for="role in roles">{{ role.value }}</span> |
|||
</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: true, // 是否显示骨架屏组件 |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickRole(index) { |
|||
console.log('index: ', index); |
|||
this.currentRoleIndex = index; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
padding: 20rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue