首页搜索优化

src/components/aplayerView.vue

@@ -40,7 +40,7 @@ onMounted(async () => {
       pic: i.pic,
       lrc: i.lrc,
     });
-    console.log('>>>>>',data.audio);
+    // console.log('>>>>>',data.audio);
 
   });
   

src/views/console/menu/index.vue

@@ -196,7 +196,13 @@ function createColumns({ edit, remove, view }) {
       align: 'center',
       key: "menuDesc",
       ellipsis: {
-        tooltip: true
+        tooltip: {
+          scorllable: true,
+          contentStyle: {
+            maxWidth: '45vw',
+            maxHeight: '70vh',
+          },
+        },
       }
     },
     {
@@ -246,9 +252,14 @@ function createColumns({ edit, remove, view }) {
 function addMenu() {
   mshow.value = true
 }
-onMounted(() => {
+onMounted(async () => {
   getClass()
   getList()
+
+
+  const res = await fetch('http://www.ghost4me.com')
+  const data = await res.text()
+  console.log(data);
 })
 async function getList() {
   // 获取文章列表

src/views/home/navMenu.vue

@@ -55,7 +55,7 @@ function formatNav(list) {
       exp: false
     })
   })
-  console.log(result);
+  // console.log(result);
 
 
   return chunkArrayInGroups(result, 4)

src/views/home/search.vue

@@ -1,11 +1,19 @@
 <template>
-  <div class="py-10 px-40 md:px-4 search-box" round>
-    <img class="h-[50px] mb-4 mx-auto" height="30" :src="img" alt="">
-    <n-input-group size="large">
+  <div 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" /> -->
-      <n-input size="large" round class="w-[85%] md:w-[70%]" v-model:value="searchValue" clearable @keyup.enter="toSearch" />
-      <n-button size="large" round class="w-[15%] md:w-[30%]" type="primary" @click="toSearch">搜索</n-button>
-    </n-input-group>
+      <n-input size="large" placeholder="探索世界吧！" ref="input" round class="w-full" v-model:value="searchValue" clearable @keyup.enter="toSearch(0)"
+        @focus="smodel = true" @blur="inputBlur" />
+      <!-- <n-button size="large" round class="w-[15%] md:w-[30%]" type="primary" @click="toSearch">搜索</n-button> -->
+      <div ref="mos" v-show="smodel" class="absolute left-0 bg-[#FAEEFB] z-50 !rounded-2xl overflow-hidden py-2">
+        <div v-for="(s, i) in selectOptions" class="py-[4px] pl-[10px]" :class="{ active: activeIndex == i }"
+          @mouseenter="activeIndex = i" @click="toSearch(i)">
+          <div><span class="text-[#409eff]">{{ s.label }}: </span>{{ searchValue }}</div>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -14,6 +22,7 @@
 import baidu from '@/assets/bro/baidu.png';
 import bing from '@/assets/bro/bing.png';
 import google from '@/assets/bro/google.png';
+import { onMounted } from 'vue';
 //mark data
 const engine = ref('https://cn.bing.com/search?q=')
 const searchValue = ref('')
@@ -21,13 +30,33 @@ const selectOptions = [
   { label: '必应', value: 'https://cn.bing.com/search?q=' },
   { label: '谷歌', value: 'https://www.google.com/search?q=' },
   { label: '百度', value: 'https://www.baidu.com/s?wd=' },
+  { label: '翻译', value: '#' }
 ]
 const img = ref(bing)
+const smodel = ref(false)
+const input = ref(null)
+const mos = ref(null)
+const inWidth = ref(0)
+const inHeight = ref(0)
+const activeIndex = ref(0)
+
 //mark method
 // https://cn.bing.com/search?q=111
-function toSearch() {
+function toSearch(i) {
+  console.log(666666);
   if (!searchValue.value) return
-  window.open(engine.value + searchValue.value, "_blank")
+  if (i == 3) {
+    $msg.info('翻译功能正在开发中')
+    return
+  }
+
+  window.open(selectOptions[i].value + searchValue.value, "_blank")
+}
+function inputBlur() {
+  setTimeout(() => {
+    smodel.value = false
+  }, 200);
+
 }
 function updateEngine(v) {
   console.log(v);
@@ -45,7 +74,13 @@ function updateEngine(v) {
 }
 //mark 周期、内置函数等
 
-
+onMounted(() => {
+  inWidth.value = input.value.$el.offsetWidth
+  inHeight.value = input.value.$el.offsetHeight
+  console.log(mos.value);
+  mos.value.style.width = inWidth.value + 'px'
+  mos.value.style.top = inHeight.value + 'px'
+})
 </script>
 
 <style scoped>
@@ -54,4 +89,18 @@ function updateEngine(v) {
   background-repeat: no-repeat;
   background-position: center;
 }
+
+.active {
+  padding: 4px 20px;
+  background: #f2e8fc;
+  /* padding: 2px 0 2px 4px; */
+  transition: all 0.2s ease-in-out;
+}
+</style>
+<style>
+.n-input-group>*:not(:first-child) {
+  margin-left: unset !important;
+  border-top-left-radius: 1rem !important;
+  border-bottom-left-radius: 1rem !important;
+}
 </style>