<template>
  <div class="home-container">

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 顶部Banner图片 -->
      <div class="banner-section">
        <img
          src="https://cdn.ipadbiz.cn/stdj/images/home/banner@2x.png"
          alt="三坛大戒法会Banner"
          class="banner-image"
        />
      </div>

      <!-- 视频播放器区域 -->
      <div class="video-section">
        <VideoPlayer
          :video-url="videoUrl"
          video-id="home-video"
          :autoplay="false"
          :options="videoOptions"
        />
      </div>

      <!-- 法会流程容器 -->
      <div class="ceremony-wrapper">
        <!-- 法会流程 -->
        <div class="ceremony-process">
          <!-- 标题 -->
          <div class="ceremony-title">
            <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E6%B3%95%E6%9C%83%E6%B5%81%E7%A8%8B@2x.png" alt="法会流程" />
          </div>

          <!-- 流程步骤 -->
          <div class="process-container">
            <!-- 麻绳背景 -->
            <div class="rope-background"></div>

            <!-- 流程步骤 -->
            <div class="process-steps" ref="processStepsRef">
              <div
              v-for="(step, index) in processSteps"
              :key="index"
              class="process-step"
              :class="{ active: step.active }"
              @click="selectStep(index)"
            >
                <!-- 顶部白色圆形占位（选中状态） -->
                <div class="top-circle"></div>

                <!-- 步骤内容 -->
                <div class="step-content">
                  <span class="step-text">{{ step.name }}</span>
                </div>
              </div>
              <!-- 全局底部箭头：跟随选中项移动 -->
              <div v-show="processSteps.length" class="bottom-arrow moving-arrow" :style="arrowStyle">
                <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E7%82%B9@2x.png" alt="选中" />
              </div>
            </div>
          </div>
        </div>

        <!-- 法会流程内容 -->
        <div v-if="currentStep" class="ceremony-intro">
          <div class="intro-container">
            <!-- 背景图片 -->
            <div class="intro-background" :style="{ backgroundImage: `url(${currentStep?.cover})` }"></div>

            <!-- 步骤标题 -->
            <div class="step-title" ref="stepTitleRef">
              <span class="step-title-text">{{ currentStep.name }}</span>
            </div>

            <!-- 装饰线 -->
            <div class="decorative-line" :style="decorativeLineStyle"></div>

            <!-- 查看更多按钮 -->
            <div class="more-button" @click="viewMore('法会流程')">
              <span class="more-text">查看更多</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 三师七证 -->
      <div class="three-masters-section">
        <!-- 标题图片 -->
        <div class="common-title">
          <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%89%E5%B8%AB%E4%B8%83%E8%AD%89@2x.png" alt="三师七证" class="title-image">
        </div>

        <!-- 三个栏目 -->
        <div class="three-columns">
          <!-- 三师七证栏目 -->
          <div class="column-item" v-for="(item, index) in mastersList" :key="index">
            <div class="column-content" :style="{ backgroundImage: `url(${item.cover})` }">
              <div class="column-overlay"></div>
              <div class="column-text">
                <h3 class="column-title">{{ item.name }}</h3>
                <div class="more-button" @click="viewMore(item.name, item)">
                  <span class="more-text">查看更多</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 相关新闻 -->
      <div class="news-section">
        <!-- 标题 -->
        <div class="common-title">
          <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E7%9B%B8%E5%85%B3%E6%96%B0%E8%81%9E@2x.png" alt="相关新闻" class="title-image">
        </div>

        <!-- 轮播容器 -->
        <div
          class="news-carousel-container"
          ref="newsCarouselContainer"
          @touchstart="onTouchStart"
          @touchmove="onTouchMove"
          @touchend="onTouchEnd"
        >
          <div class="news-carousel" ref="newsCarousel">
            <div class="news-item" v-for="(item, index) in displayNewsItems" :key="index" @click="handleNewsClick(item)">
              <div class="news-image">
                <img :src="item.image" :alt="item.title">
              </div>
              <div class="news-content">
                <div class="news-title">{{ item.title }}</div>
                <div class="news-date">{{ item.date }}</div>
              </div>
            </div>
          </div>

          <!-- 导航按钮 -->
          <div class="carousel-nav">
            <img
              class="nav-btn prev-btn"
              src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8A@2x.png"
              alt="上一张"
              @click="prevSlide"
            >
            <img
              class="nav-btn next-btn"
              src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8B@2x.png"
              alt="下一张"
              @click="nextSlide"
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onActivated, watch } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
import { useTitle } from '@vueuse/core';
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

