faet: 添加bbs vue3前端
This commit is contained in:
橙子
108
Yi.BBS.Vue3/src/views/Article.vue
Normal file
108
Yi.BBS.Vue3/src/views/Article.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-row :gutter="20" class="top-div">
|
||||
<el-col :span="17">
|
||||
|
||||
<el-row class="left-div">
|
||||
<el-col :span="24">
|
||||
作者信息
|
||||
<el-divider />
|
||||
<h2>面试题挑战</h2>
|
||||
文章详情
|
||||
|
||||
|
||||
<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-col>
|
||||
|
||||
<el-col :span="24">
|
||||
文章评论
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
|
||||
<el-col :span="7">
|
||||
<el-row class="right-div">
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script setup>
|
||||
import { h, ref } from 'vue'
|
||||
const spacer = h(ElDivider, { direction: 'vertical' })
|
||||
</script>
|
||||
<style scoped >
|
||||
.left-div .el-col {
|
||||
background-color: #FFFFFF;
|
||||
min-height: 12rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.right-div .el-col {
|
||||
background-color: #FFFFFF;
|
||||
min-height: 10rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.left-top-div .el-col {
|
||||
min-height: 2rem;
|
||||
background-color: #FAFAFA;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.top-div {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.left-top-div {
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: .5em;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.left-div .el-col {
|
||||
padding: 1.4rem 1.4rem 0.5rem 1.4rem;
|
||||
|
||||
}
|
||||
.el-space {
|
||||
display: flex ;
|
||||
vertical-align: top ;
|
||||
justify-content: space-evenly ;
|
||||
}
|
||||
.tab-divider
|
||||
{
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
117
Yi.BBS.Vue3/src/views/Discuss.vue
Normal file
117
Yi.BBS.Vue3/src/views/Discuss.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="body-div">
|
||||
<div class="header">
|
||||
<el-form :inline="true" >
|
||||
<el-form-item label="标签：" >
|
||||
<el-input placeholder="请输入标签"
|
||||
:suffix-icon="Calendar"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="内容：">
|
||||
<el-input
|
||||
placeholder="搜索当下分类下的内容"
|
||||
:suffix-icon="Calendar"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="form-right">
|
||||
<el-button>重置</el-button>
|
||||
<el-button type="primary">查询</el-button>
|
||||
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
展开
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="推荐" name="first"> </el-tab-pane>
|
||||
<el-tab-pane label="最新" name="second"> </el-tab-pane>
|
||||
<el-tab-pane label="最热" name="third"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="div-item" v-for="i in 10" >
|
||||
<DisscussCard/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import DisscussCard from '@/components/DisscussCard.vue'
|
||||
import { ref } from 'vue'
|
||||
const activeName = ref('first')
|
||||
|
||||
const handleClick = (tab, event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.body-div{
|
||||
min-height: 1000px;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header{
|
||||
background-color: #FFFFFF;
|
||||
padding: 1rem;
|
||||
margin: 2rem 0rem 1rem 0rem;
|
||||
}
|
||||
.header .el-input
|
||||
{
|
||||
|
||||
}
|
||||
.el-tabs
|
||||
{
|
||||
background-color: #FFFFFF;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.el-tabs >>> .el-tabs__header
|
||||
{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.div-item
|
||||
{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
--el-form-label-font-size: var(--el-font-size-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.el-form-item
|
||||
{padding-top: 0.8rem;}
|
||||
.form-right
|
||||
{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
.form-right .el-button
|
||||
{
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
.header .el-input
|
||||
{
|
||||
width:20rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,57 +1,91 @@
|
||||
<template>
|
||||
<el-row :gutter="20" class="top-div">
|
||||
<el-col :span="18">
|
||||
<el-col :span="17">
|
||||
|
||||
|
||||
<el-row class="left-top-div" :gutter="20" >
|
||||
<el-row class="left-top-div" :gutter="20">
|
||||
|
||||
|
||||
<el-col v-for="i in 9" :key="i" :span="2">
|
||||
最新
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
<el-row class="left-div" >
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<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>
|
||||
|
||||
<el-col :span="24" v-for="i in 10" :key="i">
|
||||
<DisscussCard/>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-col :span="7">
|
||||
<el-row class="right-div">
|
||||
<el-col :span="24">
|
||||
<el-col :span="24" >
|
||||
|
||||
<InfoCard header="其他" text="详情">
|
||||
<template #content>
|
||||
等待入驻
|
||||
</template>
|
||||
</InfoCard>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
|
||||
<el-col :span="24" >
|
||||
<InfoCard header="用户" text="详情">
|
||||
<template #content>
|
||||
你好啊。好兄弟
|
||||
</template>
|
||||
</InfoCard>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" >
|
||||
<InfoCard :items=items header="本月排行" text="更多">
|
||||
<template #item="temp">
|
||||
{{temp}}
|
||||
</template>
|
||||
</InfoCard>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="24" >
|
||||
<InfoCard :items=items header="推荐好友" text="更多">
|
||||
<template #item="temp">
|
||||
{{temp}}
|
||||
</template>
|
||||
</InfoCard>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DisscussCard from '@/components/DisscussCard.vue'
|
||||
import InfoCard from '@/components/InfoCard.vue'
|
||||
import PlateCard from '@/components/PlateCard.vue'
|
||||
const items=[{user:"用户1"},{user:"用户2"},{user:"用户3"}]
|
||||
</script>
|
||||
<style scoped >
|
||||
.plate
|
||||
{
|
||||
background: transparent !important;
|
||||
|
||||
}
|
||||
.left-div .el-col{
|
||||
background-color: #FFFFFF;
|
||||
min-height: 12rem;
|
||||
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.right-div .el-col
|
||||
{
|
||||
background-color:#FFFFFF;
|
||||
min-height: 10rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -59,13 +93,21 @@ margin-bottom: 1rem;
|
||||
.left-top-div .el-col
|
||||
{
|
||||
min-height: 2rem;
|
||||
background-color:#f21b1b;
|
||||
background-color:#FAFAFA;
|
||||
margin-bottom: 1rem;
|
||||
margin-right :10px;
|
||||
margin-left :10px;
|
||||
margin-left: 0.6rem;
|
||||
}
|
||||
.top-div
|
||||
{
|
||||
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.left-top-div
|
||||
{
|
||||
font-size:small;
|
||||
text-align: center;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user