<!--
 * @Date: 2024-09-15 22:08:49
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-21 01:42:38
 * @FilePath: /map-demo/src/views/checkin/info.vue
 * @Description: 文件描述
-->
<template>
  <div class="info-page">
    <div class="info-header-wrapper">
      <!-- <div v-if="showBack && page_details.banner?.length" style="position: absolute; top: 1rem; left: 0.5rem; z-index: 9;">
        <van-icon name="arrow-left" color="white" size="1.75rem" @click="goBack()" />
      </div> -->
      <van-config-provider :theme-vars="themeVars">
        <van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
          <van-swipe-item v-for="(image, index) in page_details.banner" :key="index" style="position: relative;">
            <van-image fit="cover" width="100%" :height="img_height" :src="image" @click="onClickImg(index)" />
            <img src="https://cdn.ipadbiz.cn/bieyuan/map/icon/pageShade@3x.png" style="width: 100%; height: 5rem; position: absolute; right: 0; left: 0; bottom: 0;" alt="">
          </van-swipe-item>
        </van-swipe>
      </van-config-provider>
      <div class="header-z"></div>
    </div>
    <div class="info-content-wrapper">
      <div class="info-header">
        <div style="display: flex; justify-content: space-between;">
          <p class="info-title">{{ page_details.name }}</p>
          <div style="display: flex;">
            <div v-if="page_details.show_audio" @click="onClickAudioList" style="margin-right: 0.75rem;">
              <van-icon v-if="!audio_list_height" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B31@3x.png" size="1.65rem" />
              <van-icon v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B32@3x.png" size="1.65rem" />
            </div>
            <div v-if="!check_in_status" @click="checkIn()" class="info-btn" style="margin-right: 0.75rem;">打卡</div>
            <div v-else class="info-btn checked" style="margin-right: 0.75rem;">已打卡</div>
            <!-- <div v-if="page_details.path?.length > 1" @click="goTo()" class="info-btn">前往</div>
            <div @click="goToWalk()" class="info-btn">前往</div> -->
          </div>
        </div>
        <div class="info-sub-title">{{ page_details.note }}</div>
      </div>
      <div id="tab-wrapper" style="margin-top: 0.5rem;">
        <van-config-provider :theme-vars="themeVars">
          <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" :shrink="show_shrink" sticky animated>
            <template v-for="config in tab_configs" :key="config.key">
              <van-tab
                :title="page_details[config.title_key]"
                v-if="page_details[config.content_key]"
              >
                <div class="info-content">
                  <div :id="config.id" v-html="page_details[config.content_key]" style="padding: 0 1rem;"></div>
                </div>
                <!-- 音频播放器只在体验标签页显示 -->
                <div v-if="config.key === 'experience' && page_details.experience_audio && page_details.experience_audio.length" class="audio-wrapper">
                  <div @click="toggleHandleAudio(item, index)" :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in page_details.experience_audio" :key="index">
                    <div>{{ item.description }}</div>
                    <van-icon @click.stop="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
                    <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
                  </div>
                </div>
              </van-tab>
            </template>
          </van-tabs>
        </van-config-provider>
      </div>
    </div>
    <!-- <div class="info-logo" :style="{ marginBottom: audio_list_height ? `${audio_list_height * 1.5}px` : '3rem' }">
      <van-image width="3rem" height="3rem" fit="contain" src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png" />
    </div> -->

    <van-toast v-model:show="show_toast" style="padding: 0">
      <template #message>
        <p style="padding: 0.5rem 1rem;">{{ toast_text }}</p>
      </template>
    </van-toast>

    <van-image-preview v-model:show="show_preview" :images="preview_images" @change="onChange" doubleScale>
      <template v-slot:index>第{{ index + 1 }}张</template>
    </van-image-preview>

    <van-back-top />

    <audio-play-list :height="audio_list_height" :status="audio_status" @close="onCloseAudioList" @status="onStatusAudioList"></audio-play-list>
    </div>
</template>

