twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-08 01:17:23 +08:00
Code Issues 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

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

@ -40,6 +40,7 @@ const activities = [
<span class="font-medium">时间线</span> <span class="font-medium">时间线</span>
</div> </div>
</template> </template>
<div class="flex">
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(activity, index) in activities" v-for="(activity, index) in activities"
@ -51,5 +52,49 @@ const activities = [
{{ activity.content }} {{ activity.content }}
</el-timeline-item> </el-timeline-item>
</el-timeline> </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> </el-card>
</template> </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>