feat:#1 新增头部日历

components/default/Header.vue

@@ -8,14 +8,17 @@
       </template>
     </el-page-header>
 
-    <Navbar/>
+    <header-time/>
+
+    <navbar/>
   </header>
 </template>
 
 <script lang="ts" setup>
 import Navbar from "~/components/default/Navbar.vue";
 import {ElPageHeader} from "element-plus";
 import {ArrowLeft} from '@element-plus/icons-vue'
+import HeaderTime from "~/components/default/HeaderTime.vue";
 
 const router = useRouter();
 const onBack = () => {

components/default/HeaderTime.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-row class="time">
+    <el-col :xs="24" :sm="24" :md="8">
+      <div>
+        现在是
+        <client-only>
+          {{ timeData.clientTime }}
+        </client-only>
+        {{ timeData.weekday }}
+      </div>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="8">
+      <div>{{ timeData.popTime === "" ? "加载中..." : timeData.popTime }}</div>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="8">
+      <div>{{ timeData.tradTime === "" ? "加载中..." : timeData.tradTime }}</div>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+import {ElCol, ElRow} from "element-plus";
+import {
+  getClientTime, getWeekByDay,
+  getPopTime,
+  getShengXiao,
+  getTradTime
+} from "~/lib/DateUtil";
+import {onMounted} from "vue";
+import {inBrowser} from "~/lib/util";
+
+const timeData = ref({
+  clientTime: "",
+  weekday: "",
+  popTime: "",
+  tradTime: "",
+  shengxiao: ""
+})
+
+const initData = () => {
+  timeData.value.clientTime = getClientTime()
+  timeData.value.weekday = getWeekByDay();
+  timeData.value.popTime = getPopTime();
+  timeData.value.tradTime = getTradTime();
+  timeData.value.shengxiao = getShengXiao();
+}
+
+initData();
+onMounted(() => {
+  if (inBrowser()) {
+    setInterval(function () {
+      timeData.value.clientTime = getClientTime();
+    }, 1000);
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: "HeaderTime"
+}
+</script>
+
+<style scoped lang="scss">
+.time {
+  line-height: 30px;
+  text-align: left;
+  padding: 10px;
+}
+</style>

components/default/HomePostList.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    Data begin
-    {{ data }}
-    Data end
+    {{ data.msg }}
 
     <h1>
       <NuxtLink to="/post">

components/default/Navbar.vue

@@ -1,11 +1,8 @@
 <template>
-  <Examples/>
+  <div>navbar</div>
 </template>
 
-<script lang="ts" setup>
-import Examples from "~/components/Examples.vue";
-
-</script>
+<script lang="ts" setup></script>
 
 <script lang="ts">