// 导入接口
import { homePageAPI } from '@/api/index.js'

const router = useRouter()

// 页面标题
useTitle('西园戒幢律寺三坛大戒法会');

// TODO: 视频配置
const videoUrl = ref('https://cdn.ipadbiz.cn/stdj/video/sample-10s.mp4')

const videoOptions = ref({
  fluid: true,
  responsive: true,
  aspectRatio: '16:9',
  controls: true,
  preload: 'metadata',
  poster: '',
  playbackRates: [0.5, 1, 1.25, 1.5, 2],
})

// 法会流程步骤数据
const processSteps = ref([])
// 流程步骤容器引用
const processStepsRef = ref(null)
// 底部箭头的动态样式
const arrowStyle = ref({ left: '50%', bottom: '-1.25rem', transform: 'translateX(-50%)' })

// 获取当前选中的步骤
const currentStep = computed(() => {
  return processSteps.value.find(step => step.active) || processSteps.value[0]
})

// 步骤标题的ref引用
const stepTitleRef = ref(null)

// 装饰线的动态样式
const decorativeLineStyle = ref({
  top: '4.5rem',
  bottom: '4rem'
})

// 计算装饰线位置的函数
const calculateLinePosition = async () => {
  await nextTick()
  if (stepTitleRef.value) {
    const titleElement = stepTitleRef.value
    const containerElement = titleElement.closest('.intro-container')
    const moreButton = containerElement?.querySelector('.more-button')

    if (containerElement && moreButton) {
      // 获取标题和按钮的位置信息
      const titleRect = titleElement.getBoundingClientRect()
      const buttonRect = moreButton.getBoundingClientRect()
      const containerRect = containerElement.getBoundingClientRect()

      // 计算相对于容器的位置
      const titleBottom = titleRect.bottom - containerRect.top
      const buttonTop = buttonRect.top - containerRect.top

      // 装饰线从标题底部开始，留0.5rem间距
      const spacing = 8 // 0.5rem = 8px (基准字体16px)
      const lineTop = titleBottom + spacing

      // 装饰线到按钮上方，留0.5rem间距
      const lineBottom = containerRect.height - (buttonTop - spacing)

      decorativeLineStyle.value = {
        top: `${lineTop}px`,
        bottom: `${lineBottom}px`
      }
    }
  }
}

/**
 * 确保页面滚动位置在顶部（进入或激活时立即回顶）
 * 说明：使用立即滚动（非平滑）以避免过渡被用户察觉。
 */
const ensurePageScrollTop = () => {
  if (typeof window !== 'undefined') {
    // 立即滚动到顶部
    window.scrollTo({ top: 0, behavior: 'auto' })
  }
  // 兜底处理，兼容部分浏览器
  if (document && document.documentElement) {
    document.documentElement.scrollTop = 0
  }
  if (document && document.body) {
    document.body.scrollTop = 0
  }
}

/**
 * 点击切换步骤状态并更新底部箭头位置
 * @param {number} index 选中步骤索引
 */
const selectStep = (index) => {
  processSteps.value.forEach((step, i) => {
    step.active = i === index
  })
  // 切换步骤后重新计算装饰线位置
  calculateLinePosition()
  // 切换步骤后更新底部箭头位置
  updateArrowPosition()
}

// 三师七证数据列表
const mastersList = ref([])

// 组件挂载后计算装饰线位置
onMounted(async () => {
  // 进入页面时立即回到顶部
  ensurePageScrollTop()
  await calculateLinePosition();
  // 调用接口获取首页数据
  const { code, list } = await homePageAPI();
  if (code) {
    // 法会流程
    processSteps.value = list?.STDJFHLC?.map(item => ({
      id: item.id,
      parent_sn: item.parent_sn,
      name: item.category_name,
      cover: item.cover || '',
      active: false,
      category_link: item.category_link || '',
    })) || [];
    processSteps.value[0].active = true;
    // 三师七证
    mastersList.value = list?.STDJSSQZ?.map(item => ({
      id: item.id,
      parent_sn: item.parent_sn,
      name: item.category_name,
      cover: item.cover || '',
      category_link: item.category_link || '',
    })) || [];
    // 相关新闻
    newsItems.value = list?.STDJXGXW?.map(item => ({
      id: item.id,
      parent_sn: item.parent_sn,
      title: item.post_title,
      date: item.post_date,
      image: item.photo || '',
      post_link: item.post_link || '',
    })) || [];

    // 初始化轮播位置
    nextTick(() => {
      updateCarouselPosition(false)
      // 初始化底部箭头位置
      updateArrowPosition()
      // 列表内容渲染后再兜底回顶一次，避免外部干扰
      ensurePageScrollTop()
    })
  }
})

