nongxiaoyu/pages/knowledge/detail.vue

#<template>
  <view class="container">
    <!-- H5环境自定义导航栏 -->
    <view class="h5-custom-navbar" v-if="isH5">
      <view class="h5-navbar-left" @click="goBack">
        <view class="h5-back-icon">
          <view class="h5-arrow-left"></view>
        </view>
      </view>
      <text class="h5-navbar-title">农业知识</text>
      <view class="h5-navbar-right"></view>
    </view>
    
    <!-- 非H5环境返回按钮 -->
<!--    <view class="float-back-button" v-if="!isH5" @click="goBack">
      <view class="float-back-icon">
        <view class="h5-arrow-left"></view>
      </view>
    </view> -->
    <!-- 加载中状态 -->
    <view class="loading-container" v-if="loading">
      <view class="spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 文章内容区 -->
    <view class="article-container" v-if="!loading && articleInfo">
      <!-- 封面图轮播 -->
      <swiper class="cover-swiper" 
        indicator-dots 
        autoplay 
        circular
        interval="3000"
        duration="500"
        indicator-active-color="#4CAF50" 
        indicator-color="rgba(255,255,255,0.5)"
        @change="handleSwiperChange">
        <swiper-item v-for="(slide, index) in carouselImages" :key="index">
          <view class="swiper-item-container" :style="{ backgroundColor: slide.color }">
			<image class="swiper-bg" :src="slide.url" mode="aspectFill" />
            <view class="pattern-overlay"></view>
            <view class="agri-icon" v-html="slide.icon"></view>
            <view class="swiper-overlay">
              <text class="swiper-title">{{ slide.title }}</text>
              <text class="swiper-subtitle">{{ slide.subtitle }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <view class="swiper-counter">
        <text>{{ currentSwiperIndex + 1 }}/{{ carouselImages.length }}</text>
      </view>
      
      <!-- 标题及元信息 -->
      <view class="article-header">
        <text class="article-title">{{ articleInfo.title }}</text>
        <view class="article-meta">
          <text class="source">{{ articleInfo.source }}</text>
          <text class="dot">·</text>
          <text class="date">{{ articleInfo.publishDate }}</text>
          <view class="views">
            <image src="@/static/icons/read.png" style="width: 30rpx;height: 30rpx;"></image>
            <text class="view-count">{{ articleInfo.viewCount }}</text>
          </view>
        </view>
      </view>
      
      <!-- 文章正文 -->
      <view class="article-content" v-if="articleInfo.contentType === 'article' || !articleInfo.contentType">
        <rich-text :nodes="processedContent"></rich-text>
      </view>
      
      <!-- 视频内容 -->
      <view class="video-container" v-if="articleInfo.contentType === 'video'">
        <video 
          v-if="videoPlaying" 
          :src="articleInfo.videoUrl" 
          class="video-player" 
          controls 
          :poster="articleInfo.imageUrl"
        ></video>
        <view class="video-poster" v-else @click="playVideo">
          <view class="video-color-bg" :style="{ backgroundColor: getRandomColor() }">
            <view class="video-pattern"></view>
            <text class="video-label">视频教学</text>
          </view>
          <view class="play-button">
            <view class="triangle-play"></view>
          </view>
          <text class="video-duration">{{ articleInfo.duration || '00:00' }}</text>
        </view>
        <text class="video-title">{{ articleInfo.title }}</text>
      </view>
    </view>
    
    <!-- 底部功能区 -->
<!--    <view class="footer-action" v-if="!loading && articleInfo">
      <view class="action-button like" @click="handleLike">
        <view class="action-icon-wrapper">
          <text v-if="articleInfo.liked" class="material-icon">&#xe87d;</text>
          <text v-else class="material-icon">&#xe87e;</text>
        </view>
        <text class="action-text">{{ articleInfo.liked ? '已点赞' : '点赞' }}</text>
      </view>
      <view class="action-button collect" @click="handleCollect">
        <view class="action-icon-wrapper">
          <text v-if="articleInfo.collected" class="material-icon">&#xe838;</text>
          <text v-else class="material-icon">&#xe83a;</text>
        </view>
        <text class="action-text">{{ articleInfo.collected ? '已收藏' : '收藏' }}</text>
      </view>
      <view class="action-button share" @click="handleShare">
        <view class="action-icon-wrapper">
          <text class="material-icon">&#xe80d;</text>
        </view>
        <text class="action-text">分享</text>
      </view>
    </view> -->
    
    <!-- 返回顶部 -->
    <view class="back-to-top" @click="scrollToTop" v-if="!loading && articleInfo">
      <view class="top-arrow"></view>
      <text class="top-text">顶部</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { getKnowledgeDetail, getKnowledgeView } from "@/api/services/knowledge.js"
import { onShow, onLoad, onNavigationBarButtonTap} from '@dcloudio/uni-app'

// 响应式数据
const title = ref("农业知识")
const loading = ref(true)
const articleInfo = ref(null)
const knowledgeImages = ref([]) // 文章关联的图片
const currentSwiperIndex = ref(0)
const isH5 = ref(false) // 是否是H5环境
const videoPlaying = ref(false)
const id = ref(null)
const type = ref('')
const carouselImages = ref([])

// 计算属性
// 计算属性
const processedContent = computed(() => {
  console.log("articleInfo", articleInfo.value)
  // 检查文章内容是否存在于article_content或content_category字段
  if (!articleInfo.value) return ''
  
  // 优先使用content_category字段，如果不存在则尝试使用article_content字段
  let content = articleInfo.value.content_category || articleInfo.value.articleContent || ''
  
  // 如果内容已经包含HTML标签
  if (content.includes('<') && content.includes('>')) {
    // 增强绿色背景区块显示
    content = content.replace(/<div[^>]*>水稻秧苗培育<\/div>/g, '<div class="green-block">水稻秧苗培育</div>')
    content = content.replace(/<div[^>]*>水稻收获与储存<\/div>/g, '<div class="green-block">水稻收获与储存</div>')
    
    // 增强注意事项样式
    content = content.replace(/<div[^>]*>\s*\[注意事项\]\s*(.*?)<\/div>/gs, '<div class="notice-box"><div class="notice-content">$1</div></div>')
    
    // 识别H3标题并在其后插入对应的图片
    if (knowledgeImages.value && knowledgeImages.value.length > 0) {
      // 为每个标题后添加对应的图片
      const titleRegex = /<h[1-3][^>]*>(.*?)<\/h[1-3]>/g
      let titleMatch
      let imageIndex = 0
      let titleCount = 0
      let imageHtml = ''
      let matches = []
      
      // 先计算有多少个标题
      while ((titleMatch = titleRegex.exec(content)) !== null) {
        matches.push({
          fullMatch: titleMatch[0],
          title: titleMatch[1],
          index: titleMatch.index
        })
      }
      
      // 处理每个标题，插入相应的图片
      for (let i = matches.length - 1; i >= 0; i--) {
        if (imageIndex < knowledgeImages.value.length) {
          const image = knowledgeImages.value[imageIndex]
          console.log("image打打符：", image)
          // 根据是否有真实图片URL来决定显示方式
          imageHtml = image.url? 
          `
            <div class="content-image-wrapper">
              <div class="content-image-real" style="background-image: url('${image.url}');">
                
              </div>
            </div>
          ` : 
          `
            <div class="content-image-wrapper">
              <div class="content-image" style="background-color: ${image.color || '#8BC34A'};">
                <div class="image-text">${image.title || '农业知识图解'}</div>
              </div>
            </div>
          `
          content = content.substring(0, matches[i].index + matches[i].fullMatch.length) + imageHtml + content.substring(matches[i].index + matches[i].fullMatch.length)
          imageIndex++
        }
      }
    }
    
    return content
  }
  
  // 如果是纯文本内容，则增强格式化
  // 替换\n为<br>标签
  content = content.replace(/\n/g, '<br>')
  
  // 识别章节标题
  content = content.replace(/([一二三四五六七八九十])、\s*([^\n<]+)/g, '<h3>$1、$2</h3>')
  
  // 识别注意事项段落
  content = content.replace(/\[注意事项\]\s*(.*?)(\n|$)/g, '<div class="notice-box"><div class="notice-content">$1</div></div>')
  
  // 在标题后插入对应图片
  if (knowledgeImages.value && knowledgeImages.value.length > 0) {
    const sections = content.split(/<h3>/)
    let newContent = sections[0] // 保留第一部分
    
    for (let i = 1; i < sections.length; i++) {
      newContent += '<h3>' + sections[i]
      
      // 如果有对应的图片，在标题后插入图片
      if (i - 1 < knowledgeImages.value.length) {
        const image = knowledgeImages.value[i - 1]
        console.log("image打打符：", image)
        // 根据是否有真实图片URL来决定显示方式
        newContent += image.url ? 
        `
          <div class="content-image-wrapper">
            <div class="content-image-real" style="background-image: url('${image.url}');">
              <div class="image-text-overlay">
                <div class="image-text">${image.title || '农业知识图解'}</div>
              </div>
            </div>
          </div>
        ` : 
        `
          <div class="content-image-wrapper">
            <div class="content-image" style="background-color: ${image.color || '#8BC34A'};">
              <div class="image-text">${image.title || '农业知识图解'}</div>
            </div>
          </div>
        `
      }
    }
    
    content = newContent
  }
  
  // 包装段落
  content = `<div style="font-size: 30rpx; line-height: 1.8; color: #333; margin-bottom: 20rpx;">${content}</div>`
  
  return content
})

// 获取文章详情数据
const fetchArticleDetail = async () => {
  loading.value = true
  
  try {
    await getKnowledgeDetail({
      id: id.value,
      type: type.value
    }).then(response => {
      if (response.data.data && response.data.code === 200) {
        articleInfo.value = response.data.data
        
        // 设置默认的点赞和收藏状态
        articleInfo.value.liked = false
        articleInfo.value.collected = false
        
        // 处理文章关联的图片
        if (articleInfo.value.knowledgeImage && articleInfo.value.knowledgeImage.length > 0) {
          articleInfo.value.knowledgeImage.forEach(image => {
            // 检查 imageType 是否为 'carousel'
            if (image.imageType === 'carousel') {
              // 如果是，将该元素添加到 carouselImages 数组中
              carouselImages.value.push(image)
            } else {
              knowledgeImages.value.push(image)
            }
            console.log("carouselImages", carouselImages.value)
          })
          console.log('文章图片数据:', knowledgeImages.value)
        }
        // 增加浏览量
        updateViewCount()
      } else {
        uni.showToast({
          title: (response.data && response.data.message) || '获取文章详情失败',
          icon: 'none'
        })
      }
    }).catch(err => [err, null])
  } catch (error) {
    console.error('获取文章详情失败:', error)
    uni.showToast({
      title: '网络异常，请稍后再试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 更新浏览量
const updateViewCount = async () => {
  try {
    getKnowledgeView({
      id: id.value,
      type: type.value
    }).then(res => {
      if (res.data && res.data.code === 200) {
        // 记录已更新的文章ID和新阅读量
        if (articleInfo.value) {
          // 增加阅读量计数，假设API成功更新了阅读量
          articleInfo.value.viewCount = (articleInfo.value.viewCount || 0) + 1
          
          // 发送全局事件通知列表页更新阅读量
          uni.$emit('updateArticleViewCount', {
            id: id.value,
            type: type.value,
            viewCount: articleInfo.value.viewCount
          })
        }
      }
    })
  } catch (error) {
    console.error('更新浏览量失败:', error)
  }
}

// 处理点赞
const handleLike = async () => {
  try {
    const action = articleInfo.value.liked ? 'unlike' : 'like'
    
    const [error, res] = await uni.request({
      url: `http://localhost:8080/knowledge/${action}`, // 替换为实际的API地址
      method: 'POST',
      data: {
        id: id.value,
        type: type.value
      }
    }).catch(err => [err, null])
    
    const response = res || {}
    
    if (response.data && response.data.code === 0) {
      articleInfo.value.liked = !articleInfo.value.liked
    } else {
      uni.showToast({
        title: (response.data && response.data.message) || '操作失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
    uni.showToast({
      title: '网络异常，请稍后再试',
      icon: 'none'
    })
  }
}

// 处理收藏
const handleCollect = async () => {
  try {
    const action = articleInfo.value.collected ? 'uncollect' : 'collect'
    
    const [error, res] = await uni.request({
      url: `http://localhost:8080/knowledge/${action}`, // 替换为实际的API地址
      method: 'POST',
      data: {
        id: id.value,
        type: type.value
      }
    }).catch(err => [err, null])
    
    const response = res || {}
    
    if (response.data && response.data.code === 0) {
      articleInfo.value.collected = !articleInfo.value.collected
    } else {
      uni.showToast({
        title: (response.data && response.data.message) || '操作失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    uni.showToast({
      title: '网络异常，请稍后再试',
      icon: 'none'
    })
  }
}

// 播放视频
const playVideo = () => {
  videoPlaying.value = true
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 获取随机颜色
const getRandomColor = () => {
  const colors = ['#8BC34A', '#4CAF50', '#7CB342', '#689F38', '#33691E']
  return colors[Math.floor(Math.random() * colors.length)]
}

// 根据类型获取图标
const getIconByType = () => {
  if (type.value === 'tech') {
    return '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"></path><path d="M12 6a1 1 0 0 0-1 1v5a1 1 0 0 0 .55.89l4 2a1 1 0 0 0 .9-1.78L13 11.28V7a1 1 0 0 0-1-1z"></path></svg>'
  } else {
    return '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12h-4 M17 12l-3-3 M17 12l-3 3 M3 6h10 M13 6l-3-3 M13 6l-3 3 M3 18h10 M13 18l-3-3 M13 18l-3 3"></path></svg>'
  }
}

const goBack = () => {
  uni.navigateBack()
}

const scrollToTop = () => {
  setTimeout(() => {
    uni.pageScrollTo({ scrollTop: 0, duration: 0 })
  }, 50)
}

const handleShare = () => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  })
}

const handleSwiperChange = (e) => {
  currentSwiperIndex.value = e.detail.current
}

// uni-app 生命周期钩子
onLoad((options) => {
  // 获取传递的参数
  id.value = Number(options.id)
  type.value = options.type
  
  // 检测是否在H5环境中运行
  // #ifdef H5
  isH5.value = true
  // #endif
  console.log("isH5", isH5.value)
  
  // 设置导航栏标题
  uni.setNavigationBarTitle({
    title: type.value === 'tech' ? '农技知识' : '政策解读'
  })
  
  // 加载文章详情
  fetchArticleDetail()
})

onNavigationBarButtonTap((e) => {
  if (e.index === 0) {
    goBack()
  }
})
</script>

<style>
/* 字体图标 */
@font-face {
  font-family: 'iconfont';
  src: url('https://at.alicdn.com/t/font_3442238_cosd6rj55jg.ttf') format('truetype');
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.icon, .view-icon, .play-icon, .action-icon, .top-icon {
  font-family: 'iconfont';
}

.material-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 50rpx;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  color: #4CAF50;
}

/* 容器样式 */
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  position: relative;
  padding-bottom: 120rpx;
  padding-top: 90rpx; /* 为H5导航栏留出空间 */
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.spinner {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid rgba(77, 201, 113, 0.2);
  border-radius: 50%;
  border-top-color: #4dc971;
  animation: spin 0.8s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* 删除自定义导航栏样式 */
.custom-navbar {
  display: none;
}

.navbar-left, .back-icon, .navbar-title, .navbar-right, .arrow-left {
  display: none;
}

/* 文章容器 */
.article-container {
  background-color: #fff;
  border-radius: 0;
  overflow: hidden;
}

/* 封面图轮播 */
.cover-swiper {
  width: 100%;
  height: 420rpx;
  position: relative;
  background-color: #4CAF50;
}

.swiper-item-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background-color: #4CAF50;
}

.swiper-image {
  width: 100%;
  height: 100%;
  display: block;
}
.swiper-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40rpx 30rpx;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  color: #fff;
  height: 100%;
}

.swiper-title {
  font-size: 42rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  max-width: 80%;
  line-height: 1.3;
}

.swiper-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  background-color: rgba(255,255,255,0.2);
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

/* 文章头部信息 */
.article-header {
  padding: 30rpx 30rpx 0;
}

.article-title {
  font-size: 42rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 20rpx;
}

.article-meta {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.source {
  font-size: 24rpx;
  color: #666;
}

.dot {
  margin: 0 10rpx;
  color: #999;
}

.date {
  font-size: 24rpx;
  color: #999;
}

.views {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.view-icon {
  font-size: 24rpx;
  color: #999;
  margin-right: 6rpx;
}

.view-count {
  font-size: 24rpx;
  color: #999;
}

/* 文章内容 */
.article-content {
  padding: 0 30rpx 40rpx;
}

/* 富文本内容样式 */
.article-content >>> h3,
.article-content >>> h1,
.article-content >>> h2 {
  font-size: 34rpx;
  font-weight: bold;
  margin: 30rpx 0 20rpx;
  color: #333;
}

.article-content >>> p {
  font-size: 30rpx;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20rpx;
}

/* 分节样式 */
.article-content >>> h3:first-child,
.article-content >>> h2:first-child,
.article-content >>> h1:first-child {
  margin-top: 10rpx;
}

/* 章节标题 */
.article-content >>> h3 {
  color: #4CAF50;
  font-size: 32rpx;
  font-weight: bold;
  margin: 40rpx 0 20rpx;
  position: relative;
  padding-left: 20rpx;
}

.article-content >>> h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8rpx;
  bottom: 8rpx;
  width: 6rpx;
  background-color: #4CAF50;
  border-radius: 3rpx;
}

/* 注意事项样式 */
.article-content >>> .notice-box {
  background-color: #F8F9E5;
  border-left: 10rpx solid #8BC34A;
  padding: 0;
  margin: 30rpx 0;
  border-radius: 6rpx;
  position: relative;
}

.article-content >>> .notice-content {
  padding: 20rpx;
  font-size: 28rpx;
  color: #555;
  line-height: 1.6;
}

.article-content >>> .notice-content::before {
  content: '[注意事项]';
  display: block;
  font-weight: bold;
  color: #5C8D2A;
  margin-bottom: 10rpx;
}

/* 旧的样式保留兼容性 */
.article-content >>> blockquote {
  background-color: #F8F9E5;
  border-left: 10rpx solid #8BC34A;
  padding: 20rpx;
  margin: 20rpx 0;
  border-radius: 6rpx;
}

/* 绿色背景区域 */
.article-content >>> .green-block {
  background-color: #4CAF50;
  color: white;
  padding: 30rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 0;
  border-radius: 6rpx;
}

/* 文章内容图片容器 */
.article-content >>> .content-image-wrapper {
  margin: 20rpx 0 30rpx;
  width: 100%;
}

.article-content >>> .content-image {
  background-color: #8BC34A;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 6rpx;
  position: relative;
  overflow: hidden;
}

.article-content >>> .content-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  background-size: 50px 50px;
  opacity: 0.2;
}

.article-content >>> .image-text {
  font-size: 36rpx;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 2;
}

/* 真实图片样式 */
.article-content >>> .content-image-real {
  height: 200rpx;
  background-size: cover;
  background-position: center;
  border-radius: 6rpx;
  position: relative;
  overflow: hidden;
}

.article-content >>> .image-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 确保内容不超出容器 */
.article-content >>> img {
  max-width: 100%;
  height: auto;
}

/* 视频容器 */
.video-container {
  margin: 0 30rpx 40rpx;
  border-radius: 0;
  overflow: hidden;
  background-color: #fff;
}

.video-player {
  width: 100%;
  height: 420rpx;
}

.video-poster {
  position: relative;
  width: 100%;
  height: 380rpx;
}

.video-color-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.video-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, 
    rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  background-size: 50px 50px;
}

.video-label {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 5;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120rpx;
  height: 120rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
  border: 4rpx solid rgba(255, 255, 255, 0.8);
}

.triangle-play {
  width: 0;
  height: 0;
  border-top: 26rpx solid transparent;
  border-bottom: 26rpx solid transparent;
  border-left: 40rpx solid #fff;
  margin-left: 10rpx;
}

.video-duration {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  padding: 6rpx 12rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 22rpx;
  border-radius: 4rpx;
}

.video-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  padding: 20rpx;
  display: block;
}

/* 底部功能区 */
.footer-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 99;
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}

.action-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6rpx;
}

.action-text {
  font-size: 24rpx;
  color: #4CAF50;
  font-weight: 500;
}

.action-button:active {
  opacity: 0.7;
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: rgba(46, 125, 50, 0.9);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

.top-arrow {
  width: 20rpx;
  height: 20rpx;
  border-top: 4rpx solid #fff;
  border-left: 4rpx solid #fff;
  transform: rotate(45deg);
  margin-bottom: 6rpx;
}

.top-text {
  color: #fff;
  font-size: 22rpx;
}

.swiper-counter {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  padding: 6rpx 12rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22rpx;
  border-radius: 20rpx;
  z-index: 10;
}

.pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, 
    rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  background-size: 50px 50px;
}

.agri-icon {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  width: 120rpx;
  height: 120rpx;
  z-index: 5;
}

.agri-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.section-image {
  margin: 20rpx 0;
  width: 100%;
}

.color-image {
  width: 100%;
  height: 300rpx;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.color-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, 
    rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  background-size: 50px 50px;
  opacity: 0.2;
}

.image-label {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 5;
}

/* 删除浮动返回按钮样式 */
.float-back-button {
  position: fixed;
  top: 30rpx;
  left: 30rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.float-back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* H5导航栏样式 */
.h5-custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.h5-navbar-left {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h5-back-icon {
  font-size: 40rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h5-navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.h5-navbar-right {
  width: 60rpx;
}

.h5-arrow-left {
  width: 24rpx;
  height: 24rpx;
  border-top: 4rpx solid #333;
  border-left: 4rpx solid #333;
  transform: rotate(-45deg);
}
</style>