menduner/src/views/headhunting/components/contact.vue

<template>
  <div class="social-media common-width">
    <h5 class="social-media-header">
      <span class="inner-text">联系我们</span>
    </h5>
    <div class="d-flex">
      <div class="left">
        <h2>欢迎关注，了解门墩儿的新动态。</h2>
        <p class="mt-3" style="font-size: .9rem;">门墩儿在所有主流社交媒体都有账号。欢迎关注我们，以便了解关于发展趋势和领导力问题的最新见解。</p>
        <div class="d-flex align-center social-contact mt-5 justify-space-between">
          <div>
            <p class="mb-2">联系方式</p>
            <p>猎头顾问： 姚嘉庆 Julia</p>
            <p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：Julia.yao@menduner.com</p>
            <p>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：18501626969</p>
          </div>
          <div class="text-center">
            <div style="width: 120px; height: 120px; margin: auto;">
              <v-img class="ml-2" cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/menduner/official-account-code4.jpg" width="120" height="120"></v-img>
            </div>
            <div class="font-size-15 ml-4 mt-1">关注menduner公众号</div>
          </div>
        </div>
      </div>
      <div class="right text-end">
        <img src="https://minio.citupro.com/dev/menduner/headhunting/concact-bg.jpg" height="324" width="460" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'contactPage'})
</script>

<style scoped lang="scss">
.common-width {
  width: 100%;
  max-width: 1000px;
}
.social-media {
  margin: auto;
  padding-bottom: 100px;
  &-header {
    position: relative;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 52px;
    .inner-text {
      display: inline-block;
      background-color: #fff;
      padding: 0 18px;
      color: #4c4c4e;
      position: relative;
      z-index: 2;
    }
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 0;
      border-top: 1px dotted #747476;
      left: 0;
      bottom: 50%;
      margin-bottom: 2px;
    }
  }
  .left {
    width: 50%;
    color: #4c4c4e;
    .social-contact {
      padding: 20px 20px;
      background-color: #e8f0f7;
    }
  }
  .right {
    flex: 1;
  }
}
</style>