<template>
  <div class="page flex-col">

    <SecondHeader :title="'CONTACT US'" :bcUrl="bgHeaderUrl" :desc="'联系我们'" :btnGroup="[{
      name: '联系我们', url: '/contact-us', isSelect: true
    }]" />

    <div class="box_3 flex-col">
      <div class="block_1 flex-row justify-between">
        <div class="box_4 flex-col">
          <div class="box_5 flex-row justify-between">
            <span class="text_5">携手阳生万物，共创健康未来</span>
            <img class="image_3" src="@/assets/common/caidai.png" />
          </div>
          <span class="text_6">诚邀全球志同道合的合作伙伴，共享千亿级蓝海市场。</span>
          <div class="box_6 flex-col">
            <div class="box_7 flex-row">
              <div class="text-group_3 flex-col justify-between">
                <span class="text_7">我们期待什么样的合作伙伴？</span>
                <span class="text_8">我们期待与具备以下资源和视野的精英人士/企业携手：</span>
              </div>
            </div>
            <div class="box_8 flex-row">
              <div class="block_2 flex-col">
                <div class="box_9 flex-col"></div>
                <span class="text_9">认同理念</span>
                <span class="text_10">高度认可“物理能量健康”的未来趋势与公司品牌理念。</span>
              </div>
              <img class="image_4" src="@/assets/common/shuxian.png" />
              <div class="block_3 flex-col">
                <div class="section_1 flex-col"></div>
                <span class="text_11">资源与渠道</span>
                <span class="text_12">拥有本地高端健康、医疗、美容、企业家圈层资源，或优质商业场地资源。</span>
              </div>
              <img class="image_4" src="@/assets/common/shuxian.png" />
              <div class="block_4 flex-col">
                <div class="section_2 flex-col"></div>
                <span class="text_13">资金实力</span>
                <span class="text_14">具备一定的项目投资实力和市场开拓能力。</span>
              </div>
              <img class="image_4" src="@/assets/common/shuxian.png" />
              <div class="block_5 flex-col">
                <div class="group_5 flex-col"></div>
                <span class="text_15">运营能力</span>
                <span class="text_16">拥有优秀的团队管理、市场运营和客户服务意识。</span>
              </div>
              <img class="image_4" src="@/assets/common/shuxian.png" />
              <div class="block_6 flex-col">
                <div class="group_6 flex-col"></div>
                <span class="text_17">长远眼光</span>
                <span class="text_18">致力于长期深耕大健康产业，而非短期投机。</span>
              </div>
            </div>
          </div>
        </div>
        <img class="image_8" src="@/assets/common/erweima.png" />
      </div>
      <div class="text-wrapper_2 flex-row">
        <span class="text_19">合作咨询表单</span>
      </div>
      <div class="text-wrapper_3 flex-row">
        <span class="text_20">提交您的合作意向，我们将尽快与您联系。</span>
      </div>
      <div class="block_7 flex-row justify-between">
        <el-input class="box_10" v-model="form.title" placeholder="* 您的姓名" />
        <el-input class="box_10" v-model="form.contactNumber" placeholder="* 联系电话" />
      </div>
      <div class="block_7 flex-row justify-between">
        <el-input class="box_10" v-model="form.email" placeholder="* 电子邮箱" />
        <el-input class="box_10" v-model="form.address" placeholder="* 您所在的城市" />
      </div>
      <div class="block_7 flex-row justify-between">
        <el-select v-model="form.mainBusiness" placeholder="* 主营业务/现有资源" class="box_10">
          <el-option v-for="item in jobList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="form.intentionCooperation" placeholder="* 意向合作模式" class="box_10">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <el-input class="block_12" type="textarea" :rows="7" v-model="form.question" placeholder="请输入您要咨询的问题" />
      <div class="block_13 flex-row">
        <div class="text-wrapper_11 align-center justify-center flex-col" @click="save" :class="{ 'loading': loading }">
          <span class="text_34" v-if="!loading">立即提交，开启财富之旅</span>
          <span class="text_34" v-else>提交中...</span>
        </div>
      </div>
    </div>
  </div>


  <el-dialog v-model="dialogVisible" :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 SecondHeader from '../components/second_header.vue'
