public/static/config/config.js

@@ -17,7 +17,9 @@ var userLoginConfig = {
 var oauthUrl = "http://121.43.55.7:10086"
 
 // 系统配置（LiuMengxiang）
-var systemConfig = {
+const systemConfig = {
+    // 系统名称
+    systemName: "徐泾镇产业资源全生命周期管理平台",
     // 底图地址集合（Map.vue>creatMap()）
     // imageryProviders: ["http://t0.tianditu.com/img_w/wmts", "http://t0.tianditu.com/cia_w/wmts"],
     imageryProviders: ["http://t0.tianditu.com/img_w/wmts"],

src/components/Header.vue

@@ -7,27 +7,42 @@
     </div>
     <!-- title -->
     <div class="title_bg">
-      <div class="title_bg_title">徐泾镇产业资源全生命周期管理平台</div>
+      <div class="title_bg_title">{{ systemName }}</div>
     </div>
     <!-- 天气 -->
-    <div class="weather">天气</div>
+    <div class="weather">
+      <div class="tq_img">
+        <img :src="tq_imgsrc" />
+      </div>
+      <div>
+        <div class="temperature">{{ temperature }}度</div>
+        <div class="tq_text">{{ tq_text }}</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
-// import moment from "moment";
 export default {
   data() {
     return {
       currentTime: "",
       setInterval_: "",
       date: "",
+      systemName: "",
+      temperature: "", // 天气
+      tq_text: "",
+      tq_imgsrc: ""
     };
   },
   created() {
     this.currentTime = this.$dayjs().format("HH:mm:ss");
     this.date = this.$dayjs().format("YYYY.MM.DD");
+    if (systemConfig) {
+      document.title = systemConfig.systemName;
+      this.systemName = systemConfig.systemName;
+    }
   },
   mounted() {
     // 时间定时器
@@ -45,6 +60,7 @@ export default {
   methods: {
     // 前提获取
     tqRefresh() {
+      let that = this;
       let loc = this.getCenterPosition(viewer);
       axios
         .get(
@@ -53,12 +69,13 @@ export default {
             ":" +
             loc.lon
         )
-        .then((data) => {
+        .then(data => {
           //解析 {data}
           let result = data.data.results[0];
-          let imgsrc = "./images/tianqi/" + result.now.code + "@1x.png";
-          let text = result.now.text;
-          let temperature = result.now.temperature;
+          that.tq_imgsrc =
+            "./static/image/tianqi/" + result.now.code + "@1x.png";
+          that.tq_text = result.now.text;
+          that.temperature = result.now.temperature;
         });
     },
     // 获取当前地图中心的经纬度
@@ -69,25 +86,27 @@ export default {
           viewer.canvas.clientHeight / 2
         )
       );
-      let curPosition = SkyScenery.Ellipsoid.WGS84.cartesianToCartographic(centerResult);
+      let curPosition = SkyScenery.Ellipsoid.WGS84.cartesianToCartographic(
+        centerResult
+      );
       let curLongitude = (curPosition.longitude * 180) / Math.PI;
       let curLatitude = (curPosition.latitude * 180) / Math.PI;
       return {
         lon: curLongitude,
-        lat: curLatitude,
+        lat: curLatitude
       };
-    },
+    }
   },
   computed: {
     mapStatus() {
       return this.$store.state.initMap;
-    },
+    }
   },
   watch: {
     mapStatus(newVal, oldVal) {
       if (newVal) this.tqRefresh();
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -102,6 +121,7 @@ export default {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
+  pointer-events: none;
 }
 .clock {
   display: flex;
@@ -113,7 +133,7 @@ export default {
   text-shadow: 1px 1px 1px #000, 0 0 5px #000;
   .time {
     color: #ffffff;
-    font-size: 20px;
+    font-size: 24px;
   }
   .date {
     color: #f2f6fc;
@@ -122,10 +142,37 @@ export default {
 }
 .weather {
   display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   width: calc(50vw - 698px - 10px);
   height: 60px;
   margin-right: 10px;
-  background: red;
+  color: #ffffff;
+  text-align: right;
+  font-family: "YouSheBiaoTiHei";
+  text-shadow: 1px 1px 1px #000, 0 0 5px #000;
+  .tq_img {
+    width: 40px;
+    height: 40px;
+    margin: 10px 10px;
+    display: flex;
+    justify-content: center;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .temperature,
+  .tq_text {
+    max-width: 105px;
+  }
+  .temperature {
+    font-size: 24px;
+  }
+  .tq_text {
+    font-size: 16px;
+  }
 }
 .title_bg {
   position: relative;

src/components/cards/CardTitle.vue

@@ -29,9 +29,9 @@ export default {
   position: relative;
   height: 50px;
   border-left: 3px solid #1b7ef2;
-  background-image: --webkit-linear-gradient(to right, #1b7ef232, #1b7ef200);
-  background-image: --moz-linear-gradient(to right, #1b7ef232, #1b7ef200);
-  background-image: linear-gradient(to right, #1b7ef232, #1b7ef200);
+  background-image: --webkit-linear-gradient(to right, #1b7ef264, #1b7ef200);
+  background-image: --moz-linear-gradient(to right, #1b7ef264, #1b7ef200);
+  background-image: linear-gradient(to right, #1b7ef264, #1b7ef200);
   display: flex;
   align-content: center;
   align-items: center;
@@ -40,10 +40,22 @@ export default {
   line-height: 16px;
   &_f {
     margin: 0 10px;
-    width: 14px;
-    height: 12px;
+    width: 10px;
+    height: 14px;
     clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
     background: #29f1fa;
   }
+  &::before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 40px;
+    top: 5px;
+    left: 0;
+    background: linear-gradient(to right, #ffffff64 50%, #00000000 0);
+    background-size: 40px 100%;
+    transform: skew(30deg, 0);
+    z-index: -1;
+  }
 }
 </style>

src/main.js

@@ -1,4 +1,3 @@
-import Vue from "vue";
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
@@ -9,7 +8,6 @@ import "./assets/font/font.css";
 import "./assets/global.css";
 // 引入dayjs库
 import dayjs from "dayjs";
-
 const app = createApp(App).use(store).use(router);
 app.config.globalProperties.$dayjs = dayjs;
 app.mount('#app');

src/router/index.js

@@ -5,7 +5,10 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: HomeView
+    component: HomeView,
+    meta: {
+      title: systemConfig.systemName,
+    }
   },
 ]
 

src/views/HomeView.vue

@@ -2,8 +2,21 @@
   <div class="home">
     <Header />
     <Map />
-    <div class="home_MainBox">
-      <CardTitle title="空间资源运营概览" />
+    <div class="home_LeftMainBox">
+      <img style="width: 500px; height: 50px" src="../assets/images/LT1.png" />
+      <img style="width: 500px; height: 246px" src="../assets/images/LM1.png" />
+      <img style="width: 500px; height: 50px" src="../assets/images/LT2.png" />
+      <img style="width: 500px; height: 246px" src="../assets/images/LM2.png" />
+      <img style="width: 500px; height: 50px" src="../assets/images/LT3.png" />
+      <img style="width: 500px; height: 246px" src="../assets/images/LM3.png" />
+    </div>
+    <div class="home_RightMainBox">
+      <img style="width: 500px; height: 50px" src="../assets/images/RT1.png" />
+      <img style="width: 500px; height: 246px" src="../assets/images/RM1.png" />
+      <img style="width: 500px; height: 50px" src="../assets/images/RT2.png" />
+      <img style="width: 500px; height: 246px" src="../assets/images/RM2.png" />
+      <img style="width: 500px; height: 50px" src="../assets/images/RT3.png" />
+      <img style="width: 500px; height: 246px" src="../assets/images/RM3.png" />
     </div>
   </div>
 </template>
@@ -28,15 +41,35 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  &_MainBox {
+  &_LeftMainBox {
     position: fixed;
     z-index: 9999;
     top: 65px;
     left: 0;
     width: 500px;
     height: calc(100vh - 65px);
-    background: #ffffff32;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    pointer-events: none;
+    // background: #00000064;
+  }
+  &_RightMainBox {
+    position: fixed;
+    z-index: 9999;
+    top: 65px;
+    right: 0;
+    width: 500px;
+    height: calc(100vh - 65px);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    pointer-events: none;
+    // background: #00000064;
   }
 }
 </style>