xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加文章页面

Browse Source
This commit is contained in:
橙子
2023-03-07 00:02:48 +08:00
parent 6d3edff5b6
commit 9d3559cddb
9 changed files with 129 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Yi.BBS.Vue3/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
Yi.BBS.Vue3/src/assets/logo.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

1
Yi.BBS.Vue3/src/assets/logo.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 276 B

22
Yi.BBS.Vue3/src/components/AvatarInfo.vue
View File

@@ -1,22 +1,36 @@
<template >
<div class="avatar">
<el-avatar :size="props.size" />
<div>
<div class="avatar-left">
<el-avatar :size="props.size" />
<div>
<div> 大白子</div>
<div class="remarks"> 2022-03-05 23:33:20</div>
</div>
</div>
<el-button type="primary" size="default" icon="Plus" >关注</el-button>
</div>
</template>
<script setup>
const props = defineProps(['size'])
</script>
<style scoped>
.el-icon
{
color: white;
}
.avatar
{
display: flex;
justify-content:space-between;
}
.avatar-left
{
display: flex;
justify-content:flex-start;
}
.el-avatar
{

28
Yi.BBS.Vue3/src/components/ScrollbarInfo.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<el-scrollbar>
<div class="scrollbar-flex-content">
<p v-for="item in 50" :key="item" class="scrollbar-item">
推荐{{ item }}
</p>
</div>
</el-scrollbar>
</template>
<style scoped>
.scrollbar-flex-content {
display: flex;
}
.scrollbar-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 2.6rem;
margin: 0 0.2rem ;
text-align: center;
border-radius: 4px;
background-color:#FAFAFA;
font-size: 14px;
}
</style>

13
Yi.BBS.Vue3/src/layout/AppHeader.vue
View File

@@ -6,7 +6,8 @@
@select="handleSelect"
>
<RouterLink to="/index"> <el-menu-item class="logo" @click="enterIndex"> Logo</el-menu-item></RouterLink>
<RouterLink to="/index"> <el-menu-item class="logo" @click="enterIndex">
<img class="img-icon" style="width: 35px; height: 35px" src="@/assets/logo.ico" /> 白了又白</el-menu-item></RouterLink>
<RouterLink to="/index"><el-menu-item index="1" @click="enterIndex">主页</el-menu-item></RouterLink>
<el-sub-menu index="2">
<template #title>学习</template>
@@ -30,9 +31,9 @@
<div class="flex-grow" />
<RouterLink to="/discuss"> <el-menu-item index="5">搜索</el-menu-item></RouterLink>
<el-menu-item index="6">学习</el-menu-item>
<RouterLink to="/addArt"><el-menu-item index="6">分享</el-menu-item></RouterLink>
<el-sub-menu index="7">
<template #title>分享</template>
<template #title>学习</template>
<el-menu-item index="7-1">item one</el-menu-item>
<el-menu-item index="7-2">item two</el-menu-item>
<el-menu-item index="7-3">item three</el-menu-item>
@@ -53,8 +54,14 @@ const handleSelect = (key, keyPath) => {
.logo{
min-width: 14rem;
font-size: large;
font-weight: 600;
}
.flex-grow {
flex-grow: 1;
}
.img-icon
{
margin-right: 0.5rem;
}
</style>

5
Yi.BBS.Vue3/src/router/index.js
View File

@@ -25,6 +25,11 @@ const router = createRouter({
path: '/discuss',
component: () => import('../views/Discuss.vue')
},
{
name:'addArt',
path:'addArt',
component:()=>import('../views/AddArticle.vue')
}
]
},
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },

39
Yi.BBS.Vue3/src/views/AddArticle.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="body-div">
<el-form label-width="120px" label-position="left">
<el-form-item label="分类：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item label="标题：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item label="描述：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item label="内容：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item label="分面：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item label="标签：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item > <el-button class="submit-btn" type="primary">提交</el-button></el-form-item>
</el-form>
</div>
</template>
<style scoped>
.submit-btn
{
width: 40%;
}
.body-div
{
min-height: 1000px;
background-color: #fff;
margin: 1.5rem;
padding: 1.5rem;
}
</style>

61
Yi.BBS.Vue3/src/views/Index.vue
View File

@@ -1,16 +1,13 @@
<template>
<el-row :gutter="20" class="top-div">
<template >
<el-row :gutter="20" class="top-div" >
<el-col :span="17">
<el-row class="left-top-div" :gutter="20">
<div class="scrollbar">
<ScrollbarInfo/>
</div>
<el-col v-for="i in 9" :key="i" :span="2">
最新
</el-col>
</el-row>
<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'}" >
@@ -29,11 +26,13 @@
<el-row class="right-div">
<el-col :span="24" >
<InfoCard header="其他" text="详情">
<template #content>
等待入驻
</template>
</InfoCard>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small justify-center" text="2xl">你好{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</el-col>
<el-col :span="24" >
@@ -60,16 +59,24 @@
</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'
import ScrollbarInfo from '@/components/ScrollbarInfo.vue'
const items=[{user:"用户1"},{user:"用户2"},{user:"用户3"}]
</script>
<style scoped >
@@ -90,24 +97,14 @@ margin-bottom: 1rem;
}
.left-top-div .el-col
{
min-height: 2rem;
background-color:#FAFAFA;
margin-bottom: 1rem;
margin-left: 0.6rem;
}
.top-div
{
padding-top: 1rem;
padding-top: 0.5rem;
}
.left-top-div
{
font-size:small;
text-align: center;
line-height: 2rem;
.scrollbar
{ display: block;
margin-bottom: 0.5rem;
}
</style>