import { ref, computed, onMounted, onUnmounted } from "vue";
import { ElMessage } from 'element-plus'
import bgHeaderUrl from '@/assets/contactUs/BC.png'

const dialogVisible = 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({
  title: '',
  contactNumber: '',
  email: '',
  address: '',
  mainBusiness: '',
  intentionCooperation: '',
  question: ''
})

const submit = ref({
  title: '',
  phton: ''
})

// 表单验证规则
const validateForm = () => {
  if (!form.value.title.trim()) {
    ElMessage.error('请输入您的姓名')
    return false
  }
  if (!form.value.contactNumber.trim()) {
    ElMessage.error('请输入联系电话')
    return false
  }
  // 简单的手机号验证
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(form.value.contactNumber)) {
    ElMessage.error('请输入正确的手机号码')
    return false
  }
  if (!form.value.email.trim()) {
    ElMessage.error('请输入电子邮箱')
    return false
  }
  // 简单的邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(form.value.email)) {
    ElMessage.error('请输入正确的邮箱地址')
    return false
  }
  if (!form.value.address.trim()) {
    ElMessage.error('请输入您所在的城市')
    return false
  }
  if (!form.value.mainBusiness) {
    ElMessage.error('请选择主营业务/现有资源')
    return false
  }
  if (!form.value.intentionCooperation) {
    ElMessage.error('请选择意向合作模式')
    return false
  }
  return true
}

