Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 730d68c6 作者: guolinhua
操作

Merge branch 'main' of https://gitee.com/mrf/agri-app

上级 ca190da0 457096ff
正在显示 包含 2874 行增加 和 631 行删除
src/pages.json
......@@ -71,13 +71,12 @@
{
"path": "pages/wode/wode",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#e6f5e8",
"backgroundColorTop": "#e6f5e8",
"navigationBarTitleText": "我的农场",
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#e6f5e8",
"enablePullDownRefresh": true,
"app-plus": {
"titleNView": false,
"bounce": false
}
}
......@@ -97,8 +96,47 @@
"style": {
"navigationBarTitleText": "个人资料",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F8F8F8",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {}
}
}
},
{
"path": "pages/nongyedamoxing/nongyedamoxing",
"style": {
"navigationBarTitleText": "农业大模型",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {}
}
}
},
{
"path": "pages/nongjifuwu/nongjifuwu",
"style": {
"navigationBarTitleText": "农机作业预约",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {}
}
}
},
{
"path": "pages/linghuoyonggong/linghuoyonggong",
"style": {
"navigationBarTitleText": "灵活用工",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {}
......@@ -223,7 +261,6 @@
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "6px",
// "custom": true,
"list": [
{
"pagePath": "pages/shouye/shouye",
......
src/pages/fuwu/fuwu.vue
<script>
export default {
components: {},
props: {},
data() {
return {}
},
methods: {},
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import Navigate from '@/utils/page/navigate'
onPullDownRefresh() {
// 下拉刷新
onPullDownRefresh(() => {
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
})
// 页面数据
const pageData = reactive({
// 顶部标题
header: {
title: '服务',
},
// 岗位信息
jobInfo: {
jobCount: 32,
demandCount: 215,
matchedCount: 186,
},
// 功能菜单
menuItems: [
{ id: 1, name: '灵活用工', icon: '/static/images/codefun/8193a279dfd933588d29a34aa2aeefe7.png' },
{ id: 2, name: '助农金融', icon: '/static/images/codefun/b4ac84c6c037b7ab92fa371141ad88e0.png' },
{ id: 3, name: '农资交易', icon: '/static/images/codefun/1ec00e65ad474de76b9efc3691acbbd1.png' },
{ id: 4, name: '农机服务', icon: '/static/images/codefun/d6d66fa5331d2be60c7b0b66de6477e5.png' },
{ id: 5, name: '更多', icon: '/static/images/codefun/aeaf23bed23b217a39c0c82cffb1bfb5.png' },
],
// 灵活用工业务
flexibleEmploymentServices: [
{
id: 1,
image: '/static/images/codefun/ce0934e2137d43264df416c99d587cad.png',
title: '季节性用工',
description: '三农区域灵活用工服务',
actionText: '去发布',
},
{
id: 2,
image: '/static/images/codefun/8b6fa6d1f9b4e2a53a33619c1f8ccff4.png',
title: '农机手调度',
description: '专业人员作业安排',
actionText: '去预约',
},
{
id: 3,
image: '/static/images/codefun/06319419d17b7630c1d5bc415bcd26ef.png',
title: '作业质量评价',
description: '农机定位精度≤50米',
actionText: '去评价',
},
],
// 助农金融产品
financialProducts: [
{
id: 1,
image: '/static/images/codefun/c6120d23a50c05f74836335d75fc42e5.png',
name: '惠农贷',
subName: '振兴贷',
actionText: '去对比',
},
{
id: 2,
image: '/static/images/codefun/c7e55ddfc537c95cfba831af3dee0dd7.png',
name: '灾害险',
subName: '价格险',
actionText: '去选择',
},
{
id: 3,
image: '/static/images/codefun/4f8282213bb5e0b881853f4a2e005c99.png',
description: '本县576人已申请',
actionText: '去申请',
},
],
// 农资交易商品
agriculturalProducts: [
{
id: 1,
name: '有机肥料',
price: '¥220',
badge: '政府背书',
image: '/static/images/codefun/6082011896d83113283c720e943a4999.png',
},
{
id: 2,
name: '种子套装',
price: '¥65',
badge: '政府背书',
image: '/static/images/codefun/e812ea5af6105a808af058cb0796b7ee.png',
},
{
id: 3,
name: '复合肥',
price: '¥125',
badge: '政府背书',
image: '/static/images/codefun/7a4ec325d59361d6716c2ec1394550bb.png',
},
{
id: 4,
name: '养殖饲料',
price: '¥65',
badge: '政府背书',
image: '/static/images/codefun/e1d1e83ba1f6592210e646c5b6ca5b53.png',
},
],
// 农机服务
farmMachineryServices: [
{
id: 1,
image: '/static/images/codefun/e9d22bb18119b11750e4ac8206873fed.png',
title: '找农机',
description: '谁家农机闲着？急用！',
actionText: '去找农机',
actionImage: '/static/images/codefun/26a0e2c4b4289791cb8aa94f57e5fead.png',
bgColor: '#fff7ec',
},
{
id: 2,
image: '/static/images/codefun/7e9e9f3d417af907691d5c49986b0437.png',
title: '干农活',
description: '我有农机具，接个活！',
actionText: '去找农机',
actionImage: '/static/images/codefun/296e5d1e691ccb3507907c50da02c2ae.png',
bgColor: '#f5fcff',
},
],
// 农机案例
machineryCases: [
{
id: 1,
name: '绿鲜农场',
image: '/static/images/codefun/7d1feb7eb973f087dcabf21b283162bc.png',
},
{
id: 2,
name: '绿鲜农场',
image: '/static/images/codefun/8d11e3cbcb918502bb6582a24cddb930.png',
},
],
// 农机服务类型
machineryServiceTypes: [
{
id: 1,
name: '包装设计',
image: '/static/images/codefun/ddc5246c61923da3e926e67230daffd1.png',
},
{
id: 2,
name: '区域品牌',
image: '/static/images/codefun/15c2bc548cf753d64ccb42b694f02ef5.png',
},
{
id: 3,
name: '地标申报',
image: '/static/images/codefun/4c7a07198f2fefd52854cf70f21ac8b1.png',
},
],
// 技能培训日历
trainingCalendar: {
days: [
{ id: 1, month: '09月', day: '10' },
{ id: 2, month: '09月', day: '11' },
{ id: 3, month: '09月', day: '12', active: true },
{ id: 4, month: '09月', day: '13' },
{ id: 5, month: '09月', day: '14' },
{ id: 6, month: '09月', day: '15' },
{ id: 7, month: '09月', day: '16' },
],
trainings: [
{
id: 1,
time: '09:30',
title: '有机农业种植技术',
description: '农技专家指导授课',
actionText: '报名',
badge: '机',
badgeType: 'orange',
},
{
id: 2,
time: '14:00',
title: '有机农业种植技术',
description: '拖拉机专用技能',
actionText: '查看',
badge: '政',
badgeType: 'blue',
},
{
id: 3,
time: '09:30',
title: '有机农业种植技术',
description: '农技专家指导授课',
actionText: '报名',
badge: '证',
badgeType: 'green',
},
],
},
})
// 菜单点击事件
function onMenuItemClick(item: any) {
console.log('点击菜单项:', item)
// 在这里添加具体的菜单点击逻辑
}
// 查看更多灵活用工业务
function onViewMoreFlexibleEmployment() {
console.log('查看更多灵活用工业务')
// 在这里添加具体的查看逻辑
// 跳转到灵活用工界面
Navigate.to('/pages/linghuoyonggong/linghuoyonggong')
}
// 助农金融产品点击事件
function onFinancialProductClick(product: any) {
console.log('点击助农金融产品:', product)
// 在这里添加具体的产品点击逻辑
}
// 查看全部助农金融产品
function onViewAllFinancialProducts() {
console.log('查看全部助农金融产品')
// 在这里添加具体的查看逻辑
}
// 农资商品点击事件
function onAgriculturalProductClick(product: any) {
console.log('点击农资商品:', product)
// 在这里添加具体的商品点击逻辑
}
// 农机服务点击事件
function onFarmMachineryServiceClick(service: any) {
console.log('点击农机服务:', service)
// 在这里添加具体的服务点击逻辑
}
// 技能培训点击事件
function onTrainingClick(training: any) {
console.log('点击技能培训:', training)
// 在这里添加具体的培训点击逻辑
}
// 查看全部农机案例
function onViewAllMachineryCases() {
console.log('查看全部农机案例')
// 在这里添加具体的查看逻辑
}
</script>
......@@ -26,7 +274,7 @@
<view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-relative group_3"
>
<text class="font text">服务</text>
<text class="font text">{{ pageData.header.title }}</text>
<image
class="image_6 pos_2"
src="/static/images/codefun/2d7ca3ba49afaa9f885afb0ba601a403.png"
......@@ -35,107 +283,65 @@
<view class="codefun-flex-col mt-15">
<view class="codefun-flex-row codefun-items-center section_2">
<text class="codefun-shrink-0 font_2">岗位</text>
<text class="codefun-shrink-0 font_3 codefun-ml-2">32</text>
<text class="codefun-shrink-0 font_3 codefun-ml-2">{{
pageData.jobInfo.jobCount
}}</text>
<view
class="codefun-flex-col codefun-justify-start codefun-shrink-0 codefun-relative group_4 codefun-ml-2"
>
<text class="font_2">个， 需求</text>
<text class="font_3 pos_3">215</text>
<text class="font_3 pos_3">{{ pageData.jobInfo.demandCount }}</text>
<text class="font_2 text_2 pos_4">人， 已匹配</text>
<text class="font_3 pos_5">186</text>
<text class="font_3 pos_5">{{ pageData.jobInfo.matchedCount }}</text>
<text class="font_2 pos_6">人</text>
</view>
</view>
<view class="codefun-flex-row equal-division section_3 codefun-mt-12">
<view class="codefun-flex-col codefun-items-center equal-division-item_1">
<image
class="image_7"
src="/static/images/codefun/8193a279dfd933588d29a34aa2aeefe7.png"
/>
<text class="font_4 text_3 mt-13">灵活用工</text>
</view>
<view
class="codefun-flex-col codefun-items-center equal-division-item_2 equal-division-item"
v-for="item in pageData.menuItems"
:key="item.id"
class="codefun-flex-col codefun-items-center"
:class="{
'equal-division-item_1': item.id === 1,
'equal-division-item_2 equal-division-item': item.id === 2,
'equal-division-item_2 group_34': item.id === 3,
'equal-division-item_9 group_35': item.id === 4,
'equal-division-item_10 group_1': item.id === 5,
}"
@click="onMenuItemClick(item)"
>
<image
class="image_7"
src="/static/images/codefun/b4ac84c6c037b7ab92fa371141ad88e0.png"
/>
<text class="font_4 text_4 mt-13">助农金融</text>
</view>
<view class="codefun-flex-col codefun-items-center equal-division-item_2 group_34">
<image
class="image_7"
src="/static/images/codefun/1ec00e65ad474de76b9efc3691acbbd1.png"
/>
<text class="font_4 text_5 mt-13">农资交易</text>
</view>
<view class="codefun-flex-col codefun-items-center equal-division-item_9 group_35">
<image
class="image_7"
src="/static/images/codefun/d6d66fa5331d2be60c7b0b66de6477e5.png"
/>
<text class="font_4 text_6 mt-13">农机服务</text>
</view>
<view class="codefun-flex-col codefun-items-center equal-division-item_10 group_1">
<image
class="image_7"
src="/static/images/codefun/aeaf23bed23b217a39c0c82cffb1bfb5.png"
/>
<text class="font_4 text_7 mt-13">更多</text>
<image class="image_7" :src="item.icon" />
<text class="font_4" :class="`text_${item.id + 2} mt-13`">{{ item.name }}</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline codefun-mt-24">
<text class="font_5 text_8">灵活用工</text>
<text class="font_6 text_9">更多</text>
<text class="font_6 text_9" @click="onViewMoreFlexibleEmployment">更多</text>
</view>
</view>
</view>
<view class="codefun-flex-col group_8">
<view class="codefun-flex-col section_4">
<view class="codefun-flex-col section_4 flex gap-4">
<view v-for="service in pageData.flexibleEmploymentServices" :key="service.id">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<view class="codefun-flex-row">
<image class="image_8" src="/static/images/codefun/ce0934e2137d43264df416c99d587cad.png" />
<image class="image_8" :src="service.image" />
<view class="codefun-flex-col codefun-items-start group_9 ml-11">
<text class="font_7">季节性用工</text>
<text class="font_9 text_11 mt-11">三农区域灵活用工服务</text>
<text class="font_7">{{ service.title }}</text>
<text class="font_9 text_11 mt-11">{{ service.description }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1">
<text class="font_8 text_10">去发布</text>
</view>
</view>
<view class="codefun-flex-col mt-19">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<view class="codefun-flex-row">
<image
class="image_9"
src="/static/images/codefun/8b6fa6d1f9b4e2a53a33619c1f8ccff4.png"
/>
<view class="codefun-flex-col codefun-items-start group_10 ml-11">
<text class="font_7 text_12">农机手调度</text>
<text class="font_10 text_14 mt-11">专业人员作业安排</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_8 text_13">去预约</text>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-mt-18">
<view class="codefun-flex-row codefun-items-center">
<image
class="image_9"
src="/static/images/codefun/06319419d17b7630c1d5bc415bcd26ef.png"
/>
<view class="codefun-flex-col codefun-items-start ml-11">
<text class="font_7 text_15">作业质量评价</text>
<text class="font_9 text_17 mt-11">农机定位精度≤50米</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_15">
<text class="font_8 text_16">去评价</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="{
'text-wrapper_1': service.id === 1,
'text-wrapper': service.id === 2,
'text-wrapper_15': service.id === 3,
}"
>
<text class="font_8" :class="`text_${9 + service.id}`">{{ service.actionText }}</text>
</view>
</view>
</view>
......@@ -143,106 +349,82 @@
<view class="codefun-flex-col codefun-mt-24">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_11">
<text class="font_5 text_18">助农金融</text>
<text class="font_6 text_19">全部</text>
<text class="font_6 text_19" @click="onViewAllFinancialProducts">全部</text>
</view>
<view class="codefun-flex-row equal-division_2 section_1">
<view class="codefun-flex-col group_12 group_36">
<image
class="codefun-self-center image_10"
src="/static/images/codefun/c6120d23a50c05f74836335d75fc42e5.png"
/>
<text class="codefun-self-center font_11 text_20">惠农贷</text>
<text class="codefun-self-center font_11">振兴贷</text>
<template v-for="(product, index) in pageData.financialProducts" :key="product.id">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_2 view_1"
class="codefun-flex-col group_12"
:class="{
group_36: product.id === 1,
group_32: product.id === 2,
group_33: product.id === 3,
}"
@click="onFinancialProductClick(product)"
>
<text class="font_12 text_25">去对比</text>
</view>
</view>
<view class="section_5 horiz-divider" />
<view class="codefun-flex-col group_12 group_32">
<image
class="codefun-self-center image_10"
src="/static/images/codefun/c7e55ddfc537c95cfba831af3dee0dd7.png"
/>
<text class="codefun-self-center font_11 text_21">灾害险</text>
<text class="codefun-self-center font_11">价格险</text>
<image class="codefun-self-center image_10" :src="product.image" />
<template v-if="product.name">
<text class="codefun-self-center font_11" :class="`text_${19 + product.id}`">{{
product.name
}}</text>
<text class="codefun-self-center font_11">{{ product.subName }}</text>
</template>
<template v-else>
<text class="codefun-self-stretch font_11 text_22">{{ product.description }}</text>
</template>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_14"
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch"
:class="{
'text-wrapper_2 view_1': product.id === 1,
'text-wrapper_14': product.id === 2,
'text-wrapper_2 view_2': product.id === 3,
}"
>
<text class="font_12 text_24">去选择</text>
<text class="font_12" :class="`text_${24 + product.id}`">{{
product.actionText
}}</text>
</view>
</view>
<view class="section_5 horiz-divider" />
<view class="codefun-flex-col group_12 group_33">
<image
class="codefun-self-center image_10"
src="/static/images/codefun/4f8282213bb5e0b881853f4a2e005c99.png"
/>
<text class="codefun-self-stretch font_11 text_22">本县576人已申请</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_2 view_2"
>
<text class="font_12 text_25">去申请</text>
</view>
</view>
v-if="index < pageData.financialProducts.length - 1"
class="section_5 horiz-divider"
/>
</template>
</view>
</view>
<view class="codefun-flex-col codefun-mt-24">
<text class="codefun-self-start font_5 text_26">农资交易</text>
<view class="codefun-flex-col codefun-self-stretch section_6 codefun-mt-16">
<view class="grid">
<view class="codefun-flex-col grid-item_1">
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch section_7"
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
>
<text class="font_13">政府背书</text>
</view>
</view>
<text class="codefun-self-start font text_27 codefun-mt-10">有机肥料</text>
<text class="codefun-self-start font_1 text_64 codefun-mt-10">¥220</text>
</view>
<view class="codefun-flex-col grid-item">
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch section_8"
v-for="product in pageData.agriculturalProducts"
:key="product.id"
class="codefun-flex-col"
:class="{
'grid-item_1': product.id === 1 || product.id === 3,
'grid-item': product.id === 2,
'grid-item_3': product.id === 4,
}"
@click="onAgriculturalProductClick(product)"
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
>
<text class="font_13">政府背书</text>
</view>
</view>
<text class="codefun-self-start font text_1 codefun-mt-10">种子套装</text>
<text class="codefun-self-start font_14 text_28 codefun-mt-10">¥65</text>
</view>
<view class="codefun-flex-col grid-item_1">
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch section_9"
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
>
<text class="font_13">政府背书</text>
</view>
</view>
<text class="codefun-self-start font text_67 codefun-mt-10">复合肥</text>
<text class="codefun-self-start font_1 text_65 codefun-mt-10">¥125</text>
</view>
<view class="codefun-flex-col grid-item_3">
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch section_10"
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch"
:class="{
section_7: product.id === 1,
section_8: product.id === 2,
section_9: product.id === 3,
section_10: product.id === 4,
}"
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
>
<text class="font_13">政府背书</text>
<text class="font_13">{{ product.badge }}</text>
</view>
</view>
<text class="codefun-self-start font text_68 codefun-mt-10">养殖饲料</text>
<text class="codefun-self-start font_14 text_66 codefun-mt-10">¥65</text>
<text class="codefun-self-start font text_27 codefun-mt-10">{{ product.name }}</text>
<text class="codefun-self-start font_1 text_27 codefun-mt-10">{{ product.price }}</text>
</view>
</view>
<view
......@@ -256,51 +438,48 @@
<text class="codefun-self-start font_5">一站式解决农机问题</text>
<view class="codefun-flex-col codefun-self-stretch section_11">
<view class="codefun-flex-row equal-division_3">
<view class="codefun-flex-col equal-division-item_3 section_12">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<image
class="image_11"
src="/static/images/codefun/e9d22bb18119b11750e4ac8206873fed.png"
/>
<text class="font_5 text_30 ml-7">找农机</text>
</view>
<text class="codefun-self-start font_10 text_32 codefun-mt-10"
>谁家农机闲着？急用！</text
>
<view
class="codefun-flex-row codefun-justify-end codefun-items-center codefun-self-stretch group_13 codefun-mt-10"
v-for="service in pageData.farmMachineryServices"
:key="service.id"
class="codefun-flex-col equal-division-item_3"
:class="{
section_12: service.id === 1,
'section_13 ml-11': service.id === 2,
}"
@click="onFarmMachineryServiceClick(service)"
>
<image
class="image_12 image_13"
src="/static/images/codefun/26a0e2c4b4289791cb8aa94f57e5fead.png"
/>
<text class="font_10 text_34">去找农机</text>
</view>
</view>
<view class="codefun-flex-col equal-division-item_3 section_13 ml-11">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<image
class="image_11"
src="/static/images/codefun/7e9e9f3d417af907691d5c49986b0437.png"
/>
<text class="font_5 text_31 ml-7">干农活</text>
</view>
<text class="codefun-self-start font_10 text_33 codefun-mt-10"
>我有农机具，接个活！</text
<image class="image_11" :src="service.image" />
<text class="font_5" :class="`text_${29 + service.id} ml-7`">{{
service.title
}}</text>
</view>
<text
class="codefun-self-start font_10"
:class="`text_${31 + service.id} codefun-mt-10`"
>{{ service.description }}</text
>
<view
class="codefun-flex-row codefun-justify-end codefun-items-center codefun-self-stretch codefun-mt-10"
class="codefun-flex-row codefun-justify-end codefun-items-center codefun-self-stretch"
:class="{
'group_13 codefun-mt-10': service.id === 1,
'codefun-mt-10': service.id === 2,
}"
>
<image
class="image_12 image_14"
src="/static/images/codefun/296e5d1e691ccb3507907c50da02c2ae.png"
class="image_12"
:class="{ image_13: service.id === 1, image_14: service.id === 2 }"
:src="service.actionImage"
/>
<text class="font_10 text_35">去找农机</text>
<text class="font_10" :class="`text_${33 + service.id}`">{{
service.actionText
}}</text>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_4 codefun-mt-14"
@click="Navigate.to('/pages/nongjifuwu/nongjifuwu')"
>
<text class="font_15 text_29">作业预约</text>
</view>
......@@ -310,45 +489,38 @@
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_14"
>
<text class="font_5">一站式解决农机问题</text>
<text class="font_6 text_37">全部案例</text>
<text class="font_6 text_37" @click="onViewAllMachineryCases">全部案例</text>
</view>
<view class="codefun-flex-col codefun-self-stretch section_14">
<view class="codefun-flex-row">
<view class="codefun-flex-col codefun-justify-start equal-division-item_3 section_15">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
v-for="item in pageData.machineryCases"
:key="item.id"
class="codefun-flex-col codefun-justify-start equal-division-item_3"
:class="{
section_15: item.id === 1,
'section_16 ml-11': item.id === 2,
}"
>
<text class="font_16">绿鲜农场</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start equal-division-item_3 section_16 ml-11">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
>
<text class="font_16">绿鲜农场</text>
<text class="font_16">{{ item.name }}</text>
</view>
</view>
</view>
<view class="codefun-flex-col group_15 codefun-mt-24">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_16">
<view class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper">
<image
class="image_16"
src="/static/images/codefun/ddc5246c61923da3e926e67230daffd1.png"
/>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper">
<image
class="image_15"
src="/static/images/codefun/15c2bc548cf753d64ccb42b694f02ef5.png"
/>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper view"
v-for="serviceType in pageData.machineryServiceTypes"
:key="serviceType.id"
class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper"
:class="{ view: serviceType.id === 3 }"
>
<image
class="image_15"
src="/static/images/codefun/4c7a07198f2fefd52854cf70f21ac8b1.png"
class="image_16"
:class="{ image_15: serviceType.id !== 1 }"
:src="serviceType.image"
/>
</view>
</view>
......@@ -377,96 +549,99 @@
<view class="codefun-flex-col codefun-self-stretch codefun-mt-18">
<view class="codefun-flex-col codefun-justify-start section_17">
<view class="codefun-flex-row equal-division_4">
<view class="codefun-flex-col equal-division-item_4 group_17">
<text class="codefun-self-start font_10">09月</text>
<text class="codefun-self-center font_18 text_42 codefun-mt-6">10</text>
</view>
<view class="codefun-flex-col equal-division-item_4 group_21">
<text class="codefun-self-start font_10">09月</text>
<text class="codefun-self-center font_18 text_43 codefun-mt-6">11</text>
</view>
<view class="codefun-flex-col equal-division-item_4 group_18">
<text class="codefun-self-start font_6 text_41">09月</text>
<text class="codefun-self-center font_18 text_44 mt-7">12</text>
<view class="codefun-self-start section_18 mt-7" />
</view>
<view class="codefun-flex-col equal-division-item_4 group_23">
<text class="codefun-self-start font_10">09月</text>
<text class="codefun-self-center font_18 text_45 codefun-mt-6">13</text>
</view>
<view class="codefun-flex-col equal-division-item_4 group_24">
<text class="codefun-self-start font_10">09月</text>
<text class="codefun-self-center font_18 text_46 codefun-mt-6">14</text>
</view>
<view class="codefun-flex-col equal-division-item_4 group_25">
<text class="codefun-self-start font_10">09月</text>
<text class="codefun-self-center font_18 text_47 codefun-mt-6">15</text>
</view>
<view class="codefun-flex-col codefun-items-start equal-division-item_4 group_26">
<text class="font_10">09月</text>
<text class="font_18 text_48 codefun-mt-6">16</text>
<view
v-for="day in pageData.trainingCalendar.days"
:key="day.id"
class="codefun-flex-col equal-division-item_4"
:class="{
group_17: day.id === 1,
group_21: day.id === 2,
group_18: day.id === 3,
group_23: day.id === 4,
group_24: day.id === 5,
group_25: day.id === 6,
group_26: day.id === 7,
}"
>
<text
class="codefun-self-start font_10"
:class="{ font_6: day.active, text_41: day.active }"
>{{ day.month }}</text
>
<text
class="codefun-self-center font_18"
:class="`text_${41 + day.id} ${day.id === 3 ? 'mt-7' : 'codefun-mt-6'}`"
>{{ day.day }}</text
>
<view v-if="day.active" class="codefun-self-start section_18 mt-7" />
</view>
</view>
</view>
<template v-for="training in pageData.trainingCalendar.trainings" :key="training.id">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-relative section_19 codefun-mt-10"
v-if="training.badgeType !== 'blue'"
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-relative"
:class="{
'section_19 codefun-mt-10': training.id === 1 || training.id === 3,
}"
@click="onTrainingClick(training)"
>
<view class="codefun-flex-col">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<text class="font_19 text_49">09:30</text>
<text class="font_20 text_49 text_50 ml-15">有机农业种植技术</text>
</view>
<text class="codefun-self-center font_21 text_49 text_52 mt-11">农技专家指导授课</text>
<text class="font_19 text_49">{{ training.time }}</text>
<text class="font_20 text_49" :class="`text_${49 + training.id} ml-15`">{{
training.title
}}</text>
</view>
<text
class="codefun-self-center font_21 text_49"
:class="`text_${51 + training.id} mt-11`"
>{{ training.description }}</text
>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6">
<text class="font_8 text_51">报名</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6"
>
<text class="font_8" :class="`text_${50 + training.id}`">{{
training.actionText
}}</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_7 pos_7"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="{
'text-wrapper_7 pos_7': training.id === 1,
'text-wrapper_10 pos_8': training.id === 3,
}"
>
<text class="font_13 text_53">机</text>
<text class="font_13" :class="`text_${52 + training.id}`">{{
training.badge
}}</text>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between section_20 codefun-mt-10">
<view v-else class="codefun-flex-row codefun-justify-between section_20 codefun-mt-10">
<view class="codefun-flex-col codefun-self-center">
<view class="codefun-flex-row codefun-items-center">
<text class="font_19 text_49">14:00</text>
<text class="font_20 text_49 text_59 ml-15">有机农业种植技术</text>
<text class="font_19 text_49">{{ training.time }}</text>
<text class="font_20 text_49 text_59 ml-15">{{ training.title }}</text>
</view>
<view class="codefun-flex-row codefun-items-end group_27 codefun-mt-8">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_9"
>
<text class="font_13 text_56">政</text>
<text class="font_13 text_56">{{ training.badge }}</text>
</view>
<text class="font_9 text_49 text_57 codefun-ml-28">拖拉机专用技能</text>
<text class="font_9 text_49 text_57 codefun-ml-28">{{
training.description
}}</text>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_8"
>
<text class="font_6 text_55">查看</text>
</view>
</view>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-relative section_19 codefun-mt-10"
>
<view class="codefun-flex-col">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<text class="font_19 text_49">09:30</text>
<text class="font_20 text_49 text_50 ml-15">有机农业种植技术</text>
</view>
<text class="codefun-self-center font_21 text_49 text_52 mt-11">农技专家指导授课</text>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6">
<text class="font_8 text_51">报名</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_10 pos_8"
>
<text class="font_13 text_58">证</text>
<text class="font_6 text_55">{{ training.actionText }}</text>
</view>
</view>
</template>
</view>
</view>
</view>
......@@ -521,7 +696,7 @@
padding-bottom: 20rpx;
.section {
padding: 2.28rpx 26.88rpx 53.02rpx 28rpx;
padding: 0 28rpx 30rpx 28rpx;
background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
background-size: 100% 100%;
background-repeat: no-repeat;
......@@ -858,7 +1033,7 @@
}
.section_6 {
margin-right: 2.62rpx;
padding: 24rpx 24rpx 20rpx;
padding: 24rpx 24rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
......@@ -919,6 +1094,15 @@
background-size: 100% 100%;
background-repeat: no-repeat;
}
.text_27 {
margin-left: 25.28rpx;
line-height: 29.48rpx;
}
.font_1 {
font-size: 32rpx;
line-height: 23.38rpx;
color: #5db66f;
}
.text_1 {
margin-left: 24.74rpx;
line-height: 29.6rpx;
......@@ -946,6 +1130,15 @@
background-size: 100% 100%;
background-repeat: no-repeat;
}
.text_27 {
margin-left: 25.28rpx;
line-height: 29.48rpx;
}
.font_1 {
font-size: 32rpx;
line-height: 23.38rpx;
color: #5db66f;
}
.text_68 {
margin-left: 27.12rpx;
line-height: 29.88rpx;
......
src/pages/linghuoyonggong/linghuoyonggong.vue 0 → 100644
<script setup lang="ts">
import { reactive } from 'vue'
// 页面数据
const pageData = reactive({
// 分类标签
categoryTabs: [
{ id: 1, name: '全部' },
{ id: 2, name: '种植' },
{ id: 3, name: '养殖' },
{ id: 4, name: '采摘' },
{ id: 5, name: '其他' },
],
// 用工类型标签
employmentTabs: [
{ id: 1, name: '推荐用工' },
{ id: 2, name: '我的用工' },
],
// 用工列表
employmentList: [
{
id: 1,
image: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=f33c4419bab5b0fb3a63b5b3006059f2.png',
title: '蔬菜种植',
duration: '预计3天',
people: '需要5人',
price: '150元/天',
distance: '3.2km',
rating: '4',
actionText: '我想去',
icons: {
duration:
'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=56353ebdea095baedbcb33fc53f68a03.png',
people: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=85c3b17d5049630ed51fd57b701f047f.png',
price: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=9e806e0315ec11c12ec9e2b6870dd395.png',
location:
'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=39c448ae66659127e7bcd035ea16e0de.png',
},
},
{
id: 2,
image: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=f33c4419bab5b0fb3a63b5b3006059f2.png',
title: '果树修剪',
duration: '预计5天',
people: '需要3人',
price: '180元/天',
distance: '2.1km',
rating: '5',
actionText: '我想去',
icons: {
duration:
'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=56353ebdea095baedbcb33fc53f68a03.png',
people: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=85c3b17d5049630ed51fd57b701f047f.png',
price: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=9e806e0315ec11c12ec9e2b6870dd395.png',
location:
'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=39c448ae66659127e7bcd035ea16e0de.png',
},
},
{
id: 3,
image: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=f33c4419bab5b0fb3a63b5b3006059f2.png',
title: '水稻插秧',
duration: '预计7天',
people: '需要8人',
price: '120元/天',
distance: '5.6km',
rating: '3',
actionText: '我想去',
icons: {
duration:
'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=56353ebdea095baedbcb33fc53f68a03.png',
people: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=85c3b17d5049630ed51fd57b701f047f.png',
price: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=9e806e0315ec11c12ec9e2b6870dd395.png',
location:
'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=39c448ae66659127e7bcd035ea16e0de.png',
},
},
],
// 底部图片
bottomImage:
'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=da7c9ea8588c4314497b9c7ce7d4e632.png',
})
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
console.log('点击分类标签:', tab)
// 在这里添加具体的分类标签点击逻辑
}
// 用工类型标签点击事件
function onEmploymentTabClick(tab: any) {
console.log('点击用工类型标签:', tab)
// 在这里添加具体的用工类型标签点击逻辑
}
// 用工项点击事件
function onEmploymentItemClick(item: any) {
console.log('点击用工项:', item)
// 在这里添加具体的用工项点击逻辑
}
// "我想去"按钮点击事件
function onActionButtonClick(item: any) {
console.log('点击"我想去"按钮:', item)
// 在这里添加具体的"我想去"按钮点击逻辑
}
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-flex-col codefun-self-stretch">
<view class="codefun-mt-14 codefun-flex-row group_2">
<view
v-for="tab in pageData.categoryTabs"
:key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="[tab.id === 1 ? 'text-wrapper' : 'text-wrapper_2', tab.id > 1 ? 'codefun-ml-12' : '']"
@click="onCategoryTabClick(tab)"
>
<text class="font_2" :class="[`text_${tab.id + 1}`]">
{{ tab.name }}
</text>
</view>
</view>
<view class="codefun-mt-14 codefun-flex-col group_3">
<view class="codefun-flex-row section_2">
<view
v-for="tab in pageData.employmentTabs"
:key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="[
tab.id === 1 ? 'text-wrapper_3' : '',
tab.id > 1 ? 'codefun-self-start' : '',
tab.id > 1 ? 'ml-55' : '',
]"
@click="onEmploymentTabClick(tab)"
>
<text class="font_2" :class="[`text_${tab.id + 6}`]">
{{ tab.name }}
</text>
</view>
</view>
<view class="codefun-flex-col codefun-relative list">
<view
class="codefun-flex-col list-item"
v-for="item in pageData.employmentList"
:key="item.id"
@click="onEmploymentItemClick(item)"
>
<view class="codefun-flex-row">
<image class="image_7" :src="item.image" />
<view class="codefun-flex-col codefun-flex-1 codefun-self-center group_4">
<text class="codefun-self-start font">{{ item.title }}</text>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-11"
>
<image class="image_9" :src="item.icons.duration" />
<text class="font_4">{{ item.duration }}</text>
<image class="image_9" :src="item.icons.people" />
<text class="font_4">{{ item.people }}</text>
<image class="image_9" :src="item.icons.price" />
<text class="font_4 text_10">{{ item.price }}</text>
</view>
</view>
<image class="codefun-self-start image_8" :src="item.icons.location" />
<text class="codefun-self-start font_3 text_9">{{ item.distance }}</text>
</view>
<view class="codefun-mt-8 codefun-flex-row codefun-justify-between codefun-items-center">
<view class="flex-center">
<fui-rate :score="item.rating" :size="36" />
<text class="font_5 ml-1">{{ item.rating }}</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
@click.stop="onActionButtonClick(item)"
>
<text class="font_6 text_12">{{ item.actionText }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<image class="codefun-self-end image_7 image_12 mt-269" :src="pageData.bottomImage" />
</view>
</template>
<style scoped lang="scss">
.mt-19 {
margin-top: 38rpx;
}
.ml-55 {
margin-left: 110rpx;
}
.mt-11 {
margin-top: 22rpx;
}
.ml-5 {
margin-left: 10rpx;
}
.mt-269 {
margin-top: 538rpx;
}
.page {
padding-bottom: 128rpx;
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.section {
padding: 26rpx 28rpx 26rpx 36rpx;
background-color: #5db66f;
mix-blend-mode: NOTTHROUGH;
.image {
border-radius: 64rpx;
width: 108rpx;
height: 42rpx;
}
.image_2 {
mix-blend-mode: NOTTHROUGH;
width: 34rpx;
height: 22rpx;
}
.image_3 {
mix-blend-mode: NOTTHROUGH;
width: 30rpx;
height: 22rpx;
}
.image_4 {
width: 48rpx;
height: 22rpx;
}
.group {
padding: 8rpx 0 8rpx 6rpx;
.image_6 {
mix-blend-mode: NOTTHROUGH;
width: 14rpx;
height: 26rpx;
}
.pos_2 {
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.text {
color: #ffffffe6;
line-height: 29.5rpx;
}
.image_5 {
width: 44rpx;
height: 44rpx;
}
.pos {
position: absolute;
right: 0.66rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
.group_2 {
padding: 0 28rpx;
.text-wrapper {
padding: 24rpx 0;
flex: 1 1 120rpx;
background-color: #5db66f;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.text_2 {
color: #ffffff;
}
}
.text-wrapper_2 {
flex: 1 1 120rpx;
padding: 24rpx 0;
background-color: #ffffff;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.text_3 {
line-height: 25.88rpx;
}
.text_4 {
line-height: 26.16rpx;
}
.text_5 {
line-height: 25.96rpx;
}
.text_6 {
line-height: 25.68rpx;
}
}
}
.group_3 {
padding: 0 28rpx;
height: 685rpx;
.section_2 {
padding-bottom: 8rpx;
background-color: #ffffff66;
border-radius: 32rpx;
border-left: solid 2rpx #ffffffcc;
border-right: solid 2rpx #ffffffcc;
border-top: solid 2rpx #ffffffcc;
border-bottom: solid 2rpx #ffffffcc;
.text-wrapper_3 {
padding: 24rpx 0 52rpx;
background-color: #ffffff;
border-radius: 32rpx;
width: 348rpx;
height: 102rpx;
.text_7 {
color: #333333;
line-height: 26.16rpx;
}
}
.text_8 {
margin-top: 20rpx;
color: #5db66f;
}
}
.list {
margin-top: -44rpx;
padding: 0 24rpx;
background-color: #ffffff;
border-radius: 12.76rpx;
mix-blend-mode: NOTTHROUGH;
.list-item {
padding: 20rpx 0;
border-bottom: solid 2rpx #eeeeee;
.group_4 {
margin-left: 16rpx;
.image_9 {
width: 24rpx;
height: 24rpx;
}
.font_4 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 22rpx;
color: #999999;
}
.text_10 {
line-height: 23.36rpx;
}
}
.image_8 {
margin-left: 8rpx;
margin-top: 16rpx;
width: 22rpx;
height: 26rpx;
}
.font_3 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 17.6rpx;
color: #5db66f;
}
.text_9 {
margin: 20rpx 16rpx 0 8rpx;
line-height: 19.42rpx;
}
.font_5 {
font-size: 28rpx;
font-family: DingTalk Sans;
color: #999999;
}
.text_11 {
margin-left: 172rpx;
}
.text-wrapper_4 {
padding: 12rpx 0;
background-color: #5db66f;
border-radius: 400rpx;
mix-blend-mode: NOTTHROUGH;
width: 136rpx;
height: 48rpx;
.font_6 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 22rpx;
color: #ffffff;
}
.text_12 {
line-height: 22.18rpx;
}
}
}
}
}
.font_2 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 26.02rpx;
color: #1f2937;
}
.font {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 29.82rpx;
color: #333333;
}
.image_7 {
width: 96rpx;
height: 96rpx;
}
.image_12 {
margin-right: 58rpx;
}
}
</style>
src/pages/mine/index.vue
......@@ -79,8 +79,8 @@
const items = reactive<Recordable[]>([
{
title: '个人资源',
icon: 'level',
title: '我的农场',
icon: 'nongchang2',
disabled: false,
show: true,
handle: () => {
......@@ -212,7 +212,7 @@
height="42"
background="transparent"
/>
<text class="ml-3.5 text-30 text-#333333 font-500">{{ item.title }}</text>
<text class="ml-3.5 text-30 text-#67c17a font-bold">{{ item.title }}</text>
</fui-list-cell>
</fui-list>
<fui-list class="rd-3 overflow-hidden shadow !mt-20rpx" :top-border="false">
......
src/pages/nongchang/nongchang.vue
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import Navigate from '@/utils/page/navigate'
import * as NongChangAPI from '@/api/model/nongchang'
......@@ -59,6 +60,7 @@
name: '柑橘模型',
description: '精准预测柑橘生长周期',
actionText: '查看介绍',
link: '/pages/nongyedamoxing/nongyedamoxing',
},
{
id: 2,
......@@ -66,6 +68,7 @@
name: '作物生长监测',
description: 'AI识别生长状况',
actionText: '查看介绍',
link: '/pages/nongyedamoxing/nongyedamoxing',
},
{
id: 3,
......@@ -73,6 +76,7 @@
name: '产能模型',
description: '基于作物生长状况产能构建模型',
actionText: '查看介绍',
link: '/pages/nongyedamoxing/nongyedamoxing',
},
],
......@@ -252,6 +256,9 @@
function onAgricultureModelClick(model: any) {
console.log('点击农业模型:', model)
// 在这里添加具体的农业模型点击逻辑
// 打开模型详情页面
Navigate.to(model.link)
}
// 基地管理点击事件
......
src/pages/nongjifuwu/nongjifuwu.vue 0 → 100644
<script>
export default {
components: {},
props: {},
data() {
return {}
},
methods: {},
}
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-flex-col group_2">
<view class="codefun-flex-row codefun-justify-between section_2">
<text class="font_2 text_2">服务区域</text>
<view class="codefun-flex-row codefun-items-center">
<text class="font_2 text_3">选择市县乡镇</text>
<image
class="codefun-shrink-0 image_7 codefun-ml-4"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=774cfe989f8417dc655fb301635f5893.png"
/>
</view>
</view>
<view class="codefun-flex-row section_3">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_2 text_4">找农机</text>
</view>
<text class="codefun-self-start font_2 text_5 codefun-ml-56">干农活</text>
</view>
<view class="codefun-flex-col codefun-relative section_4">
<view class="codefun-flex-row group_6">
<image
class="codefun-shrink-0 codefun-self-center image_8"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=1f4e4111336d0f182201176d8c761a37.png"
/>
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-self-center group_4">
<text class="font text_6">大联合收割机</text>
<text class="font_3 text_7">服务范围：市区及周边20公里</text>
<view class="group_5">
<text class="font_6">¥</text>
<text class="font_4 text_8">60</text>
<text class="font_7">/亩</text>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view"
>
<text class="font_5">我有需要</text>
</view>
</view>
<view class="codefun-flex-row group_6">
<view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
<image
class="codefun-shrink-0 image_8"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=e3f873f79cdddaee3655c048852302e3.png"
/>
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-12">
<text class="font text_9">小麦播种机</text>
<text class="font_3 text_10">服务范围：全市各区县</text>
<view class="group_7">
<text class="font_6">¥</text>
<text class="font_4 text_11">60</text>
<text class="font_7">/亩</text>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view_2 codefun-ml-20"
>
<text class="font_5">我有需要</text>
</view>
</view>
<view class="codefun-flex-row group_8">
<view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
<image
class="codefun-shrink-0 image_8"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=da314c458ad5d6714cfe7ee8524ccd9c.png"
/>
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-12">
<text class="font text_12">多功能拖拉机</text>
<text class="font_3 text_13">服务范围：全市各区县</text>
<view class="group_9">
<text class="font_6">¥</text>
<text class="font_4 text_14">60</text>
<text class="font_7">/亩</text>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view_3 codefun-ml-20"
>
<text class="font_5">我有需要</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-relative section_5">
<view class="codefun-shrink-0 section_6" />
<text class="font_8 text_15 pos_4">夏收专享：收割机服务8折优惠</text>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 pos_3">
<text class="font_2 text_16">立即预约</text>
</view>
</view>
<view class="codefun-flex-row group_10">
<view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
<image
class="codefun-shrink-0 image_8"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=3500502108a998fe7f49363a276af806.png"
/>
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-12">
<text class="font">水稻插秧机</text>
<text class="font_3 text_17">服务范围：全市各区县</text>
<view class="group_11">
<text class="font_6">¥</text>
<text class="font_4 text_18">60</text>
<text class="font_7">/亩</text>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view_4 codefun-ml-20"
>
<text class="font_5">我有需要</text>
</view>
</view>
</view>
<view class="codefun-flex-col section_7">
<view class="grid">
<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item">
<text class="font_3 text_19">农机类型</text>
<image
class="image_10"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=a13c36a46232de65d09f43b1720ba29d.png"
/>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_2">
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_9"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=bf7b1672e65ba021aa79827f30014280.png"
/>
<text class="font_3 text_20 codefun-ml-8">作业地点</text>
</view>
<image
class="image_10"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=a13c36a46232de65d09f43b1720ba29d.png"
/>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_4">
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_11"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=206576465476f031295c48dcef261286.png"
/>
<text class="font_3 text_21 codefun-ml-4">作业时间</text>
</view>
<image
class="image_10"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=a13c36a46232de65d09f43b1720ba29d.png"
/>
</view>
<view class="codefun-flex-row codefun-items-center grid-item_4">
<image
class="image_12"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=43220b5bebf6a41ff3f05e6ec94ce9f0.png"
/>
<text class="font_3 text_22 codefun-ml-4">联系方式</text>
</view>
</view>
<view class="codefun-flex-col codefun-mt-12">
<view class="codefun-flex-row codefun-items-center grid-item group_12">
<image
class="image_13"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=a83082710831140b897349a7f3bd46d9.png"
/>
<text class="font_3 text_23 codefun-ml-8">简要说明作业需求</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 codefun-mt-12"
>
<text class="font_8 text_24">发布需求</text>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.page {
padding-bottom: 64rpx;
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.section {
padding: 24rpx 24rpx 24rpx 32rpx;
background-color: #5db66f;
mix-blend-mode: NOTTHROUGH;
.image {
border-radius: 64rpx;
width: 108rpx;
height: 42rpx;
}
.image_2 {
mix-blend-mode: NOTTHROUGH;
width: 34rpx;
height: 22rpx;
}
.image_3 {
mix-blend-mode: NOTTHROUGH;
width: 30rpx;
height: 22rpx;
}
.image_4 {
width: 48rpx;
height: 22rpx;
}
.group {
padding: 8rpx 0;
.image_6 {
mix-blend-mode: NOTTHROUGH;
width: 14rpx;
height: 26rpx;
}
.pos_2 {
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.text {
color: #ffffffe6;
line-height: 29.5rpx;
}
.image_5 {
width: 44rpx;
height: 44rpx;
}
.pos {
position: absolute;
right: 0.66rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
.group_2 {
padding: 16rpx 24rpx;
height: 1598rpx;
.section_2 {
padding: 32rpx 24rpx;
background-color: #ffffff;
border-radius: 16rpx;
.text_2 {
line-height: 25.82rpx;
}
.text_3 {
color: #999999;
line-height: 26.04rpx;
}
.image_7 {
width: 22rpx;
height: 12rpx;
}
}
.section_3 {
margin-top: 24rpx;
padding-bottom: 8rpx;
background-color: #ffffff66;
border-radius: 32rpx;
border: solid 2rpx #ffffffcc;
.text-wrapper {
padding: 24rpx 0 56rpx;
background-color: #ffffff;
border-radius: 32rpx;
width: 348rpx;
height: 102rpx;
.text_4 {
line-height: 26.02rpx;
}
}
.text_5 {
margin-top: 24rpx;
color: #5db66f;
line-height: 25.82rpx;
}
}
.font_2 {
font-size: 28rpx;
line-height: 24.6rpx;
color: #333333;
}
.section_4 {
margin-top: -48rpx;
padding: 0 16rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
.group_6 {
padding: 24rpx 8rpx;
border-bottom: solid 2rpx #eeeeee;
.group_4 {
margin-left: 24rpx;
.text_6 {
line-height: 30.18rpx;
}
.text_7 {
margin-top: 24rpx;
line-height: 22.42rpx;
}
.group_5 {
margin-top: 40rpx;
line-height: 24.6rpx;
.text_8 {
line-height: 24.44rpx;
}
}
}
.view {
margin-top: 112rpx;
}
.text_9 {
line-height: 29.72rpx;
}
.text_10 {
margin-top: 24rpx;
line-height: 22.44rpx;
}
.group_7 {
margin-top: 40rpx;
line-height: 24.6rpx;
.text_11 {
line-height: 24.44rpx;
}
}
.view_2 {
margin-top: 116rpx;
}
}
.group_8 {
padding: 24rpx 8rpx;
.text_12 {
line-height: 30.12rpx;
}
.text_13 {
margin-top: 24rpx;
line-height: 22.44rpx;
}
.group_9 {
margin-top: 40rpx;
line-height: 24.6rpx;
.text_14 {
line-height: 24.44rpx;
}
}
.view_3 {
margin-top: 116rpx;
}
}
.image_8 {
width: 160rpx;
height: 160rpx;
}
.font_6 {
font-size: 24rpx;
line-height: 17.3rpx;
font-weight: 700;
color: #f2130d;
}
.font_4 {
font-size: 32rpx;
line-height: 24.6rpx;
color: #f2130d;
}
.font_7 {
font-size: 24rpx;
line-height: 24.6rpx;
color: #999999;
}
.text-wrapper_2 {
padding: 16rpx 0;
background-color: #5db66f;
border-radius: 400rpx;
mix-blend-mode: NOTTHROUGH;
width: 136rpx;
height: 48rpx;
.font_5 {
font-size: 24rpx;
line-height: 18rpx;
color: #ffffff;
}
}
.section_5 {
margin-right: 4rpx;
overflow: hidden;
border-radius: 16rpx;
background-image: linear-gradient(90deg, #2e7d32 0%, #66bb6a 100%);
border-top: solid 2rpx #eeeeee;
.section_6 {
background-image: linear-gradient(90deg, #2e7d32 0%, #66bb6a 100%);
height: 96rpx;
}
.text_15 {
line-height: 26.02rpx;
}
.pos_4 {
position: absolute;
left: 30.26rpx;
top: 50%;
transform: translateY(-50%);
}
.text-wrapper_3 {
padding: 8rpx 0;
background-color: #ffffff;
border-radius: 12rpx;
width: 146.14rpx;
.text_16 {
color: #2e7d32;
line-height: 25.92rpx;
}
}
.pos_3 {
position: absolute;
right: 29.24rpx;
top: 50%;
transform: translateY(-50%);
}
}
.group_10 {
padding: 32rpx 8rpx 16rpx;
.text_17 {
margin-top: 24rpx;
line-height: 22.44rpx;
}
.group_11 {
margin-top: 40rpx;
line-height: 24.6rpx;
.text_18 {
line-height: 24.44rpx;
}
}
.view_4 {
margin-top: 112rpx;
}
}
}
.section_7 {
margin-top: 24rpx;
padding: 32rpx 8rpx 32rpx 24rpx;
background-color: #ffffff;
border-radius: 16rpx;
.grid {
margin-right: 16rpx;
height: 160rpx;
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 26rpx;
column-gap: 20rpx;
.grid-item_2 {
padding: 16rpx 24rpx;
border-radius: 12rpx;
border: solid 2rpx #eeeeee;
.image_9 {
width: 20rpx;
height: 28rpx;
}
.text_20 {
line-height: 22.06rpx;
}
}
.image_10 {
width: 16rpx;
height: 10rpx;
}
.grid-item_4 {
padding: 16rpx;
border-radius: 12rpx;
border: solid 2rpx #eeeeee;
.image_11 {
width: 28rpx;
height: 29rpx;
}
.text_21 {
line-height: 21.98rpx;
}
.image_12 {
width: 28rpx;
height: 28rpx;
}
.text_22 {
line-height: 22.42rpx;
}
}
}
.grid-item {
padding: 24rpx 16rpx;
border-radius: 12rpx;
border: solid 2rpx #eeeeee;
.text_19 {
line-height: 22.12rpx;
}
.image_13 {
width: 25rpx;
height: 25rpx;
}
.text_23 {
color: #999999;
line-height: 22.32rpx;
}
}
.group_12 {
margin-right: 16rpx;
}
.text-wrapper_4 {
margin-left: 8rpx;
padding: 24rpx 0;
background-color: #ff9800;
border-radius: 200rpx;
.text_24 {
line-height: 25.96rpx;
}
}
}
.font_3 {
font-size: 24rpx;
line-height: 22.16rpx;
color: #555555;
}
.font_8 {
font-size: 28rpx;
line-height: 24.6rpx;
color: #ffffff;
}
}
.font {
font-size: 32rpx;
line-height: 29.8rpx;
color: #333333;
}
}
</style>
src/pages/nongyedamoxing/nongyedamoxing.vue 0 → 100644
<script>
export default {
components: {},
props: {},
data() {
return {}
},
methods: {},
}
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-flex-col codefun-justify-start codefun-relative group">
<view class="codefun-flex-col codefun-justify-start codefun-items-start section_2">
<view class="codefun-flex-col codefun-items-start section_3">
<text class="text_2">柑橘生长模型</text>
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper codefun-mt-16">
<text class="font_12 text_3">智能预测全周期</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-relative group_3">
<view class="codefun-flex-col section_4">
<view class="codefun-flex-row equal-division">
<view class="codefun-flex-col equal-division-item group_4">
<image
class="codefun-self-center image_6"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=1d8e91708cae6b6244d183b5c3eb1c5e.png"
/>
<view
class="codefun-flex-row codefun-justify-center codefun-items-baseline codefun-self-stretch group_7 codefun-mt-8"
>
<text class="font_3 text_4">幼苗</text>
<text class="font_4 codefun-ml-4">15天</text>
</view>
</view>
<view
class="codefun-flex-row codefun-justify-between equal-division-item equal-division-item_2 pl-0!"
>
<image
class="codefun-self-start image_9 image_10"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=ac7a11ec05eb9854a6d3ee34633c53c0.png"
/>
<view class="codefun-flex-col group_6">
<image
class="codefun-self-center image_7"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=5d6c7fea65df7f4528d28301a632acca.png"
/>
<view class="codefun-flex-row codefun-items-baseline codefun-self-center codefun-mt-8">
<text class="font_3">开花</text>
<text class="font_4 codefun-ml-4">35天</text>
</view>
</view>
</view>
<view class="codefun-flex-row codefun-justify-center group_5 equal-division-item_2">
<image
class="codefun-self-center image_9 pos_3"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=ac7a11ec05eb9854a6d3ee34633c53c0.png"
/>
<view class="codefun-flex-col">
<image
class="codefun-self-center image_7"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=23995baf95335d84a302baeadeeeb5d3.png"
/>
<view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-8">
<text class="font_3 text_5">结果</text>
<text class="font_4 codefun-ml-4">60天</text>
</view>
</view>
</view>
</view>
<view class="divider codefun-mt-8" />
<view class="codefun-flex-row codefun-mt-8">
<view class="codefun-flex-col equal-division-item_3 group_9">
<text class="codefun-self-center font_2 text_7 !text-24">105天</text>
<text class="codefun-self-center font_5 text_11 codefun-mt-14">生长周期</text>
</view>
<view class="codefun-flex-col equal-division-item_3 group_9">
<text class="codefun-self-center font_2 text_7 !text-24">25℃</text>
<text class="codefun-self-center font_5 text_11 codefun-mt-14">适宜温度</text>
</view>
<view class="codefun-flex-col equal-division-item_3 group_9">
<text class="codefun-self-center font_2 text_7 !text-24">中等</text>
<text class="codefun-self-center font_5 text_11 codefun-mt-14">水分需求</text>
</view>
<view class="codefun-flex-col equal-division-item_3 group_9">
<text class="codefun-self-center font_2 text_7 !text-24">N-P-K平衡</text>
<text class="codefun-self-center font_5 text_11 codefun-mt-14">肥料推荐</text>
</view>
</view>
</view>
<view class="codefun-flex-col group_12 codefun-mt-24">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<text class="font text_14">实际应用场景</text>
<text class="font_7 text_15">查看全部</text>
</view>
<view class="codefun-flex-row horiz-list group_13 codefun-mt-16">
<view class="codefun-flex-col horiz-list-item section_5">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<image
class="image_11"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=22109e59215c3e6f8e24b54d126d851f.png"
/>
<text class="font_7 text_16 codefun-ml-4">智能预警</text>
</view>
<text class="codefun-self-start font_12 text_18 codefun-mt-10">如何提前预防柑橘黄龙病？</text>
<view class="codefun-flex-col codefun-items-start codefun-self-stretch codefun-mt-10">
<text class="font_5">AI模型预测发病风险，提前7-10天</text>
<text class="font_5">预警</text>
</view>
</view>
<view class="codefun-flex-col horiz-list-item_2 section_6 mx-3.5">
<view class="codefun-flex-row codefun-items-center">
<image
class="image_12"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=93b830e77b49a5d5a885dba853cca4f2.png"
/>
<text class="font_7 text_17 codefun-ml-4">精准施肥</text>
</view>
<text class="font_12 text_19 codefun-mt-10">柑橘园精准水肥管理方案</text>
<view class="codefun-flex-col codefun-items-start equal-division codefun-mt-10">
<text class="font_5">根据生长阶段和土壤监测，</text>
<text class="font_5">智能调配水肥方案</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-mt-24">
<text class="codefun-self-start font text_20">三步上手</text>
<view class="codefun-flex-row codefun-items-start equal-division_2 section_7 codefun-mt-16">
<view class="codefun-flex-col equal-division-item_4 group_16">
<image
class="codefun-self-center image_13"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=8d95c077ff410c467d25f1d02b84cd3c.png"
/>
<view class="codefun-flex-col codefun-self-stretch codefun-mt-20">
<text class="codefun-self-center font_9">数据录入</text>
<text class="codefun-self-stretch font_10 text_23 codefun-mt-4">填写果园基本信息</text>
</view>
</view>
<view class="codefun-flex-col equal-division-item_5 group_17">
<image
class="codefun-self-center image_14"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=e4453ccb0959797614bc6ffb5d62d56f.png"
/>
<view class="codefun-flex-col codefun-self-stretch codefun-mt-16">
<view class="codefun-flex-col codefun-self-stretch group_20">
<image
class="codefun-shrink-0 codefun-self-start image_9 image_16"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=b31cf305e90b1547bca2725e5a2ea5be.png"
/>
<text class="codefun-self-center font_9 text_22">模型选择</text>
</view>
<text class="codefun-self-center font_10 text_24">根据需求选择适用模型</text>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between equal-division-item_6 group_18">
<image
class="codefun-self-start image_9 image_17"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=b31cf305e90b1547bca2725e5a2ea5be.png"
/>
<view class="codefun-flex-col group_19">
<image
class="codefun-self-center image_15"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=a8dc70a912aaa771eddc3a2bd607fdc3.png"
/>
<view class="codefun-flex-col codefun-self-stretch codefun-mt-16">
<text class="codefun-self-center font_9 text_21">查看结果</text>
<text class="codefun-self-stretch font_5 text_25 mt-2">获取生长预测与建议</text>
</view>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-mt-24">
<text class="codefun-self-start font text_26">AI农技助手</text>
<view class="codefun-flex-col codefun-self-stretch codefun-relative section_8 codefun-mt-16">
<text class="codefun-self-start font_2 text_27">Hi~有什么可以帮您吗？</text>
<view class="codefun-flex-col codefun-self-stretch group_21">
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_3">
<text class="font_12 text_28 text_29">如何使用柑橘模型？</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_3 codefun-mt-12"
>
<text class="font_12 text_28 text_30">水肥如何调整？</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_3 codefun-mt-12"
>
<text class="font_12 text_28 text_31">何时适合采摘？</text>
</view>
</view>
<image
class="image_18 pos_4"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=8ecf54ab157b99371d9e1fecfa1ef085.png"
/>
</view>
</view>
<view class="codefun-flex-col codefun-mt-24">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
<text class="font">技术课堂</text>
<text class="font_7 text_32">更多</text>
</view>
<view class="codefun-flex-row section_9">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-center image-wrapper"
>
<image
class="image_19"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=ad2e6d5cc57cc9e4a91adc18b3a155e2.png"
/>
</view>
<view class="codefun-flex-col codefun-flex-1 codefun-self-start group_23 codefun-ml-12">
<text class="codefun-self-start font_12 text_33">胡萝卜高产种植技术要点</text>
<view class="codefun-flex-row codefun-self-stretch codefun-mt-16">
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_20"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=74964a1e25c0e7d8c97198b99483e54a.png"
/>
<text class="font_4 text_34 codefun-ml-4">12:30</text>
</view>
<view class="codefun-flex-row codefun-items-center codefun-ml-20">
<image
class="codefun-shrink-0 image_21"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=e8cae542eda3d68f054b3e0ce2afa242.png"
/>
<text class="font_4 text_35 codefun-ml-6">99</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.page {
padding-bottom: 40rpx;
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
.group {
.section_2 {
background-image: url('https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=c122979639a1f9d27d7c57245ab420a6.png');
background-size: 100% 100%;
background-repeat: no-repeat;
.section_3 {
padding: 184rpx 60rpx 120rpx;
background-image: linear-gradient(270.2deg, #00000000 0.1%, #00000080 99.9%);
mix-blend-mode: NOTTHROUGH;
width: 600rpx;
.text_2 {
color: #ffffff;
font-size: 40rpx;
line-height: 37.2rpx;
text-shadow: 0rpx 4rpx 8rpx #000000b3;
}
.text-wrapper {
padding: 8rpx 0;
background-image: linear-gradient(90deg, #43cf7c 0%, #5db66f00 100%);
border-radius: 200rpx;
width: 340rpx;
.text_3 {
margin-left: 24rpx;
color: #ffffff;
line-height: 26.24rpx;
}
}
}
}
.section {
padding: 32rpx;
background-color: #5db66f;
mix-blend-mode: NOTTHROUGH;
.image {
border-radius: 64rpx;
width: 108rpx;
height: 42rpx;
}
.image_2 {
mix-blend-mode: NOTTHROUGH;
width: 34rpx;
height: 22rpx;
}
.image_3 {
mix-blend-mode: NOTTHROUGH;
width: 30rpx;
height: 22rpx;
}
.image_4 {
width: 48rpx;
height: 22rpx;
}
}
.pos {
position: absolute;
left: 0;
right: 0;
top: 0;
}
}
.group_3 {
margin-top: -68rpx;
padding-left: 28rpx;
.section_4 {
margin-right: 28rpx;
padding-bottom: 12rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
.divider {
margin-right: 20rpx;
margin-left: 20rpx;
background-color: #eeeeee;
height: 2rpx;
}
.equal-division-item_3 {
flex: 1 1 174rpx;
justify-content: center !important;
.text_6 {
line-height: 23.88rpx;
}
.text_10 {
line-height: 22.22rpx;
}
.text_7 {
line-height: 21.98rpx;
}
.text_11 {
line-height: 22.2rpx;
}
.text_8 {
line-height: 26.16rpx;
}
.text-wrapper_2 {
padding: 8rpx 0;
overflow: hidden;
.text_12 {
line-height: 22.1rpx;
}
}
.text_9 {
line-height: 26.02rpx;
}
.font_6 {
font-size: 24rpx;
line-height: 20.18rpx;
color: #666666;
}
.text_13 {
line-height: 22.1rpx;
}
}
.group_8 {
padding: 16rpx;
}
.group_9 {
padding: 16rpx;
}
.group_10 {
padding: 16rpx;
}
}
.group_12 {
overflow-x: hidden;
.text_14 {
line-height: 30.28rpx;
}
.text_15 {
margin-right: 24rpx;
line-height: 22.4rpx;
}
.horiz-list {
.horiz-list-item {
.image_11 {
width: 28rpx;
height: 30rpx;
}
.text_16 {
line-height: 22.16rpx;
}
.text_18 {
line-height: 26.18rpx;
}
}
.section_5 {
padding: 16rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
height: 198rpx;
}
.horiz-list-item_2 {
flex-shrink: 0;
.image_12 {
width: 28rpx;
height: 28rpx;
}
.text_17 {
line-height: 22.12rpx;
}
.text_19 {
margin-left: 8rpx;
line-height: 26.34rpx;
}
}
.section_6 {
padding: 16rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
height: 198rpx;
}
}
.group_13 {
overflow-x: auto;
}
}
.font_5 {
font-size: 24rpx;
line-height: 32rpx;
color: #666666;
}
.text_20 {
line-height: 29.6rpx;
}
.equal-division_2 {
position: relative;
align-self: stretch;
margin-right: 28rpx;
.equal-division-item_4 {
margin-left: 40rpx;
.image_13 {
width: 48rpx;
height: 46rpx;
}
.text_23 {
text-align: center;
}
}
.group_16 {
padding: 8rpx 0;
width: 144rpx;
}
.equal-division-item_5 {
position: absolute;
left: 239.58rpx;
top: 50%;
transform: translateY(-50%);
.image_14 {
width: 48rpx;
height: 54rpx;
}
.group_20 {
height: 37.1rpx;
.image_16 {
margin-top: 16rpx;
top: -10rpx;
}
.text_22 {
margin-top: -40rpx;
line-height: 25.82rpx;
}
}
.text_24 {
text-align: center;
width: 144rpx;
}
}
.group_17 {
padding: 8rpx 0;
width: 240rpx;
}
.font_9 {
font-size: 28rpx;
line-height: 25.88rpx;
color: #000000;
}
.font_10 {
font-size: 24rpx;
line-height: 40rpx;
color: #999999;
}
.equal-division-item_6 {
position: absolute;
right: 23.84rpx;
top: 50%;
transform: translateY(-50%);
.image_17 {
align-self: center;
}
.group_19 {
width: 142rpx;
.image_15 {
width: 44rpx;
height: 44rpx;
}
.text_21 {
line-height: 25.84rpx;
}
.text_25 {
color: #999999;
text-align: center;
}
}
}
.group_18 {
padding: 8rpx 0;
width: 194.58rpx;
}
}
.section_7 {
padding: 16rpx 0;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
border: solid 2rpx #ffffff;
}
.text_26 {
line-height: 29.72rpx;
}
.section_8 {
margin-right: 28rpx;
padding: 56rpx 24rpx 24rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
.text_27 {
margin-left: 128rpx;
line-height: 26.1rpx;
}
.group_21 {
margin-top: 48rpx;
.text-wrapper_3 {
padding: 24rpx 0;
background-color: #5db66f1a;
border-radius: 16rpx;
.text_28 {
margin-left: 24rpx;
}
.text_29 {
line-height: 25.98rpx;
}
.text_30 {
line-height: 26.04rpx;
}
.text_31 {
line-height: 25.82rpx;
}
}
}
.image_18 {
width: 132rpx;
height: 134rpx;
}
.pos_4 {
position: absolute;
left: 0;
top: 0;
}
}
.font_2 {
font-size: 28rpx;
line-height: 25.88rpx;
color: #5db66f;
}
.group_22 {
padding-bottom: 32rpx;
.text_32 {
margin-right: 24rpx;
line-height: 22.18rpx;
}
}
.font_7 {
font-size: 24rpx;
line-height: 20.18rpx;
color: #5db66f;
}
.section_9 {
margin-right: 28rpx;
padding: 24rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
.image-wrapper {
padding: 48rpx 0;
background-image: url('https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=5149f97303e2fa97daa823a1452dce11.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 240rpx;
height: 160rpx;
.image_19 {
width: 66rpx;
height: 66rpx;
}
}
.group_23 {
margin-top: 32rpx;
.text_33 {
line-height: 26.4rpx;
}
.image_20 {
width: 20rpx;
height: 20rpx;
}
.text_34 {
line-height: 18.14rpx;
}
.image_21 {
width: 22rpx;
height: 16rpx;
}
.text_35 {
line-height: 17.86rpx;
}
}
}
}
.equal-division {
padding: 0 8rpx;
.image_5 {
mix-blend-mode: NOTTHROUGH;
width: 14rpx;
height: 26rpx;
}
.pos_2 {
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.text {
color: #ffffffe6;
line-height: 29.5rpx;
}
.equal-division-item {
flex: 1 1 224.64rpx;
.image_6 {
width: 42rpx;
height: 68rpx;
}
.group_7 {
padding-left: 24rpx;
.text_4 {
line-height: 25.84rpx;
}
}
.image_10 {
margin-top: 48rpx;
}
.group_6 {
width: 158.96rpx;
.image_8 {
margin-left: 24rpx;
}
}
}
.group_4 {
padding: 16rpx 0rpx 16rpx 0rpx;
}
.group_5 {
position: relative;
flex: 1 1 224.64rpx;
.pos_3 {
position: absolute;
left: -0.74rpx;
top: 50%;
transform: translateY(-50%);
}
.text_5 {
line-height: 25.78rpx;
}
}
.image_7 {
width: 68rpx;
height: 68rpx;
}
.font_3 {
font-size: 28rpx;
line-height: 25.88rpx;
color: #333333;
}
}
.equal-division-item_2 {
padding: 16rpx;
}
.font {
font-size: 32rpx;
line-height: 29.76rpx;
color: #333333;
}
.font_12 {
font-size: 28rpx;
line-height: 25.88rpx;
color: #1a1a1a;
}
.image_9 {
mix-blend-mode: NOTTHROUGH;
width: 12rpx;
height: 22rpx;
}
.font_4 {
font-size: 24rpx;
line-height: 20.18rpx;
color: #999999;
}
}
</style>
src/pages/nongzhi/nongzhi.vue
<script>
export default {
components: {},
props: {},
data() {
return {}
},
methods: {},
e:\Downloads\农场 (1).png
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
onPullDownRefresh() {
// 下拉刷新
onPullDownRefresh(() => {
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
})
// 页面数据
const pageData = reactive({
// 顶部标题和搜索
header: {
title: '农知',
searchPlaceholder: '请输入搜索内容',
searchIcon: '/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png',
bannerImage: '/static/images/codefun/9c9b4490074d34c2eb0b1e2e2e543fce.png',
},
// 分类标签
categoryTabs: [
{ id: 1, name: '精选' },
{ id: 2, name: '养殖技术' },
{ id: 3, name: '水果种植' },
{ id: 4, name: '蔬菜种植' },
],
// 推荐专家
recommendedExperts: {
title: '推荐专家',
moreText: '更多',
experts: [
{
id: 1,
image: '/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png',
name: '李大树',
specialty: '果树专家',
solvedCount: '以解答311个问题',
actionText: '免费咨询',
},
{
id: 2,
image: '/static/images/codefun/dd9d3f56e39526077ca1f71ba4092491.png',
name: '张曼',
specialty: '蔬菜专家',
solvedCount: '以解答186个问题',
actionText: '免费咨询',
},
{
id: 3,
image: '/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png',
name: '王于苗',
specialty: '果树专家',
solvedCount: '以解答311个问题',
actionText: '免费咨询',
},
],
},
// 专家问答
expertQAs: {
title: '专家问答',
moreText: '更多',
questions: [
{
id: 1,
question: '苹果树春季该如何进行修剪？',
answer: '春季修剪应在萌芽前进行，重点去除病弱枝...',
followers: '24人关注',
},
{
id: 2,
question: '水稻秧苗发黄是什么原因？',
answer: '主要原因可能是养分不足、浸水过多或病虫害...',
followers: '18人关注',
},
{
id: 3,
question: '大棚黄瓜叶子发卷怎么处理？',
answer: '可能是由于温度过高、水分不足或病毒感染...',
followers: '32人关注',
},
],
},
// 精品课程
premiumCourses: {
title: '精品课程',
moreText: '更多',
courses: [
{
id: 1,
image: '', // 使用section_11的背景图
title: '高效果园管理技术',
description: '全面提升果园产量与品质',
price: '¥99',
originalPrice: '¥129',
actionText: '马上学',
free: false,
},
{
id: 2,
image: '', // 使用section_12的背景图
title: '水稻病虫害防治专题',
description: '预防与治疗水稻常见问题',
price: '¥0',
originalPrice: '¥99',
actionText: '马上学',
free: true,
freeText: '免费',
},
{
id: 3,
image: '', // 使用section_13的背景图
title: '蔬菜大棚种植要点',
description: '温室蔬菜四季种植技巧',
price: '¥129',
originalPrice: '¥159',
actionText: '马上学',
free: false,
},
{
id: 4,
image: '', // 使用section_14的背景图
title: '珍珠鸡养殖技巧',
description: '珍珠鸡养殖技巧与常见问题',
price: '¥149',
originalPrice: '¥199',
actionText: '马上学',
free: false,
},
],
},
// 推荐文章
recommendedArticles: {
title: '推荐文章',
moreText: '更多',
articles: [
{
id: 1,
image: '/static/images/codefun/ea2c9cb4b1cb479a8164a6ad745a7a9d.png',
title: '春季麦田管理要点',
views: '7335',
},
{
id: 2,
image: '/static/images/codefun/3f49c887f73048daa48ecc834bc32e49.png',
title: '农作物施肥技术指南',
views: '3235',
},
{
id: 3,
image: '/static/images/codefun/17706769e0f74252bc26be7a373cc674.png',
title: '果树花期管理方法',
views: '1245',
},
],
},
})
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
console.log('点击分类标签:', tab)
// 在这里添加具体的分类标签点击逻辑
}
// 查看更多推荐专家
function onViewMoreExperts() {
console.log('查看更多推荐专家')
// 在这里添加具体的查看逻辑
}
// 专家点击事件
function onExpertClick(expert: any) {
console.log('点击专家:', expert)
// 在这里添加具体的专家点击逻辑
}
// 免费咨询点击事件
function onFreeConsultClick(expert: any) {
console.log('点击免费咨询:', expert)
// 在这里添加具体的免费咨询点击逻辑
}
// 查看更多专家问答
function onViewMoreQAs() {
console.log('查看更多专家问答')
// 在这里添加具体的查看逻辑
}
// 问题点击事件
function onQuestionClick(question: any) {
console.log('点击问题:', question)
// 在这里添加具体的问题点击逻辑
}
// 查看更多精品课程
function onViewMoreCourses() {
console.log('查看更多精品课程')
// 在这里添加具体的查看逻辑
}
// 课程点击事件
function onCourseClick(course: any) {
console.log('点击课程:', course)
// 在这里添加具体的课程点击逻辑
}
// 马上学点击事件
function onStudyNowClick(course: any) {
console.log('点击马上学:', course)
// 在这里添加具体的马上学点击逻辑
}
// 查看更多推荐文章
function onViewMoreArticles() {
console.log('查看更多推荐文章')
// 在这里添加具体的查看逻辑
}
// 文章点击事件
function onArticleClick(article: any) {
console.log('点击文章:', article)
// 在这里添加具体的文章点击逻辑
}
</script>
......@@ -22,296 +235,260 @@
<view class="codefun-flex-col">
<view class="codefun-flex-col section">
<view class="codefun-flex-col mt-60rpx">
<text class="codefun-self-center font_9 text">农知</text>
<text class="codefun-self-center font_9 text">{{ pageData.header.title }}</text>
<view class="codefun-flex-col codefun-self-stretch codefun-mt-20">
<view class="codefun-flex-row codefun-items-center section_2">
<image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" />
<text class="font_2 codefun-ml-8">请输入搜索内容</text>
<view class="codefun-flex-row codefun-items-center section_2 !hidden">
<image class="image_5" :src="pageData.header.searchIcon" />
<text class="font_2 codefun-ml-8">{{ pageData.header.searchPlaceholder }}</text>
</view>
<image
class="image_6 codefun-mt-12"
src="/static/images/codefun/9c9b4490074d34c2eb0b1e2e2e543fce.png"
/>
<image class="image_6" :src="pageData.header.bannerImage" />
</view>
</view>
</view>
<view class="codefun-flex-col group_2">
<view class="codefun-flex-row codefun-justify-around group_1">
<view class="codefun-flex-col codefun-justify-start codefun-items-center section_3">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_2">精选</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center section_4">
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_1">
<text class="font_3">养殖技术</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center section_4">
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_1">
<text class="font_3">水果种植</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center section_4">
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_1">
<text class="font_3">蔬菜种植</text>
<view
v-for="tab in pageData.categoryTabs"
:key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="[tab.id === 1 ? 'section_3' : 'section_4']"
@click="onCategoryTabClick(tab)"
>
<view
class="codefun-flex-col codefun-justify-start"
:class="[
tab.id === 1 ? 'codefun-items-center' : 'codefun-items-start',
tab.id === 1 ? 'text-wrapper' : 'text-wrapper_1',
]"
>
<text :class="[tab.id === 1 ? 'font_2' : 'font_3']">
{{ tab.name }}
</text>
</view>
</view>
</view>
<view class="codefun-flex-col group_3 mt-25">
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
<text class="font_4">推荐专家</text>
<text class="font_5 text_7">更多</text>
<text class="font_4">{{ pageData.recommendedExperts.title }}</text>
<text class="font_5 text_7" @click="onViewMoreExperts">{{
pageData.recommendedExperts.moreText
}}</text>
</view>
<view class="codefun-flex-row horiz-list codefun-mt-16">
<view class="codefun-flex-col horiz-list-item section_5">
<image
class="codefun-self-stretch image_7"
src="/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png"
/>
<view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-12">
<text class="font text_8">李大树</text>
<text class="font_6 text_8 codefun-ml-8">果树专家</text>
</view>
<text class="codefun-self-start font_7 text_8 codefun-mt-12">以解答311个问题</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_3 codefun-mt-12"
v-for="(expert, index) in pageData.recommendedExperts.experts"
:key="expert.id"
class="codefun-flex-col horiz-list-item"
:class="[
index === 0 ? 'section_5' : '',
index === 1 ? 'section_6' : '',
index === 2 ? 'section_7' : '',
index > 0 ? `codefun-ml-${index === 1 ? 10 : 10}` : '',
]"
@click="onExpertClick(expert)"
>
<text class="font_8">免费咨询</text>
</view>
</view>
<view class="codefun-flex-col horiz-list-item section_6 codefun-ml-10">
<image
class="codefun-self-stretch image_7"
src="/static/images/codefun/dd9d3f56e39526077ca1f71ba4092491.png"
class="image_7"
:class="[index < 2 ? 'codefun-self-stretch' : '']"
:src="expert.image"
/>
<view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-12">
<text class="font text_8">张曼</text>
<text class="font_6 text_8 codefun-ml-8">蔬菜专家</text>
<text class="font text_8">{{ expert.name }}</text>
<text class="font_6 text_8 codefun-ml-8">{{ expert.specialty }}</text>
</view>
<text class="codefun-self-start font_7 text_8 codefun-mt-12">以解答186个问题</text>
<text class="codefun-self-start font_7 text_8 codefun-mt-12">{{ expert.solvedCount }}</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_3 codefun-mt-12"
@click.stop="onFreeConsultClick(expert)"
>
<text class="font_8">免费咨询</text>
</view>
</view>
<view class="codefun-flex-col codefun-items-start horiz-list-item section_7 codefun-ml-10">
<image class="image_7" src="/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png" />
<text class="font text_8 codefun-mt-12">王于苗</text>
<text class="font_7 text_8 codefun-mt-12">以解答311个问题</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 codefun-mt-12"
>
<text class="font_8">免费咨询</text>
<text class="font_8">{{ expert.actionText }}</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col mt-25">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_5">
<text class="font_4">专家问答</text>
<text class="font_5 text_4">更多</text>
<text class="font_4">{{ pageData.expertQAs.title }}</text>
<text class="font_5 text_4" @click="onViewMoreQAs">{{ pageData.expertQAs.moreText }}</text>
</view>
<view class="codefun-flex-col section_10">
<view class="codefun-flex-col codefun-self-stretch">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
v-for="(qa, index) in pageData.expertQAs.questions"
:key="qa.id"
class="codefun-flex-col"
:class="[index > 0 ? 'codefun-self-stretch codefun-mt-10' : 'codefun-self-stretch']"
@click="onQuestionClick(qa)"
>
<text class="font_9">Q</text>
</view>
<text class="font_10 codefun-ml-8">苹果树春季该如何进行修剪？</text>
</view>
<text class="codefun-self-start font_11 codefun-mt-4 text_23">
春季修剪应在萌芽前进行，重点去除病弱枝...
</text>
</view>
<text class="codefun-self-start font_14 text_23 codefun-mt-10">24人关注</text>
<view class="codefun-flex-col codefun-self-stretch codefun-mt-10">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
>
<text class="font_9">Q</text>
</view>
<text class="font_10 codefun-ml-8">水稻秧苗发黄是什么原因？</text>
<text class="font_10 codefun-ml-8">{{ qa.question }}</text>
</view>
<text class="codefun-self-start font_11 codefun-mt-4 text_23">
主要原因可能是养分不足、浸水过多或病虫害...
<text
class="codefun-self-start font_11 codefun-mt-4"
:class="[`text_2${index === 0 ? '3' : index === 1 ? '6' : '9'}`]"
>
{{ qa.answer }}
</text>
</view>
<text class="codefun-self-start font_14 text_26 codefun-mt-10">18人关注</text>
<view class="codefun-flex-col codefun-self-stretch codefun-mt-10">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
<text
class="codefun-self-start font_14"
:class="[
`text_2${index === 0 ? '3' : index === 1 ? '6' : '9'}`,
index === 0 ? 'codefun-mt-10' : 'codefun-mt-10',
]"
>
<text class="font_9">Q</text>
</view>
<text class="font_10 codefun-ml-8">大棚黄瓜叶子发卷怎么处理？</text>
</view>
<text class="codefun-self-start font_11 codefun-mt-4 text_23">
可能是由于温度过高、水分不足或病毒感染...
{{ qa.followers }}
</text>
</view>
<text class="codefun-self-start font_14 text_29 codefun-mt-10">32人关注</text>
</view>
</view>
<view class="codefun-flex-col mt-25">
<view class="codefun-flex-row codefun-justify-between group_5">
<text class="codefun-self-center font_4">精品课程</text>
<text class="codefun-self-start font_5 text_4">更多</text>
<text class="codefun-self-center font_4">{{ pageData.premiumCourses.title }}</text>
<text class="codefun-self-start font_5 text_4" @click="onViewMoreCourses">{{
pageData.premiumCourses.moreText
}}</text>
</view>
<view class="codefun-flex-col section_10">
<view class="codefun-flex-row codefun-justify-center codefun-items-end">
<view
v-for="(course, index) in pageData.premiumCourses.courses"
:key="course.id"
class="codefun-flex-row"
:class="[
index === 0 ? 'codefun-justify-center codefun-items-end' : '',
index === 1 ? 'codefun-justify-center codefun-mt-16' : '',
index === 2 ? 'codefun-items-end codefun-mt-16' : '',
index === 3 ? 'codefun-mt-16' : '',
]"
@click="onCourseClick(course)"
>
<template v-if="index === 0">
<view class="section_11" />
<view class="codefun-flex-col codefun-items-start group_10 codefun-ml-12">
<text class="font_10">高效果园管理技术</text>
<text class="font_11 codefun-mt-8 single-line w-11em">全面提升果园产量与品质</text>
<text class="font_10">{{ course.title }}</text>
<text class="font_11 codefun-mt-8 single-line w-11em">{{
course.description
}}</text>
<view class="codefun-flex-row codefun-items-center group_11 codefun-mt-8">
<text class="font_13">¥99</text>
<text class="font_13">{{ course.price }}</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4"
>
<text class="font_14 text_34">¥129</text>
<text class="font_14 text_34">{{ course.originalPrice }}</text>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 view_1 codefun-ml-12"
@click.stop="onStudyNowClick(course)"
>
<text class="font_8">马上学</text>
</view>
<text class="font_8">{{ course.actionText }}</text>
</view>
<view class="codefun-flex-row codefun-justify-center codefun-mt-16">
</template>
<template v-else-if="index === 1">
<view class="codefun-flex-col codefun-justify-start codefun-items-start section_12">
<view
v-if="course.free"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_7"
>
<text class="font_15 text_37">免费</text>
<text class="font_15 text_37">{{ course.freeText }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-self-center codefun-ml-12">
<text class="font_10">水稻病虫害防治专题</text>
<text class="font_11 text_10 single-line w-11em">预防与治疗水稻常见问题</text>
<text class="font_10">{{ course.title }}</text>
<text class="font_11 text_10 single-line w-11em">{{ course.description }}</text>
<view class="codefun-flex-row codefun-items-baseline group_8">
<text class="font_13">¥0</text>
<text class="font_14 text_34 codefun-ml-4">¥99</text>
<text class="font_13">{{ course.price }}</text>
<text class="font_14 text_34 codefun-ml-4">{{ course.originalPrice }}</text>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_5 view codefun-ml-12"
@click.stop="onStudyNowClick(course)"
>
<text class="font_8">马上学</text>
<text class="font_8">{{ course.actionText }}</text>
</view>
</view>
<view class="codefun-flex-row codefun-items-end codefun-mt-16">
</template>
<template v-else-if="index === 2">
<view class="codefun-shrink-0 section_13" />
<view class="codefun-flex-col codefun-items-start codefun-flex-1 group_12">
<text class="font_10">蔬菜大棚种植要点</text>
<text class="font_11 codefun-mt-10 single-line w-11em">温室蔬菜四季种植技巧</text>
<text class="font_10">{{ course.title }}</text>
<text class="font_11 codefun-mt-10 single-line w-11em">{{
course.description
}}</text>
<view class="codefun-flex-row codefun-items-center group_13 codefun-mt-10">
<text class="font_13">¥129</text>
<text class="font_13">{{ course.price }}</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4"
>
<text class="font_14 text_34">¥159</text>
<text class="font_14 text_34">{{ course.originalPrice }}</text>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5"
@click.stop="onStudyNowClick(course)"
>
<text class="font_8">马上学</text>
</view>
<text class="font_8">{{ course.actionText }}</text>
</view>
<view class="codefun-flex-row codefun-mt-16">
</template>
<template v-else-if="index === 3">
<view class="codefun-shrink-0 section_14" />
<view class="codefun-flex-row codefun-items-end codefun-flex-1 group_14 codefun-ml-12">
<view class="codefun-flex-col codefun-items-start codefun-flex-1 group_27">
<text class="font_10">珍珠鸡养殖技巧</text>
<text class="font_10">{{ course.title }}</text>
<text class="font_11 codefun-mt-8 single-line w-11em">
珍珠鸡养殖技巧与常见问题
{{ course.description }}
</text>
<view class="codefun-flex-row codefun-items-center group_13 codefun-mt-8">
<text class="font_13">¥149</text>
<text class="font_13">{{ course.price }}</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4"
>
<text class="font_14 text_34">¥199</text>
<text class="font_14 text_34">{{ course.originalPrice }}</text>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5"
@click.stop="onStudyNowClick(course)"
>
<text class="font_8">马上学</text>
<text class="font_8">{{ course.actionText }}</text>
</view>
</view>
</template>
</view>
</view>
</view>
<view class="codefun-flex-col mt-25">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_16">
<text class="font_4">推荐文章</text>
<text class="font_5 text_48">更多</text>
<text class="font_4">{{ pageData.recommendedArticles.title }}</text>
<text class="font_5 text_48" @click="onViewMoreArticles">{{
pageData.recommendedArticles.moreText
}}</text>
</view>
<view class="codefun-flex-col section_15">
<view class="codefun-flex-row group_17">
<view class="w-200rpx h-124rpx">
<image
class="w-full h-full"
src="/static/images/codefun/ea2c9cb4b1cb479a8164a6ad745a7a9d.png"
mode="scaleToFill"
/>
</view>
<view class="flex-1 ml-4">
<text class="codefun-self-end font_16">春季麦田管理要点</text>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20">
<image
class="image_3"
src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png"
/>
<text class="font_7 codefun-ml-4">7335</text>
</view>
</view>
</view>
<view class="codefun-flex-row group_17 codefun-mt-32">
<view class="w-200rpx h-124rpx">
<image
class="w-full h-full"
src="/static/images/codefun/3f49c887f73048daa48ecc834bc32e49.png"
mode="scaleToFill"
/>
</view>
<view class="flex-1 ml-4">
<text class="codefun-self-end font_16">农作物施肥技术指南</text>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20">
<image
class="image_3"
src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png"
/>
<text class="font_7 codefun-ml-4">3235</text>
</view>
</view>
</view>
<view class="codefun-flex-row group_17 codefun-mt-32">
<view
v-for="article in pageData.recommendedArticles.articles"
:key="article.id"
class="codefun-flex-row group_17"
:class="{ 'codefun-mt-32': article.id > 1 }"
@click="onArticleClick(article)"
>
<view class="w-200rpx h-124rpx">
<image
class="w-full h-full"
src="/static/images/codefun/17706769e0f74252bc26be7a373cc674.png"
mode="scaleToFill"
/>
<image class="w-full h-full" :src="article.image" mode="scaleToFill" />
</view>
<view class="flex-1 ml-4">
<text class="codefun-self-end font_16">果树花期管理方法</text>
<text class="codefun-self-end font_16">{{ article.title }}</text>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20">
<image
class="image_3"
src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png"
/>
<text class="font_7 codefun-ml-4">1245</text>
<text class="font_7 codefun-ml-4">{{ article.views }}</text>
</view>
</view>
</view>
......@@ -640,7 +817,7 @@
}
.font_8 {
font-size: 24rpx;
line-height: 24rpx;
line-height: 17rpx;
color: #ffffff;
}
.group_16 {
......
src/pages/shouye/shouye.vue
......@@ -61,6 +61,10 @@
return '宜喷药'
case '阴':
return '宜少浇水'
case '小雨':
return '宜播种'
case '中雨':
return '注意防涝'
default:
return '无建议'
}
......
src/pages/wode/wode.vue
<script>
export default {
components: {},
props: {},
data() {
return {
items: [null, null, null],
}
},
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
methods: {},
onPullDownRefresh() {
// 下拉刷新
onPullDownRefresh(() => {
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
})
// 页面数据
const pageData = reactive({
// 用户信息
userInfo: {
avatar: '/static/images/codefun/8653455b786fbf94ae1c3946f11e7d40.png',
farmName: '007农场',
certification: {
icon: '/static/images/codefun/b6079649e1f0ba231d158cb10bea118f.png',
text: '已认证农场主',
},
farmDescription: '华北绿色农业示范基地',
settingsIcon: '/static/images/codefun/1458747d012f7cb820f99627876e8fa6.png',
},
// 统计数据
statistics: [
{ id: 1, value: '44', label: '我的基地' },
{ id: 2, value: '¥3266', label: '累计收益' },
{ id: 3, value: '8', label: '服务订单' },
],
// 消息中心
messageCenter: {
icon: '/static/images/codefun/41d4366b8b071c40d285a8f48c696d8a.png',
title: '消息中心',
description: '预警通知/服务进度/订单状态',
notificationCount: '6',
arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
},
// 功能模块
features: [
{
id: 1,
icon: '/static/images/codefun/a1b5d5fd677e3e3c32cdfe7a476aee19.png',
title: '资源库',
count: '38个资源可用',
description: '合同模板/政策文件/财务表',
status: '离线可用',
statusClass: 'text_14',
arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
},
{
id: 2,
icon: '/static/images/codefun/d38158bc612aa1c6a022fae41afd8a42.png',
title: '物联设备',
count: '2台在线',
description: '灌溉设备/气象站绑定管理',
actionText: '添加设备',
arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
addIcon: '/static/images/codefun/2ff61f748e26b18760ca166aa8cfa15a.png',
},
],
// 常用资源
commonResources: {
title: '常用资源',
actionText: '全部',
resources: [
{
id: 1,
icon: '/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png',
title: '水稻种植合同模版',
size: '125kb',
actionText: '下载',
},
{
id: 2,
icon: '/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png',
title: '玉米种植技术指南',
size: '210kb',
actionText: '下载',
},
{
id: 3,
icon: '/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png',
title: '肥料使用记录表',
size: '86kb',
actionText: '下载',
},
],
},
// 我的设备
myDevices: {
title: '我的设备',
actionText: '添加设备',
devices: [
{
id: 1,
image: '/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png',
name: '智能灌溉控制器',
lastConnection: '上次链接：10分钟前',
status: '正常',
statusIcon: '/static/images/codefun/e9da7be7465ae5310ccbc8a61ec653af.png',
statusClass: 'text_24',
},
{
id: 2,
image: '/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png',
name: '土壤监测传感器',
lastConnection: '上次链接：10分钟前',
status: '离线',
statusIcon: '/static/images/codefun/1d16bdeaf73b863640e5855843a54682.png',
},
],
},
// 客服与帮助
support: {
services: [
{
id: 1,
icon: '/static/images/codefun/e4267d4e96c1020d60dfbbf315b662cb.png',
title: '在线客服',
arrowIcon: '/static/images/codefun/543b9b7cb3072527207b45b678ca5794.png',
},
],
helps: [
{
id: 1,
icon: '/static/images/codefun/46ebd858a611104ee741fc252ca6f0ce.png',
title: '帮助中心',
arrowIcon: '/static/images/codefun/0314db942874f91963bc16e91b9798bc.png',
},
{
id: 2,
icon: '/static/images/codefun/559cc3a424e888da63761cafa26dad82.png',
title: '问题反馈',
arrowIcon: '/static/images/codefun/0314db942874f91963bc16e91b9798bc.png',
},
],
},
})
// 用户信息设置点击事件
function onSettingsClick() {
console.log('点击设置')
// 在这里添加具体的设置点击逻辑
}
// 消息中心点击事件
function onMessageCenterClick() {
console.log('点击消息中心')
// 在这里添加具体的消息中心点击逻辑
}
// 功能模块点击事件
function onFeatureClick(feature: any) {
console.log('点击功能模块:', feature)
// 在这里添加具体的功能模块点击逻辑
}
// 常用资源点击事件
function onResourceClick(resource: any) {
console.log('点击资源:', resource)
// 在这里添加具体的资源点击逻辑
}
// 资源下载点击事件
function onDownloadClick(resource: any) {
console.log('点击下载:', resource)
// 在这里添加具体的下载点击逻辑
}
// 查看所有资源
function onViewAllResources() {
console.log('查看所有资源')
// 在这里添加具体的查看所有资源逻辑
}
// 我的设备标题点击事件
function onMyDevicesTitleClick() {
console.log('点击我的设备标题')
// 在这里添加具体的设备标题点击逻辑
}
// 设备点击事件
function onDeviceClick(device: any) {
console.log('点击设备:', device)
// 在这里添加具体的设备点击逻辑
}
// 客服点击事件
function onServiceClick(service: any) {
console.log('点击客服:', service)
// 在这里添加具体的客服点击逻辑
}
// 帮助点击事件
function onHelpClick(help: any) {
console.log('点击帮助:', help)
// 在这里添加具体的帮助点击逻辑
}
</script>
......@@ -23,245 +210,203 @@
<view class="codefun-flex-col page">
<view class="codefun-flex-col group">
<view class="codefun-flex-col section">
<view class="codefun-flex-row codefun-justify-center codefun-relative group_3">
<text class="codefun-self-start font text">我的</text>
<image
class="codefun-self-center image_5 pos"
src="/static/images/codefun/acd10a2959857f5912a96306bc56976e.png"
/>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
<view class="codefun-flex-row">
<image class="image_6" src="/static/images/codefun/8653455b786fbf94ae1c3946f11e7d40.png" />
<image class="image_6" :src="pageData.userInfo.avatar" />
<view class="codefun-flex-col group_5 codefun-ml-8">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<text class="font_2 text_2">007农场</text>
<text class="font_2 text_2">{{ pageData.userInfo.farmName }}</text>
<view
class="codefun-flex-row codefun-items-center codefun-shrink-0 section_2 codefun-ml-6"
>
<image
class="codefun-shrink-0 image_7"
src="/static/images/codefun/b6079649e1f0ba231d158cb10bea118f.png"
:src="pageData.userInfo.certification.icon"
/>
<text class="font_3 text_3 codefun-ml-4">已认证农场主</text>
<text class="font_3 text_3 codefun-ml-4">{{
pageData.userInfo.certification.text
}}</text>
</view>
</view>
<text class="codefun-self-start font_1 codefun-mt-10">华北绿色农业示范基地</text>
<text class="codefun-self-start font_1 codefun-mt-10">{{
pageData.userInfo.farmDescription
}}</text>
</view>
</view>
<image class="image_8 image_9" src="/static/images/codefun/1458747d012f7cb820f99627876e8fa6.png" />
<image class="image_8 image_9" :src="pageData.userInfo.settingsIcon" @click="onSettingsClick" />
</view>
<view class="codefun-flex-col codefun-justify-start section_3">
<view class="codefun-flex-row">
<view class="codefun-flex-col codefun-items-center group_6 equal-division-item">
<text class="font_4">44</text>
<text class="font_5 codefun-mt-16">我的基地</text>
</view>
<view class="codefun-flex-col codefun-items-center group_6 equal-division-item codefun-ml-32">
<text class="font_4">¥3266</text>
<text class="font_5 codefun-mt-16">累计收益</text>
</view>
<view class="codefun-flex-col codefun-items-center group_6 equal-division-item codefun-ml-32">
<text class="font_4">8</text>
<text class="font_5 codefun-mt-16">服务订单</text>
<view
v-for="stat in pageData.statistics"
:key="stat.id"
class="codefun-flex-col codefun-items-center group_6 equal-division-item"
:class="{ 'codefun-ml-32': stat.id > 1 }"
>
<text class="font_4">{{ stat.value }}</text>
<text class="font_5 codefun-mt-16">{{ stat.label }}</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-relative group_7">
<view class="codefun-flex-col">
<view class="codefun-flex-row codefun-justify-between codefun-items-center section_12">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center section_12"
@click="onMessageCenterClick"
>
<view class="codefun-flex-row group_8">
<image class="image_10" src="/static/images/codefun/41d4366b8b071c40d285a8f48c696d8a.png" />
<image class="image_10" :src="pageData.messageCenter.icon" />
<view class="codefun-flex-col group_9 codefun-ml-12">
<text class="codefun-self-start font">消息中心</text>
<text class="codefun-self-start font">{{ pageData.messageCenter.title }}</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch text-wrapper_2 codefun-mt-4"
>
<text class="font_7">预警通知/服务进度/订单状态</text>
<text class="font_7">{{ pageData.messageCenter.description }}</text>
</view>
</view>
</view>
<view class="codefun-flex-row codefun-items-center group_10">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_1 !lh-26rpx">6</text>
<text class="font_1 !lh-26rpx">{{ pageData.messageCenter.notificationCount }}</text>
</view>
<image
class="image_11 codefun-ml-12"
src="/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png"
/>
<image class="image_11 codefun-ml-12" :src="pageData.messageCenter.arrowIcon" />
</view>
</view>
<view class="codefun-flex-row equal-division codefun-mt-12">
<view class="codefun-flex-col section_5 section_11">
<view
v-for="(feature, index) in pageData.features"
:key="feature.id"
class="codefun-flex-col section_5 section_11"
:class="{ 'codefun-ml-12': index > 0 }"
@click="onFeatureClick(feature)"
>
<view class="codefun-flex-row codefun-self-stretch">
<view class="codefun-flex-row codefun-items-center codefun-flex-1">
<image
class="codefun-shrink-0 image_10"
src="/static/images/codefun/a1b5d5fd677e3e3c32cdfe7a476aee19.png"
/>
<image class="codefun-shrink-0 image_10" :src="feature.icon" />
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-8">
<text class="font">资源库</text>
<text class="font_8 codefun-mt-8">38个资源可用</text>
<text class="font">{{ feature.title }}</text>
<text class="font_8 codefun-mt-8">{{ feature.count }}</text>
</view>
</view>
<image
class="codefun-shrink-0 codefun-self-start image_11 image_12 codefun-ml-8"
src="/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png"
class="codefun-shrink-0 codefun-self-start image_11"
:class="{
image_12: feature.id === 1,
image_13: feature.id === 2,
'codefun-ml-8': feature.id === 1,
}"
:src="feature.arrowIcon"
/>
</view>
<text class="codefun-self-stretch font_7 codefun-mt-10">合同模板/政策文件/财务表</text>
<text class="codefun-self-stretch font_7 codefun-mt-10">{{ feature.description }}</text>
<view
v-if="feature.status"
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start view mt-2"
>
<text class="font_6 text_14">离线可用</text>
</view>
</view>
<view class="codefun-flex-col section_5 section_11 codefun-ml-12">
<view class="codefun-flex-row codefun-self-stretch">
<image
class="codefun-shrink-0 image_10"
src="/static/images/codefun/d38158bc612aa1c6a022fae41afd8a42.png"
/>
<view
class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-self-center group_12"
>
<text class="font">物联设备</text>
<text class="font_8 codefun-mt-8">2台在线</text>
<text class="font_6" :class="feature.statusClass">{{ feature.status }}</text>
</view>
<image
class="codefun-shrink-0 codefun-self-start image_11 image_13"
src="/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png"
/>
</view>
<text class="codefun-self-stretch font_7 codefun-mt-10">灌溉设备/气象站绑定管理</text>
<view
v-if="feature.actionText && feature.addIcon"
class="codefun-flex-row codefun-justify-evenly codefun-items-center codefun-self-start view_2 mt-2"
>
<image
class="image_14"
src="/static/images/codefun/2ff61f748e26b18760ca166aa8cfa15a.png"
/>
<text class="font_3">添加设备</text>
<image class="image_14" :src="feature.addIcon" />
<text class="font_3">{{ feature.actionText }}</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-mt-24">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_13">
<text class="font_2">常用资源</text>
<text class="font_3 text_16">全部</text>
<text class="font_2">{{ pageData.commonResources.title }}</text>
<text class="font_3 text_16" @click="onViewAllResources">{{
pageData.commonResources.actionText
}}</text>
</view>
<view class="codefun-flex-col list">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center list-item codefun-mt-24"
v-for="(item, index) in items"
:key="index"
v-for="resource in pageData.commonResources.resources"
:key="resource.id"
@click="onResourceClick(resource)"
>
<view class="codefun-flex-row">
<image
class="image_15"
src="/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png"
/>
<image class="image_15" :src="resource.icon" />
<view class="codefun-flex-col codefun-items-start group_14 codefun-ml-12">
<text class="font_9">水稻种植合同模版</text>
<text class="font_6 codefun-mt-12">125kb</text>
<text class="font_9">{{ resource.title }}</text>
<text class="font_6 codefun-mt-12">{{ resource.size }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
<text class="font_10">下载</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
@click.stop="onDownloadClick(resource)"
>
<text class="font_10">{{ resource.actionText }}</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-mt-24">
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
<text class="font_2">我的设备</text>
<text class="font_3 text_22">添加设备</text>
<text class="font_2">{{ pageData.myDevices.title }}</text>
<text class="font_3 text_22" @click="onMyDevicesTitleClick">{{
pageData.myDevices.actionText
}}</text>
</view>
<view class="codefun-flex-col codefun-mt-16">
<view class="codefun-flex-col section_12">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<view class="codefun-flex-row codefun-items-center">
<image
class="image_17"
src="/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png"
/>
<view class="codefun-flex-col codefun-items-start codefun-ml-8">
<text class="font_11">智能灌溉控制器</text>
<text class="font_6 codefun-mt-12">上次链接：10分钟前</text>
</view>
</view>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_18"
src="/static/images/codefun/e9da7be7465ae5310ccbc8a61ec653af.png"
/>
<text class="font_6 text_24 codefun-ml-4">正常</text>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-mt-16">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center"
v-for="(device, index) in pageData.myDevices.devices"
:key="device.id"
:class="{ 'codefun-mt-16': index > 0 }"
@click="onDeviceClick(device)"
>
<view class="codefun-flex-row codefun-items-center">
<image
class="image_17"
src="/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png"
/>
<image class="image_17" :src="device.image" />
<view class="codefun-flex-col codefun-items-start codefun-ml-8">
<text class="font_11">智能灌溉控制器</text>
<text class="font_6 codefun-mt-12">上次链接：10分钟前</text>
<text class="font_11">{{ device.name }}</text>
<text class="font_6 codefun-mt-12">{{ device.lastConnection }}</text>
</view>
</view>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_18"
src="/static/images/codefun/1d16bdeaf73b863640e5855843a54682.png"
/>
<text class="font_6 codefun-ml-4">离线</text>
<image class="codefun-shrink-0 image_18" :src="device.statusIcon" />
<text
class="font_6"
:class="device.statusClass || ''"
:style="{ color: device.status === '正常' ? '#13e000' : '#999999' }"
>
{{ device.status }}
</text>
</view>
</view>
</view>
<view class="codefun-flex-col section_9 codefun-mt-12">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center"
v-for="service in pageData.support.services"
:key="service.id"
@click="onServiceClick(service)"
>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_19"
src="/static/images/codefun/e4267d4e96c1020d60dfbbf315b662cb.png"
/>
<text class="font_13 codefun-ml-8">在线客服</text>
<image class="codefun-shrink-0 image_19" :src="service.icon" />
<text class="font_13 codefun-ml-8">{{ service.title }}</text>
</view>
<image
class="image_20"
src="/static/images/codefun/543b9b7cb3072527207b45b678ca5794.png"
/>
<image class="image_20" :src="service.arrowIcon" />
</view>
<view class="codefun-flex-col codefun-mt-20">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_21"
src="/static/images/codefun/46ebd858a611104ee741fc252ca6f0ce.png"
/>
<text class="font_13 codefun-ml-8">帮助中心</text>
</view>
<image
class="image_20"
src="/static/images/codefun/0314db942874f91963bc16e91b9798bc.png"
/>
</view>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-mt-20"
class="codefun-flex-row codefun-justify-between codefun-items-center"
v-for="help in pageData.support.helps"
:key="help.id"
:class="{ 'codefun-mt-20': help.id > 1 }"
@click="onHelpClick(help)"
>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_8"
src="/static/images/codefun/559cc3a424e888da63761cafa26dad82.png"
/>
<text class="font_13 codefun-ml-8">问题反馈</text>
<image class="codefun-shrink-0 image_21" :src="help.icon" />
<text class="font_13 codefun-ml-8">{{ help.title }}</text>
</view>
<image
class="image_20"
src="/static/images/codefun/0314db942874f91963bc16e91b9798bc.png"
/>
<image class="image_20" :src="help.arrowIcon" />
</view>
</view>
</view>
......@@ -283,7 +428,6 @@
padding-bottom: 44rpx;
.group {
height: 2020rpx;
.section {
padding: 24rpx 20rpx 88rpx;
background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
......@@ -332,8 +476,6 @@
}
}
.group_4 {
margin-right: 8rpx;
margin-top: 56rpx;
.image_6 {
mix-blend-mode: NOTTHROUGH;
border-radius: 50%;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论