ZhaoYang
4 weeks ago
29 changed files with 3436 additions and 1427 deletions
-
4app.json
-
14pages/home/home.js
-
4pages/home/home.wxml
-
BINpagesA/images/amxl.png
-
BINpagesA/images/blf.png
-
BINpagesA/images/lh.png
-
BINpagesA/images/wc.png
-
635pagesA/pages/medicine/medicine.js
-
57pagesA/pages/medicine/medicine.wxml
-
52pagesA/pages/medicine/medicine.wxss
-
525pagesA/pages/medicineDetails/medicineDetails.js
-
61pagesA/pages/medicineDetails/medicineDetails.wxml
-
22pagesA/pages/medicineDetails/medicineDetails.wxss
-
BINpagesB/images/bo.png
-
BINpagesB/images/lll.png
-
BINpagesB/images/you.png
-
312pagesB/pages/policyElucidation/policyElucidation.js
-
4pagesB/pages/policyElucidation/policyElucidation.json
-
195pagesB/pages/policyElucidation/policyElucidation.wxml
-
498pagesB/pages/policyElucidation/policyElucidation.wxss
-
323pagesB/pages/repository/repository.js
-
86pagesB/pages/repository/repository.wxml
-
86pagesB/pages/repository/repository.wxss
-
457pagesB/pages/training/training.js
-
4pagesB/pages/training/training.json
-
298pagesB/pages/training/training.wxml
-
1066pagesB/pages/training/training.wxss
-
22utils/api.js
-
16utils/tool.wxs
|
Before Width: 305 | Height: 271 | Size: 107 KiB |
|
Before Width: 605 | Height: 513 | Size: 271 KiB |
|
Before Width: 366 | Height: 337 | Size: 123 KiB |
|
Before Width: 605 | Height: 528 | Size: 340 KiB |
|
After Width: 200 | Height: 200 | Size: 2.5 KiB |
|
After Width: 200 | Height: 200 | Size: 3.6 KiB |
|
After Width: 200 | Height: 200 | Size: 2.4 KiB |
@ -0,0 +1,312 @@ |
|||||
|
// policy-interpretation.js
|
||||
|
Page({ |
||||
|
data: { |
||||
|
currentDate: '2023年11月15日', |
||||
|
searchKeyword: '', |
||||
|
activeFilter: 'all', |
||||
|
showPolicyDetail: false, |
||||
|
currentPolicy: {}, |
||||
|
|
||||
|
// 所有政策数据
|
||||
|
allPolicies: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: '2023年农业补贴资金申报指南', |
||||
|
summary: '明确了今年农业补贴的申请条件、标准和流程，重点支持粮食生产和特色农业', |
||||
|
date: '2023-10-20', |
||||
|
source: '农业农村部', |
||||
|
type: 'financial', |
||||
|
typeText: '财政补贴', |
||||
|
keyPoints: [ |
||||
|
'提高粮食生产者补贴标准，每亩增加10-20元', |
||||
|
'新增特色农产品种植补贴，最高每亩补贴500元', |
||||
|
'简化申报流程，推行线上申报系统', |
||||
|
'强化补贴资金监管，确保专款专用' |
||||
|
], |
||||
|
interpretation: '此次农业补贴政策调整体现了国家保障粮食安全和促进农业高质量发展的决心。通过提高补贴标准、扩大补贴范围，调动农民种粮积极性，同时支持特色农业发展，优化农业产业结构。', |
||||
|
applicableObjects: [ |
||||
|
'种粮大户', |
||||
|
'家庭农场', |
||||
|
'农民专业合作社', |
||||
|
'农业企业' |
||||
|
], |
||||
|
applicationGuide: [ |
||||
|
'登录农业农村部政务服务平台', |
||||
|
'填写申报信息并上传证明材料', |
||||
|
'乡镇农业部门初审', |
||||
|
'县级农业农村部门审核', |
||||
|
'公示7个工作日', |
||||
|
'拨付补贴资金' |
||||
|
], |
||||
|
expertAdvice: '建议符合条件的农业经营主体尽早准备申报材料，重点关注今年新增的特色农产品补贴项目。同时注意申报时间节点，避免错过申报期限。', |
||||
|
relatedLinks: [ |
||||
|
{ name: '政策原文链接', url: 'https://example.com/policy1' }, |
||||
|
{ name: '申报平台入口', url: 'https://example.com/apply1' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: '畜牧业高质量发展支持政策', |
||||
|
summary: '针对畜牧业规模化、标准化发展提出具体扶持措施，加强动物疫病防控', |
||||
|
date: '2023-09-15', |
||||
|
source: '农业农村部', |
||||
|
type: 'financial', |
||||
|
typeText: '财政补贴', |
||||
|
keyPoints: [ |
||||
|
'对标准化养殖场建设给予30%资金补贴', |
||||
|
'引进优良种畜每头补贴500-2000元', |
||||
|
'支持畜禽粪污资源化利用项目', |
||||
|
'加强动物疫病防控体系建设' |
||||
|
], |
||||
|
interpretation: '本政策旨在推动畜牧业转型升级，提高产业竞争力。通过支持标准化养殖和粪污资源化利用，促进畜牧业绿色发展，保障畜产品有效供给和质量安全。', |
||||
|
applicableObjects: [ |
||||
|
'规模化养殖场', |
||||
|
'畜牧专业合作社', |
||||
|
'畜禽育种企业' |
||||
|
], |
||||
|
applicationGuide: [ |
||||
|
'准备养殖场备案证明等相关材料', |
||||
|
'向县级畜牧部门提交申请', |
||||
|
'现场审核验收', |
||||
|
'审批公示', |
||||
|
'拨付补贴资金' |
||||
|
], |
||||
|
expertAdvice: '建议养殖场重点考虑粪污资源化利用项目申报，这既是政策支持重点，也符合环保要求。同时加强疫病防控，确保养殖安全。', |
||||
|
relatedLinks: [ |
||||
|
{ name: '政策详细解读', url: 'https://example.com/policy2' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
title: '智慧农业技术推广实施方案', |
||||
|
summary: '推动物联网、大数据等现代信息技术在农业生产中的应用', |
||||
|
date: '2023-11-05', |
||||
|
source: '农业农村部、工信部', |
||||
|
type: 'technology', |
||||
|
typeText: '技术推广', |
||||
|
keyPoints: [ |
||||
|
'建设智慧农业示范基地，每个补贴50-100万元', |
||||
|
'推广农业物联网设备，补贴比例达40%', |
||||
|
'开展智慧农业技术培训，每年培训10万人次', |
||||
|
'支持农业大数据平台建设' |
||||
|
], |
||||
|
interpretation: '智慧农业是农业现代化的重要方向。本方案通过示范基地建设、设备补贴和技术培训，加快现代信息技术与农业深度融合，提升农业生产智能化水平。', |
||||
|
applicableObjects: [ |
||||
|
'农业科技示范园', |
||||
|
'现代农业园区', |
||||
|
'农业科技企业', |
||||
|
'新型农业经营主体' |
||||
|
], |
||||
|
applicationGuide: [ |
||||
|
'制定智慧农业建设方案', |
||||
|
'县级农业农村部门推荐', |
||||
|
'市级部门审核', |
||||
|
'省级部门审批立项', |
||||
|
'组织项目实施', |
||||
|
'验收评估' |
||||
|
], |
||||
|
expertAdvice: '建议有条件的农业经营主体积极申报智慧农业项目，重点关注物联网设备应用和数据平台建设。同时加强技术人员培训，确保技术有效应用。', |
||||
|
relatedLinks: [ |
||||
|
{ name: '技术标准手册', url: 'https://example.com/policy3' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
title: '草原生态保护补助奖励政策', |
||||
|
summary: '实施草原禁牧、草畜平衡奖励，促进草原生态恢复', |
||||
|
date: '2023-08-30', |
||||
|
source: '国家林草局', |
||||
|
type: 'environment', |
||||
|
typeText: '生态保护', |
||||
|
keyPoints: [ |
||||
|
'禁牧草原每亩每年补贴7.5元', |
||||
|
'草畜平衡草原每亩每年补贴2.5元', |
||||
|
'实施草原生态修复工程', |
||||
|
'支持草原畜牧业转型发展' |
||||
|
], |
||||
|
interpretation: '草原生态保护补助奖励政策是生态文明建设的重要内容。通过实施禁牧和草畜平衡，减轻草原生态压力，促进草原植被恢复，实现生态保护和牧民增收双赢。', |
||||
|
applicableObjects: [ |
||||
|
'草原牧户', |
||||
|
'草原生态保护合作社', |
||||
|
'草原管护员' |
||||
|
], |
||||
|
applicationGuide: [ |
||||
|
'牧户申报草原承包面积', |
||||
|
'村级公示', |
||||
|
'乡镇审核', |
||||
|
'县级审定', |
||||
|
'资金发放' |
||||
|
], |
||||
|
expertAdvice: '建议牧户严格按照核定的载畜量放牧，避免超载过牧。同时可考虑发展草原生态旅游等替代产业，增加收入来源。', |
||||
|
relatedLinks: [ |
||||
|
{ name: '政策实施细则', url: 'https://example.com/policy4' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
title: '农业保险保费补贴管理办法', |
||||
|
summary: '扩大农业保险覆盖面，提高保障水平，优化理赔服务', |
||||
|
date: '2023-10-10', |
||||
|
source: '财政部、农业农村部', |
||||
|
type: 'insurance', |
||||
|
typeText: '农业保险', |
||||
|
keyPoints: [ |
||||
|
'三大粮食作物保险保费补贴比例提高至70%', |
||||
|
'扩大特色农产品保险试点范围', |
||||
|
'简化理赔流程，缩短理赔时间', |
||||
|
'建立农业保险信息共享平台' |
||||
|
], |
||||
|
interpretation: '农业保险是防范农业风险的重要工具。新办法通过提高补贴比例、扩大保险范围，增强农业抗风险能力，为农民提供更全面的风险保障。', |
||||
|
applicableObjects: [ |
||||
|
'所有从事农业生产的农户', |
||||
|
'农业经营主体', |
||||
|
'农业保险公司' |
||||
|
], |
||||
|
applicationGuide: [ |
||||
|
'选择符合条件的农业保险产品', |
||||
|
'与保险公司签订保险合同', |
||||
|
'缴纳自付部分保费', |
||||
|
'出险后及时报案', |
||||
|
'保险公司查勘定损', |
||||
|
'理赔款支付' |
||||
|
], |
||||
|
expertAdvice: '建议农户积极投保农业保险，特别是特色农产品保险。注意了解保险责任范围、免赔条款等重要内容，确保自身权益。', |
||||
|
relatedLinks: [ |
||||
|
{ name: '农业保险产品目录', url: 'https://example.com/policy5' } |
||||
|
] |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
// 筛选后的政策
|
||||
|
filteredPolicies: [] |
||||
|
}, |
||||
|
|
||||
|
onLoad: function(options) { |
||||
|
// 初始化时显示所有政策
|
||||
|
this.setData({ |
||||
|
filteredPolicies: this.data.allPolicies |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 搜索输入处理
|
||||
|
onSearchInput: function(e) { |
||||
|
this.setData({ |
||||
|
searchKeyword: e.detail.value |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 搜索按钮点击
|
||||
|
onSearch: function() { |
||||
|
this.filterPolicies(); |
||||
|
}, |
||||
|
|
||||
|
// 筛选标签点击
|
||||
|
onFilterTap: function(e) { |
||||
|
const filter = e.currentTarget.dataset.filter; |
||||
|
this.setData({ |
||||
|
activeFilter: filter |
||||
|
}, () => { |
||||
|
this.filterPolicies(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 筛选政策
|
||||
|
filterPolicies: function() { |
||||
|
const { allPolicies, activeFilter, searchKeyword } = this.data; |
||||
|
|
||||
|
let filtered = allPolicies; |
||||
|
|
||||
|
// 按类型筛选
|
||||
|
if (activeFilter !== 'all') { |
||||
|
if (activeFilter === 'latest') { |
||||
|
// 最新政策：最近30天内发布的
|
||||
|
const thirtyDaysAgo = new Date(); |
||||
|
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30); |
||||
|
|
||||
|
filtered = filtered.filter(policy => { |
||||
|
const policyDate = new Date(policy.date); |
||||
|
return policyDate >= thirtyDaysAgo; |
||||
|
}); |
||||
|
} else { |
||||
|
filtered = filtered.filter(policy => policy.type === activeFilter); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 按关键词搜索
|
||||
|
if (searchKeyword.trim() !== '') { |
||||
|
const keyword = searchKeyword.toLowerCase(); |
||||
|
filtered = filtered.filter(policy => |
||||
|
policy.title.toLowerCase().includes(keyword) || |
||||
|
policy.summary.toLowerCase().includes(keyword) || |
||||
|
(policy.keyPoints && policy.keyPoints.some(point => point.toLowerCase().includes(keyword))) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
filteredPolicies: filtered |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 政策卡片点击
|
||||
|
onPolicyTap: function(e) { |
||||
|
const policyId = e.currentTarget.dataset.id; |
||||
|
const policy = this.data.allPolicies.find(p => p.id === policyId); |
||||
|
|
||||
|
if (policy) { |
||||
|
this.setData({ |
||||
|
currentPolicy: policy, |
||||
|
showPolicyDetail: true |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 隐藏政策详情
|
||||
|
hidePolicyDetail: function() { |
||||
|
this.setData({ |
||||
|
showPolicyDetail: false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 阻止事件冒泡
|
||||
|
stopPropagation: function() { |
||||
|
// 空函数，仅用于阻止事件冒泡
|
||||
|
}, |
||||
|
|
||||
|
// 链接点击
|
||||
|
onLinkTap: function(e) { |
||||
|
const url = e.currentTarget.dataset.url; |
||||
|
wx.showModal({ |
||||
|
title: '提示', |
||||
|
content: '即将打开外部链接: ' + url, |
||||
|
success: function(res) { |
||||
|
if (res.confirm) { |
||||
|
// 在实际小程序中，这里需要使用web-view或复制链接
|
||||
|
wx.setClipboardData({ |
||||
|
data: url, |
||||
|
success: function() { |
||||
|
wx.showToast({ |
||||
|
title: '链接已复制', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 收藏政策
|
||||
|
onSavePolicy: function() { |
||||
|
const policyTitle = this.data.currentPolicy.title; |
||||
|
wx.showToast({ |
||||
|
title: `"${policyTitle}"已收藏`, |
||||
|
icon: 'success', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
|
||||
|
// 在实际应用中，这里可以将政策保存到本地或发送到服务器
|
||||
|
setTimeout(() => { |
||||
|
this.hidePolicyDetail(); |
||||
|
}, 1500); |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText":"政策解读", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,195 @@ |
|||||
|
<!-- policy-interpretation.wxml --> |
||||
|
<view class="container"> |
||||
|
<!-- 头部区域 --> |
||||
|
<view class="header"> |
||||
|
<view class="title-section"> |
||||
|
<text class="page-title">农牧业政策解读</text> |
||||
|
<text class="page-subtitle">为您解读最新政策，助力农牧业发展</text> |
||||
|
</view> |
||||
|
<view class="date-info">数据更新至: {{currentDate}}</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 搜索和筛选区域 --> |
||||
|
<view class="search-section"> |
||||
|
<view class="search-box"> |
||||
|
<image class="search-icon" src="/pagesA/images/ss.png"></image> |
||||
|
<input |
||||
|
class="search-input" |
||||
|
placeholder="搜索政策关键词" |
||||
|
placeholder-class="placeholder-style" |
||||
|
bindinput="onSearchInput" |
||||
|
value="{{searchKeyword}}" |
||||
|
/> |
||||
|
<view class="search-btn" bindtap="onSearch">搜索</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="filter-section"> |
||||
|
<scroll-view class="filter-scroll" scroll-x="true"> |
||||
|
<view |
||||
|
class="filter-tag {{activeFilter === 'all' ? 'active' : ''}}" |
||||
|
data-filter="all" |
||||
|
bindtap="onFilterTap" |
||||
|
>全部</view> |
||||
|
<view |
||||
|
class="filter-tag {{activeFilter === 'financial' ? 'active' : ''}}" |
||||
|
data-filter="financial" |
||||
|
bindtap="onFilterTap" |
||||
|
>财政补贴</view> |
||||
|
<view |
||||
|
class="filter-tag {{activeFilter === 'technology' ? 'active' : ''}}" |
||||
|
data-filter="technology" |
||||
|
bindtap="onFilterTap" |
||||
|
>技术推广</view> |
||||
|
<view |
||||
|
class="filter-tag {{activeFilter === 'insurance' ? 'active' : ''}}" |
||||
|
data-filter="insurance" |
||||
|
bindtap="onFilterTap" |
||||
|
>农业保险</view> |
||||
|
<view |
||||
|
class="filter-tag {{activeFilter === 'environment' ? 'active' : ''}}" |
||||
|
data-filter="environment" |
||||
|
bindtap="onFilterTap" |
||||
|
>生态保护</view> |
||||
|
<view |
||||
|
class="filter-tag {{activeFilter === 'latest' ? 'active' : ''}}" |
||||
|
data-filter="latest" |
||||
|
bindtap="onFilterTap" |
||||
|
>最新政策</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 政策列表区域 --> |
||||
|
<view class="policy-list"> |
||||
|
<view wx:if="{{filteredPolicies.length === 0}}" class="empty-state"> |
||||
|
<image class="empty-icon" src="/images/empty.png"></image> |
||||
|
<text class="empty-text">暂无相关政策</text> |
||||
|
<text class="empty-tip">请尝试其他筛选条件</text> |
||||
|
</view> |
||||
|
|
||||
|
<block wx:for="{{filteredPolicies}}" wx:key="id"> |
||||
|
<view class="policy-card" data-id="{{item.id}}" bindtap="onPolicyTap"> |
||||
|
<view class="policy-header"> |
||||
|
<view class="policy-tag {{item.type}}">{{item.typeText}}</view> |
||||
|
<view class="policy-date">{{item.date}}</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="policy-title">{{item.title}}</view> |
||||
|
|
||||
|
<view class="policy-content"> |
||||
|
<text class="policy-summary">{{item.summary}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="policy-footer"> |
||||
|
<view class="policy-source">{{item.source}}</view> |
||||
|
<image class="policy-arrow" src="/pagesB/images/you.png" mode=""/> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 政策详情弹窗 --> |
||||
|
<view class="modal {{showPolicyDetail ? 'show' : ''}}" catchtap="hidePolicyDetail"> |
||||
|
<view class="modal-content" catchtap="stopPropagation"> |
||||
|
<view class="modal-header"> |
||||
|
<view class="modal-title">{{currentPolicy.title}}</view> |
||||
|
<view class="modal-close" bindtap="hidePolicyDetail">×</view> |
||||
|
</view> |
||||
|
|
||||
|
<scroll-view class="modal-body" scroll-y="true"> |
||||
|
<view class="policy-info-row"> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">政策类型:</text> |
||||
|
<text class="info-value">{{currentPolicy.typeText}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">发布日期:</text> |
||||
|
<text class="info-value">{{currentPolicy.date}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">发布单位:</text> |
||||
|
<text class="info-value">{{currentPolicy.source}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="section"> |
||||
|
<view class="section-title">政策要点</view> |
||||
|
<view class="section-content"> |
||||
|
<block wx:for="{{currentPolicy.keyPoints}}" wx:key="index"> |
||||
|
<view class="key-point">{{index + 1}}. {{item}}</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="section"> |
||||
|
<view class="section-title">详细解读</view> |
||||
|
<view class="section-content"> |
||||
|
<text class="interpretation-text">{{currentPolicy.interpretation}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="section"> |
||||
|
<view class="section-title">适用对象</view> |
||||
|
<view class="section-content"> |
||||
|
<view class="applicable-objects"> |
||||
|
<block wx:for="{{currentPolicy.applicableObjects}}" wx:key="index"> |
||||
|
<view class="object-tag">{{item}}</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="section"> |
||||
|
<view class="section-title">申报指南</view> |
||||
|
<view class="section-content"> |
||||
|
<block wx:for="{{currentPolicy.applicationGuide}}" wx:key="index"> |
||||
|
<view class="guide-item"> |
||||
|
<view class="guide-step">{{index + 1}}</view> |
||||
|
<view class="guide-text">{{item}}</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="section"> |
||||
|
<view class="section-title">专家建议</view> |
||||
|
<view class="section-content"> |
||||
|
<view class="expert-advice"> |
||||
|
<view class="advice-header"> |
||||
|
<image class="expert-avatar" src="/images/expert.png"></image> |
||||
|
<view class="expert-info"> |
||||
|
<text class="expert-name">张农业</text> |
||||
|
<text class="expert-title">农业政策研究员</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="advice-content">{{currentPolicy.expertAdvice}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="section"> |
||||
|
<view class="section-title">相关链接</view> |
||||
|
<view class="section-content"> |
||||
|
<block wx:for="{{currentPolicy.relatedLinks}}" wx:key="index"> |
||||
|
<view class="link-item" bindtap="onLinkTap" data-url="{{item.url}}"> |
||||
|
<text class="link-text">{{item.name}}</text> |
||||
|
<image class="link-icon" src="/images/link.png"></image> |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<view class="modal-footer"> |
||||
|
<button class="btn btn-secondary" bindtap="hidePolicyDetail">关闭</button> |
||||
|
<button class="btn btn-primary" bindtap="onSavePolicy">收藏此政策</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部导航提示 --> |
||||
|
<view class="bottom-tip"> |
||||
|
<text class="tip-text">已加载 {{filteredPolicies.length}} 条政策解读</text> |
||||
|
<text class="tip-text">数据仅供参考，具体以官方发布为准</text> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,498 @@ |
|||||
|
/* policy-interpretation.wxss */ |
||||
|
.container { |
||||
|
min-height: 100vh; |
||||
|
background-color: #f5f7fa; |
||||
|
padding-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
/* 头部样式 */ |
||||
|
.header { |
||||
|
background: linear-gradient(135deg, #1a5f23 0%, #2d8c3c 100%); |
||||
|
color: white; |
||||
|
padding: 40rpx 30rpx 30rpx; |
||||
|
border-radius: 0 0 30rpx 30rpx; |
||||
|
box-shadow: 0 4rpx 20rpx rgba(26, 95, 35, 0.2); |
||||
|
} |
||||
|
|
||||
|
.title-section { |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.page-title { |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
display: block; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.page-subtitle { |
||||
|
font-size: 28rpx; |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
|
||||
|
.date-info { |
||||
|
font-size: 24rpx; |
||||
|
text-align: right; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
/* 搜索区域 */ |
||||
|
.search-section { |
||||
|
background-color: white; |
||||
|
margin: -20rpx 30rpx 30rpx; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 30rpx; |
||||
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06); |
||||
|
} |
||||
|
|
||||
|
.search-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background-color: #f5f7fa; |
||||
|
border-radius: 50rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.search-icon { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
margin: 0 20rpx; |
||||
|
} |
||||
|
|
||||
|
.search-input { |
||||
|
flex: 1; |
||||
|
height: 80rpx; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.placeholder-style { |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.search-btn { |
||||
|
background-color: #2d8c3c; |
||||
|
color: white; |
||||
|
font-size: 28rpx; |
||||
|
padding: 16rpx 30rpx; |
||||
|
border-radius: 40rpx; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
|
||||
|
/* 筛选区域 */ |
||||
|
.filter-scroll { |
||||
|
white-space: nowrap; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.filter-tag { |
||||
|
display: inline-block; |
||||
|
padding: 16rpx 30rpx; |
||||
|
margin-right: 20rpx; |
||||
|
background-color: #f5f7fa; |
||||
|
border-radius: 40rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.filter-tag.active { |
||||
|
background-color: #2d8c3c; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
/* 政策列表 */ |
||||
|
.policy-list { |
||||
|
padding: 0 30rpx; |
||||
|
} |
||||
|
|
||||
|
.policy-card { |
||||
|
background-color: white; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06); |
||||
|
transition: transform 0.3s, box-shadow 0.3s; |
||||
|
} |
||||
|
|
||||
|
.policy-card:active { |
||||
|
transform: translateY(-4rpx); |
||||
|
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.policy-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.policy-tag { |
||||
|
font-size: 22rpx; |
||||
|
padding: 6rpx 20rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.policy-tag.financial { |
||||
|
background-color: #e8f4ea; |
||||
|
color: #1a5f23; |
||||
|
} |
||||
|
|
||||
|
.policy-tag.technology { |
||||
|
background-color: #e8f0fb; |
||||
|
color: #1a5b8c; |
||||
|
} |
||||
|
|
||||
|
.policy-tag.insurance { |
||||
|
background-color: #fff7e6; |
||||
|
color: #d48806; |
||||
|
} |
||||
|
|
||||
|
.policy-tag.environment { |
||||
|
background-color: #e6f7ff; |
||||
|
color: #006d75; |
||||
|
} |
||||
|
|
||||
|
.policy-date { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.policy-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 20rpx; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.policy-summary { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
line-height: 1.5; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.policy-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-top: 25rpx; |
||||
|
padding-top: 20rpx; |
||||
|
border-top: 1rpx solid #eee; |
||||
|
} |
||||
|
|
||||
|
.policy-source { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.policy-arrow { |
||||
|
width: 26rpx; |
||||
|
height: 26rpx; |
||||
|
} |
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.empty-state { |
||||
|
text-align: center; |
||||
|
padding: 80rpx 30rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-icon { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
display: block; |
||||
|
font-size: 32rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-tip { |
||||
|
font-size: 26rpx; |
||||
|
color: #ccc; |
||||
|
} |
||||
|
|
||||
|
/* 政策详情弹窗 */ |
||||
|
.modal { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
z-index: 1000; |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
|
||||
|
.modal.show { |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
.modal-content { |
||||
|
background-color: white; |
||||
|
width: 90%; |
||||
|
max-height: 80vh; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
transform: translateY(50rpx); |
||||
|
transition: transform 0.3s; |
||||
|
} |
||||
|
|
||||
|
.modal.show .modal-content { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
|
||||
|
.modal-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 30rpx; |
||||
|
border-bottom: 1rpx solid #eee; |
||||
|
background-color: #f9f9f9; |
||||
|
} |
||||
|
|
||||
|
.modal-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.modal-close { |
||||
|
font-size: 50rpx; |
||||
|
color: #999; |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
text-align: center; |
||||
|
line-height: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.modal-body { |
||||
|
max-height: 60vh; |
||||
|
padding: 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.policy-info-row { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
background-color: #f9f9f9; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 20rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
width: 50%; |
||||
|
margin-bottom: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.info-label { |
||||
|
font-size: 26rpx; |
||||
|
color: #999; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.section { |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: bold; |
||||
|
color: #1a5f23; |
||||
|
margin-bottom: 20rpx; |
||||
|
padding-bottom: 10rpx; |
||||
|
border-bottom: 2rpx solid #e8f4ea; |
||||
|
} |
||||
|
|
||||
|
.section-content { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
|
||||
|
.key-point { |
||||
|
margin-bottom: 15rpx; |
||||
|
padding-left: 20rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.key-point:before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 16rpx; |
||||
|
width: 8rpx; |
||||
|
height: 8rpx; |
||||
|
background-color: #2d8c3c; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.interpretation-text { |
||||
|
text-align: justify; |
||||
|
} |
||||
|
|
||||
|
.applicable-objects { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.object-tag { |
||||
|
background-color: #f0f9ff; |
||||
|
color: #1a5b8c; |
||||
|
font-size: 24rpx; |
||||
|
padding: 10rpx 20rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.guide-item { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
margin-bottom: 25rpx; |
||||
|
} |
||||
|
|
||||
|
.guide-step { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
background-color: #2d8c3c; |
||||
|
color: white; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 24rpx; |
||||
|
margin-right: 20rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.guide-text { |
||||
|
flex: 1; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.expert-advice { |
||||
|
background-color: #f9f9f9; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 25rpx; |
||||
|
} |
||||
|
|
||||
|
.advice-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.expert-avatar { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 50%; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.expert-info { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.expert-name { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.expert-title { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
margin-top: 5rpx; |
||||
|
} |
||||
|
|
||||
|
.advice-content { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
|
||||
|
.link-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 20rpx 0; |
||||
|
border-bottom: 1rpx solid #eee; |
||||
|
} |
||||
|
|
||||
|
.link-item:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.link-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #1a5f23; |
||||
|
} |
||||
|
|
||||
|
.link-icon { |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.modal-footer { |
||||
|
display: flex; |
||||
|
padding: 30rpx; |
||||
|
border-top: 1rpx solid #eee; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
flex: 1; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
.btn::after{ |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.btn-secondary { |
||||
|
background-color: #f5f7fa; |
||||
|
color: #666; |
||||
|
border:1px solid rgb(243, 241, 241); |
||||
|
} |
||||
|
|
||||
|
.btn-primary { |
||||
|
background-color: #2d8c3c; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
/* 底部提示 */ |
||||
|
.bottom-tip { |
||||
|
text-align: center; |
||||
|
padding: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.tip-text { |
||||
|
display: block; |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
@ -0,0 +1,457 @@ |
|||||
|
// pages/training/training.js
|
||||
|
Page({ |
||||
|
data: { |
||||
|
currentTab: 0, |
||||
|
searchKeyword: '', |
||||
|
articleActiveCategory: 'all', |
||||
|
videoActiveCategory: 'all', |
||||
|
|
||||
|
// 文章数据
|
||||
|
articles: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: '微信小程序开发最佳实践', |
||||
|
description: '深度解析小程序性能优化方案，助你打造流畅用户体验', |
||||
|
cover: 'https://via.placeholder.com/400x300/3498db/ffffff?text=小程序', |
||||
|
category: '技术干货', |
||||
|
author: '张技术', |
||||
|
readTime: 15, |
||||
|
date: '2024-01-15', |
||||
|
views: 2345, |
||||
|
likes: 189, |
||||
|
categoryId: 'tech' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: '企业数字化转型的关键路径', |
||||
|
description: '传统企业如何通过数字化实现业务增长与效率提升', |
||||
|
cover: 'https://via.placeholder.com/400x300/2ecc71/ffffff?text=数字化', |
||||
|
category: '商业思维', |
||||
|
author: '李商业', |
||||
|
readTime: 20, |
||||
|
date: '2024-01-12', |
||||
|
views: 1567, |
||||
|
likes: 234, |
||||
|
categoryId: 'business' |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
title: '高效团队管理的7个秘诀', |
||||
|
description: '打造高绩效团队的实用方法与技巧', |
||||
|
cover: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=管理', |
||||
|
category: '管理技能', |
||||
|
author: '王经理', |
||||
|
readTime: 12, |
||||
|
date: '2024-01-10', |
||||
|
views: 3210, |
||||
|
likes: 456, |
||||
|
categoryId: 'management' |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
title: '前端工程师的职业发展路径', |
||||
|
description: '从初级到专家，前端工程师的成长路线图', |
||||
|
cover: 'https://via.placeholder.com/400x300/9b59b6/ffffff?text=前端', |
||||
|
category: '职业发展', |
||||
|
author: '赵前端', |
||||
|
readTime: 18, |
||||
|
date: '2024-01-08', |
||||
|
views: 1890, |
||||
|
likes: 345, |
||||
|
categoryId: 'career' |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
title: '云原生架构设计与实践', |
||||
|
description: '基于云原生技术的现代应用架构方案', |
||||
|
cover: 'https://via.placeholder.com/400x300/1abc9c/ffffff?text=云原生', |
||||
|
category: '技术干货', |
||||
|
author: '钱架构', |
||||
|
readTime: 25, |
||||
|
date: '2024-01-05', |
||||
|
views: 2789, |
||||
|
likes: 512, |
||||
|
categoryId: 'tech' |
||||
|
}, |
||||
|
{ |
||||
|
id: 6, |
||||
|
title: '人工智能在商业中的应用', |
||||
|
description: 'AI技术如何赋能传统行业实现智能化升级', |
||||
|
cover: 'https://via.placeholder.com/400x300/f39c12/ffffff?text=AI', |
||||
|
category: '商业思维', |
||||
|
author: '孙智能', |
||||
|
readTime: 22, |
||||
|
date: '2024-01-03', |
||||
|
views: 4321, |
||||
|
likes: 678, |
||||
|
categoryId: 'business' |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
// 视频数据
|
||||
|
videos: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: 'Vue.js 3.0 核心源码解析', |
||||
|
cover: 'https://via.placeholder.com/400x300/3498db/ffffff?text=Vue3', |
||||
|
duration: '45:23', |
||||
|
instructor: { |
||||
|
name: '前端大神', |
||||
|
avatar: 'https://via.placeholder.com/40/3498db/ffffff?text=FS' |
||||
|
}, |
||||
|
level: '高级', |
||||
|
views: '12.3k', |
||||
|
tags: ['Vue', '前端', '源码'], |
||||
|
category: 'tech', |
||||
|
isRecommended: true |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: 'React Hooks 深度解析', |
||||
|
cover: 'https://via.placeholder.com/400x300/2ecc71/ffffff?text=React', |
||||
|
duration: '38:45', |
||||
|
instructor: { |
||||
|
name: 'React专家', |
||||
|
avatar: 'https://via.placeholder.com/40/2ecc71/ffffff?text=RE' |
||||
|
}, |
||||
|
level: '中级', |
||||
|
views: '8.7k', |
||||
|
tags: ['React', 'Hooks', '前端'], |
||||
|
category: 'tech', |
||||
|
isRecommended: true |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
title: '产品经理必备的7个思维模型', |
||||
|
cover: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=产品', |
||||
|
duration: '52:12', |
||||
|
instructor: { |
||||
|
name: '产品专家', |
||||
|
avatar: 'https://via.placeholder.com/40/e74c3c/ffffff?text=PM' |
||||
|
}, |
||||
|
level: '中级', |
||||
|
views: '15.2k', |
||||
|
tags: ['产品', '思维', '方法论'], |
||||
|
category: 'business', |
||||
|
isRecommended: false |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
title: 'Python 数据分析实战', |
||||
|
cover: 'https://via.placeholder.com/400x300/9b59b6/ffffff?text=Python', |
||||
|
duration: '41:36', |
||||
|
instructor: { |
||||
|
name: '数据科学家', |
||||
|
avatar: 'https://via.placeholder.com/40/9b59b6/ffffff?text=DS' |
||||
|
}, |
||||
|
level: '初级', |
||||
|
views: '23.4k', |
||||
|
tags: ['Python', '数据分析', '实战'], |
||||
|
category: 'tech', |
||||
|
isRecommended: true |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
title: '高效沟通的艺术与技巧', |
||||
|
cover: 'https://via.placeholder.com/400x300/1abc9c/ffffff?text=沟通', |
||||
|
duration: '36:58', |
||||
|
instructor: { |
||||
|
name: '沟通专家', |
||||
|
avatar: 'https://via.placeholder.com/40/1abc9c/ffffff?text=CM' |
||||
|
}, |
||||
|
level: '初级', |
||||
|
views: '9.8k', |
||||
|
tags: ['沟通', '职场', '技巧'], |
||||
|
category: 'management', |
||||
|
isRecommended: false |
||||
|
}, |
||||
|
{ |
||||
|
id: 6, |
||||
|
title: 'Node.js 高性能服务开发', |
||||
|
cover: 'https://via.placeholder.com/400x300/f39c12/ffffff?text=Node', |
||||
|
duration: '55:42', |
||||
|
instructor: { |
||||
|
name: '后端架构师', |
||||
|
avatar: 'https://via.placeholder.com/40/f39c12/ffffff?text=BE' |
||||
|
}, |
||||
|
level: '高级', |
||||
|
views: '6.5k', |
||||
|
tags: ['Node.js', '后端', '性能'], |
||||
|
category: 'tech', |
||||
|
isRecommended: false |
||||
|
}, |
||||
|
{ |
||||
|
id: 7, |
||||
|
title: '职场晋升的底层逻辑', |
||||
|
cover: 'https://via.placeholder.com/400x300/34495e/ffffff?text=晋升', |
||||
|
duration: '33:27', |
||||
|
instructor: { |
||||
|
name: '职业规划师', |
||||
|
avatar: 'https://via.placeholder.com/40/34495e/ffffff?text=CD' |
||||
|
}, |
||||
|
level: '中级', |
||||
|
views: '11.2k', |
||||
|
tags: ['职场', '晋升', '规划'], |
||||
|
category: 'career', |
||||
|
isRecommended: true |
||||
|
}, |
||||
|
{ |
||||
|
id: 8, |
||||
|
title: 'JavaScript 入门到精通', |
||||
|
cover: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=JS', |
||||
|
duration: '1:15:30', |
||||
|
instructor: { |
||||
|
name: '前端导师', |
||||
|
avatar: 'https://via.placeholder.com/40/e74c3c/ffffff?text=JS' |
||||
|
}, |
||||
|
level: '初级', |
||||
|
views: '45.6k', |
||||
|
tags: ['JavaScript', '入门', '教程'], |
||||
|
category: 'tech', |
||||
|
isRecommended: true |
||||
|
}, |
||||
|
{ |
||||
|
id: 9, |
||||
|
title: '商业计划书撰写指南', |
||||
|
cover: 'https://via.placeholder.com/400x300/1abc9c/ffffff?text=商业', |
||||
|
duration: '28:45', |
||||
|
instructor: { |
||||
|
name: '商业顾问', |
||||
|
avatar: 'https://via.placeholder.com/40/1abc9c/ffffff?text=BC' |
||||
|
}, |
||||
|
level: '中级', |
||||
|
views: '7.3k', |
||||
|
tags: ['商业', '创业', '计划书'], |
||||
|
category: 'business', |
||||
|
isRecommended: false |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
title: '团队领导力提升训练', |
||||
|
cover: 'https://via.placeholder.com/400x300/9b59b6/ffffff?text=领导力', |
||||
|
duration: '49:18', |
||||
|
instructor: { |
||||
|
name: '领导力教练', |
||||
|
avatar: 'https://via.placeholder.com/40/9b59b6/ffffff?text=LC' |
||||
|
}, |
||||
|
level: '高级', |
||||
|
views: '5.9k', |
||||
|
tags: ['领导力', '管理', '团队'], |
||||
|
category: 'management', |
||||
|
isRecommended: true |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
filteredArticles: [], |
||||
|
filteredVideos: [] |
||||
|
}, |
||||
|
|
||||
|
onLoad() { |
||||
|
// 初始化数据
|
||||
|
this.setData({ |
||||
|
filteredArticles: this.data.articles, |
||||
|
filteredVideos: this.data.videos |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 切换主选项卡
|
||||
|
switchTab(e) { |
||||
|
const tab = parseInt(e.currentTarget.dataset.tab); |
||||
|
this.setData({ |
||||
|
currentTab: tab, |
||||
|
searchKeyword: '' |
||||
|
}); |
||||
|
|
||||
|
// 重置筛选结果
|
||||
|
if (tab === 0) { |
||||
|
this.setData({ |
||||
|
filteredArticles: this.filterArticles('', this.data.articleActiveCategory) |
||||
|
}); |
||||
|
} else { |
||||
|
this.setData({ |
||||
|
filteredVideos: this.filterVideos('', this.data.videoActiveCategory) |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 搜索输入
|
||||
|
onSearchInput(e) { |
||||
|
const keyword = e.detail.value; |
||||
|
this.setData({ searchKeyword: keyword }); |
||||
|
|
||||
|
if (this.data.currentTab === 0) { |
||||
|
this.setData({ |
||||
|
filteredArticles: this.filterArticles(keyword, this.data.articleActiveCategory) |
||||
|
}); |
||||
|
} else { |
||||
|
this.setData({ |
||||
|
filteredVideos: this.filterVideos(keyword, this.data.videoActiveCategory) |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 选择文章分类
|
||||
|
selectArticleCategory(e) { |
||||
|
const category = e.currentTarget.dataset.category; |
||||
|
this.setData({ articleActiveCategory: category }); |
||||
|
this.setData({ |
||||
|
filteredArticles: this.filterArticles(this.data.searchKeyword, category) |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 选择视频分类
|
||||
|
selectVideoCategory(e) { |
||||
|
const category = e.currentTarget.dataset.category; |
||||
|
this.setData({ videoActiveCategory: category }); |
||||
|
this.setData({ |
||||
|
filteredVideos: this.filterVideos(this.data.searchKeyword, category) |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 筛选文章函数
|
||||
|
filterArticles(keyword, category) { |
||||
|
let filtered = this.data.articles; |
||||
|
|
||||
|
// 按分类筛选
|
||||
|
if (category !== 'all') { |
||||
|
const categoryMap = { |
||||
|
'tech': '技术干货', |
||||
|
'business': '商业思维', |
||||
|
'management': '管理技能', |
||||
|
'career': '职业发展' |
||||
|
}; |
||||
|
|
||||
|
filtered = filtered.filter(item => item.category === categoryMap[category]); |
||||
|
} |
||||
|
|
||||
|
// 按关键词筛选
|
||||
|
if (keyword) { |
||||
|
const lowerKeyword = keyword.toLowerCase(); |
||||
|
filtered = filtered.filter(item => |
||||
|
item.title.toLowerCase().includes(lowerKeyword) || |
||||
|
item.description.toLowerCase().includes(lowerKeyword) || |
||||
|
item.author.toLowerCase().includes(lowerKeyword) || |
||||
|
item.category.toLowerCase().includes(lowerKeyword) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
return filtered; |
||||
|
}, |
||||
|
|
||||
|
// 筛选视频函数
|
||||
|
filterVideos(keyword, category) { |
||||
|
let filtered = this.data.videos; |
||||
|
|
||||
|
// 按分类筛选
|
||||
|
if (category !== 'all') { |
||||
|
switch (category) { |
||||
|
case 'recommend': |
||||
|
filtered = filtered.filter(item => item.isRecommended); |
||||
|
break; |
||||
|
case 'tech': |
||||
|
filtered = filtered.filter(item => item.category === 'tech'); |
||||
|
break; |
||||
|
case 'business': |
||||
|
filtered = filtered.filter(item => item.category === 'business'); |
||||
|
break; |
||||
|
case 'management': |
||||
|
filtered = filtered.filter(item => item.category === 'management'); |
||||
|
break; |
||||
|
case 'career': |
||||
|
filtered = filtered.filter(item => item.category === 'career'); |
||||
|
break; |
||||
|
case 'beginner': |
||||
|
filtered = filtered.filter(item => item.level === '初级'); |
||||
|
break; |
||||
|
case 'advanced': |
||||
|
filtered = filtered.filter(item => item.level === '中级' || item.level === '高级'); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 按关键词筛选
|
||||
|
if (keyword) { |
||||
|
const lowerKeyword = keyword.toLowerCase(); |
||||
|
filtered = filtered.filter(item => |
||||
|
item.title.toLowerCase().includes(lowerKeyword) || |
||||
|
item.tags.some(tag => tag.toLowerCase().includes(lowerKeyword)) || |
||||
|
item.instructor.name.toLowerCase().includes(lowerKeyword) || |
||||
|
item.level.toLowerCase().includes(lowerKeyword) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
return filtered; |
||||
|
}, |
||||
|
|
||||
|
// 查看文章详情
|
||||
|
viewArticleDetail(e) { |
||||
|
const id = e.currentTarget.dataset.id; |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 播放视频
|
||||
|
playVideo(e) { |
||||
|
const id = e.currentTarget.dataset.id; |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 下拉刷新
|
||||
|
onPullDownRefresh() { |
||||
|
wx.showLoading({ |
||||
|
title: '刷新中...' |
||||
|
}); |
||||
|
|
||||
|
// 模拟网络请求
|
||||
|
setTimeout(() => { |
||||
|
// 重置数据
|
||||
|
this.setData({ |
||||
|
filteredArticles: this.data.articles, |
||||
|
filteredVideos: this.data.videos, |
||||
|
articleActiveCategory: 'all', |
||||
|
videoActiveCategory: 'all', |
||||
|
searchKeyword: '' |
||||
|
}); |
||||
|
|
||||
|
wx.hideLoading(); |
||||
|
wx.stopPullDownRefresh(); |
||||
|
wx.showToast({ |
||||
|
title: '刷新成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 上拉加载更多
|
||||
|
onReachBottom() { |
||||
|
if (this.data.currentTab === 0) { |
||||
|
// 文章加载更多
|
||||
|
wx.showLoading({ |
||||
|
title: '加载更多文章...' |
||||
|
}); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
// 这里可以添加更多文章数据
|
||||
|
wx.hideLoading(); |
||||
|
wx.showToast({ |
||||
|
title: '没有更多了', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
}, 1000); |
||||
|
} else { |
||||
|
// 视频加载更多
|
||||
|
wx.showLoading({ |
||||
|
title: '加载更多视频...' |
||||
|
}); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
// 这里可以添加更多视频数据
|
||||
|
wx.hideLoading(); |
||||
|
wx.showToast({ |
||||
|
title: '没有更多了', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
}, 1000); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText":"在线培训", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,298 @@ |
|||||
|
<!-- pages/training/training.wxml --> |
||||
|
<view class="training-container"> |
||||
|
<!-- 顶部标题 --> |
||||
|
<view class="header"> |
||||
|
<view class="title">在线培训</view> |
||||
|
<view class="subtitle">专业学习资源，助您快速成长</view> |
||||
|
<view class="header-decoration"> |
||||
|
<view class="decoration-circle circle-1"></view> |
||||
|
<view class="decoration-circle circle-2"></view> |
||||
|
<view class="decoration-circle circle-3"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 主选项卡切换 --> |
||||
|
<view class="tabs"> |
||||
|
<view |
||||
|
class="tab-item {{currentTab === 0 ? 'active' : ''}}" |
||||
|
bindtap="switchTab" |
||||
|
data-tab="0" |
||||
|
> |
||||
|
<text>文章</text> |
||||
|
<view class="tab-highlight {{currentTab === 0 ? 'active' : ''}}"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="tab-item {{currentTab === 1 ? 'active' : ''}}" |
||||
|
bindtap="switchTab" |
||||
|
data-tab="1" |
||||
|
> |
||||
|
<text>视频</text> |
||||
|
<view class="tab-highlight {{currentTab === 1 ? 'active' : ''}}"></view> |
||||
|
</view> |
||||
|
<view class="tab-slider {{currentTab === 0 ? 'left' : 'right'}}"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 文章板块 --> |
||||
|
<view class="content-section" wx:if="{{currentTab === 0}}"> |
||||
|
<!-- 搜索框 --> |
||||
|
<view class="search-box"> |
||||
|
<image class="search-icon" src="/pagesB/images/sou.png"></image> |
||||
|
<input |
||||
|
class="search-input" |
||||
|
placeholder="搜索文章..." |
||||
|
placeholder-class="placeholder-style" |
||||
|
bindinput="onSearchInput" |
||||
|
value="{{searchKeyword}}" |
||||
|
/> |
||||
|
<view class="search-decoration"> |
||||
|
<view class="search-wave"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 文章分类筛选 --> |
||||
|
<scroll-view class="category-scroll" scroll-x scroll-with-animation> |
||||
|
<view class="category-list"> |
||||
|
<view |
||||
|
class="category-item {{articleActiveCategory === 'all' ? 'active' : ''}}" |
||||
|
bindtap="selectArticleCategory" |
||||
|
data-category="all" |
||||
|
> |
||||
|
<text>全部</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{articleActiveCategory === 'tech' ? 'active' : ''}}" |
||||
|
bindtap="selectArticleCategory" |
||||
|
data-category="tech" |
||||
|
> |
||||
|
<text>技术干货</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{articleActiveCategory === 'business' ? 'active' : ''}}" |
||||
|
bindtap="selectArticleCategory" |
||||
|
data-category="business" |
||||
|
> |
||||
|
<text>商业思维</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{articleActiveCategory === 'management' ? 'active' : ''}}" |
||||
|
bindtap="selectArticleCategory" |
||||
|
data-category="management" |
||||
|
> |
||||
|
<text>管理技能</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{articleActiveCategory === 'career' ? 'active' : ''}}" |
||||
|
bindtap="selectArticleCategory" |
||||
|
data-category="career" |
||||
|
> |
||||
|
<text>职业发展</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<!-- 文章列表 --> |
||||
|
<view class="articles-list"> |
||||
|
<view |
||||
|
class="article-card" |
||||
|
wx:for="{{filteredArticles}}" |
||||
|
wx:key="id" |
||||
|
bindtap="viewArticleDetail" |
||||
|
data-id="{{item.id}}" |
||||
|
animation="{{item.animation}}" |
||||
|
> |
||||
|
<!-- 封面图片 --> |
||||
|
<view class="article-cover-container"> |
||||
|
<image class="article-cover" src="{{item.cover}}" mode="aspectFill"></image> |
||||
|
<view class="cover-overlay"></view> |
||||
|
<view class="category-tag">{{item.category}}</view> |
||||
|
<view class="article-hover-effect"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 文章信息 --> |
||||
|
<view class="article-info"> |
||||
|
<view class="article-title">{{item.title}}</view> |
||||
|
<view class="article-desc">{{item.description}}</view> |
||||
|
|
||||
|
<view class="article-meta"> |
||||
|
<view class="meta-item"> |
||||
|
<image class="meta-icon" src="/pages/images/tx.png"></image> |
||||
|
<text class="meta-text">{{item.author}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="meta-item"> |
||||
|
<text class="meta-text">{{item.date}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="article-stats"> |
||||
|
<view class="stat-item"> |
||||
|
<image class="stat-icon" src="/pagesB/images/lll.png"></image> |
||||
|
<text>{{item.likes}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<view class="empty-state" wx:if="{{filteredArticles.length === 0}}"> |
||||
|
<view class="empty-animation"> |
||||
|
<view class="empty-circle"></view> |
||||
|
<view class="empty-circle circle-2"></view> |
||||
|
<view class="empty-circle circle-3"></view> |
||||
|
</view> |
||||
|
<text class="empty-text">暂无相关文章</text> |
||||
|
<text class="empty-hint">换个关键词试试吧</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 视频板块 --> |
||||
|
<view class="content-section" wx:if="{{currentTab === 1}}"> |
||||
|
<!-- 搜索框 --> |
||||
|
<view class="search-box"> |
||||
|
<image class="search-icon" src="/pagesB/images/sou.png"></image> |
||||
|
<input |
||||
|
class="search-input" |
||||
|
placeholder="搜索视频..." |
||||
|
placeholder-class="placeholder-style" |
||||
|
bindinput="onSearchInput" |
||||
|
value="{{searchKeyword}}" |
||||
|
/> |
||||
|
<view class="search-decoration"> |
||||
|
<view class="search-wave"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 视频分类筛选 --> |
||||
|
<scroll-view class="category-scroll" scroll-x scroll-with-animation> |
||||
|
<view class="category-list"> |
||||
|
<view |
||||
|
class="category-item {{videoActiveCategory === 'all' ? 'active' : ''}}" |
||||
|
bindtap="selectVideoCategory" |
||||
|
data-category="all" |
||||
|
> |
||||
|
<text>全部视频</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{videoActiveCategory === 'recommend' ? 'active' : ''}}" |
||||
|
bindtap="selectVideoCategory" |
||||
|
data-category="recommend" |
||||
|
> |
||||
|
<text>热门推荐</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{videoActiveCategory === 'tech' ? 'active' : ''}}" |
||||
|
bindtap="selectVideoCategory" |
||||
|
data-category="tech" |
||||
|
> |
||||
|
<text>技术教程</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{videoActiveCategory === 'business' ? 'active' : ''}}" |
||||
|
bindtap="selectVideoCategory" |
||||
|
data-category="business" |
||||
|
> |
||||
|
<text>商业知识</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{videoActiveCategory === 'management' ? 'active' : ''}}" |
||||
|
bindtap="selectVideoCategory" |
||||
|
data-category="management" |
||||
|
> |
||||
|
<text>管理技能</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{videoActiveCategory === 'career' ? 'active' : ''}}" |
||||
|
bindtap="selectVideoCategory" |
||||
|
data-category="career" |
||||
|
> |
||||
|
<text>职业发展</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{videoActiveCategory === 'beginner' ? 'active' : ''}}" |
||||
|
bindtap="selectVideoCategory" |
||||
|
data-category="beginner" |
||||
|
> |
||||
|
<text>初级入门</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
<view |
||||
|
class="category-item {{videoActiveCategory === 'advanced' ? 'active' : ''}}" |
||||
|
bindtap="selectVideoCategory" |
||||
|
data-category="advanced" |
||||
|
> |
||||
|
<text>进阶提升</text> |
||||
|
<view class="category-indicator"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<!-- 视频列表 --> |
||||
|
<view class="videos-grid"> |
||||
|
<view |
||||
|
class="video-card" |
||||
|
wx:for="{{filteredVideos}}" |
||||
|
wx:key="id" |
||||
|
bindtap="playVideo" |
||||
|
data-id="{{item.id}}" |
||||
|
animation="{{item.animation}}" |
||||
|
> |
||||
|
<!-- 视频封面 --> |
||||
|
<view class="video-cover-container"> |
||||
|
<image class="video-cover" src="{{item.cover}}" mode="aspectFill"></image> |
||||
|
<view class="cover-overlay"></view> |
||||
|
<view class="video-duration">{{item.duration}}</view> |
||||
|
<view class="play-button"> |
||||
|
<image class="play-icon" src="/pagesB/images/bo.png"></image> |
||||
|
<view class="play-ripple"></view> |
||||
|
</view> |
||||
|
<view class="video-hover-effect"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 视频信息 --> |
||||
|
<view class="video-info"> |
||||
|
<view class="video-title">{{item.title}}</view> |
||||
|
<view class="video-instructor"> |
||||
|
<image class="instructor-avatar" src="/pages/images/tx.png"></image> |
||||
|
<text class="instructor-name">{{item.instructor.name}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="video-meta"> |
||||
|
<view class="video-meta-item"> |
||||
|
<text>2026-01-12</text> |
||||
|
</view> |
||||
|
<view class="video-meta-item"> |
||||
|
<text>{{item.views}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<view class="empty-state" wx:if="{{filteredVideos.length === 0}}"> |
||||
|
<view class="empty-animation"> |
||||
|
<view class="empty-circle"></view> |
||||
|
<view class="empty-circle circle-2"></view> |
||||
|
<view class="empty-circle circle-3"></view> |
||||
|
</view> |
||||
|
|
||||
|
<text class="empty-text">暂无相关视频</text> |
||||
|
<text class="empty-hint">换个关键词试试吧</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
1066
pagesB/pages/training/training.wxss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue