修复缺陷

src/components/AboutUs.vue

@@ -7,7 +7,7 @@
     />
     <div class="more_btn">
       <span>了解更多</span>
-      <img :src="RightArrow" alt="right_arrow" class="right_arrow" />
+      <span>→</span>
     </div>
     <FourCard />
   </div>
@@ -15,7 +15,6 @@
 
 <script setup>
 import HeadLine from '@/components/HeadLine'
-import RightArrow from '@/static/img/index/jiantou.png'
 import FourCard from '@/components/FourCard'
 </script>
 

src/components/Bottom.vue

@@ -52,7 +52,8 @@ import Logo from '@/static/img/index/12.png'
 .bottom_text_container {
   height: 300px;
   box-sizing: border-box;
-  background: #1d1e20;
+  background: url(../static/img/index/11.png) no-repeat;
+  background-size: 100% 100%;
   display: flex;
   align-items: center;
   padding: 85px 107px 71px 106px;

src/components/Contact.vue

@@ -28,28 +28,24 @@
         <input type="text" class="input" />
         <div class="label_container">
           <span>姓名</span>
-          <p class="line"></p>
         </div>
       </div>
       <div class="input_container mb">
         <input type="text" class="input" />
         <div class="label_container">
           <span>电话</span>
-          <p class="line"></p>
         </div>
       </div>
       <div class="input_container mb">
         <input type="text" class="input" />
         <div class="label_container">
           <span>公司</span>
-          <p class="line"></p>
         </div>
       </div>
       <div class="input_container mb">
         <input type="text" class="input" />
         <div class="label_container">
           <span>需求</span>
-          <p class="line"></p>
         </div>
       </div>
       <div class="btn_con">
@@ -146,14 +142,14 @@ import Email from '@/static/img/index/10.png'
         height: 50px;
         border: 1px solid #dcdfe6;
         border-radius: 25px;
-        padding-left: 112px;
+        padding-left: 90px;
         padding-right: 20px;
         box-sizing: border-box;
-        font-size: 20px;
+        font-size: 14px;
         font-family: Alibaba PuHuiTi;
         font-weight: 400;
         color: #dcdfe6;
-        line-height: 38px;
+        line-height: 14px;
         outline: none;
       }
       .label_container {
@@ -168,12 +164,6 @@ import Email from '@/static/img/index/10.png'
         top: 0;
         height: 50px;
         padding-left: 27px;
-        .line {
-          width: 1px;
-          height: 17px;
-          background: #dcdfe6;
-          margin-left: 27px;
-        }
       }
     }
     .mb {

src/components/Header.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="header_container">
-    <img :src="Logo" alt="logo" class="logo_img" @click="toHome()" />
+  <div :class="detail ? 'header_container detail_header' : 'header_container'">
+    <img
+      :src="detail ? Logo1 : Logo"
+      alt="logo"
+      class="logo_img"
+      @click="toHome()"
+    />
     <ul class="tab_group">
       <li :class="activeTab == 0 ? 'active' : ''" @click="changeActiveTab(0)">
         首页
@@ -19,11 +24,27 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import Logo from '@/static/img/index/2.png'
+import Logo1 from '@/static/img/zhongxin/logo.png'
 const activeTab = ref(0)
 const router = useRouter()
+const route = useRoute()
+const props = defineProps({
+  detail: {
+    type: Boolean,
+  },
+})
+onMounted(() => {
+  const path = route.path
+  if (path == '/product') {
+    activeTab.value = 2
+  }
+  if (path == '/') {
+    activeTab.value = 0
+  }
+})
 const changeActiveTab = index => {
   activeTab.value = index
   if (index == 2) {
@@ -72,4 +93,11 @@ const toHome = () => {
     }
   }
 }
+.detail_header {
+  position: static;
+  background: #ffffff;
+  .tab_group {
+    color: #000;
+  }
+}
 </style>

src/components/HomeScreen.vue

@@ -5,7 +5,23 @@
       做铁路相关的设备<span class="sign">研发和制造</span>
     </h1>
     <div class="to_bottom" @click="toNextPage()">
-      <img :src="Arrow" alt="arrow" class="arrow" />
+      <svg
+        t="1684719940478"
+        class="arrow"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="2386"
+        width="30"
+        height="100"
+      >
+        <path
+          d="M512.726547 675.318646c-8.063653 0-15.790638-3.245927-21.435195-9.006118L231.175103 400.906809c-11.603269-11.837606-11.410887-30.840402 0.427742-42.442648 11.837606-11.601222 30.841426-11.410887 42.442648 0.427742l238.681054 243.534596L751.407602 358.891903c11.601222-11.839653 30.602995-12.033058 42.442648-0.427742 11.839653 11.603269 12.031011 30.605042 0.427742 42.442648L534.161742 666.312528C528.517185 672.072719 520.791224 675.318646 512.726547 675.318646z"
+          fill="#ffffff"
+          p-id="2387"
+        ></path>
+      </svg>
+      <!-- <img :src="Arrow" alt="arrow" class="arrow" /> -->
     </div>
   </div>
 </template>
@@ -45,8 +61,8 @@ const toNextPage = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 38px;
-    height: 38px;
+    width: 30px;
+    height: 30px;
     cursor: pointer;
     border: 2px solid #ffffff;
     border-radius: 50%;
@@ -55,8 +71,8 @@ const toNextPage = () => {
     left: 50%;
     transform: translateX(-50%);
     .arrow {
-      width: 17px;
-      height: 10px;
+      // width: 17px;
+      // height: 10px;
     }
   }
 }

