|
@@ -1,25 +1,35 @@
|
|
<template>
|
|
<template>
|
|
- <v-card class="card-box px-5 mt-16 mx-3">
|
|
|
|
|
|
+ <v-card class="card-box px-5 my-3 mx-3 elevation-5">
|
|
<div class="social-media common-width">
|
|
<div class="social-media common-width">
|
|
<h5 class="social-media-header mt-10">
|
|
<h5 class="social-media-header mt-10">
|
|
<span class="inner-text">客服联系方式</span>
|
|
<span class="inner-text">客服联系方式</span>
|
|
</h5>
|
|
</h5>
|
|
<div class="d-flex flex-column align-center">
|
|
<div class="d-flex flex-column align-center">
|
|
<svg-icon name="warning" size="300"></svg-icon>
|
|
<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 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: 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>
|
|
|
|
+ <div class="font-size-15 mt-2">潘青海先生 Peter Pan</div>
|
|
</div>
|
|
</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: 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 class="mt-10">
|
|
|
|
+ <p class="mt-3 mb-2">联系电话:18621329797</p>
|
|
|
|
+ <p>电子邮箱:peter.pan@menduner.com</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-card>
|
|
</v-card>
|
|
@@ -27,6 +37,14 @@
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
defineOptions({ name: 'contactUs'})
|
|
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>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|