test/vue-pure-admin2
1
0
Fork 0
mirror of https://gitee.com/yiming_chang/vue-pure-admin.git synced 2024-12-11 00:38:25 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

perf: timeline

Browse Source
This commit is contained in:
xiaoxian521 2022-03-05 22:48:46 +08:00
parent 7f5aeed4d1
commit 849b46533d
1 changed files with 56 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/able/timeline.vue
View File

@ -40,16 +40,61 @@ const activities = [
<span class="font-medium">时间线</span>
</div>
</template>
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:color="activity.color"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
<div class="flex">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:color="activity.color"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
<el-timeline class="pl-40">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:color="activity.color"
:timestamp="activity.timestamp"
placement="bottom"
>
<div class="message">
vue-pure-admin是基于Vue3.0+TypeScript+Vite2.0+Element-Plus编写的一套后台管理系统
</div>
</el-timeline-item>
</el-timeline>
</div>
</el-card>
</template>
<style scoped>
.message {
width: 200px;
background-color: var(--el-color-primary);
border-color: var(--el-color-primary);
color: #fff;
line-height: 18px;
padding: 5px 12px 5px 12px;
box-sizing: border-box;
border-radius: 6px;
position: relative;
word-break: break-all;
}
.message::after {
content: "";
position: absolute;
top: 8px;
left: -10px;
width: 0;
height: 0;
overflow: hidden;
border-color: var(--el-color-primary) transparent transparent;
border-style: solid dashed dashed;
border-width: 10px;
}
</style>