feat: 完成字典模块改造，前端完成首页界面
This commit is contained in:
橙子
@@ -1,94 +1,114 @@
|
||||
<template>
|
||||
<el-row :gutter="20" class="top-div">
|
||||
<el-col :span="17">
|
||||
<div style="width: 90%;min-width: 1200px;">
|
||||
<!-- <div style="width: 1200px;"> -->
|
||||
<el-row :gutter="20" class="top-div">
|
||||
|
||||
<el-row class="left-div">
|
||||
<el-col :span="24">
|
||||
<AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>
|
||||
<el-col :span="5">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
|
||||
<el-divider />
|
||||
<h2>面试题挑战</h2>
|
||||
文章详情
|
||||
<InfoCard class="art-info-left" header="主题信息" text="展开" hideDivider="true">
|
||||
<template #content>
|
||||
<el-tree :data="data" @node-click="handleNodeClick" />
|
||||
</template>
|
||||
</InfoCard>
|
||||
<el-col :span="24">
|
||||
<InfoCard :items=items header="推荐好友" text="更多">
|
||||
<template #item="temp">
|
||||
<AvatarInfo />
|
||||
</template>
|
||||
</InfoCard>
|
||||
</el-col>
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
|
||||
<el-col :span="14">
|
||||
|
||||
<el-row class="left-div">
|
||||
<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>
|
||||
4</el-button>
|
||||
<el-button icon="Star" text>
|
||||
0</el-button>
|
||||
<el-button icon="Share" text>
|
||||
分享</el-button>
|
||||
<el-button icon="Operation" text>
|
||||
操作</el-button>
|
||||
</el-space>
|
||||
<el-space :size="10" :spacer="spacer">
|
||||
<el-button icon="Pointer" text>
|
||||
4</el-button>
|
||||
<el-button icon="Star" text>
|
||||
0</el-button>
|
||||
<el-button icon="Share" text>
|
||||
分享</el-button>
|
||||
<el-button icon="Operation" text>
|
||||
操作</el-button>
|
||||
</el-space>
|
||||
|
||||
</el-col>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
文章评论
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="24">
|
||||
文章评论
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
</el-col>
|
||||
|
||||
<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>
|
||||
</el-row>
|
||||
<el-col :span="5">
|
||||
<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-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { h, ref } from 'vue'
|
||||
@@ -96,8 +116,86 @@ 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" }]
|
||||
const handleNodeClick = (data) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
label: 'HTML',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'HTML5',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 2-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 2-1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level two 2-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 2-2-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'XHTML',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 3-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 3-1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level two 3-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 3-2-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Xcss',
|
||||
},
|
||||
{
|
||||
label: 'CSS3',
|
||||
},
|
||||
{
|
||||
label: 'Bootstrap 5',
|
||||
},
|
||||
{
|
||||
label: 'Tcp/ip',
|
||||
}
|
||||
]
|
||||
|
||||
</script>
|
||||
<style scoped >
|
||||
.art-info-left {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.art-info-ul span {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
@@ -108,11 +206,12 @@ const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
|
||||
|
||||
.art-info-ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.art-info-right {
|
||||
|
||||
Reference in New Issue
Block a user