小修小改

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;
 }

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>

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) {
+:deep(.n-collapse-item-arrow) {
-  color: #31101b;
+  align-items: center;
-  font-size: 20px;
-  font-weight: 600;
 }
 
-: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>

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,12 +26,26 @@
         <div class="lunarDate p-1 text-[22px] text-center">
           {{ jq.data.yearTips }}年 {{ jq.data.lunarCalendar }}
         </div>
-        <div class="suit p-1 pl-6">
+        <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">
+          <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">
         <img :src="jqImg" alt="">

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>