You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
4.8 KiB
133 lines
4.8 KiB
<view class="home-container">
|
|
|
|
<view class="box">
|
|
<!-- 定位 -->
|
|
<view class="orientation">
|
|
<image src="/pages/images/dw.png" mode="" />
|
|
<view>{{county}}</view>
|
|
</view>
|
|
|
|
<!-- 轮播图区域 -->
|
|
<view class="swiper-container">
|
|
<swiper class="custom-swiper" indicator-dots="{{false}}" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#4CAF50" autoplay="{{true}}" interval="5000" duration="500" circular="{{true}}" current="{{currentSwiper}}" bindchange="onSwiperChange" style="height: 360rpx;">
|
|
<block wx:for="{{swiperList}}" wx:key="id">
|
|
<swiper-item>
|
|
<view class="swiper-item {{item.isActive ? 'active' : ''}}" data-id="{{item.id}}" catchtap="onSwiperTap">
|
|
<image src="{{item.image}}" class="swiper-image" mode="aspectFill" />
|
|
<view class="swiper-mask"></view>
|
|
<view class="swiper-content">
|
|
<text class="swiper-tag">{{item.tag}}</text>
|
|
<text class="swiper-title">{{item.title}}</text>
|
|
<text class="swiper-desc">{{item.desc}}</text>
|
|
</view>
|
|
<view class="swiper-gradient"></view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
<!-- 自定义指示器 -->
|
|
<view class="custom-indicator">
|
|
<block wx:for="{{swiperList}}" wx:key="id">
|
|
<view class="indicator-dot {{currentSwiper === index ? 'active' : ''}}" data-index="{{index}}" bindtap="onIndicatorTap"></view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 卡片类型 -->
|
|
<view class="card">
|
|
<view class="card2">
|
|
<view>问兽医</view>
|
|
<view class="card2_1">智能匹配医生</view>
|
|
<view class="card2_1">平均5分钟恢复</view>
|
|
</view>
|
|
<view class="card3">
|
|
<view class="card3_1 card3_kp">
|
|
<view>找专家</view>
|
|
<view>智能匹配医生</view>
|
|
</view>
|
|
<view class="card3_2 card3_kp">
|
|
<view>去买药</view>
|
|
<view>制定专业的治疗方案</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 知识库 -->
|
|
<view class="repository">
|
|
<view class="repository1_1 zsk">
|
|
<view>养殖知识库</view>
|
|
<view>快速查询养殖知识</view>
|
|
</view>
|
|
<view class="repository1_2 zsk">
|
|
<view>在线培训</view>
|
|
<view>提高养殖技能</view>
|
|
</view>
|
|
<view class="repository1_3 zsk">
|
|
<view>政策解读</view>
|
|
<view>提供政策指导</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 通知公告区域 -->
|
|
<view class="notice-section">
|
|
<view class="notice-content">
|
|
<swiper class="notice-swiper" vertical="{{true}}" autoplay="{{true}}" interval="4000" duration="800" circular="{{true}}" style="height: 200rpx;">
|
|
<block wx:for="{{noticeList}}" wx:key="id">
|
|
<swiper-item>
|
|
<view class="notice-item {{index === currentNotice ? 'highlight' : ''}}" data-id="{{item.id}}" catchtap="onNoticeTap">
|
|
<view class="notice-item-header">
|
|
<text class="notice-type {{item.type}}">{{item.typeName}}</text>
|
|
<text class="notice-time">{{item.time}}</text>
|
|
</view>
|
|
<text class="notice-text">{{item.content}}</text>
|
|
<view class="notice-arrow">
|
|
<image src="/pages/images/dw.png"></image>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户提问板块 -->
|
|
<view class="user-question-section">
|
|
<!-- 标题区域 -->
|
|
<view class="question-header">
|
|
<view class="question-title">
|
|
<view class="title-text">用户提问</view>
|
|
<view class="title-sub">看看其他养殖户遇到的问题</view>
|
|
</view>
|
|
<view class="view-all" bindtap="viewAllQuestions">
|
|
查看全部
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 问题列表 -->
|
|
<view class="question-card placeholder">
|
|
<view class="question-meta">
|
|
<view class="question-tag">
|
|
<text class="tag-icon">【羊】</text>
|
|
<text class="tag-text">发烧、流鼻涕、越来越瘦是什么原因？应该怎么治疗？</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="question-info">
|
|
<view class="user-info">
|
|
<image src="/pages/images/tx.png" class="user-avatar"></image>
|
|
<view class="user-detail">
|
|
<view class="user-name">内蒙古养殖户</view>
|
|
<view class="user-location">
|
|
<text>内蒙古阿拉善左旗</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="time-info">
|
|
2025-12-25
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|