|
@@ -0,0 +1,138 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="w-full h-[100rpx] bg-[#f5f5f5] flex items-center justify-center" @click="navigateToTest">进入测试页面</view>
|
|
|
|
|
+ <view class="flex flex-col items-center justify-start bg-[#f5f5f5]">
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 轮播图 -->
|
|
|
|
|
+ <swiper class="w-full h-[300rpx] mb-[20rpx]" :indicator-dots="true" :autoplay="true" interval="3000" duration="500"
|
|
|
|
|
+ :circular="true">
|
|
|
|
|
+ <swiper-item v-for="(item, index) in bannerList" :key="index">
|
|
|
|
|
+ <image :src="item.imageUrl" class="w-full object-contain" mode="aspectFill" />
|
|
|
|
|
+ </swiper-item>
|
|
|
|
|
+ </swiper>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 三个图标 -->
|
|
|
|
|
+ <view class="flex justify-around w-full py-[20rpx] bg-white rounded-[12rpx] mb-[20rpx]">
|
|
|
|
|
+ <view class="flex flex-col items-center p-[20rpx] w-[200rpx] text-center" @click="handleIconClick('farmer')">
|
|
|
|
|
+ <view class="w-[80rpx] h-[80rpx] rounded-full bg-#FFF1E0 flex items-center justify-center shadow">
|
|
|
|
|
+ <image src="/static/icon/farmer.png" class="w-[48rpx] h-[48rpx]" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="mt-[10rpx] text-[28rpx] text-[#333]">我是农户</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="flex flex-col items-center p-[20rpx] w-[200rpx] text-center" @click="handleIconClick('investigator')">
|
|
|
|
|
+ <view class="w-[80rpx] h-[80rpx] rounded-full bg-#FFE4E0 flex items-center justify-center shadow">
|
|
|
|
|
+ <image src="/static/icon/investigator.png" class="w-[48rpx] h-[48rpx]" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="mt-[10rpx] text-[28rpx] text-[#333]">我是调查员</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="flex flex-col items-center p-[20rpx] w-[200rpx] text-center" @click="handleIconClick('official')">
|
|
|
|
|
+ <view class="w-[80rpx] h-[80rpx] rounded-full bg-#E3E3FF flex items-center justify-center shadow">
|
|
|
|
|
+ <image src="/static/icon/official.png" class="w-[48rpx] h-[48rpx]" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="mt-[10rpx] text-[28rpx] text-[#333]">我是村干部</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 新闻 -->
|
|
|
|
|
+ <view class="w-full bg-white rounded-[12rpx] py-[20rpx]">
|
|
|
|
|
+ <view class="text-[32rpx] font-bold text-[#333] mb-[20rpx]">新闻政策</view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="flex flex-col gap-[20rpx]">
|
|
|
|
|
+ <view v-for="(news, index) in newsList" :key="index" class="flex bg-white rounded-[12rpx] overflow-hidden shadow" @click="toDetail(news)">
|
|
|
|
|
+ <view class="flex-1 p-[20rpx] flex flex-col justify-between">
|
|
|
|
|
+ <text class="text-[28rpx] text-[#333] leading-snug mb-[10rpx]">{{ news.title }}</text>
|
|
|
|
|
+ <text class="text-[24rpx] text-[#666] mb-[10rpx]">{{ news.time }}</text>
|
|
|
|
|
+ <view class="flex items-center text-[24rpx] text-[#666]">
|
|
|
|
|
+ <view class="text-[#007aff] mr-[10rpx]">{{ news.source }}</view>
|
|
|
|
|
+ <view class="ml-[10rpx] flex items-center">
|
|
|
|
|
+ <image src="/static/icon/eye.png" class="w-[36rpx] h-[36rpx]" />
|
|
|
|
|
+ <text>{{ news.views }} 次</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+<!-- <image :src="news.image" class="w-[180rpx] h-[120rpx]" mode="aspectFill" />-->
|
|
|
|
|
+ <div class="bg-blue w-[180rpx] h-190rpx my-5rpx"></div>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <CustomTabBar :current="0" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+import { ref } from 'vue'
|
|
|
|
|
+import CustomTabBar from "@/components/CustomTabBar.vue";
|
|
|
|
|
+
|
|
|
|
|
+const navigateToTest = () => {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages/test/index'
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 轮播图数据
|
|
|
|
|
+const bannerList = ref([
|
|
|
|
|
+ {
|
|
|
|
|
+ imageUrl: '/static/banner/banner1.png'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ imageUrl: '/static/banner/banner2.png'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ imageUrl: '/static/banner/banner3.png'
|
|
|
|
|
+ }
|
|
|
|
|
+])
|
|
|
|
|
+
|
|
|
|
|
+// 新闻列表数据
|
|
|
|
|
+const newsList = ref([
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '湖南省第二轮土地承包到期后再延长30年政策问题解答(1)',
|
|
|
|
|
+ time: '2025-08-19 18:02:55',
|
|
|
|
|
+ source: '实时新闻',
|
|
|
|
|
+ views: 29771,
|
|
|
|
|
+ image: '/static/news/news1.jpg',
|
|
|
|
|
+ content: '湖南省第二轮planting到期后再延长30年政策问题解答(1)'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '农业农村部:稳妥推进第二轮土地承包到期后再延长30年试点',
|
|
|
|
|
+ time: '2025-08-19 18:01:53',
|
|
|
|
|
+ source: '实时新闻',
|
|
|
|
|
+ views: 15643,
|
|
|
|
|
+ image: '/static/news/news2.jpg',
|
|
|
|
|
+ content: '农业农村部:稳妥推进第二轮土地承包到期后再延长30年试点'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '关于加强农村土地流转管理的通知',
|
|
|
|
|
+ time: '2025-08-18 16:30:22',
|
|
|
|
|
+ source: '政策发布',
|
|
|
|
|
+ views: 8921,
|
|
|
|
|
+ image: '/static/news/news3.jpg',
|
|
|
|
|
+ content: '关于加强农村土地流转管理的通知'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '乡村振兴战略实施情况报告',
|
|
|
|
|
+ time: '2025-08-17 14:25:11',
|
|
|
|
|
+ source: '专题报道',
|
|
|
|
|
+ views: 12345,
|
|
|
|
|
+ image: '/static/news/news4.jpg',
|
|
|
|
|
+ content: '<p style="color: red">乡村振兴战略实施情况报告</p>'
|
|
|
|
|
+ }
|
|
|
|
|
+])
|
|
|
|
|
+
|
|
|
|
|
+// 跳转到新闻详情页面
|
|
|
|
|
+const toDetail = (news: any) => {
|
|
|
|
|
+ // 存储新闻数据到缓存中
|
|
|
|
|
+ uni.setStorageSync('newsParams', news)
|
|
|
|
|
+ // 跳转到新闻详情页面
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages/index/news-detail/index'
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 图标点击处理
|
|
|
|
|
+const handleIconClick = (type: 'official'|'investigator'|'farmer') => {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: `/pages/${type}/index`
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|