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="article-container" :style="isH5 ? 'margin-top: 90rpx;' : ''">
      <!-- 加载状态显示 -->
      <view class="loading-container" v-if="loading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>

      <!-- 内容区域 -->
      <block v-else>
        <!-- 封面图轮播 -->
        <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 articleImages" :key="slide.id" v-if="articleImages.length > 0">
            <view class="swiper-item-container" :style="{ backgroundColor: slide.color || '#4CAF50' }">
              <image class="swiper-image" :src="slide.url" mode="aspectFill" v-if="slide.url"></image>
              <view class="pattern-overlay"></view>
              <view class="swiper-overlay">
                <text class="swiper-title">{{ slide.title || articleInfo.title }}</text>
                <text class="swiper-subtitle">{{ slide.subtitle || '' }}</text>
              </view>
            </view>
          </swiper-item>
          
          <!-- 没有图片时使用生成的轮播图 -->
          <swiper-item v-for="(slide, index) in carouselImages" :key="slide.id" v-if="articleImages.length === 0">
            <view class="swiper-item-container" :style="{ backgroundColor: slide.color || '#4CAF50' }">
              <view class="pattern-overlay"></view>
              <view class="agri-icon" v-html="slide.icon"></view>
              <view class="swiper-overlay">
                <text class="swiper-title">{{ slide.title || articleInfo.title }}</text>
                <text class="swiper-subtitle">{{ slide.subtitle || '' }}</text>
              </view>
            </view>
          </swiper-item>
        </swiper>
        <view class="swiper-counter" v-if="(articleImages.length > 0 && articleImages.length > 1) || (articleImages.length === 0 && carouselImages.length > 0)">
          <text>{{ currentSwiperIndex + 1 }}/{{ articleImages.length > 0 ? articleImages.length : 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">
              <!-- <text class="view-icon">&#xe614;</text> -->
			  <image src="../../static/icons/yidu.png" mode="aspectFit"></image>
              <text class="view-count">{{ articleInfo.viewCount }}</text>
            </view>
          </view>
        </view>
        
        <!-- 文章正文 -->
        <view class="article-content">
          <!-- 如果有HTML内容则渲染HTML内容 -->
          <rich-text v-if="articleInfo.content" :nodes="processHtmlContent(articleInfo.content)"></rich-text>
          
          <!-- 无内容时的备用内容 -->
          <view v-else class="content-section">
            <text class="paragraph">
              暂无详细内容
            </text>
          </view>
        </view>
        
        <!-- 视频示例 -->
        <view class="video-container" v-if="articleInfo.contentType === 'video' && articleInfo.videoUrl">
          <video 
            class="article-video"
            :src="articleInfo.videoUrl"
			autoplay=true
            controls
            object-fit="contain"
            poster=""
          ></video>
          <text class="video-title">{{ articleInfo.title }}</text>
        </view>
        
        <!-- 视频预览 -->
        <view class="video-container" v-else-if="articleInfo.contentType === 'video'">
          <view class="video-poster">
            <view class="video-color-bg" style="background-color: #33691E;">
              <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>
      </block>
    </view>
    
    <!-- 底部功能区 -->
    <!-- <view class="footer-action" v-if="!loading">
      <view class="action-button like" @click="handleLike">
        <view class="action-icon-wrapper">
          <text v-if="articleInfo.isLiked" class="material-icon">&#xe87d;</text>
          <text v-else class="material-icon">&#xe87e;</text>
        </view>
        <text class="action-text">{{ articleInfo.isLiked ? '已点赞' : '点赞' }}</text>
      </view>
      <view class="action-button collect" @click="handleCollect">
        <view class="action-icon-wrapper">
          <text v-if="articleInfo.isFavorite" class="material-icon">&#xe838;</text>
          <text v-else class="material-icon">&#xe83a;</text>
        </view>
        <text class="action-text">{{ articleInfo.isFavorite ? '已收藏' : '收藏' }}</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">
      <view class="top-arrow"></view>
      <text class="top-text">顶部</text>
    </view>
  </view>
</template>

<script>
import { getArticleDetail, getArticleImages, likeArticle, unlikeArticle, favoriteArticle, unfavoriteArticle } from '@/api/services/knowledge.js';
import api from "@/config/api.js";
export default {
  data() {
    return {
	  baseUrl:api.im,
      title: "农业知识",
      // 文章ID
      id: null,
      // 文章类型
      type: null,
      // 加载状态
      loading: true,
      // 文章信息
      articleInfo: {
        id: '',
        title: '',
        source: '',
        publishDate: '',
        viewCount: 0,
        content: '',
        contentType: 'article',
        videoUrl: '',
        duration: '',
        isLiked: false,
        isFavorite: false
      },
      // 文章相关图片
      articleImages: [],
      // 轮播图（当没有真实图片时使用）
      carouselImages: [],
      currentSwiperIndex: 0,
      isH5: false // 是否是H5环境
    }
  },
  onLoad(options) {
	  console.log("this...",this.baseUrl);
	  console.log("process.env.NODE_ENV",process.env.NODE_ENV);
    // 检测是否在H5环境中运行
    // #ifdef H5
    this.isH5 = true;
    // #endif
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: '农业知识'
    });
    
    // 获取参数
    this.id = options.id;
    this.type = options.type;
    
    // 加载文章详情
    this.loadArticleDetail();
  },
  onNavigationBarButtonTap(e) {
    if (e.index === 0) {
      this.goBack();
    }
  },
  methods: {
    // 加载文章详情
    async loadArticleDetail() {
      if (!this.id) {
        uni.showToast({
          title: '文章ID不能为空',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.loading = true;
        const result = await getArticleDetail(this.id);
        
        if (result.data.code === 200 && result.data.data) {
          // 设置文章信息
          this.articleInfo = result.data.data;
		  this.articleInfo.videoUrl = this.baseUrl + result.data.data.videoUrl
          
          // 加载文章相关图片
          await this.loadArticleImages();
          
          // 如果没有相关图片，生成默认轮播图数据
          if (this.articleImages.length === 0) {
            this.generateCarouselImages();
          }
        } else {
          uni.showToast({
            title: result.data.msg || '获取文章详情失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取文章详情失败:', error);
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 加载文章相关图片
    async loadArticleImages() {
      try {
        const result = await getArticleImages(this.id);
        if (result.data.code === 200 && result.data.data) {
          this.articleImages = result.data.data;
        } else {
          console.log('获取文章图片失败:', result.data.msg);
          this.articleImages = [];
        }
      } catch (error) {
        console.error('获取文章图片失败:', error);
        this.articleImages = [];
      }
    },
    
    // 生成默认轮播图数据
    generateCarouselImages() {
      // 如果没有内容，生成基于文章类型和内容的默认轮播图
      const colors = ['#8BC34A', '#4CAF50', '#7CB342', '#689F38', '#33691E'];
      const icons = [
        '<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>',
        '<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>',
        '<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="M3 3v18h18"></path><path d="M18.5 3a2.5 2.5 0 0 1 0 5H12v6.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9"></path></svg>',
      ];
      
      // 根据文章类型生成不同的默认轮播图
      let subtitles = [];
      if (this.type === 'tech') {
        subtitles = ['科学种植技术', '提高农作物产量', '农业技术创新', '绿色生态农业'];
      } else {
        subtitles = ['政策解读要点', '补贴申请指南', '农业发展方向', '乡村振兴战略'];
      }
      
      // 生成3个轮播图
      this.carouselImages = [];
      for (let i = 0; i < 3; i++) {
        this.carouselImages.push({
          color: colors[i % colors.length],
          title: this.articleInfo.title,
          subtitle: subtitles[i % subtitles.length],
          icon: icons[i % icons.length]
        });
      }
    },
    
    // 格式化日期
    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')}`;
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 滚动到顶部
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    
    // 点赞/取消点赞
    async handleLike() {
      try {
        if (this.articleInfo.isLiked) {
          // 已点赞，执行取消点赞
          const result = await unlikeArticle(this.id);
          if (result.data.code === 200) {
            this.articleInfo.isLiked = false;
            uni.showToast({
              title: '取消点赞成功',
              icon: 'none'
            });
          }
        } else {
          // 未点赞，执行点赞
          const result = await likeArticle(this.id);
          if (result.data.code === 200) {
            this.articleInfo.isLiked = true;
            uni.showToast({
              title: '点赞成功',
              icon: 'none'
            });
          }
        }
      } catch (error) {
        console.error('操作失败:', error);
        if (error.response && error.response.status === 401) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          });
        } else {
          uni.showToast({
            title: '网络异常，请稍后重试',
            icon: 'none'
          });
        }
      }
    },
    
    // 收藏/取消收藏
    async handleCollect() {
      try {
        if (this.articleInfo.isFavorite) {
          // 已收藏，执行取消收藏
          const result = await unfavoriteArticle(this.id);
          if (result.data.code === 200) {
            this.articleInfo.isFavorite = false;
            uni.showToast({
              title: '取消收藏成功',
              icon: 'none'
            });
          }
        } else {
          // 未收藏，执行收藏
          const result = await favoriteArticle(this.id);
          if (result.data.code === 200) {
            this.articleInfo.isFavorite = true;
            uni.showToast({
              title: '收藏成功',
              icon: 'none'
            });
          }
        }
      } catch (error) {
        console.error('操作失败:', error);
        if (error.response && error.response.status === 401) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          });
        } else {
          uni.showToast({
            title: '网络异常，请稍后重试',
            icon: 'none'
          });
        }
      }
    },
    
    // 分享
    handleShare() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
    },
    
    // 处理轮播图切换
    handleSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    },
    
    // 处理HTML内容
    processHtmlContent(content) {
      if (!content) return '';
      
      // 确保内容是字符串
      let htmlContent = content.toString();
      
      // 如果内容不是HTML格式，尝试解析
      if (!htmlContent.includes('<div class="content-section">')) {
        try {
          // 尝试解码可能被转义的HTML
          htmlContent = htmlContent.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&amp;/g, '&');
        } catch (e) {
          console.error('HTML内容格式化失败:', e);
        }
      }
      
      return htmlContent;
    }
  }
}
</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;
}

