menduner/src/views/recruit/components/contactUs/index.vue

<template>
  <v-card class="card-box pa-5 pt-16" :class="{'mt-16': route.path === '/contactUs', 'mx-3': route.path === '/contactUs'}">
		<div class="social-media common-width">
			<h5 class="social-media-header">
				<span class="inner-text">联系我们</span>
			</h5>
			<div class="d-flex justify-space-between">
				<div class="left">
					<h2>欢迎关注，了解门墩儿的新动态。</h2>
					<p class="mt-3" style="font-size: .9rem;">门墩儿在所有主流社交媒体都有账号。欢迎关注我们，以便了解关于发展趋势和领导力问题的最新见解。</p>
					<div class="d-flex align-center social-contact pa-8 mt-5 justify-space-between">
						<div class="ml-3">
							<p>联系方式</p>
							<p  class="mt-3 mb-2">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：18621329797</p>
							<p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：peter.pan@menduner.com</p>
						</div>
						<div class="mr-10">
							<div style="width: 120px; height: 120px;">
								<v-img cover aspect-ratio="1/1" src="https://minio.menduner.com/dev/menduner/contact.png" width="120" height="120"></v-img>
							</div>
							<div class="font-size-15 mt-2">潘青海 Peter Pan</div>
						</div>
					</div>
				</div>
        <v-card elevation="3" width="300" height="304" class="d-flex flex-column align-center pt-4">
          <div style="width: 200px; height: 200px;">
            <v-img src="https://minio.citupro.com/dev/menduner/official-account-code4.jpg" width="200" height="200"></v-img>
          </div>
          <p>关注"门墩儿"微信公众号</p>
          <p>了解更多行业招聘资讯</p>
        </v-card>
			</div>
		</div>
	</v-card>
</template>

<script setup>
defineOptions({ name: 'contactUs'})
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

<style scoped lang="scss">
.common-width {
  width: 100%;
  max-width: 1100px;
}
.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: 63%;
    color: #4c4c4e;
    .social-contact {
      background-color: #e8f0f7;
    }
  }
}
</style>