// 组件被 keep-alive 激活时，立即回到顶部
onActivated(() => {
  ensurePageScrollTop()
})

// 监听当前步骤变化，重新计算装饰线位置
watch(currentStep, () => {
  calculateLinePosition()
  updateArrowPosition()
}, { deep: true })

// 查看更多按钮点击事件
const viewMore = (type, item) => {
  switch (type) {
    case '法会流程':
      // 跳转页面
      if (currentStep.value?.category_link) {
        location.href = currentStep.value?.category_link;
      } else {
        // 提示用户没有详情页
        showToast('该法会流程没有跳转链接')
      }
      break
    case '三师七证':
      // 跳转到三师七证页面的逻辑
      if (item?.category_link) {
        location.href = item?.category_link;
      } else {
        router.push(`/masters?pid=${item.id}`)
      }
      break
    case '戒子':
      // 跳转到戒子页面的逻辑
      if (item?.category_link) {
        location.href = location.origin + location.pathname + '#/' + item?.category_link;
      } else {
        router.push(`/students?i=${item.id}`)
      }
      break
    case '义工':
      // 跳转到义工页面的逻辑
      if (item?.category_link) {
        location.href = location.origin + location.pathname + '#/' + item?.category_link;
      } else {
        router.push(`/volunteers?i=${item.id}`)
      }
      break
  }
}

// 新闻轮播相关逻辑
const newsCarousel = ref(null)
const currentSlide = ref(1) // 从1开始，因为0是克隆的最后一项
const isTransitioning = ref(false)
// 轮播容器引用（用于触摸滑动）
const newsCarouselContainer = ref(null)
// 触摸滑动相关状态
const touchStartX = ref(0)
const touchStartY = ref(0)
const touchDeltaX = ref(0)
const touchDeltaY = ref(0)
const isSwiping = ref(false)
const swipeThreshold = 30 // 滑动触发阈值，单位px

// 新闻数据
const newsItems = ref([])
const displayNewsItems = computed(() => {
  if (newsItems.value.length === 0) {
    return []
  }
  // 克隆第一项和最后一项以实现无缝滚动
  return [newsItems.value[newsItems.value.length - 1], ...newsItems.value, newsItems.value[0]]
})

// 上一张
const prevSlide = () => {
  if (isTransitioning.value) return
  isTransitioning.value = true
  currentSlide.value--
  updateCarouselPosition()

  if (currentSlide.value === 0) {
    setTimeout(() => {
      isTransitioning.value = false
      currentSlide.value = newsItems.value.length
      updateCarouselPosition(false) // 无动画地跳转
    }, 300) // 等待过渡动画完成
  } else {
    setTimeout(() => {
      isTransitioning.value = false
    }, 300)
  }
}

// 下一张
const nextSlide = () => {
  if (isTransitioning.value) return
  isTransitioning.value = true
  currentSlide.value++
  updateCarouselPosition()

  if (currentSlide.value === displayNewsItems.value.length - 1) {
    setTimeout(() => {
      isTransitioning.value = false
      currentSlide.value = 1
      updateCarouselPosition(false) // 无动画地跳转
    }, 300) // 等待过渡动画完成
  } else {
    setTimeout(() => {
      isTransitioning.value = false
    }, 300)
  }
}

// 更新轮播位置
const updateCarouselPosition = (animated = true) => {
  const carouselEl = newsCarousel.value
  if (!carouselEl) return

  const firstItem = carouselEl.querySelector('.news-item')
  if (!firstItem) return

  const itemWidth = firstItem.getBoundingClientRect().width
  let gapStr = getComputedStyle(carouselEl).gap
  if (!gapStr || gapStr === 'normal') {
    gapStr = '8px'
  }
  const gapPx = parseFloat(gapStr) || 8

  const distance = currentSlide.value * (itemWidth + gapPx)
  carouselEl.style.transition = animated ? 'transform 0.3s ease' : 'none'
  carouselEl.style.transform = `translateX(-${distance}px)`
}