// 提交表单
const save = async () => {
  // 表单验证
  if (!validateForm()) {
    return
  }

  loading.value = true

  try {
    // 准备提交的数据
    const submitData = {
      name: form.value.title,
      contactNumber: form.value.contactNumber,
      email: form.value.email,
      city: form.value.address,
      mainBusiness: form.value.mainBusiness,
      intentionCooperation: form.value.intentionCooperation,
      question: form.value.question,
      submit_time: new Date().toISOString()
    }

    // 使用代理路径，避免跨域问题
    const API_URL = 'https://service.wanyouziyu.com//admin-api/system/officialwebsite/cooperation-consultation/submit-cooperation-consultation' // 通过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.title
      submit.value.phton = form.value.contactNumber
      // 重置表单
      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 = {
    title: '',
    contactNumber: '',
    email: '',
    address: '',
    mainBusiness: '',
    intentionCooperation: '',
    question: ''
  }
}

// 合作模式选项
const typeList = ref([{
  value: '设备购买 - 直接采购设备，用于自身业务场景',
  label: '设备购买 - 直接采购设备，用于自身业务场景'
}, {
  value: '渠道代理 - 获得区域/行业授权，进行市场销售与运营',
  label: '渠道代理 - 获得区域/行业授权，进行市场销售与运营'
}, {
  value: '设备租赁 - 短期或长期租赁设备，满足灵活使用需求',
  label: '设备租赁 - 短期或长期租赁设备，满足灵活使用需求'
}, {
  value: '项目合作 - 共同开发定制化健康解决方案',
  label: '项目合作 - 共同开发定制化健康解决方案'
}, {
  value: '其他模式',
  label: '其他模式'
}])

// 主营业务选项
const jobList = ref([{
  value: '医疗/健康管理机构',
  label: '医疗/健康管理机构'
}, {
  value: '康养/度假基地',
  label: '康养/度假基地'
}, {
  value: '高端酒店/会所',
  label: '高端酒店/会所'
}, {
  value: '企业行政福利/员工健康项目',
  label: '企业行政福利/员工健康项目'
}, {
  value: '社区/社群健康服务资源',
  label: '社区/社群健康服务资源'
}, {
  value: '健康科技产品代理经验',
  label: '健康科技产品代理经验'
}, {
  value: '其他',
  label: '其他'
}])
</script>
<style src="./common.css" />
<style scoped>
.page {
  position: relative;
  width: 100vw;
}

.box_3 {
  width: 100vw;
  padding-bottom: 15vw;
}

.block_1 {
  width: 85.47vw;
  height: 35.27vw;
  margin: 7.23vw 0 0 13.48vw;
}

.box_4 {
  width: 72.97vw;
  height: 35.27vw;
}

.box_5 {
  width: 72.97vw;
}

.text_5 {
  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%);
  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;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.image_3 {
  width: 2.09vw;
  height: 0.63vw;
  margin-top: 0.06vw;
}

.text_6 {
  width: 38.91vw;
  height: 1.88vw;
  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.5vw;
  margin: 2.08vw 0 0 0.05vw;
}

.box_6 {
  height: 26.05vw;
  background: url(@/assets/contactUs/lianxi.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 72.92vw;
  margin: 2.5vw 0 0 0.05vw;
}

.box_7 {
  width: 29.54vw;
  height: 3.96vw;
  margin: 2.03vw 0 0 2.5vw;
}

.text-group_3 {
  width: 29.54vw;
  height: 3.96vw;
}

.text_7 {
  width: 23.39vw;
  height: 1.83vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
}

.text_8 {
  width: 29.54vw;
  height: 1.31vw;
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin-top: 0.84vw;
}

.box_8 {
  width: 67.45vw;
  height: 13.55vw;
  margin: 4.06vw 0 2.44vw 2.55vw;
}

.block_2 {
  width: 9.9vw;
  height: 9.12vw;
  margin-top: 2.24vw;
}

.box_9 {
  width: 3.34vw;
  height: 3.03vw;
  background: url(@/assets/contactUs/rtln.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-left: 0.16vw;
}

.text_9 {
  width: 4.95vw;
  height: 1.2vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin: 1.45vw 0 0 0.05vw;
}

.text_10 {
  width: 9.9vw;
  height: 2.14vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.83vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  line-height: 1.25vw;
  margin-top: 1.31vw;
}

.image_4 {
  width: 0.06vw;
  height: 13.55vw;
  margin-left: 2.04vw;
}

.block_3 {
  width: 10vw;
  height: 10.47vw;
  margin: 2.13vw 0 0 2.39vw;
}

.section_1 {
  width: 2.92vw;
  height: 3.23vw;
  background: url(@/assets/contactUs/zyyqd.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-left: 0.37vw;
}

.text_11 {
  width: 6.2vw;
  height: 1.25vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin-top: 1.36vw;
}

.text_12 {
  width: 10vw;
  height: 3.39vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.83vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  line-height: 1.25vw;
  margin-top: 1.25vw;
}

.block_4 {
  width: 9.95vw;
  height: 9.17vw;
  margin: 2.18vw 0 0 2.08vw;
}

.section_2 {
  width: 2.87vw;
  height: 3.18vw;
  background: url(@/assets/contactUs/zjsl.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-left: 0.42vw;
}

.text_13 {
  width: 4.9vw;
  height: 1.25vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin-top: 1.36vw;
}

.text_14 {
  width: 9.95vw;
  height: 2.14vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.83vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  line-height: 1.25vw;
  margin-top: 1.25vw;
}

.block_5 {
  width: 9.95vw;
  height: 8.96vw;
  margin: 2.39vw 0 0 2.13vw;
}

.group_5 {
  width: 2.82vw;
  height: 2.71vw;
  background: url(@/assets/contactUs/yynl.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-left: 0.42vw;
}

.text_15 {
  width: 4.9vw;
  height: 1.2vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin-top: 1.62vw;
}

.text_16 {
  width: 9.95vw;
  height: 2.14vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.83vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  line-height: 1.25vw;
  margin-top: 1.31vw;
}

.block_6 {
  width: 10vw;
  height: 9.02vw;
  margin: 2.39vw 0 0 2.29vw;
}

.group_6 {
  width: 3.34vw;
  height: 2.71vw;
  background: url(@/assets/contactUs/cyyg.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-left: 0.16vw;
}

.text_17 {
  width: 4.9vw;
  height: 1.25vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin: 1.61vw 0 0 0.05vw;
}

.text_18 {
  width: 10vw;
  height: 2.14vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.83vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  line-height: 1.25vw;
  margin-top: 1.31vw;
}

.image_8 {
  width: 11.46vw;
  height: 19.12vw;
  margin-top: 0.06vw;
}

.text-wrapper_2 {
  width: 11.1vw;
  height: 1.83vw;
  margin: 5.1vw 0 0 13.48vw;
}

.text_19 {
  width: 11.1vw;
  height: 1.83vw;
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
}

.text-wrapper_3 {
  width: 22.97vw;
  height: 1.41vw;
  margin: 1.3vw 0 0 13.43vw;
}

.text_20 {
  width: 22.97vw;
  height: 1.41vw;
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
}

.block_7 {
  width: 72.92vw;
  margin: 20px 0 0 13.54vw;
  display: flex;
  gap: 1vw;
}

.box_10 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 7px;
  height: 50px;
  width: 35.5vw;
  flex: 1;
}

.box_10>>>.el-select__wrapper {
  height: 50px;
  width: 100% !important;
}

.box_10>>>.el-input__wrapper {
  height: 50px;
  width: 100% !important;
}

/* 只优化表单部分的移动端适配 */
@media (max-width: 768px) {
  .block_7 {
    width: 85vw;
    margin: 15px auto 0;
    flex-direction: column;
    gap: 15px;
    padding: 0 5vw;
    box-sizing: border-box;
  }

  .box_10 {
    width: 100%;
    height: 45px;
    max-width: 100%;
  }

  .box_10>>>.el-select__wrapper {
    height: 45px;
    width: 100% !important;
    max-width: 100%;
  }

  .box_10>>>.el-input__wrapper {
    height: 45px;
    width: 100% !important;
    max-width: 100%;
  }

  .block_12 {
    width: 85vw !important;
    margin: 15px auto 0 !important;
    padding: 0 5vw;
    box-sizing: border-box;
  }

  .block_13 {
    width: 85vw !important;
    margin: 15px auto 0 !important;
    padding: 0 5vw;
    box-sizing: border-box;
  }

  .text-wrapper_11 {
    width: 100% !important;
    max-width: 100%;
    height: 45px !important;
  }

  .text_34 {
    font-size: 3.8vw !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  .block_7 {
    width: 90vw;
    margin: 10px auto 0;
    gap: 10px;
    padding: 0 5vw;
    box-sizing: border-box;
  }

  .box_10 {
    height: 40px;
    width: 100%;
    max-width: 100%;
  }

  .box_10>>>.el-select__wrapper {
    height: 40px;
    width: 100% !important;
    max-width: 100%;
  }

  .box_10>>>.el-input__wrapper {
    height: 40px;
    width: 100% !important;
    max-width: 100%;
  }

  .block_12 {
    width: 90vw !important;
    margin: 10px auto 0 !important;
    padding: 0 5vw;
    box-sizing: border-box;
  }

  .block_13 {
    width: 90vw !important;
    margin: 15px auto 0;
    padding: 0 5vw;
    box-sizing: border-box;
  }

  .text-wrapper_11 {
    width: 100% !important;
    max-width: 100%;
    height: 40px !important;
  }

  .text_34 {
    font-size: 3.5vw !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.block_12 {
  width: 72.87vw;
  margin: 1.04vw 0 5vw 13.54vw;
}

.block_13 {
  width: 16.1vw;
  height: 3.13vw;
  margin: 0 0 0 70.36vw;
}

.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_34 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.04vw;
  font-family: OPPOSans-B;
  font-weight: 700;
}

.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>