<script setup name="CheckinInfo">
import { ref, watch, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showImagePreview, showDialog } from 'vant';
import { storeToRefs } from 'pinia'
import audioPlayList from '@/components/audioList.vue'
import { mainStore, useTitle } from '@/utils/generatePackage'
import wx from 'weixin-js-sdk';
import $ from 'jquery';
import AMapLoader from '@amap/amap-jsapi-loader'

import { mapAPI, mapAudioAPI } from '@/api/map.js'
import { isCheckedAPI, checkinAPI } from '@/api/checkin.js'
import { getAdaptiveFontSize, getAdaptivePadding, getDeviceInfo } from '@/utils/tools.js'

const store = mainStore();
const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store);

const $route = useRoute();
const $router = useRouter();

// 动态字体大小计算属性
const adaptiveTitleFontSize = computed(() => getAdaptiveFontSize(1.25));
const adaptiveSubTitleFontSize = computed(() => getAdaptiveFontSize(0.85));
const adaptiveButtonFontSize = computed(() => getAdaptiveFontSize(0.85));
const adaptiveTabFontSize = computed(() => getAdaptiveFontSize(0.95));

// 动态按钮尺寸计算属性
const adaptiveButtonWidth = computed(() => getAdaptiveFontSize(3)); // 基础宽度3rem
const adaptiveButtonHeight = computed(() => getAdaptiveFontSize(1.5)); // 基础高度1.5rem
const adaptiveButtonPadding = computed(() => getAdaptivePadding(0.5)); // 基础内边距0.5rem

// 动态文章内容适配计算属性 - 仅适配iPad类似设备
const adaptiveContentFontSize = computed(() => {
  const deviceInfo = getDeviceInfo();
  if (deviceInfo.isiPad || deviceInfo.isTablet) {
    return getAdaptiveFontSize(0.9); // iPad设备适配字体大小
  }
  return '0.9rem'; // 普通屏幕保持原始大小
});
const adaptiveContentLineHeight = computed(() => {
  const deviceInfo = getDeviceInfo();
  if (deviceInfo.isiPad || deviceInfo.isTablet) {
    return '1.8'; // iPad设备行高更大
  }
  return '1.75'; // 普通屏幕默认行高
});
const adaptiveContentPadding = computed(() => {
  const deviceInfo = getDeviceInfo();
  if (deviceInfo.isiPad || deviceInfo.isTablet) {
    return getAdaptivePadding('1rem'); // iPad设备适配内边距
  }
  return '1rem'; // 普通屏幕保持原始内边距
});

const themeVars = ref({
  swipeIndicatorInactiveBackground: '#fff',
  swipeIndicatorMargin: '1.5rem',
  tabFontSize: adaptiveTabFontSize,
});

const props = defineProps({
  info: Object,
  height: Number
});

const page_details = ref({});

// TAG: 动态标签页配置
const tab_configs = ref([
  {
    key: 'introduction',
    title_key: 'introduction_text',
    content_key: 'introduction',
    default_title: '敬老月优惠',
    id: 'introduction'
  },
  {
    key: 'story',
    title_key: 'story_text',
    content_key: 'story',
    default_title: '敬老月优惠',
    id: 'story'
  },
  {
    key: 'experience',
    title_key: 'experience_text',
    content_key: 'experience',
    default_title: '敬老月优惠',
    id: 'experience'
  }
]);

// 监听props.info变化，更新页面数据并检查打卡状态
watch(
  () => props.info,
  async (newInfo) => {
    if (newInfo && newInfo.details && newInfo.details.length) {
      // 更新page_details数据
      page_details.value = { ...newInfo.details[0], position: newInfo.position, path: newInfo.path, current_lng: newInfo.current_lng, current_lat: newInfo.current_lat, openid: newInfo.openid };
      // 动态设置标签页标题（使用默认值或接口返回值）
      tab_configs.value.forEach(config => {
        page_details.value[config.title_key] = page_details.value[config.title_key] || config.default_title;
      });
      // 获取浏览器可视范围的高度
      $('.info-page').height(props.height + 'px');
      // 检查打卡状态
      await checkInitialCheckinStatus();
    }
  },
  { immediate: true }
)

const images = ref([
  'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
  'https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png',
  'https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png',
]);

