pages

src/components/Bottom.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="isDrag ? 'bottom_container drag' : 'bottom_container'">
     <img :src="getData()" class="bottom_img" alt="" />
-    <div class="btn1"></div>
+    <div class="btn1" @click="toService"></div>
     <div class="btn2" @click="toPhone"></div>
     <div
       class="btn3 copy"
@@ -39,6 +39,12 @@ const getData = () => {
   return BottomBackground
 }
 
+const toService = () => {
+  window.open(
+    'https://affim.baidu.com/unique_40873323/chat?siteId=18103961&userId=40873323&siteToken=aead83b1b0f20ee468cdb1a81eb2e9c8&cp=http%3A%2F%2Fwww.iflytop.com&cr=&cw=',
+  )
+}
+
 const addWeChat = () => {
   // 弹窗显示微信号复制成功  CPMGC007
   let clipboard = new Clipboard('.copy')

src/components/HeadLine.vue

@@ -2,9 +2,7 @@
   <div class="headline_container">
     <h2 class="title_h2">
       {{ flip ? title : '' }}
-      <span :class="theme ? 'theme theme_color' : 'theme'">{{
-        themeTitle
-      }}</span>
+      <span class="theme theme_color">{{ themeTitle }}</span>
       {{ !flip ? title : '' }}
     </h2>
     <!-- <div class="scale">
@@ -65,7 +63,7 @@ const props = defineProps({
     color: $home-color;
   }
   .theme_color {
-    color: $hardware-theme;
+    color: #0024ff;
   }
   .scale {
     font-size: 14px;

src/components/NewTrack.vue

@@ -128,6 +128,7 @@ const getActiveImg = () => {
 .new_track_container {
   margin-bottom: 10px;
   position: relative;
+  margin-top: 20px;
   .track_img {
     width: 100vw;
     height: auto;

src/components/SubNavigation.vue

@@ -18,8 +18,8 @@
         <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 class="btn" @click="toPage('/mobile/design')">工业设计</div>
+        <div class="btn" @click="toPage('/mobile/hardware')">软硬件研发</div>
       </div>
     </div>
   </div>
@@ -38,6 +38,14 @@ const openDrawer = () => {
   drawer.value = true
 }
 const toPage = path => {
+  if (path == '/mobile/design') {
+    window.location.href = 'https://iflytop.com/mobile/design'
+    return
+  }
+  if (path == '/mobile/hardware') {
+    window.location.href = 'https://iflytop.com/mobile/hardware'
+    return
+  }
   const origin = window.location.origin
   const pathname = window.location.pathname
   const p = `${origin}${pathname}#${path}`

src/components/Top.vue

@@ -9,13 +9,13 @@
       :src="newpage ? NewLogo : hardLogo ? HardLogo2 : NewLogo2"
       alt=""
     />
-    <!-- <img
+    <img
       class="fold_icon"
       :src="istop && isFirstSwiper ? Icon : Icon1"
       alt=""
       v-if="!drawer"
       @click="openDrawer"
-    /> -->
+    />
   </div>
   <div class="modal_drawer" v-if="drawer" @click="hidePanel">
     <img :src="Close" class="close" alt="" @click="drawer = false" />
@@ -30,13 +30,8 @@
         <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 ? '/industry' : '/hardware'}`)"
-        >
-          {{ isHard ? '工业设计' : '软硬件研发' }}
-        </div>
-        <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
+        <div class="btn" @click="toPage('/mobile/design')">工业设计</div>
+        <div class="btn" @click="toPage('/mobile/hardware')">软硬件研发</div>
       </div>
     </div>
   </div>
@@ -73,6 +68,14 @@ const openDrawer = () => {
   drawer.value = true
 }
 const toPage = path => {
+  if (path == '/mobile/design') {
+    window.location.href = 'https://iflytop.com/mobile/design'
+    return
+  }
+  if (path == '/mobile/hardware') {
+    window.location.href = 'https://iflytop.com/mobile/hardware'
+    return
+  }
   const origin = window.location.origin
   const pathname = window.location.pathname
   const p = `${origin}${pathname}#${path}`

src/pages/index.vue

@@ -1,25 +1,57 @@
 <template>
   <div class="home_container">
     <div class="img_wrap">
-      <img :src="HomeBackground" class="bg" alt="" />
-      <div class="btn1" @click="toPage('/mobile/design')"></div>
-      <div class="btn2" @click="toPage('/mobile/hardware')"></div>
-      <div class="btn3" @click="toPage('/mobile/design/#/case-show')"></div>
-      <div class="btn4" @click="toPage('/mobile/metal')"></div>
-      <div class="btn5" @click="toPage('/mobile/design/#/recruit')"></div>
-      <div class="btn6" @click="toPage('/mobile/design/#/contact')"></div>
+      <img :src="A1" class="img" alt="" />
+      <NewTrack :hard="true" />
+      <Card :caseList="getData()" :classify="trackStore.hardwareTab" />
+      <img :src="A2" class="img" alt="" />
+      <HeadLine title="专家" themeTitle="电机控制" />
+      <div class="img_wrap2">
+        <img :src="Dian" class="img" alt="" />
+        <div class="gif_wrap">
+          <img :src="Gif2" class="left_img" alt="" />
+          <img :src="SAccelerate" class="right_img" alt="" />
+        </div>
+        <div class="gif_wrap">
+          <img :src="Gif1" class="left_img" alt="" />
+          <img :src="TAccelerate" class="right_img" alt="" />
+        </div>
+      </div>
+      <img :src="A3" class="img" alt="" />
     </div>
     <div class="top_wrap"><Top :newpage="true" /></div>
   </div>
 </template>
 
 <script setup>
-import HomeBackground from '@/static/img/newpage/home.png'
+import A1 from '@/static/onestep/1.png'
+import A2 from '@/static/onestep/2.png'
+import Dian from '@/static/img/hardware/dianji.png'
+import Gif1 from '@/static/img/hardware/1.gif'
+import Gif2 from '@/static/img/hardware/2.gif'
+import SAccelerate from '@/static/img/hardware/s-accelerate.png'
+import TAccelerate from '@/static/img/hardware/t-accelerate.png'
+import HeadLine from 'cpns/HeadLine'
+import A3 from '@/static/onestep/3.png'
 import { useRouter } from 'vue-router'
 import Top from 'cpns/Top'
+import NewTrack from 'cpns/NewTrack'
+import Card from 'cpns/Card'
+import { hardCaseList as homeList } from '@/mock'
+import { useTrackStore } from '@/store'
+import { caseList } from '@/mock/case_detail'
 
+const trackStore = useTrackStore()
 const router = useRouter()
 
+const getData = () => {
+  // 根据激活tab展示产品
+  if (trackStore.hardwareTab == 0) {
+    return homeList
+  }
+  return caseList[parseInt(trackStore.hardwareTab)]
+}
+
 const toPage = path => {
   window.location.href = `https://iflytop.com/${path}`
 }
@@ -41,54 +73,27 @@ const toPage = path => {
     z-index: 200;
   }
   .img_wrap {
-    position: relative;
-    .bg {
+    .img {
       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;
+    .img_wrap2 {
+      padding: 0 7px;
+      .gif_wrap {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+        border-radius: 3px;
+        overflow: hidden;
+        .left_img {
+          width: 133px;
+          height: 67px;
+        }
+        .right_img {
+          width: 63%;
+          height: 67px;
+        }
+      }
     }
   }
 }

vite.config.js

@@ -18,7 +18,7 @@ export default defineConfig({
     host: '0.0.0.0',
   },
   plugins: [vue()],
-  base: '/mobile/',
+  base: '/mobile/onestep/',
   //配置sass
   css: {
     preprocessorOptions: {