feat: 添加文章页面

Yi.BBS.Vue3/src/assets/logo.svg

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

Yi.BBS.Vue3/src/components/AvatarInfo.vue

@@ -1,22 +1,36 @@
 <template >
 
 <div class="avatar">
-    <el-avatar :size="props.size" />
+    <div class="avatar-left">
-
+        <el-avatar :size="props.size" />
-
+         <div>
-    <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
 {

Yi.BBS.Vue3/src/components/ScrollbarInfo.vue

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

Yi.BBS.Vue3/src/layout/AppHeader.vue

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

Yi.BBS.Vue3/src/router/index.js

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

Yi.BBS.Vue3/src/views/AddArticle.vue

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

Yi.BBS.Vue3/src/views/Index.vue

@@ -1,16 +1,13 @@
-<template>
+<template >
-  <el-row :gutter="20" class="top-div">
+
+  <el-row :gutter="20" class="top-div" >
+
     <el-col :span="17">
+      <div class="scrollbar">
+        <ScrollbarInfo/>
+      </div>
    
      
-      <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="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>
+          <el-carousel trigger="click" height="150px">
-            等待入驻
+      <el-carousel-item v-for="item in 4" :key="item">
-          </template>
+        <h3 class="small justify-center" text="2xl">你好{{ item }}</h3>
-          </InfoCard>
+      </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
+.scrollbar
-{
+{ display: block;
-  font-size:small;
+  margin-bottom: 0.5rem;
- text-align: center;
- line-height: 2rem;
 }
-
-
 </style>