overview

src/components/detail/Overview.vue

@@ -2,7 +2,21 @@
   <div class="overview_container" id="product_overview">
     <Header :detail="true" />
     <div class="product_infos">
-      <div class="main" v-if="activeTab == 0">1</div>
+      <div class="main" v-if="activeTab == 0">
+        <img :src="A2" alt="big_img" class="big_img" />
+        <div class="content_intro">
+          <h2 class="title">线性相机实验平台</h2>
+          <p class="feature">
+            功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组
+            帮客户缩短项目验证所需要的时间
+            快速的帮助工程师从环境上优化机器视觉方案 双 x
+          </p>
+          <div class="btn">
+            <span>联系我们</span>
+            <span>→</span>
+          </div>
+        </div>
+      </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>
@@ -32,6 +46,7 @@
 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'
 const activeTab = ref(0)
 const changeTab = index => {
   activeTab.value = index
@@ -47,6 +62,47 @@ const changeTab = index => {
     align-items: center;
     .main {
       flex: 1;
+      padding: 79px 126px 45px 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .big_img {
+        width: 893px;
+        height: 502px;
+      }
+      .content_intro {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: space-between;
+        .title {
+          font-size: 26px;
+          font-weight: bold;
+          color: #0c0c0c;
+        }
+        .feature {
+          font-size: 16px;
+          font-weight: 300;
+          color: #7e7e7e;
+          line-height: 32px;
+          margin: 48px 0 40px 19px;
+        }
+        .btn {
+          width: 206px;
+          height: 55px;
+          background: linear-gradient(90deg, #7182ff, #5064f4);
+          border-radius: 28px;
+          display: flex;
+          cursor: pointer;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 22px;
+          padding: 16px 32px;
+          box-sizing: border-box;
+          font-weight: 300;
+          color: #fafafa;
+        }
+      }
     }
     .tabs_wrapper {
       display: flex;