feat: 完成字典模块改造，前端完成首页界面
This commit is contained in:
橙子
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<div class="body-div">
|
||||
<el-form label-width="120px" label-position="left">
|
||||
|
||||
@@ -29,6 +30,7 @@
|
||||
<el-form-item > <el-button class="submit-btn" type="primary">提交</el-button></el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import MavonEdit from '@/components/MavonEdit.vue'
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="body-div">
|
||||
<div style="width: 1200px;" class="body-div">
|
||||
<div class="header">
|
||||
<el-form :inline="true" >
|
||||
<el-form-item label="标签：" >
|
||||
@@ -73,7 +73,7 @@ min-height: 1000px;
|
||||
.header{
|
||||
background-color: #FFFFFF;
|
||||
padding: 1rem;
|
||||
margin: 2rem 0rem 1rem 0rem;
|
||||
margin: 1rem 0rem ;
|
||||
}
|
||||
.header .el-input
|
||||
{
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template >
|
||||
<div style="width: 1200px;">
|
||||
<el-row :gutter="20" class="top-div" >
|
||||
|
||||
<el-col :span="17">
|
||||
@@ -9,12 +10,12 @@
|
||||
|
||||
<el-row class="left-div">
|
||||
|
||||
<el-col :span="8" v-for="i in 6" class="plate" :style="{ 'padding-left': i%3==1?0:0.2+'rem','padding-right': i%3==0?0:0.2+'rem'}" >
|
||||
<PlateCard/>
|
||||
<el-col :span="8" v-for="i in plateList" class="plate" :style="{ 'padding-left': i%3==1?0:0.2+'rem','padding-right': i%3==0?0:0.2+'rem'}" >
|
||||
<PlateCard :name="i.name" :introduction="i.introduction"/>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" v-for="i in 10" :key="i">
|
||||
<DisscussCard/>
|
||||
<el-col :span="24" v-for="i in discussList">
|
||||
<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime"/>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -74,10 +75,14 @@
|
||||
</template>
|
||||
</InfoCard>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style=" background: transparent;">
|
||||
<BottomInfo/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -86,7 +91,24 @@ import InfoCard from '@/components/InfoCard.vue'
|
||||
import PlateCard from '@/components/PlateCard.vue'
|
||||
import ScrollbarInfo from '@/components/ScrollbarInfo.vue'
|
||||
import AvatarInfo from '@/components/AvatarInfo.vue'
|
||||
const items=[{user:"用户1"},{user:"用户2"},{user:"用户3"}]
|
||||
import BottomInfo from '@/components/BottomInfo.vue'
|
||||
|
||||
import {getList} from '@/apis/plateApi.js'
|
||||
import {getList as discussGetList} from '@/apis/discussApi.js'
|
||||
import { onMounted, ref } from 'vue'
|
||||
var plateList=ref([]);
|
||||
var discussList=ref([]);
|
||||
const items=[{user:"用户1"},{user:"用户2"},{user:"用户3"}]
|
||||
|
||||
onMounted(async()=>{
|
||||
const response= await getList();
|
||||
plateList.value= response.items;
|
||||
const discussReponse=await discussGetList();
|
||||
discussList.value= discussReponse.items;
|
||||
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped >
|
||||
.introduce
|
||||
|
||||
Reference in New Issue
Block a user