const active = ref(0);
const play_audio_index = ref(null);

// const audioList = ref([{
//   text: '5分钟观呼吸',
//   src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E6%AD%A3%E5%BF%B5%E5%91%BC%E5%90%B8%EF%BC%8810%E5%88%86%E9%92%9F%EF%BC%89.mp3',
//   play: false,
// }, {
//   text: '10分钟正念静坐',
//   src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E5%8D%81%E5%88%86%E9%92%9F%E6%AD%A3%E5%BF%B5%E9%9D%99%E5%9D%9020210510.mp3',
//   play: false,
// }, {
//   text: '15分钟正念静坐',
//   src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E5%8D%81%E5%88%86%E9%92%9F%E6%AD%A3%E5%BF%B5%E9%9D%99%E5%9D%9020210510.mp3',
//   play: false,
// }])
const toggleHandleAudio = (item, index) => { // 切换播放或者暂停操作
  if (item.play) {
    stopAudio(item, index);
  } else {
    playAudio(item, index);
  }
}

const playAudio = (item, index) => {
  page_details.value.experience_audio.forEach(item => item.play = false);
  audio.value.src = item.src;
  // 后台有播放器运行时，先暂停
  if (audio_list_status.value === 'play'){
    audio_list_entity.value.pause();
  }
  play_audio_index.value = index;
  let play_status = audio.value.play() // 播放
  if (play_status) {
    play_status.then(() => {
      item.play = true;
      // 存放到pinia里面控制
      store.changeAudio(audio.value);
      store.changeAudioSrc(audio.value.src);
      store.changeAudioStatus('play');
    }).catch((e) => {
      // 失败
      console.log('Operation is too fast, audio play fails')
    })
  }
}

const stopAudio = (item, index) => {
  item.play = false;
  audio.value.pause();
}

const audio = ref(new Audio());
const img_height = ref('15rem');
const scrollTop = ref(0);

onMounted(async () => {
  // 通过ID查询到标记点详情
  if (!props.info) {
    let id = $route.query.id;
    const { data } = await mapAPI({ i: id });
    const raw_list = data.list[0].list; // 获取标记点列表
    const marker_id = $route.query.marker_id;
    const current_marker = raw_list.filter(item => item.id == marker_id)[0];
    // 定位
    const current_lng = $route.query.current_lng;
    const current_lat = $route.query.current_lat;
    const openid = $route.query.openid;
    //
    page_details.value = { ...current_marker.details[0], position: current_marker.position, path: current_marker.path, current_lng: current_lng, current_lat: current_lat, openid: openid };
    // 富文本转义, 分割线样式转换
    page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
    page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
    page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
    // 动态设置标签页标题（使用默认值或接口返回值）
    tab_configs.value.forEach(config => {
      page_details.value[config.title_key] = page_details.value[config.title_key] || config.default_title;
    });
    // 定位
    if (current_lng && current_lat) {
      page_details.value.current_lng = current_lng;
      page_details.value.current_lat = current_lat;
    }
    // 查询是否有音频列表，打标记点是否有音频
    const getAudioList = await mapAudioAPI({ mid: $route.query.id, bid: marker_id });
    if (getAudioList.data && getAudioList.data.length) {
      page_details.value.show_audio = true;
    }
  }
  // 介绍栏目，图片点击事件
  var imgs = $('#introduction').find('img');
  // 图片点击事件
  imgs.each(function(index, img) {
    $(img).on('click', function (e) {
        showImagePreview({
          images: [$(img).attr('src')],
          startPosition: 0,
          showIndex: false,
          onClose: () => {
            // console.log('close');
          }
        })
    });
    // 图片有2个像素的圆角
    $(img).css('border-radius', '5px');
  });
  // 获取屏幕宽度，设置高度4:3
  // 获取屏幕的宽度
  var screenWidth = $(window).width();
  // 计算4:3比例的高度
  var screenHeight = screenWidth * 3 / 4;
  // 设置容器的高度
  img_height.value = screenHeight + 'px';
  //
  nextTick(() => {
    $('.info-page').on('scroll', (evt) => {
      scrollTop.value = $(evt.currentTarget).scrollTop(); // 获取滚动的垂直距离
    })
  })
  // 如果是从浮动窗口点击进来音频播放，自动打开
  if ($route.query.source === 'click_audio') {
    setTimeout(() => {
      audio_list_height.value = (0.2 * window.innerHeight);
      // 修改当前路由参数，避免刷新再次播放
      $router.push({
        query: {
          ...$route.query,
          source: ''
        }
      });
    }, 500);
  }
  // 地图标题
  document.title = page_details.value.name;
  // 检查用户是否已经打过卡
  await checkInitialCheckinStatus();

  // 微信分享
  const shareData = {
    title: page_details.value.name, // 分享标题
    desc: '别院详情', // 分享描述
    link: location.origin + location.pathname + location.hash, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // console.warn('设置成功');
    }
  }
  // 分享好友（微信好友或qq好友）
  wx.updateAppMessageShareData(shareData);
  // 分享到朋友圈或qq空间
  wx.updateTimelineShareData(shareData);
  // 分享到腾讯微博
  wx.onMenuShareWeibo(shareData);
  const AMap = await AMapLoader.load({
    key: '17b8fc386104b89db88b60b049a6dbce', // 控制台获取
    version: '2.0', // 指定API版本
    plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation']    // 必须加载步行导航插件
  })
});

