首页面设计

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

@@ -23,14 +23,13 @@
 
     <div>
       <el-menu  :default-active="activeIndex" @select="handleSelect" mode="horizontal">
+        <el-menu-item index="0">首页</el-menu-item>
         <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>
     </div>
 
-    <!--<div class="back-width1" style="margin-top: 10px">
+    <div class="back-width1" style="margin-top: 10px" v-if="activeIndex==0">
       <el-carousel>
         <el-carousel-item key="1">
           <img src="../assets/img/carousel/a.jpg" style="height: 100%; width: 100%">
@@ -42,7 +41,148 @@
           <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" v-if="activeIndex==0">
+      <el-row>
+        <el-col :span="24">
+          <span style="color: black; font-size: large; font-weight: bold; padding-top: 20px">| 功能介绍</span>
+        </el-col>
+        <el-col :span="24">
+          <span style="color: black; font-size: x-small; padding-top: 20px">| 大港油田供方管理信息系统功能介绍</span>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="margin-top: 0px">
+        <el-col :span="12">
+          <el-card :body-style="{ padding: '0px' }" style="margin-top: 0px">
+            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy9.png" class="image">
+            <div style="padding: 14px;">
+              <span style="font-weight: bold">准入申请</span>
+              <div class="bottom clearfix">
+                <span>物资类、技术服务类和基建类的准入申请</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card :body-style="{ padding: '0px' }"  style="margin-top: 0px">
+            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy7.png" class="image">
+            <div style="padding: 14px;">
+              <span style="font-weight: bold">增项申请</span>
+              <div class="bottom clearfix">
+                <span>物资类、技术服务类和基建类的增项申请</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card :body-style="{ padding: '0px' }">
+            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy6.png" class="image">
+            <div style="padding: 14px;">
+              <span style="font-weight: bold">年审</span>
+              <div class="bottom clearfix">
+                <span>物资类、技术服务类和基建类的年审</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card :body-style="{ padding: '0px' }" >
+            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy2.png" class="image">
+            <div style="padding: 14px;">
+              <span style="font-weight: bold">资质变更</span>
+              <div class="bottom clearfix">
+                <span>已入网企业的资质变更</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card :body-style="{ padding: '0px' }" >
+            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy7.png" class="image">
+            <div style="padding: 14px;">
+              <span style="font-weight: bold">信息变更</span>
+              <div class="bottom clearfix">
+                <span>已入网企业的信息变更</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card :body-style="{ padding: '0px' }" >
+            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy4.png" class="image">
+            <div style="padding: 14px;">
+              <span style="font-weight: bold">在线缴费</span>
+              <div class="bottom clearfix">
+                <span>通过此信息可在线缴费</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
+            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy5.png" class="image">
+            <div style="padding: 14px;">
+              <span style="font-weight: bold">业务查询</span>
+              <div class="bottom clearfix">
+                <span>报表及图表的查询功能</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
+            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy6.png" class="image">
+            <div style="padding: 14px;">
+              <span style="font-weight: bold">资质管理</span>
+              <div class="bottom clearfix">
+                <span>资质管理的统一管理功能</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="components-container home-wrapper" v-if="activeIndex==1">
+      <el-table :data="noticeList"  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>
+            <a style="margin-left: 5px">{{ scope.row.Name }}</a>
+          </template>
+        </el-table-column>
+        <el-table-column prop="CreateOn" label="时间" width="141">
+          <template slot-scope="scope">
+            {{ jstimehandle(scope.row.CreateOn+'') }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="components-container home-wrapper" v-if="activeIndex==2">
+      <el-table :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>
+            <a style="margin-left: 5px">{{ scope.row.Name }}</a>
+          </template>
+        </el-table-column>
+        <el-table-column prop="CreateOn" label="时间" width="141">
+          <template slot-scope="scope">
+            {{ jstimehandle(scope.row.CreateOn+'') }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--<div>
+      <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>
+        &lt;!&ndash;<el-menu-item index="3">登录供方管理系统</el-menu-item>
+        <el-menu-item index="4">账户注册</el-menu-item>&ndash;&gt;
+      </el-menu>
+    </div>
 
     <div class="components-container home-wrapper">
 
@@ -87,7 +227,7 @@
           </el-table-column>
         </el-table>
       </el-card>
-    </div>
+      <div>-->
 
     <div>
       <footer class="login-footer1" style="margin-top: 10px;">
@@ -108,12 +248,15 @@ export default {
     return 'site'
   },
   name: 'StickyDemo',
-  components: { Sticky },
+  components: {
+    Sticky
+  },
   data () {
     return {
       noticeList: [], //通知列表
       fileList: [], //文档列表
-      activeIndex: '1',
+      activeIndex: '0',
+      activeName: 'first',
     }
   },
 
@@ -124,7 +267,7 @@ export default {
 
   methods: {
     handleSelect (key, keyPath) {
-      if (key === '1' || key === '2') {
+      if (key === '0' || key === '1' || key === '2') {
         this.activeIndex = key
       }
     },
@@ -231,4 +374,37 @@ export default {
     bottom: 10px;
     width: 100%;
   }
+
+
+  /*-----------*/
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+
+  .clearfix:after {
+    clear: both
+  }
 </style>
+