Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 333f6d07 作者: 方治民
操作

chore: 首页和农场页面，尽可能将页面中的静态数据改为动态

上级 c7280796
正在显示 包含 366 行增加 和 269 行删除
src/pages/nongchang/nongchang.vue
<script> <script setup lang="ts">
export default { import { reactive } from 'vue'
components: {}, import { onPullDownRefresh } from '@dcloudio/uni-app'
props: {},
data() { // 下拉刷新
return {} onPullDownRefresh(() => {
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
})
// 页面数据
const pageData = reactive({
// 顶部标题和搜索
header: {
title: '农场',
searchPlaceholder: '请输入搜索内容',
},
// 功能菜单
menuItems: [
{ id: 1, name: '监测预警', icon: '/static/images/codefun/e683f9d10dc21da45abffbfa4c56fffb.png' },
{ id: 2, name: '农业模型', icon: '/static/images/codefun/afdf5cf91bb1832ec12b89ba1f8a4a22.png' },
{ id: 3, name: '基地管理', icon: '/static/images/codefun/8ce0f7de048a5d10fd901fa4caee40fd.png' },
{ id: 4, name: '信用中心', icon: '/static/images/codefun/bc6853d7f464c445f1d6cc5f3b37103d.png' },
{ id: 5, name: '灵活用工', icon: '/static/images/codefun/104cbc5dca418b07e6933d2e953db1d8.png' },
],
// 农场信息
farmInfo: {
image: '/static/images/codefun/89a5811c35ff41e6a039c04e77d7380a.png',
name: '张家界水稻农场',
area: '32.5亩',
crops: '水稻、油菜',
soilCondition: '适宜',
pestRisk: '中等',
precipitation: '25mm',
},
// 农业模型
agricultureModels: [
{
id: 1,
image: '/static/images/codefun/d8106d6756782001856157ea8933e6f0.png',
name: '柑橘模型',
description: '精准预测柑橘生长周期',
actionText: '查看介绍',
},
{
id: 2,
image: '/static/images/codefun/2716e8578a8409fc69b6b25ca47dd988.png',
name: '作物生长监测',
description: 'AI识别生长状况',
actionText: '查看介绍',
},
{
id: 3,
image: '/static/images/codefun/f29a54a031b5665bf1522b973b109416.png',
name: '产能模型',
description: '基于作物生长状况产能构建模型',
actionText: '查看介绍',
},
],
// 灵活用工
flexibleEmployment: {
working: '找人干活',
earning: '出工赚钱',
progress: '1个进行中 3个已完成',
}, },
methods: {}, // 基地管理
baseManagement: [
{
id: 1,
name: '基础信息',
icon: '/static/images/codefun/652ff68221e41e59bd253d90a260a9d2.png',
value: 3,
unit: '个',
},
{
id: 2,
name: '作物管理',
icon: '/static/images/codefun/73f2cd7926e10ad8d0222682c6f0dd44.png',
value: 3,
unit: '种',
},
{
id: 3,
name: '农资管理',
icon: '/static/images/codefun/d5224faf803b94f41aea2c682a8b30fe.png',
value: 4,
unit: '项',
},
{
id: 4,
name: '销售记录',
icon: '/static/images/codefun/9489121f8d1fa3d7847a2ef3e45b8753.png',
value: 5,
unit: '笔',
},
{
id: 5,
name: '收支概览',
icon: '/static/images/codefun/68ae1a4d9d9f5bcd80dd2a4603ac7cdf.png',
value: 8300,
unit: '元',
},
],
// 监测预警图表数据
monitoringData: {
title: '监测预警',
yAxis: [80, 60, 40, 20, 0],
chartImage: '/static/images/codefun/fb791ee7e711cfb556043cb81d3c32b1.png',
},
// 监测预警详情
monitoringDetails: [
{
id: 1,
name: '气象灾害',
image: '/static/images/codefun/68bae99a74dc71e194d799ee24c1f023.png',
status: '台风预警',
statusColor: '#ef4444',
},
{
id: 2,
name: '作物倒伏',
image: '/static/images/codefun/29bc217d767c53f1f4968ddcf08b6d85.png',
status: '中等风险',
statusColor: '#eab308',
},
{
id: 3,
name: '病虫害风险',
image: '/static/images/codefun/143013b1c946e75b10133de0db6d9c7f.png',
status: '水稻稻瘟病',
statusColor: '#3b82f6',
},
],
// 常用工具
commonTools: [
{ id: 1, name: '种植日历', icon: '/static/images/codefun/701b1b6c427847028c16038ad73b9788.png' },
{ id: 2, name: '农药配比', icon: '/static/images/codefun/429c85060b57461a9e7e0065ee3b0347.png' },
{ id: 3, name: '施肥计算', icon: '/static/images/codefun/9e09dc90a8f64165bd1cdd060463fe52.png' },
{ id: 4, name: '农机租赁', icon: '/static/images/codefun/80b66267a90246d2b265fcbfddd8df72.png' },
{ id: 5, name: '病虫图谱', icon: '/static/images/codefun/7a85c9339a044dbd8bff9cbc7a7fae5f.png' },
{ id: 6, name: '天气预报', icon: '/static/images/codefun/673c79c5a1384e3d93e86623e5095577.png' },
{ id: 7, name: '产品定价', icon: '/static/images/codefun/f1964e7a929b45abb87c8d79d42838e8.png' },
{ id: 8, name: '补贴咨询', icon: '/static/images/codefun/050ac1b430844be786310ff1bc11f3d6.png' },
],
// 智能设备
smartDevices: [
{
id: 1,
name: '土壤监测仪',
image: '/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png',
status: '在线',
statusColor: '#13e000',
},
{
id: 2,
name: '监测仪A',
image: '/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png',
status: '掉线',
statusColor: '#75777c',
},
{
id: 3,
name: '监测仪B',
image: '/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png',
status: '在线',
statusColor: '#13e000',
},
],
// 信用中心
creditCenter: {
image: '/static/images/codefun/fece3647f209c46ff19855722cffc960.png',
score: '726',
rating: '信用评级：良好',
tips: '完善信息提升20分',
actionText: '查看金融服务',
},
onPullDownRefresh() { // 农技学习
setTimeout(function () { agricultureClass: {
uni.stopPullDownRefresh() title: '专家实录—鸡饲养技术',
Message.toast('刷新成功') expert: '张教授',
}, 1000) info: '23:15｜2.3万次播放',
}, },
})
// 菜单点击事件
function onMenuItemClick(item: any) {
console.log('点击菜单项:', item)
// 在这里添加具体的菜单点击逻辑
}
// 农业模型点击事件
function onAgricultureModelClick(model: any) {
console.log('点击农业模型:', model)
// 在这里添加具体的农业模型点击逻辑
}
// 基地管理点击事件
function onBaseManagementClick(item: any) {
console.log('点击基地管理项:', item)
// 在这里添加具体的基地管理点击逻辑
}
// 查看更多监测预警
function onViewMoreMonitoring() {
console.log('查看更多监测预警')
// 在这里添加具体的查看逻辑
}
// 查看更多常用工具
function onViewMoreTools() {
console.log('查看更多常用工具')
// 在这里添加具体的查看逻辑
}
// 设备管理点击事件
function onDeviceManagementClick() {
console.log('设备管理')
// 在这里添加具体的设备管理逻辑
}
// 查看金融服务
function onViewFinancialServices() {
console.log('查看金融服务')
// 在这里添加具体的查看逻辑
}
// 查看更多农技学习
function onViewMoreClass() {
console.log('查看更多农技学习')
// 在这里添加具体的查看逻辑
}
// 点击常用工具
function onClickTool(tool: any) {
console.log('点击常用工具:', tool)
// 在这里添加具体的常用工具点击逻辑
} }
</script> </script>
...@@ -22,47 +255,27 @@ ...@@ -22,47 +255,27 @@
<view class="codefun-flex-col group"> <view class="codefun-flex-col group">
<view class="codefun-flex-col section"> <view class="codefun-flex-col section">
<view class="codefun-flex-col mt-52rpx"> <view class="codefun-flex-col mt-52rpx">
<text class="codefun-self-center font text">农场</text> <text class="codefun-self-center font text">{{ pageData.header.title }}</text>
<view class="codefun-flex-col codefun-self-stretch mt-19"> <view class="codefun-flex-col codefun-self-stretch mt-19">
<view class="codefun-flex-row codefun-items-center section_2"> <view class="codefun-flex-row codefun-items-center section_2">
<image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" /> <image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" />
<text class="codefun-ml-8 font_2 text_2">请输入搜索内容</text> <text class="codefun-ml-8 font_2 text_2">{{ pageData.header.searchPlaceholder }}</text>
</view> </view>
<view class="codefun-mt-14 codefun-flex-row equal-division section_3"> <view class="codefun-mt-14 codefun-flex-row equal-division section_3">
<view class="codefun-flex-col codefun-items-center equal-division-item"> <view
<image v-for="item in pageData.menuItems"
class="image_6" :key="item.id"
src="/static/images/codefun/e683f9d10dc21da45abffbfa4c56fffb.png" class="codefun-flex-col codefun-items-center"
/> :class="{
<text class="font_3 text_3 mt-13">监测预警</text> 'equal-division-item': item.id === 1,
</view> 'group_3 equal-division-item': item.id === 2 || item.id === 3,
<view class="codefun-flex-col codefun-items-center group_3 equal-division-item"> 'group_4 equal-division-item_2': item.id === 4,
<image 'equal-division-item_3 group_5': item.id === 5,
class="image_6" }"
src="/static/images/codefun/afdf5cf91bb1832ec12b89ba1f8a4a22.png" @click="onMenuItemClick(item)"
/> >
<text class="font_3 text_4 mt-13">农业模型</text> <image class="image_6" :src="item.icon" />
</view> <text class="font_3 mt-13" :class="`text_${item.id + 2}`">{{ item.name }}</text>
<view class="codefun-flex-col codefun-items-center group_3 equal-division-item_2">
<image
class="image_6"
src="/static/images/codefun/8ce0f7de048a5d10fd901fa4caee40fd.png"
/>
<text class="font_3 text_5 mt-13">基地管理</text>
</view>
<view class="codefun-flex-col codefun-items-center group_4 equal-division-item_2">
<image
class="image_6"
src="/static/images/codefun/bc6853d7f464c445f1d6cc5f3b37103d.png"
/>
<text class="font_3 text_6 mt-13">信用中心</text>
</view>
<view class="codefun-flex-col codefun-items-center equal-division-item_3 group_5">
<image
class="image_6"
src="/static/images/codefun/104cbc5dca418b07e6933d2e953db1d8.png"
/>
<text class="font_3 text_7 mt-13">灵活用工</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -71,34 +284,31 @@ ...@@ -71,34 +284,31 @@
<view class="codefun-flex-col codefun-relative group_6"> <view class="codefun-flex-col codefun-relative group_6">
<view class="codefun-flex-row section_4 flex-row"> <view class="codefun-flex-row section_4 flex-row">
<view class="w-200rpx h-200rpx"> <view class="w-200rpx h-200rpx">
<image <image class="codefun-self-center image_7 w-full h-full" :src="pageData.farmInfo.image" />
class="codefun-self-center image_7 w-full h-full"
src="/static/images/codefun/89a5811c35ff41e6a039c04e77d7380a.png"
/>
</view> </view>
<view class="ml-11"> <view class="ml-11">
<text class="codefun-self-center font text_8">张家界水稻农场</text> <text class="codefun-self-center font text_8">{{ pageData.farmInfo.name }}</text>
<view class="codefun-flex-row codefun-justify-start codefun-self-stretch group_7"> <view class="codefun-flex-row codefun-justify-start codefun-self-stretch group_7">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper"> <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_4 text_9">32.5亩</text> <text class="font_4 text_9">{{ pageData.farmInfo.area }}</text>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2 ml-3" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2 ml-3"
> >
<text class="font_4 text_10">水稻、油菜</text> <text class="font_4 text_10">{{ pageData.farmInfo.crops }}</text>
</view> </view>
</view> </view>
<view class="codefun-flex-row codefun-items-start equal-division_2 section_5"> <view class="codefun-flex-row codefun-items-start equal-division_2 section_5">
<view class="codefun-flex-col codefun-items-center equal-division-item_4"> <view class="codefun-flex-col codefun-items-center equal-division-item_4">
<text class="font_5 text_11">适宜</text> <text class="font_5 text_11">{{ pageData.farmInfo.soilCondition }}</text>
<text class="font_4 text_14 mt-5">⼟壤墒情</text> <text class="font_4 text_14 mt-5">⼟壤墒情</text>
</view> </view>
<view class="codefun-flex-col codefun-items-center group_8 equal-division-item_4"> <view class="codefun-flex-col codefun-items-center group_8 equal-division-item_4">
<text class="font_5 text_12">中等</text> <text class="font_5 text_12">{{ pageData.farmInfo.pestRisk }}</text>
<text class="font_4 text_15 mt-5">病虫害风险</text> <text class="font_4 text_15 mt-5">病虫害风险</text>
</view> </view>
<view class="codefun-flex-col codefun-items-center group_9 equal-division-item_4"> <view class="codefun-flex-col codefun-items-center group_9 equal-division-item_4">
<text class="font_5 text_13">25mm</text> <text class="font_5 text_13">{{ pageData.farmInfo.precipitation }}</text>
<text class="codefun-mt-6 font_4 text_16">7天降水</text> <text class="codefun-mt-6 font_4 text_16">7天降水</text>
</view> </view>
</view> </view>
...@@ -112,55 +322,32 @@ ...@@ -112,55 +322,32 @@
<view class="codefun-flex-col mt-17"> <view class="codefun-flex-col mt-17">
<view class="codefun-flex-col codefun-justify-start section_6"> <view class="codefun-flex-col codefun-justify-start section_6">
<view class="codefun-flex-row equal-division_3"> <view class="codefun-flex-row equal-division_3">
<view class="codefun-flex-col equal-division-item_5 group_11"> <template v-for="(model, index) in pageData.agricultureModels" :key="model.id">
<image <view class="codefun-flex-col equal-division-item_5 group_11">
class="codefun-self-center image_7" <image class="codefun-self-center image_7" :src="model.image" />
src="/static/images/codefun/d8106d6756782001856157ea8933e6f0.png" <text class="codefun-self-center font_5 text_18">{{ model.name }}</text>
/> <text class="codefun-self-center font_7 text_21">{{ model.description }}</text>
<text class="codefun-self-center font_5 text_18">柑橘模型</text> <view
<text class="codefun-self-center font_7 text_21">精准预测柑橘生长周期</text> class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3"
<view @click="onAgricultureModelClick(model)"
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3" >
> <text class="font_8 text_24">{{ model.actionText }}</text>
<text class="font_8 text_24">查看介绍</text> </view>
</view>
</view>
<view class="section_7 horiz-divider" />
<view class="codefun-flex-col equal-division-item_5 group_12">
<view class="codefun-flex-col codefun-items-center codefun-self-stretch group_13">
<image
class="image_7"
src="/static/images/codefun/2716e8578a8409fc69b6b25ca47dd988.png"
/>
<text class="font_5 text_19 mt-11">作物生长监测</text>
<text class="font_4 text_23 mt-11">AI识别生长状况</text>
</view> </view>
<view <view
class="codefun-mt-34 codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3 view" class="section_7 horiz-divider"
> v-if="index < pageData.agricultureModels.length - 1"
<text class="font_8 text_24">查看介绍</text>
</view>
</view>
<view class="section_7 horiz-divider" />
<view class="codefun-flex-col equal-division-item_5 group_14">
<image
class="codefun-self-center image_7"
src="/static/images/codefun/f29a54a031b5665bf1522b973b109416.png"
/> />
<text class="codefun-self-center font_5 text_20">产能模型</text> </template>
<text class="codefun-self-center font_7 text_22">基于作物生长状况产能构建模型</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3"
>
<text class="font_8 text_24">查看介绍</text>
</view>
</view>
</view> </view>
</view> </view>
<view class="codefun-mt-12 codefun-flex-col section_8"> <view class="codefun-mt-12 codefun-flex-col section_8">
<view class="codefun-flex-row equal-division_4"> <view class="codefun-flex-row equal-division_4">
<view class="codefun-flex-row codefun-justify-center equal-division-item_6 section_9"> <view class="codefun-flex-row codefun-justify-center equal-division-item_6 section_9">
<text class="codefun-self-start font_9 text_25">找人干活</text> <text class="codefun-self-start font_9 text_25">{{
pageData.flexibleEmployment.working
}}</text>
<image <image
class="codefun-self-center image_8 ml-9" class="codefun-self-center image_8 ml-9"
src="/static/images/codefun/e12b4605ec265981ebf23e742ae09d77.png" src="/static/images/codefun/e12b4605ec265981ebf23e742ae09d77.png"
...@@ -169,14 +356,18 @@ ...@@ -169,14 +356,18 @@
<view <view
class="codefun-flex-row codefun-justify-evenly equal-division-item_6 section_10 ml-11" class="codefun-flex-row codefun-justify-evenly equal-division-item_6 section_10 ml-11"
> >
<text class="codefun-self-start font_9 text_26">出工赚钱</text> <text class="codefun-self-start font_9 text_26">{{
pageData.flexibleEmployment.earning
}}</text>
<image <image
class="codefun-self-center image_9" class="codefun-self-center image_9"
src="/static/images/codefun/abc27711926ec08e17bd512f96740931.png" src="/static/images/codefun/abc27711926ec08e17bd512f96740931.png"
/> />
</view> </view>
</view> </view>
<text class="codefun-self-start font_10 text_27 mt-7">1个进行中 3个已完成</text> <text class="codefun-self-start font_10 text_27 mt-7">{{
pageData.flexibleEmployment.progress
}}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -186,44 +377,18 @@ ...@@ -186,44 +377,18 @@
<text class="font_6 text_29">更多</text> <text class="font_6 text_29">更多</text>
</view> </view>
<view class="codefun-flex-row equal-division_5 mt-17"> <view class="codefun-flex-row equal-division_5 mt-17">
<view class="codefun-flex-col codefun-items-start section_11 equal-division-item_7"> <view
<image class="image_10" src="/static/images/codefun/652ff68221e41e59bd253d90a260a9d2.png" /> v-for="item in pageData.baseManagement"
<text class="font_11 text_30">基础信息</text> :key="item.id"
<view class="group_16"> class="codefun-flex-col codefun-items-start section_11 equal-division-item_7"
<text class="font_12">3</text> :class="{ 'ml-9': item.id > 1 }"
<text class="font_10 text_35">个</text> @click="onBaseManagementClick(item)"
</view> >
</view> <image :class="item.id === 1 ? 'image_10' : 'image_5'" :src="item.icon" />
<view class="codefun-flex-col codefun-items-start section_11 equal-division-item_7 ml-9"> <text class="font_11" :class="`text_${30 + item.id - 1}`">{{ item.name }}</text>
<image class="image_5" src="/static/images/codefun/73f2cd7926e10ad8d0222682c6f0dd44.png" /> <view :class="`group_${15 + item.id}`">
<text class="font_11 text_31">作物管理</text> <text class="font_12" :class="`text_${35 + item.id - 1}`">{{ item.value }}</text>
<view class="group_17"> <text class="font_10" :class="`text_${35 + item.id + 3}`">{{ item.unit }}</text>
<text class="font_12">3</text>
<text class="font_10 text_38">种</text>
</view>
</view>
<view class="codefun-flex-col codefun-items-start section_11 equal-division-item_7 ml-9">
<image class="image_5" src="/static/images/codefun/d5224faf803b94f41aea2c682a8b30fe.png" />
<text class="font_11 text_32">农资管理</text>
<view class="group_18">
<text class="font_12 text_36">4</text>
<text class="font_10 text_39">项</text>
</view>
</view>
<view class="codefun-flex-col codefun-items-start section_11 equal-division-item_7 ml-9">
<image class="image_5" src="/static/images/codefun/9489121f8d1fa3d7847a2ef3e45b8753.png" />
<text class="font_11 text_33">销售记录</text>
<view class="group_19">
<text class="font_12 text_37">5</text>
<text class="font_10 text_40">笔</text>
</view>
</view>
<view class="codefun-flex-col codefun-items-start section_11 equal-division-item_7 ml-9">
<image class="image_5" src="/static/images/codefun/68ae1a4d9d9f5bcd80dd2a4603ac7cdf.png" />
<text class="font_11 text_34">收支概览</text>
<view class="group_20">
<text class="font_12">8300</text>
<text class="font_10 text_41">元</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -231,7 +396,7 @@ ...@@ -231,7 +396,7 @@
<view class="codefun-flex-col group_21"> <view class="codefun-flex-col group_21">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_22"> <view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
<text class="font text_42">监测预警</text> <text class="font text_42">监测预警</text>
<text class="font_6 text_43 text_44">更多</text> <text class="font_6 text_43 text_44" @click="onViewMoreMonitoring">更多</text>
</view> </view>
<view class="codefun-flex-col section_12"> <view class="codefun-flex-col section_12">
<view class="codefun-flex-row codefun-items-center group_23"> <view class="codefun-flex-row codefun-items-center group_23">
...@@ -319,73 +484,18 @@ ...@@ -319,73 +484,18 @@
<view class="codefun-flex-col group_21"> <view class="codefun-flex-col group_21">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_22"> <view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
<text class="font text_42">常用工具</text> <text class="font text_42">常用工具</text>
<text class="font_6 text_43 text_44">更多</text> <text class="font_6 text_43 text_44" @click="onViewMoreTools">更多</text>
</view> </view>
<view class="codefun-flex-col section_12"> <view class="codefun-flex-col section_12">
<view class="flex-center flex-wrap gap-2 pt-3"> <view class="flex-center flex-wrap gap-2 pt-3">
<view class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2"> <view
<image v-for="tool in pageData.commonTools"
class="w-40 h-40" :key="tool.id"
src="/static/images/codefun/701b1b6c427847028c16038ad73b9788.png" class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2"
mode="scaleToFill" @click="onClickTool(tool)"
/> >
<view class="text-24">种植日历</view> <image class="w-40 h-40" :src="tool.icon" mode="scaleToFill" />
</view> <view class="text-24">{{ tool.name }}</view>
<view class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2">
<image
class="w-40 h-40"
src="/static/images/codefun/429c85060b57461a9e7e0065ee3b0347.png"
mode="scaleToFill"
/>
<view class="text-24">农药配比</view>
</view>
<view class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2">
<image
class="w-40 h-40"
src="/static/images/codefun/9e09dc90a8f64165bd1cdd060463fe52.png"
mode="scaleToFill"
/>
<view class="text-24">施肥计算</view>
</view>
<view class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2">
<image
class="w-40 h-40"
src="/static/images/codefun/80b66267a90246d2b265fcbfddd8df72.png"
mode="scaleToFill"
/>
<view class="text-24">农机租赁</view>
</view>
<view class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2">
<image
class="w-40 h-40"
src="/static/images/codefun/7a85c9339a044dbd8bff9cbc7a7fae5f.png"
mode="scaleToFill"
/>
<view class="text-24">病虫图谱</view>
</view>
<view class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2">
<image
class="w-40 h-40"
src="/static/images/codefun/673c79c5a1384e3d93e86623e5095577.png"
mode="scaleToFill"
/>
<view class="text-24">天气预报</view>
</view>
<view class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2">
<image
class="w-40 h-40"
src="/static/images/codefun/f1964e7a929b45abb87c8d79d42838e8.png"
mode="scaleToFill"
/>
<view class="text-24">产品定价</view>
</view>
<view class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2">
<image
class="w-40 h-40"
src="/static/images/codefun/050ac1b430844be786310ff1bc11f3d6.png"
mode="scaleToFill"
/>
<view class="text-24">补贴咨询</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -393,42 +503,27 @@ ...@@ -393,42 +503,27 @@
<view class="codefun-flex-col group_26 mt-21"> <view class="codefun-flex-col group_26 mt-21">
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline"> <view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
<text class="font text_56">智能设备</text> <text class="font text_56">智能设备</text>
<text class="font_6 text_57">设备管理</text> <text class="font_6 text_57" @click="onDeviceManagementClick">设备管理</text>
</view> </view>
<view class="codefun-flex-row group_26 mt-17"> <view class="codefun-flex-row group_26 mt-17 gap-2">
<view <view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-shrink-0 codefun-relative section_15" v-for="(device, index) in pageData.smartDevices"
:key="device.id"
class="section_16 codefun-flex-row codefun-justify-center codefun-items-center codefun-shrink-0 codefun-relative"
> >
<image class="image_13" src="/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png" /> <image class="image_13" :src="device.image" />
<view class="codefun-ml-8 codefun-flex-col"> <view class="codefun-ml-8 codefun-flex-col">
<text class="font_14 text_58">土壤监测仪</text> <text class="font_14" :class="`text_${58 + index}`">{{ device.name }}</text>
<view class="codefun-mt-10 codefun-flex-row codefun-items-center"> <view class="codefun-mt-10 codefun-flex-row codefun-items-center">
<view class="section_17" /> <view class="section_17" v-if="index !== 1" />
<text class="codefun-ml-4 font_4 text_59">在线</text> <view class="section_18" v-if="index === 1" />
</view> <text
</view> class="codefun-ml-4 font_4"
</view> :class="index !== 1 ? 'text_59' : 'text_60'"
<view :style="{ color: device.statusColor }"
class="codefun-ml-10 codefun-flex-row codefun-justify-center codefun-items-center codefun-shrink-0 codefun-relative section_16" >
> {{ device.status }}
<image class="image_13" src="/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png" /> </text>
<view class="codefun-ml-8 codefun-flex-col group_27">
<text class="codefun-self-start font_14">监测仪A</text>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch mt-11">
<view class="section_18" />
<text class="font_4 text_60 ml-5">掉线</text>
</view>
</view>
</view>
<view
class="codefun-ml-10 codefun-flex-row codefun-justify-center codefun-items-center codefun-shrink-0 codefun-relative section_15"
>
<image class="image_13" src="/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png" />
<view class="codefun-ml-8 codefun-flex-col">
<text class="font_14 text_58">监测仪B</text>
<view class="codefun-mt-10 codefun-flex-row codefun-items-center">
<view class="section_17" />
<text class="codefun-ml-4 font_4 text_59">在线</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -439,15 +534,16 @@ ...@@ -439,15 +534,16 @@
<view <view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch section_19 mt-21" class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch section_19 mt-21"
> >
<image class="image_15" src="/static/images/codefun/fece3647f209c46ff19855722cffc960.png" /> <image class="image_15" :src="pageData.creditCenter.image" />
<view class="codefun-flex-col codefun-items-start group_29"> <view class="codefun-flex-col codefun-items-start group_29">
<text class="text_62">726</text> <text class="text_62">{{ pageData.creditCenter.score }}</text>
<text class="font_5 text_63 mt-13">信用评级：良好</text> <text class="font_5 text_63 mt-13">{{ pageData.creditCenter.rating }}</text>
<text class="font_10 text_64 mt-13">完善信息提升20分</text> <text class="font_10 text_64 mt-13">{{ pageData.creditCenter.tips }}</text>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6 mt-13" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6 mt-13"
@click="onViewFinancialServices"
> >
<text class="font_15 text_65">查看金融服务</text> <text class="font_15 text_65">{{ pageData.creditCenter.actionText }}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -455,10 +551,10 @@ ...@@ -455,10 +551,10 @@
<view class="codefun-flex-col group_30"> <view class="codefun-flex-col group_30">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_22"> <view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
<text class="font text_66">农技学习</text> <text class="font text_66">农技学习</text>
<text class="font_6 text_43 text_67">查看更多</text> <text class="font_6 text_43 text_67" @click="onViewMoreClass">查看更多</text>
</view> </view>
<view class="codefun-flex-col section_20"> <view class="codefun-flex-col section_20">
<text class="codefun-self-start font_2 text_68">专家实录—鸡饲养技术</text> <text class="codefun-self-start font_2 text_68">{{ pageData.agricultureClass.title }}</text>
<view <view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_31" class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_31"
> >
...@@ -467,9 +563,9 @@ ...@@ -467,9 +563,9 @@
class="codefun-shrink-0 image_16" class="codefun-shrink-0 image_16"
src="/static/images/codefun/893f216142f5ca20cf9f2496d9b793c8.png" src="/static/images/codefun/893f216142f5ca20cf9f2496d9b793c8.png"
/> />
<text class="font_15 text_69 ml-5">张教授</text> <text class="font_15 text_69 ml-5">{{ pageData.agricultureClass.expert }}</text>
</view> </view>
<text class="font_15 text_70">23:15｜2.3万次播放</text> <text class="font_15 text_70">{{ pageData.agricultureClass.info }}</text>
</view> </view>
<view class="codefun-flex-row codefun-justify-center codefun-self-stretch group_32"> <view class="codefun-flex-row codefun-justify-center codefun-self-stretch group_32">
<view class="section_21" /> <view class="section_21" />
...@@ -545,10 +641,9 @@ ...@@ -545,10 +641,9 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height: 100%; height: 100%;
padding-bottom: 20rpx; padding-bottom: 30rpx;
.group { .group {
height: 3888rpx;
.section { .section {
padding: 28rpx 28rpx 116rpx; padding: 28rpx 28rpx 116rpx;
background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png'); background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
...@@ -782,7 +877,7 @@ ...@@ -782,7 +877,7 @@
margin-left: 8rpx; margin-left: 8rpx;
margin-top: 16rpx; margin-top: 16rpx;
text-align: center; text-align: center;
width: 118rpx; width: 160rpx;
} }
.text-wrapper_3 { .text-wrapper_3 {
margin-top: 36rpx; margin-top: 36rpx;
......
src/pages/shouye/shouye.vue
...@@ -125,18 +125,6 @@ ...@@ -125,18 +125,6 @@
// 在这里添加具体的菜单点击逻辑 // 在这里添加具体的菜单点击逻辑
} }
// 服务项点击事件
function onServiceItemClick(item: any) {
console.log('点击服务项:', item)
// 在这里添加具体的服务项点击逻辑
}
// 服务统计点击事件
function onServiceStatClick(item: any) {
console.log('点击服务统计项:', item)
// 在这里添加具体的服务统计点击逻辑
}
// 农产品关注点击事件 // 农产品关注点击事件
function onProductFollowClick(product: any) { function onProductFollowClick(product: any) {
console.log('点击关注农产品:', product) console.log('点击关注农产品:', product)
...@@ -261,17 +249,31 @@ ...@@ -261,17 +249,31 @@
<text class="font_2 mt-11">{{ item.name }}</text> <text class="font_2 mt-11">{{ item.name }}</text>
</view> </view>
</view> </view>
<view class="codefun-flex-col codefun-mt-20"> <view class="codefun-flex-col group_11 codefun-mt-20">
<view class="codefun-flex-row"> <view class="codefun-flex-row group_38">
<view <image
v-for="service in pageData.serviceItems" v-for="service in pageData.serviceItems"
:key="service.id" :key="service.id"
class="codefun-flex-col codefun-items-center group_10" class="image_12"
@click="onServiceItemClick(service)" :class="{
'ml-43': service.id > 1,
}"
:src="service.icon"
/>
</view>
<view class="codefun-flex-row codefun-justify-between mt-13">
<text
v-for="service in pageData.serviceItems"
:key="service.id"
class="font_2"
:class="{
text_14: service.id === 1,
text_15: service.id === 2,
text_16: service.id === 4,
}"
> >
<image class="image_11" :src="service.icon" /> {{ service.name }}
<text class="font_2 mt-11">{{ service.name }}</text> </text>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -367,7 +369,6 @@ ...@@ -367,7 +369,6 @@
section_1: stat.id === 2, section_1: stat.id === 2,
section_19: stat.id > 2, section_19: stat.id > 2,
}" }"
@click="onServiceStatClick(stat)"
> >
<view <view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative" class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative"
...@@ -476,9 +477,10 @@ ...@@ -476,9 +477,10 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height: 100%; height: 100%;
padding-bottom: 30rpx; padding-bottom: 20rpx;
.group { .group {
height: 2530rpx;
.section { .section {
padding: 48rpx 28rpx 220rpx; padding: 48rpx 28rpx 220rpx;
background-image: url('/static/images/codefun/1086a098c06f7f52e77bd7a646747a13.png'); background-image: url('/static/images/codefun/1086a098c06f7f52e77bd7a646747a13.png');
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论