<template>
  <div class="homepage-container flex-col">
    <div class="flex-col">
      <!-- HeaderNav组件已移到Layout中 -->
      <div class="hero-content flex-row">
        <!-- 轮播图容器 -->
        <div class="carousel-container" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
          <div class="carousel-slides" :class="{ 'no-transition': isTransitioning }"
            :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
            <div v-for="(slide, index) in carouselSlides" :key="index" class="carousel-slide"
              :style="{ backgroundImage: `url(${slide.background})` }">
              <div class="slide-content">
                <span class="paragraph_1">{{ slide.title }}</span>
                <span class="paragraph_2">{{ slide.description }}</span>
                <img class="image_4" src="@/assets/homepage/readMore.png" />
              </div>
            </div>
          </div>

          <!-- 轮播控制按钮 -->
          <div class="section_9 flex-row justify-center">
            <div style="width: 50%;" class="align-center justify-center" @click="prevSlide">
              <img class="image_7 " src="@/assets/homepage/left.png" />
            </div>
            <div style="width: 50%;" class="align-center justify-center" @click="nextSlide">
              <img class="image_7" src="@/assets/homepage/right.png" />
            </div>
          </div>

          <!-- 轮播指示器 -->
          <div class="carousel-indicators">
            <span v-for="index in 3" :key="index" class="indicator" :class="{ active: currentSlide === index }"
              @click="goToSlide(index - 1)"></span>
          </div>
        </div>
      </div>
      <div class="hero-description flex-col justify-end">
        <div class="group_1 flex-row justify-between">
          <div class="text-group_1 flex-col justify-between">
            <span class="text_3">多模态物理能量自愈舱的巅峰之作</span>
            <span class="text_4">科技重构生命能量，激活人体与生俱来的自愈潜能</span>
          </div>
          <img class="image_9" src="@/assets/common/caidai.png" />
        </div>
        <span class="text_5">02.技术定位：多模态物理复合能量场新范式</span>
        <span class="text_6">多模态物理复合能量场技术，尖端科技升级再创新，科技健康管理先进设备。</span>
        <div class="text-wrapper_1 align-center justify-center flex-col">
          <span class="text_7">READ&nbsp;MORE</span>
        </div>
        <div class="list_1 flex-row">
          <div class="list-items_1 flex-col" :style="{ background: item.lanhuBg0 }" v-for="(item, index) in loopData0"
            :key="index" style="background-size: 100% 100%">
            <div class="text-group_2 flex-col justify-between">
              <div>
                <span class="text_8" v-html="item.lanhutext0"></span>
                <span class="text_8" v-html="item.lanhutext2"></span>
              </div>
              <span class="text_9" v-html="item.lanhutext1"></span>
            </div>
            <div class="image-wrapper_3 flex-row">
              <img class="label_3" :src="item.lanhuimage0" />
              <img v-if="item.slot2 === 2" class="image_10" :src="item.specialSlot2.lanhuimage0" />
              <img v-if="item.slot1 === 1" class="image_11" src="@/assets/homepage/sl.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="product-advantages flex-row justify-between">
        <div class="section_10 flex-col">
          <div class="text-group_3 flex-col justify-between">
            <span class="text_10">产品优势</span>
            <span class="text_11">中国科学院专家创新研发</span>
          </div>
          <img class="image_12" src="@/assets/homepage/lbx.png" />
          <span class="text_12">INNOVATION UPGRADE</span>
          <div class="text-group_4 flex-col justify-between">
            <span class="paragraph_3">多模态物理能量场<br />科学技术，创新再升级</span>
            <span class="text_13">融合太赫兹波、远红外、交变磁场、氢分子、氧分子、热能量六维物理能量，直击细胞本源，提升细胞活力，激活人体与生俱来的自愈力。</span>
          </div>
        </div>
        <div class="section_11 flex-col">
          <div class="image-wrapper_4 flex-row">
            <img class="image_13" src="@/assets/common/caidai2.png" />
          </div>
          <div class="image-wrapper_5 flex-row">
            <img class="image_14" src="@/assets/homepage/jz.png" />
          </div>
          <div class="text-wrapper_2 flex-row">
            <span class="text_14">AUTHORITATIVE PLATFORM</span>
          </div>
          <div class="section_12 flex-row">
            <div class="text-group_5 flex-col justify-between">
              <span class="text_15">中科院权威平台</span>
              <span class="text_16">中国科学院专家创新研发</span>
            </div>
          </div>
        </div>
      </div>
      <div class="technology-section flex-col">
        <div class="group_2 flex-row justify-between">
          <div class="text-group_6 flex-col justify-between">
            <span class="text_17">关于我们</span>
            <span class="text_18">一家专注于多模态物理能量自愈技术研发与应用的创新科技企业</span>
          </div>
          <img class="image_15" src="@/assets/common/caidai.png" />
        </div>
        <div class="group_3 flex-row justify-between">
          <div class="section_13 flex-col">
            <div class="section_14 flex-col"></div>
            <div class="text-group_7 flex-col justify-between">
              <span class="text_19">使命与愿景</span>
              <span class="text_20">MISSION AND VISION</span>
            </div>
          </div>
          <div class="section_15 flex-col">
            <div class="box_7 flex-col"></div>
            <span class="text_21">核心技术</span>
            <span class="text_22">CORE TECHNOLOGY</span>
          </div>
          <div class="section_16 flex-col">
            <div class="box_8 flex-col"></div>
            <div class="text-group_8 flex-col justify-between">
              <span class="text_23">研发实力</span>
              <span class="text_24">R D CAPABILITY</span>
            </div>
          </div>
        </div>
        <div class="group_4 flex-row justify-between">
          <div class="box_9 flex-col">
            <div class="section_17 flex-col"></div>
            <div class="text-group_9 flex-col justify-between">
              <span class="text_25">产品应用</span>
              <span class="text_26">PRODUCT APPLICATION</span>
            </div>
          </div>
          <div class="box_10 flex-col">
            <div class="block_1 flex-col"></div>
            <div class="text-group_10 flex-col justify-between">
              <span class="text_27">社会责任</span>
              <span class="text_28">SOCIAL RESOINSIBILITY</span>
            </div>
          </div>
          <div class="box_11 flex-row">
            <div class="image-text_1 flex-row justify-between">
              <span class="text-group_11">READ MORE</span>
              <img class="image_16" src="@/assets/homepage/rightLong.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="box_12 flex-col">
        <div class="block_2 flex-row justify-between">
          <div class="text-group_12 flex-col justify-between">
            <span class="text_29">合作优势</span>
            <span class="text_30">轻资产运营，高回报收益，共享万亿健康产业红利</span>
          </div>
          <img class="image_17" src="@/assets/common/caidai.png" />
        </div>
        <div class="block_3 flex-row justify-between">
          <div class="group_5 flex-col">
            <div class="group_6 flex-row justify-between">
              <div class="group_7 flex-col justify-between">
                <img class="image_18" src="@/assets/homepage/hand.png" />
                <span class="text_31">设备购买模式</span>
              </div>
              <div class="group_8 flex-col"></div>
            </div>
            <div class="text-wrapper_3 flex-row">
              <span class="paragraph_4">资金实力雄厚，希望长期持有资产的机构（如高端康复中心、私立医院、健康管理机构）。<br /><br />计划快速回本并持续盈利的投资者。</span>
            </div>
          </div>
          <div class="group_9 flex-col">
            <div class="section_18 flex-row justify-between">
              <div class="block_4 flex-col justify-between">
                <img class="image_19" src="@/assets/homepage/book.png" />
                <span class="text_32">设备租赁模式</span>
              </div>
              <div class="block_5 flex-col"></div>
            </div>
            <div class="text-wrapper_4 flex-row">
              <span class="paragraph_5">初创健康机构、健身工作室、美容院等，降低初期投入风险。<br />想试运营验证市场需求的投资者。</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box_15 flex-col">
        <div class="group_10 flex-row justify-between">
          <div class="text-group_6 flex-col justify-between">
            <span class="text_17">联系我们</span>
            <span class="text_18">开启您的健康科技事业</span>
          </div>
          <img class="image_9" src="@/assets/common/caidai.png" />
        </div>
        <div class="group_11 flex-row justify-between">
          <el-input class="text-wrapper_7" v-model="form.name" placeholder="您的姓名" />
          <el-input class="text-wrapper_8" v-model="form.mobile" placeholder="您的手机" />
          <el-input class="text-wrapper_9" v-model="form.wechat" placeholder="您的微信" />
        </div>
        <el-input class="text-wrapper_10" v-model="form.question" type="textarea" :rows="7" placeholder="请输入您要咨询的问题" />
        <div class="group_12 flex-row justify-between">
          <span class="text_45">*&nbsp;您提交的信息请确保填写真实，以便我们再48小时内联系您</span>
          <div class="text-wrapper_11 align-center justify-center flex-col" @click="save">
            <span class="text_46" v-if="!loading">提交</span>
            <span class="text_46" v-else>提交中...</span>
          </div>
        </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 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 bg1 from '@/assets/homepage/BC.png'
