关于我们

src/assets/scss/globalVar.scss

@@ -1,3 +1,4 @@
 $theme-color: #f95926;
 $btn-gradient: linear-gradient(90deg, #facc22, #f83600);
 $light-background: rgba(249, 89, 38, 0.3);
+$bg-card: rgba(249, 89, 38, 0.6);

src/components/about/About.vue

@@ -6,35 +6,35 @@
       line2="软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。"
     />
     <div class="idea_cards">
-      <div class="one_card">
+      <div class="one_card bg1">
         <p class="title">文档是我们宝贵的财富</p>
         <p class="content">
           需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
           历史错误总结文档。
         </p>
       </div>
-      <div class="one_card">
+      <div class="one_card bg2">
         <p class="title">文档是我们宝贵的财富</p>
         <p class="content">
           需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
           历史错误总结文档。
         </p>
       </div>
-      <div class="one_card">
+      <div class="one_card bg3">
         <p class="title">文档是我们宝贵的财富</p>
         <p class="content">
           需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
           历史错误总结文档。
         </p>
       </div>
-      <div class="one_card">
+      <div class="one_card bg4">
         <p class="title">文档是我们宝贵的财富</p>
         <p class="content">
           需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
           历史错误总结文档。
         </p>
       </div>
-      <div class="one_card">
+      <div class="one_card bg5">
         <p class="title">文档是我们宝贵的财富</p>
         <p class="content">
           需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
@@ -71,12 +71,109 @@ import HeadLine from '@/components/HeadLine'
       font-size: 16px;
       font-weight: 400;
       color: #ffffff;
-      border: solid 1px #ddd;
+      position: relative;
       .title {
         margin-bottom: 80px;
+        z-index: 1;
       }
       .content {
         line-height: 27px;
+        z-index: 1;
+      }
+    }
+    .bg1 {
+      background: url(../../static/img/guanyu/01.png) no-repeat;
+      background-size: 100% 100%;
+      &:hover {
+        background: url(../../static/img/guanyu/011.png) no-repeat;
+        background-size: cover;
+        &::before {
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          content: '';
+          background: $bg-card;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .bg2 {
+      background: url(../../static/img/guanyu/02.png) no-repeat;
+      background-size: 100% 100%;
+      &:hover {
+        background: url(../../static/img/guanyu/022.png) no-repeat;
+        background-size: cover;
+        &::before {
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          content: '';
+          background: $bg-card;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .bg3 {
+      background: url(../../static/img/guanyu/03.png) no-repeat;
+      background-size: 100% 100%;
+      &:hover {
+        background: url(../../static/img/guanyu/033.png) no-repeat;
+        background-size: cover;
+        &::before {
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          content: '';
+          background: $bg-card;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .bg4 {
+      background: url(../../static/img/guanyu/04.png) no-repeat;
+      background-size: 100% 100%;
+      &:hover {
+        background: url(../../static/img/guanyu/044.png) no-repeat;
+        background-size: cover;
+        &::before {
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          content: '';
+          background: $bg-card;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .bg5 {
+      background: url(../../static/img/guanyu/05.png) no-repeat;
+      background-size: 100% 100%;
+      &:hover {
+        background: url(../../static/img/guanyu/055.png) no-repeat;
+        background-size: cover;
+        &::before {
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          content: '';
+          background: $bg-card;
+          width: 100%;
+          height: 100%;
+        }
       }
     }
   }

src/components/about/Intro.vue

@@ -24,11 +24,13 @@
         <span class="unit">量产</span>
       </div>
     </div>
+    <img :src="BG" alt="BG" class="bottom_bg" />
   </div>
 </template>
 
 <script setup>
 import HeadLine from '@/components/HeadLine.vue'
+import BG from '@/static/img/guanyu/066.png'
 </script>
 
 <style lang="scss" scoped>
@@ -58,5 +60,9 @@ import HeadLine from '@/components/HeadLine.vue'
       }
     }
   }
+  .bottom_bg {
+    width: 100%;
+    height: auto;
+  }
 }
 </style>

src/components/about/Overview.vue

@@ -13,7 +13,7 @@ import Header from '@/components/Header'
 .about_overview_container {
   width: 100vw;
   height: 490px;
-  background: url(../../static/img/lianxi/1.png) no-repeat;
+  background: url(../../static/img/guanyu/ti.png) no-repeat;
   background-size: cover;
   position: relative;
   .en {

src/components/detail/Detail.vue

@@ -2,22 +2,22 @@
   <div class="product_detail_card_container">
     <HeadLine title="产品细节" line1="注重产品的每一个细节" />
     <div class="detail_card">
-      <div class="one_card">
+      <div class="one_card bg1">
         <div class="mask">
           <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
         </div>
       </div>
-      <div class="one_card">
+      <div class="one_card bg2">
         <div class="mask">
           <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
         </div>
       </div>
-      <div class="one_card">
+      <div class="one_card bg3">
         <div class="mask">
           <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
         </div>
       </div>
-      <div class="one_card">
+      <div class="one_card bg4">
         <div class="mask">
           <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
         </div>
@@ -54,7 +54,6 @@ const toHomeDetail = (type, tid, pid) => {
     .one_card {
       width: 50%;
       height: 393px;
-      background: #ddd;
       border: solid 1px #000;
       box-sizing: border-box;
       &:hover {
@@ -90,6 +89,22 @@ const toHomeDetail = (type, tid, pid) => {
         }
       }
     }
+    .bg1 {
+      background: url(../../static/img/index/a1.png) no-repeat;
+      background-size: cover;
+    }
+    .bg2 {
+      background: url(../../static/img/index/a2.png) no-repeat;
+      background-size: cover;
+    }
+    .bg3 {
+      background: url(../../static/img/index/a3.png) no-repeat;
+      background-size: cover;
+    }
+    .bg4 {
+      background: url(../../static/img/index/a4.png) no-repeat;
+      background-size: cover;
+    }
   }
 }
 </style>

src/components/detail/Overview.vue

@@ -3,7 +3,7 @@
     <Header :detail="true" />
     <div class="product_infos">
       <div class="main" v-if="activeTab == 0">
-        <img :src="A2" alt="big_img" class="big_img" />
+        <img :src="A5" alt="big_img" class="big_img" />
         <div class="content_intro">
           <h2 class="title">线性相机实验平台</h2>
           <p class="feature">
@@ -26,15 +26,15 @@
           <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="" />
+          <img :src="A2" 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="" />
+          <img :src="A3" 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="" />
+          <img :src="A4" class="thumbnail" alt="" />
           <div class="mask" v-if="[1, 2, 0].includes(activeTab)"></div>
         </div>
       </div>
@@ -45,8 +45,11 @@
 <script setup>
 import { ref } from 'vue'
 import Header from '@/components/Header'
-import A1 from '@/static/img/zhongxin/li.png'
-import A2 from '@/static/img/zhongxin/duibi2.png'
+import A1 from '@/static/img/zhongxin/li1.png'
+import A2 from '@/static/img/zhongxin/li2.png'
+import A3 from '@/static/img/zhongxin/li3.png'
+import A4 from '@/static/img/zhongxin/li4.png'
+import A5 from '@/static/img/zhongxin/duibi2.png'
 const activeTab = ref(0)
 const changeTab = index => {
   activeTab.value = index

src/constant/index.js

@@ -1,6 +1,6 @@
 // export const DOMAIN = 'https://www.iflytop.com'
 
-export const DOMAIN = 'http://localhost:5173'
+export const DOMAIN = 'https://www.iflytop.com'
 
 export const animateCSS = (node, animation, prefix = 'animate__') =>
   // We create a Promise and return it