Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 c6fbfdd8 作者: 宇宙超人
操作

Merge branch 'dev' of https://gitlab.yiring.com/digital-agri/agri-app into dev 

# Conflicts:
#	src/pages/fuwu/dailijizhang/dailijizhang.vue
#	src/pages/shouye/shouye.vue
上级 58b971e1 8764f496
正在显示 包含 1746 行增加 和 364 行删除
package.json
{
"name": "数字农服",
"version": "1.0.25",
"version": "1.0.27",
"description": "数字农服",
"keywords": [
"app",
......
src/components/Map/Widgets/ToolBox/src/ToolBox.vue
......@@ -83,7 +83,9 @@
}
if (button.type === 'button') {
button.handle?.({ type: 'click', name: button.name })
button.handle?.({ type: 'click', name: button.name, button })
} else if (button.type === 'toggle') {
button.handle?.({ type: 'toggle', name: button.name, button })
} else if (button.type === 'select') {
// 打开 Select 组件
model.selectPopup.title = button.name
......
src/components/Map/Widgets/ToolBox/src/types.ts
......@@ -2,16 +2,19 @@ import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
export interface ToolBoxButtonHandleEvent {
// 事件类型
type: 'click' | 'change'
type: 'click' | 'change' | 'toggle'
// 事件名称
name: string
// 事件值
value?: string | string[] | { text: string; value: string } | { text: string; value: string }[]
// 按钮本身
button?: ToolBoxButton
}
export interface ToolBoxButton {
// 按钮类型
type: 'select' | 'button' | 'filter'
type: 'select' | 'button' | 'filter' | 'toggle'
// 按钮名称
name: string
// 按钮图标
......
src/manifest.json
......@@ -2,8 +2,8 @@
"name": "数字农服",
"appid": "__UNI__FD09823",
"description": "数字农服 APP",
"versionName": "1.0.25",
"versionCode": 10025,
"versionName": "1.0.27",
"versionCode": 10027,
"transformPx": false,
"locale": "zh-Hans",
"vueVersion": "3",
......
src/pages.json
......@@ -592,7 +592,7 @@
{
"path": "pages/nongchang/detail/index",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "农场",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
......
src/pages/fuwu/dailijizhang/_dailijizhang.vue 0 → 100644
<script setup lang="ts">
// 立即申请
function onApplyClick() {
Message.alert('申请功能暂不可用，敬请期待~', '温馨提示')
}
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-flex-col group_2">
<view class="codefun-flex-col group_3">
<view class="codefun-flex-col section_2">
<text class="codefun-self-start font">代理记账政策</text>
<text class="codefun-self-stretch font_2 text_2">
为农场主提供专业、高效的财务管理解决方案，省时省心更省钱
</text>
<view class="codefun-flex-row equal-division">
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item">
<image class="image_6" src="/static/images/codefun/6d0a7c763a538e5bc93fa50d6dd4fc8f.png" />
<view class="codefun-mt-10 group_4">
<text class="font_3 text_3">99元</text>
<text class="font_4 text_4">/月起</text>
</view>
<text class="codefun-mt-10 font_5 text_8">价格低</text>
</view>
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item ml-11">
<image class="image_6" src="/static/images/codefun/3971dc28a5d847e08378fe0687e87cf4.png" />
<view class="group_4 mt-11">
<text class="font_3 text_5">10+</text>
<text class="font_4 text_6">项服务</text>
</view>
<text class="font_5 text_9 mt-11">内容全</text>
</view>
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item ml-11">
<image class="image_6" src="/static/images/codefun/be09c7cafe008e9795f0f6a5df7928d8.png" />
<view class="group_4 mt-11">
<text class="font_3">24</text>
<text class="font_4 text_7">小时响应</text>
</view>
<text class="text_10 mt-11">效率高</text>
</view>
</view>
</view>
<view class="codefun-mt-12 codefun-flex-col section_4">
<text class="codefun-self-start font text_11">郴州市财汇商务咨询有限公司</text>
<text class="codefun-self-stretch font_6 text_12">
州市财汇商务咨询有限公司自2022年成立以来，业务发展迅速，客户群体以政府及公共机构为主。服务涵盖：
</text>
<view class="codefun-flex-col codefun-self-stretch group_5">
<view class="codefun-flex-row group_6">
<view class="codefun-shrink-0 codefun-self-start section_5 view" />
<view class="codefun-flex-1 group_7 ml-7">
<text class="font_2">村集体经济板块</text>
<text class="font_6"><br /></text>
<text class="font_6 text_13">
与资兴农商行、市建行合作，为北湖区、资兴市近200个村集体在“互联网+监督”平台提供代理记账服务
</text>
</view>
</view>
<view class="codefun-mt-8 codefun-flex-row group_8">
<view class="codefun-shrink-0 codefun-self-start section_5 view_2" />
<view class="codefun-flex-1 group_9 ml-7">
<text class="font_2">专项审计板块</text>
<text class="font_6"><br /></text>
<text class="font_6">承接资兴市村干部任期经济审计、市教</text>
<text class="font_6 text_14">科院定期财务内审等</text>
</view>
</view>
<view class="codefun-mt-8 codefun-flex-row">
<view class="codefun-shrink-0 codefun-self-start section_5 view_3" />
<view class="codefun-flex-1 group_10 ml-7">
<text class="font_2">行政事业板块</text>
<text class="font_6 text_16">
<br />
</text>
<text class="font_6 text_15"
>为市委编办、市委组织部等20余家单位提供代理记账、资产盘点等服务</text
>
</view>
</view>
<view class="codefun-mt-8 codefun-flex-row group_11">
<view class="codefun-shrink-0 codefun-self-start section_5 view_4" />
<view class="codefun-flex-1 group_12 ml-7">
<text class="font_2">教育系统板块</text>
<text class="font_6 text_17">
<br />
完成桂阳县48所中小学食堂内审、桂阳一中/二中资产清查、市教育局校车成本核算等项目
</text>
</view>
</view>
</view>
</view>
<view class="codefun-mt-12 codefun-flex-col section_6">
<text class="codefun-self-start font text_18">业务操作流程</text>
<view class="codefun-flex-col codefun-self-stretch section_7 mt-17">
<view class="codefun-flex-row codefun-items-center">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_7">1</text>
</view>
<text class="font_8 text_19 ml-13">村级报账</text>
</view>
<view
class="codefun-flex-row codefun-justify-center codefun-items-start codefun-relative group_13"
>
<view class="section_8 pos_2" />
<text class="font_9 text_20">报账员整理收支凭证，填写电子交接清单</text>
</view>
<view class="codefun-flex-row codefun-items-center group_14">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_7 text_21">2</text>
</view>
<text class="font_8 ml-13">乡镇报审</text>
</view>
<view class="codefun-flex-row group_15">
<view class="codefun-shrink-0 codefun-self-start section_9 view_5" />
<text class="codefun-flex-1 font_6 text_22 ml-27">
提交资料至乡镇审核员，审核通过后打印清单并签字交接
</text>
</view>
<view class="codefun-flex-row codefun-items-center group_16">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_10">3</text>
</view>
<text class="font_8 text_23 ml-13">报账资料传递</text>
</view>
<view class="codefun-flex-row codefun-items-start group_17">
<view class="codefun-shrink-0 section_9 view_6" />
<text class="font_9 text_24 ml-27">乡镇联络员将各村资料定期移交代理记账公司</text>
</view>
<view class="codefun-flex-row codefun-items-center group_18">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_7">4</text>
</view>
<text class="font_8 text_25 ml-13">记账处理</text>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-start group_17">
<view class="section_9 view_6" />
<text class="font_9 text_26">记账员处理账务，并及时通知乡镇进行审核</text>
</view>
<view class="codefun-flex-row codefun-items-center group_19">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_7 text_27">5</text>
</view>
<text class="font_8 ml-13">审核处理</text>
</view>
<view class="codefun-flex-row group_20">
<view class="codefun-shrink-0 codefun-self-start section_9 view_7" />
<text class="codefun-flex-1 font_6 text_28 ml-27">
乡镇审核员复核记账凭证（科目、业务、数据），确保无误
</text>
</view>
<view class="codefun-flex-col group_21">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_10">6</text>
</view>
<text class="font_8 text_29 ml-13">档案移交</text>
</view>
<text class="codefun-mt-2 codefun-self-end font_6 text_30">
记账员装订会计档案，移交乡镇存档并办理交接手续
</text>
</view>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2"
@click="onApplyClick"
>
<text class="font_8 text_31">立即申请</text>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.ml-5 {
margin-left: 10rpx;
}
.mt-23 {
margin-top: 46rpx;
}
.ml-11 {
margin-left: 22rpx;
}
.mt-11 {
margin-top: 22rpx;
}
.ml-7 {
margin-left: 14rpx;
}
.mt-17 {
margin-top: 34rpx;
}
.ml-27 {
margin-left: 54rpx;
}
.ml-13 {
margin-left: 26rpx;
}
.page {
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.section {
padding: 26rpx 28rpx 36rpx 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: 0 6rpx;
.image_5 {
mix-blend-mode: NOTTHROUGH;
width: 14rpx;
height: 26rpx;
}
.pos {
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.text {
color: #ffffffe6;
line-height: 29.64rpx;
}
}
}
.group_2 {
padding: 0 28rpx 36rpx;
.group_3 {
padding: 28rpx 0 36rpx;
.section_2 {
padding: 32rpx 24rpx 24rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
.text_2 {
margin-top: 24rpx;
color: #666666;
}
.equal-division {
align-self: stretch;
margin-top: 20rpx;
.section_3 {
flex: 1 1 200.54rpx;
.image_6 {
width: 48rpx;
height: 48rpx;
}
.group_4 {
line-height: 24rpx;
.font_3 {
font-size: 32rpx;
font-family: SourceHanSansCN;
line-height: 24rpx;
color: #5db66f;
}
.text_3 {
line-height: 27.24rpx;
}
.font_4 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 24rpx;
color: #5db66f;
}
.text_4 {
line-height: 24.52rpx;
}
.text_5 {
line-height: 24.44rpx;
}
.text_6 {
line-height: 22.34rpx;
}
.text_7 {
line-height: 22.7rpx;
}
}
.font_5 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 24rpx;
color: #999999;
}
.text_8 {
line-height: 22.32rpx;
}
.text_9 {
line-height: 22.32rpx;
}
.text_10 {
color: #999999;
font-size: 24rpx;
font-family: HarmonyOSSansSC;
line-height: 22.32rpx;
}
}
.equal-division-item {
padding: 16rpx 0;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
height: 178rpx;
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
}
}
}
.section_4 {
padding: 36rpx 12rpx 24rpx 24rpx;
background-color: #ffffff;
border-radius: 11.76rpx;
mix-blend-mode: NOTTHROUGH;
.text_11 {
line-height: 30.2rpx;
}
.text_12 {
margin-top: 28rpx;
text-align: justify;
}
.group_5 {
margin-top: 16rpx;
.group_6 {
margin-right: 12rpx;
.view {
margin-top: 16rpx;
}
.group_7 {
height: 121.14rpx;
.text_13 {
text-align: justify;
}
}
}
.group_8 {
margin-right: 12rpx;
.view_2 {
margin-top: 12rpx;
}
.group_9 {
height: 121.18rpx;
.text_14 {
text-align: justify;
}
}
}
.section_5 {
background-color: #5db66f;
border-radius: 19998rpx;
width: 16rpx;
height: 16rpx;
}
.view_3 {
margin-top: 8rpx;
}
.group_10 {
height: 119.4rpx;
.text_16 {
color: #000000;
}
.text_15 {
text-align: justify;
}
}
.group_11 {
margin-right: 12rpx;
.view_4 {
margin-top: 12rpx;
}
.group_12 {
height: 119.62rpx;
.text_17 {
text-align: justify;
}
}
}
}
}
.font_2 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 40rpx;
color: #5db66f;
}
.section_6 {
padding: 40rpx 24rpx 24rpx;
background-color: #ffffff;
border-radius: 23.98rpx;
mix-blend-mode: NOTTHROUGH;
.text_18 {
line-height: 29.8rpx;
}
.section_7 {
padding: 20rpx 16rpx 20rpx 22rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
.text-wrapper {
padding: 20rpx 0;
background-color: #5db66f;
border-radius: 19998rpx;
width: 60rpx;
height: 60rpx;
.font_7 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 20.64rpx;
color: #ffffff;
}
.text_21 {
line-height: 21rpx;
}
.font_10 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 21.4rpx;
color: #ffffff;
}
.text_27 {
line-height: 21.02rpx;
}
}
.text_19 {
line-height: 26.24rpx;
}
.group_13 {
margin-top: 12rpx;
padding: 0 30rpx 20rpx;
.section_8 {
background-color: #5db66f;
width: 2rpx;
height: 32rpx;
}
.pos_2 {
position: absolute;
left: 30rpx;
bottom: 0;
}
.text_20 {
line-height: 22.76rpx;
}
}
.group_14 {
margin-top: 24rpx;
}
.group_15 {
margin: 4rpx 4rpx 0 32rpx;
.view_5 {
margin-top: 32rpx;
}
.text_22 {
text-align: justify;
}
}
.group_16 {
margin-top: 20rpx;
.text_23 {
line-height: 26.3rpx;
}
}
.group_17 {
margin-top: 12rpx;
padding: 0 32rpx;
.view_6 {
margin-top: 12rpx;
}
.text_24 {
line-height: 22.48rpx;
}
.text_26 {
margin-right: 28rpx;
line-height: 22.7rpx;
}
}
.section_9 {
background-color: #5db66f;
width: 1.74rpx;
height: 32rpx;
}
.font_9 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 24rpx;
color: #666666;
}
.group_18 {
margin-top: 24rpx;
.text_25 {
line-height: 26.1rpx;
}
}
.group_19 {
margin-top: 24rpx;
}
.group_20 {
margin-left: 32rpx;
margin-right: 4rpx;
.view_7 {
margin-top: 32rpx;
}
.text_28 {
text-align: justify;
}
}
.group_21 {
margin-right: 4rpx;
margin-top: 24rpx;
.text_29 {
line-height: 26.44rpx;
}
.text_30 {
text-align: justify;
width: 512rpx;
}
}
}
}
.font_6 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 40rpx;
color: #666666;
}
}
.text-wrapper_2 {
margin: 0 24rpx;
padding: 24rpx 0;
background-color: #ff9800;
border-radius: 198rpx;
.text_31 {
color: #ffffff;
line-height: 25.92rpx;
}
}
.font_8 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 26.34rpx;
color: #333333;
}
}
.font {
font-size: 32rpx;
font-family: SourceHanSansCN;
line-height: 30.02rpx;
color: #333333;
}
}
</style>
src/pages/fuwu/dailijizhang/dailijizhang.vue
......@@ -10,41 +10,41 @@
<view class="codefun-flex-col group_2">
<view class="codefun-flex-col group_3">
<view class="codefun-flex-col section_2">
<text class="codefun-self-start font">代理记账政策</text>
<text class="codefun-self-stretch font_2 text_2">
<text class="codefun-self-start font text_2">代理记账政策</text>
<text class="codefun-self-stretch font_2 text_3">
为农场主提供专业、高效的财务管理解决方案，省时省心更省钱
</text>
<view class="codefun-flex-row equal-division">
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item">
<image class="image_6" src="/static/images/codefun/6d0a7c763a538e5bc93fa50d6dd4fc8f.png" />
<view class="codefun-mt-10 group_4">
<text class="font_3 text_3">99元</text>
<text class="font_4 text_4">/月起</text>
<text class="font_3 text_4">99元</text>
<text class="font_4 text_5">/月起</text>
</view>
<text class="codefun-mt-10 font_5 text_8">价格低</text>
<text class="codefun-mt-10 font_5 text_9">价格低</text>
</view>
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item ml-11">
<image class="image_6" src="/static/images/codefun/3971dc28a5d847e08378fe0687e87cf4.png" />
<view class="group_4 mt-11">
<text class="font_3 text_5">10+</text>
<text class="font_4 text_6">项服务</text>
<text class="font_3 text_6">10+</text>
<text class="font_4 text_7">项服务</text>
</view>
<text class="font_5 text_9 mt-11">内容全</text>
<text class="font_5 text_10 mt-11">内容全</text>
</view>
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item ml-11">
<image class="image_6" src="/static/images/codefun/be09c7cafe008e9795f0f6a5df7928d8.png" />
<view class="group_4 mt-11">
<text class="font_3">24</text>
<text class="font_4 text_7">小时响应</text>
<text class="font_4 text_8">小时响应</text>
</view>
<text class="text_10 mt-11">效率高</text>
<text class="text_11 mt-11">效率高</text>
</view>
</view>
</view>
<view class="codefun-mt-12 codefun-flex-col section_4">
<text class="codefun-self-start font text_11">郴州市财汇商务咨询有限公司</text>
<text class="codefun-self-stretch font_6 text_12">
郴州市财汇商务咨询有限公司自2022年成立以来，业务发展迅速，客户群体以政府及公共机构为主。服务涵盖：
<text class="codefun-self-start font text_12">郴州市财汇商务咨询有限公司</text>
<text class="codefun-self-stretch font_6 text_13">
州市财汇商务咨询有限公司自2022年成立以来，业务发展迅速，客户群体以政府及公共机构为主。服务涵盖：
</text>
<view class="codefun-flex-col codefun-self-stretch group_5">
<view class="codefun-flex-row group_6">
......@@ -52,7 +52,7 @@
<view class="codefun-flex-1 group_7 ml-7">
<text class="font_2">村集体经济板块</text>
<text class="font_6"><br /></text>
<text class="font_6 text_13">
<text class="font_6 text_14">
与资兴农商行、市建行合作，为北湖区、资兴市近200个村集体在“互联网+监督”平台提供代理记账服务
</text>
</view>
......@@ -63,17 +63,17 @@
<text class="font_2">专项审计板块</text>
<text class="font_6"><br /></text>
<text class="font_6">承接资兴市村干部任期经济审计、市教</text>
<text class="font_6 text_14">科院定期财务内审等</text>
<text class="font_6 text_15">科院定期财务内审等</text>
</view>
</view>
<view class="codefun-mt-8 codefun-flex-row">
<view class="codefun-shrink-0 codefun-self-start section_5 view_3" />
<view class="codefun-flex-1 group_10 ml-7">
<text class="font_2">行政事业板块</text>
<text class="font_6 text_16">
<text class="font_6 text_17">
<br />
</text>
<text class="font_6 text_15"
<text class="font_6 text_16"
>为市委编办、市委组织部等20余家单位提供代理记账、资产盘点等服务</text
>
</view>
......@@ -82,7 +82,7 @@
<view class="codefun-shrink-0 codefun-self-start section_5 view_4" />
<view class="codefun-flex-1 group_12 ml-7">
<text class="font_2">教育系统板块</text>
<text class="font_6 text_17">
<text class="font_6 text_18">
<br />
完成桂阳县48所中小学食堂内审、桂阳一中/二中资产清查、市教育局校车成本核算等项目
</text>
......@@ -91,7 +91,7 @@
</view>
</view>
<view class="codefun-mt-12 codefun-flex-col section_6">
<text class="codefun-self-start font text_18">业务操作流程</text>
<text class="codefun-self-start font">业务操作流程</text>
<view class="codefun-flex-col codefun-self-stretch section_7 mt-17">
<view class="codefun-flex-row codefun-items-center">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
......@@ -162,12 +162,27 @@
</view>
</view>
</view>
<view class="codefun-mt-12 codefun-flex-col section_10">
<text class="codefun-self-start font text_31">公司资质</text>
<view class="codefun-mt-18 codefun-flex-row equal-division_2">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper equal-division-item_2"
>
<image class="image_7" src="/static/images/codefun/e10c098c837a0091dfe41ecd14dbaff5.png" />
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper equal-division-item_2 ml-15"
>
<image class="image_7" src="/static/images/codefun/7ad157344b66cce4731d077aa759c0f9.png" />
</view>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2"
@click="onApplyClick"
>
<text class="font_8 text_31">立即申请</text>
<text class="font_8 text_32">立即申请</text>
</view>
</view>
</view>
......@@ -198,6 +213,9 @@
.ml-13 {
margin-left: 26rpx;
}
.ml-15 {
margin-left: 30rpx;
}
.page {
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
......@@ -206,7 +224,7 @@
overflow-x: hidden;
height: 100%;
.section {
padding: 26rpx 28rpx 36rpx 36rpx;
padding: 26rpx 28rpx 32rpx 36rpx;
background-color: #5db66f;
mix-blend-mode: NOTTHROUGH;
.image {
......@@ -248,15 +266,18 @@
}
}
.group_2 {
padding: 0 28rpx 36rpx;
padding: 0 28rpx 56rpx;
.group_3 {
padding: 28rpx 0 36rpx;
padding: 28rpx 0 48rpx;
.section_2 {
padding: 32rpx 24rpx 24rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
.text_2 {
line-height: 30.02rpx;
}
.text_3 {
margin-top: 24rpx;
color: #666666;
}
......@@ -277,7 +298,7 @@
line-height: 24rpx;
color: #5db66f;
}
.text_3 {
.text_4 {
line-height: 27.24rpx;
}
.font_4 {
......@@ -286,16 +307,16 @@
line-height: 24rpx;
color: #5db66f;
}
.text_4 {
.text_5 {
line-height: 24.52rpx;
}
.text_5 {
.text_6 {
line-height: 24.44rpx;
}
.text_6 {
.text_7 {
line-height: 22.34rpx;
}
.text_7 {
.text_8 {
line-height: 22.7rpx;
}
}
......@@ -305,13 +326,13 @@
line-height: 24rpx;
color: #999999;
}
.text_8 {
line-height: 22.32rpx;
}
.text_9 {
line-height: 22.32rpx;
}
.text_10 {
line-height: 22.32rpx;
}
.text_11 {
color: #999999;
font-size: 24rpx;
font-family: HarmonyOSSansSC;
......@@ -337,10 +358,10 @@
background-color: #ffffff;
border-radius: 11.76rpx;
mix-blend-mode: NOTTHROUGH;
.text_11 {
.text_12 {
line-height: 30.2rpx;
}
.text_12 {
.text_13 {
margin-top: 28rpx;
text-align: justify;
}
......@@ -353,7 +374,7 @@
}
.group_7 {
height: 121.14rpx;
.text_13 {
.text_14 {
text-align: justify;
}
}
......@@ -365,7 +386,7 @@
}
.group_9 {
height: 121.18rpx;
.text_14 {
.text_15 {
text-align: justify;
}
}
......@@ -381,10 +402,10 @@
}
.group_10 {
height: 119.4rpx;
.text_16 {
.text_17 {
color: #000000;
}
.text_15 {
.text_16 {
text-align: justify;
}
}
......@@ -395,7 +416,7 @@
}
.group_12 {
height: 119.62rpx;
.text_17 {
.text_18 {
text-align: justify;
}
}
......@@ -413,9 +434,6 @@
background-color: #ffffff;
border-radius: 23.98rpx;
mix-blend-mode: NOTTHROUGH;
.text_18 {
line-height: 29.8rpx;
}
.section_7 {
padding: 20rpx 16rpx 20rpx 22rpx;
background-color: #f9fafb;
......@@ -513,7 +531,6 @@
font-family: SourceHanSansCN;
line-height: 24rpx;
color: #666666;
font-weight: 400;
}
.group_18 {
margin-top: 24rpx;
......@@ -553,13 +570,45 @@
line-height: 40rpx;
color: #666666;
}
.section_10 {
padding: 40rpx 24rpx 24rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
.text_31 {
line-height: 29.76rpx;
}
.equal-division_2 {
align-self: stretch;
.image-wrapper {
flex: 1 1 307.6rpx;
.image_7 {
border-radius: 8rpx;
width: 266rpx;
height: 188rpx;
}
}
.equal-division-item_2 {
padding: 16rpx 0;
background-color: #f9fafb;
border-radius: 8rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
height: 222rpx;
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
}
}
}
}
.text-wrapper_2 {
margin: 0 24rpx;
padding: 24rpx 0;
background-color: #ff9800;
border-radius: 198rpx;
.text_31 {
.text_32 {
color: #ffffff;
line-height: 25.92rpx;
}
......@@ -567,14 +616,14 @@
.font_8 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 26.34rpx;
color: #333333;
font-weight: 500;
}
}
.font {
font-size: 32rpx;
font-family: SourceHanSansCN;
line-height: 30.02rpx;
line-height: 29.8rpx;
color: #333333;
}
}
......
src/pages/nongchang/detail/index.vue
......@@ -10,7 +10,9 @@
addDefaultSymbolLayer,
useMapbox,
} from '@/components/Map/Mapbox/hook'
import type { ToolBoxButtonHandleEvent } from '@/components/Map/Widgets/ToolBox'
import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
import * as NongchangAPI from '@/api/model/nongchang'
import * as farmbaseApi from '@/api/model/farmbase'
// 页面参数
......@@ -32,6 +34,24 @@
plots: [],
// 设备信息
devices: [],
// 天气信息
weather: {
live: {
tem: '12°',
phenomena: '',
wind: '',
humidity: '',
},
forecast: [
{
phenomena: '',
date: '',
maxTem: '',
minTem: '',
},
],
},
// 预报日期
forecasts: ['29日', '30日', '1日', '2日', '3日'],
clicked: 0,
......@@ -40,18 +60,7 @@
deviceTypeCount: [],
})
onLoad((options) => {
model.id = options.id
model.name = decodeURIComponent(options.name)
getFarmbaseInfoList()
uni.setNavigationBarTitle({
title: decodeURIComponent(options.name),
})
})
const getFarmbaseInfoList = async () => {
async function getFarmbaseInfoList() {
farmbaseApi
.list({
farmId: model.id,
......@@ -60,34 +69,57 @@
const { records } = res
model.farmbaseInfoList = records
if (records.length > 0) {
getFarmbaseInfoById(records[0].id)
}
})
}
const getFarmbaseInfoById = async (id) => {
farmbaseApi.getFarmbaseInfoById({ id: id }).then((res) => {
async function getFarmbaseInfoById(id) {
farmbaseApi.getFarmbaseInfoById({ id }).then((res) => {
model.farmbaseInfo = res
getDeviceTypeCount()
})
}
const getDeviceTypeCount = async () => {
async function getDeviceTypeCount() {
farmbaseApi.getDeviceTypeCount({ farmId: model.id, farmBaseId: model.farmbaseInfo?.id }).then((res) => {
model.deviceTypeCount = res
})
}
// 地图组件
const center: [number, number] = [111.024108, 29.554847]
const [registerMap, map] = useMapbox({
style: { center, zoom: 15 },
onLoaded: (data) => {
style: { zoom: 15 },
onLoaded: async (data) => {
console.log('✨✨✨ Map Loaded', data)
// 模拟数据
// 查询农场数据
const res = await NongchangAPI.farmsList()
console.log('农场列表', res.records)
// 获取第一个农场信息
const item = res.records?.[0]
model.id = item.id
model.name = item.farmName
model.description = item.description
if (item.longitude && item.latitude) {
model.lonlat = `${item.longitude},${item.latitude}`
} else {
// 模拟位置数据
model.lonlat = '111.024108, 29.554847'
model.address = '湖南省 张家界市 慈利县 三淹桥村 村委会'
model.description = '详情信息说明'
Message.toast('未设置农场坐标位置，已使用模拟位置数据')
}
// 设置页面标题
uni.setNavigationBarTitle({
title: item.farmName,
})
// 设置地图中心点
map.flyTo({
center: model.lonlat.split(',').map(Number) as [number, number],
duration: 0,
})
// 渲染地块数据
model.plots = [
......@@ -181,14 +213,17 @@
popup: `{{name}}`,
}),
]
addDefaultGeoJSONSource(map, `${page.id}-text`, model.devices)
addDefaultSymbolLayer(map, `${page.id}-text`, {
addDefaultGeoJSONSource(map, `${page.id}-symbol`, model.devices)
addDefaultSymbolLayer(map, `${page.id}-symbol`, {
layout: {
'text-field': '',
'icon-image': ['get', 'icon'],
'icon-size': 1,
},
})
// 查询农场信息
getFarmbaseInfoList()
},
onSourceRequestHandle: () => {
page.requests--
......@@ -216,9 +251,19 @@
name: '设备',
color: '#75c849',
icon: '/static/images/codefun/device.active.png',
type: 'button',
handle: () => {
Message.alert('【设备】功能正在努力开发中...', '')
type: 'toggle',
handle: (e: ToolBoxButtonHandleEvent) => {
// 切换显示设备数据地图渲染
const active = e.button.icon === '/static/images/codefun/device.active.png'
if (active) {
e.button.color = '#666666'
e.button.icon = '/static/images/codefun/device.png'
map.setLayoutProperty(`${page.id}-symbol`, 'visibility', 'none')
} else {
e.button.color = '#75c849'
e.button.icon = '/static/images/codefun/device.active.png'
map.setLayoutProperty(`${page.id}-symbol`, 'visibility', 'visible')
}
},
},
],
......@@ -229,11 +274,10 @@
buttons: [
{
name: '降雨',
color: '#75c849',
icon: '/static/images/codefun/rain.png',
type: 'button',
handle: () => {
Message.alert('【降雨】功能正在努力开发中...', '')
Message.toast('暂无降雨数据')
},
},
{
......@@ -241,7 +285,7 @@
icon: '/static/images/codefun/temp.png',
type: 'button',
handle: () => {
Message.alert('【温度】功能正在努力开发中...', '')
Message.toast('暂无温度数据')
},
},
{
......@@ -249,7 +293,7 @@
icon: '/static/images/codefun/severe.png',
type: 'button',
handle: () => {
Message.alert('【强对流】功能正在努力开发中...', '')
Message.toast('暂无强对流数据')
},
},
{
......@@ -257,7 +301,7 @@
icon: '/static/images/codefun/wind.png',
type: 'button',
handle: () => {
Message.alert('【大风】功能正在努力开发中...', '')
Message.toast('暂无大风数据')
},
},
{
......@@ -265,7 +309,7 @@
icon: '/static/images/codefun/other.png',
type: 'button',
handle: () => {
Message.alert('【其他】功能正在努力开发中...', '')
Message.alert('敬请期待~', '温馨提醒')
},
},
],
......@@ -275,16 +319,16 @@
onNavigationBarButtonTap((e) => {
if (e.index === 0) {
Navigate.to('/pages/jidiguanli/add?farmId=' + model.id)
Navigate.to(`/pages/jidiguanli/add?farmId=${model.id}`)
}
})
</script>
<template>
<view class="page h-100vh bg-white">
<view class="page bg-white">
<!-- 地图组件 -->
<!-- <view class="h-730 overflow-hidden map-box"> -->
<view class="h-full overflow-hidden map-box">
<view class="h-810 overflow-hidden map-box">
<!-- 地图组件 -->
<Mapbox @register="registerMap" />
</view>
......@@ -298,10 +342,17 @@
<view class="play-wrap hidden">
<PlayWidget />
</view>
<!-- 天气信息 -->
<view class="weather-info">
<view>
<view />
</view>
</view>
</view>
<view class="card">
<view class="w-full h-full absolute top--70rpx">
<view class="card !top-810">
<view class="w-full absolute top--70rpx">
<view class="box-1">
<view class="relative w-full flex flex-row">
<view class="box-1-left"
......@@ -337,7 +388,7 @@
<text class="box-2-right-text1">15°-19°</text>
<text class="box-2-right-text2">今天 阴</text>
</view>
<view class="box-2-right-interval"></view>
<view class="box-2-right-interval" />
<view class="box-2-right-item">
<text class="box-2-right-text1">17°-21°</text>
<text class="box-2-right-text2">明天 多云</text>
......@@ -371,7 +422,7 @@
</view>
<view class="box-3-info-item-text-box">
<text class="box-3-info-item-text1">预计产量: </text>
<text class="box-3-info-item-text2"></text>
<text class="box-3-info-item-text2" />
</view>
</view>
<view class="box-3-info-item justify-between">
......@@ -410,8 +461,12 @@
<style lang="scss" scoped>
//
page {
background-color: #e6f5e8;
}
.page {
position: relative;
background-color: #e6f5e8;
.map-box {
// #ifdef APP-PLUS
......@@ -426,10 +481,8 @@
.card {
width: 100%;
height: 50vh;
background-color: #e6f5e8;
position: absolute;
bottom: 0rpx;
font-weight: 400;
font-family: '思源黑体';
......@@ -481,6 +534,7 @@
flex-direction: row;
justify-content: space-around;
color: #999999;
font-size: 24rpx;
.active {
color: #cccccc;
......@@ -639,7 +693,6 @@
.box-4 {
width: 95%;
height: 300rpx;
margin: 30rpx 20rpx 0 20rpx;
border-radius: 18rpx;
......@@ -706,7 +759,7 @@
.box-4-item-text2 {
font-size: 26rpx;
color: #5DB66F;
color: #5db66f;
}
}
}
......
src/pages/shouye/shouye.vue
......@@ -466,6 +466,12 @@ onHide(() => {
</view>
<text class="text" style="font-family: alimamashuheiti">湖南省</text>
</view>
<!-- ai助手 -->
<FuiMovableView top="650" right="10" zIndex="99999">
<view class="h-80rpx flex items-center" @click="openAITools">
<image class="w-117rpx h-118rpx" src="/static/images/codefun/ai.png" alt="" />
</view>
</FuiMovableView>
<view class="codefun-flex-col codefun-relative group_3">
<view class="codefun-flex-col">
<view class="codefun-flex-col codefun-self-stretch group_4">
......
src/pages/zhunongjinrong/_zhunongjinrong.vue 0 → 100644
<script setup lang="ts">
import { reactive } from 'vue'
// 定义按钮类型
interface Button {
id: number
name: string
active: boolean
}
onLoad((options) => {
console.log('onLoad', options)
if (options.id) {
// 获取按钮信息
const button = pageData.buttons.find((btn) => btn.id === Number(options.id))
if (button) {
// 将按钮设为激活状态
handleButtonClick(button)
}
}
})
// 页面数据
const pageData = reactive({
// 顶部按钮列表
buttons: [
{ id: 1, name: '惠农贷款', active: true },
{ id: 2, name: '振兴贷款', active: false },
{ id: 3, name: '灾害保险', active: false },
{ id: 4, name: '价格保险', active: false },
{ id: 5, name: '更多服务', active: false },
],
// 惠农贷款政策信息
policyInfo: {
title: '惠农贷款政策',
description: '面向新型农业经营主体，提供便捷资金支持',
},
// 政策特点
policyFeatures: [
{
id: 1,
icon: '/static/images/codefun/65805aa8bc30e1adb6350da711c623c5.png',
value: '5-50万',
description: '额度高',
},
{
id: 2,
icon: '/static/images/codefun/80992404de789827f849f53777c64863.png',
value: '3.85%起',
description: '利率低',
},
{
id: 3,
icon: '/static/images/codefun/c67aaf6f01b1cbde47843318ac8be555.png',
value: '最长3年',
description: '期限长',
},
],
// 申请条件
applicationConditions: [
{ id: 1, text: '年龄18-65周岁，具有完全民事行为能力' },
{ id: 2, text: '具有本地户籍或有效居住证明' },
{ id: 3, text: '从事农业生产经营或农产品加工活动' },
{ id: 4, text: '信用记录良好，无不良征信记录' },
],
// 办理流程
procedures: [
{ id: 1, step: '1', title: '提交申请' },
{ id: 2, step: '2', title: '资料审核' },
{ id: 3, step: '3', title: '签约授信' },
{ id: 4, step: '4', title: '放款到账' },
],
// 申请案例统计
caseStatistics: [
{ id: 1, value: '576人', description: '本县已申请' },
{ id: 2, value: '3天', description: '平均放款' },
{ id: 3, value: '98%', description: '满意度' },
],
// 申请案例
caseExample: {
name: '李**',
certification: '农户认证',
description: '种植大户，申请20万元贷款用于扩大生产模，3天放款，节省利息8000元/年',
date: '2025.09.10',
},
})
// 按钮点击事件处理
function handleButtonClick(button: Button) {
// 将所有按钮设为非激活状态
pageData.buttons.forEach((btn) => {
btn.active = false
})
// 将当前点击的按钮设为激活状态
button.active = true
}
const policyInfoTitle = computed(() => {
return (pageData.buttons.filter((btn) => btn.active)?.[0]?.name || '惠农贷款') + '政策'
})
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-mt-14 codefun-flex-col group_2">
<view class="codefun-flex-row group_3 gap-2 mr-3">
<view
v-for="button in pageData.buttons"
:key="button.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="button.active ? 'text-wrapper' : 'text-wrapper_2'"
@click="handleButtonClick(button)"
>
<text :class="button.active ? 'font_2 text_2' : 'font_3'">{{ button.name }}</text>
</view>
</view>
<view class="mt-28rpx codefun-flex-col section_2">
<text class="codefun-self-start font text_6">{{ policyInfoTitle }}</text>
<text class="codefun-self-start font_2 text_7">{{ pageData.policyInfo.description }}</text>
<view class="codefun-flex-row equal-division">
<view
v-for="feature in pageData.policyFeatures"
:key="feature.id"
class="codefun-flex-col codefun-items-center section_3 equal-division-item"
>
<image class="image_6" :src="feature.icon" />
<text class="font_4 mt-11">{{ feature.value }}</text>
<text class="font_5 mt-11">{{ feature.description }}</text>
</view>
</view>
<text class="codefun-self-start font text_8">申请条件</text>
<view class="codefun-flex-col codefun-self-stretch section_4 gap-2">
<view
v-for="condition in pageData.applicationConditions"
:key="condition.id"
class="codefun-flex-row codefun-items-center"
>
<view class="section_5" />
<text class="font_2 ml-9">{{ condition.text }}</text>
</view>
</view>
<text class="codefun-self-start font text_13">办理流程</text>
<view class="codefun-flex-col codefun-self-stretch section_6">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
<view
v-for="procedure in pageData.procedures"
:key="procedure.id"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
>
<text class="font_7">{{ procedure.step }}</text>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between mt-9">
<text v-for="procedure in pageData.procedures" :key="procedure.id" class="font_8">
{{ procedure.title }}
</text>
</view>
</view>
<text class="codefun-self-start font text_22">申请案例</text>
<view class="codefun-flex-row equal-division_2">
<view
v-for="statistic in pageData.caseStatistics"
:key="statistic.id"
class="codefun-flex-col codefun-items-center section_8 equal-division-item_2"
>
<text class="font_9">{{ statistic.value }}</text>
<text class="font_5 text_23 mt-11">{{ statistic.description }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-self-stretch section_9">
<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_7"
src="/static/images/codefun/a3188845d5d70f8bff3e95dcca8e2ff3.png"
/>
<text class="font_2 text_24 ml-9">{{ pageData.caseExample.name }}</text>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
<text class="font_5 text_25">{{ pageData.caseExample.certification }}</text>
</view>
</view>
<text class="codefun-mt-10 codefun-self-stretch font_2 text_26">
{{ pageData.caseExample.description }}
</text>
<text class="codefun-mt-10 codefun-self-start font_5 text_27">{{ pageData.caseExample.date }}</text>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.ml-5 {
margin-left: 10rpx;
}
.mt-23 {
margin-top: 46rpx;
}
.mt-15 {
margin-top: 30rpx;
}
.mt-9 {
margin-top: 18rpx;
}
.ml-11 {
margin-left: 22rpx;
}
.mt-11 {
margin-top: 22rpx;
}
.ml-9 {
margin-left: 18rpx;
}
.page {
padding-bottom: 28rpx;
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.section {
padding: 26rpx 28rpx 32rpx 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: 0 6rpx;
.image_5 {
mix-blend-mode: NOTTHROUGH;
width: 14rpx;
height: 26rpx;
}
.pos {
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.text {
color: #ffffffe6;
line-height: 29.8rpx;
}
}
}
.group_2 {
padding-left: 28rpx;
.group_3 {
overflow-x: auto;
.text-wrapper {
padding: 24rpx;
background-color: #5db66f;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.text_2 {
color: #ffffff;
line-height: 25.92rpx;
}
}
.text-wrapper_2 {
padding: 24rpx;
background-color: #ffffff;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.font_3 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 27.42rpx;
color: #1f2937;
}
.text_3 {
line-height: 25.92rpx;
}
.text_4 {
line-height: 26.02rpx;
}
.text_5 {
line-height: 26.18rpx;
}
}
.view {
margin-right: 20rpx;
}
}
.section_2 {
margin-right: 28rpx;
padding: 24rpx 24rpx;
background-color: #ffffff;
border-radius: 17.54rpx;
mix-blend-mode: NOTTHROUGH;
.text_6 {
line-height: 29.96rpx;
}
.text_7 {
margin-top: 32rpx;
line-height: 26.54rpx;
}
.equal-division {
align-self: stretch;
margin-top: 20rpx;
.section_3 {
flex: 1 1 200.54rpx;
.image_6 {
width: 48rpx;
height: 48rpx;
}
.font_4 {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 27.42rpx;
color: #5db66f;
}
}
.equal-division-item {
padding: 16rpx 0;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
height: 178rpx;
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
}
}
.text_8 {
margin-top: 40rpx;
line-height: 29.76rpx;
}
.section_4 {
margin-top: 24rpx;
padding: 24rpx 16rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
.section_5 {
background-color: #5db66f;
border-radius: 19998rpx;
width: 16rpx;
height: 16rpx;
}
.text_9 {
line-height: 26.62rpx;
}
.text_10 {
line-height: 25.98rpx;
}
.text_11 {
line-height: 25.9rpx;
}
.text_12 {
line-height: 26.54rpx;
}
}
.text_13 {
margin-top: 40rpx;
}
.section_6 {
margin-top: 24rpx;
padding: 24rpx 32rpx 24rpx 40rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
.group_4 {
padding: 0 16rpx;
.text-wrapper_3 {
padding: 20rpx 0;
background-color: #5db66f;
border-radius: 19998rpx;
width: 60rpx;
height: 60rpx;
.font_7 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 21.96rpx;
color: #ffffff;
}
.text_14 {
line-height: 20.64rpx;
}
.text_15 {
line-height: 21rpx;
}
.text_16 {
line-height: 21.4rpx;
}
.text_17 {
line-height: 20.64rpx;
}
}
.section_7 {
background-color: #5db66f;
width: 40rpx;
height: 1.74rpx;
}
.view_2 {
margin-right: 8rpx;
}
}
.font_8 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 21.96rpx;
color: #666666;
}
.text_18 {
line-height: 22.28rpx;
}
.text_19 {
line-height: 22.2rpx;
}
.text_20 {
line-height: 22.18rpx;
}
.text_21 {
line-height: 22.18rpx;
}
}
.text_22 {
margin-top: 40rpx;
line-height: 29.92rpx;
}
.equal-division_2 {
align-self: stretch;
margin-top: 32rpx;
.section_8 {
flex: 1 1 200.36rpx;
.font_9 {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 24.44rpx;
color: #5db66f;
}
.text_23 {
line-height: 22.08rpx;
}
}
.equal-division-item_2 {
padding: 28rpx 0 16rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
height: 120rpx;
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
}
}
.font_5 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 21.96rpx;
color: #999999;
}
.font_6 {
font-size: 24rpx;
font-family: HarmonyOSSansSC;
line-height: 21.96rpx;
color: #999999;
}
.section_9 {
margin-top: 16rpx;
padding: 24rpx 24rpx 28rpx;
background-color: #f9fafb;
border-radius: 16rpx;
.image_7 {
width: 64rpx;
height: 64rpx;
}
.text_24 {
color: #5db66f;
line-height: 25.68rpx;
}
.text-wrapper_4 {
padding: 8rpx 0;
background-color: #5db66f33;
border-radius: 19998rpx;
width: 128rpx;
height: 40rpx;
.text_25 {
color: #5db66f;
line-height: 22.34rpx;
}
}
.text_26 {
line-height: 40rpx;
text-align: justify;
}
.text_27 {
line-height: 18.22rpx;
}
}
}
.font_2 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 27.42rpx;
color: #666666;
}
}
.font {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 29.88rpx;
color: #333333;
}
}
</style>
src/pages/zhunongjinrong/zhunongjinrong.vue
<!-- src/pages/zhunongjinrong/zhunongjinrong.vue -->
<script setup lang="ts">
import { reactive } from 'vue'
import { reactive, ref } from 'vue'
// 定义按钮类型
interface Button {
id: number
name: string
active: boolean
// 定义银行类型
type BankKey = 'nongye' | 'youzheng' | 'nongshang'
// 定义银行信息接口
interface BankFeature {
amount: string
rate: string
term: string
}
onLoad((options) => {
console.log('onLoad', options)
if (options.id) {
// 获取按钮信息
const button = pageData.buttons.find((btn) => btn.id === Number(options.id))
if (button) {
// 将按钮设为激活状态
handleButtonClick(button)
interface ProcessStep {
number: string
title: string
desc?: string
}
interface BankCase {
applicants: string
duration: string
satisfaction: string
}
})
// 页面数据
const pageData = reactive({
// 顶部按钮列表
buttons: [
{ id: 1, name: '惠农贷款', active: true },
{ id: 2, name: '振兴贷款', active: false },
{ id: 3, name: '灾害保险', active: false },
{ id: 4, name: '价格保险', active: false },
{ id: 5, name: '更多服务', active: false },
],
interface Review {
avatar: string
name: string
content: string
date: string
}
interface BankInfo {
title: string
description: string
features: BankFeature
conditions: string[]
processType: 'simple' | 'detailed'
processSteps?: ProcessStep[]
cases: BankCase
review: Review
}
// 当前选中的银行
const currentBank = ref<BankKey>('nongye')
// 惠农贷款政策信息
policyInfo: {
title: '惠农贷款政策',
// 银行信息数据
const bankInfo = reactive<Record<BankKey, BankInfo>>({
nongye: {
title: '惠农e贷',
description: '面向新型农业经营主体，提供便捷资金支持',
features: {
amount: '5-50万',
rate: '3.85%起',
term: '最长3年',
},
// 政策特点
policyFeatures: [
{
id: 1,
icon: '/static/images/codefun/65805aa8bc30e1adb6350da711c623c5.png',
value: '5-50万',
description: '额度高',
conditions: [
'年龄18-60周岁，具有完全民事行为能力',
'本地户籍或连续居住2年以上',
'从事农业生产经营满1年',
'征信记录良好，无重大不良记录',
'在其他金融机构无严重逾期',
'种植面积：粮食作物50亩以上，经济作物10亩以上',
],
processType: 'simple', // 简单流程
cases: {
applicants: '576人',
duration: '3天',
satisfaction: '98%',
},
{
id: 2,
icon: '/static/images/codefun/80992404de789827f849f53777c64863.png',
value: '3.85%起',
description: '利率低',
review: {
avatar: '/static/images/codefun/a3188845d5d70f8bff3e95dcca8e2ff3.png',
name: '李**',
content: '种植大户，申请20万元贷款用于扩大生产模，3天放款，节省利息8000元/年',
date: '2025.09.10',
},
{
id: 3,
icon: '/static/images/codefun/c67aaf6f01b1cbde47843318ac8be555.png',
value: '最长3年',
description: '期限长',
},
youzheng: {
title: '乡村振兴贷',
description: '面向多村振兴重点项目、农村创业青年',
features: {
amount: '10-100万',
rate: '3.65%起',
term: '1-5年',
},
conditions: [
'年龄18-65周岁，具有完全民事行为能力',
'本地户籍或连续居住2年以上',
'从事农业生产经营满1年',
'征信记录良好，无重大不良记录',
'在其他金融机构无严重逾期',
'养殖规模:生猪年出栏100头以上，禽类存栏2000头以上',
],
// 申请条件
applicationConditions: [
{ id: 1, text: '年龄18-65周岁，具有完全民事行为能力' },
{ id: 2, text: '具有本地户籍或有效居住证明' },
{ id: 3, text: '从事农业生产经营或农产品加工活动' },
{ id: 4, text: '信用记录良好，无不良征信记录' },
processType: 'detailed', // 详细流程
processSteps: [
{ number: '1', title: '提交申请', desc: '线下' },
{ number: '2', title: '资料审核', desc: '1个工作日' },
{ number: '3', title: '现场调查', desc: '如果需要，2个工作日' },
{ number: '4', title: '授信审批', desc: '1个工作日' },
{ number: '5', title: '合同签订', desc: '线上电子签约' },
{ number: '5', title: '贷款发放', desc: '实时到账' },
],
// 办理流程
procedures: [
{ id: 1, step: '1', title: '提交申请' },
{ id: 2, step: '2', title: '资料审核' },
{ id: 3, step: '3', title: '签约授信' },
{ id: 4, step: '4', title: '放款到账' },
cases: {
applicants: '230人',
duration: '2天',
satisfaction: '97%',
},
review: {
avatar: '/static/images/codefun/c463efe6788131c40e126c349b4b9ead.png',
name: '周**',
content: '青年回乡创业，申请40万元贷款用于农场初步建设，3天放款，节省利息7000元/年',
date: '2025.11.10',
},
},
nongshang: {
title: '农保贷',
description: '牲畜养殖企业、合作社及个人',
features: {
amount: '3-30万',
rate: '4.2%起',
term: '6-12月',
},
conditions: [
'年龄18-65周岁，具有完全民事行为能力',
'本地户籍或连续居住2年以上',
'从事农业生产经营满2年',
'征信记录良好，无重大不良记录',
'在其他金融机构无严重逾期',
'种植面积：粮食作物30亩以上，经济作物20亩以上',
'养殖规模:生猪年出栏100头以上，禽类存栏2000头以上',
],
// 申请案例统计
caseStatistics: [
{ id: 1, value: '576人', description: '本县已申请' },
{ id: 2, value: '3天', description: '平均放款' },
{ id: 3, value: '98%', description: '满意度' },
processType: 'detailed', // 详细流程
processSteps: [
{ number: '1', title: '提交申请', desc: '线下' },
{ number: '2', title: '资料审核', desc: '1个工作日' },
{ number: '3', title: '现场调查', desc: '如果需要，2个工作日' },
{ number: '4', title: '授信审批', desc: '1个工作日' },
{ number: '5', title: '合同签订', desc: '线上电子签约' },
{ number: '5', title: '贷款发放', desc: '实时到账' },
],
// 申请案例
caseExample: {
name: '李**',
certification: '农户认证',
description: '种植大户，申请20万元贷款用于扩大生产模，3天放款，节省利息8000元/年',
date: '2025.09.10',
cases: {
applicants: '68人',
duration: '2天',
satisfaction: '97%',
},
review: {
avatar: '/static/images/codefun/a3188845d5d70f8bff3e95dcca8e2ff3.png',
name: '张**',
content: '畜牧产业扩张，申请20万，2天返款，节省利息2000元/年',
date: '2025.11.12',
},
},
})
// 按钮点击事件处理
function handleButtonClick(button: Button) {
// 将所有按钮设为非激活状态
pageData.buttons.forEach((btn) => {
btn.active = false
})
// 将当前点击的按钮设为激活状态
button.active = true
// 切换银行的方法
function switchBank(bank: BankKey) {
currentBank.value = bank
}
const policyInfoTitle = computed(() => {
return (pageData.buttons.filter((btn) => btn.active)?.[0]?.name || '惠农贷款') + '政策'
})
// 立即申请
function onApplyClick() {
Message.alert('申请功能暂不可用，敬请期待~', '温馨提示')
}
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-mt-14 codefun-flex-col group_2">
<view class="codefun-flex-row group_3 gap-2 mr-3">
<view class="codefun-flex-col group_2">
<view class="codefun-flex-col group_3">
<!-- 银行切换选项卡 -->
<view class="codefun-flex-row">
<view
v-for="button in pageData.buttons"
:key="button.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="button.active ? 'text-wrapper' : 'text-wrapper_2'"
@click="handleButtonClick(button)"
class="codefun-flex-row codefun-justify-center codefun-items-center equal-division-item"
:class="[currentBank === 'nongye' ? 'section_2' : 'equal-division-item_2']"
@click="switchBank('nongye')"
>
<text :class="button.active ? 'font_2 text_2' : 'font_3'">{{ button.name }}</text>
<image
class="image_6"
:src="`/static/images/codefun/${currentBank === 'nongye' ? 'cdb60fe94eefabfc90b4ecc7b3beb55e' : '889f212ad7834cf60a5db23a349f4784'}.png`"
/>
<text :class="[currentBank === 'nongye' ? 'font_2 text_2 ml-5' : 'font_3 ml-5']">农业银行</text>
</view>
<view
class="codefun-flex-row codefun-justify-center codefun-items-center equal-division-item ml-9"
:class="[currentBank === 'youzheng' ? 'section_2' : 'equal-division-item_2']"
@click="switchBank('youzheng')"
>
<image
class="image_6"
:src="`/static/images/codefun/${currentBank === 'youzheng' ? '68af9c6957d58cd29e32098e0faf14ef' : 'cc9a4466c443c3e0212cdfb9e8b5025c'}.png`"
/>
<text :class="[currentBank === 'youzheng' ? 'font_2 text_2 ml-5' : 'font_3 ml-5']"
>邮政银行</text
>
</view>
<view class="mt-28rpx codefun-flex-col section_2">
<text class="codefun-self-start font text_6">{{ policyInfoTitle }}</text>
<text class="codefun-self-start font_2 text_7">{{ pageData.policyInfo.description }}</text>
<view class="codefun-flex-row equal-division">
<view
v-for="feature in pageData.policyFeatures"
:key="feature.id"
class="codefun-flex-col codefun-items-center section_3 equal-division-item"
class="codefun-flex-row codefun-justify-center codefun-items-center equal-division-item ml-9"
:class="[currentBank === 'nongshang' ? 'section_2' : 'equal-division-item_2']"
@click="switchBank('nongshang')"
>
<image class="image_6" :src="feature.icon" />
<text class="font_4 mt-11">{{ feature.value }}</text>
<text class="font_5 mt-11">{{ feature.description }}</text>
<image
class="image_6"
:src="`/static/images/codefun/${currentBank === 'nongshang' ? '4292fcce91a07c9902cf44843022951e' : '1b5cb211666de5a9ecb586aa841a51e5'}.png`"
/>
<text :class="[currentBank === 'nongshang' ? 'font_2 text_2 ml-5' : 'font_3 ml-5']"
>农商银行</text
>
</view>
</view>
<!-- 内容区域 -->
<view class="codefun-mt-14 codefun-flex-col section_3">
<!-- 标题和描述 -->
<text class="codefun-self-start font">{{ bankInfo[currentBank].title }}</text>
<text class="codefun-self-start font_4 text_4">{{ bankInfo[currentBank].description }}</text>
<!-- 特点展示 -->
<view class="codefun-flex-row equal-division">
<view class="codefun-flex-col codefun-items-center section_4 equal-division-item_3">
<image class="image_7" src="/static/images/codefun/98dd61b283a4158dac14bd3bc1f8fc41.png" />
<text class="font_5 text_5 mt-11">{{ bankInfo[currentBank].features.amount }}</text>
<text class="font_6 text_6 mt-11">额度高</text>
</view>
<view class="codefun-flex-col codefun-items-center section_4 equal-division-item_3 ml-11">
<image class="image_7" src="/static/images/codefun/3971dc28a5d847e08378fe0687e87cf4.png" />
<text class="codefun-mt-10 font_5 text_5">{{ bankInfo[currentBank].features.rate }}</text>
<text class="codefun-mt-10 font_6 text_6">利率低</text>
</view>
<text class="codefun-self-start font text_8">申请条件</text>
<view class="codefun-flex-col codefun-self-stretch section_4 gap-2">
<view class="codefun-flex-col codefun-items-center section_4 equal-division-item_3 ml-11">
<image class="image_7" src="/static/images/codefun/68af204c01b1b8cc428452480ee02f51.png" />
<text class="codefun-mt-10 font_5 text_5">{{ bankInfo[currentBank].features.term }}</text>
<text class="codefun-mt-10 font_7 text_6">期限长</text>
</view>
</view>
<!-- 申请条件 -->
<text class="codefun-self-start font text_7">申请条件</text>
<view class="codefun-flex-col codefun-self-stretch section_5">
<view
v-for="condition in pageData.applicationConditions"
:key="condition.id"
v-for="(condition, index) in bankInfo[currentBank].conditions"
:key="index"
class="codefun-flex-row codefun-items-center"
:class="[index !== 0 ? 'codefun-mt-14' : '']"
>
<view class="section_5" />
<text class="font_2 ml-9">{{ condition.text }}</text>
<view class="section_6" />
<text class="font_4">{{ condition }}</text>
</view>
</view>
<text class="codefun-self-start font text_13">办理流程</text>
<view class="codefun-flex-col codefun-self-stretch section_6">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
<!-- 办理流程 -->
<text class="codefun-self-start font text_12">办理流程</text>
<view
v-for="procedure in pageData.procedures"
:key="procedure.id"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
v-if="bankInfo[currentBank].processType === 'simple'"
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch text-wrapper"
>
<text class="font_7">{{ procedure.step }}</text>
<text class="font_6 text_13">线下咨询，已实际办理流程为准。</text>
</view>
<view v-else class="codefun-flex-col codefun-self-stretch section_8">
<view
v-for="(step, index) in bankInfo[currentBank].processSteps"
:key="index"
class="codefun-flex-col"
:class="[index !== 0 ? 'codefun-mt-4' : '']"
>
<view class="codefun-flex-row codefun-items-center">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
>
<text class="font_8">{{ step.number }}</text>
</view>
<view class="codefun-flex-row codefun-justify-between mt-9">
<text v-for="procedure in pageData.procedures" :key="procedure.id" class="font_8">
{{ procedure.title }}
</text>
<text class="font_9 text_15 ml-11">{{ step.title }}</text>
</view>
<view v-if="step.desc" class="codefun-flex-row group_5">
<view class="codefun-self-center section_9" />
<text class="codefun-ml-26 codefun-self-start font_10">{{ step.desc }}</text>
</view>
</view>
<text class="codefun-self-start font text_22">申请案例</text>
</view>
<!-- 申请案例 -->
<text class="codefun-self-start font text_14">申请案例</text>
<view class="codefun-flex-row equal-division_2">
<view
v-for="statistic in pageData.caseStatistics"
:key="statistic.id"
class="codefun-flex-col codefun-items-center section_8 equal-division-item_2"
>
<text class="font_9">{{ statistic.value }}</text>
<text class="font_5 text_23 mt-11">{{ statistic.description }}</text>
<view class="codefun-flex-col codefun-items-center section_7 equal-division-item_4">
<text class="font_5 text_15">{{ bankInfo[currentBank].cases.applicants }}</text>
<text class="font_6 mt-11">本县已申请</text>
</view>
<view class="codefun-flex-col codefun-items-center section_7 equal-division-item_4 ml-11">
<text class="font_5 text_15">{{ bankInfo[currentBank].cases.duration }}</text>
<text class="font_6 mt-11">平均放款</text>
</view>
<view class="codefun-flex-col codefun-items-center section_7 equal-division-item_4 ml-11">
<text class="font_5 text_15">{{ bankInfo[currentBank].cases.satisfaction }}</text>
<text class="font_7 mt-11">满意度</text>
</view>
<view class="codefun-flex-col codefun-self-stretch section_9">
<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
</view>
<!-- 用户评价 -->
<view class="codefun-flex-col codefun-self-stretch section_10">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch"
>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_7"
src="/static/images/codefun/a3188845d5d70f8bff3e95dcca8e2ff3.png"
/>
<text class="font_2 text_24 ml-9">{{ pageData.caseExample.name }}</text>
<image class="codefun-shrink-0 image_8" :src="bankInfo[currentBank].review.avatar" />
<text class="font_4 text_16 ml-9">{{ bankInfo[currentBank].review.name }}</text>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
<text class="font_5 text_25">{{ pageData.caseExample.certification }}</text>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
<text class="font_6 text_17">农户认证</text>
</view>
</view>
<text class="codefun-mt-10 codefun-self-stretch font_2 text_26">
{{ pageData.caseExample.description }}
<text class="codefun-mt-10 codefun-self-stretch font_8 text_18">
{{ bankInfo[currentBank].review.content }}
</text>
<text class="codefun-mt-10 codefun-self-start font_5 text_27">{{ pageData.caseExample.date }}</text>
<text class="codefun-mt-10 codefun-self-start font_6 text_19">{{
bankInfo[currentBank].review.date
}}</text>
</view>
</view>
</view>
<!-- 立即申请按钮 -->
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
@click="onApplyClick"
>
<text class="font_2 text_20">立即申请</text>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.ml-5 {
margin-left: 10rpx;
}
.mt-23 {
margin-top: 46rpx;
}
.mt-15 {
margin-top: 30rpx;
.ml-5 {
margin-left: 10rpx;
}
.mt-9 {
margin-top: 18rpx;
.mt-11 {
margin-top: 22rpx;
}
.ml-11 {
margin-left: 22rpx;
}
.mt-11 {
margin-top: 22rpx;
}
.ml-9 {
margin-left: 18rpx;
}
.page {
padding-bottom: 28rpx;
padding-bottom: 38rpx;
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
width: 100%;
......@@ -270,77 +396,74 @@
}
}
.group_2 {
padding-left: 28rpx;
padding: 0 28rpx 32rpx;
.group_3 {
overflow-x: auto;
.text-wrapper {
padding: 24rpx;
background-color: #5db66f;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.text_2 {
color: #ffffff;
line-height: 25.92rpx;
padding: 28rpx 0 40rpx;
.equal-division-item {
flex: 1 1 220rpx;
.image_6 {
width: 40rpx;
height: 40rpx;
}
.text_2 {
line-height: 25.88rpx;
}
.text-wrapper_2 {
padding: 24rpx;
background-color: #ffffff;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.font_3 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 27.42rpx;
font-family: SourceHanSansCN;
line-height: 25.96rpx;
color: #1f2937;
}
.text_3 {
line-height: 25.92rpx;
}
.text_4 {
line-height: 26.02rpx;
}
.text_5 {
line-height: 26.18rpx;
line-height: 25.88rpx;
}
}
.view {
margin-right: 20rpx;
.section_2 {
padding: 16rpx 24rpx 16rpx 32rpx;
background-color: #5db66f;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
}
.equal-division-item_2 {
padding: 16rpx 24rpx 16rpx 32rpx;
background-color: #ffffff;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
}
.section_2 {
margin-right: 28rpx;
padding: 24rpx 24rpx;
.section_3 {
padding: 32rpx 24rpx 24rpx;
background-color: #ffffff;
border-radius: 17.54rpx;
border-radius: 16.2rpx;
mix-blend-mode: NOTTHROUGH;
.text_6 {
line-height: 29.96rpx;
.font_4 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 25.96rpx;
color: #666666;
}
.text_7 {
.text_4 {
margin-top: 32rpx;
line-height: 26.54rpx;
}
.equal-division {
align-self: stretch;
margin-top: 20rpx;
.section_3 {
.section_4 {
flex: 1 1 200.54rpx;
.image_6 {
.image_7 {
width: 48rpx;
height: 48rpx;
}
.font_4 {
font-size: 32rpx;
font-family: DingTalk Sans;
.text_5 {
line-height: 27.42rpx;
color: #5db66f;
}
.text_6 {
line-height: 21.96rpx;
}
.equal-division-item {
}
.equal-division-item_3 {
padding: 16rpx 0;
background-color: #f9fafb;
border-radius: 16rpx;
......@@ -353,13 +476,14 @@
border-bottom: solid 2rpx #ffffff;
}
}
.text_8 {
.text_7 {
margin-top: 40rpx;
line-height: 29.76rpx;
}
.section_4 {
.section_5 {
overflow: auto;
margin-top: 24rpx;
padding: 24rpx 16rpx;
padding: 28rpx 16rpx 20rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
......@@ -368,31 +492,50 @@
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
.section_5 {
.section_6 {
background-color: #5db66f;
border-radius: 19998rpx;
width: 16rpx;
height: 16rpx;
margin-right: 16rpx;
}
.text_9 {
.text_8 {
line-height: 26.62rpx;
}
.text_9 {
line-height: 26.54rpx;
}
.text_10 {
line-height: 25.98rpx;
line-height: 26.04rpx;
}
.text_11 {
line-height: 25.9rpx;
line-height: 26.04rpx;
}
.text_12 {
line-height: 26.54rpx;
}
.text_12 {
margin-top: 40rpx;
line-height: 29.88rpx;
}
.text-wrapper {
margin-top: 24rpx;
padding: 28rpx 0;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
.text_13 {
margin-top: 40rpx;
margin-left: 24rpx;
color: #333333;
line-height: 22.9rpx;
}
.section_6 {
}
.section_8 {
margin-top: 24rpx;
padding: 24rpx 32rpx 24rpx 40rpx;
padding: 24rpx 16rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
......@@ -401,81 +544,62 @@
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
.group_4 {
padding: 0 16rpx;
.text-wrapper_3 {
.text-wrapper_5 {
padding: 20rpx 0;
background-color: #5db66f;
border-radius: 19998rpx;
width: 60rpx;
height: 60rpx;
.font_7 {
.font_8 {
font-size: 28rpx;
font-family: DingTalk Sans;
font-family: SourceHanSansCN;
line-height: 21.96rpx;
color: #ffffff;
}
.text_14 {
line-height: 20.64rpx;
}
.text_15 {
line-height: 21rpx;
}
.text_16 {
line-height: 21.4rpx;
line-height: 22.56rpx;
}
.text_17 {
line-height: 20.64rpx;
}
}
.section_7 {
.group_5 {
padding: 0 28rpx;
.section_9 {
background-color: #5db66f;
width: 40rpx;
height: 1.74rpx;
width: 1.74rpx;
height: 32rpx;
}
.view_2 {
margin-right: 8rpx;
}
.font_9 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 21.96rpx;
color: #333333;
}
.font_8 {
.font_10 {
font-size: 24rpx;
font-family: DingTalk Sans;
font-family: SourceHanSansCN;
line-height: 21.96rpx;
color: #666666;
}
.text_18 {
line-height: 22.28rpx;
}
.text_19 {
line-height: 22.2rpx;
}
.text_20 {
line-height: 22.18rpx;
}
.text_21 {
line-height: 22.18rpx;
}
.font_6 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 22.08rpx;
color: #999999;
}
.text_22 {
.text_14 {
margin-top: 40rpx;
line-height: 29.92rpx;
}
.equal-division_2 {
align-self: stretch;
margin-top: 32rpx;
.section_8 {
.section_7 {
flex: 1 1 200.36rpx;
.font_9 {
font-size: 32rpx;
font-family: DingTalk Sans;
.text_15 {
line-height: 24.44rpx;
color: #5db66f;
}
.text_23 {
line-height: 22.08rpx;
}
}
.equal-division-item_2 {
.equal-division-item_4 {
padding: 28rpx 0 16rpx;
background-color: #f9fafb;
border-radius: 16rpx;
......@@ -489,61 +613,76 @@
}
}
.font_5 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 21.96rpx;
color: #999999;
font-size: 32rpx;
font-family: SourceHanSansCN;
line-height: 25.96rpx;
color: #5db66f;
}
.font_6 {
.font_7 {
font-size: 24rpx;
font-family: HarmonyOSSansSC;
line-height: 21.96rpx;
line-height: 22.08rpx;
color: #999999;
}
.section_9 {
.section_10 {
margin-top: 16rpx;
padding: 24rpx 24rpx 28rpx;
background-color: #f9fafb;
border-radius: 16rpx;
.image_7 {
.image_8 {
width: 64rpx;
height: 64rpx;
}
.text_24 {
.text_16 {
color: #5db66f;
line-height: 25.68rpx;
}
.text-wrapper_4 {
.text-wrapper_2 {
padding: 8rpx 0;
background-color: #5db66f33;
border-radius: 19998rpx;
width: 128rpx;
height: 40rpx;
.text_25 {
.text_17 {
color: #5db66f;
line-height: 22.34rpx;
}
}
.text_26 {
line-height: 40rpx;
.text_18 {
text-align: justify;
}
.text_27 {
.text_19 {
line-height: 18.22rpx;
}
}
.font_8 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 40rpx;
color: #666666;
}
}
}
.text-wrapper_3 {
margin: 0 24rpx;
padding: 24rpx 0;
background-color: #ff9800;
border-radius: 198rpx;
.text_20 {
line-height: 25.92rpx;
}
}
.font_2 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 27.42rpx;
color: #666666;
font-family: SourceHanSansCN;
line-height: 25.96rpx;
color: #ffffff;
}
}
.font {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 29.88rpx;
font-family: SourceHanSansCN;
line-height: 29.92rpx;
color: #333333;
}
}
......
src/static/images/codefun/chanxiao.png
src/static/images/codefun/chanxiao.png

915 Bytes | W: | H:

src/static/images/codefun/chanxiao.png

495 Bytes | W: | H:

src/static/images/codefun/chanxiao.png
src/static/images/codefun/chanxiao.png
src/static/images/codefun/chanxiao.png
src/static/images/codefun/chanxiao.png
  • 2-up
  • Swipe
  • Onion skin
src/static/images/codefun/device.png
src/static/images/codefun/device.png

973 Bytes | W: | H:

src/static/images/codefun/device.png

449 Bytes | W: | H:

src/static/images/codefun/device.png
src/static/images/codefun/device.png
src/static/images/codefun/device.png
src/static/images/codefun/device.png
  • 2-up
  • Swipe
  • Onion skin
src/static/images/codefun/doc_img.png
src/static/images/codefun/doc_img.png

545 Bytes | W: | H:

src/static/images/codefun/doc_img.png

368 Bytes | W: | H:

src/static/images/codefun/doc_img.png
src/static/images/codefun/doc_img.png
src/static/images/codefun/doc_img.png
src/static/images/codefun/doc_img.png
  • 2-up
  • Swipe
  • Onion skin
src/static/images/codefun/elx_img.png
src/static/images/codefun/elx_img.png

535 Bytes | W: | H:

src/static/images/codefun/elx_img.png

345 Bytes | W: | H:

src/static/images/codefun/elx_img.png
src/static/images/codefun/elx_img.png
src/static/images/codefun/elx_img.png
src/static/images/codefun/elx_img.png
  • 2-up
  • Swipe
  • Onion skin
src/static/images/codefun/other.png
src/static/images/codefun/other.png

614 Bytes | W: | H:

src/static/images/codefun/other.png

354 Bytes | W: | H:

src/static/images/codefun/other.png
src/static/images/codefun/other.png
src/static/images/codefun/other.png
src/static/images/codefun/other.png
  • 2-up
  • Swipe
  • Onion skin
src/static/images/codefun/play.png
src/static/images/codefun/play.png

1.1 KB | W: | H:

src/static/images/codefun/play.png

630 Bytes | W: | H:

src/static/images/codefun/play.png
src/static/images/codefun/play.png
src/static/images/codefun/play.png
src/static/images/codefun/play.png
  • 2-up
  • Swipe
  • Onion skin
src/static/images/codefun/rain.png
src/static/images/codefun/rain.png

1.9 KB | W: | H:

src/static/images/codefun/rain.png

556 Bytes | W: | H:

src/static/images/codefun/rain.png
src/static/images/codefun/rain.png
src/static/images/codefun/rain.png
src/static/images/codefun/rain.png
  • 2-up
  • Swipe
  • Onion skin
src/static/images/codefun/severe.png
src/static/images/codefun/severe.png

664 Bytes | W: | H:

src/static/images/codefun/severe.png

357 Bytes | W: | H:

src/static/images/codefun/severe.png
src/static/images/codefun/severe.png
src/static/images/codefun/severe.png
src/static/images/codefun/severe.png
  • 2-up
  • Swipe
  • Onion skin
src/static/images/codefun/temp.png
src/static/images/codefun/temp.png

1.2 KB | W: | H:

src/static/images/codefun/temp.png

535 Bytes | W: | H:

src/static/images/codefun/temp.png
src/static/images/codefun/temp.png
src/static/images/codefun/temp.png
src/static/images/codefun/temp.png
  • 2-up
  • Swipe
  • Onion skin
src/static/images/codefun/wind.png
src/static/images/codefun/wind.png

1.2 KB | W: | H:

src/static/images/codefun/wind.png

511 Bytes | W: | H:

src/static/images/codefun/wind.png
src/static/images/codefun/wind.png
src/static/images/codefun/wind.png
src/static/images/codefun/wind.png
  • 2-up
  • Swipe
  • Onion skin
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论