更新

src/views/index0.vue

@@ -43,7 +43,7 @@
               <el-col :span="10" class="center animate__animated animate__fadeInUp">
                 <el-col :span="24" class="top">
                   <el-col :span="20" class="topTitle">
-                    <span>测试标题</span>
+                    <span>通知公告</span>
                   </el-col>
                   <el-col :span="4" class="topLink">
                     <el-link :underline="false">MORE</el-link>
@@ -63,7 +63,7 @@
               <el-col :span="6" class="right animate__animated animate__fadeInUp">
                 <el-col :span="24" class="top">
                   <el-col :span="20" class="topTitle">
-                    <span>测试标题</span>
+                    <span>通知公告</span>
                   </el-col>
                   <el-col :span="4" class="topLink">
                     <el-link :underline="false">MORE</el-link>
@@ -78,10 +78,80 @@
                 </el-col>
               </el-col>
             </el-col>
+            <el-col :span="24" class="mainTwo">
+              <el-col :span="8" class="left">
+                <el-col :span="24" class="top">
+                  <el-col :span="20" class="topTitle">
+                    <span>就业动态</span>
+                  </el-col>
+                  <el-col :span="4" class="topLink">
+                    <el-link :underline="false">MORE</el-link>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="info">
+                  <el-col :span="24" class="infoList" v-for="(item, index) in noticeList" :key="index">
+                    <el-col :span="19" class="title textOver">
+                      {{ item.title }}
+                    </el-col>
+                    <el-col :span="5" class="date">
+                      {{ item.date }}
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="10" class="center">
+                <el-col :span="24" class="top">
+                  <el-col :span="20" class="topTitle">
+                    <span>高校动态</span>
+                  </el-col>
+                  <el-col :span="4" class="topLink">
+                    <el-link :underline="false">MORE</el-link>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="info">
+                  <el-col :span="24" class="infoList" v-for="(item, index) in noticeList" :key="index">
+                    <el-col :span="19" class="title textOver">
+                      {{ item.title }}
+                    </el-col>
+                    <el-col :span="5" class="date">
+                      {{ item.date }}
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="6" class="right">
+                <el-col :span="24" class="top">
+                  <el-col :span="20" class="topTitle">
+                    <span>快速导航</span>
+                  </el-col>
+                  <el-col :span="4" class="topLink">
+                    <el-link :underline="false">MORE</el-link>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="info">快速导航</el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="mainThree">
+              1
+            </el-col>
+            <el-col :span="24" class="mainThree">
+              1
+            </el-col>
+            <el-col :span="24" class="mainThree">
+              1
+            </el-col>
+            <el-col :span="24" class="mainThree">
+              1
+            </el-col>
           </div>
         </el-col>
         <el-col :span="24" class="foot">
-          底部
+          <div class="w_1200">
+            <el-col :span="24" class="content">
+              {{ footInfo.content }}
+            </el-col>
+            <el-image :src="footInfo.sydw"></el-image>
+          </div>
         </el-col>
       </el-col>
     </el-row>
@@ -145,25 +215,6 @@ export default {
         },
       ],
       // eslint-disable-next-line vue/no-dupe-keys
-      noticeList1: [
-        {
-          title: '55555555测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题',
-          date: '2020-10-10',
-        },
-        {
-          title: '55555555测试标题',
-          date: '2020-10-10',
-        },
-        {
-          title: '55555555测试标题',
-          date: '2020-10-10',
-        },
-        {
-          title: '55555555测试标题',
-          date: '2020-10-10',
-        },
-      ],
-      // eslint-disable-next-line vue/no-dupe-keys
       newsList: [
         {
           title: '哈哈测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题',
@@ -178,21 +229,11 @@ export default {
           title: '测试标题',
         },
       ],
-      // eslint-disable-next-line vue/no-dupe-keys
-      newsList1: [
-        {
-          title: '添加标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题',
-        },
-        {
-          title: '添加测试标题',
-        },
-        {
-          title: '添加测试标题',
-        },
-        {
-          title: '添加测试标题',
-        },
-      ],
+      // 底部信息
+      footInfo: {
+        content: '办公地址：长春市经济技术开发区金川街151号，吉林省高等学校毕业生就业指导中心2楼一站式办公大厅，邮编：130033。',
+        sydw: require('@a/sydw.png'),
+      },
     };
   },
   created() {},