/**
 * 触摸开始事件：记录初始触摸点
 * @param {TouchEvent} e 触摸事件对象
 */
const onTouchStart = (e) => {
  const t = e.touches && e.touches[0]
  if (!t) return
  touchStartX.value = t.clientX
  touchStartY.value = t.clientY
  touchDeltaX.value = 0
  touchDeltaY.value = 0
  isSwiping.value = false
}

/**
 * 触摸移动事件：计算水平与垂直位移，判断是否为水平滑动
 * @param {TouchEvent} e 触摸事件对象
 */
const onTouchMove = (e) => {
  const t = e.touches && e.touches[0]
  if (!t) return
  touchDeltaX.value = t.clientX - touchStartX.value
  touchDeltaY.value = t.clientY - touchStartY.value
  // 以水平位移为主且超过轻微阈值时，认定为滑动
  if (Math.abs(touchDeltaX.value) > Math.abs(touchDeltaY.value) && Math.abs(touchDeltaX.value) > 10) {
    isSwiping.value = true
    // 阻止默认滚动，避免与页面垂直滚动冲突
    e.preventDefault()
  } else {
    isSwiping.value = false
  }
}

/**
 * 触摸结束事件：根据滑动距离与方向触发上一张/下一张
 */
const onTouchEnd = () => {
  if (!isSwiping.value) return
  if (isTransitioning.value) return

  if (Math.abs(touchDeltaX.value) >= swipeThreshold) {
    if (touchDeltaX.value < 0) {
      // 左滑，下一张
      nextSlide()
    } else {
      // 右滑，上一张
      prevSlide()
    }
  }

  // 重置状态
  touchStartX.value = 0
  touchStartY.value = 0
  touchDeltaX.value = 0
  touchDeltaY.value = 0
  isSwiping.value = false
}

// 处理新闻点击事件
const handleNewsClick = (item) => {
  // 这里可以添加跳转到新闻详情页面的逻辑
  if (item.post_link) {
    location.href = item.post_link
  } else {
    router.push({ name: 'NewsDetail', params: { id: item.id } })
  }
}

/**
 * 更新底部箭头的位置，使其移动到当前选中步骤下方
 */
const updateArrowPosition = () => {
  const containerEl = processStepsRef.value
  if (!containerEl) return

  const stepsEls = containerEl.querySelectorAll('.process-step')
  const activeIndex = processSteps.value.findIndex(s => s.active)
  if (activeIndex < 0 || !stepsEls[activeIndex]) return

  const activeEl = stepsEls[activeIndex]
  const containerRect = containerEl.getBoundingClientRect()
  const activeRect = activeEl.getBoundingClientRect()

  // 计算选中项中心点相对容器的left位置
  const centerX = activeRect.left + activeRect.width / 2 - containerRect.left

  // 使用px进行精确定位（移动端rem布局下，定位需要像素计算）
  arrowStyle.value = {
    left: `${centerX}px`,
    bottom: '-1.25rem',
    transform: 'translateX(-50%)'
  }
}
</script>

<style scoped>
.home-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

/* 主要内容区域 */
.main-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Banner区域 */
.banner-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 视频播放器区域 */
.video-section {
  width: 100%;
  margin: 0;
  padding: 0;
}

.video-section :deep(.video-player-container) {
  width: 100%;
  background: transparent;
}

.video-section :deep(.video-player) {
  width: 100%;
  height: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ceremony-process {
    padding: 2rem 1rem;
  }

  .ceremony-intro {
    padding: 0.5rem; /* 进一步从0.75rem减少到0.5rem */
  }

  .ceremony-title {
    font-size: 1.5rem;
  }

  .ceremony-subtitle {
    font-size: 0.875rem;
  }

  .ceremony-description {
    font-size: 0.875rem;
  }

  .process-steps {
    gap: 1rem;
  }

  .step-item {
    height: 15rem;
  }

  .step-title-text {
    font-size: 2rem; /* 从1.5rem调整为2rem */
  }

  .more-button {
    height: 2.5rem;
  }

  .more-text {
    font-size: 0.75rem;
  }
}

