工厂展示

src/App.vue

@@ -1,7 +1,32 @@
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import Bottom from 'cpns/Bottom'
+
+const isDrag = ref(false)
+
+const handlePress = e => {
+  // 背景虚化
+  isDrag.value = true
+}
+const handleRelease = e => {
+  // 背景实体化
+  isDrag.value = false
+}
+</script>
 
 <template>
-  <router-view></router-view>
+  <div
+    class="app_container"
+    v-touch:press="handlePress"
+    v-touch:release="handleRelease"
+  >
+    <router-view></router-view>
+    <Bottom :isDrag="isDrag" />
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped lang="scss">
+.app_container {
+  margin-bottom: $bottom-height;
+}
+</style>

src/components/Cooperation.vue

@@ -9,7 +9,8 @@
         :theme="theme"
       />
     </div>
-    <div class="client_wrap">
+    <img :src="Total" alt="" class="total_img" />
+    <!-- <div class="client_wrap">
       <div class="card">
         <img :src="A1" alt="" class="img1" />
       </div>
@@ -32,12 +33,13 @@
       <div class="card bg1"><img :src="A18" alt="" class="img18" /></div>
       <div class="card"><img :src="A19" alt="" class="img19" /></div>
       <div class="card bg1"><img :src="A20" alt="" class="img20" /></div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import Total from '@/static/img/cooperate/total.jpg'
 import A1 from '@/static/img/cooperate/cooperate1.png'
 import A2 from '@/static/img/cooperate/cooperate2.png'
 import A3 from '@/static/img/cooperate/cooperate3.png'
@@ -71,6 +73,10 @@ const props = defineProps({
   .header_wrap {
     background: #fff;
   }
+  .total_img {
+    width: 100vw;
+    height: auto;
+  }
   .client_wrap {
     display: grid;
     grid-template-columns: repeat(4, 1fr);

src/components/SubNavigation.vue

@@ -16,6 +16,7 @@
         <div class="btn" @click="toPage('/case-show')">案例展示</div>
         <div class="btn" @click="toPage('/contact')">联系我们</div>
         <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
+        <div class="btn" @click="toPage('/factory')">工厂展示</div>
         <div class="btn" @click="toPage('/hardware')">软硬件研发</div>
         <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
       </div>

src/components/Top.vue

@@ -28,6 +28,7 @@
         <div class="btn" @click="toPage('/case-show')">案例展示</div>
         <div class="btn" @click="toPage('/contact')">联系我们</div>
         <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
+        <div class="btn" @click="toPage('/factory')">工厂展示</div>
         <div class="btn" @click="toPage(`${isHard ? '/' : '/hardware'}`)">
           {{ isHard ? '工业设计' : '软硬件研发' }}
         </div>

src/pages/Factory.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="factory_container">
+    <SubNavigation title="公司简介" />
+    <img class="fac_img" :src="Fac" alt="" />
+  </div>
+</template>
+
+<script setup>
+import SubNavigation from 'cpns/SubNavigation'
+import Fac from '@/static/img/factory/bg.jpg'
+</script>
+
+<style lang="scss">
+.factory_container {
+  padding-top: $sub-header-height;
+  background: #fff;
+  overflow: hidden;
+  .fac_img {
+    width: 100vw;
+    height: auto;
+  }
+}
+</style>

src/pages/Hardware.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="hardware_home_container"
-    v-touch:press="handlePress"
-    v-touch:release="handleRelease"
-  >
+  <div class="hardware_home_container">
     <Swiper page="hardware" />
     <CaseShow />
     <div class="img_wrap">
@@ -36,7 +32,6 @@
     </div>
     <AboutUs />
     <Cooperation />
-    <Bottom :isDrag="isDrag" />
   </div>
 </template>
 
@@ -56,24 +51,11 @@ import SAccelerate from '@/static/img/hardware/s-accelerate.png'
 import TAccelerate from '@/static/img/hardware/t-accelerate.png'
 import Gif1 from '@/static/img/hardware/1.gif'
 import Gif2 from '@/static/img/hardware/2.gif'
-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;
-  margin-bottom: $bottom-height;
   max-width: 100vw;
   overflow: hidden;
   .img_wrap {

src/pages/index.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="home_container"
-    v-touch:press="handlePress"
-    v-touch:release="handleRelease"
-  >
+  <div class="home_container">
     <Swiper />
     <CaseShow />
     <Hardware />
@@ -14,7 +10,6 @@
     <!-- <News /> -->
     <Cooperation />
     <Awards />
-    <Bottom :isDrag="isDrag" />
   </div>
 </template>
 
@@ -29,24 +24,22 @@ import OneStop from 'cpns/OneStop'
 import News from 'cpns/News'
 import Cooperation from 'cpns/Cooperation'
 import Awards from 'cpns/Awards'
-import Bottom from 'cpns/Bottom'
 import { ref } from 'vue'
 
-const isDrag = ref(false)
+// const isDrag = ref(false)
 
-const handlePress = e => {
-  // 背景虚化
-  isDrag.value = true
-}
-const handleRelease = e => {
-  // 背景实体化
-  isDrag.value = false
-}
+// const handlePress = e => {
+//   // 背景虚化
+//   isDrag.value = true
+// }
+// const handleRelease = e => {
+//   // 背景实体化
+//   isDrag.value = false
+// }
 </script>
 
 <style lang="scss" scoped>
 .home_container {
-  margin-bottom: $bottom-height;
   background: #f5f5f5;
   max-width: 100vw;
   overflow: hidden;

src/router/index.js

@@ -9,6 +9,7 @@ const CaseShow = () => import('@/pages/CaseShow')
 const Product = () => import('@/pages/Product')
 const Hardware = () => import('@/pages/Hardware')
 const QRCode = () => import('@/pages/QRCode')
+const Factory = () => import('@/pages/Factory')
 
 // 配置路由信息
 const routes = [
@@ -22,6 +23,7 @@ const routes = [
   { path: '/product', component: Product },
   { path: '/hardware', component: Hardware },
   { path: '/code', component: QRCode },
+  { path: '/factory', component: Factory },
 ]
 
 const router = createRouter({