日期/天气预报

src/assets/styles/index.scss

@@ -36,7 +36,8 @@
     top: 0.65rem;
   }
   .header-weather {
-    left: 1.25rem;
+    left: 1rem;
+    // top: 0.32rem;
   }
   .header-date {
     right: 0.375rem;

src/utils/index.js

@@ -32,3 +32,15 @@ export function debounce(func, wait, immediate) {
     return result
   }
 }
+
+// 获取当前日期时间
+export function getCurrentTime() {
+  const yy = new Date().getFullYear()
+  const mm = new Date().getMonth() + 1
+  const dd = new Date().getDate()
+  const hh = new Date().getHours()
+  const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
+  const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
+  const time = yy + '年' + mm + '月' + dd + '日 ' + hh + ':' + mf + ':' + ss
+  return time
+}

src/views/header/index.vue

@@ -1,19 +1,28 @@
 <template>
   <div class="header-container">
     <div class="header-title"><h2>东西湖区图书馆</h2></div>
-    <div class="header-text header-weather">晴 20℃~30℃</div>
-    <div class="header-text header-date">2022年9月21日 14:25:30</div>
+    <div class="header-text header-weather">
+      <!-- 天气api: https://www.tianqi.com/plugin -->
+      <iframe id="weather" width="210" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=24" />
+    </div>
+    <div class="header-text header-date">{{ nowDate }}</div>
   </div>
+
 </template>
 
 <script>
+import { getCurrentTime } from '@/utils/index'
 export default {
   name: 'Header',
   data() {
     return {
+      nowDate: ''
     }
   },
   created() {
+    this.timer = setInterval(() => {
+      this.nowDate = getCurrentTime()
+    }, 1000)
   },
   mounted() {
   },