/* 三师七证模块样式 */
.three-masters-section {
  padding: 2rem 1rem;
  background: #E5DAC2;
}

/* 通用标题样式 */
.common-title {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 3;
}

.common-title img {
  max-width: 15rem; /* 比原来的12rem更大 */
  height: auto;
}

/* 标题图片样式 - 保持向下兼容 */
.section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.title-image {
  max-width: 15rem; /* 调整为更大的尺寸 */
  height: auto;
}

/* 三个栏目容器 */
.three-columns {
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem;
  justify-content: space-between;
  align-items: stretch;
}

/* 强制桌面端水平布局 */
@media (min-width: 481px) {
  .three-columns {
    display: flex !important;
    flex-direction: row !important;
  }
}

/* 单个栏目样式 */
.column-item {
  flex: 1;
  min-height: 20rem;
  height: 20rem;
}

.column-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  border-radius: 1.17rem;
  border: 0.08rem solid #C1A16A;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.column-content:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

/* 蒙版效果 */
.column-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(152, 81, 34, 0.3) 50%, rgba(152, 81, 34, 0.8) 100%);
  z-index: 1;
}

/* 栏目文字内容 */
.column-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.column-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.8);
  width: 100%;
  text-align: center;
}

/* 栏目内的查看更多按钮 */
.column-text .more-button {
  position: static;
  margin: 0 auto;
  height: 2.5rem;
  width: 6rem;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/button-bg@2x.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s ease;
}

.column-text .more-button:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.column-text .more-text {
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

/* 三师七证模块响应式设计 */

/* 大屏幕 (>1200px) */
@media (min-width: 1200px) {
  .column-title {
    font-size: 1.5rem;
  }

  .column-text .more-text {
    font-size: 0.875rem;
  }

  .column-text .more-button {
    height: 3rem;
    width: 7rem;
  }
}

/* 中等屏幕 (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .column-title {
    font-size: 1.5rem;
  }

  .column-text .more-text {
    font-size: 0.875rem;
  }

  .column-text .more-button {
    height: 2.5rem;
    width: 100%;
  }
}

/* 小屏幕 (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .column-title {
    font-size: 1.25rem;
  }

  .column-text .more-text {
    font-size: 0.875rem;
  }

  .column-text .more-button {
    height: 2.25rem;
    width: 100%;
  }

  .column-text {
    padding: 1.25rem;
  }
}

/* 超小屏幕 (321px - 480px) */
@media (min-width: 321px) and (max-width: 480px) {
  .column-title {
    font-size: 1rem;
  }

  .column-text .more-text {
    font-size: 0.75rem;
  }

  .column-text .more-button {
    height: 2rem;
    width: 100%;
  }

  .column-text {
    padding: 1rem 0.5rem;
  }
}

/* 三师七证模块响应式设计 - 只在很小的屏幕上使用垂直布局 */
@media (max-width: 320px) {
  .three-masters-section {
    padding: 2rem 1rem;
  }

  .three-columns {
    flex-direction: column !important;
    gap: 1rem;
  }

  .column-item {
    min-height: 15rem;
    height: 15rem;
  }

  .title-image {
    max-width: 10rem; /* 从8rem调整为10rem */
  }

  .column-title {
    font-size: 0.875rem;
  }

  .column-text .more-text {
    font-size: 0.5rem;
  }

  .column-text .more-button {
    height: 1.75rem;
    width: 100%;
  }

  .column-text {
    padding: 0.75rem;
  }
}

/* 法会流程容器 */
.ceremony-wrapper {
  position: relative;
  width: 100vw;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  background-color: #F2EBDB;
  padding-bottom: 1.5rem;
}

/* 法会流程模块 */
.ceremony-process {
  width: 100%;
  padding: 2rem 1rem;
  position: relative;
  z-index: 2;
}

/* 标题部分 */
.ceremony-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.ceremony-title img {
  max-width: 12rem;
  height: auto;
}

/* 流程容器 */
.process-container {
  position: relative;
  width: 100%;
}

/* 麻绳背景 */
.rope-background {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  height: 0.3rem;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E9%BA%BB%E7%BB%B3@2x.png');
  background-size: cover;
  background-position: top;
  background-repeat: repeat-x;
  transform: translateY(-10%);
  z-index: 1;
}

/* 流程步骤容器 */
.process-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 0 0.5rem;
  gap: 0.5rem;
}

