From 5b039cc87e513c9512afc2f6e863d2dc3715c9bd Mon Sep 17 00:00:00 2001
From: heixinyouzi <2410633923@qq.com>
Date: Fri, 8 Nov 2024 09:52:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E4=BF=AE=E5=B0=8F=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/index.less |  2 +-
 src/icon/collapse.svg       |  1 +
 src/views/home/navMenu.vue  | 31 +++++++++++++++++++------------
 src/views/home/side.vue     | 37 ++++++++++++++++++++++++++-----------
 src/views/widget/index.vue  |  2 --
 5 files changed, 47 insertions(+), 26 deletions(-)
 create mode 100644 src/icon/collapse.svg

diff --git a/src/assets/style/index.less b/src/assets/style/index.less
index 4f5aa02..27c102e 100644
--- a/src/assets/style/index.less
+++ b/src/assets/style/index.less
@@ -6,7 +6,7 @@
 
 //#BE8AEF #B172EC #A45BE9 #9744E5 #8A2BE2 #7B1DD3 #6C19B9 #5C169F
 
-
+@jb: linear-gradient(90deg,#BE8AEF,#409eff,  #8A2BE2);
 :root:root {
   --van-primary-color: #8a2be2;
 }
\ No newline at end of file
diff --git a/src/icon/collapse.svg b/src/icon/collapse.svg
new file mode 100644
index 0000000..7f97dfa
--- /dev/null
+++ b/src/icon/collapse.svg
@@ -0,0 +1 @@
+<svg t="1731026889534" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15633" id="mx_n_1731026889534" width="32" height="32"><path d="M512 1024A512 512 0 1 0 512 0a512 512 0 0 0 0 1024zM512 214.235429a54.564571 54.564571 0 1 1 0 109.202285 54.564571 54.564571 0 0 1 0-109.202285zM512 397.165714a54.564571 54.564571 0 1 1 0 109.202286 54.564571 54.564571 0 0 1 0-109.202286zM210.505143 483.474286a41.106286 41.106286 0 0 1 58.368-0.438857L512 722.870857l243.053714-239.689143a41.252571 41.252571 0 1 1 58.075429 58.806857l-272.091429 268.361143a41.252571 41.252571 0 0 1-58.002285 0l-272.091429-268.434285a41.325714 41.325714 0 0 1-0.438857-58.368z" fill="#B1C3E7" p-id="15634"></path></svg>
\ No newline at end of file
diff --git a/src/views/home/navMenu.vue b/src/views/home/navMenu.vue
index be320c2..ecbb59a 100644
--- a/src/views/home/navMenu.vue
+++ b/src/views/home/navMenu.vue
@@ -5,19 +5,24 @@
         <n-collapse default-expanded-names="0" accordion>
           <n-collapse-item v-for="(i, idx) in navList" :name="idx + ''" :key="i.menuClass">
             <template #arrow="{ collapsed }">
-              <img :class="{ zhuan: !collapsed }" width="20" height="20" class="mr-2" :src="i.icon" alt="">
+              <img :class="{ zhuan: !collapsed }" width="20" height="20" :src="i.icon" alt="">
             </template>
             <template #header>
-              <div class="" :style="{ color: i.color }">
+              <div class="ml-4" :style="{ color: i.color }">
                 {{ i.menuClass }}
               </div>
             </template>
+            <template #header-extra="{collapsed}">
+              <n-icon size="26" :color="i.color">
+                <IosArrowDropright :class="{extra_collapsed:!collapsed}"  class="extra_collapse"></IosArrowDropright>
+              </n-icon>
+            </template>
             <div class="flex flex-wrap items-center">
-              <div class="w-[200px] mr-20 mt-6" v-for="(j,ii) in i.children">
+              <div class="w-[200px] mr-20 my-4" v-for="(j,ii) in i.children">
                 <n-popover trigger="hover" animated :delay="1000" width="trigger">
                   <template #trigger>
                     <div>
-                      <n-button @click="link(j.menuLink)"  class="btn w-full hover:bg-pp-500 hover:text-[white]" type="primary" ghost>
+                      <n-button @click="link(j.menuLink)"  class="btn w-full  hover:text-[white]" type="primary" ghost>
                         <template #icon>
                           <img v-if="!j.exp" width="20" height="20" class="mr-2" :src="j.menuIcon" alt="" @error="navList[idx].children[ii].exp=true">
                           <div :style="{backgroundColor:j.color}" class="w-[20px] h-[20px] text-[12px] text-[white] rounded-full flex justify-center items-center" v-else>{{ j.menuName[0] }}</div>
@@ -40,9 +45,9 @@
 </template>
 
 <script setup>
+import { IosArrowDropright } from "@vicons/ionicons4";
 import { onMounted } from 'vue';
 
-
 //mark import
 
 //mark data
@@ -106,15 +111,10 @@ onMounted(async () => {
   // justify-content: center;
 }
 
-:deep(.n-tabs-tab__label) {
-  color: #31101b;
-  font-size: 20px;
-  font-weight: 600;
+:deep(.n-collapse-item-arrow) {
+  align-items: center;
 }
 
-:deep(.n-tabs-tab--active) .n-tabs-tab__label {
-  color: @purple;
-}
 
 // 旋转动画
 @keyframes rotate {
@@ -139,6 +139,13 @@ onMounted(async () => {
   /* 指定过渡属性，持续时长，过渡曲线，何时开始 */
   &:hover {
     transform: translateX(10px);
+    background: @jb;
   };
 }
+.extra_collapse {
+  transform: rotate(0deg);
+}
+.extra_collapsed {
+  transform: rotate(90deg);
+}
 </style>
\ No newline at end of file
diff --git a/src/views/home/side.vue b/src/views/home/side.vue
index 8ac5995..e3414fe 100644
--- a/src/views/home/side.vue
+++ b/src/views/home/side.vue
@@ -12,7 +12,8 @@
           今天就是 <span class="text-pp-300 text-lg">{{ holi.data.hname }}</span> 啦
         </div>
         <div class="holi text-center" v-else>
-          还有 <span class="text-[#409eff] text-lg">{{ holi.subdate }}</span> 天就是 <span class="text-pp-300 text-lg">{{ holi.data.hname }}</span> 了
+          还有 <span class="text-[#409eff] text-lg">{{ holi.subdate }}</span> 天就是 <span class="text-pp-300 text-lg">{{
+            holi.data.hname }}</span> 了
         </div>
       </div>
       <div class="right h-[150px]">
@@ -25,11 +26,25 @@
         <div class="lunarDate p-1 text-[22px] text-center">
           {{ jq.data.yearTips }}年 {{ jq.data.lunarCalendar }}
         </div>
-        <div class="suit p-1 pl-6">
-          宜： <span class="text-pp-300">{{ jq.data.suit }}</span>
+        <div class=" p-1 pl-6">
+          <n-popover trigger="hover" animated :delay="1000" width="trigger">
+            <template #trigger>
+              <div class="suit">
+                宜： <span class="text-pp-300">{{ jq.data.suit }}</span>
+              </div>
+            </template>
+            {{ jq.data.suit }}
+          </n-popover>
         </div>
         <div class="suit p-1 pl-6">
-          忌： <span class="text-pp-300">{{ jq.data.avoid }}</span>
+          <n-popover trigger="hover" animated :delay="1000" width="trigger">
+            <template #trigger>
+              <div class="suit">
+                忌： <span class="text-pp-300">{{ jq.data.avoid }}</span>
+              </div>
+            </template>
+            {{ jq.data.avoid }}
+          </n-popover>
         </div>
       </div>
       <div class="img">
@@ -40,7 +55,7 @@
     <div class="lianxi w-[80%] ml-[10%] mt-4 mb-4 bg-[#fafbfc] p-2">
       <div class="t">
         <n-divider title-placement="center">
-          <div class="flex items-center font-bold text-xl" >
+          <div class="flex items-center font-bold text-xl">
             百度热搜
           </div>
         </n-divider>
@@ -73,7 +88,7 @@
         </n-divider>
         <n-divider v-else>
           <div class="flex items-center" @click="isBaidu = !isBaidu">
-            收起 
+            收起
           </div>
         </n-divider>
       </div>
@@ -94,7 +109,7 @@ import { onMounted, ref } from 'vue';
 
 
 //mark data
-const jqs = ['立春','雨水','惊蛰','春分','清明','谷雨','立夏','小满','芒种','夏至','小暑','大暑','立秋','处暑','白露','秋分','寒露','霜降','立冬','小雪','大雪','冬至','小寒','大寒']
+const jqs = ['立春', '雨水', '惊蛰', '春分', '清明', '谷雨', '立夏', '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑', '白露', '秋分', '寒露', '霜降', '立冬', '小雪', '大雪', '冬至', '小寒', '大寒']
 const time = ref(formatTime(new Date(), 'hh:mm:ss'))
 const date = ref(formatTime(new Date(), 'YYYY 年 MM 月 DD 日'))
 const date1 = ref(formatTime(new Date(), 'YYYY-MM-DD'))
@@ -102,7 +117,7 @@ const isw = ref(true)
 isw.value = ww.isWorkday(date1)
 
 const holi = await $http.wea.getTodayHoliday()
-console.log("*************",holi);
+console.log("*************", holi);
 
 
 
@@ -122,10 +137,10 @@ const baidu = ref({})
 
 
 //mark lifeCycle
-onMounted(async() => {
+onMounted(async () => {
   baidu.value = (await $http.news.listBaiduNews()).data
-  console.log("新闻",baidu.value);
-  
+  console.log("新闻", baidu.value);
+
 })
 //mark watch
 
diff --git a/src/views/widget/index.vue b/src/views/widget/index.vue
index bc59781..25adc7a 100644
--- a/src/views/widget/index.vue
+++ b/src/views/widget/index.vue
@@ -21,8 +21,6 @@
       <n-card class="w-full h-full mt-4" :title="title" size="medium">
         <component class="w-full" :is="comp"></component>
       </n-card>
-
-
     </div>
 
   </div>