// watchEffect(
//   () => useTitle(page_details.value.name) // 地图标题
// )

onUnmounted(() => { // 离开页面时关闭音频播放
  audio.value.pause();
  store.changeAudioStatus('pause');
})

const audio_play = (src, index) => {
  audio.value.src = src;
}

const outerStopAudio = () => {
  audio.value.pause();
}

const emit = defineEmits(["closeFloat", 'route', 'walkRoute']);

const show_toast = ref(false);
const toast_text = ref('');

const goTo = () => { // 打开标记地图显示
  // 没有关联导航提示
  if (page_details.value.path.length <= 1) {
    show_toast.value = true;
    toast_text.value = '该标记点没有关联导航';
    return;
  }
  //
  if ($router.currentRoute.value.path === '/checkin/info') { // 详情页
    $router.push({
      path: '/checkin',
      query: {
        id: $route.query.id,
        marker_id: $route.query.marker_id
      }
    })
  } else { // 地图页
    //
    emit("closeFloat", false);
    //
    emit("route", {name: '参观路径', path: page_details.value.path});
  }
}

const goToWalk = async () => { // 打开步行导航地图显示
  //
  if ($router.currentRoute.value.path === '/checkin/info') { // 详情页
    $router.push({
      path: '/checkin',
      query: {
        id: $route.query.id,
        marker_id: $route.query.marker_id
      }
    })
  } else { // 地图页
    //
    emit("closeFloat", false);
    //
    if (page_details.value?.position.length) {
      emit("walkRoute", {name: '步行导航', point: [+page_details.value?.position[0], +page_details.value?.position[1]]});
    } else {
      show_toast.value = true;
      toast_text.value = '该标记点没有关联导航';
    }
  }
}

const goBack = () => { // 返回首页
  $router.push({
    path: '/checkin',
    query: {
      id: $route.query.id,
    }
  })
}

const showBack = computed(() => $router.currentRoute.value.path === '/checkin/info');

const voicePause = () => {
  audio.value.pause();
  store.changeAudioStatus('pause');
}

const tabsRef = ref(null);
const clickTab = (evt) => { // 标签切换
  tabsRef.value.resize();
  nextTick(() => {
    // 根据当前激活的标签页动态获取对应的图片
    const currentConfig = tab_configs.value[evt.index];
    if (currentConfig) {
      const imgs = $(`#${currentConfig.id}`).find('img');

      // 图片点击事件
      imgs.each(function(index, img) {
        $(img).on('click', function (e) {
            showImagePreview({
              images: [$(img).attr('src')],
              startPosition: 0,
              showIndex: false,
              onClose: () => {
                // console.log('close');
              }
            })
        })
        // 图片有5个像素的圆角
        $(img).css('border-radius', '5px');
      })
    }
    // 滚动高度大于tabs高度后才滚动到指定高度
    let offsetTop = $('#tab-wrapper')[0].offsetTop;
    if (scrollTop.value >= offsetTop) {
      $('.info-page').scrollTop(offsetTop);
    }
  });
}