/* 删除自定义导航栏样式 */
.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;
}

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

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

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

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

.swiper-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 文章头部信息 */
.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;
}
.views image {
	padding-right: 6px;
	width: 16px;  /* 设置图标宽度 */
	height: 16px; /* 设置图标高度 */
	vertical-align: middle;
}

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

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

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

.content-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #2e7d32;
  margin-bottom: 20rpx;
  display: block;
}

.paragraph {
  font-size: 30rpx;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.content-image {
  width: 100%;
  margin: 20rpx 0;
  border-radius: 12rpx;
}

.image-caption {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  display: block;
  margin-top: 10rpx;
}

/* 注意事项盒子 */
.note-box {
  background-color: #f1f8e9;
  border-left: 8rpx solid #8bc34a;
  padding: 20rpx;
  border-radius: 8rpx;
  margin: 20rpx 0;
}

.note-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #558b2f;
  margin-bottom: 10rpx;
  display: block;
}

.note-content {
  font-size: 26rpx;
  line-height: 1.6;
  color: #689f38;
  display: block;
}

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

.article-video {
  width: 100%;
  height: 500rpx;
}

.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: 110rpx;
  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);
}

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

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid rgba(76, 175, 80, 0.2);
  border-radius: 50%;
  border-top: 6rpx solid #4CAF50;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}
</style>