feat: 完善基础页面

This commit is contained in:
橙子
2023-03-10 22:02:19 +08:00
parent 30ab479315
commit 733ff867e9
385 changed files with 1815 additions and 45473 deletions

View File

@@ -3,16 +3,16 @@
<el-col :span="17">
<el-row class="left-div">
<el-col :span="24" >
<AvatarInfo :size="50"></AvatarInfo>
<el-col :span="24">
<AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>
<el-divider />
<h2>面试题挑战</h2>
文章详情
<el-divider class="tab-divider" />
<el-divider class="tab-divider" />
<el-space :size="10" :spacer="spacer">
<el-button icon="Pointer" text>
@@ -21,7 +21,7 @@
0</el-button>
<el-button icon="Share" text>
分享</el-button>
<el-button icon="Operation" text>
<el-button icon="Operation" text>
操作</el-button>
</el-space>
@@ -37,14 +37,54 @@
<el-col :span="7">
<el-row class="right-div">
<el-col :span="24">
<InfoCard class="art-info-right" header="文章信息" text="更多" hideDivider="true">
<template #content>
<div>
<ul class="art-info-ul">
<li>
分类 <span>文章</span>
</li>
标签 <el-tag type="success">文章</el-tag>
<el-tag type="info">资源</el-tag>
</ul>
</div>
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard class="art-info-right" header="目录" hideDivider="true">
<template #content>
<div>
<ul class="art-info-ul">
<li v-for="i in 6">
<el-button style="width: 100%;
justify-content: left" :key="你好" type="primary" text>{{i}}第一小结</el-button>
</li>
</ul>
</div>
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
</el-row>
</el-col>
@@ -53,9 +93,32 @@
<script setup>
import { h, ref } from 'vue'
import AvatarInfo from '@/components/AvatarInfo.vue'
import InfoCard from '../components/InfoCard.vue';
const spacer = h(ElDivider, { direction: 'vertical' })
const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
</script>
<style scoped >
.art-info-ul span {
margin-left: 1rem;
}
.art-info-ul .el-tag {
margin-left: 1rem;
}
.art-info-ul {
padding: 0;
}
li {
list-style: none;
margin-bottom: 1rem;
}
.art-info-right {
height: 100%;
}
.left-div .el-col {
background-color: #FFFFFF;
min-height: 12rem;
@@ -98,13 +161,14 @@ h2 {
padding: 1.4rem 1.4rem 0.5rem 1.4rem;
}
.el-space {
display: flex ;
vertical-align: top ;
justify-content: space-evenly ;
display: flex;
vertical-align: top;
justify-content: space-evenly;
}
.tab-divider
{
.tab-divider {
margin-bottom: 0.5rem;
}
</style>