首页更新

src/components/menu.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="box flex justify-between items-center md:py-1" ref="menuH">
+  <div class="box flex justify-between items-center md:py-1 h-[50px]" ref="menuH">
-    <div class="md:hidden">
+    <div class="md:hidden flex items-center">
+      <div class="logo ml-8 mr-20 flex items-center" @click="toHome">
+        <img class="rounded-full" src="@/assets/柚子娘.jpg" width="40" alt="">
+        <img src="@/assets/youzi_title.png" width="200" height="50" alt="">
+      </div>
       <n-menu v-model:value="activeKey" :options="menuInfo.options" mode="horizontal" />
     </div>
     <n-icon size="30" class="menuIcon ml-2 hidden md:block text-pp-500" @click="active = true">
@@ -94,7 +98,7 @@ menuInfo.menuList.forEach((i, idx) => {
     activeKey.value = idx + 1 + "";
   }
 });
-
+const homeItem = ref(null)
 onMounted(() => {
   // console.log(5555, setMenu);
   setMenuH(menuH.value.clientHeight);
@@ -103,6 +107,12 @@ onMounted(() => {
 function goLogin() {
   push("/login");
 }
+function toHome() {
+  push("/home");
+  const i = document.querySelector(".n-menu-item .n-menu-item-content-header");
+  i.click();
+  
+}
 function handleSelect(k) {
   switch (k) {
     case "logout":

src/util/menu.js

@@ -1,18 +1,16 @@
-import orange from "@/icon/orange.svg";
-import { NIcon } from "naive-ui";
 import { RouterLink } from "vue-router";
 
 const menuInfo = {
   options: [
-    {
+    // {
-      label: () => "",
+    //   label: () => "",
-      key: "0",
+    //   key: "0",
-      disabled: true,
+    //   disabled: true,
-      icon: () => h(NIcon, { class: "orange" }, { default: () => h(orange) }),
+    //   icon: () => h(NIcon, { class: "orange" }, { default: () => h(orange) }),
-    },
+    // },
     {
       key: "1",
-      label: () => h(RouterLink, { to: "/home", class: "menu-item font-[500] text-lg" }, { default: () => "首页" }),
+      label: () => h(RouterLink, { ref:"homeItem",to: "/home", class: "menu-item font-[500] text-lg" }, { default: () => "首页" }),
     },
     {
       key: "2",

src/views/home/index.vue

@@ -4,7 +4,7 @@
       <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' }">
-            <n-scrollbar class="pt-6" trigger="hover" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
+            <n-scrollbar class="" trigger="hover" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
               <search></search>
               <NavMenu />
             </n-scrollbar>

src/views/home/navMenu.vue

@@ -13,13 +13,14 @@
               </div>
             </template>
             <div class="flex flex-wrap items-center">
-              <div class="w-[200px] mr-20 mt-6" v-for="j in i.children">
+              <div class="w-[200px] mr-20 mt-6" 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>
                         <template #icon>
-                          <img  width="20" height="20" class="mr-2" :src="j.menuIcon" alt="">
+                          <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>
                         </template>
                         {{ j.menuName }}
                       </n-button>

src/views/widget/index.vue

@@ -33,20 +33,20 @@
 import phone2qq from './component/phone2qq.vue';
 import qq2phone from './component/qq2phone.vue';
 //mark data
-const comp = ref(null);
+const comp = ref(markRaw(qq2phone),);
-const title = ref('');
+const title = ref('QQ号查手机号');
 const widgets = ref([{
   name: 'qq2phone',
   comp: markRaw(qq2phone),
   title: 'QQ号查手机号',
   desc: "请勿乱用，打扰别人生活！",
-  show: false
+  show: true
 }, {
   name: 'phone2qq',
   comp: markRaw(phone2qq),
   title: '手机号查QQ号',
   desc: "请勿乱用，打扰别人生活！",
-  show: false
+  show: true
 }]);