123

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">{{ themeTitle }}</span>
       {{ !flip ? title : '' }}
     </h2>
     <!-- <div class="scale">
@@ -56,13 +54,13 @@ const props = defineProps({
   .title_h2 {
     font-size: 21px;
     font-family: Source Han Sans CN;
-    font-weight: 500;
+    font-weight: 700;
     color: #191919;
     display: flex;
     align-items: center;
   }
   .theme {
-    color: $home-color;
+    color: #0f4bf0;
   }
   .theme_color {
     color: $hardware-theme;

src/components/SubNavigation.vue

@@ -14,12 +14,11 @@
       <div class="btn_wrap">
         <div class="btn" @click="toPage('/')">首页</div>
         <div class="btn" @click="toPage('/company')">公司简介</div>
-        <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('/design')">工业设计</div>
         <div class="btn" @click="toPage('/hardware')">软硬件研发</div>
-        <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
       </div>
     </div>
   </div>
@@ -41,7 +40,16 @@ const toPage = path => {
   const origin = window.location.origin
   const pathname = window.location.pathname
   const p = `${origin}${pathname}#${path}`
+  if (path == '/hardware') {
+    window.location.href = 'https://iflytop.com/mobile/hardware/#/'
+    return
+  }
+  if (path == '/design') {
+    window.location.href = 'https://iflytop.com/mobile/design/#/'
+    return
+  }
   window.location.href = p
+  drawer.value = false
 }
 
 const hidePanel = event => {

src/components/TabSample.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="tab_sample_container">
+    <div class="tabs">
+      <div
+        :class="activeTab == '1' ? 'tab active' : 'tab'"
+        @click="changeTab('1')"
+      >
+        CNC机加工设备展示
+      </div>
+      <div
+        :class="activeTab == '2' ? 'tab active' : 'tab'"
+        @click="changeTab('2')"
+      >
+        CNC机加工可选材料
+      </div>
+      <div
+        :class="activeTab == '3' ? 'tab active' : 'tab'"
+        @click="changeTab('3')"
+      >
+        表面处理
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activeTab = ref('1')
+
+const changeTab = tab => {
+  activeTab.value = tab
+}
+</script>
+
+<style lang="scss" scoped>
+.tab_sample_container {
+  .tabs {
+    width: 100%;
+    height: 37px;
+    border-radius: 6px;
+    background: #ffffff;
+    display: grid;
+    align-items: center;
+    grid-template-columns: repeat(3, 1fr);
+    .tab {
+      flex: 1;
+      font-family: Source Han Sans;
+      font-size: 10px;
+      font-weight: normal;
+      text-align: center;
+      letter-spacing: 0.02em;
+      font-feature-settings: 'kern' on;
+      color: #7c7c7c;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .active {
+      background: linear-gradient(180deg, #0f4bf0 0%, #0f40c8 100%);
+      color: #ffffff;
+      border-radius: 6px;
+    }
+  }
+}
+</style>

src/components/Top.vue

@@ -4,11 +4,7 @@
       istop && isFirstSwiper ? 'top_container' : 'top_container container_bg'
     "
   >
-    <img
-      class="newlogo"
-      :src="newpage ? NewLogo : hardLogo ? HardLogo2 : NewLogo2"
-      alt=""
-    />
+    <img class="newlogo" :src="Logo4" alt="" />
     <img
       class="fold_icon"
       :src="istop && isFirstSwiper ? Icon : Icon1"
@@ -26,17 +22,11 @@
       <div class="btn_wrap">
         <div class="btn" @click="toPage('/')">首页</div>
         <div class="btn" @click="toPage('/company')">公司简介</div>
-        <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 ? '/industry' : '/hardware'}`)"
-        >
-          {{ isHard ? '工业设计' : '软硬件研发' }}
-        </div>
-        <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
+        <div class="btn" @click="toPage('/design')">工业设计</div>
+        <div class="btn" @click="toPage('/hardware')">软硬件研发</div>
       </div>
     </div>
   </div>
@@ -45,14 +35,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import Close from '@/static/img/banner/x.png'
-import Logo from '@/static/img/banner/logo.png'
-import Logo2 from '@/static/img/banner/logo3.png'
-import NewLogo from '@/static/img/banner/newlogo.png'
-import NewLogo2 from '@/static/img/banner/newlogo2.png'
 import Icon from '@/static/img/banner/liebiao.png'
 import Icon1 from '@/static/img/banner/liebiao2.png'
-import HardLogo2 from '@/static/img/newpage/hard_logo.png'
-import Logo1 from '@/static/img/banner/logo2.png'
+import Logo4 from '@/static/img/banner/logl.png'
 import { useRouter, useRoute } from 'vue-router'
 const route = useRoute()
 const router = useRouter()
@@ -76,7 +61,16 @@ const toPage = path => {
   const origin = window.location.origin
   const pathname = window.location.pathname
   const p = `${origin}${pathname}#${path}`
+  if (path == '/hardware') {
+    window.location.href = 'https://iflytop.com/mobile/hardware/#/'
+    return
+  }
+  if (path == '/design') {
+    window.location.href = 'https://iflytop.com/mobile/design/#/'
+    return
+  }
   window.location.href = p
+  drawer.value = false
 }
 
 const hidePanel = event => {

src/pages/Industry.vue

@@ -2,8 +2,18 @@
   <div class="industry_container">
     <div class="top_wrap"><Top /></div>
     <img :src="Home1" class="bg" alt="" />
-    <NewTrack />
-    <Card :caseList="getData()" :classify="trackStore.industryTab" />
+    <div class="real_content">
+      <div class="three_cards">
+        <img :src="A1" class="img" alt="" />
+      </div>
+      <HeadLine themeTitle="CNC" title="机加工能力" />
+      <TabSample />
+      <HeadLine themeTitle="质量检测" title="设备" />
+      <HeadLine themeTitle="CNC" title="样件" />
+      <HeadLine themeTitle="手板" title="加工能力" />
+      <HeadLine themeTitle="钣金" title="加工能力" />
+    </div>
+
     <img :src="Home2" class="bg" alt="" />
   </div>
 </template>
@@ -11,24 +21,14 @@
 <script setup>
 import Top from 'cpns/Top'
 import HeadLine from 'cpns/HeadLine'
-import Home1 from '@/static/img/newpage/abc.png'
-import NewTrack from 'cpns/NewTrack'
-import Home2 from '@/static/img/newpage/home2.png'
-import Card from 'cpns/Card'
-import { caseList as homeList } from '@/mock'
+import Home1 from '@/static/img/metal/homebg.png'
+import Home2 from '@/static/img/metal/bottom.png'
+import TabSample from 'cpns/TabSample'
+import A1 from '@/static/img/metal/1.png'
 import { useRoute } from 'vue-router'
 import { useTrackStore } from '@/store'
-import { caseList } from '@/mock/case_detail'
 const route = useRoute()
 const trackStore = useTrackStore()
-
-const getData = () => {
-  // 根据激活tab展示产品
-  if (trackStore.industryTab == 0) {
-    return homeList
-  }
-  return caseList[parseInt(trackStore.industryTab)]
-}
 </script>
 
 <style lang="scss" scoped>
@@ -50,5 +50,15 @@ const getData = () => {
     width: 100vw;
     height: auto;
   }
+  .real_content {
+    padding: 0 10px;
+    .three_cards {
+      position: relative;
+      .img {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
 }
 </style>