menduner/src/views/contactUs/index.vue

<template>
  <v-card class="card-box px-5 my-3 mx-3 elevation-5">
		<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 v-if="!isMobile" 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: 140px; height: 140px;">
							<v-img cover aspect-ratio="1/1" src="https://minio.menduner.com/dev/9e7a28d32e2eb72794e2051c88573eb4cb1e44c8bfff7e2f9f7ffe458f3a55df.png" width="140" height="140"></v-img>
						</div>
						<div class="font-size-15 mt-2">潘青海先生 Peter Pan</div>
					</div>
				</div>
        <div v-else class="pa-5" style="background-color: #e8f0f7; width: 100%">
          <div class="d-flex flex-column align-center">
						<div style="width: 140px; height: 140px;">
							<v-img cover aspect-ratio="1/1" src="https://minio.menduner.com/dev/9e7a28d32e2eb72794e2051c88573eb4cb1e44c8bfff7e2f9f7ffe458f3a55df.png" width="140" height="140"></v-img>
						</div>
						<div class="font-size-15 mt-2">潘青海先生 Peter Pan</div>
					</div>
          <div class="mt-10">
						<p  class="mt-3 mb-2">联系电话：18621329797</p>
						<p>电子邮箱：peter.pan@menduner.com</p>
					</div>
        </div>
			</div>
		</div>
	</v-card>
</template>

<script setup>
defineOptions({ name: 'contactUs'})
import { onMounted, ref } from 'vue'

// 组件挂载后添加事件监听器  
const isMobile = ref(false)
onMounted(() => {
  const userAgent = navigator.userAgent
  isMobile.value = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(userAgent)
})
</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>