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>
    <!-- 加载中状态 -->
    <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 }">
            <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">{{ formatDate(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>
	import {getKnowledgeDetail,getKnowledgeView} from "@/api/services/knowledge.js";
export default {
  data() {
    return {
      title: "农业知识",
      loading: true,
      articleInfo: null,
      knowledgeImages: [], // 文章关联的图片
      currentSwiperIndex: 0,
      isH5: false, // 是否是H5环境
      videoPlaying: false,
      id: null,
      type: '',
	  carouselImages: [],
	  currentSwiperIndex: 0,
    };
  },
  computed: {
    processedContent() {
      console.log("this.articleInfo",this.articleInfo);
      // 检查文章内容是否存在于article_content或content_category字段
      if (!this.articleInfo) return '';
      
      // 优先使用content_category字段，如果不存在则尝试使用article_content字段
      let content = this.articleInfo.content_category || this.articleInfo.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 (this.knowledgeImages && this.knowledgeImages.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 < this.knowledgeImages.length) {
              const image = this.knowledgeImages[imageIndex];
              // 根据是否有真实图片URL来决定显示方式
              imageHtml = image.url && !image.url.includes('example.com') ? 
              `
                <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 = 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 (this.knowledgeImages && this.knowledgeImages.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 < this.knowledgeImages.length) {
            const image = this.knowledgeImages[i - 1];
            // 根据是否有真实图片URL来决定显示方式
            newContent += image.url && !image.url.includes('example.com') ? 
            `
              <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;
    }
  },
  onLoad(options) {
    // 获取传递的参数
    this.id = Number(options.id);
    this.type = options.type;
    
    // 检测是否在H5环境中运行
    // #ifdef H5
    this.isH5 = true;
    // #endif
	console.log("this.isH5",this.isH5);
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: this.type === 'tech' ? '农技知识' : '政策解读'
    });
    
    // 加载文章详情
    this.fetchArticleDetail();
  },
  onNavigationBarButtonTap(e) {
    if (e.index === 0) {
      this.goBack();
    }
  },
  methods: {
    // 获取文章详情数据
    async fetchArticleDetail() {
      this.loading = true;
      
      try {
       await getKnowledgeDetail({
            id: this.id,
            type: this.type
          }).then(response =>{
		   if (response.data.data && response.data.code === 200) {
		     this.articleInfo = response.data.data;
		     
		     // 设置默认的点赞和收藏状态
		     this.articleInfo.liked = false;
		     this.articleInfo.collected = false;
		     
		     // 处理文章关联的图片
		     if (this.articleInfo.knowledgeImage && this.articleInfo.knowledgeImage.length > 0) {
			this.articleInfo.knowledgeImage.forEach(image => {
			    // 检查 imageType 是否为 'carousel'
			    if (image.imageType === 'carousel') {
			        // 如果是，将该元素添加到 carouselImages 数组中
			        this.carouselImages.push(image);
			    }else{
					this.knowledgeImages.push(image)
				}
			});
		       console.log('文章图片数据:', this.knowledgeImages);
		     }
		     // 增加浏览量
		     this.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 {
        this.loading = false;
      }
    },
    
    // 更新浏览量
    async updateViewCount() {
      try {
		  getKnowledgeView({
            id: this.id,
            type: this.type
          }).then(res=>{
            if (res.data && res.data.code === 200) {
              // 记录已更新的文章ID和新阅读量
              if (this.articleInfo) {
                // 增加阅读量计数，假设API成功更新了阅读量
                this.articleInfo.viewCount = (this.articleInfo.viewCount || 0) + 1;
                
                // 发送全局事件通知列表页更新阅读量
                uni.$emit('updateArticleViewCount', {
                  id: this.id,
                  type: this.type,
                  viewCount: this.articleInfo.viewCount
                });
              }
            }
		  })

      } catch (error) {
        console.error('更新浏览量失败:', error);
      }
    },
    
    // 处理点赞
    async handleLike() {
      try {
        const action = this.articleInfo.liked ? 'unlike' : 'like';
        
        const [error, res] = await uni.request({
          url: `http://localhost:8080/knowledge/${action}`, // 替换为实际的API地址
          method: 'POST',
          data: {
            id: this.id,
            type: this.type
          }
        }).catch(err => [err, null]);
        
        const response = res || {};
        
        if (response.data && response.data.code === 0) {
          this.articleInfo.liked = !this.articleInfo.liked;
        } else {
          uni.showToast({
            title: (response.data && response.data.message) || '操作失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('点赞操作失败:', error);
        uni.showToast({
          title: '网络异常，请稍后再试',
          icon: 'none'
        });
      }
    },
    
    // 处理收藏
    async handleCollect() {
      try {
        const action = this.articleInfo.collected ? 'uncollect' : 'collect';
        
        const [error, res] = await uni.request({
          url: `http://localhost:8080/knowledge/${action}`, // 替换为实际的API地址
          method: 'POST',
          data: {
            id: this.id,
            type: this.type
          }
        }).catch(err => [err, null]);
        
        const response = res || {};
        
        if (response.data && response.data.code === 0) {
          this.articleInfo.collected = !this.articleInfo.collected;
        } else {
          uni.showToast({
            title: (response.data && response.data.message) || '操作失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('收藏操作失败:', error);
        uni.showToast({
          title: '网络异常，请稍后再试',
          icon: 'none'
        });
      }
    },
    
    // 播放视频
    playVideo() {
      this.videoPlaying = true;
    },
    
    // 格式化日期
    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')}`;
    },
    
    // 获取随机颜色
    getRandomColor() {
      const colors = ['#8BC34A', '#4CAF50', '#7CB342', '#689F38', '#33691E'];
      return colors[Math.floor(Math.random() * colors.length)];
    },
    
    // 根据类型获取图标
    getIconByType() {
      if (this.type === '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>';
      }
    },
    
    goBack() {
      uni.navigateBack();
    },
    
    scrollToTop() {
		setTimeout(() => {
			uni.pageScrollTo({scrollTop: 0, duration: 0});
		}, 50);
    },
    
    handleShare() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
    },
    
    handleSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    }
  }
}
</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;
}

/* 加载状态 */
.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-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, .float-back-icon {
  display: none;
}

/* 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>