watch(
  () => audio_status.value,
  (v) => {
    if (v === 'pause') {
      voicePause();
      page_details.value.experience_audio?.forEach(item => item.play = false);
    }
  },
  { immediate: true }
);

// 检查初始打卡状态
const checkInitialCheckinStatus = async () => {
  try {
    const detail_id = page_details.value.id;
    const openid = page_details.value.openid;

    if (detail_id && openid) {
      const res = await isCheckedAPI({ detail_id, openid });
      if (res.code) {
        check_in_status.value = res.data.is_checked;
      }
    }
  } catch (error) {
    console.error('检查打卡状态失败:', error);
  }
};

defineExpose({
  outerStopAudio,
  checkInitialCheckinStatus
})


const show_preview = ref(false);
const index = ref(0);
const preview_images = [];
const onChange = (newIndex) => {
  index.value = newIndex;
};

const onClickImg = (idx) => {
  if ($('.info-page').height() >= $(window).height()) {
    showImagePreview({
      images: page_details.value.banner,
      startPosition: idx,
      showIndex: true,
      onClose: () => {
        // console.log('close');
      }
    })
  }
};

const show_shrink = computed(() => {
  // 统计非空字段的个数
  let filledFields = 0;

  if (page_details.value.introduction) filledFields++;
  if (page_details.value.story) filledFields++;
  if (page_details.value.experience) filledFields++;

  // 判断是否只有一个字段有值
  if (filledFields === 1) {
    return true;
  }
  return false;
});

const audio_list_height = ref(0);

const onClickAudioList = () => {
  if ($('.info-page').height() < $(window).height()) { // 在浮动模式下点击音频列表
    // 打开页面
    $router.push({
      path: '/checkin/info',
      query: {
        id: $route.query.id,
        marker_id: props.info.id,
        source: 'click_audio'
      }
    });
  } else { // 详情页内点击
    audio_list_height.value = (0.2 * window.innerHeight);
  }
}

const onCloseAudioList = () => {
  audio_list_height.value = 0;
}

// const show_audio = ref(true);

const onStatusAudioList = (status) => { // 音频列表组件，状态改变
  page_details.value.experience_audio?.forEach(item => item.play = false);
  audio.value.pause();
  play_audio_index.value = null;
  store.changeAudioStatus('pause');
  // // 反馈播放列表数量为空时，隐藏图标
  // if (status === 'none') {
  //   show_audio.value = false;
  // }
}

// const checkInRange = (current_lng, current_lat, point_range) => {
//   let isPointInRing = AMap.GeometryUtil.isPointInRing([current_lng, current_lat], point_range);
//   return isPointInRing
// }

// 现在只有一个地点的经纬度page_details.value?.position, 我现在需要判断我当前经纬度离这个点的距离是否在1km以内
const checkInRange = (current_lng, current_lat, point_range) => {
  if (!point_range) return false;
  let distance = AMap.GeometryUtil.distance([current_lng, current_lat], point_range);
  // 5km范围内可以打卡
  return distance < 5000;
}


const check_in_status = ref(false);

const checkIn = async () => { // 打卡
  if (check_in_status.value) {
    show_toast.value = true;
    toast_text.value = '您已打卡';
    return;
  }

  // 判断用户是否定位
  if (!page_details.value.current_lng || !page_details.value.current_lat) {
    show_toast.value = true;
    toast_text.value = '请先获取定位';
    return;
  }

  const detail_id = page_details.value.id;
  const openid = page_details.value.openid;

  // 判断用户时候在范围内
  if (!checkInRange(page_details.value.current_lng, page_details.value.current_lat, page_details.value?.position)) {
    show_toast.value = true;
    toast_text.value = '您不在打卡范围';
    return;
  }

  if (page_details.value?.position.length) {
    // emit("checkIn", {name: '打卡', point: [+page_details.value?.position[0], +page_details.value?.position[1]]});
    // 执行打卡操作
    let res = await checkinAPI({ detail_id, openid });
    if (res.code) {
      // 提示打卡成功
      showDialog({
        title: '温馨提示',
        message: `恭喜您打卡成功`,
        confirmButtonText: '点我，去制作您的独有海报',
      }).then(() => {
        // 打卡成功后,马上隐藏打卡按钮改成已打卡按钮
        check_in_status.value = true;
        // 跳转到海报打卡页面
        wx.miniProgram.navigateTo({ url: '/pages/PosterCheckin/index?from=checkin&id=' + detail_id });
      });

      return;
    }
  } else {
    show_toast.value = true;
    toast_text.value = '该标记点没有关联导航';
  }
}
</script>