import bg2 from '@/assets/homepage/banner2.jpg'
import bg3 from '@/assets/homepage/banner3.jpg'
import { ref, computed, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";

// 轮播图数据
const currentSlide = ref(1) // 从第二张开始，因为第一张是克隆的最后一张
const carouselSlides = ref([
  {
    background: bg3, // 克隆最后一张
    title: '产品优势 中国科学院专家创新研发',
    description: '多模态物理能量场科学技术，创新再升级\n融合太赫兹波、远红外、交变磁场、氢分子、氧分子、热能量六维物理能量'
  },
  {
    background: bg1,
    title: '细胞级修复 重启生命活力',
    description: '中国科学院专家团队创新研发，技术行业领先\n多项国家发明专利及权威认证，科学背书，品质保障\n全球明星和富豪的健康标配'
  },
  {
    background: bg2,
    title: '多模态物理能量自愈舱的巅峰之作',
    description: '科技重构生命能量，激活人体与生俱来的自愈潜能\n多模态物理复合能量场技术，尖端科技升级再创新'
  },
  {
    background: bg3,
    title: '产品优势 中国科学院专家创新研发',
    description: '多模态物理能量场科学技术，创新再升级\n融合太赫兹波、远红外、交变磁场、氢分子、氧分子、热能量六维物理能量'
  },
  {
    background: bg1, // 克隆第一张
    title: '细胞级修复 重启生命活力',
    description: '中国科学院专家团队创新研发，技术行业领先\n多项国家发明专利及权威认证，科学背书，品质保障\n全球明星和富豪的健康标配'
  }
])

const isTransitioning = ref(false)

// 轮播图控制函数
const nextSlide = () => {
  if (isTransitioning.value) return

  currentSlide.value++

  // 如果到达最后一张（克隆的第一张），无缝跳转到真正的第一张
  if (currentSlide.value === carouselSlides.value.length - 1) {
    setTimeout(() => {
      isTransitioning.value = true
      currentSlide.value = 1
      setTimeout(() => {
        isTransitioning.value = false
      }, 50)
    }, 500) // 等待动画完成
  }
}

const prevSlide = () => {
  if (isTransitioning.value) return

  currentSlide.value--

  // 如果到达第一张（克隆的最后一张），无缝跳转到真正的最后一张
  if (currentSlide.value === 0) {
    setTimeout(() => {
      isTransitioning.value = true
      currentSlide.value = carouselSlides.value.length - 2
      setTimeout(() => {
        isTransitioning.value = false
      }, 50)
    }, 500) // 等待动画完成
  }
}

const goToSlide = (index) => {
  if (isTransitioning.value) return

  currentSlide.value = index + 1 // 因为第一张是克隆的，所以+1
}

// 自动轮播
let autoPlayTimer = null

const startAutoPlay = () => {
  autoPlayTimer = setInterval(() => {
    nextSlide()
  }, 5000) // 5秒自动切换
}

const stopAutoPlay = () => {
  if (autoPlayTimer) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
  }
}


