hjyd-mobile/src/pages/Contact.vue

<template>
  <div class="contact_container">
    <div class="company_img">
      <div class="mask">
        <div class="logo_wrap">产品梦工厂</div>
      </div>
    </div>
    <div class="contact_info">
      <div class="card"></div>
    </div>
    <div class="map_title">如何找到我们</div>
    <div class="map_container"></div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.contact_container {
  .company_img {
    width: 100%;
    height: 235px;
    position: relative;
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(40, 63, 231, 0.66);
      display: flex;
      align-items: center;
      justify-content: center;
      .logo_wrap {
        display: flex;
        align-items: center;
      }
    }
  }
  .contact_info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    .card {
      width: 100%;
      height: 146px;
      background: #c0c5ef;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .map_title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 108px;
  }
  .map_container {
    width: 100%;
    height: 110vw;
    background: #000;
  }
}
</style>