From 9a1cf9dd5352d2ddd85ba7d9a8fbaefd0c5c470c Mon Sep 17 00:00:00 2001
From: heixinyouzi <2410633923@qq.com>
Date: Thu, 7 Nov 2024 14:56:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                |   3 +-
 src/stores/index.js        |  12 ++++
 src/stores/size.js         |   6 +-
 src/views/home/index.vue   |   2 +-
 src/views/home/navMenu.vue | 111 ++++++++++++++++++++++++++-----------
 src/views/home/search.vue  |   8 ++-
 src/views/home/side.vue    |  22 +++++---
 7 files changed, 121 insertions(+), 43 deletions(-)
 create mode 100644 src/stores/index.js

diff --git a/src/main.js b/src/main.js
index 395a3b9..365cfe3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import { createApp } from "vue";
 
 import http from '@/api/index.js';
 import icon from "@/icon/index.js";
+import store from "@/stores/index.js";
 import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 import "qweather-icons/font/qweather-icons.css";
 import "tailwindcss/tailwind.css";
@@ -24,7 +25,7 @@ document.oncontextmenu = function () {
 app.use(createPinia());
 app.use(router).use(VueWechatTitle);
 
-
+window.$store = store
 window.$http = http
 // window.$icon = icon
 for (const key in icon) {
diff --git a/src/stores/index.js b/src/stores/index.js
new file mode 100644
index 0000000..413979f
--- /dev/null
+++ b/src/stores/index.js
@@ -0,0 +1,12 @@
+const files = import.meta.glob('./*.js', {
+  eager: true,
+})
+
+const store = {}
+// console.log("stores封装",files);
+for (const i in files) {
+  const t = i.split("/")
+  const name = t[1].split(".")[0]
+  store[name] = files[i]
+}
+export default store
\ No newline at end of file
diff --git a/src/stores/size.js b/src/stores/size.js
index eb6431e..fa5b4ee 100644
--- a/src/stores/size.js
+++ b/src/stores/size.js
@@ -6,6 +6,7 @@ export const usesizeStore = defineStore("size", {
     navH: 0,
     conH: 0,
     footH:0,
+    searchH:0,
   }),
   actions: {
     setMenuH(v) {
@@ -17,7 +18,10 @@ export const usesizeStore = defineStore("size", {
     setFootH(v){
       this.footH = v;
     },
-
+    setSearchH(v){
+      this.searchH = v;
+    },
+    
     setX(v){
       this.x = v;
     }
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index abfcbb4..129f613 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="box xxx" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
+    <div class="box" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
       <n-layout>
         <n-layout has-sider>
           <n-layout-content class="sm:w-[90vh] w-[70%]" :content-style="{ height: `calc(100vh - ${size.menuH}px)`,backgroundColor:'#f1f2f3' }">
diff --git a/src/views/home/navMenu.vue b/src/views/home/navMenu.vue
index 2e1cd6a..2014eb0 100644
--- a/src/views/home/navMenu.vue
+++ b/src/views/home/navMenu.vue
@@ -1,34 +1,44 @@
 <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-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">
-          <div class="card hover:shadow-[0px_0px_5px_1px_#8A2BE2] 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 v-if="it.isHaveIco" width="40" height="40" class="rounded-full bg-[white]" :src="it.menuIcon" alt="" @error="it.isHaveIco=false">
-              <div v-else class="w-[40px] h-[40px] flex justify-center items-center rounded-full bg-[white] font-bold text-2xl text-orange-500">
-                {{ it.menuName.slice(0,1) }}
+  <div class="box flex flex-wrap px-8">
+    <n-card :style="{ height: boxH + 'px' }">
+      <n-scrollbar :class="`h-[${boxH}px]`" :style="{ height: boxH - 40 + 'px' }">
+        <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="">
+            </template>
+            <template #header>
+              <div class="" :style="{ color: i.color }">
+                {{ i.menuClass }}
+              </div>
+            </template>
+            <div class="flex flex-wrap items-center">
+              <div class="w-[200px] mr-20 mt-6" v-for="j 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>
+                        <template #icon>
+                          <img  width="20" height="20" class="mr-2" :src="j.menuIcon" alt="">
+                        </template>
+                        {{ j.menuName }}
+                      </n-button>
+                    </div>
+                  </template>
+                  {{ j.menuDesc }}
+                </n-popover>
+
               </div>
             </div>
-            <div class="right w-[224px]">
-              <div class="text-[20px] text-pp-700 font-bold">{{ it.menuName }}</div>
-              <n-popover trigger="hover" width="trigger">
-                <template #trigger>
-                  <div class="truncate">{{ it.menuDesc }}</div>
-                </template>
-                <span>{{ it.menuDesc }}</span>
-              </n-popover>
-            </div>
-          </div>
-        </n-tab-pane>
-      </n-tabs>
+          </n-collapse-item>
+        </n-collapse>
+      </n-scrollbar>
+
     </n-card>
   </div>
 </template>
 
 <script setup>
-import { chunkArrayInGroups } from '@/util/index.js';
 import { onMounted } from 'vue';
 
 
@@ -37,6 +47,8 @@ import { onMounted } from 'vue';
 //mark data
 const navList = ref([])
 const isHaveIco = ref(true)
+const size = $store.size.usesizeStore()
+const boxH = ref(0)
 
 //mark method
 function formatNav(list) {
@@ -49,16 +61,19 @@ function formatNav(list) {
     }
   });
   menu.forEach(i => {
+    const children = list.filter(it => it.menuClass == i)
     result.push({
       menuClass: i,
-      children: list.filter(it => it.menuClass == i),
-      exp: false
+      children,
+      color: children[0].color,
+      icon: "https://www.hxyouzi.com/img/svg/menu/" + children[0].icon,
+      exp: false,
     })
   })
-  // console.log(result);
+  console.log(result);
 
-
-  return chunkArrayInGroups(result, 4)
+  return result
+  // return chunkArrayInGroups(result, 4)
 
 }
 
@@ -70,6 +85,10 @@ function link(url) {
 onMounted(async () => {
   const res = await $http.nav.listNav()
   navList.value = formatNav(res.data)
+  // 获取屏幕高度
+  const screenHeight = document.documentElement.clientHeight
+  boxH.value = screenHeight - size.searchH - size.menuH - 24 - 66
+  console.log(66666, navList.value);
 })
 
 </script>
@@ -79,8 +98,11 @@ onMounted(async () => {
   align-items: start;
 }
 
-:deep(.n-collapse-item__header) {
-  background-color: red;
+
+:deep(.n-collapse-item__header-main) {
+  font-size: 20px;
+  align-items: center;
+  // justify-content: center;
 }
 
 :deep(.n-tabs-tab__label) {
@@ -88,7 +110,34 @@ onMounted(async () => {
   font-size: 20px;
   font-weight: 600;
 }
-:deep(.n-tabs-tab--active) .n-tabs-tab__label{
+
+:deep(.n-tabs-tab--active) .n-tabs-tab__label {
   color: @purple;
 }
+
+// 旋转动画
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+    /* 起始角度 */
+  }
+
+  to {
+    transform: rotate(360deg);
+    /* 结束角度 */
+  }
+}
+
+.zhuan {
+  // transform: rotate(0deg) !important; 
+  animation: rotate 2s infinite;
+  /* 播放名为bounce的动画，循环无限次，每次动画时长1秒 */
+}
+.btn {
+  transition: all .5s ease-in-out;
+  /* 指定过渡属性，持续时长，过渡曲线，何时开始 */
+  &:hover {
+    transform: translateX(10px);
+  };
+}
 </style>
\ No newline at end of file
diff --git a/src/views/home/search.vue b/src/views/home/search.vue
index 10ebe0e..bdc67e1 100644
--- a/src/views/home/search.vue
+++ b/src/views/home/search.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="py-10 px-40 md:px-4 search-box " round>
+  <div ref="searhBox" class="py-10 px-40 md:px-4 search-box " round>
     <!-- <img class="h-[50px] mb-4 mx-auto" height="30" :src="img" alt=""> -->
     <div class="relative">
       <!-- <n-select size="large" round class="w-[13%] md:w-[40%]" @change="updateEngine" v-model:value="engine" :options="selectOptions" /> -->
@@ -22,8 +22,10 @@
 <script setup>
 //mark import
 
+import { usesizeStore } from "@/stores/size.js";
 import { onMounted } from 'vue';
 //mark data
+const size = usesizeStore()
 const searchValue = ref('')
 const selectOptions = [
   { label: '必应', value: 'https://cn.bing.com/search?q=' },
@@ -38,6 +40,7 @@ const mos = ref(null)
 const inWidth = ref(0)
 const inHeight = ref(0)
 const item = ref(null)
+const searhBox = ref(null)
 //mark method
 // https://cn.bing.com/search?q=111
 function toSearch(i) {
@@ -98,6 +101,9 @@ onMounted(() => {
   inHeight.value = input.value.$el.offsetHeight
   mos.value.style.width = inWidth.value + 'px'
   mos.value.style.top = inHeight.value + 'px'
+  const h = searhBox.value.offsetHeight
+  size.setSearchH(h)
+  
 })
 </script>
 
diff --git a/src/views/home/side.vue b/src/views/home/side.vue
index 1d996e8..8ac5995 100644
--- a/src/views/home/side.vue
+++ b/src/views/home/side.vue
@@ -47,21 +47,21 @@
       </div>
       <!-- <template v-if="isBaidu"> -->
       <div class="list">
-        <div class=" hover:text-orange-500" @click="gotonews(item.url)" v-for="(item, index) in baidu.data" :key="index"
+        <div class=" hover:text-orange-500" @click="gotonews(item.url)" v-for="(item, index) in baidu" :key="index"
           v-show="index < 10">
           <div v-if="index < 3" class="flex my-2 justify-between">
             <div class="hot flex items-center">
               <n-icon size="16" class=" orange mr-2">
                 <hot />
               </n-icon>
-              <div>{{ item.title }}</div>
+              <div>{{ item.keyword }}</div>
             </div>
-            <div class="text-pp-500">{{ item.hot }}</div>
+            <div class="text-pp-500">{{ item.hotValue }}</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>{{ item.keyword }}</div>
+            <div class="text-pp-500">{{ item.hotValue }}</div>
           </div>
         </div>
         <n-divider v-if="!isBaidu">
@@ -90,7 +90,7 @@ import hot from "@/icon/hot.svg";
 import more from "@/icon/more.svg";
 import { formatTime } from '@/util/index.js';
 import ww from 'chinese-workday';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 
 //mark data
@@ -113,7 +113,7 @@ const j = jq.data.solarTerms.slice(0, 2)
 const jNum = jqs.indexOf(j) + 1
 jqImg.value = 'https://www.hxyouzi.com/img/jieqi/' + jNum + '.jpg'
 const isBaidu = ref(false);
-const baidu = await $http.news.listBaiduNews()
+const baidu = ref({})
 
 // const holi = await $http.wea.getNextHoliday()
 // console.log(555555555555,holi);
@@ -122,7 +122,11 @@ const baidu = await $http.news.listBaiduNews()
 
 
 //mark lifeCycle
-
+onMounted(async() => {
+  baidu.value = (await $http.news.listBaiduNews()).data
+  console.log("新闻",baidu.value);
+  
+})
 //mark watch
 
 //mark computed
@@ -139,6 +143,8 @@ const gotonews = (url) => {
   window.open(url, "_blank")
 }
 
+
+
 </script>
 
 <style scoped lang="less">