// 表单数据
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)
  startAutoPlay() // 启动自动轮播
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  stopAutoPlay() // 停止自动轮播
})

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,
},
{
  lanhuBg0: `url(${content3}) center no-repeat`,
  lanhutext0: 'CELL CHARGING<br/>STATION',
  lanhutext1: '人体细胞的无限充电站',
  lanhuimage0: addIcon,
  specialSlot2: {
    lanhuimage0: hdIcon,
  },
  slot2: 2,
},
])


// 表单验证规则
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>
<style src="./common.css" />
<style lang="css" scoped>
.homepage-container {
  position: relative;
  width: 100vw;
  height: 330vw;
  overflow: hidden;
}

.hero-content {
  width: 100vw;
  height: 56.25vw;
  position: relative;
  overflow: hidden;
}

.carousel-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-slides.no-transition {
  transition: none;
}

.carousel-slide {
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.slide-content {
  width: 40.73vw;
  height: 23.96vw;
  margin: 5vw 0 0 4.06vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.carousel-indicators {
  position: absolute;
  bottom: 2vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1vw;
  display: none;
  z-index: 10;
}

.indicator {
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background-color: rgba(0, 199, 218, 1);
  transform: scale(1.2);
}

.indicator:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.section_8 {
  width: 40.73vw;
  height: 23.96vw;
  margin: 2.86vw 0 0 4.06vw;
}

.paragraph_1 {
  width: 40.73vw;
  height: 3.6vw;
  overflow-wrap: break-word;
  color: rgba(0, 199, 218, 1);
  font-size: 3.64vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 1.2;
  margin-top: 5.42vw;
}

.paragraph_2 {
  width: 40.73vw;
  height: 5.63vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.6;
  margin-top: 1.25vw;
}

.image_4 {
  width: 13.03vw;
  height: 3.65vw;
  margin: 3.38vw 0 0 0.2vw;
}

.section_9 {
  position: absolute;
  right: 0;
  top: 51vw;
  width: 10vw;
  height: 5.32vw;
  background-color: #fff;
  z-index: 10;
  cursor: pointer;
}

.image_7 {
  width: 1vw;
  height: 1.8vw;
}

.hero-description {
  width: 100vw;
  height: 56.25vw;
  padding-top: 55vw;
  background: url(@/assets/homepage/zyc.png) 100% no-repeat;
  background-size: 100% 100%;
}

.group_1 {
  width: 72.97vw;
  height: 7.04vw;
  margin: 6.25vw 0 0 13.48vw;
}

.text-group_1 {
  width: 54.38vw;
  height: 7.04vw;
}

.text_3 {
  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: 60vw;
  overflow-wrap: break-word;
  color: rgba(0, 82, 217, 1);
  font-size: 3.64vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  background-clip: text;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text_4 {
  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_9 {
  width: 2.09vw;
  height: 0.63vw;
}

.text_5 {
  width: 36.62vw;
  height: 1.83vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 1.88vw;
  margin: 8.48vw 0 0 13.54vw;
}

.text_6 {
  width: 36.15vw;
  height: 3.18vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.6;
  margin: 1.25vw 0 0 13.43vw;
}

.text-wrapper_1 {
  height: 3.13vw;
  background: url(@/assets/common/btnBC.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 10.42vw;
  margin: 6.3vw 0 0 13.38vw;
}

.text_7 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: Gilroy-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.list_1 {
  width: 72.92vw;
  height: 13.55vw;
  justify-content: space-between;
  margin: 5.26vw 0 0 13.54vw;
}

.list-items_1 {
  height: 13.55vw;
  background-size: 100% 100%;
  width: 24.33vw;
}

.text-group_2 {
  width: 5vw;
  height: 4.33vw;
  margin: 3.12vw 0 0 2.55vw;
}

.text_8 {
  width: 6.05vw;
  height: 2.24vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25vw;
}

.text_9 {
  width: 12.4vw;
  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.88vw;
  margin: 0.88vw 0 0 0.05vw;
}

.image-wrapper_3 {
  width: 19.12vw;
  height: 2.71vw;
  margin: 0.67vw 0 2.7vw 2.6vw;
}

.label_3 {
  width: 1.36vw;
  height: 1.36vw;
  margin-top: 0.94vw;
}

.image_10 {
  width: 2.92vw;
  height: 2.82vw;
  margin: -0.05vw 0 0 14.84vw;
}

.image_11 {
  width: 2.09vw;
  height: 2.71vw;
  margin-left: 15.68vw;
}

.product-advantages {
  width: 100vw;
  height: 56.25vw;
  background: url(@/assets/homepage/water.png) 100% no-repeat;
  background-size: 100% 100%;
}

.section_10 {
  width: 36.46vw;
  height: 56.25vw;
  background: url(@/assets/homepage/jb1.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-left: 13.55vw;
}

.text-group_3 {
  width: 18.55vw;
  height: 5.11vw;
  margin: 6.3vw 0 0 2.55vw;
}

.text_10 {
  background-image: linear-gradient(90deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 0,
      rgba(0, 199, 218, 1) 100%,
      rgba(0, 199, 218, 1) 100%);
  width: 9.9vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 2.5vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  background-clip: text;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text_11 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.66vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}

.image_12 {
  width: 4.69vw;
  height: 5.21vw;
  margin: 8.8vw 0 0 15.67vw;
}

.text_12 {
  width: 8.44vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25vw;
  margin: 2.65vw 0 0 13.85vw;
}

.text-group_4 {
  width: 20.84vw;
  height: 9.33vw;
  margin: 0.78vw 0 17.08vw 7.6vw;
}

.paragraph_3 {
  width: 20.84vw;
  height: 4.8vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 2.08vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: center;
  line-height: 2.5vw;
}

.text_13 {
  width: 19.69vw;
  height: 3.81vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: center;
  line-height: 1.36vw;
  margin: 0.72vw 0 0 0.62vw;
}

.section_11 {
  height: 56.15vw;
  background: url(@/assets/homepage/jb2.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 36.41vw;
  margin: 0.05vw 13.59vw 0 0;
}

.image-wrapper_4 {
  width: 2.09vw;
  height: 0.63vw;
  margin: 6.19vw 0 0 34.37vw;
}

.image_13 {
  width: 2.09vw;
  height: 0.63vw;
}

.image-wrapper_5 {
  width: 4.38vw;
  height: 5.21vw;
  margin: 13.33vw 0 0 16.04vw;
}

.image_14 {
  width: 4.38vw;
  height: 5.21vw;
}

.text-wrapper_2 {
  width: 10.16vw;
  height: 0.99vw;
  margin: 2.65vw 0 0 13.17vw;
}

.text_14 {
  width: 10.16vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25vw;
}

.section_12 {
  width: 14.28vw;
  height: 3.96vw;
  margin: 0.78vw 0 22.39vw 11.09vw;
}

.text-group_5 {
  width: 14.28vw;
  height: 3.96vw;
}

.text_15 {
  width: 14.28vw;
  height: 2.09vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 2.08vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 2.5vw;
}

.text_16 {
  width: 10.16vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 1.36vw;
  margin: 0.88vw 0 0 2.08vw;
}

.technology-section {
  height: 56.25vw;
  background: url(@/assets/homepage/dna.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 100vw;
}

.group_2 {
  width: 72.97vw;
  height: 5.21vw;
  margin: 6.19vw 0 0 13.48vw;
}

.text-group_6 {
  width: 47.77vw;
  height: 5.21vw;
}

.text_17 {
  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_18 {
  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;
}

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

.group_3 {
  width: 72.92vw;
  height: 12.5vw;
  margin: 6.3vw 0 0 13.54vw;
}

.section_13 {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  width: 23.44vw;
  height: 12.5vw;
}

.section_14 {
  width: 3.96vw;
  height: 3.13vw;
  background: url(@/assets/homepage/bt.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 2.65vw 0 0 2.76vw;
}

.text-group_7 {
  width: 8.44vw;
  height: 3.18vw;
  margin: 1.3vw 0 2.23vw 2.55vw;
}

.text_19 {
  width: 8.44vw;
  height: 1.62vw;
  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: 1.4;
}

.text_20 {
  width: 7.92vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.4;
  margin: 0.57vw 0 0 0.2vw;
}

.section_15 {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  width: 23.44vw;
  height: 12.5vw;
  margin-left: 1.31vw;
}

.box_7 {
  width: 3.29vw;
  height: 3.29vw;
  background: url(@/assets/homepage/lhd.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 2.6vw 0 0 3.12vw;
}

.text_21 {
  width: 6.72vw;
  height: 1.62vw;
  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: 1.4;
  margin: 1.19vw 0 0 2.55vw;
}

.text_22 {
  width: 7.24vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.4;
  margin: 0.57vw 0 2.23vw 2.76vw;
}

.section_16 {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  width: 23.44vw;
  height: 12.5vw;
  margin-left: 1.31vw;
}

.box_8 {
  width: 3.44vw;
  height: 3.44vw;
  background: url(@/assets/homepage/sws.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 2.5vw 0 0 3.02vw;
}

.text-group_8 {
  width: 6.57vw;
  height: 3.18vw;
  margin: 1.14vw 0 2.23vw 2.55vw;
}

.text_23 {
  width: 6.57vw;
  height: 1.62vw;
  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: 1.57vw;
}

.text_24 {
  width: 6.31vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25vw;
  margin: 0.57vw 0 0 0.2vw;
}

.group_4 {
  width: 72.92vw;
  height: 12.5vw;
  margin: 1.3vw 0 12.23vw 13.54vw;
}

.box_9 {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  width: 23.44vw;
  height: 12.5vw;
}

.section_17 {
  width: 3.13vw;
  height: 3.13vw;
  background: url(@/assets/homepage/sr.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 2.65vw 0 0 3.17vw;
}

.text-group_9 {
  width: 8.91vw;
  height: 3.23vw;
  margin: 1.25vw 0 2.23vw 2.6vw;
}

.text_25 {
  width: 6.52vw;
  height: 1.67vw;
  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: 1.57vw;
}

.text_26 {
  width: 8.75vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25vw;
  margin: 0.57vw 0 0 0.15vw;
}

.box_10 {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  width: 23.44vw;
  height: 12.5vw;
  margin-left: 1.31vw;
}

.block_1 {
  width: 3.44vw;
  height: 3.23vw;
  background: url(@/assets/homepage/swx.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 2.6vw 0 0 3.02vw;
}

.text-group_10 {
  width: 9.43vw;
  height: 3.18vw;
  margin: 1.25vw 0 2.23vw 2.55vw;
}

.text_27 {
  width: 6.72vw;
  height: 1.62vw;
  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: 1.57vw;
}

.text_28 {
  width: 9.28vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25vw;
  margin: 0.57vw 0 0 0.15vw;
}

.box_11 {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  width: 23.44vw;
  height: 12.5vw;
  margin-left: 1.31vw;
}

.image-text_1 {
  width: 7.97vw;
  height: 0.73vw;
  margin: 5.88vw 0 0 7.7vw;
}

.text-group_11 {
  width: 5.89vw;
  height: 0.73vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 0.93vw;
  font-family: Gilroy-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 1.88vw;
}

.image_16 {
  width: 1.25vw;
  height: 0.68vw;
  margin-top: 0.7vw;
}

.box_12 {
  height: 56.25vw;
  background: url(@/assets/homepage/bigwaher.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 100vw;
}

.block_2 {
  width: 73.03vw;
  height: 5.37vw;
  margin: 6.25vw 0 0 13.43vw;
}

.text-group_12 {
  width: 37.45vw;
  height: 5.37vw;
}

.text_29 {
  background-image: linear-gradient(90deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 0,
      rgba(0, 199, 218, 1) 100%,
      rgba(0, 199, 218, 1) 100%);
  width: 9.9vw;
  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_30 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.66vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 2;
}

.image_17 {
  width: 2.09vw;
  height: 0.63vw;
}

.block_3 {
  width: 72.97vw;
  height: 19.8vw;
  margin: 8.95vw 0 15.88vw 13.48vw;
}

.group_5 {
  backdrop-filter: blur(15px);

  /* 可选：添加背景色透明度 */
  background-color: rgba(70, 164, 219, 0.5);
  border-radius: 20px;
  height: 19.8vw;
  width: 35.42vw;
}

.group_6 {
  width: 29.64vw;
  height: 8.29vw;
  margin: 1.87vw 0 0 3.54vw;
}

.group_7 {
  width: 9.9vw;
  height: 7.04vw;
  margin-top: 1.25vw;
}

.image_18 {
  width: 4.38vw;
  height: 4.07vw;
  margin-left: 0.27vw;
}

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

.group_8 {
  width: 6.05vw;
  height: 7.4vw;
}

.text-wrapper_3 {
  width: 21.57vw;
  height: 4.33vw;
  margin: 1.3vw 0 4.01vw 3.48vw;
}

.paragraph_4 {
  width: 21.57vw;
  height: 4.33vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.25vw;
}

.group_9 {
  backdrop-filter: blur(15px);

  /* 可选：添加背景色透明度 */
  background-color: rgba(70, 164, 219, 0.5);
  border-radius: 20px;
  height: 19.8vw;
  width: 35.42vw;
}

.section_18 {
  width: 30.47vw;
  height: 8.29vw;
  margin: 1.87vw 0 0 3.54vw;
}

.block_4 {
  width: 9.9vw;
  height: 7.19vw;
  margin-top: 1.1vw;
}

.image_19 {
  width: 3.65vw;
  height: 4.38vw;
  margin-left: 0.63vw;
}

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

.block_5 {
  width: 6.88vw;
  height: 7.4vw;
}

.text-wrapper_4 {
  width: 21.57vw;
  height: 4.33vw;
  margin: 1.3vw 0 4.01vw 3.48vw;
}

.paragraph_5 {
  width: 21.57vw;
  height: 4.33vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  line-height: 1.25vw;
}

.box_15 {
  position: absolute;
  left: 0;
  top: 281.25vw;
  width: 72.97vw;
  height: 38.08vw;
}

.group_10 {
  width: 73.03vw;
  height: 5.16vw;
  margin: 6.25vw 0 0 13.43vw;
}

.group_11 {
  width: 72.92vw;
  height: 3.13vw;
  margin: 2.65vw 0 0 13.54vw;
}

.text-wrapper_7 {
  background-color: rgba(241, 244, 247, 1);
  border-radius: 10px 10px 9px 9px;
  height: 3.13vw;
  width: 22.92vw;
}


.text-wrapper_8 {
  background-color: rgba(241, 244, 247, 1);
  border-radius: 10px 10px 9px 9px;
  height: 3.13vw;
  margin-left: 2.09vw;
  width: 22.92vw;
}


.text-wrapper_9 {
  background-color: rgba(241, 244, 247, 1);
  border-radius: 10px 10px 9px 9px;
  height: 3.13vw;
  margin-left: 2.09vw;
  width: 22.92vw;
}

.text-wrapper_10 {
  border-radius: 10px 10px 9px 9px;
  height: 7.82vw;
  width: 72.92vw;
  margin: 2.08vw 0 0 13.54vw;
}


.group_12 {
  width: 73.08vw;
  height: 3.13vw;
  margin: 2.08vw 0 5.78vw 13.38vw;
}

.text_45 {
  width: 25.42vw;
  height: 1.05vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin-top: 0.63vw;
}

.text-wrapper_11 {
  background-color: rgba(0, 82, 217, 1);
  border-radius: 10px 10px 9px 9px;
  height: 3.13vw;
  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 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  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;
}

/* PC端响应式适配 - 只在大屏幕时一屏显示 */
@media (min-width: 1200px) {
  .hero-content {
    height: 100vh !important;
  }

  .hero-description {
    height: 100vh !important;
  }

  .section_9 {
    top: 90vh !important;
  }
}

/* 中等屏幕PC端适配 - 不强制一屏显示 */
@media (min-width: 769px) and (max-width: 1199px) {
  .hero-content {
    height: 56.25vw !important;
  }

  .hero-description {
    height: 56.25vw !important;
  }

  .section_9 {
    top: 51vw !important;
  }
}

/* 手机端表单适配优化 */
@media (max-width: 768px) {

  /* 轮播图手机端适配 - 同等缩小 */
  .hero-content {
    height: 56.25vw !important;
  }

  .hero-description {
    height: 56.25vw !important;
  }

  .carousel-container {
    height: 100% !important;
  }

  .carousel-slide {
    background-size: 100% 100% !important;
    background-position: center;
  }

  .slide-content {
    width: 40.73vw !important;
    height: 23.96vw !important;
    margin: 2vw 0 0 4.06vw !important;
    text-align: left !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .carousel-indicators {
    display: none;
    bottom: 2vw !important;
    gap: 1vw !important;
  }

  .indicator {
    width: 1vw !important;
    height: 1vw !important;
  }

  .section_9 {
    top: 51vw !important;
    right: 0 !important;
    width: 10vw !important;
    height: 5.32vw !important;
    background-color: #fff !important;
    border-radius: 0 !important;
  }

  .image_7 {
    width: 1vw !important;
    height: 1.8vw !important;
  }

  /* 轮播图文字手机端适配 */
  .slide-content .paragraph_1 {
    width: 40.73vw !important;
    height: 3.6vw !important;
    font-size: 3.64vw !important;
    margin-top: 12vw !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .slide-content .paragraph_2 {
    width: 40.73vw !important;
    height: 5.63vw !important;
    font-size: 1.25vw !important;
    margin-top: 1.25vw !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .slide-content .image_4 {
    width: 13.03vw !important;
    height: 3.65vw !important;
    margin: 3.38vw 0 0 0.2vw !important;
  }

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

  /* 小屏幕轮播图适配 */
  .hero-content {
    height: 56.25vw !important;
  }

  .hero-description {
    height: 56.25vw !important;
  }

  .carousel-container {
    height: 100% !important;
  }

  .carousel-slide {
    background-size: 100% 100% !important;
  }

  .slide-content {
    width: 40.73vw !important;
    height: 23.96vw !important;
    margin: 2vw 0 0 4.06vw !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .carousel-indicators {
    display: none;
    bottom: 2vw !important;
    gap: 1vw !important;
  }

  .indicator {
    width: 1vw !important;
    height: 1vw !important;
  }

  .section_9 {
    top: 51vw !important;
    right: 0 !important;
    width: 10vw !important;
    height: 5.32vw !important;
    background-color: #fff !important;
  }

  .image_7 {
    width: 1vw !important;
    height: 1.8vw !important;
  }

  /* 小屏幕文字适配 */
  .slide-content .paragraph_1 {
    width: 40.73vw !important;
    height: 3.6vw !important;
    font-size: 3.64vw !important;
    margin-top: 5.42vw !important;
  }

  .slide-content .paragraph_2 {
    width: 40.73vw !important;
    height: 5.63vw !important;
    font-size: 1.25vw !important;
    margin-top: 1.25vw !important;
  }

  .slide-content .image_4 {
    width: 13.03vw !important;
    height: 3.65vw !important;
    margin: 3.38vw 0 0 0.2vw !important;
  }

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