@@ -226,7 +267,6 @@ export default {
   }
   .main {
     margin: 10px 0 0 0;
-    border-bottom: 1px solid red;
     .mainOne {
       margin: 0 0 10px 0;
       height: 300px;
@@ -339,9 +379,152 @@ export default {
         }
       }
     }
+    .mainTwo {
+      margin: 0 0 10px 0;
+      height: 400px;
+      border-bottom: 1px solid red;
+      .left {
+        height: 400px;
+        background-color: #fff;
+        .top {
+          height: 39px;
+          line-height: 39px;
+          border-bottom: 1px solid #176ebb;
+          .topTitle {
+            span {
+              text-align: center;
+              display: inline-block;
+              width: 110px;
+              color: #fff;
+              font-size: 16px;
+              background-color: #176ebb;
+            }
+          }
+          .topLink {
+            .el-link {
+              width: 100%;
+              text-align: center;
+            }
+          }
+        }
+        .info {
+          padding: 0 10px;
+          .infoList {
+            height: 43px;
+            line-height: 43px;
+            .title {
+              font-size: 16px;
+              text-align: left;
+            }
+            .date {
+              font-size: 16px;
+              text-align: center;
+            }
+          }
+          .infoList:hover {
+            cursor: pointer;
+            .title {
+              color: #176ebb;
+            }
+            .date {
+              color: #176ebb;
+            }
+          }
+        }
+      }
+      .center {
+        height: 400px;
+        background-color: #fff;
+        .top {
+          height: 39px;
+          line-height: 39px;
+          border-bottom: 1px solid #176ebb;
+          .topTitle {
+            span {
+              text-align: center;
+              display: inline-block;
+              width: 110px;
+              color: #fff;
+              font-size: 16px;
+              background-color: #176ebb;
+            }
+          }
+          .topLink {
+            .el-link {
+              width: 100%;
+              text-align: center;
+            }
+          }
+        }
+        .info {
+          padding: 0 10px;
+          .infoList {
+            height: 43px;
+            line-height: 43px;
+            .title {
+              font-size: 16px;
+              text-align: left;
+            }
+            .date {
+              font-size: 16px;
+              text-align: center;
+            }
+          }
+          .infoList:hover {
+            cursor: pointer;
+            .title {
+              color: #176ebb;
+            }
+            .date {
+              color: #176ebb;
+            }
+          }
+        }
+      }
+      .right {
+        height: 400px;
+        background-color: #fff;
+        .top {
+          height: 39px;
+          line-height: 39px;
+          border-bottom: 1px solid #176ebb;
+          .topTitle {
+            span {
+              text-align: center;
+              display: inline-block;
+              width: 110px;
+              color: #fff;
+              font-size: 16px;
+              background-color: #176ebb;
+            }
+          }
+          .topLink {
+            .el-link {
+              width: 100%;
+              text-align: center;
+            }
+          }
+        }
+        .info {
+          padding: 0 10px;
+        }
+      }
+    }
+    .mainThree {
+      height: 300px;
+      margin: 0 0 10px 0;
+      background-color: #fff;
+    }
   }
   .foot {
-    border-bottom: 1px solid red;
+    min-height: 120px;
+    background: rgb(4, 87, 199);
+    text-align: center;
+    .content {
+      color: #fff;
+      font-size: 14px;
+      padding: 15px 0;
+    }
   }
 }
 /deep/.el-menu--horizontal > .el-menu-item.is-active {