首页优化

src/views/home/navMenu.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="box flex flex-wrap pl-[2%] mt-8">
-    <n-card title="" style="margin-bottom: 16px" v-for="(ii,iii) in navList">
+    <n-card title="" style="margin-bottom: 16px" v-for="(ii, iii) in navList">
       <n-tabs default-value="0" justify-content="space-evenly" type="line">
-        <n-tab-pane class="flex flex-wrap" :name="index+''" :tab="item.menuClass" v-for="(item, index) in ii">
+        <n-tab-pane class="flex flex-wrap" :name="index + ''" :tab="item.menuClass" v-for="(item, index) in ii">
-          <div class="card mr-4 mb-4 rounded-md py-4 flex justify-center items-center w-[320px] bg-[#f2e8fc]" @click="link(it.menuLink)" v-for="(it, idx) in item.children" :key="index">
+          <div class="card mr-4 mb-4 rounded-md py-4 flex justify-center items-center w-[320px] bg-[#f2e8fc]"
+            @click="link(it.menuLink)" v-for="(it, idx) in item.children" :key="index">
             <div class="left mr-3">
-              <img width="40" height="40" class="rounded-full bg-pp-400"  :src="it.menuIcon" alt="">
+              <img width="40" height="40" class="rounded-full bg-[white]" :src="it.menuIcon" alt="">
             </div>
             <div class="right w-[224px]">
               <div class="text-[20px] text-pp-700 font-bold">{{ it.menuName }}</div>
+              <n-popover trigger="hover">
+                <template #trigger>
                   <div class="truncate">{{ it.menuDesc }}</div>
+                </template>
+                <span>{{ it.menuDesc }}</span>
+              </n-popover>
             </div>
           </div>
         </n-tab-pane>
@@ -27,7 +33,6 @@ import { onMounted } from 'vue';
 
 //mark data
 const navList = ref([])
-const active = ref(-1)
 //mark method
 function formatNav(list) {
   let menu = []
@@ -59,7 +64,6 @@ function link(url) {
 onMounted(async () => {
   const res = await $http.nav.listNav()
   navList.value = formatNav(res.data)
-  console.log(navList.value);
 })
 
 </script>
@@ -72,4 +76,9 @@ onMounted(async () => {
 :deep(.n-collapse-item__header) {
   background-color: red;
 }
+
+:deep(.n-tabs-tab__label) {
+  font-size: 20px;
+  font-weight: 600;
+}
 </style>

src/views/home/side.vue

@@ -8,10 +8,9 @@
         <div class="date text-right mb-2">
           {{ date }}
         </div>
-        <!-- <div class="holi text-center">
+        <div class="holi text-center">
-          距离 <span class="text-pp-300">{{ getHoli.data.name }}</span> 还有
+          还有 {{ holi.holiday.rest }} 天就是 <span class="text-pp-300 text-lg">{{ holi.holiday.name }}</span> 了
-          {{ days }} 天
+        </div>
-        </div> -->
       </div>
       <div class="right h-[150px]">
         <img height="150" :src="isw ? onwork : offwork" alt="">
@@ -38,11 +37,8 @@
     <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" @click="isBaidu = !isBaidu">
+          <div class="flex items-center font-bold" >
             百度热搜
-            <n-icon size="20" class="tiao mx-2">
-              <more />
-            </n-icon>
           </div>
         </n-divider>
       </div>
@@ -59,11 +55,24 @@
             </div>
             <div class="text-pp-500">{{ item.hot }}</div>
           </div>
+
           <div v-if="index > 2 && isBaidu" class="flex my-2 justify-between">
             <div>{{ item.title }}</div>
             <div class="text-pp-500">{{ item.hot }}</div>
           </div>
         </div>
+        <n-divider v-if="!isBaidu">
+          <div class="flex items-center" @click="isBaidu = !isBaidu">
+            更多<n-icon size="20" class="tiao mx-2">
+              <more />
+            </n-icon>
+          </div>
+        </n-divider>
+        <n-divider v-else>
+          <div class="flex items-center" @click="isBaidu = !isBaidu">
+            收起 
+          </div>
+        </n-divider>
       </div>
       <!-- </template> -->
     </div>
@@ -82,7 +91,7 @@ import { ref } from 'vue';
 
 
 //mark data
-
+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'))
@@ -92,10 +101,15 @@ const baidu = await $http.news.listBaiduNews()
 const jqImg = ref('#')
 const jq = await $http.wea.getJq()
 const j = jq.data.solarTerms.slice(0, 2)
-jqImg.value = 'https://www.hxyouzi.com/img/jieqi/2/' + j + '.jpg'
+const jNum = jqs.indexOf(j) + 1
+jqImg.value = 'https://www.hxyouzi.com/img/jieqi/' + jNum + '.jpg'
 const isBaidu = ref(false);
 
 
+const holi = await $http.wea.getNextHoliday()
+
+
+
 //mark lifeCycle
 
 //mark watch