contact

src/pages/Contact.vue

@@ -1,20 +1,55 @@
 <template>
   <div class="contact_container">
     <SubNavigation title="联系我们" />
-    <div class="company_img"></div>
+    <img class="company_img" :src="Back" />
     <div class="contact_info">
-      <div class="card">元老师</div>
-      <div class="card">袁老师</div>
-      <div class="card">邮箱</div>
-      <div class="card">公司地址</div>
+      <div class="card">
+        <img :src="Phone" class="phone_icon" alt="" />
+        <p class="name">元老师</p>
+        <p class="phone">15624962290</p>
+      </div>
+      <div class="card">
+        <img :src="Phone" class="phone_icon" alt="" />
+        <p class="name">袁老师</p>
+        <p class="phone">13717892018</p>
+      </div>
+      <div class="card">
+        <div class="wrap_box">
+          <div class="title_wrap">
+            <img :src="Email" class="email_icon" alt="" />
+            <p class="title">邮箱</p>
+          </div>
+          <p class="email">info@iflytop.com</p>
+        </div>
+      </div>
+      <div class="card">
+        <div class="wrap_box mt">
+          <div class="title_wrap">
+            <img :src="Add" class="email_icon" alt="" />
+            <p class="title">公司地址</p>
+          </div>
+          <p class="email">
+            北京市昌平区回龙观街道博纳集团<br />
+            3号楼一层 产品梦工厂
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="map_title">
+      <img :src="Address" class="address" alt="" />
+      <span>如何找到我们</span>
     </div>
-    <div class="map_title">如何找到我们</div>
     <div class="map_container" id="map_container"></div>
   </div>
 </template>
 
 <script setup>
 import SubNavigation from 'cpns/SubNavigation'
+import Back from '@/static/img/contact/back.png'
+import Address from '@/static/img/contact/address.png'
+import Phone from '@/static/img/contact/phone.png'
+import Email from '@/static/img/contact/mail.png'
+import Add from '@/static/img/contact/add.png'
 import { onMounted } from 'vue'
 onMounted(() => {
   // maps
@@ -41,7 +76,6 @@ onMounted(() => {
     width: 100%;
     height: 235px;
     position: relative;
-    background: #000;
   }
   .contact_info {
     display: grid;
@@ -50,10 +84,60 @@ onMounted(() => {
     .card {
       width: 100%;
       height: 146px;
-      background: #f9f9fe;
+      background: #f2f3fc;
       display: flex;
       align-items: center;
       justify-content: center;
+      .phone_icon {
+        width: 19px;
+        height: 19px;
+        margin-right: 10px;
+      }
+      .name {
+        font-size: 10px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: bold;
+        color: #262626;
+        margin-right: 4px;
+      }
+      .phone {
+        font-size: 10px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: bold;
+        color: #262626;
+      }
+      .wrap_box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .title_wrap {
+          display: flex;
+          align-items: center;
+          margin-bottom: 15px;
+          .email_icon {
+            width: 19px;
+            height: 19px;
+            margin-right: 7px;
+          }
+          .title {
+            font-size: 10px;
+            font-family: Alibaba PuHuiTi;
+            font-weight: bold;
+            color: #262626;
+          }
+        }
+        .email {
+          font-size: 9px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          color: #000000;
+          text-align: center;
+          line-height: 22px;
+        }
+      }
+      .mt {
+        margin-top: 20px;
+      }
     }
   }
   .map_title {
@@ -62,6 +146,11 @@ onMounted(() => {
     justify-content: center;
     padding: 41px 0;
     background: #f5f5f5;
+    .address {
+      width: 27px;
+      height: 26px;
+      margin-right: 9px;
+    }
   }
   .map_container {
     width: 100%;