menduner-uniapp/pagesB/headhunting/components/contact.vue

<template>
  <view class="main">
    <uni-title v-if="showTitle" type="h1" title="联系我们" align="center"></uni-title>
    <view class="main-footer">
      <uni-title type="h3" title="欢迎关注，了解门墩儿的新动态。"></uni-title>
      <view class="subTitle">门墩儿在所有主流社交媒体都有账号。欢迎关注我们，以便了解关于发展趋势和领导力问题的最新见解。</view>
      <view class="main-footer-contact">
        <view class="main-footer-contact-item"><text>猎头顾问</text>：姚嘉庆 Julia Yao</view>
        <view class="main-footer-contact-item"><text>邮箱</text>：Julia.yao@menduner.com</view>
        <view class="main-footer-contact-item"><text>手机</text>：18501626969</view>
        <view class="qr">
          <image
            src="https://minio.citupro.com/dev/menduner/official-account-code4.jpg"
            mode="scaleToFill"
          />
          <view class="subTitle">关注menduner公众号</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
	defineProps({ 
		showTitle: {
			type: Boolean,
			default: true
		}
	})

</script>

<style lang="scss" scoped>
.main {
  &-footer {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    background: #f5f5f5;
    .subTitle {
      font-size: 24rpx;
      margin-bottom: 20rpx;
      line-height: 40rpx;
      color: #666;
    }
    &-contact {
      &-item {
        margin-bottom: 20rpx;
        text {
          display: inline-block;
          width: 140rpx;
          text-align-last: justify;
        }
      }
      
    }
    .qr {
      image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 10rpx;
      }
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-top: 20rpx;
    }
  }
}
</style>