Skip to content

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

feat: 农业大模型 + 农机作业预约 + 灵活用工（更多）相关页面初始版本

上级 bc9ae4d8
正在显示 包含 2237 行增加 和 312 行删除
src/pages.json
......@@ -105,6 +105,45 @@
}
}
},
{
"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": {}
}
}
},
// pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
......@@ -223,7 +262,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 {}
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import Navigate from '@/utils/page/navigate'
// 下拉刷新
onPullDownRefresh(() => {
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
})
// 页面数据
const pageData = reactive({
// 顶部标题
header: {
title: '服务',
},
// 岗位信息
jobInfo: {
jobCount: 32,
demandCount: 215,
matchedCount: 186,
},
methods: {},
// 功能菜单
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: '去申请',
},
],
onPullDownRefresh() {
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
// 农资交易商品
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-row codefun-justify-between codefun-items-center">
<view class="codefun-flex-row">
<image class="image_8" src="/static/images/codefun/ce0934e2137d43264df416c99d587cad.png" />
<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>
</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-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_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>
<image class="image_8" :src="service.image" />
<view class="codefun-flex-col codefun-items-start group_9 ml-11">
<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_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>
<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"
: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" :class="`text_${24 + product.id}`">{{
product.actionText
}}</text>
</view>
</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>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_14"
>
<text class="font_12 text_24">去选择</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"
v-if="index < pageData.financialProducts.length - 1"
class="section_5 horiz-divider"
/>
<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>
</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"
>
<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
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-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"
>
<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
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)"
>
<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>
<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 text_33 codefun-mt-10"
>我有农机具，接个活！</text
<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"
>
<text class="font_16">绿鲜农场</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start equal-division-item_3 section_16 ml-11">
<view
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,
}"
>
<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>
<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>
<template v-for="training in pageData.trainingCalendar.trainings" :key="training.id">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_7 pos_7"
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)"
>
<text class="font_13 text_53">机</text>
</view>
</view>
<view 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>
</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>
<view class="codefun-flex-col">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<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="font_9 text_49 text_57 codefun-ml-28">拖拉机专用技能</text>
<text
class="codefun-self-center font_21 text_49"
:class="`text_${51 + training.id} mt-11`"
>{{ 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
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"
:class="{
'text-wrapper_7 pos_7': training.id === 1,
'text-wrapper_10 pos_8': training.id === 3,
}"
>
<text class="font_13" :class="`text_${52 + training.id}`">{{
training.badge
}}</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>
<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">{{ 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">{{ training.badge }}</text>
</view>
<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">{{ training.actionText }}</text>
</view>
</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: 'nongchang',
disabled: false,
show: true,
handle: () => {
......
src/pages/nongchang/nongchang.vue
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import Navigate from '@/utils/page/navigate'
// 下拉刷新
onPullDownRefresh(() => {
......@@ -46,6 +47,7 @@
name: '柑橘模型',
description: '精准预测柑橘生长周期',
actionText: '查看介绍',
link: '/pages/nongyedamoxing/nongyedamoxing',
},
{
id: 2,
......@@ -53,6 +55,7 @@
name: '作物生长监测',
description: 'AI识别生长状况',
actionText: '查看介绍',
link: '/pages/nongyedamoxing/nongyedamoxing',
},
{
id: 3,
......@@ -60,6 +63,7 @@
name: '产能模型',
description: '基于作物生长状况产能构建模型',
actionText: '查看介绍',
link: '/pages/nongyedamoxing/nongyedamoxing',
},
],
......@@ -205,6 +209,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/shouye/shouye.vue
......@@ -56,6 +56,10 @@
return '宜喷药'
case '阴':
return '宜少浇水'
case '小雨':
return '宜播种'
case '中雨':
return '注意防涝'
default:
return '无建议'
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论