forked from ccsens_fe/tall-mui-3
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.1 KiB
80 lines
2.1 KiB
<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>
|
|
|