Skip to content

W
wanyou_website
Commit c118ab3b by yang
Options

提交修改

parent dd927290
Showing with 875 additions and 120 deletions
src/components/Footer.vue
...@@ -3,27 +3,22 @@ ...@@ -3,27 +3,22 @@
<div class="flex-row"> <div class="flex-row">
<div class="footer_box flex-col"> <div class="footer_box flex-col">
<span class="footer_title">公司备案信息</span> <span class="footer_title">公司备案信息</span>
<br> <span class="text_44"
<span style="margin-top: 1vw;">经营许可证编号：川B2-20240967&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案/许可证号：川ICP备2024173426号</span>
class="text_44">经营许可证编号：川B2-20240967&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案/许可证号：川ICP备2024173426号</span> <div class="flex-row" style="margin-top: 3vw;">
<br>
<br>
<br>
<div class="flex-row">
<span class="footer_title">联系我们</span> <span class="footer_title">联系我们</span>
<span class="footer_title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;导航</span> <span
class="footer_title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;导航</span>
</div> </div>
<br> <div class=" flex-row" style="margin-top:1vw;">
<div class=" flex-row">
<span class="text_44">客服热线：400-888-9999</span> <span class="text_44">客服热线：400-888-9999</span>
<span class="text_44">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业总部地址：四川省成都市天府新区正兴街道上和领誉</span> <span
class="text_44">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业总部地址：四川省成都市天府新区正兴街道上和领誉</span>
</div> </div>
</div> </div>
<span class="paragraph_6">微信扫一扫<br/>关注阳生万物微信</span> <span class="paragraph_6">微信扫一扫<br />关注阳生万物微信</span>
<img class="image_20" <img class="image_20" src="@/assets/footer/qrCode.png" />
src="@/assets/footer/qrCode.png"/> <img class="image_21" src="@/assets/footer/footer.png" />
<img class="image_21"
src="@/assets/footer/footer.png"/>
</div> </div>
</footer> </footer>
</template> </template>
......
src/views/contact-us.vue
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
<el-dialog <el-dialog
v-model="dialogVisible" v-model="dialogVisible"
:showClose="false" :showClose="false"
width="45vw" :width="dialogWidth"
class="dialog justify-center align-center" class="dialog justify-center align-center"
> >
<div class="dialog_image-wrapper_1 justify-end"> <div class="dialog_image-wrapper_1 justify-end">
...@@ -131,13 +131,39 @@ ...@@ -131,13 +131,39 @@
</template> </template>
<script setup> <script setup>
import SecondHeader from '../components/second_header.vue' import SecondHeader from '../components/second_header.vue'
import {ref} from "vue"; import {ref, computed, onMounted, onUnmounted} from "vue";
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import bgHeaderUrl from '@/assets/contactUs/BC.png' import bgHeaderUrl from '@/assets/contactUs/BC.png'
const dialogVisible = ref(false) const dialogVisible = ref(false)
const loading = ref(false) const loading = ref(false)
// 响应式dialog宽度
const windowWidth = ref(window.innerWidth)
const dialogWidth = computed(() => {
if (windowWidth.value <= 480) {
return '90vw'
} else if (windowWidth.value <= 768) {
return '90vw'
} else {
return '45vw'
}
})
// 监听窗口大小变化
const handleResize = () => {
windowWidth.value = window.innerWidth
}
onMounted(() => {
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
// 表单数据 // 表单数据
const form = ref({ const form = ref({
title: '', title: '',
...@@ -948,4 +974,130 @@ const jobList = ref([{ ...@@ -948,4 +974,130 @@ const jobList = ref([{
font-weight: 500; font-weight: 500;
} }
} }
/* 手机端dialog适配 */
@media (max-width: 768px) {
.dialog {
.dialog_section_1 {
width: 85vw !important;
height: auto !important;
padding: 5vw !important;
margin-top: -3vw;
}
.dialog_image-wrapper_1 {
width: 85vw !important;
}
.dialog——label_1 {
width: 6vw !important;
height: 6vw !important;
}
.dialog_box_2 {
width: 15vw !important;
height: 15vw !important;
}
.dialog_box_3 {
width: 75vw !important;
height: auto !important;
}
.dialog_text-group_1 {
width: 75vw !important;
height: auto !important;
}
.dialog_text_1 {
font-size: 5vw !important;
white-space: normal !important;
margin: 3vw 0 !important;
}
.dialog_text_2 {
font-size: 3.5vw !important;
line-height: 5vw !important;
}
.dialog_box_4 {
width: 70vw !important;
height: auto !important;
margin-top: 8vw !important;
padding-top: 8vw !important;
}
.dialog_text-wrapper_1 {
width: 70vw !important;
white-space: normal !important;
}
.dialog_text_3 {
font-size: 3.5vw !important;
}
.dialog_text_4 {
font-size: 3.5vw !important;
}
}
}
@media (max-width: 480px) {
.dialog {
.dialog_section_1 {
width: 90vw !important;
padding: 6vw !important;
}
.dialog_image-wrapper_1 {
width: 90vw !important;
}
.dialog——label_1 {
width: 7vw !important;
height: 7vw !important;
}
.dialog_box_2 {
width: 18vw !important;
height: 18vw !important;
}
.dialog_box_3 {
width: 80vw !important;
}
.dialog_text-group_1 {
width: 80vw !important;
}
.dialog_text_1 {
font-size: 5.5vw !important;
margin: 4vw 0 !important;
}
.dialog_text_2 {
font-size: 4vw !important;
line-height: 6vw !important;
}
.dialog_box_4 {
width: 75vw !important;
margin-top: 10vw !important;
padding-top: 10vw !important;
}
.dialog_text-wrapper_1 {
width: 75vw !important;
}
.dialog_text_3 {
font-size: 4vw !important;
}
.dialog_text_4 {
font-size: 4vw !important;
}
}
}
</style> </style>
\ No newline at end of file
src/views/homepage.vue
<template> <template>
<div class="homepage-container flex-col"> <div class="homepage-container flex-col">
<div class="hero-section flex-col"> <div class="flex-col">
<!-- HeaderNav组件已移到Layout中 --> <!-- HeaderNav组件已移到Layout中 -->
<div class="hero-content flex-row"> <div class="hero-content flex-row">
<div class="section_8 flex-col"> <div class="section_8 flex-col">
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="hero-description flex-col justify-end"> <div class="hero-description flex-col justify-end">
<div class="group_1 flex-row justify-between"> <div class="group_1 flex-row justify-between">
<div class="text-group_1 flex-col justify-between"> <div class="text-group_1 flex-col justify-between">
<span class="text_3">多模态物理能量自愈舱的巅峰之作</span> <span class="text_3">多模态物理能量自愈舱的巅峰之作</span>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</div> </div>
<div class="list_1 flex-row"> <div class="list_1 flex-row">
<div class="list-items_1 flex-col" :style="{ background: item.lanhuBg0 }" <div class="list-items_1 flex-col" :style="{ background: item.lanhuBg0 }"
v-for="(item, index) in loopData0" :key="index"> v-for="(item, index) in loopData0" :key="index" style="background-size: 100% 100%">
<div class="text-group_2 flex-col justify-between"> <div class="text-group_2 flex-col justify-between">
<div> <div>
<span class="text_8" v-html="item.lanhutext0"></span> <span class="text_8" v-html="item.lanhutext0"></span>
...@@ -172,88 +172,242 @@ ...@@ -172,88 +172,242 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box_15 flex-col"> <div class="box_15 flex-col">
<div class="group_10 flex-row justify-between"> <div class="group_10 flex-row justify-between">
<div class="text-group_13 flex-col justify-between"> <div class="text-group_6 flex-col justify-between">
<span class="text_39">联系我们</span> <span class="text_17">联系我们</span>
<span class="text_40">开启您的健康科技事业</span> <span class="text_18">开启您的健康科技事业</span>
</div> </div>
<img class="image_21" src="@/assets/common/caidai.png"/> <img class="image_9" src="@/assets/common/caidai.png"/>
</div> </div>
<div class="group_11 flex-row justify-between"> <div class="group_11 flex-row justify-between">
<el-input class="text-wrapper_7" placeholder="您的姓名"/> <el-input class="text-wrapper_7" v-model="form.name" placeholder="您的姓名"/>
<el-input class="text-wrapper_8" placeholder="您的手机"/> <el-input class="text-wrapper_8" v-model="form.mobile" placeholder="您的手机"/>
<el-input class="text-wrapper_9" placeholder="您的微信"/> <el-input class="text-wrapper_9" v-model="form.wechat" placeholder="您的微信"/>
</div> </div>
<el-input class="text-wrapper_10" type="textarea" :rows="7" placeholder="请输入您要咨询的问题"/> <el-input class="text-wrapper_10" v-model="form.question" type="textarea" :rows="7"
placeholder="请输入您要咨询的问题"/>
<div class="group_12 flex-row justify-between"> <div class="group_12 flex-row justify-between">
<span class="text_45">*&nbsp;您提交的信息请确保填写真实，以便我们再48小时内联系您</span> <span class="text_45">*&nbsp;您提交的信息请确保填写真实，以便我们再48小时内联系您</span>
<div class="text-wrapper_11 align-center justify-center flex-col"> <div class="text-wrapper_11 align-center justify-center flex-col" @click="save">
<span class="text_46">提交</span> <span class="text_46" v-if="!loading">提交</span>
<span class="text_46" v-else>提交中...</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template>
<script>
import HeroSection from '@/components/HeroSection.vue'
export default { <el-dialog
components: { v-model="dialogVisible"
HeroSection :showClose="false"
:width="dialogWidth"
class="dialog justify-center align-center"
>
<div class="dialog_image-wrapper_1 justify-end">
<img src="@/assets/contactUs/close.png" class="dialog——label_1" @click="dialogVisible=false" alt=""/>
</div>
<div class="dialog_section_1 justify-center align-center flex-col">
<div class="dialog_box_2 flex-row"></div>
<div class="dialog_box_3 flex-row">
<div class="dialog_text-group_1 flex-col">
<span class="dialog_text_1">感谢您的提交！</span>
<span class="dialog_text_2"
>我们已收到您的合作意向，专业的人员将在24小时内与您联系，请保持电话畅通。</span
>
</div>
</div>
<div class="dialog_box_4 flex-row">
<div class="dialog_text-wrapper_1 justify-center align-center">
<span class="dialog_text_3">直接联系信息：</span>
<span class="dialog_text_4">{{ submit.phton }}（{{ submit.name }}）</span>
</div>
</div>
</div>
</el-dialog>
</template>
<script setup>
import content1 from '@/assets/homepage/content1.png'
import content2 from '@/assets/homepage/content2.png'
import content3 from '@/assets/homepage/content3.png'
import addIcon from '@/assets/homepage/add.png'
import lbxIcon from '@/assets/homepage/lbx.png'
import hdIcon from '@/assets/homepage/hd.png'
import {ref, computed, onMounted, onUnmounted} from "vue";
import {ElMessage} from "element-plus";
// 表单数据
const form = ref({
name: '',
mobile: '',
wechat: '',
question: ''
})
const submit = ref({
title: '',
phton: ''
})
const dialogVisible = ref(false)
// 响应式dialog宽度
const windowWidth = ref(window.innerWidth)
const dialogWidth = computed(() => {
if (windowWidth.value <= 480) {
return '90vw'
} else if (windowWidth.value <= 768) {
return '90vw'
} else {
return '45vw'
}
})
// 监听窗口大小变化
const handleResize = () => {
windowWidth.value = window.innerWidth
}
onMounted(() => {
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
const loopData0 = ref([{
lanhuBg0: `url(${content1}) center no-repeat`,
lanhutext0: 'SEIENTIFIC<br/>BASIS',
lanhutext1: '科学依据',
lanhuimage0: addIcon,
slot1: 1,
},
{
lanhuBg0: `url(${content2}) center no-repeat`,
lanhutext0: 'TECHNICAL<br/>POSITIONING',
lanhutext1: '技术定位',
lanhuimage0: addIcon,
specialSlot2: {
lanhuimage0: lbxIcon,
},
slot2: 2,
}, },
data() { {
return { lanhuBg0: `url(${content3}) center no-repeat`,
loopData0: [{ lanhutext0: 'CELL CHARGING<br/>STATION',
lanhuBg0: 'url(src/assets/homepage/content1.png) 100% no-repeat', lanhutext1: '人体细胞的无限充电站',
lanhutext0: 'SEIENTIFIC<br/>BASIS', lanhuimage0: addIcon,
lanhutext1: '科学依据', specialSlot2: {
lanhuimage0: 'src/assets/homepage/add.png', lanhuimage0: hdIcon,
slot1: 1, },
}, slot2: 2,
{
lanhuBg0: 'url(src/assets/homepage/content2.png) 100% no-repeat',
lanhutext0: 'TECHNICAL<br/>POSITIONING',
lanhutext1: '技术定位',
lanhuimage0: 'src/assets/homepage/add.png',
specialSlot2: {
lanhuimage0: 'src/assets/homepage/lbx.png',
},
slot2: 2,
},
{
lanhuBg0: 'url(src/assets/homepage/content3.png) 100% no-repeat',
lanhutext0: 'CELL CHARGING<br/>STATION',
lanhutext1: '人体细胞的无限充电站',
lanhuimage0: 'src/assets/homepage/add.png',
specialSlot2: {
lanhuimage0: 'src/assets/homepage/hd.png',
},
slot2: 2,
},
],
constants: {},
};
}, },
methods: {}, ])
};
// 表单验证规则
const validateForm = () => {
if (!form.value.name.trim()) {
ElMessage.error('请输入您的姓名')
return false
}
if (!form.value.mobile.trim()) {
ElMessage.error('请输入联系电话')
return false
}
// 简单的手机号验证
const phoneRegex = /^1[3-9]\d{9}$/
if (!phoneRegex.test(form.value.mobile)) {
ElMessage.error('请输入正确的手机号码')
return false
}
if (!form.value.wechat.trim()) {
ElMessage.error('请输入微信号')
return false
}
return true
}
const loading = ref(false)
// 提交表单
const save = async () => {
// 表单验证
if (!validateForm()) {
return
}
loading.value = true
try {
// 准备提交的数据
const submitData = {
name: form.value.name,
mobile: form.value.mobile,
wechat: form.value.wechat,
question: form.value.question
}
// 使用代理路径，避免跨域问题
const API_URL = '/api/admin-api/system/officialwebsite/contact-us/submit-contact-us' // 通过Vite代理转发请求
const response = await fetch(API_URL, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(submitData)
})
if (response.ok) {
const result = await response.json()
console.log('提交成功:', result)
// 显示成功对话框
dialogVisible.value = true
submit.value.name = form.value.name
submit.value.phton = form.value.mobile
// 重置表单
resetForm()
ElMessage.success('提交成功！我们将在24小时内与您联系')
} else {
throw new Error(`HTTP error! status: ${response.status}`)
}
} catch (error) {
console.error('提交失败:', error)
ElMessage.error('提交失败，请稍后重试或直接联系客服：13641398000')
} finally {
loading.value = false
}
}
// 重置表单
const resetForm = () => {
form.value = {
name: '',
mobile: '',
wechat: '',
question: ''
}
}
</script> </script>
<style src="./common.css"/> <style src="./common.css"/>
<style lang="css" scoped> <style lang="css" scoped>
.homepage-container { .homepage-container {
position: relative; position: relative;
width: 100vw; width: 100vw;
height: 320vw; height: 330vw;
overflow: hidden; overflow: hidden;
} }
.hero-section {
position: relative;
width: 100vw;
height: 320vw;
}
.hero-content { .hero-content {
width: 100vw; width: 100vw;
height: 56.25vw; height: 56.25vw;
...@@ -1200,7 +1354,7 @@ export default { ...@@ -1200,7 +1354,7 @@ export default {
position: absolute; position: absolute;
left: 0; left: 0;
top: 281.25vw; top: 281.25vw;
width: 100vw; width: 72.97vw;
height: 38.08vw; height: 38.08vw;
} }
...@@ -1210,46 +1364,6 @@ export default { ...@@ -1210,46 +1364,6 @@ export default {
margin: 6.25vw 0 0 13.43vw; margin: 6.25vw 0 0 13.43vw;
} }
.text-group_13 {
width: 17.04vw;
height: 5.16vw;
}
.text_39 {
background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0,
rgba(0, 199, 218, 1) 100%,
rgba(0, 199, 218, 1) 100%);
width: 10vw;
overflow-wrap: break-word;
color: rgba(0, 82, 217, 1);
font-size: 2.5vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: left;
white-space: nowrap;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text_40 {
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.66vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 2;
}
.image_21 {
width: 2.09vw;
height: 0.63vw;
}
.group_11 { .group_11 {
width: 72.92vw; width: 72.92vw;
height: 3.13vw; height: 3.13vw;
...@@ -1316,6 +1430,31 @@ export default { ...@@ -1316,6 +1430,31 @@ export default {
width: 22.92vw; width: 22.92vw;
} }
.text-wrapper_11 {
background-color: rgba(0, 82, 217, 1);
border-radius: 7px;
height: 3.13vw;
width: 16.1vw;
cursor: pointer;
transition: all 0.3s ease;
}
.text-wrapper_11:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 82, 217, 0.3);
}
.text-wrapper_11.loading {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.text-wrapper_11.loading:hover {
transform: none;
box-shadow: none;
}
.text_46 { .text_46 {
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
...@@ -1325,4 +1464,471 @@ export default { ...@@ -1325,4 +1464,471 @@ export default {
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
} }
.text-wrapper_10 {
width: 100% !important;
height: auto !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
width: 100% !important;
min-height: 100px !important;
}
/* 手机端表单适配优化 */
@media (max-width: 768px) {
.section_8 {
width: 40.73vw;
height: 23.96vw;
margin: 8vw 0 0 4.06vw;
}
.homepage-container {
height: auto !important;
min-height: 400vw;
}
.box_15 {
position: relative !important;
width: 90vw !important;
height: auto !important;
top: auto !important;
left: auto !important;
margin: 5vw auto 10vw !important;
padding: 3vw 5vw !important;
box-sizing: border-box;
z-index: 100;
}
.group_10 {
width: 100% !important;
height: auto !important;
margin: 0 0 3vw 0 !important;
}
.group_11 {
width: 100% !important;
height: auto !important;
margin: 15px 0 0 0 !important;
flex-direction: column !important;
gap: 15px;
justify-content: flex-start !important;
align-items: stretch !important;
}
.text-wrapper_7,
.text-wrapper_8,
.text-wrapper_9 {
width: 100% !important;
height: 45px !important;
max-width: 100%;
margin-left: 0 !important;
}
.text-wrapper_7 >>> .el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper {
height: 45px !important;
width: 100% !important;
}
.text-wrapper_10 {
width: 100% !important;
height: auto !important;
margin: 15px 0 !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
width: 100% !important;
min-height: 100px !important;
}
.group_12 {
width: 100% !important;
height: auto !important;
margin: 15px 0 5vw 0 !important;
flex-direction: column !important;
gap: 15px;
justify-content: flex-start !important;
align-items: stretch !important;
}
.text_45 {
width: 100%;
text-align: center;
font-size: 2.5vw;
white-space: normal;
margin-top: 0;
}
.text-wrapper_11 {
width: 100% !important;
max-width: 100%;
height: 45px !important;
margin-left: 0 !important;
}
.text_46 {
font-size: 3.8vw !important;
}
}
@media (max-width: 480px) {
.homepage-container {
height: auto !important;
min-height: 450vw;
}
.box_15 {
position: relative !important;
width: 95vw !important;
height: auto !important;
top: auto !important;
left: auto !important;
margin: 5vw auto 10vw !important;
padding: 3vw 2.5vw !important;
box-sizing: border-box;
z-index: 100;
}
.group_10 {
margin: 0 0 2vw 0 !important;
}
.group_11 {
margin: 10px 0 0 0 !important;
gap: 10px;
}
.text-wrapper_7,
.text-wrapper_8,
.text-wrapper_9 {
height: 40px !important;
}
.text-wrapper_7 >>> .el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper {
height: 40px !important;
}
.text-wrapper_10 {
margin: 10px 0 !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
min-height: 80px !important;
}
.group_12 {
margin: 10px 0 5vw 0 !important;
gap: 10px;
}
.text_45 {
font-size: 3vw;
}
.text-wrapper_11 {
height: 40px !important;
}
.text_46 {
font-size: 3.5vw !important;
}
}
/* Android设备竖屏特殊适配 */
@media screen and (max-width: 768px) and (orientation: portrait) {
.homepage-container {
position: relative;
width: 100vw;
height: auto;
min-height: 400vw;
overflow: visible;
}
.box_15 {
position: relative !important;
width: 90vw !important;
height: auto !important;
top: auto !important;
left: auto !important;
margin: 5vw auto 15vw !important;
padding: 3vw 5vw !important;
box-sizing: border-box;
z-index: 10;
}
.group_11 {
flex-direction: column !important;
align-items: stretch !important;
width: 100%;
margin: 15px 0 0 0;
gap: 15px;
}
.text-wrapper_7,
.text-wrapper_8,
.text-wrapper_9 {
width: 100% !important;
height: 45px !important;
max-width: 100%;
margin-left: 0 !important;
}
.text-wrapper_7 >>> .el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper {
height: 45px !important;
width: 100% !important;
}
.text-wrapper_10 {
width: 100% !important;
height: auto !important;
margin: 15px 0 !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
width: 100% !important;
min-height: 100px !important;
}
.group_12 {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
margin: 15px 0 5vw 0 !important;
gap: 15px;
}
.text-wrapper_11 {
width: 100% !important;
max-width: 100%;
height: 45px !important;
margin-left: 0 !important;
}
}
.dialog {
.dialog_section_1 {
background-color: rgba(255, 255, 255, 1);
width: 43.4vw;
height: 30vw;
margin-top: -2vw;
}
.dialog_image-wrapper_1 {
width: 43.4vw;
}
.dialog——label_1 {
width: 2.3vw;
height: 2.3vw;
object-fit: cover;
}
.dialog_box_2 {
width: 6.2vw;
height: 6.2vw;
background: url(@/assets/contactUs/success.png) 100% no-repeat;
background-size: 100% 100%;
}
.dialog_box_3 {
width: 34.43vw;
height: 7.09vw;
}
.dialog_text-group_1 {
width: 34.43vw;
height: 7.09vw;
}
.dialog_text_1 {
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 2.5vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: center;
white-space: nowrap;
margin: 1vw 0;
}
.dialog_text_2 {
overflow-wrap: break-word;
color: #434343;
font-size: 1.25vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: center;
}
.dialog_box_4 {
width: 33vw;
height: 1.25vw;
margin-top: 5vw;
padding-top: 50px;
border-top: 2px #B6B6B6 dashed;
}
.dialog_text-wrapper_1 {
width: 30vw;
overflow-wrap: break-word;
font-size: 0;
font-family: OPPOSans-B;
font-weight: 700;
white-space: nowrap;
}
.dialog_text_3 {
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.25vw;
font-family: OPPOSans-B;
font-weight: 700;
}
.dialog_text_4 {
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.25vw;
font-family: OPPOSans-M;
font-weight: 500;
}
}
/* 手机端dialog适配 */
@media (max-width: 768px) {
.dialog {
.dialog_section_1 {
width: 85vw !important;
height: auto !important;
padding: 5vw !important;
margin-top: -3vw;
}
.dialog_image-wrapper_1 {
width: 85vw !important;
}
.dialog——label_1 {
width: 6vw !important;
height: 6vw !important;
}
.dialog_box_2 {
width: 15vw !important;
height: 15vw !important;
}
.dialog_box_3 {
width: 75vw !important;
height: auto !important;
}
.dialog_text-group_1 {
width: 75vw !important;
height: auto !important;
}
.dialog_text_1 {
font-size: 5vw !important;
white-space: normal !important;
margin: 3vw 0 !important;
}
.dialog_text_2 {
font-size: 3.5vw !important;
line-height: 5vw !important;
}
.dialog_box_4 {
width: 70vw !important;
height: auto !important;
margin-top: 8vw !important;
padding-top: 8vw !important;
}
.dialog_text-wrapper_1 {
width: 70vw !important;
white-space: normal !important;
}
.dialog_text_3 {
font-size: 3.5vw !important;
}
.dialog_text_4 {
font-size: 3.5vw !important;
}
}
}
@media (max-width: 480px) {
.dialog {
.dialog_section_1 {
width: 90vw !important;
padding: 6vw !important;
}
.dialog_image-wrapper_1 {
width: 90vw !important;
}
.dialog——label_1 {
width: 7vw !important;
height: 7vw !important;
}
.dialog_box_2 {
width: 18vw !important;
height: 18vw !important;
}
.dialog_box_3 {
width: 80vw !important;
}
.dialog_text-group_1 {
width: 80vw !important;
}
.dialog_text_1 {
font-size: 5.5vw !important;
margin: 4vw 0 !important;
}
.dialog_text_2 {
font-size: 4vw !important;
line-height: 6vw !important;
}
.dialog_box_4 {
width: 75vw !important;
margin-top: 10vw !important;
padding-top: 10vw !important;
}
.dialog_text-wrapper_1 {
width: 75vw !important;
}
.dialog_text_3 {
font-size: 4vw !important;
}
.dialog_text_4 {
font-size: 4vw !important;
}
}
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment