faet: 添加bbs vue3前端

This commit is contained in:
橙子
2023-03-05 20:30:44 +08:00
parent a55cba4c1f
commit 2d328234a1
16 changed files with 556 additions and 213 deletions

View File

@@ -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>