menduner/src/views/contactUs/index.vue

<template>
  <v-card class="card-box px-5 mt-16 mx-3">
		<div class="social-media common-width">
			<h5 class="social-media-header mt-10">
				<span class="inner-text">客服联系方式</span>
			</h5>
			<div class="d-flex flex-column align-center">
				<svg-icon name="warning" size="300"></svg-icon>
				<div class="d-flex justify-space-between">
					<div class="d-flex align-center social-contact pa-8 mt-5 justify-space-between">
						<div class="ml-3">
							<p  class="mt-3 mb-2">联系电话：18621329797</p>
							<p>电子邮箱：peter.pan@menduner.com</p>
						</div>
						<div class="mr-10 d-flex flex-column align-center">
							<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>
			</div>
		</div>
	</v-card>
</template>

<script setup>
defineOptions({ name: 'contactUs'})
</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;
    .inner-text {
      display: inline-block;
      background-color: #fff;
      padding: 0 18px;
      color: #ff5252;
      position: relative;
			font-size: 30px;
      z-index: 2;
    }
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 0;
      border-top: 1px dotted #ff5252;
      left: 0;
      bottom: 50%;
      margin-bottom: -1px;
    }
  }
}
.social-contact {
	width: 600px;
  background-color: #e8f0f7;
}
</style>