底部

src/components/Bottom.vue

@@ -1,10 +1,115 @@
 <template>
-  <div class="bottom_container">bottom container</div>
+  <div class="bottom_text_container">
+    <div>
+      <img :src="Logo" alt="" class="img" />
+    </div>
+    <div class="some_link_container">
+      <div class="some_link">
+        <p>首页</p>
+        <p>|</p>
+        <p>工业设计</p>
+        <p>|</p>
+        <p>企业文化</p>
+        <p>|</p>
+        <p>软硬件开发</p>
+        <p>|</p>
+        <p>招聘</p>
+        <p>|</p>
+        <p>联系我们</p>
+        <p>|</p>
+        <p>关于我们</p>
+      </div>
+      <div class="address">
+        <p>北京市昌平区回龙观街道博纳集团3号楼一层</p>
+        <p class="compony">产品梦工厂</p>
+      </div>
+      <div class="contract_type">
+        <p class="phone_1">Tel：13717892017</p>
+        <p>Tel：13161967787</p>
+        <p class="email">
+          邮箱：<span class="blue_text">info@iflytop.com</span>
+        </p>
+      </div>
+    </div>
+    <div class="intro">
+      <p class="text1">
+        专业从事研发12年，产品梦工厂,作为一家资深的研发公司，主导了大量产品从需求→产品定义→策划
+        →外观→结构→硬件→嵌软→软件→全功能样机→模具→批量→灰度测试→产能爬坡的全流程经验。
+      </p>
+      <p>
+        专业的团队，加上技术的沉淀，以及自有工厂的加持我们的目标只有一个：做产品，找产品梦工厂就对
+        了帮您节省投资。
+      </p>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Logo from '@/static/img/12.png'
+</script>
 
 <style lang="scss" scoped>
-.bottom_container {
+.bottom_text_container {
+  height: 300px;
+  box-sizing: border-box;
+  background: #1d1e20;
+  display: flex;
+  align-items: center;
+  padding: 85px 107px 71px 106px;
+  .img {
+    width: 106px;
+    height: 93px;
+  }
+  .some_link_container {
+    height: 100%;
+    margin: 0 135px 0 120px;
+    .some_link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 611px;
+      font-size: 14px;
+      font-weight: 300;
+      color: #e3e3e3;
+      margin-bottom: 50px;
+    }
+    .address {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 300;
+      color: #e3e3e3;
+      margin-bottom: 50px;
+      .compony {
+        margin-left: 24px;
+      }
+    }
+    .contract_type {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 300;
+      color: #e3e3e3;
+      letter-spacing: 3px;
+      white-space: nowrap;
+      .phone_1 {
+        margin-right: 36px;
+      }
+      .email {
+        margin-left: 36px;
+      }
+    }
+  }
+  .intro {
+    font-size: 14px;
+    font-weight: 300;
+    color: #e3e3e3;
+    line-height: 20px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    word-break: break-all;
+  }
 }
 </style>