From a9ef34e6810bde6ee261c34bf0fe254a193ccb7c Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sat, 20 May 2023 15:02:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=94=E7=B3=BB=E6=88=91=E4=BB=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AboutUs.vue  |   7 ++-
 src/components/Bottom.vue   |  10 ++++
 src/components/Contact.vue  | 111 ++++++++++++++++++++++++++++++++++++++++++++
 src/components/FourCard.vue |   9 ++--
 src/components/HeadLine.vue |  24 +++++++---
 src/components/Product.vue  |  91 ++++++++++++++++++++++++++++++++++++
 src/pages/index.vue         |   6 +++
 7 files changed, 247 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Bottom.vue
 create mode 100644 src/components/Contact.vue
 create mode 100644 src/components/Product.vue

diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
index 200df4d..e26b624 100644
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="about_us_container">
-    <HeadLine />
+    <HeadLine
+      title="关于我们"
+      line1="专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队"
+      line2="软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。"
+    />
     <div class="more_btn">
       <span>了解更多</span>
       <img :src="RightArrow" alt="right_arrow" class="right_arrow" />
@@ -33,7 +37,6 @@ import FourCard from '@/components/FourCard'
     font-weight: 300;
     color: #fafafa;
     box-sizing: border-box;
-
     margin: 0 auto;
     margin-top: 36px;
     margin-bottom: 86px;
diff --git a/src/components/Bottom.vue b/src/components/Bottom.vue
new file mode 100644
index 0000000..d3fbbba
--- /dev/null
+++ b/src/components/Bottom.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="bottom_container">bottom container</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.bottom_container {
+}
+</style>
diff --git a/src/components/Contact.vue b/src/components/Contact.vue
new file mode 100644
index 0000000..0d7213a
--- /dev/null
+++ b/src/components/Contact.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="contact_container">
+    <div class="base_info_container">
+      <div class="info mb">
+        <img :src="Phone" alt="phone" class="icon" />
+        <p class="first">袁老师</p>
+        <p>13717892018</p>
+      </div>
+      <div class="info mb">
+        <img :src="Address" alt="phone" class="icon" />
+        <div class="add_wrap">
+          <p class="address mb">北京市昌平区回龙观街道博纳集团</p>
+          <p class="address">3号楼一层 产品梦工厂</p>
+        </div>
+      </div>
+      <div class="info">
+        <img :src="Email" alt="phone" class="icon" />
+        <p class="email_text">
+          <span> 邮 </span>
+          <span> 箱 </span>
+        </p>
+        <p class="email">info@iflytop.com</p>
+      </div>
+    </div>
+    <div class="contact_form">
+      <p class="title">联系我们</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Phone from '@/static/img/8.png'
+import Address from '@/static/img/9.png'
+import Email from '@/static/img/10.png'
+</script>
+
+<style lang="scss" scoped>
+.contact_container {
+  padding: 152px 260px;
+  background: url(../static/img/7.png) no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .base_info_container {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    .info {
+      display: flex;
+      align-items: center;
+      font-size: 28px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      color: #1b1b1b;
+      .icon {
+        width: 55px;
+        height: 55px;
+        margin-right: 31px;
+      }
+      .add_wrap {
+        display: flex;
+        flex-direction: column;
+        .address {
+          font-size: 22px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          color: #1b1b1b;
+        }
+        .mb {
+          margin-bottom: 8px;
+        }
+      }
+
+      .first {
+        margin-right: 29px;
+      }
+      .email_text {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 83px;
+        margin-right: 31px;
+      }
+      .email {
+        font-size: 22px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        color: #5064f4;
+      }
+    }
+    .mb {
+      margin-bottom: 74px;
+    }
+  }
+  .contact_form {
+    flex: 1;
+    margin-left: 191px;
+    height: 546px;
+    background: #ffffff;
+    border-radius: 8px;
+    border-top: 4px solid #f95926;
+    padding: 50px 50px 41px 50px;
+    .title {
+      font-size: 26px;
+      font-weight: bold;
+      color: #000000;
+    }
+  }
+}
+</style>
diff --git a/src/components/FourCard.vue b/src/components/FourCard.vue
index d1bdc2c..a29e00f 100644
--- a/src/components/FourCard.vue
+++ b/src/components/FourCard.vue
@@ -11,7 +11,7 @@
     </div>
     <p class="ver_line"></p>
     <div class="card_container">
