首页优化

src/common/less/public.less

@@ -143,4 +143,11 @@ i {
 }
 .el-table th{
   background-color: #f8f8f9;
+}
+
+.fl{
+  float: left;
+}
+.fr{
+  float: right;
 }

src/components/home/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <div class="user">
+      <span class="title1 fl">投 诉 管 理 系 统</span>
       <div class="content">
         <div class="userImg">
           <i class="el-icon-s-custom"></i>
@@ -8,22 +9,33 @@
         <span class="name">{{ userInfo.userName }}</span>
       </div>
     </div>
-    <div class="title">投 诉 管 理 系 统</div>
+
     <div class="list">
-      <el-row>
-        <el-col
-          :span="6"
-          v-for="(item, index) in userInfo.list"
-          :key="index"
-          class="content pointer"
-        >
-          <div class="img" @click="jump(item)">
-            <!-- <i class="el-icon-s-tools"></i> -->
-            <img :src="item.webIcon" alt="" style="width: 30px; height: 30px" />
-          </div>
-          <span class="name" @click="jump(item)">{{ item.name }}</span>
-        </el-col>
-      </el-row>
+      <div class="fl qxContent">
+        <el-row v-for="(item, index) in userInfo.functions" :key="index">
+          <el-col :span="24" class="qxTitle" :style="index == 0? 'margin-top: 0px;':''">{{ item.systemName }}</el-col>
+          <el-col :span="6" v-for="(it,ind) in item.list" :key="ind">
+            <div  class="content pointer">
+              <div class="img" @click="jump(it)">
+                <!-- <i class="el-icon-s-tools"></i> -->
+                <!-- <img :src="item.webIcon" alt="" style="width: 30px; height: 30px" /> -->
+                <div :class="'icon icon' + it.id"></div>
+              </div>
+              <span class="name" @click="jump(it)">{{ it.name }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="fl noticesContent">
+        <el-row>
+          <el-col :span="24" class="noticestitle">公告</el-col>
+          <el-col :span="24" v-for="(item,index) in userInfo.notices" :key="index" class="noticesList pointer">
+            <span class="yuan fl"></span>
+            <span class="fl font">{{ item.content }}</span>
+            <span class="fr time">{{ item.createTime }}</span>
+          </el-col>
+        </el-row>
+      </div>
     </div>
   </div>
 </template>
@@ -69,15 +81,14 @@ export default {
               path: val.url,
             });
             window.open(routeUrl.href, "_blank");
-          }else{
+          } else {
             this.$message({
-                type: "error",
-                message: res.message,
-              });
-
+              type: "error",
+              message: res.message,
+            });
           }
         });
-      }else{
+      } else {
         // let routeUrl = this.$router.resolve({
         //   path: val.url,
         // });
@@ -95,6 +106,11 @@ export default {
   height: 50px;
   line-height: 50px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  .title1 {
+    font-size: 20px;
+    margin-left: 30px;
+    color: #409eff;
+  }
   .content {
     float: right;
     margin-right: 30px;
@@ -119,10 +135,31 @@ export default {
 }
 .list {
   width: 1000px;
-  margin: 0 auto;
+  margin: 40px auto;
+  height: auto;
+  .qxContent{
+    width: 790px;
+    // padding:10px;
+    // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    .qxTitle{
+      height: 16px;
+      line-height: 16px;
+      font-size: 16px;
+      font-weight: bold;
+      border-left: 5px solid #606266;
+      padding-left: 10px;
+      margin-top: 20px;
+      color: #606266;
+    }
+  }
   .content {
-    height: 80px;
-    line-height: 80px;
+    width: 85%;
+    height: 50px;
+    line-height: 50px;
+    margin-top: 20px;
+    padding-left: 10px;
+    border-radius: 10px;
+    border: 1px solid #ebeef5;
     .img {
       font-size: 30px;
       float: left;
@@ -133,6 +170,83 @@ export default {
       margin-left: 10px;
     }
   }
+  .content:hover {
+    border: 1px solid #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+  }
+  .noticesContent{
+    width: 200px;
+    margin-left: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    .noticestitle {
+      height: 40px;
+      line-height: 40px;
+      background-color: #409eff;
+      color: #fff;
+      padding-left: 10px;
+      font-size: 16px;
+    }
+    .noticesList{
+      height: 30px;
+      line-height: 30px;
+      padding: 0 10px;
+      .yuan{
+        width: 4px;
+        height: 4px;
+        display: inline-block;
+        border-radius: 2px;
+        background-color: #409eff;
+        margin-top: 14px;
+        margin-right: 5px;
+      }
+      .time {
+        font-size: 12px;
+      }
+    }
+    .noticesList:hover .font{
+      font-weight: bold;
+    }
+  }
+}
+
+.icon-1 {
+  background: url(../../common/images/icon8.png) 0 0 no-repeat;
+}
+.icon1 {
+  background: url(../../common/images/icon1.png) 0 0 no-repeat;
+}
+.icon2 {
+  background: url(../../common/images/icon2.png) 0 0 no-repeat;
+}
+.icon3 {
+  background: url(../../common/images/icon3.png) 0 0 no-repeat;
+}
+.icon4 {
+  background: url(../../common/images/icon4.png) 0 0 no-repeat;
+}
+.icon5 {
+  background: url(../../common/images/icon5.png) 0 0 no-repeat;
+}
+.icon6 {
+  background: url(../../common/images/icon6.png) 0 0 no-repeat;
+}
+.icon7 {
+  background: url(../../common/images/icon7.png) 0 0 no-repeat;
+}
+.icon8 {
+  background: url(../../common/images/icon8.png) 0 0 no-repeat;
+}
+.icon9 {
+  background: url(../../common/images/icon9.png) 0 0 no-repeat;
+}
+.icon10 {
+  background: url(../../common/images/icon10.png) 0 0 no-repeat;
+}
+.icon {
+  width: 30px;
+  height: 30px;
+  background-size: 100% 100%;
+  margin-top: 11px;
 }
 </style>