Skip to content

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

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

上级 c7280796
正在显示 包含 366 行增加 和 269 行删除
src/pages/nongchang/nongchang.vue
<script>
export default {
components: {},
props: {},
data() {
return {}
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
// 下拉刷新
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 () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
// 农技学习
agricultureClass: {
title: '专家实录—鸡饲养技术',
expert: '张教授',
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>
......@@ -22,47 +255,27 @@
<view class="codefun-flex-col group">
<view class="codefun-flex-col section">
<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-row codefun-items-center section_2">
<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 class="codefun-mt-14 codefun-flex-row equal-division section_3">
<view class="codefun-flex-col codefun-items-center equal-division-item">
<image
class="image_6"
src="/static/images/codefun/e683f9d10dc21da45abffbfa4c56fffb.png"
/>
<text class="font_3 text_3 mt-13">监测预警</text>
</view>
<view class="codefun-flex-col codefun-items-center group_3 equal-division-item">
<image
class="image_6"
src="/static/images/codefun/afdf5cf91bb1832ec12b89ba1f8a4a22.png"
/>
<text class="font_3 text_4 mt-13">农业模型</text>
</view>
<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
v-for="item in pageData.menuItems"
:key="item.id"
class="codefun-flex-col codefun-items-center"
:class="{
'equal-division-item': item.id === 1,
'group_3 equal-division-item': item.id === 2 || item.id === 3,
'group_4 equal-division-item_2': item.id === 4,
'equal-division-item_3 group_5': item.id === 5,
}"
@click="onMenuItemClick(item)"
>
<image class="image_6" :src="item.icon" />
<text class="font_3 mt-13" :class="`text_${item.id + 2}`">{{ item.name }}</text>
</view>
</view>
</view>
......@@ -71,34 +284,31 @@
<view class="codefun-flex-col codefun-relative group_6">
<view class="codefun-flex-row section_4 flex-row">
<view class="w-200rpx h-200rpx">
<image
class="codefun-self-center image_7 w-full h-full"
src="/static/images/codefun/89a5811c35ff41e6a039c04e77d7380a.png"
/>
<image class="codefun-self-center image_7 w-full h-full" :src="pageData.farmInfo.image" />
</view>
<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-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
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 class="codefun-flex-row codefun-items-start equal-division_2 section_5">
<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>
</view>
<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>
</view>
<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>
</view>
</view>
......@@ -112,55 +322,32 @@
<view class="codefun-flex-col mt-17">
<view class="codefun-flex-col codefun-justify-start section_6">
<view class="codefun-flex-row equal-division_3">
<view class="codefun-flex-col equal-division-item_5 group_11">
<image
class="codefun-self-center image_7"
src="/static/images/codefun/d8106d6756782001856157ea8933e6f0.png"
/>
<text class="codefun-self-center font_5 text_18">柑橘模型</text>
<text class="codefun-self-center font_7 text_21">精准预测柑橘生长周期</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 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>
<template v-for="(model, index) in pageData.agricultureModels" :key="model.id">
<view class="codefun-flex-col equal-division-item_5 group_11">
<image class="codefun-self-center image_7" :src="model.image" />
<text class="codefun-self-center font_5 text_18">{{ model.name }}</text>
<text class="codefun-self-center font_7 text_21">{{ model.description }}</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3"
@click="onAgricultureModelClick(model)"
>
<text class="font_8 text_24">{{ model.actionText }}</text>
</view>
</view>
<view
class="codefun-mt-34 codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3 view"
>
<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"
class="section_7 horiz-divider"
v-if="index < pageData.agricultureModels.length - 1"
/>
<text class="codefun-self-center font_5 text_20">产能模型</text>
<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>
</template>
</view>
</view>
<view class="codefun-mt-12 codefun-flex-col section_8">
<view class="codefun-flex-row equal-division_4">
<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
class="codefun-self-center image_8 ml-9"
src="/static/images/codefun/e12b4605ec265981ebf23e742ae09d77.png"
......@@ -169,14 +356,18 @@
<view
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
class="codefun-self-center image_9"
src="/static/images/codefun/abc27711926ec08e17bd512f96740931.png"
/>
</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>
......@@ -186,44 +377,18 @@
<text class="font_6 text_29">更多</text>
</view>
<view class="codefun-flex-row equal-division_5 mt-17">
<view class="codefun-flex-col codefun-items-start section_11 equal-division-item_7">
<image class="image_10" src="/static/images/codefun/652ff68221e41e59bd253d90a260a9d2.png" />
<text class="font_11 text_30">基础信息</text>
<view class="group_16">
<text class="font_12">3</text>
<text class="font_10 text_35">个</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/73f2cd7926e10ad8d0222682c6f0dd44.png" />
<text class="font_11 text_31">作物管理</text>
<view class="group_17">
<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
v-for="item in pageData.baseManagement"
:key="item.id"
class="codefun-flex-col codefun-items-start section_11 equal-division-item_7"
:class="{ 'ml-9': item.id > 1 }"
@click="onBaseManagementClick(item)"
>
<image :class="item.id === 1 ? 'image_10' : 'image_5'" :src="item.icon" />
<text class="font_11" :class="`text_${30 + item.id - 1}`">{{ item.name }}</text>
<view :class="`group_${15 + item.id}`">
<text class="font_12" :class="`text_${35 + item.id - 1}`">{{ item.value }}</text>
<text class="font_10" :class="`text_${35 + item.id + 3}`">{{ item.unit }}</text>
</view>
</view>
</view>
......@@ -231,7 +396,7 @@
<view class="codefun-flex-col group_21">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
<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 class="codefun-flex-col section_12">
<view class="codefun-flex-row codefun-items-center group_23">
......@@ -319,73 +484,18 @@
<view class="codefun-flex-col group_21">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
<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 class="codefun-flex-col section_12">
<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">
<image
class="w-40 h-40"
src="/static/images/codefun/701b1b6c427847028c16038ad73b9788.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/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
v-for="tool in pageData.commonTools"
:key="tool.id"
class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2"
@click="onClickTool(tool)"
>
<image class="w-40 h-40" :src="tool.icon" mode="scaleToFill" />
<view class="text-24">{{ tool.name }}</view>
</view>
</view>
</view>
......@@ -393,42 +503,27 @@
<view class="codefun-flex-col group_26 mt-21">
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
<text class="font text_56">智能设备</text>
<text class="font_6 text_57">设备管理</text>
<text class="font_6 text_57" @click="onDeviceManagementClick">设备管理</text>
</view>
<view class="codefun-flex-row group_26 mt-17">
<view class="codefun-flex-row group_26 mt-17 gap-2">
<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">
<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="section_17" />
<text class="codefun-ml-4 font_4 text_59">在线</text>
</view>
</view>
</view>
<view
class="codefun-ml-10 codefun-flex-row codefun-justify-center codefun-items-center codefun-shrink-0 codefun-relative section_16"
>
<image class="image_13" src="/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png" />
<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 class="section_17" v-if="index !== 1" />
<view class="section_18" v-if="index === 1" />
<text
class="codefun-ml-4 font_4"
:class="index !== 1 ? 'text_59' : 'text_60'"
:style="{ color: device.statusColor }"
>
{{ device.status }}
</text>
</view>
</view>
</view>
......@@ -439,15 +534,16 @@
<view
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">
<text class="text_62">726</text>
<text class="font_5 text_63 mt-13">信用评级：良好</text>
<text class="font_10 text_64 mt-13">完善信息提升20分</text>
<text class="text_62">{{ pageData.creditCenter.score }}</text>
<text class="font_5 text_63 mt-13">{{ pageData.creditCenter.rating }}</text>
<text class="font_10 text_64 mt-13">{{ pageData.creditCenter.tips }}</text>
<view
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>
......@@ -455,10 +551,10 @@
<view class="codefun-flex-col group_30">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
<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 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
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_31"
>
......@@ -467,9 +563,9 @@
class="codefun-shrink-0 image_16"
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>
<text class="font_15 text_70">23:15｜2.3万次播放</text>
<text class="font_15 text_70">{{ pageData.agricultureClass.info }}</text>
</view>
<view class="codefun-flex-row codefun-justify-center codefun-self-stretch group_32">
<view class="section_21" />
......@@ -545,10 +641,9 @@
overflow-y: auto;
overflow-x: hidden;
height: 100%;
padding-bottom: 20rpx;
padding-bottom: 30rpx;
.group {
height: 3888rpx;
.section {
padding: 28rpx 28rpx 116rpx;
background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
......@@ -782,7 +877,7 @@
margin-left: 8rpx;
margin-top: 16rpx;
text-align: center;
width: 118rpx;
width: 160rpx;
}
.text-wrapper_3 {
margin-top: 36rpx;
......
src/pages/shouye/shouye.vue
......@@ -125,18 +125,6 @@
// 在这里添加具体的菜单点击逻辑
}
// 服务项点击事件
function onServiceItemClick(item: any) {
console.log('点击服务项:', item)
// 在这里添加具体的服务项点击逻辑
}
// 服务统计点击事件
function onServiceStatClick(item: any) {
console.log('点击服务统计项:', item)
// 在这里添加具体的服务统计点击逻辑
}
// 农产品关注点击事件
function onProductFollowClick(product: any) {
console.log('点击关注农产品:', product)
......@@ -261,17 +249,31 @@
<text class="font_2 mt-11">{{ item.name }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-mt-20">
<view class="codefun-flex-row">
<view
<view class="codefun-flex-col group_11 codefun-mt-20">
<view class="codefun-flex-row group_38">
<image
v-for="service in pageData.serviceItems"
:key="service.id"
class="codefun-flex-col codefun-items-center group_10"
@click="onServiceItemClick(service)"
class="image_12"
: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" />
<text class="font_2 mt-11">{{ service.name }}</text>
</view>
{{ service.name }}
</text>
</view>
</view>
</view>
......@@ -367,7 +369,6 @@
section_1: stat.id === 2,
section_19: stat.id > 2,
}"
@click="onServiceStatClick(stat)"
>
<view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative"
......@@ -476,9 +477,10 @@
overflow-y: auto;
overflow-x: hidden;
height: 100%;
padding-bottom: 30rpx;
padding-bottom: 20rpx;
.group {
height: 2530rpx;
.section {
padding: 48rpx 28rpx 220rpx;
background-image: url('/static/images/codefun/1086a098c06f7f52e77bd7a646747a13.png');
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论