🧑‍💻 feat: 修改公共头部组件

src/layout/layout-header/components/LayoutHeaderCommon.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
+import { useIntervalFn } from '@vueuse/core';
 import { onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 
-import LayoutHeaderNav from '@/layout/layout-header/components/LayoutHeaderNav.vue';
+import LayoutHeaderNav from '@/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue';
 import dayjs from '@/plugins/dayjs';
 import { resetRouter } from '@/router';
 
-const router = useRouter();
 const route = useRoute();
 
 const time = ref('');
@@ -14,7 +14,7 @@ const time = ref('');
 /** 显示时间 */
 const displayTime = () => {
   time.value = dayjs(new Date()).format('YYYY-MM-DD dddd HH:mm:ss');
-  setInterval(() => {
+  useIntervalFn(() => {
     time.value = dayjs(new Date()).format('YYYY-MM-DD dddd HH:mm:ss');
   }, 1000);
 };
@@ -26,18 +26,18 @@ onMounted(() => {
 
 <template>
   <header>
-    <div class="header-time c-primary">{{ time }}</div>
+    <div class="header-time">{{ time }}</div>
 
     <div class="header-title">
-      <h1>{{ route.meta.title }}</h1>
+      <h1 @click="resetRouter()">{{ route.meta.title }}</h1>
       <h2>{{ route.meta.subtitle }}</h2>
-      <img
-        alt="icon-setting"
-        class="ml-[-284px]"
-        src="../images/icon/icon-home.png"
-        @click="resetRouter()"
-      />
-      <img alt="icon-home" class="ml-[284px]" src="../images/icon/icon-setting.png" />
+      <!--<img-->
+      <!--  alt="icon-setting"-->
+      <!--  class="ml-[-464px]"-->
+      <!--  src="../images/icon/icon-home.png"-->
+      <!--  @click="resetRouter()"-->
+      <!--/>-->
+      <!--<img alt="icon-home" class="ml-[464px]" src="../images/icon/icon-setting.png" />-->
     </div>
 
     <LayoutHeaderNav />
@@ -47,7 +47,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 header {
   position: relative;
-  height: 108px;
+  height: 80px;
   background: url('@/layout/layout-header/images/layout-header-2.png') no-repeat center;
   background-size: cover;
 }
@@ -55,7 +55,8 @@ header {
 .header-time {
   position: absolute;
   margin: 0 0 0 41px;
-  line-height: 60px;
+  line-height: 50px;
+  color: var(--color-info);
   font-size: 14px;
 }
 
@@ -65,11 +66,11 @@ header {
 
   img {
     position: absolute;
-    bottom: 0;
     left: 50%;
+    bottom: -14px;
     transform: translateX(-50%);
-    width: 60px;
-    height: 60px;
+    width: 50px;
+    height: 50px;
     object-fit: cover;
     z-index: 1;
     cursor: pointer;
@@ -77,14 +78,15 @@ header {
 
   h1 {
     color: #fff;
-    font-size: 42px;
-    line-height: 60px;
+    font-size: 34px;
+    line-height: 50px;
+    cursor: pointer;
   }
 
   h2 {
     color: var(--color-primary-secondary);
     font-size: 24px;
-    line-height: 45px;
+    line-height: 24px;
     font-weight: lighter;
   }
 }

src/layout/layout-header/components/LayoutHeaderHome.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
 
-import LayoutHeaderNav from '@/layout/layout-header/components/LayoutHeaderNav.vue';
+import LayoutHeaderNav from '@/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue';
 
 const route = useRoute();
 </script>

src/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue

@@ -3,9 +3,9 @@
 <template>
   <div class="bar-op">
     <ul>
-      <li><img alt="icon-1" src="../images/icon/icon-1.png" /></li>
-      <li><img alt="icon-2" src="../images/icon/icon-2.png" /></li>
-      <li><img alt="icon-3" src="../images/icon/icon-3.png" /></li>
+      <!--<li><img alt="icon-1" src="../../images/icon/icon-1.png" /></li>-->
+      <!--<li><img alt="icon-2" src="../../images/icon/icon-2.png" /></li>-->
+      <!--<li><img alt="icon-3" src="../../images/icon/icon-3.png" /></li>-->
     </ul>
     <span class="hover">王菠萝</span>
   </div>
@@ -16,7 +16,7 @@
   display: flex;
   align-items: center;
   position: absolute;
-  top: 11px;
+  top: 4px;
   right: 20px;
   height: 36px;
 
@@ -33,7 +33,7 @@
   }
 
   span {
-    color: var(--color-primary);
+    color: var(--color-info);
     float: left;
     font-size: 12px;
     cursor: pointer;

src/views/community/charts/right-header.tsx

@@ -17,7 +17,7 @@ const option = ref<EChartsOption>({
     {
       name: '名称',
       type: 'pie',
-      radius: [14, 100],
+      radius: [14, 104],
       center: ['50%', '50%'],
       roseType: 'area',
       itemStyle: { borderRadius: 4 },