-      <img :src="Hardware" alt="icon" class="icon" />
+      <img :src="Software" alt="icon" class="icon" />
       <h3 class="card_title">软件定制</h3>
       <div class="desc">
         <p class="line">专业水下视学设备团队，研发出品多</p>
@@ -21,7 +21,7 @@
     </div>
     <p class="ver_line"></p>
     <div class="card_container">
-      <img :src="Hardware" alt="icon" class="icon" />
+      <img :src="Structure" alt="icon" class="icon" />
       <h3 class="card_title">结构定制</h3>
       <div class="desc">
         <p class="line">专业水下视学设备团队，研发出品多</p>
@@ -31,7 +31,7 @@
     </div>
     <p class="ver_line"></p>
     <div class="card_container">
-      <img :src="Hardware" alt="icon" class="icon" />
+      <img :src="Temp" alt="icon" class="icon" />
       <h3 class="card_title">硬件定制</h3>
       <div class="desc">
         <p class="line">专业水下视学设备团队，研发出品多</p>
@@ -44,6 +44,9 @@
 
 <script setup>
 import Hardware from '@/static/img/3.png'
+import Software from '@/static/img/4.png'
+import Structure from '@/static/img/5.png'
+import Temp from '@/static/img/6.png'
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/HeadLine.vue b/src/components/HeadLine.vue
index 9ce4033..d0bd60b 100644
--- a/src/components/HeadLine.vue
+++ b/src/components/HeadLine.vue
@@ -1,17 +1,29 @@
 <template>
   <div class="header_line_container">
-    <h2 class="title">关于我们</h2>
+    <h2 class="title">{{ title }}</h2>
     <p class="line"></p>
-    <p class="desc">
-      专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队
+    <p class="desc" v-if="line1">
+      {{ line1 }}
     </p>
-    <p class="desc">
-      软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。
+    <p class="desc" v-if="line2">
+      {{ line2 }}
     </p>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+  },
+  line1: {
+    type: String,
+  },
+  line2: {
+    type: String,
+  },
+})
+</script>
 
 <style lang="scss" scoped>
 .header_line_container {
diff --git a/src/components/Product.vue b/src/components/Product.vue
new file mode 100644
index 0000000..21a9312
--- /dev/null
+++ b/src/components/Product.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="product_container">
+    <HeadLine title="产品中心" line1="做专业的水下设备制造商" />
+    <div class="product_card_container">
+      <div class="product_card">
+        <img :src="A1" alt="" class="product_img" />
+        <div class="bottom_tip">
+          <p>动车底部巡检</p>
+          <div class="btn">查看详情</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>
+      </div>
+      <div class="product_card">
+        <img :src="A1" alt="" class="product_img" />
+        <div class="bottom_tip">
+          <p>动车底部巡检</p>
+          <div class="btn">查看详情</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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from '@/components/HeadLine'
+import A1 from '@/static/img/a1.png'
+</script>
+
+<style lang="scss" scoped>
+.product_container {
+  margin: 0 auto;
+  width: 73vw;
+  padding: 17px 0 120px 0;
+  .product_card_container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 82px;
+    .product_card {
+      width: 50%;
+      height: 393px;
+      box-sizing: border-box;
+      position: relative;
+      background: #000;
+      .product_img {
+        width: 100%;
+        height: 100%;
+      }
+      .bottom_tip {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 13px 14px 13px 28px;
+        font-size: 22px;
+        font-weight: 500;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: rgba(249, 89, 38, 0.3);
+        .btn {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          box-sizing: border-box;
+          padding: 17px 35px 17px 33px;
+          width: 206px;
+          height: 55px;
+          background: linear-gradient(90deg, #facc22, #f83600);
+          border-radius: 28px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 47907b2..a8f0776 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -2,12 +2,18 @@
   <div class="main_container">
     <HomeSceen />
     <AboutUs />
+    <Product />
+    <Contact />
+    <Bottom />
   </div>
 </template>
 
 <script setup>
 import HomeSceen from '@/components/HomeScreen'
 import AboutUs from '@/components/AboutUs'
+import Product from '@/components/Product'
+import Contact from '@/components/Contact'
+import Bottom from '@/components/Bottom'
 </script>
 
 <style scoped lang="scss">