ソースを参照

modify header_icon

Bella 2 年 前
コミット
261baba16b

BIN
src/assets/home/header_alert.png


BIN
src/assets/home/header_manage.png


+ 57 - 7
src/components/layout/Header.vue

@@ -5,7 +5,7 @@
         <div class="logo"></div>
         <div class="title">浦 东 新 区 资 源 环 境 智 慧 审 计 平 台</div>
       </el-col>
-      <el-col :span="13">
+      <el-col :span="12">
         <el-menu
           :default-active="activeIndex"
           class="el-menu-demo"
@@ -31,8 +31,15 @@
           </el-submenu>
         </el-menu>
       </el-col>
-      <el-col :span="2">
-        <div class="user">user001</div>
+      <el-col :span="3">
+        <div class="user">
+          <div class="manage-icon"></div>
+          <div class="alert-icon"></div>
+          <div class="inner-user">
+            <div class="admin-icon"></div>
+            <div class="text">user</div>
+          </div>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -86,16 +93,16 @@ export default {
   color: #ffffff;
   .logo {
     position: relative;
-    left:50px;
-    top:15px;
+    left: 50px;
+    top: 15px;
     width: 30px;
     height: 30px;
     background: url("../../assets/home/header_title_icon.png") no-repeat center;
   }
   .title {
     position: absolute;
-    left:50px;
-    top:0;
+    left: 50px;
+    top: 0;
     line-height: 60px;
     font-size: 28px;
     text-indent: 50px;
@@ -137,5 +144,48 @@ export default {
   line-height: 60px;
   font-size: 20px;
   cursor: pointer;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .manage-icon {
+    width: 28px;
+    height: 28px;
+    position: absolute;
+    left: 5px;
+    top: 16px;
+    background: url("../../assets/home/header_manage.png") no-repeat center;
+  }
+  .alert-icon {
+    width: 26px;
+    height: 30px;
+    position: absolute;
+    left: 80px;
+    top: 14px;
+    background: url("../../assets/home/header_alert.png") no-repeat center;
+  }
+  .inner-user {
+    width: 46px;
+    height: 46px;
+    position: absolute;
+    right: 10px;
+    top: 4px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    .admin-icon {
+      width: 32px;
+      height: 32px;
+      background: #74ffff;
+      border: 1px solid #ffffff;
+      border-radius: 50%;
+    }
+    .text {
+      width: 38px;
+      height: 8px;
+      line-height: 8px;
+    }
+  }
 }
 </style>