<style lang="less">
.info-page {
  background-color: #EBEBEB;
  height: 100vh;
  overflow: scroll;
  position: relative;
  .info-header-wrapper {
    position: relative;
    min-height: 2rem;
    .header-z {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1rem;
      // box-shadow: rgba(241, 242, 248, 0.6) 0px -3px 25px 15px;
      // background-color: #f7f7f7;
      background-color: #fff;
      margin: 0 1rem;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
    }
  }
  .info-content-wrapper {
    box-shadow: 0px -3px 6px 0 rgba(241, 242, 248, 0.8);
    margin: 1rem;
    margin-top: 0;
    // padding: 1rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    background-color: white;
    .info-header {
      padding: 1rem 2rem 0;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      .info-title {
        font-size: v-bind(adaptiveTitleFontSize);
        margin-bottom: 0.5rem;
      }
      .info-sub-title {
        font-size: v-bind(adaptiveSubTitleFontSize);
        color: #A0A8B1;
        line-height: 1.75;
      }
      .info-btn {
        width: v-bind(adaptiveButtonWidth);
        height: v-bind(adaptiveButtonHeight);
        padding: v-bind(adaptiveButtonPadding);
        border: 1px solid #DD7850;
        color: #DD7850;
        border-radius: 0.8rem;
        font-size: v-bind(adaptiveButtonFontSize);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }
    }
    .info-content {
      color: #47525F;
      padding: v-bind(adaptiveContentPadding);
      line-height: v-bind(adaptiveContentLineHeight);
      font-size: v-bind(adaptiveContentFontSize);

      // 仅对iPad类似设备的HTML元素进行适配
      p {
        line-height: v-bind(adaptiveContentLineHeight);
        text-align: justify;
        // margin-bottom: v-bind(adaptiveContentPadding);
        font-size: v-bind(adaptiveContentFontSize);
        img {
          width: 100%;
          height: auto;
          max-width: 100%;
        }
      }

      h1, h2, h3, h4, h5, h6 {
        margin: v-bind(adaptiveContentPadding) 0;
        font-size: calc(v-bind(adaptiveContentFontSize) * 1.2);
      }

      ul, ol {
        margin: v-bind(adaptiveContentPadding) 0;
        padding-left: calc(v-bind(adaptiveContentPadding) * 2);

        li {
          margin-bottom: calc(v-bind(adaptiveContentPadding) * 0.5);
          font-size: v-bind(adaptiveContentFontSize);
        }
      }
    }
    .audio-wrapper {
      padding: 1rem;
      .audio-item {
        color: #47525F;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background-color: #FFF;
        border-radius: 0.25rem;
        margin: 1rem;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
        &.click {
          border: 1px solid #DD7850;
        }
        .audio-icon {
          width: 2rem;
          height: 2rem;
          background-image: url('https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png'); /* 使用上传的图标 */
          background-size: cover;
          &.click {
            animation: pulse 1.5s infinite;
          }
        }

        @keyframes pulse {
          0% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.2);
          }
          100% {
            transform: scale(1);
          }
        }
      }
    }
  }
  .info-logo {
    display: flex;
    justify-content: center;
    margin: 3rem;
  }

  .van-tabs__wrap {
    border-bottom: 1px solid #F3F3F3;
  }

  .van-tabs__nav--line.van-tabs__nav--shrink {
    padding-left: 2rem;
  }
}

.van-back-top {
  background-color: #DD7850;
}
</style>