/* 单个流程步骤 */
.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.process-step:hover {
  transform: scale(1.05);
}

/* 步骤内容 */
.step-content {
  width: 4rem;
  height: 10rem;
  background: linear-gradient(180deg, #DAC39E 0%, #BE9C63 100%);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* 选中状态的步骤内容 */
.process-step.active .step-content {
  background: linear-gradient(180deg, #C8916C 0%, #975021 100%);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

/* 步骤文字 */
.step-text {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  margin-top: 0.85rem;
  /* 文字间隔 */
  letter-spacing: 0.05rem;
}

/* 顶部白色圆形占位 */
.top-circle {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.45rem;
  height: 0.45rem;
  background: white;
  border-radius: 50%;
  z-index: 3;
}

/* 底部箭头 */
.bottom-arrow {
  position: absolute;
  bottom: -1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.bottom-arrow img {
  width: 1rem;
  height: 1rem;
  /* 底部箭头左右位移动画 */
  animation: arrowHSlide 1.8s ease-in-out infinite;
  will-change: transform;
}

/* 可移动箭头样式：启用left过渡，实现平滑跟随 */
.moving-arrow {
  transition: left 0.3s ease;
  pointer-events: none;
}

/* 响应式调整 */
@media (max-width: 48rem) {
  .ceremony-process {
    padding: 2.5rem 0.5rem;
  }

.ceremony-title img {
    max-width: 12.5rem; /* 从10rem调整为12.5rem */
  }

  .title-image {
    max-width: 12.5rem; /* 从10rem调整为12.5rem */
  }

  .common-title img {
    max-width: 12.5rem;
  }
  .step-content {
    width: 3rem;
    height: 8rem;
  }

  .step-text {
    font-size: 0.9rem;
  }

  .process-steps {
    padding: 0 0.25rem;
    gap: 0.25rem;
  }
}

@media (max-width: 30rem) {
  .ceremony-process {
    padding: 2rem 0.25rem;
  }

.ceremony-title img {
    max-width: 10rem; /* 从8rem调整为10rem */
  }

  .title-image {
    max-width: 10rem; /* 从8rem调整为10rem */
  }

  .common-title img {
    max-width: 10rem;
  }
  .step-content {
    width: 2.5rem;
    height: 6.5rem;
  }

  .step-text {
    font-size: 0.8rem;
  }

  .top-circle {
    width: 0.5rem;
    height: 0.5rem;
  }

  .bottom-arrow img {
    width: 1rem;
    height: 0.75rem;
  }

  .process-steps {
    gap: 0.125rem;
  }
}

/* 介绍容器样式 */
.ceremony-intro {
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-container {
  position: relative;
  width: 100%;
  margin: 0.5rem; /* 从1rem减少到0.5rem */
  border-radius: 1.17rem;
  border: 0.08rem solid #C1A16A;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  aspect-ratio: 28.75 / 16.18;
}

.intro-container:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

/* 背景图片 */
.intro-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
  z-index: 1;
}

.intro-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(152, 81, 34, 1) 0%, rgba(152, 81, 34, 0.5) 30%, rgba(65, 44, 12, 0.15) 70%, transparent 100%);
  z-index: 2;
}

/* 步骤标题 */
.step-title {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 3;
}

.step-title-text {
  color: white;
  font-size: 2.5rem; /* 从2rem调整为2.5rem，更大 */
  font-weight: 700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.8);
  letter-spacing: 0.1rem;
  line-height: 1.2;
}

/* 装饰线 */
.decorative-line {
  position: absolute;
  left: 2.2rem;
  width: 0.125rem;
  border-left: 0.125rem dotted #FFF;
  z-index: 3;
}

/* 查看更多按钮 */
.more-button {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  height: 3rem;
  aspect-ratio: 3 / 1;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/button-bg@2x.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s ease;
}

.more-button:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.more-text {
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

/* 步骤描述（隐藏，可用于后续扩展） */
.step-description {
  display: none;
}

/* 响应式设计 */
@media (max-width: 48rem) {
  .intro-container {
    margin: 0.375rem; /* 从默认0.5rem进一步减少 */
    padding: 0.625rem; /* 从0.875rem减少 */
  }

  .step-title-text {
    font-size: 2.25rem; /* 从1.75rem调整为2.25rem */
  }

  .more-button {
    bottom: 0.75rem;
    left: 1rem;
    height: 2.5rem;
  }

  .more-text {
    font-size: 0.75rem;
  }
}

/* 中等小屏幕 (24rem - 30rem, 384px - 480px) */
@media (max-width: 30rem) and (min-width: 24rem) {
  .intro-container {
    margin: 0.25rem; /* 进一步减少margin */
    padding: 0.5rem; /* 从0.75rem减少 */
  }

  .step-title {
    top: 1rem;
    left: 1rem;
  }

  .step-title-text {
    font-size: 1.25rem; /* 调整为更合适的大小 */
  }

  .decorative-line {
    left: 1.8rem;
  }

  .more-button {
    bottom: 0.75rem;
    left: 1rem;
    height: 2rem;
  }

  .more-text {
    font-size: 0.7rem;
  }
}

/* 小屏幕 (20rem - 24rem, 320px - 384px) */
@media (max-width: 24rem) and (min-width: 20rem) {
  .intro-container {
    margin: 0.125rem; /* 最小化margin */
    padding: 0.375rem; /* 从0.625rem减少 */
  }

  .step-title {
    top: 0.875rem;
    left: 0.875rem;
  }

  .step-title-text {
    font-size: 1.125rem; /* 进一步减小 */
  }

  .decorative-line {
    left: 1.6rem;
  }

  .more-button {
    bottom: 0.875rem;
    left: 0.875rem;
    height: 1.375rem;
  }

  .more-text {
    font-size: 0.65rem;
  }
}

/* 超小屏幕 (小于20rem, 小于320px) */
@media (max-width: 20rem) {
  .intro-container {
    margin: 0.125rem; /* 保持最小margin */
    padding: 0.25rem; /* 从0.5rem减少 */
  }

  .step-title {
    top: 0.75rem;
    left: 0.75rem;
  }

  .step-title-text {
    font-size: 1rem; /* 最小尺寸 */
  }

  .decorative-line {
    left: 1.4rem;
  }

  .more-button {
    bottom: 0.75rem;
    left: 0.75rem;
    height: 1.25rem;
  }

  .more-text {
    font-size: 0.6rem;
  }
}

/* 相关新闻样式 */
.news-section {
  padding: 3rem 1.5rem;
  position: relative;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F2EBDB;
}

/* 左下角装饰图片 */
.news-section::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* 可根据实际图片大小调整 */
  height: 200px; /* 可根据实际图片大小调整 */
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/bg@2x.png');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none; /* 确保不影响交互 */
}

.news-carousel-container {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  z-index: 2; /* 确保轮播容器在背景图片之上 */
  /* 仅允许垂直滚动，优化左右滑动体验 */
  touch-action: pan-y;
}

.news-carousel {
  display: flex;
  transition: transform 0.3s ease;
  gap: 0.5rem; /* 减小间距 */
}

.news-item {
  flex: 0 0 75%; /* 调整宽度为75% */
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-image {
  width: 100%;
  height: 12rem;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content {
  padding: 1rem;
  background: white;
}

.news-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.news-date {
  font-size: 0.875rem;
  color: #999;
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  position: relative;
  z-index: 3; /* 确保导航按钮在最上层 */
}

.nav-btn {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  object-fit: contain;
}

.nav-btn:hover:not(.disabled) {
  transform: scale(1.1);
}

.nav-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 48rem) {
  .news-section {
    padding: 3rem 1rem;
  }

  .news-item {
    flex: 0 0 78%; /* 调整中等屏幕宽度 */
  }

  .news-image {
    height: 10rem;
  }

  .news-title {
    font-size: 0.9rem;
  }

  .nav-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 30rem) {
  .news-section {
    padding: 3rem 0.75rem;
  }

  .news-item {
    flex: 0 0 82%; /* 调整小屏幕宽度 */
  }

  .news-image {
    height: 8rem;
  }

  .news-content {
    padding: 0.75rem;
  }

  .news-title {
    font-size: 0.85rem;
  }

  .news-date {
    font-size: 0.75rem;
  }
}
</style>