首页面调整

src/dashoo.cn/frontend_web/src/pages/login.vue

@@ -22,15 +22,15 @@
     </sticky>
 
     <div>
-      <el-menu class="el-menu-demo" mode="horizontal"> <!--@select="handleSelect"-->
+      <el-menu  :default-active="activeIndex" @select="handleSelect" mode="horizontal">
         <el-menu-item index="1">通知中心</el-menu-item>
-        <el-menu-item index="2">文档中心</el-menu-item>
-        <el-menu-item index="3">登录供方管理系统</el-menu-item>
-        <el-menu-item index="4">账户注册</el-menu-item>
+        <el-menu-item index="2">文件下载中心</el-menu-item>
+        <!--<el-menu-item index="3">登录供方管理系统</el-menu-item>
+        <el-menu-item index="4">账户注册</el-menu-item>-->
       </el-menu>
     </div>
 
-    <div class="back-width1" style="margin-top: 10px">
+    <!--<div class="back-width1" style="margin-top: 10px">
       <el-carousel>
         <el-carousel-item key="1">
           <img src="../assets/img/carousel/a.jpg" style="height: 100%; width: 100%">
@@ -42,11 +42,17 @@
           <img src="../assets/img/carousel/c.jpg" style="height: 100%; width: 100%">
         </el-carousel-item>
       </el-carousel>
-    </div>
+    </div>-->
 
     <div class="components-container home-wrapper">
-      <el-card style="width: 1400px; background-color: #F1F3F7">
-        <el-table fit :data="noticeList"  style="width: 100%; background-color: #F1F3F7" max-height="550" >
+
+      <el-card style="width: 1400px;" class="box-card" v-if="activeIndex == 1">
+        <div slot="header">
+          <span>
+            <i class="icon icon-table2"></i> 通知中心
+          </span>
+        </div>
+        <el-table fit :data="noticeList"  style="width: 100%; height: 100vh;">
           <el-table-column prop="Name" label="通知标题">
             <template slot-scope="scope">
               <i class="el-icon-caret-right"></i>
@@ -61,8 +67,13 @@
         </el-table>
       </el-card>
 
-      <el-card style="margin: 10px; width: 1400px">
-        <el-table fit :data="fileList" style="width: 100%;" height="550" @row-click="DownloadFile">
+      <el-card style="width: 1400px" class="box-card" v-if="activeIndex == 2">
+        <div slot="header">
+          <span>
+            <i class="icon icon-table2"></i> 文件下载中心
+          </span>
+        </div>
+        <el-table fit :data="fileList" style="width: 100%;  height: 100vh;" @row-click="DownloadFile">
           <el-table-column prop="Name" label="文件名">
             <template slot-scope="scope">
               <i class="el-icon-caret-right"></i>
@@ -80,7 +91,7 @@
 
     <div>
       <footer class="login-footer1" style="margin-top: 10px;">
-        <div class="home-wrapper" style="height: 30px; background-color: transparent; color:#A9A9A9; padding-top: 10px; text-align: right">
+        <div class="foot-wrapper" style="height: 30px; background-color: transparent; color:#A9A9A9; padding-top: 10px; text-align: right">
           ©大港油田信息中心 版权所有
         </div>
       </footer>
@@ -102,6 +113,7 @@ export default {
     return {
       noticeList: [], //通知列表
       fileList: [], //文档列表
+      activeIndex: '1',
     }
   },
 
@@ -111,6 +123,11 @@ export default {
   },
 
   methods: {
+    handleSelect (key, keyPath) {
+      if (key === '1' || key === '2') {
+        this.activeIndex = key
+      }
+    },
     //获取通知列表
     initNoticeListData() {
       let _this = this
@@ -169,7 +186,7 @@ export default {
   @import '../assets/styles/base/variables';
 
   .components-container div {
-    margin: 10px;
+    margin-top: 20px;
   }
 
   .top-wrapper {
@@ -180,6 +197,12 @@ export default {
     flex-direction: row;
   }
   .home-wrapper{
+    margin:0px auto;
+    width: 1400px;
+    flex-direction: column;
+  }
+
+  .foot-wrapper{
     margin:0px auto;
     width: 1400px;
     display: flex;