change

src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import test from './module/test'
 import myInfo from './module/myInfo'
 
@@ -80,7 +81,7 @@ const routes: Array<RouteRecordRaw> = [
             {
                 path: '/equipList',
                 name: 'equipList',
-                component: () => import('views/equip/list.vue'),
+                component: () => import('@/views/equip/list.vue'),
                 meta: {
                     title: ''
                 }

src/views/AppMain.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-    import FooterInfo from 'components/FooterInfo/index.vue'
-    import { useRouter } from 'vue-router'
+    import FooterInfo from '../components/FooterInfo/index.vue'
+    import {useRouter} from "vue-router";
+    import $bus from "@/utils/bus"
+    const route = useRoute()
     const router = useRouter()
-    const route: any = useRoute()
-
-    const searchIptRef: any = shallowRef(null)
-
     // 判断是否是个人中心页面 如果是则隐藏页脚
     const isMyInfoPage = () => {
         if (route.path.indexOf('myuser') === -1) {
@@ -27,19 +25,32 @@
     ])
 
     // 搜索按钮
-    const searchKeywordBtn = () => {
-        console.log('搜索关键字', keywordIptValue.value)
+    const searchKeywordBtn = (e) => {
+        if(route.path == '/equipList'){
+            $bus.emit('search',keywordIptValue.value)
+        }else {
+            router.push({
+                name:'equipList',
+                state:{keyWord: keywordIptValue.value}
+            })
+        }
     }
 
     // 点击下方搜索记录时
     const handleHistory = (hisValue: any) => {
         keywordIptValue.value = hisValue
-        nextTick(() => {
-            searchIptRef.value.focus()
-        })
     }
+    //页面刷新回显模糊搜索词
+    $bus.on('callBackText',(val) => {
+        nextTick(() => {
+            keywordIptValue.value = val
+        })
+    })
 
-    onMounted(() => {})
+
+    onMounted(() => {
+
+    })
 </script>
 
 <template>
@@ -57,11 +68,11 @@
                     <span @click="$router.push({ name: 'myuser' })">个人中心</span>
                 </li>
                 <li @click="$router.push('/collect')">
-                    <img src="../assets/img/home/2023_12_01_beijing2/shoucang.png" alt="" />
+                    <img src="./assets/img/home/2023_12_01_beijing2/shoucang.png" alt="" />
                     <span>收藏夹</span>
                 </li>
                 <li>
-                    <img src="../assets/img/home/2023_12_01_beijing2/shouji.png" alt="" />
+                    <img src="./assets/img/home/2023_12_01_beijing2/shouji.png" alt="" />
                     <span class="last-span">手机版</span>
                 </li>
             </ul>
@@ -81,8 +92,7 @@
                     placeholder="输入设备关键词"
                     type="text"
                     v-model="keywordIptValue"
-                    @keydown.enter="searchKeywordBtn"
-                    ref="searchIptRef" />
+                    @keydown.enter="searchKeywordBtn" />
                 <button class="search-btn" @click="searchKeywordBtn">搜索</button>
                 <div class="erweima">
                     <div class="tilte">手机扫码登录</div>
@@ -105,6 +115,7 @@
         <RouterView />
     </div>
     <FooterInfo v-if="isMyInfoPage()" />
+    <!-- <FooterInfo /> -->
 </template>
 
 <style scoped lang="scss">

src/views/equip/comoonents/showImg.vue

@@ -8,7 +8,7 @@
                 <el-icon><ArrowLeftBold /></el-icon>
             </div>
             <div class="list">
-                <div class="line" :style="`transform: translateX(calc((-100% - 10px) / 3 * ${activeUrl - 3}))`">
+                <div class="line" :style="`transform: translateX(calc((-100% - 10px) / 3 * ${move}))`">
                     <div class="item" @mouseenter="mouseenter($event,i)" :class="i == activeUrl && 'activeUrl'" v-for="(v,i) in urlList" :key="i">
                         <img :src="v">
                     </div>
@@ -22,22 +22,26 @@
 </template>
 <script lang="ts" setup>
   import {ref} from "vue";
+  import {el} from "element-plus/es/locale";
 
   const props = defineProps({
       urlList:{
           type:Array,
           default: [
-              'https://img0.baidu.com/it/u=4159562347,2163772228&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=e00e9ffd17009de0374cfc7769143ff6',
-              'https://img1.baidu.com/it/u=2080801041,3349735074&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=5e131c7f2b0d5b02b9e82c0180b62fa8',
-              'https://img0.baidu.com/it/u=1302187753,1022585962&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=13ebea0b989899b3b933c19938b23f76',
-              'https://img0.baidu.com/it/u=2453512896,179623672&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500'
           ]
       }
   })
 
   //激活图片下标
   const activeUrl = ref(0)
-    
+
+  //展示  起始
+  const startIndex = ref(0)
+  //展示  结束
+  const endIndex = ref(2)
+  //移动
+  const move = ref(0)
+
   const init = () => {
 
   }
@@ -54,6 +58,11 @@
       }else if(activeUrl.value == props.urlList?.length){
           activeUrl.value = props.urlList.length - 1
       }
+      if(activeUrl.value > endIndex.value || activeUrl.value < startIndex.value){
+          endIndex.value = endIndex.value + val
+          startIndex.value = startIndex.value + val
+          move.value = move.value + val
+      }
   }
 
 </script>
@@ -101,6 +110,7 @@
             height: 100%;
             display: flex;
             align-items: center;
+            transition: all ease 0.5s;
         }
         .item{
             height: 100%;