src/components/Product.vue

@@ -6,28 +6,31 @@
         <img :src="A1" alt="" class="product_img" />
         <div class="bottom_tip">
           <p>动车底部巡检</p>
-          <div class="btn">查看详情</div>
+          <div class="btn">
+            <span>查看详情</span>
+            <span>→</span>
+          </div>
         </div>
       </div>
       <div class="product_card">
         <img :src="A1" alt="" class="product_img" />
         <div class="bottom_tip">
           <p>动车底部巡检</p>
-          <div class="btn">查看详情</div>
+          <div class="btn"><span>查看详情</span> <span>→</span></div>
         </div>
       </div>
       <div class="product_card">
         <img :src="A1" alt="" class="product_img" />
         <div class="bottom_tip">
           <p>动车底部巡检</p>
-          <div class="btn">查看详情</div>
+          <div class="btn"><span>查看详情</span> <span>→</span></div>
         </div>
       </div>
       <div class="product_card">
         <img :src="A1" alt="" class="product_img" />
         <div class="bottom_tip">
           <p>动车底部巡检</p>
-          <div class="btn">查看详情</div>
+          <div class="btn"><span>查看详情</span> <span>→</span></div>
         </div>
       </div>
     </div>

src/components/detail/Detail.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="product_detail_card_container">detail</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.product_detail_card_container {
+}
+</style>

src/components/detail/Overview.vue

@@ -1,10 +1,82 @@
 <template>
-  <div class="overview_container">overview</div>
+  <div class="overview_container">
+    <Header :detail="true" />
+    <div class="product_infos">
+      <div class="main" v-if="activeTab == 0">1</div>
+      <div class="main" v-if="activeTab == 1">2</div>
+      <div class="main" v-if="activeTab == 2">3</div>
+      <div class="main" v-if="activeTab == 3">4</div>
+      <div class="tabs_wrapper">
+        <div class="tab mb" @click="changeTab(0)">
+          <img :src="A1" class="thumbnail" alt="" />
+          <div class="mask" v-if="[1, 2, 3].includes(activeTab)"></div>
+        </div>
+        <div class="tab mb" @click="changeTab(1)">
+          <img :src="A1" class="thumbnail" alt="" />
+          <div class="mask" v-if="[0, 2, 3].includes(activeTab)"></div>
+        </div>
+        <div class="tab mb" @click="changeTab(2)">
+          <img :src="A1" class="thumbnail" alt="" />
+          <div class="mask" v-if="[0, 1, 3].includes(activeTab)"></div>
+        </div>
+        <div class="tab" @click="changeTab(3)">
+          <img :src="A1" class="thumbnail" alt="" />
+          <div class="mask" v-if="[1, 2, 0].includes(activeTab)"></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import Header from '@/components/Header'
+import A1 from '@/static/img/zhongxin/li.png'
+const activeTab = ref(0)
+const changeTab = index => {
+  activeTab.value = index
+}
+</script>
 
 <style lang="scss" scoped>
 .overview_container {
+  background: #f9f9f9;
+  .product_infos {
+    padding: 55px 59px 55px 136px;
+    display: flex;
+    align-items: center;
+    .main {
+      flex: 1;
+    }
+    .tabs_wrapper {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      .mb {
+        margin-bottom: 43px;
+      }
+      .tab {
+        position: relative;
+        cursor: pointer;
+        width: 100px;
+        height: 100px;
+        border-radius: 6px;
+        overflow: hidden;
+        .thumbnail {
+          width: 100px;
+          height: 100px;
+        }
+        .mask {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: #ffffff;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
 }
 </style>

src/components/detail/Parameter.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="parameter_container">param</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.parameter_container {
+}
+</style>

src/components/detail/RelativeMerits.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="relative_merits_container">优缺点</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.relative_merits_container {
+}
+</style>

src/components/detail/Video.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="video_container">video</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.video_container {
+}
+</style>

src/pages/Product.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="product_main_container">
     <Overview />
+    <Video />
+    <Detail />
+    <RelativeMerits />
+    <Parameter />
+    <Contact />
+    <Bottom />
   </div>
 </template>
 
 <script setup>
 import Overview from '@/components/detail/Overview'
+import Video from '@/components/detail/Video'
+import Detail from '@/components/detail/Detail'
+import RelativeMerits from '@/components/detail/RelativeMerits'
+import Parameter from '@/components/detail/Parameter'
+import Contact from '@/components/Contact'
+import Bottom from '@/components/Bottom'
 </script>
 
 <style lang="scss" scoped>