feat: 完成首页界面搭建

Yi.BBS.Vue3/src/assets/main.css

@@ -1,4 +1,14 @@
 /* @import './base.css'; */
+/* #app {
+  margin: 0 auto;
+  font-weight: normal;
+} */
+body
+{
+  margin: 0 auto;
+  font-weight: normal;
+
+}
 /* 
 #app {
   max-width: 1280px;

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

@@ -1,21 +1,25 @@
 
-import { h } from 'vue';
-
 <template class="back-color"> 
-   <div class="body-main">   身体  <RouterView /></div>
+   <div class="body-main">   
+      <div class="content-main">
+      <RouterView />
+     </div>
+   
+   </div>
 
 
 </template>
 
 <style scoped>
-.back-color{
-
-
-}
 
 .body-main{
 min-height: 10rem;
 min-width: 10rem;
 background-color:#F0F2F5;
+
+}
+.content-main{
+   max-width:1100px;
+   margin: 0 auto;
 }
 </style>

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

@@ -15,4 +15,11 @@
 <script setup>
 import AppHeader from "./AppHeader.vue"
 import AppBody from "./AppBody.vue"
-</script>
+</script>
+
+<style scoped>
+.el-main{
+  margin: 0;
+padding: 0;
+}
+</style>

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

@@ -1,9 +1,71 @@
 <template>
-  <div class="about">
-    <h1>这个是首页</h1>
-  </div>
+  <el-row :gutter="20" class="top-div">
+    <el-col :span="18">
+      
+
+      <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-col>
+      </el-row>
+
+      </el-col>
+
+     <el-col :span="6">
+      <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>
 
-<style scoped>
+<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:#f21b1b;
+margin-bottom: 1rem;
+margin-right :10px;
+margin-left :10px;
+}
+.top-div
+{
+  padding-top: 1rem;
+}
 </style>