中建四局: 完成 header 布局

src/views/projectAdmin/zjsj/index.vue

@@ -1,40 +1,29 @@
 <template>
-  <div class="dataBoardPage">
-    <div class="headerBox">
-      <div class="topTit">
-        <div class="time">
-          <span>{{ 中建科创大厦项目 }}</span>
-          <span>{{ currentTime }}</span>
-          <span>{{ currentWeek }}</span>
-          <img class="wetherImg" src="../../../assets/images/projectImg/sun.png" alt />
-          <span>多云 32℃</span>
-          <span>{{ currentDate }}</span>
+  <div class="zjsj-large-screen">
+    <div class="header">
+      <div class="info">
+        <div class="between">
+          <div class="project">中建科创大厦项目</div>
+          <div class="time-week">
+            <div class="time">15:32:39</div>
+            <div class="week">星期二</div>
           </div>
-        <div class="title">
-          <h1 class="title">{{ '中建四局综合监管平台' }}</h1>
-        </div>
-        <div>
-          <span>中国建筑第四工程局有限公司</span>
-          <img class="backImg" @click="toBack()" src="../../../assets/images/projectImg/back.png" alt />
+          <div class="weather-date">
+            <div class="weather">多云 32℃</div>
+            <div class="date">2022-09-09</div>
           </div>
         </div>
-      <div style="height: 40px" class="menuBox">
-        <ul class="left">
-          <li
-            v-for="(item, index) in menuList"
-            :key="index"
-            :class="{
-              right: index > (menuList.length - 1) / 2,
-              active: $route.path == item.modulePath
-            }"
-            @click="menuClick(item, index)"
-          >
-            {{ item.moduleName }}
-          </li>
-        </ul>
+        <div class="title">中建四局数字建造管控平台</div>
+        <div class="between">
+          <div class="company"></div>
+          <div class="exit" @click="$router.back()"></div>
         </div>
       </div>
-    <div class="dataBoardContent">
+      <div class="tabs">
+        <div class="tab" v-for="i in 9" :key="i"></div>
+      </div>
+    </div>
+    <div class="content">
       <router-view></router-view>
     </div>
   </div>
@@ -45,5 +34,106 @@ export default {}
 </script>
 
 <style lang="less" scoped>
-@import url('./style.less');
+// @import url('./style.less');
+.zjsj-large-screen {
+  width: 100%;
+  height: 100%;
+  background-color: #182337;
+  .header {
+    width: 100%;
+    height: 110px;
+    .info {
+      height: calc(100% - 32px);
+      color: #fff;
+      display: flex;
+      background: url(./assets/images/header/bg-title.png) no-repeat;
+      background-size: contain;
+      background-position-y: 16px;
+      .between {
+        box-sizing: border-box;
+        padding: 16px 30px 0;
+        width: 450px;
+        height: 100%;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        .project {
+          font-size: 16px;
+          color: #66d4d9;
+        }
+        .time-week {
+          margin: 0 45px;
+          font-size: 12px;
+          .time {
+            margin-bottom: 2px;
+          }
+        }
+        .weather-date {
+          font-size: 12px;
+          .weather {
+            display: flex;
+            align-items: center;
+            &::before {
+              content: '';
+              margin-right: 10px;
+              width: 20px;
+              height: 20px;
+              background-color: skyblue;
+              background: url(./assets/images/header/i-cloudy.png) no-repeat;
+              background-size: contain;
+            }
+          }
+        }
+        .company {
+          margin-left: 50px;
+          margin-right: auto;
+          width: 246px;
+          height: 28px;
+          background: url(./assets/images/header/bg-company.png) no-repeat;
+          background-size: contain;
+        }
+        .exit {
+          width: 24px;
+          height: 26px;
+          background: url(./assets/images/header/i-exit.png) no-repeat;
+          background-size: contain;
+          cursor: pointer;
+        }
+      }
+      .title {
+        box-sizing: border-box;
+        padding-top: 16px;
+        flex: 1;
+        height: 100%;
+        font-size: 32px;
+        font-weight: bold;
+        text-align: center;
+      }
+    }
+    .tabs {
+      display: flex;
+      justify-content: space-around;
+      .tab {
+        width: 170px;
+        height: 32px;
+        color: #fff;
+        background: url(./assets/images/header/bg-tab.png) no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+        &.checked {
+          color: #fec303;
+        }
+        &:hover {
+          color: #fec303;
+        }
+      }
+    }
+  }
+  .content {
+    box-sizing: border-box;
+    padding: 12px 20px;
+    width: 100%;
+    height: calc(100% - 110px);
+  }
+}
 </style>