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;' : ''">
      <!-- 封面图轮播 -->
      <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">水稻高产栽培技术指南</text>
        <view class="article-meta">
          <text class="source">农业技术研究院</text>
          <text class="dot">·</text>
          <text class="date">2024-05-25</text>
          <view class="views">
            <text class="view-icon">&#xe614;</text>
            <text class="view-count">3542</text>
          </view>
        </view>
      </view>
      
      <!-- 文章正文 -->
      <view class="article-content">
        <view class="content-section">
          <text class="paragraph">
            水稻是我国最重要的粮食作物之一，提高水稻产量对保障国家粮食安全具有重要意义。本文将详细介绍水稻高产栽培的关键技术要点，帮助农户实现增产增收。
          </text>
        </view>
        
        <view class="content-section">
          <text class="section-title">一、选种与育苗</text>
          <text class="paragraph">
            选用适合当地气候条件和土壤特性的优质稻种非常重要。推荐选择抗病性强、适应性广的品种，如"中优84"、"甬优12"等。在育苗过程中，需控制好温度、湿度，使用优质基质，确保秧苗健壮。
          </text>
          <view class="section-image">
            <view class="color-image" style="background-color: #8BC34A;">
              <text class="image-label">水稻优质种子</text>
            </view>
          </view>
        </view>
        
        <view class="content-section">
          <text class="section-title">二、水肥管理</text>
          <text class="paragraph">
            水稻生长对水分需求较高，但不同生长期对水分的需求不同。插秧后需浅水促根，分蘖期间歇灌溉，抽穗期保持水层，成熟期控制排水。肥料使用应遵循"控氮、增磷、补钾"原则。
          </text>
          <view class="section-image">
            <view class="color-image" style="background-color: #4CAF50;">
              <text class="image-label">水稻秧苗培育</text>
            </view>
          </view>
        </view>
        
        <view class="content-section">
          <text class="section-title">三、病虫害防治</text>
          <text class="paragraph">
            常见病害有稻瘟病、纹枯病、稻曲病等，虫害有稻飞虱、稻纵卷叶螟等。建议采用"预防为主，综合防治"的方法，适时喷洒药剂，加强田间管理。
          </text>
          <view class="note-box">
            <text class="note-title">【注意事项】</text>
            <text class="note-content">
              农药使用需遵循安全间隔期规定，减少农药残留，确保水稻品质安全。选择晴天无风时喷药，穿戴好防护装备。
            </text>
          </view>
          <view class="section-image">
            <view class="color-image" style="background-color: #7CB342;">
              <text class="image-label">病虫害防治</text>
            </view>
          </view>
        </view>
        
        <view class="content-section">
          <text class="section-title">四、收获与储存</text>
          <text class="paragraph">
            水稻成熟度达到85%以上时即可收割。收割后应及时晾晒至含水量14%以下，再进行储存。储存环境应保持干燥、通风、无虫害。
          </text>
          <view class="section-image">
            <view class="color-image" style="background-color: #689F38;">
              <text class="image-label">水稻收获与储存</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 视频示例 -->
      <view class="video-container">
        <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">12:30</text>
        </view>
        <text class="video-title">水稻高产技术实操演示</text>
      </view>
    </view>
    
    <!-- 底部功能区 -->
    <view class="footer-action">
      <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">点赞</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">收藏</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>
export default {
  data() {
    return {
      title: "农业知识",
      articleInfo: {
        id: '1',
        title: '水稻高产栽培技术指南',
        source: '农业技术研究院',
        publishDate: '2024-05-25',
        views: 3542,
        liked: false,
        collected: false
      },
      carouselImages: [
        // 使用内联颜色块代替图片，确保正常显示
        {
          color: '#8BC34A',
          title: '水稻高产栽培技术 - 1',
          subtitle: '绿色农业科技',
          icon: '<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>'
        },
        {
          color: '#4CAF50',
          title: '水稻高产栽培技术 - 2',
          subtitle: '提高水稻产量的关键',
          icon: '<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>'
        },
        {
          color: '#7CB342',
          title: '水稻高产栽培技术 - 3',
          subtitle: '科学种植方法',
          icon: '<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>'
        },
        {
          color: '#689F38',
          title: '水稻高产栽培技术 - 4',
          subtitle: '现代农业技术',
          icon: '<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 2v8"></path><path d="M5 10l3.5 3.5"></path><path d="M19 10l-3.5 3.5"></path><path d="M6.44 20l2.26-2.26a5 5 0 0 1 6.6 0L17.56 20"></path></svg>'
        },
        {
          color: '#33691E',
          title: '水稻高产栽培技术 - 5',
          subtitle: '农民增收的保障',
          icon: '<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 22a10 10 0 1 1 10-10 10 10 0 0 1-10 10z"></path><path d="M12 8v8"></path><path d="M8 12h8"></path></svg>'
        }
      ],
      currentSwiperIndex: 0,
      isH5: false // 是否是H5环境
    }
  },
  onLoad() {
    // 检测是否在H5环境中运行
    // #ifdef H5
    this.isH5 = true;
    // #endif
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: '农业知识'
    });
  },
  onNavigationBarButtonTap(e) {
    if (e.index === 0) {
      this.goBack();
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    handleLike() {
      this.articleInfo.liked = !this.articleInfo.liked;
      // TODO: 调用接口更新点赞状态
    },
    handleCollect() {
      this.articleInfo.collected = !this.articleInfo.collected;
      // TODO: 调用接口更新收藏状态
    },
    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;
}

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

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

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

.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);
}
</style>