subsea-side-website/src/components/Bottom.vue

<template>
  <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>
import Logo from '@/static/img/index/12.png'
</script>

<style lang="scss" scoped>
.bottom_text_container {
  height: 300px;
  box-sizing: border-box;
  background: url(../static/img/index/11.png) no-repeat;
  background-size: 100% 100%;
  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>