bottom

src/components/Bottom.vue

@@ -1,5 +1,15 @@
 <template>
-  <div :class="isDrag ? 'bottom_container drag' : 'bottom_container'">
+  <div
+    :class="
+      isDrag
+        ? isHard
+          ? 'bottom_container drag h_bottom'
+          : 'bottom_container drag'
+        : isHard
+        ? 'bottom_container h_bottom'
+        : 'bottom_container'
+    "
+  >
     <div class="online">
       <img class="img1" :src="A1" alt="" />
       <span class="text1">在线咨询</span>
@@ -20,11 +30,21 @@
 import A1 from '@/static/img/bottom/kefu.png'
 import A2 from '@/static/img/bottom/phone.png'
 import A3 from '@/static/img/bottom/wechat.png'
+import { useRoute } from 'vue-router'
+import { ref, onMounted } from 'vue'
+const route = useRoute()
 const props = defineProps({
   isDrag: {
     type: Boolean,
   },
 })
+
+const isHard = ref(false)
+onMounted(() => {
+  if (route.path.indexOf('/hardware') != -1) {
+    isHard.value = true
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -96,4 +116,7 @@ const props = defineProps({
   transition-duration: 0.7s;
   animation-fill-mode: forwards;
 }
+.h_bottom {
+  background: $hardware-theme;
+}
 </style>

src/components/Swiper.vue

@@ -36,16 +36,21 @@ import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/navigation'
 import { Pagination, Navigation } from 'swiper'
-const modules = [Pagination, Navigation]
+import { useRoute } from 'vue-router'
 import { ref } from 'vue'
+const modules = [Pagination, Navigation]
 const sw = ref(null)
 const isFirstSwiper = ref(true)
+const route = useRoute()
 const onSwiper = swiper => {
   sw.value = swiper
+  if (route.path.indexOf('/hardware') != -1) {
+    // 需要判断路径是否是硬件，如果是硬件则直接跳转到第二项
+    swiper.slideTo(1, 500, true)
+  }
 }
 const onSlideChange = swiper => {
   const { isBeginning } = swiper
-  console.log(isBeginning)
   if (isBeginning) {
     isFirstSwiper.value = true
   } else {

src/pages/Hardware.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="hardware_home_container">
+  <div
+    class="hardware_home_container"
+    v-touch:press="handlePress"
+    v-touch:release="handleRelease"
+  >
     <Swiper page="hardware" />
     <CaseShow />
     <div class="img_wrap">
@@ -25,6 +29,7 @@
     </div>
     <AboutUs />
     <Cooperation />
+    <Bottom :isDrag="isDrag" />
   </div>
 </template>
 
@@ -40,11 +45,25 @@ import Wu from '@/static/img/hardware/wulianwang.png'
 import Dian from '@/static/img/hardware/dianji.png'
 import AboutUs from 'cpns/AboutUs.vue'
 import Cooperation from 'cpns/Cooperation'
+import Bottom from 'cpns/Bottom'
+import { ref } from 'vue'
+
+const isDrag = ref(false)
+
+const handlePress = e => {
+  // 背景虚化
+  isDrag.value = true
+}
+const handleRelease = e => {
+  // 背景实体化
+  isDrag.value = false
+}
 </script>
 
 <style lang="scss" scoped>
 .hardware_home_container {
   background: #f5f5f5;
+  padding-bottom: $bottom-height;
   .img_wrap {
     padding: 0 7px;
   }