首页 搜索

src/App.vue

@@ -6,8 +6,50 @@
 
 <script>
 export default {
-  name: "App"
+  name: "App",
+  methods: {
+    disableZoom(event){
+      if (event.ctrlKey && (event.key === '+' || event.key === '-' || event.key === '=')) {
+        event.preventDefault(); // 阻止默认行为
+        console.log('缩放功能已禁用');
+      }
+    },
+    disableZoomByWheel(event) {
+      if (event.ctrlKey) {
+        event.preventDefault(); // 阻止缩放
+        console.log('鼠标滚轮缩放功能已禁用');
+      }
+    },
+    adjustZoom() {
+      console.log('execute...')
+      if(window.innerWidth>768){
+        const scale = window.devicePixelRatio; // 获取用户的系统缩放比例
+        document.body.style.zoom = 1 / scale; // 设置缩放以抵消系统缩放
+
+        // 获取实际视口高度和宽度
+        const vh = window.innerHeight * scale;
+        const vw = window.innerWidth * scale;
+
+        // 将计算结果应用为 CSS 自定义属性
+
+        document.documentElement.style.setProperty('--vh', `${vh}px`);
+        document.documentElement.style.setProperty('--vw', `${vw}px`);
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('keydown', (event) => this.disableZoom(event));
+    window.onload = this.adjustZoom();
+    window.addEventListener('wheel', (event) => this.disableZoomByWheel(event), { passive: false });
+    window.addEventListener('resize',()=> this.adjustZoom())
+  },
+  unmounted() {
+    window.removeEventListener('keydown', (event) => this.disableZoom(event));
+    window.removeEventListener('wheel', (event) => this.disableZoomByWheel(event), { passive: false });
+    window.removeEventListener('resize', ()=>this.adjustZoom())
+  }
 };
+
 </script>
 <style>
 @import url("//at.alicdn.com/t/c/font_1890699_5zxmcxmwvtf.css");

src/assets/css/home.css

@@ -48,11 +48,11 @@ ul,li{
   font-size: 18px;
 }
 .remText{
-  font-size: .8rem;
+  font-size: 16px;
 }
 
 .remSubText{
-  font-size: 1rem;
+  font-size: 16px;
 }
 
 .duration2{
@@ -79,6 +79,9 @@ ul,li{
 .h100{
   height: 100%;
 }
+.vh100{
+  height: 100vh;
+}
 .right0{
   right: 0;
 }
@@ -136,7 +139,7 @@ ul,li{
     margin-top: 0px;
   }
   .indexNavxcT{
-    padding-top: 50%;
+
   }
   .homeContainer{
     max-width: 100%;
@@ -254,7 +257,7 @@ ul,li{
     margin-top: 50px;
   }
   .indexNavxcT{
-    padding-top: 20%;
+
   }
   .gap-1{
     padding-bottom: 55px;
@@ -330,7 +333,7 @@ ul,li{
 }
 @media screen and (min-width: 992px) {
   .indexNavxcT{
-    padding-top: 20%;
+
   }
   .swipercomTvR2Bj{
     top: 100%;
@@ -409,7 +412,7 @@ ul,li{
 }
 @media screen and (min-width: 1280px) {
   .indexNavxcT{
-    padding-top: 20%;
+
   }
   .homeContainer{
     max-width: 1280px;
@@ -448,8 +451,11 @@ ul,li{
   }
 }
 @media screen and (min-width: 1440px) {
+  .MenuListBoxH{
+    /* min-height: 150px; */
+  }
   .indexNavxcT{
-    padding-top: 20%;
+
   }
   .swipercomSubEnLenR2{
     font-size: 1.8rem;
@@ -520,11 +526,14 @@ ul,li{
   }
 }
 @media screen and (min-width: 1800px) {
+  .MenuListBoxH{
+    /* min-height: 300px; */
+  }
   .indexRoll2Hd{
     width: 468px
   }
   .indexNavxcT{
-    padding-top: 20%;
+
   }
   .swipercomSubEnLenR2{
     font-size: 2rem;
@@ -544,10 +553,10 @@ ul,li{
     padding-left: 240px;
   }
   .w3{
-    width: 50%;
+    width: 40%;
   }
   .insli-leftDescr{
-    width: 55%;
+    width: 266px;
   }
   .swipercomTitle{
     padding: 40px 0;

src/boot/utils.js

@@ -9,8 +9,9 @@ import message from './message'
 import product from './product'
 import VueViewer from 'v-viewer'
 // import VueCoreVideoPlayer from 'vue-core-video-player'
-import ElementUI from "element-ui";
-Vue.use(ElementUI);
+import 'animate.css';
+// 或者只引入需要的动画类
+import 'animate.css/source/attention_seekers/bounce.css';
 Vue.prototype.$EventBus = new Vue()
 Vue.use(VueCoreVideoPlayer)
 Vue.use(VueViewer)
@@ -29,7 +30,6 @@ Vue.prototype.domainManager = function() {
             domainUrl = "http://testapi.oytour.com";
         } else if (domainNameUrl.indexOf('oytour') !== -1) {
             domainUrl = "http://reborn.oytour.com";
-            domainUrl = "http://192.168.5.46";
             // domainUrl = 'http://192.168.10.68' //'http://192.168.10.226:8015' ''http://192.168.10.9:8083' '
         }
         var obj = {

src/components/home/indexNav.vue

 <template>
   <!--  @mouseleave="ClearData" -->
-  <q-page class="relative gap-1 overflow-hidden animate__animated duration5" @mouseleave="ClearData"
-  :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}" style="height: 100vh;">
-    <div class="absolute top0 right0 bottom0 left0 indexNavFormP row">
-        <div class="col column carousel1-left relative" @mouseenter.stop.prevent="ClearData">
-          <!-- <div class="row justify-center" @mouseenter="ClearData">
-            <q-img class="carousel1-leftImg" :src="plugData.Logo"/>
-          </div> -->
-          <div class="text-center col" style="padding-top: 5rem;" @mouseenter.stop.prevent="ClearData">
-            <img class="carousel1-leftImg inline-block" :src="plugData.Logo"/>
+  <q-page class="relative gap-1 animate__animated duration5 overflow-hidden"
+  :class="[$q.platform.is.desktop?'window-height':'vh100']" @mouseleave="ClearData"
+  :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}">
+    <div class="absolute top0 right0 bottom0 left0 indexNavFormP row no-wrap">
+        <div class="column justify-between carousel1-left relative" @mouseenter.stop.prevent="ClearData"
+        v-if="$q.platform.is.desktop">
+          <div class="text-center" style="padding-top: 100px;"
+          @mouseenter.stop.prevent="ClearData"
+          >
+            <img class="carousel1-leftImg inline-block" :src="plugData.Logo">
+            <p class="font-serifEn fz20 q-pt-lg text-secondary opacity-80">{{plugData.SubTitle}}</p>
           </div>
-          <div class="col column" style="position: relative; z-index: 2;">
-            <div class="column col" @mouseenter.stop.prevent="ClearData"
-            style="padding-top: 40px;flex-grow: 1;"
+          <div class="column relative" style="z-index: 3;">
+            <!-- style="padding-top: 60px;" -->
+            <div class="column" @mouseenter.stop.prevent="ClearData"
             :style="{'z-index': CurrentIndex==null?-2:2}">
-              <ul class="column MenuListBox row relative">
+              <ul class="column MenuListBox MenuListBoxH row relative justify-end">
                 <div class="p-x40 row no-wrap justify-center">
                   <template v-for="(item,index) in plugData.MenuList">
                     <li class="MenuListLi row justify-center cursor-pointer"
                     :class="[CurrentIndex>=0&&CurrentIndex==index?' active':'']"
                     >
                       <div class="cursor-pointer flex flex-col items-center relative"
-                      >
+                      @click="OpenNewUrl(item.LinkUrl)">
                         <div class="row min-w-50px" v-on:mouseenter="handleMouseEnter($event,index)">
                           <div class="font-serifEn writing-modes-vertical p text-gray-700">
                             <span class="inline-block tracking-6 fontW300 remTetil">
@@ -40,9 +42,10 @@
 
 
               </ul>
-              <div class="col" >
+              <div class="col full-height full-width" style="min-height: 250px;">
                 <div class="SubMenuListBox2 full-height full-width "
-                :class="[CurrentIndex==null?'':'full-height full-width animate__fadeInUpBig']">
+                :class="[CurrentIndex==null?'':'full-height full-width animate__fadeInUpBig relative']"
+                >
                   <ul class="MenuListBox row justify-center">
                     <template v-for="(item,index) in plugData.MenuList">
                       <li class="MenuListLi row justify-center cursor-pointer">
@@ -53,8 +56,9 @@
                     </template>
                   </ul>
                   <template v-for="(item,index) in plugData.MenuList">
-                    <div class="row justify-center items-center SubMenuListBox q-py-lg textOverEllipsis" v-show="CurrentIndex==index"
-                      :class="[CurrentIndex==index?'full-height full-width active':'']">
+                    <div class="row justify-center items-center SubMenuListBox q-py-lg textOverEllipsis"
+                      :class="[CurrentIndex==index?'full-height full-width active':'']"
+                      v-show="CurrentIndex==index">
                         <div class="row justify-center">
                           <template v-for="(items,i) in item.SubMenuList">
                             <a class="SubMenuListText relative writing-modes-vertical
@@ -74,14 +78,14 @@
               <li class="q-py-sm q-px-lg relative cursor-pointer" v-for="(item,index) in plugData.BottomList"
               @click.stop="OpenNewUrl(item.LinkUrl)">
                 <a class="text-grey-7 transition-base">
-                  <span class="text-xs font-serif tracking-1 cursor-pointer">{{item.LinkTitle}}</span>
+                  <span class="fz14 font-serif tracking-1 cursor-pointer">{{item.LinkTitle}}</span>
                 </a>
               </li>
             </ul>
           </div>
         </div>
         <div class="carousel1-right overflow-hidden relative"
-        :class="[windowWidth>=1280?'col':'col-12']" @mouseenter.stop.prevent="ClearData">
+        :class="[$q.platform.is.desktop?'col':'col-12']" @mouseenter.stop.prevent="ClearData">
         <template v-if="windowWidth>=768">
             <q-img v-if="ImgObj.FileType!=2" class="carousel1-rightImg" @mouseenter.stop.prevent="ClearData"
             :class="[oldCoverImg!=coverImg?'active':'']"
@@ -103,43 +107,183 @@
                 <q-carousel-slide :name="index+1" :img-src="item" />
               </template>
             </q-carousel>
-            <div class="MBgColorBox row justify-center items-center">
+            <div class="MBgColorBox column justify-center items-center">
               <q-img class="MBgColorImg" :src="plugData.MLogo" fill="contain"></q-img>
+              <p class="font-serifEn fz20 q-pt-lg text-white opacity-80">{{plugData.SubTitle}}</p>
             </div>
           </template>
-          <template v-if="windowWidth<1280">
-            <span class="absolute indexNavxcText writing-modes-vertical cursor-pointer" @click="isMenu=true">行程线路</span>
-            <div class="absolute indexNavxcBox" v-if="isMenu">
-              <div class="relative" style="height: 100vh;">
-                <i class="iconfont absolute indexNavxcIcon cursor-pointer" style="right: 20px;top: 20px;font-size: 25px; "
+          <div class="absolute indexNavxcText cursor-pointer"
+          :class="[$q.platform.is.desktop?'':'writing-modes-vertical active']"
+          @click="isMenu=true">
+            <div class="row item-center q-py-md q-px-md">
+              <template v-if="$q.platform.is.desktop">
+                <span>Search</span>
+                <div class="q-px-md"><q-separator style="height: 1px;width: 30px; margin: auto 0;background: rgba(225,225,225,.7);" vertical/></div>
+              </template>
+              <span>行程日期搜索</span>
+            </div>
+          </div>
+            <div class="indexNavxcBox row item-center justify-center" v-if="isMenu">
+              <div class=""
+              :class="[$q.platform.is.mobile?'indexNavxcBoxCenter':'']">
+                <i class="iconfont absolute indexNavxcIcon cursor-pointer" style="right: 20px;top: 20px;font-size: 38px; "
                 @click.stop="isMenu=false">×</i>
                 <div class="q-pb-lg">
                   <div class="text-center indexNavxcT">
-                    <p class="font-serifEn text-stone q-pb-sm">Travel Line</p>
+                    <p class="font-serifEn text-stone q-pb-sm">Search</p>
                     <p class="font-serif h3 text-gray-900">
-                    <span class="inline-block">行程线路</span></p></div>
+                    <span class="inline-block">行程日期搜寻</span></p></div>
                 </div>
-                <!-- <ul class="q-px-sm row indexNavxcTitleM">
-                  <template v-for="(item,index) in plugData.MenuList">
-                    <li @click="CurrentIndex=index">{{item.MenuName}}</li>
-                  </template>
-                </ul> -->
-                <ul class="row indexNavxcTM justify-center">
-                  <template v-for="(item,index) in plugData.MenuList">
-                      <li @click.stop="OpenNewUrl(item.LinkUrl)">{{item.MenuName}}</li>
-                  </template>
-                </ul>
-                <ul class="BottomListBox absolute row justify-center" style="bottom: 0;">
-                  <li class="q-py-sm q-px-lg relative cursor-pointer" v-for="(item,index) in plugData.BottomList"
-                  @click.stop="OpenNewUrl(item.LinkUrl)" v-if="item.LinkUrl">
-                    <a class="text-grey-7 transition-base">
-                      <span class="text-xs font-serif tracking-1 pointer-events-none">{{item.LinkTitle}}</span>
-                    </a>
-                  </li>
-                </ul>
+                <div class="indexNavxcBoxS"
+                :class="[$q.platform.is.mobile?'active':'']">
+                  <div class="column">
+                      <p class="fz15 opacity-50">关键词</p>
+                      <q-input
+                        outlined
+                        id="search_key"
+                        v-model="searchKey"
+                        class="col"
+                        clearable
+                        label="搜尋目的地、景點、行程觀光或酒店名稱..."
+                        @focus="searchFocusHandler"
+                        @blur="searchBlurHandler"
+                        @keyup.enter="goSearchHandler"
+                        clearable
+                      />
+                  </div>
+                  <div class=""
+                  :class="[$q.platform.is.mobile?'column':'row q-pt-md']">
+                    <div class="col column">
+                      <p class="fz15 opacity-50">线路</p>
+                      <div>
+                        <q-select outlined
+                          v-model="line"
+                          :options="plugData.MenuList"
+                          emit-value map-options
+                          option-label="MenuName"
+                          option-value="MenuName"
+                          @input="getLine"
+                          clearable>
+                        </q-select>
+                      </div>
+                    </div>
+                    <template v-if="!isSeries&&SubMenuList.length>0">
+                      <div class="split-word q-pl-xs q-pr-xs full-height" v-if="$q.platform.is.desktop">
+                        &nbsp;&nbsp;&nbsp;
+                      </div>
+                      <div class="col column">
+                        <p class="fz15 opacity-50">系列</p>
+                        <div>
+                          <q-select outlined
+                            v-model="series"
+                            :options="SubMenuList"
+                            emit-value map-options
+                            option-label="MenuName"
+                            option-value="MenuName"
+                            @input="getSeries"
+                            clearable>
+                          </q-select>
+                        </div>
+                      </div>
+                    </template>
+
+                  </div>
+                  <div class=""
+                  :class="[$q.platform.is.mobile?'column':'row q-pt-md']" v-if="isSeries">
+                    <div class="col column">
+                      <p class="fz15 opacity-50">门票/住宿/交通</p>
+                      <div>
+                        <q-select outlined
+                          v-model="type1"
+                          :options="CategoryList"
+                          emit-value map-options
+                          option-label="CategoryName"
+                          option-value="Id"
+                          @input="getType1"
+                          clearable>
+                        </q-select>
+                      </div>
+                    </div>
+                    <template v-if="optionsList.length>0">
+                      <div class="split-word q-pl-xs q-pr-xs full-height" v-if="$q.platform.is.desktop">
+                        &nbsp;&nbsp;&nbsp;
+                      </div>
+                      <div class="col column" :class="[$q.platform.is.mobile?'':'q-pt-md']">
+                        <p class="fz15 opacity-50">分类</p>
+                        <div>
+                          <q-select outlined
+                            v-model="type2"
+                            :options="optionsList"
+                            emit-value map-options
+                            option-label="CategoryName"
+                            option-value="Id"
+                            @input="getType2"
+                            clearable>
+                          </q-select>
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                  <div class="column" :class="[$q.platform.is.mobile?'':'q-pt-md']">
+                    <p class="fz15 opacity-50">出发时间</p>
+                    <div class=""
+                    :class="[$q.platform.is.mobile?'column':'row item-center']">
+                      <div class="col">
+                        <q-input
+                          outlined
+                          v-model="searchDate"
+                          mask="date"
+                          class=""
+                          clearable
+                        >
+                          <template v-slot:append>
+                            <q-icon name="event" class="cursor-pointer">
+                              <q-popup-proxy ref="qS3DateProxy">
+                                <q-date
+                                  mask="YYYY-MM-DD"
+                                  subtitle="选择"
+                                  v-model="searchDate"
+                                  @input="() => $refs.qS3DateProxy.hide()"
+                                />
+                              </q-popup-proxy>
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </div>
+                      <div class="split-word q-pl-xs q-pr-xs full-height">
+                        至
+                      </div>
+                      <div class="col">
+                        <q-input
+                          outlined
+                          v-model="searchEndDate"
+                          mask="date"
+                          class=""
+                          clearable
+                        >
+                          <template v-slot:append>
+                            <q-icon name="event" class="cursor-pointer">
+                              <q-popup-proxy ref="qS4DateProxy">
+                                <q-date
+                                  mask="YYYY-MM-DD"
+                                  subtitle="选择"
+                                  v-model="searchEndDate"
+                                  @input="() => $refs.qS4DateProxy.hide()"
+                                />
+                              </q-popup-proxy>
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row" :class="[$q.platform.is.mobile?'':'q-pt-lg']">
+                    <q-btn unelevated  color="secondary" label="搜 寻" class="col q-mt-lg fz18" @click="goUrl"/>
+                  </div>
+                </div>
+
               </div>
             </div>
-          </template>
 
         </div>
     </div>
@@ -147,6 +291,7 @@
   </q-page>
 </template>
 <script>
+import {date} from 'quasar'
 export default {
   props: ['plugData','Current','windowWidth','top','currentHeight'],
   data() {
@@ -159,6 +304,21 @@ export default {
       slide: 1,
       autoplay: 5000,
       FileUrlList: [],
+      searchKey: '',
+      searchDate: "",
+      searchEndDate: "",
+      showSplitPannel: false,
+      CategoryList: [],
+      optionsList: [],
+      SubMenuList: [],
+      line: '',
+      lineUrl: '',
+      series: '',
+      seriesUrl: '',
+      isSeries: false,
+      type1: '',
+      type2: '',
+      LinkUrl: '',
     }
   },
   watch: {
@@ -179,9 +339,118 @@ export default {
         this.FileUrlList.push(x.FileUrl)
       }
     })
-    console.log(this.windowWidth,'---===')
+    if (localStorage.baseifo) {
+      var jObj = JSON.parse(window.localStorage.getItem('baseifo'))
+      this.CategoryList = jObj.CategoryList
+      this.CategoryList.splice(0,1)
+
+    }
   },
   methods: {
+    goUrl(){
+      let URL = ''
+      if(this.LinkUrl) {
+        URL = `${this.LinkUrl.indexOf('/#/searchProduct')!=-1?this.LinkUrl:this.LinkUrl+'?'}${this.searchKey?'&qsearchKey='+this.searchKey:''}${this.searchDate?'&qsearchDate='+this.searchDate:''}${this.searchEndDate?'&qsearchEndDate='+this.searchEndDate:''}${this.type1&&this.type2?'&categoryId='+this.type2:this.type1&&!this.type2?'&categoryId='+this.type1:''}`
+        console.log(URL,'----')
+        this.OpenNewUrl(URL)
+      }
+      else {
+        this.OpenNewUrl('http://www.oytour.com/#/searchProduct')
+        // this.CommonJump('/searchProduct',{})
+        // setTimeout(()=>{
+        //   window.location.reload()
+        // },300)
+      }
+    },
+    getType2(e){
+      console.log(this.type2,'----type2222222')
+    },
+    getType1(e){
+      this.optionsList = []
+      console.log(this.type1,'----type111111')
+      let list = this.CategoryList.filter(x=>{
+        if(x.Id==e){
+          this.lineUrl = x.LinkUrl
+          return x.Id==e
+        }
+      })
+      let obj = {
+        BackgroundImage: "",
+        CategoryName: "不限",
+        Icon: "",
+        Id: '',
+        IsHot: '',
+        IsSelfGuidedTour: '',
+        Level: 0,
+        LinkUrl: '',
+        ParentId: 0,
+        Sort: 0,
+        SubList: null
+      }
+      if(list[0].SubList[0].CategoryName!='不限') list[0].SubList.unshift(obj)
+      this.optionsList = list[0].SubList
+    },
+    getSeries(e){
+      let list = this.SubMenuList.filter(x=>{
+        if(x.MenuName==e){
+          this.LinkUrl = this.seriesUrl = x.LinkUrl
+          console.log(this.LinkUrl,'----222')
+          if(x.LinkUrl.indexOf('/#/searchProduct')!=-1) {
+            this.isSeries = false
+          }
+          else if(x.LinkUrl) {
+            this.isSeries = true
+          }else{
+            this.LinkUrl = this.lineUrl
+          }
+          return x.MenuName==e
+        }
+      })
+      console.log(this.LinkUrl,'----')
+    },
+    getLine(e){
+      this.SubMenuList = []
+      this.optionsList = []
+      this.isSeries = false
+      this.series = '不限'
+      this.seriesUrl = ''
+      this.type1 = ''
+      this.type2 = ''
+      let list = this.plugData.MenuList.filter(x=>{
+        if(x.MenuName==e){
+          this.LinkUrl = this.lineUrl = x.LinkUrl
+          console.log(this.LinkUrl,'----11111')
+          if(x.LinkUrl.indexOf('/#/searchProduct')!=-1) {
+            this.isSeries = false
+          }
+          else if(x.LinkUrl) {
+            this.isSeries = true
+          }
+          return x.MenuName==e
+        }
+      })
+      let obj = {
+        FileType: '',
+        FileUrl: '',
+        LinkTitle: '',
+        LinkUrl: '',
+        MenuName: '不限',
+        MenuSubName: '',
+        SubMenuList: null,
+      }
+      if(list.length>0&&list[0].SubMenuList[0].MenuName!='不限') list[0].SubMenuList.unshift(obj)
+      if(list.length>0) this.SubMenuList = list[0].SubMenuList
+    },
+    searchFocusHandler() {
+      if (this.searchKey == "") {
+        setTimeout(() => {
+          this.showSplitPannel = true;
+        }, 200);
+      }
+    },
+    searchBlurHandler() {
+      //this.showSplitPannel = false;
+    },
     handleMouseEnter($event,index){
       this.oldCoverImg = JSON.parse(JSON.stringify(this.coverImg))
       if(this.CurrentIndex==index) return
@@ -203,7 +472,41 @@ export default {
   }
 }
 </script>
+<style scoped>
+  ::v-deep .indexNavxcBoxS .q-field__control{
+    height: 45px;
+  }
+  ::v-deep .indexNavxcBoxS .q-field--auto-height .q-field__native{
+    min-height: 45px;
+  }
+  ::v-deep .indexNavxcBoxS .q-field--auto-height .q-field__control{
+    min-height: 45px;
+  }
+  /* ::v-deep .indexNavxcBoxS.active .q-field__control{
+    height:40px;
+  }
+  ::v-deep .indexNavxcBoxS.active .q-field--auto-height .q-field__native{
+    min-height: 40px;
+  }
+  ::v-deep .indexNavxcBoxS.active .q-field--auto-height .q-field__control{
+    min-height: 40px;
+  } */
+</style>
 <style lang="scss">
+  .indexNavxcBoxCenter{
+    width: 90%;
+  }
+  .indexNavxcBoxS{
+    width: 750px;
+    padding: 60px 80px;
+    border-radius: 10px;
+    margin: auto;
+    background: #fff;
+  }
+  .indexNavxcBoxS.active{
+    width: 100%;
+    padding: 20px 10px;
+  }
   .indexNavxcTitleM{
     font-size: 15px;
   }
@@ -226,25 +529,29 @@ export default {
     color: $secondary;
   }
   .indexNavxcBox{
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 4;
-    background: #fff;
+    z-index: 3;
+    background: #eee;
   }
   .indexNavxcText{
-    right: 0;
-    top: 50%;
     z-index: 3;
-    letter-spacing: 3px;
     background: $secondary;
     padding: 8px 8px;
     color: #fff;
+    top: 0;
+    right: 0;
+  }
+  .indexNavxcText.active{
+    top: 40%;
+    letter-spacing: 3px;
   }
   @media only screen and (max-width: 1280px) {
     .carousel1-left{
-      display: none;
+
     }
   }
   .indexNavForm{
@@ -259,10 +566,11 @@ export default {
 
   }
   .carousel1-leftImg{
+    width: 80px;
     display: block;
   }
   .MenuListBox{
-    padding: 0 40px;
+    padding: 0 60px;
   }
   .MenuListBox li{
     width: 81px;
@@ -289,14 +597,13 @@ export default {
     transition: all .4s;
     opacity: 0;
     background-color: $primary;
-    z-index: 3;
   }
   .SubMenuListBox.active{
     opacity: 1;
   }
  .MenuListItem.active{
     opacity: 1;
-    bottom: -8px;
+    bottom: -.6rem;
   }
   .MenuListLi.active .SubMenuListBox{
     position: absolute;
@@ -325,7 +632,7 @@ export default {
   }
   .SubMenuListText{
     width: 39px;
-    letter-spacing: normal;
+    letter-spacing: 4px;
     line-height: 23px;
     color: rgb(255,255,255);
     transition: all .5s;
@@ -379,6 +686,6 @@ export default {
     z-index: 2;
   }
   .MBgColorImg{
-   width: 7.5rem;
+   width: 5rem;
   }
 </style>

src/components/home/indexRoll1.vue

 <template>
   <div class="indexRoll1Box" @mouseover.stop.prevent="handleMouseMove" @mouseleave.stop.prevent="handleMouseLeave"
-  :class="[Current=='left'?'activeL':'activeR']"
-  @click="carousel(Current)">
+  :class="[Current=='left'?'activeL':Current=='right'?'activeR':'']"
+  @click.stop="carousel(Current)">
     <div class="relative gap-1 overflow-hidden"
     :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}">
       <div class="homeContainer">
@@ -32,10 +32,10 @@
               <swiper-slide :key="index" :index="index"
               class="">
               <div class="relative" :style="{'background':`url(${item.FileUrl})no-repeat`,'background-size':'cover'}"
-              style="border-radius:10px;" @click.stop="OpenNewUrl(item.LinkUrl)" @mouseover.stop.prevent="getINdex(index)">
+              style="border-radius:10px;" @click.stop="OpenUrl(item.LinkUrl,index)" >
                 <template v-if="item.FileType==1">
                     <q-img :src="item.FileUrl" no-default-spinner alt="image" :ratio="16/9" fill="cover"
-                    @click.stop="OpenNewUrl(item.LinkUrl)" class="">
+                    @click.stop="OpenUrl(item.LinkUrl,index)" class="">
                       <template v-slot:error>
                         <div class="absolute inSliMLogo">
                           <q-img v-if="plugData.MLogo" :src="plugData.MLogo"
@@ -46,7 +46,7 @@
                 </template>
                 <q-img v-else alt="" :ratio="16/9" fill="cover">
                   <q-video class="" style="width: 100%;" :src="item.FileUrl" frameborder="0"
-                  allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
+                  allowfullscreen @click.stop="OpenUrl(item.LinkUrl,index)"/>
                 </q-img>
                 <div class="swipercomSubEnLen absolute bg-white row items-center justify-center">
                   <div class="swipercomSubEnNum row" v-if="windowWidth>=992">
@@ -202,9 +202,9 @@
       }, 500);
     },
     methods: {
-      getINdex(index){
-        this.isRight = this.$refs.mySwiper.swiper.realIndex!=index
-        // console.log(this.slide,index)
+      OpenUrl(URL,index) {
+        if(index!=this.slide) return this.carousel(this.Current)
+        this.OpenNewUrl(URL)
       },
       slideChangeTransitionEnd(){
         this.slide = this.$refs.mySwiper.swiper.realIndex
@@ -225,7 +225,7 @@
         }
       },
       handleMouseMove(el) {
-        if(this.windowWidth<768) return
+        if(this.windowWidth<768) return this.Current = null
         if(!this.isRight){
           this.setRight()
         }
@@ -238,15 +238,16 @@
         }else if(el.x>width) {
           this.Current = 'right'
         }
-        this.X = el.x
-        this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
+        // this.X = el.x
+        // this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
       },
       setRight(){
         this.isRight = true
       },
       handleMouseLeave(e){
+        this.Current = null
+        return
         this.isRight = false
-        console.log(this.isRight ,'=====')
       }
   }
 }

src/components/home/indexRoll2.vue

@@ -28,6 +28,11 @@
             class="swiper" @slideChange="onSlideChange">
             <swiper-slide :key="index" :index="index" style="width: 12.91vw;"
             class="cursor-pointer swiperR2W" v-for="(item, index) in plugData.NavList">
+            <div class="relative">
+              <div class="swipercomSubEnLenR2 absolute font-serifEn">
+                <span class="writing-modes-vertical">{{item.SubEnName}}</span>
+              </div>
+            </div>
             <div class="relative swiperR2Hover">
               <template v-if="item.FileType==1">
                   <q-img :src="item.FileUrl" alt="image" :ratio="0.64" fill="cover"
@@ -44,9 +49,7 @@
                 <q-video class="cursor-pointer" style="width: 100%;"  :src="item.FileUrl" frameborder="0"
                 allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
               </q-img>
-              <div class="swipercomSubEnLenR2 absolute writing-modes-vertical font-serifEn">
-                {{item.SubEnName}}
-              </div>
+
               <div class="swipercomTvR2BjBox">
                 <div class="swipercomTvR2Bj absolute">&nbsp;</div>
                 <div class="swipercomTvR2 absolute">
@@ -93,6 +96,7 @@
 <script>
   import { swiper, swiperSlide } from "vue-awesome-swiper";
   import "swiper/dist/css/swiper.css";
+  const scale = 1 / window.devicePixelRatio;
   export default {
     components: { swiper, swiperSlide },
     props: ['plugData','windowWidth','top','currentHeight'],
@@ -106,43 +110,43 @@
           spaceBetween: 50,
           breakpoints: {
             1950: {
-              slidesPerView: 5.8,
+              slidesPerView: 5.8/scale,
               spaceBetween: 40
             },
             1800: {
-              slidesPerView: 4.5,
+              slidesPerView: 4.5/scale,
               spaceBetween: 40
             },
             1700: {
-              slidesPerView: 3,
+              slidesPerView: 3/scale,
               spaceBetween: 40
             },
             1600: {
-              slidesPerView: 3,
+              slidesPerView: 3/scale,
               spaceBetween: 40
             },
             1500: {
-              slidesPerView: 4,
+              slidesPerView: 4/scale,
               spaceBetween: 30
             },
             1400: {
-              slidesPerView: 4,
+              slidesPerView: 4/scale,
               spaceBetween: 30
             },
             1300: {
-              slidesPerView:3.7,
+              slidesPerView:3.7/scale,
               spaceBetween: 30
             },
             1200: {
-              slidesPerView:3.15,
+              slidesPerView:3.15/scale,
               spaceBetween: 30
             },
             1100: {
-              slidesPerView:2.7,
+              slidesPerView:2.7/scale,
               spaceBetween: 30
             },
             800: {
-              slidesPerView:1.3,
+              slidesPerView:1.3/scale,
               spaceBetween: 30
             },
             640: {
@@ -365,9 +369,10 @@
   font-size: 25px;
 }
 .swipercomR2{
-  .swiperR2W{
-    /* max-width: 12.91vw !important; */
-  }
+
+}
+.swiperR2W{
+
 }
 .swipercomSubEnLenR2{
   font-size: 2rem;
@@ -375,6 +380,7 @@
   top: -1rem;
   letter-spacing: .5rem;
   color: $secondary;
+  z-index: 2;
 }
 .swipercomTvR2BjBox{
 

src/components/home/indexSlider.vue

 <template>
   <!-- no-course  -->
+  <!-- :class="[Current=='left'?'activeL':Current=='right'?'activeR':'']" -->
+  <!-- :style="[Current=='left'?`cursor:url(${cursorUrlL}),auto,fontSize:${cursorSize} + 'px'`:Current=='right'?`cursor:url(${cursorUrlR}),auto,fontSize:${cursorSize} + 'px'`:''
+    ]" -->
   <div class="indexSliderBox animate__animated duration2" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave"
-  :class="[Current=='left'?'activeL':'activeR']"
+  :style="{ cursor: 'url(' + `${Current=='left'?cursorUrlL:Current=='right'?cursorUrlR:''}` + '), auto',
+   fontSize: cursorSize + 'px'}"
   @click="carousel(Current)">
     <div class="relative gap-1 overflow-hidden"
     :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}"
@@ -128,6 +132,9 @@ export default {
       autoplay: 40000000,
       FileUrlList: [],
       isRight: false,
+      cursorUrlL: require('../../assets/img/home/left.png'),
+      cursorUrlR: require('../../assets/img/home/right.png'),
+      cursorSize: 16,
     }
   },
   watch: {
@@ -173,18 +180,18 @@ export default {
       }
     },
     handleMouseMove(el) {
-      if(this.windowWidth<768) return
+      if(this.windowWidth<768) return this.Current = null
       if(!this.isRight) this.isRight = true
       let width = this.windowWidth/2
       if(el.x<width){
         this.Current = 'left'
-        this.X = el.x+50
+        // this.X = el.x+50
       }else if(el.x>width) {
         this.Current = 'right'
-        this.X = el.x-50
+        // this.X = el.x-50
       }
 
-      this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
+      // this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
     },
     handleMouseLeave(){
       this.isRight = false
@@ -209,11 +216,19 @@ export default {
     height: 100%;
   }
   .activeL{
-    cursor: url('../../assets/img/home/left.png'),auto !important;
+    cursor: url('../../assets/img/home/left.png'),auto!important;
+    /* 禁止缩放cursor */
+    -webkit-user-zoom: fixed !important;
+    -moz-user-zoom: fixed !important;
+    user-zoom: fixed !important;
+    /* 以下是针对IE的额外设置 */
+    -ms-user-zoom: fixed !important;
+    -ms-touch-action: none !important;
   }
   .activeR{
     cursor: url('../../assets/img/home/right.png'),auto !important;
   }
+
   .indexSliderBox.q-py{
     padding: 80px 0 40px 0;
   }

src/components/home/mouse.vue

@@ -21,7 +21,7 @@
 </script>
 <style scoped>
   .sliderRight{
-    z-index: 9;
+    z-index: 1;
     opacity: 0;
     margin: -2rem 0 0 -2rem;
     --tw-backdrop-blur: blur(4px);

src/components/navs/newHor-btm.vue

@@ -143,7 +143,7 @@
             </li>
           </ul>
         </div>
-        <div :class="[windowWidth<1300?'hidden':'']">
+        <div :class="[!$q.platform.is.desktop?'hidden':'']">
           <ul class="l-footer--list row">
             <li class="l-footer--list__item relative cursor-pointer" v-for="(item,index) in plugData.MenuList">
               <a @click="OpenNewUrl(item.LinkUrl)"

src/css/app.scss

@@ -162,4 +162,7 @@
 }
 .border-b {
     border-bottom: 1px solid #eee;
-}
+}
\ No newline at end of file
+.window-height{
+  height: var(--vh) !important;
+}

src/layouts/HomeLayout.vue

@@ -28,7 +28,7 @@
 </style>
 <template>
   <q-layout view="hHh lpr fFf">
-    <hor-big-one v-if="isSearch&&windowWidth>1280" :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one>
+    <hor-big-one v-if="isSearch&&windowWidth>=768" :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one>
     <!-- <hor-big-two v-if="headType==2" :base-data="baseinfo" ref="webhead"></hor-big-two> -->
     <q-page-container>
       <div class="flex justify-between" v-if="showUserInfo" :style="$q.platform.is.desktop ? 'width: 1200px; margin: 0 auto' : ''">