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