两个页面

src/components/Card.vue

@@ -46,8 +46,8 @@ const toDetail = (productId, classify) => {
 <style lang="scss" scoped>
 .line_cards {
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  grid-template-rows: repeat(10, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, 1fr);
   column-gap: 7px;
   padding: 0 7px;
   box-sizing: border-box;

src/components/Top.vue

@@ -4,19 +4,7 @@
       istop && isFirstSwiper ? 'top_container' : 'top_container container_bg'
     "
   >
-    <img
-      :class="newpage ? 'newlogo' : 'logo'"
-      :src="
-        newpage
-          ? NewLogo
-          : istop && isFirstSwiper
-          ? Logo
-          : isHard
-          ? Logo2
-          : Logo1
-      "
-      alt=""
-    />
+    <img class="newlogo" :src="newpage ? NewLogo : NewLogo2" alt="" />
     <img
       class="fold_icon"
       :src="istop && isFirstSwiper ? Icon : Icon1"
@@ -32,12 +20,16 @@
         <p class="icon"></p>
       </div>
       <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 ? '/' : '/hardware'}`)">
+        <div
+          class="btn"
+          @click="toPage(`${isHard ? '/industry' : '/hardware'}`)"
+        >
           {{ isHard ? '工业设计' : '软硬件研发' }}
         </div>
         <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
@@ -52,6 +44,7 @@ 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 Logo1 from '@/static/img/banner/logo2.png'

src/pages/Hardware.bak.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="hardware_home_container">
+    <Swiper page="hardware" />
+    <CaseShow />
+    <div class="img_wrap">
+      <img :src="Hard" class="img" alt="" />
+    </div>
+    <HeadLine
+      title="合作过的"
+      themeTitle="芯片原厂"
+      :flip="true"
+      line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
+    />
+    <img :src="Chip" class="img" alt="" />
+    <img :src="Wu" class="img" alt="" />
+    <!-- <Track /> -->
+    <HeadLine
+      title="专家"
+      themeTitle="电机控制"
+      line1="自主研发电机驱动器，让控制更加精准"
+    />
+    <div class="img_wrap">
+      <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>
+    <AboutUs />
+    <Cooperation />
+  </div>
+</template>
+
+<script setup>
+import Swiper from 'cpns/Swiper'
+import CaseShow from 'cpns/CaseShow'
+import Hard from '@/static/img/hardware/hardware.png'
+import Chip from '@/static/img/hardware/chip.png'
+import HeadLine from 'cpns/HeadLine'
+import Track from 'cpns/Track'
+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 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'
+</script>
+
+<style lang="scss" scoped>
+.hardware_home_container {
+  background: #f5f5f5;
+  max-width: 100vw;
+  overflow: hidden;
+  .img_wrap {
+    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;
+      }
+    }
+  }
+  .img {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>

src/pages/Hardware.vue

@@ -1,83 +1,47 @@
 <template>
-  <div class="hardware_home_container">
-    <Swiper page="hardware" />
-    <CaseShow />
-    <div class="img_wrap">
-      <img :src="Hard" class="img" alt="" />
-    </div>
-    <HeadLine
-      title="合作过的"
-      themeTitle="芯片原厂"
-      :flip="true"
-      line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
-    />
-    <img :src="Chip" class="img" alt="" />
-    <img :src="Wu" class="img" alt="" />
-    <!-- <Track /> -->
-    <HeadLine
-      title="专家"
-      themeTitle="电机控制"
-      line1="自主研发电机驱动器，让控制更加精准"
-    />
-    <div class="img_wrap">
-      <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>
-    <AboutUs />
-    <Cooperation />
+  <div class="hardware_container">
+    <div class="top_wrap"><Top /></div>
+    <img :src="Home1" class="bg" alt="" />
+    <Card :caseList="getData()" />
+    <img :src="Home2" class="bg" alt="" />
   </div>
 </template>
 
 <script setup>
-import Swiper from 'cpns/Swiper'
-import CaseShow from 'cpns/CaseShow'
-import Hard from '@/static/img/hardware/hardware.png'
-import Chip from '@/static/img/hardware/chip.png'
+import Top from 'cpns/Top'
 import HeadLine from 'cpns/HeadLine'
-import Track from 'cpns/Track'
-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 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 Home1 from '@/static/img/newpage/home1.png'
+import Home2 from '@/static/img/newpage/home4.png'
+import Card from 'cpns/Card'
+import { caseList, hardCaseList } from '@/mock'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+
+const getData = () => {
+  if (route.path.indexOf('/hardware') != -1) {
+    return hardCaseList
+  }
+  return caseList
+}
 </script>
 
 <style lang="scss" scoped>
-.hardware_home_container {
-  background: #f5f5f5;
+.hardware_container {
   max-width: 100vw;
   overflow: hidden;
-  .img_wrap {
-    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;
-      }
-    }
-  }
-  .img {
+  padding-bottom: 12px;
+  background: #f6f6f6;
+  .top_wrap {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
     width: 100%;
+    height: 47px;
+    z-index: 200;
+  }
+  .bg {
+    width: 100vw;
     height: auto;
   }
 }

src/pages/Industry.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="industry_container">
+    <div class="top_wrap"><Top /></div>
+    <img :src="Home1" class="bg" alt="" />
+    <Card :caseList="getData()" />
+    <img :src="Home2" class="bg" alt="" />
+  </div>
+</template>
+
+<script setup>
+import Top from 'cpns/Top'
+import HeadLine from 'cpns/HeadLine'
+import Home1 from '@/static/img/newpage/home1.png'
+import Home2 from '@/static/img/newpage/home2.png'
+import Card from 'cpns/Card'
+import { caseList, hardCaseList } from '@/mock'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+
+const getData = () => {
+  if (route.path.indexOf('/hardware') != -1) {
+    return hardCaseList
+  }
+  return caseList
+}
+</script>
+
+<style lang="scss" scoped>
+.industry_container {
+  max-width: 100vw;
+  overflow: hidden;
+  padding-bottom: 12px;
+  background: #f6f6f6;
+  .top_wrap {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 47px;
+    z-index: 200;
+  }
+  .bg {
+    width: 100vw;
+    height: auto;
+  }
+}
+</style>

src/pages/index.vue

@@ -2,10 +2,10 @@
   <div class="home_container">
     <div class="img_wrap">
       <img :src="HomeBackground" class="bg" alt="" />
-      <div class="btn1" @click="toPage('/')"></div>
+      <div class="btn1" @click="toPage('/industry')"></div>
       <div class="btn2" @click="toPage('/hardware')"></div>
-      <div class="btn3" @click="toPage('/')"></div>
-      <div class="btn4" @click="toPage('/')"></div>
+      <div class="btn3" @click="toPage('/case-show')"></div>
+      <div class="btn4" @click="toPage('/factory')"></div>
       <div class="btn5" @click="toPage('/recruit')"></div>
       <div class="btn6" @click="toPage('/contact')"></div>
     </div>
@@ -29,6 +29,7 @@ const toPage = path => {
 .home_container {
   max-width: 100vw;
   overflow: hidden;
+  background: #f6f6f6;
   padding-bottom: 12px;
   .top_wrap {
     position: absolute;

src/router/index.js

@@ -10,11 +10,13 @@ const Product = () => import('@/pages/Product')
 const Hardware = () => import('@/pages/Hardware')
 const QRCode = () => import('@/pages/QRCode')
 const Factory = () => import('@/pages/Factory')
+const Industry = () => import('@/pages/Industry')
 
 // 配置路由信息
 const routes = [
   { path: '/', component: Home },
   { path: '/detail', component: Detail },
+  { path: '/industry', component: Industry },
   { path: '/recruit', component: Recruit },
   { path: '/contact', component: Contact },
   { path: '/hardware-case', component: HardwareCase },