首页

src/components/Bottom.bak.vue

@@ -0,0 +1,147 @@
+<template>
+  <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>
+    </div>
+    <div class="phone">
+      <div :class="isHard ? 'box hard' : 'box'" @click="toPhone">
+        <img class="img3" :src="A2" alt="" />
+        <span class="text2">拨打电话</span>
+      </div>
+    </div>
+    <div class="online copy" @click="addWeChat" data-clipboard-text="CPMGC007">
+      <img class="img2" :src="A3" alt="" /> <span class="text1">添加微信</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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 { showSuccessToast, showFailToast } from 'vant'
+import { ref, onMounted } from 'vue'
+import Clipboard from 'clipboard'
+const route = useRoute()
+const props = defineProps({
+  isDrag: {
+    type: Boolean,
+  },
+})
+
+const addWeChat = () => {
+  // 弹窗显示微信号复制成功  CPMGC007
+  let clipboard = new Clipboard('.copy')
+  clipboard.on('success', e => {
+    showSuccessToast('微信号复制成功')
+    // 释放内存
+    clipboard.destroy()
+  })
+  clipboard.on('error', e => {
+    // 不支持复制
+    showFailToast('该浏览器不支持自动复制')
+    // 释放内存
+    clipboard.destroy()
+  })
+}
+
+const toPhone = () => {
+  window.location.href = 'tel:13717892018'
+}
+
+const isHard = ref(false)
+onMounted(() => {
+  if (route.path.indexOf('/hardware') != -1) {
+    isHard.value = true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.bottom_container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: $bottom-height;
+  background: #ffa18e;
+  z-index: 100;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 35px;
+  .online {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    box-sizing: border-box;
+    .img1 {
+      width: 14px;
+      height: 14px;
+      margin-right: 6px;
+    }
+    .img2 {
+      width: 16px;
+      height: 13px;
+      margin-right: 6px;
+    }
+    .text1 {
+      font-size: 9px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+  .phone {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .box {
+      width: 110px;
+      height: $bottom-height;
+      background: linear-gradient(90deg, #f98222, #f94622);
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      .img3 {
+        width: 24px;
+        height: 24px;
+        margin-left: 4px;
+        margin-right: 11px;
+      }
+      .text2 {
+        font-size: 13px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+    .hard {
+      background: linear-gradient(90deg, #2beec3, #74fddf);
+    }
+  }
+}
+.drag {
+  opacity: 0.3;
+  transition-property: all;
+  transition-duration: 0.7s;
+  animation-fill-mode: forwards;
+}
+.h_bottom {
+  background: #14e1b4;
+}
+</style>

src/components/Bottom.vue

@@ -1,40 +1,20 @@
 <template>
+  <div :class="isDrag ? 'bottom_container drag' : 'bottom_container'">
+    <img :src="BottomBackground" class="bottom_img" alt="" />
+    <div class="btn1"></div>
+    <div class="btn2" @click="toPhone"></div>
     <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>
-    </div>
-    <div class="phone">
-      <div :class="isHard ? 'box hard' : 'box'" @click="toPhone">
-        <img class="img3" :src="A2" alt="" />
-        <span class="text2">拨打电话</span>
-      </div>
-    </div>
-    <div class="online copy" @click="addWeChat" data-clipboard-text="CPMGC007">
-      <img class="img2" :src="A3" alt="" /> <span class="text1">添加微信</span>
-    </div>
+      class="btn3 copy"
+      @click="addWeChat"
+      data-clipboard-text="CPMGC007"
+    ></div>
   </div>
 </template>
 
 <script setup>
-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 { showSuccessToast, showFailToast } from 'vant'
-import { ref, onMounted } from 'vue'
 import Clipboard from 'clipboard'
-const route = useRoute()
+import BottomBackground from '@/static/img/newpage/bottom.png'
 const props = defineProps({
   isDrag: {
     type: Boolean,
@@ -60,13 +40,6 @@ const addWeChat = () => {
 const toPhone = () => {
   window.location.href = 'tel:13717892018'
 }
-
-const isHard = ref(false)
-onMounted(() => {
-  if (route.path.indexOf('/hardware') != -1) {
-    isHard.value = true
-  }
-})
 </script>
 
 <style lang="scss" scoped>
@@ -75,64 +48,32 @@ onMounted(() => {
   bottom: 0;
   left: 0;
   right: 0;
-  height: $bottom-height;
-  background: #ffa18e;
   z-index: 100;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 35px;
-  .online {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    box-sizing: border-box;
-    .img1 {
-      width: 14px;
-      height: 14px;
-      margin-right: 6px;
+  background: #fff;
+  .bottom_img {
+    width: 100vw;
+    height: auto;
   }
-    .img2 {
-      width: 16px;
-      height: 13px;
-      margin-right: 6px;
+  .btn1 {
+    position: absolute;
+    width: 23vw;
+    height: 8vw;
+    left: 10vw;
+    bottom: 2vw;
   }
-    .text1 {
-      font-size: 9px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 400;
-      color: #ffffff;
-    }
-  }
-  .phone {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .box {
-      width: 110px;
-      height: $bottom-height;
-      background: linear-gradient(90deg, #f98222, #f94622);
-      border-radius: 16px;
-      display: flex;
-      align-items: center;
-      .img3 {
-        width: 24px;
-        height: 24px;
-        margin-left: 4px;
-        margin-right: 11px;
-      }
-      .text2 {
-        font-size: 13px;
-        font-family: Alibaba PuHuiTi;
-        font-weight: 500;
-        color: #ffffff;
-      }
-    }
-    .hard {
-      background: linear-gradient(90deg, #2beec3, #74fddf);
+  .btn2 {
+    position: absolute;
+    width: 23vw;
+    height: 8vw;
+    left: 39vw;
+    bottom: 2vw;
   }
+  .btn3 {
+    position: absolute;
+    width: 23vw;
+    height: 8vw;
+    right: 10vw;
+    bottom: 2vw;
   }
 }
 .drag {
@@ -141,7 +82,4 @@ onMounted(() => {
   transition-duration: 0.7s;
   animation-fill-mode: forwards;
 }
-.h_bottom {
-  background: #14e1b4;
-}
 </style>

src/pages/index.bak.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="home_container">
+    <Swiper />
+    <CaseShow />
+    <Hardware />
+    <MechanicalDrive />
+    <!-- <Track /> -->
+    <OneStop />
+    <AboutUs />
+    <!-- <News /> -->
+    <Cooperation />
+    <Awards />
+  </div>
+</template>
+
+<script setup>
+import Swiper from 'cpns/Swiper'
+import CaseShow from 'cpns/CaseShow'
+import Hardware from 'cpns/Hardware'
+import MechanicalDrive from 'cpns/MechanicalDrive'
+import AboutUs from 'cpns/AboutUs'
+import Track from 'cpns/Track'
+import OneStop from 'cpns/OneStop'
+import News from 'cpns/News'
+import Cooperation from 'cpns/Cooperation'
+import Awards from 'cpns/Awards'
+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>
+.home_container {
+  background: #f5f5f5;
+  max-width: 100vw;
+  overflow: hidden;
+}
+</style>

src/pages/index.vue

@@ -1,47 +1,83 @@
 <template>
   <div class="home_container">
-    <Swiper />
-    <CaseShow />
-    <Hardware />
-    <MechanicalDrive />
-    <!-- <Track /> -->
-    <OneStop />
-    <AboutUs />
-    <!-- <News /> -->
-    <Cooperation />
-    <Awards />
+    <div class="img_wrap">
+      <img :src="HomeBackground" class="bg" alt="" />
+      <div class="btn1" @click="toPage('/')"></div>
+      <div class="btn2" @click="toPage('/hardware')"></div>
+      <div class="btn3" @click="toPage('/')"></div>
+      <div class="btn4" @click="toPage('/')"></div>
+      <div class="btn5" @click="toPage('/recruit')"></div>
+      <div class="btn6" @click="toPage('/contact')"></div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import Swiper from 'cpns/Swiper'
-import CaseShow from 'cpns/CaseShow'
-import Hardware from 'cpns/Hardware'
-import MechanicalDrive from 'cpns/MechanicalDrive'
-import AboutUs from 'cpns/AboutUs'
-import Track from 'cpns/Track'
-import OneStop from 'cpns/OneStop'
-import News from 'cpns/News'
-import Cooperation from 'cpns/Cooperation'
-import Awards from 'cpns/Awards'
-import { ref } from 'vue'
+import HomeBackground from '@/static/img/newpage/home.png'
+import { useRouter } from 'vue-router'
 
-// const isDrag = ref(false)
+const router = useRouter()
 
-// const handlePress = e => {
-//   // 背景虚化
-//   isDrag.value = true
-// }
-// const handleRelease = e => {
-//   // 背景实体化
-//   isDrag.value = false
-// }
+const toPage = path => {
+  router.push(path)
+}
 </script>
 
 <style lang="scss" scoped>
 .home_container {
-  background: #f5f5f5;
   max-width: 100vw;
   overflow: hidden;
+  padding-bottom: 12px;
+  .img_wrap {
+    position: relative;
+    .bg {
+      width: 100vw;
+      height: auto;
+    }
+    .btn1 {
+      position: absolute;
+      left: 2vw;
+      bottom: 60vw;
+      width: 47vw;
+      height: 27vw;
+    }
+    .btn2 {
+      position: absolute;
+      right: 2vw;
+      bottom: 60vw;
+      width: 47vw;
+      height: 27vw;
+    }
+    .btn3 {
+      position: absolute;
+      left: 2vw;
+      bottom: 31vw;
+      width: 47vw;
+      height: 27vw;
+    }
+    .btn4 {
+      position: absolute;
+      right: 2vw;
+      bottom: 31vw;
+      width: 47vw;
+      height: 27vw;
+    }
+
+    .btn5 {
+      position: absolute;
+      left: 2vw;
+      bottom: 2vw;
+      width: 47vw;
+      height: 27vw;
+    }
+
+    .btn6 {
+      position: absolute;
+      right: 2vw;
+      bottom: 2vw;
+      width: 47vw;
+      height: 27vw;
+    }
+  }
 }
 </style>