Skip to content

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

修改首页和农场

上级 fb92718d
正在显示 包含 2026 行增加 和 1074 行删除
src/api/model/wode.ts
...@@ -14,3 +14,14 @@ export function bizCommonFileList(params = {}) { ...@@ -14,3 +14,14 @@ export function bizCommonFileList(params = {}) {
params, params,
}) })
} }
/**
* 添加资源
* @param params
* @returns
*/
export function addResource(params = {}) {
return otherHttp.post({
url: '/resource/add',
params,
})
}
src/pages.json
...@@ -367,29 +367,53 @@ ...@@ -367,29 +367,53 @@
} }
}, },
{ {
"path": "pages/device/device", "path": "pages/device/device",
"style": { "style": {
"navigationBarTitleText": "物联设备", "navigationBarTitleText": "物联设备",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F", "navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white", "navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2", "backgroundColorBottom": "#F2F2F2",
"app-plus": { "app-plus": {
"titleNView": { "titleNView": {
"titleSize": "20", "titleSize": "20",
"buttons": [ "buttons": [
{ {
"text": "+ 添加设备", "text": "+ 添加设备",
"fontSrc": "/static/uni.ttf", "fontSrc": "/static/uni.ttf",
"color": "#fff", "color": "#fff",
"fontSize": "28rpx", "fontSize": "28rpx",
"width":"auto" "width":"auto"
} }
] ]
} }
} }
} }
} },
{
"path": "pages/resource/resource",
"style": {
"navigationBarTitleText": "资源库管理",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {
"titleSize": "20",
"buttons": [
{
"text": "+ 添加资源",
"fontSrc": "/static/uni.ttf",
"color": "#fff",
"fontSize": "28rpx",
"width":"auto"
}
]
}
}
}
}
], ],
"easycom": { "easycom": {
"autoscan": true, "autoscan": true,
......
src/pages/device/device.vue
...@@ -682,7 +682,7 @@ body { ...@@ -682,7 +682,7 @@ body {
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
} }
::v-deep .uni-swipe_box { ::v-deep .uni-swipe {
border-radius: 16rpx; border-radius: 16rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
......
src/pages/nongchang/nongchang.vue
...@@ -365,7 +365,7 @@ ...@@ -365,7 +365,7 @@
<view class="codefun-flex-col section"> <view class="codefun-flex-col section">
<view class="codefun-flex-col mt-52rpx"> <view class="codefun-flex-col mt-52rpx">
<text class="codefun-self-center font text">{{ pageData.header.title }}</text> <text class="codefun-self-center font text">{{ pageData.header.title }}</text>
<view class="codefun-flex-col codefun-self-stretch mt-19"> <!-- <view class="codefun-flex-col codefun-self-stretch mt-19">
<view class="codefun-flex-row codefun-items-center section_2"> <view class="codefun-flex-row codefun-items-center section_2">
<image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" /> <image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" />
<text class="codefun-ml-8 font_2 text_2">{{ pageData.header.searchPlaceholder }}</text> <text class="codefun-ml-8 font_2 text_2">{{ pageData.header.searchPlaceholder }}</text>
...@@ -381,7 +381,7 @@ ...@@ -381,7 +381,7 @@
<text class="font_3 mt-13" :class="`text_${item.id + 2}`">{{ item.name }}</text> <text class="font_3 mt-13" :class="`text_${item.id + 2}`">{{ item.name }}</text>
</view> </view>
</view> </view>
</view> </view> -->
</view> </view>
</view> </view>
<view class="codefun-flex-col codefun-relative group_6"> <view class="codefun-flex-col codefun-relative group_6">
...@@ -420,7 +420,7 @@ ...@@ -420,7 +420,7 @@
<view class="codefun-flex-col group_10"> <view class="codefun-flex-col group_10">
<view class="codefun-flex-row codefun-justify-between codefun-items-center"> <view class="codefun-flex-row codefun-justify-between codefun-items-center">
<text class="font">农业大模型</text> <text class="font">农业大模型</text>
<text class="font_6 text_17">全部</text> <!-- <text class="font_6 text_17">全部</text> -->
</view> </view>
<view class="codefun-flex-col mt-17"> <view class="codefun-flex-col mt-17">
<view class="codefun-flex-col codefun-justify-start section_6"> <view class="codefun-flex-col codefun-justify-start section_6">
......
src/pages/resource/components/save-dialog.vue 0 → 100644
<template>
<u-modal :show="show" :title="dialogTitle" :showConfirmButton="false" :showCancelButton="false" @close="handleClose"
:closeOnClickOverlay="false" >
<view class="dialog-content">
<u-form :model="formData" :rules="rules" ref="formRef" label-width="auto">
<!-- 资源基本信息 -->
<!-- <view class="section-title">资源基本信息</view> -->
<u-form-item label="" prop="fileName">
<u-input v-model="formData.fileName" placeholder="请输入文件名称" border="bottom" />
</u-form-item>
<!-- <u-form-item label="文件类型" prop="fileType" required>
<u-input v-model="formData.fileType" placeholder="请选择文件类型" border="bottom"
@click="showFileTypePicker = true" />
</u-form-item> -->
<u-form-item label="上传文件" prop="file" required>
<view class="file-upload">
<u-button v-if="!formData.file" @click="chooseFile" type="primary"
class="ui-button">
<text class="font_10">选择文件</text>
</u-button>
<view v-else class="file-info">
<view class="file-name-container">
<text class="file-name">{{ formData.file.name }}</text>
<text class="remove-icon" @click="removeFile">×</text>
</view>
</view>
</view>
</u-form-item>
<!-- 操作按钮 -->
<view class="dialog-buttons">
<u-button type="primary" @click="handleSubmit" :loading="loading" size="normal" class="submit-btn"
color="var(--fui-color-success)">
{{ submitButtonText }}
</u-button>
<u-button @click="handleClose" size="normal" class="cancel-btn">取消</u-button>
</view>
</u-form>
</view>
</u-modal>
</template>
<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { useGlobSetting } from '/@/hooks/setting'
import * as WodeAPI from '@/api/model/wode'
// 定义Props
interface Props {
show: boolean
editData?: any
}
const props = withDefaults(defineProps<Props>(), {
show: false,
editData: null
})
// 定义Emits
const emit = defineEmits<{
'update:show': [value: boolean]
'submit': [data: any]
'close': []
'submitSuccess': []
}>()
// 表单引用
const formRef = ref()
const loading = ref(false)
const uploading = ref(false)
const showFileTypePicker = ref(false)
// 文件类型选项
const fileTypeOptions = [
{ value: 'doc', text: 'Word文档' },
{ value: 'xls', text: 'Excel表格' },
{ value: 'ppt', text: 'PPT演示' },
{ value: 'pdf', text: 'PDF文档' },
{ value: 'img', text: '图片文件' },
{ value: 'video', text: '视频文件' },
{ value: 'audio', text: '音频文件' },
{ value: 'zip', text: '压缩文件' },
{ value: 'other', text: '其他文件' }
]
// 表单数据
const formData = reactive({
fileName: '',
fileType: '',
fileTypeText: '',
file: null,
fileSrc: '',
})
// 计算属性
const dialogTitle = computed(() => {
return props.editData ? '编辑资源' : '上传资源'
})
const submitButtonText = computed(() => {
return props.editData ? '保存' : '上传'
})
// 表单验证规则
const rules = {
fileName: [
{ required: true, message: '请输入文件名称', trigger: 'blur' },
{ min: 2, max: 50, message: '文件名称长度在2-50个字符之间', trigger: 'blur' }
],
fileType: [
{ required: true, message: '请选择文件类型', trigger: 'change' }
],
file: [
{
required: true,
message: '请选择文件',
trigger: 'change',
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('请选择文件'))
} else {
callback()
}
}
}
]
}
// 监听显示状态
watch(() => props.show, (newVal) => {
if (newVal && props.editData) {
// 编辑模式，填充数据
resetFormData()
loadEditData()
} else if (newVal) {
// 添加模式，重置表单
resetFormData()
}
})
// 重置表单数据
const resetFormData = () => {
formData.fileName = ''
formData.fileType = ''
formData.fileTypeText = ''
formData.file = null
formData.fileSrc = ''
// 清除验证状态
if (formRef.value) {
formRef.value.resetFields()
}
}
// 加载编辑数据
const loadEditData = () => {
if (!props.editData) return
formData.fileName = props.editData.fileName || ''
formData.fileType = props.editData.fileType || ''
formData.fileTypeText = props.editData.fileTypeText || ''
// 编辑模式不修改文件本身
// formData.file = null
}
const uplpoadFile = ref(null)
// 选择文件
const chooseFile = () => {
uni.chooseFile({
count: 1,
extension: ['*'],
success: (res) => {
uplpoadFile.value = res
const tempFilePaths = res.tempFilePaths
const tempFiles = res.tempFiles
console.log(tempFiles)
if (tempFiles && tempFiles.length > 0) {
if (!formData.fileName) {
formData.fileName = tempFiles[0].name || ''
}
// 根据文件扩展名设置文件类型
const fileName = tempFiles[0].name || ''
const ext = fileName.split('.').pop()?.toLowerCase() || ''
const fileType = getFileTypeByExt(ext)
formData.file = tempFiles[0]
formData.fileType = fileType.value
formData.fileTypeText = fileType.text
// 文件选择后触发验证
if (formRef.value) {
formRef.value.validateField('file')
}
}
},
fail: (err) => {
console.error('选择文件失败:', err)
uni.showToast({ title: '选择文件失败', icon: 'none' })
uploading.value = false
}
})
}
// 移除文件
const removeFile = () => {
formData.file = null
// 移除文件后触发验证
if (formRef.value) {
formRef.value.validateField('file')
}
}
// 根据文件扩展名获取文件类型
const getFileTypeByExt = (ext) => {
const map = {
'doc': 'doc',
'docx': 'doc',
'xls': 'xls',
'xlsx': 'xls',
'ppt': 'ppt',
'pptx': 'ppt',
'pdf': 'pdf',
'jpg': 'img',
'jpeg': 'img',
'png': 'img',
'gif': 'img',
'mp4': 'video',
'avi': 'video',
'mp3': 'audio',
'wav': 'audio',
'zip': 'zip',
'rar': 'zip',
'7z': 'zip'
}
const type = map[ext] || 'other'
return fileTypeOptions.find(item => item.value === type) || fileTypeOptions[8]
}
const userStore = useUserStore()
const globSetting = useGlobSetting()
const toastRef = ref()
// 提交表单
const handleSubmit = async () => {
try {
console.log(formData)
// 先进行表单验证
const valid = await formRef.value.validate()
if (!valid) {
// 验证失败，返回
return
}
// 额外校验文件是否存在
if (!formData.file) {
uni.showToast({
title: '请选择文件',
icon: 'none'
})
return
}
loading.value = true
// 准备提交数据
const submitData = {
fileName: formData.fileName,
fileType: formData.fileType,
fileSize: formData.file ? formData.file.size : 0,
fileSrc: formData.fileSrc,
// createTime: new Date().toLocaleString()
}
// API留空
console.log('上传资源数据:', submitData)
uni.uploadFile({
url: globSetting.apiUrl + globSetting.urlPrefix + '/sys/common/upload', // 直接使用上传接口URL
filePath: uplpoadFile.value.tempFilePaths[0],
name: 'file',
formData: {
biz: 'temp',
},
header: {
'X-Access-Token': userStore.getToken,
},
success: (res) => {
if (res.statusCode === 200) {
const data = JSON.parse(res.data)
if (data.code === 200 || data.code === 0) {
submitData.fileSrc = data.message;
WodeAPI.addResource(submitData).then(res => {
toastRef.value.show({
type: 'success',
text: `上传成功`,
})
emit('update:show', false)
emit('submitSuccess')
}).catch(error => {
uni.showToast({
title: error.message || '提交失败，请重试',
icon: 'none',
duration: 2000
})
}).finally(() => {
loading.value = false
})
}
}
},
fail: () => {
toastRef.value.show({
type: 'error',
text: '上传失败',
})
},
})
// 模拟上传过程
// setTimeout(() => {
// uni.showToast({ title: '操作成功', icon: 'success' })
// emit('update:show', false)
// emit('submitSuccess')
// }, 1500)
} catch (error) {
console.log('提交失败:', error)
uni.showToast({
title: '操作失败',
icon: 'none',
duration: 2000
})
} finally {
loading.value = false
}
}
// 关闭弹窗
const handleClose = () => {
emit('update:show', false)
emit('close')
}
</script>
<style lang="scss" scoped>
.dialog-content {
padding: 10rpx 30rpx;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
border-left: 6rpx solid #5DB66F;
padding-left: 12rpx;
}
.dialog-buttons {
display: flex;
justify-content: space-between;
margin-top: 50rpx;
gap: 20rpx;
}
.submit-btn,
.cancel-btn {
flex: 1;
}
.file-upload {
width: 100%;
}
.file-info {
padding: 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
.file-name-container {
position: relative;
display: flex;
align-items: center;
}
.file-name {
flex: 1;
width: 40rpx;
font-size: 28rpx;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 40rpx;
}
.remove-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 36rpx;
color: #999;
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
&:active {
color: #ff4d4f;
background-color: rgba(255, 77, 79, 0.1);
border-radius: 50%;
}
}
}
// 模态框样式调整
::v-deep .u-modal {
background: linear-gradient(0deg, rgba(93, 182, 111, 0) 50%, rgba(93, 182, 111, 0.25) 100%);
.u-modal__content {
border-radius: 20rpx;
padding: 20rpx 0rpx;
}
.u-modal__header {
border-bottom: 2rpx solid #f0f0f0;
padding: 30rpx;
.u-modal__header__title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
}
.ui-button {
padding: 16rpx 0;
background-color: #5db66f26;
border-radius: 10rpx;
mix-blend-mode: NOTTHROUGH;
border-color: #5db66f26;
.font_10 {
font-size: 24rpx;
line-height: 24rpx;
color: #16a34a;
}
}
</style>
src/pages/resource/resource.vue 0 → 100644
<template>
<view class="codefun-flex-col page">
<z-paging ref="paging" v-model="pageData.list" @query="queryList">
<view class="codefun-flex-col group_3">
<view class="codefun-flex-row codefun-items-center section_2">
<image class="image_6" src="/static/images/codefun/6c5c5a3c082b8c60a307d3a7caee623c.png" />
<u-input v-model="pageData.param.fileName" placeholder="请输入文件名称搜索" border="none"
class="codefun-ml-8" @confirm="handleSearch" />
</view>
<!-- 资源列表 - 根据图片样式修改 -->
<view class="resource-list">
<view v-for="(item, index) in pageData.list" :key="index" class="resource-item">
<view class="resource-content">
<view class="resource-main">
<view class="resource-name">{{ item.fileName }}</view>
<view class="resource-meta">
<text class="resource-size">{{ formatFileSize(item.fileSize) }}</text>
<text class="separator">|</text>
<text class="download-count">已下载{{ item.downloadCount || 25 }}次</text>
<text class="separator">|</text>
<text class="upload-time">{{ formatTime(item.createTime) }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
@click.stop="handleDownload(item)">
<text class="font_10">下载</text>
</view>
<!-- <view class="download-section">
<view class="download-btn" @click="handleDownload(item)">
<text class="btn-text">下载</text>
</view>
</view> -->
</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" v-if="pageData.list.length === 0">
<image class="empty-icon" src="/static/images/empty-file.png" mode="aspectFit"></image>
<text class="empty-text">暂无资源文件</text>
</view>
</view>
</z-paging>
<!-- 弹窗组件 -->
<save-dialog :show="showDialog" :editData="currentEditData" @update:show="showDialog = $event"
@submitSuccess="handleSubmitSuccess" />
</view>
</template>
<script setup>
import { nextTick, reactive, ref } from 'vue'
import { onLoad, onNavigationBarButtonTap, onShow } from '@dcloudio/uni-app'
// import * as ResourceAPI from '@/api/model/resource' // API留空
import SaveDialog from './components/save-dialog.vue'
const isOnePage = ref(true)
const paging = ref(null)
const pageData = reactive({
param: {
pageNo: 1,
pageSize: 10,
fileName: '',
},
list: [],
})
function getList() {
if (!paging.value) return
// API留空，使用模拟数据 - 根据图片内容调整
setTimeout(() => {
const mockData = [
{
id: 1,
fileName: '水稻种植合同模版',
fileType: 'PDF',
fileSize: 128000, // 125kb
downloadCount: 25,
createTime: '2025-11-02 14:00'
},
{
id: 2,
fileName: '农药使用指南',
fileType: 'PDF',
fileSize: 128000,
downloadCount: 25,
createTime: '2025-11-02 14:00'
},
{
id: 3,
fileName: '农业补贴列表说明',
fileType: 'PDF',
fileSize: 128000,
downloadCount: 25,
createTime: '2025-11-02 14:00'
},
{
id: 4,
fileName: '小麦种植合同模版',
fileType: 'PDF',
fileSize: 128000,
downloadCount: 25,
createTime: '2025-11-02 14:00'
},
{
id: 5,
fileName: '化肥使用指南',
fileType: 'PDF',
fileSize: 128000,
downloadCount: 25,
createTime: '2025-11-02 14:00'
},
{
id: 6,
fileName: '油茶种植补贴列表说明',
fileType: 'PDF',
fileSize: 128000,
downloadCount: 25,
createTime: '2025-11-02 14:00'
}
]
pageData.total = mockData.length
paging.value.complete(mockData)
}, 500)
}
function queryList(pageNo, pageSize) {
pageData.param.pageNo = pageNo
pageData.param.pageSize = pageSize
getList()
}
function handleSearch() {
pageData.param.pageNo = 1
if (paging.value) {
paging.value.reload()
}
}
const showDialog = ref(false)
const currentEditData = ref(null)
onNavigationBarButtonTap((_) => {
showAddDialog()
})
const showAddDialog = () => {
currentEditData.value = null
showDialog.value = true
}
// 格式化时间显示
const formatTime = (time) => {
if (!time) return ''
// 如果是完整的时间字符串，可以格式化为图片中的样式
return time.includes(' ') ? time : `${time} 14:00`
}
// 下载资源
const handleDownload = (resource) => {
console.log('下载资源:', resource)
uni.showToast({
title: '开始下载',
icon: 'success',
duration: 2000
})
// 模拟下载逻辑
setTimeout(() => {
// 更新下载次数
const index = pageData.list.findIndex(item => item.id === resource.id)
if (index !== -1) {
pageData.list[index].downloadCount = (pageData.list[index].downloadCount || 0) + 1
}
}, 1000)
}
// 格式化文件大小
const formatFileSize = (bytes) => {
if (!bytes) return '125kb'
const k = 1024
const sizes = ['B', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(0)) + sizes[i].toLowerCase()
}
const handleSubmitSuccess = () => {
handleSearch()
}
</script>
<style lang="scss">
body {
background-color: #f8f9fa;
}
.page {
background-color: #f8f9fa;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.group_3 {
padding: 28rpx 24rpx;
}
.section_2 {
padding: 16rpx 20rpx;
background-color: #ffffff;
border-radius: 1998rpx;
margin-bottom: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}
.image_6 {
width: 32rpx;
height: 32rpx;
}
/* 资源列表样式 - 根据图片样式重写 */
.resource-list {
margin-top: 0;
}
.resource-item {
background-color: #ffffff;
border-radius: 16rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
&:active {
transform: translateY(2rpx);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
}
}
.resource-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 24rpx;
}
.resource-main {
flex: 1;
min-width: 0;
}
.resource-name {
font-size: 32rpx;
font-weight: 500;
color: #333333;
line-height: 1.4;
margin-bottom: 12rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.resource-meta {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999999;
gap: 12rpx;
flex-wrap: wrap;
}
.separator {
color: #dddddd;
font-size: 20rpx;
}
.resource-size,
.download-count,
.upload-time {
color: #666666;
}
.download-section {
margin-left: 30rpx;
flex-shrink: 0;
}
.download-btn {
background-color: #5DB66F;
border: none;
border-radius: 20rpx;
padding: 12rpx 30rpx;
min-width: 120rpx;
transition: all 0.3s ease;
&::after {
border: none;
}
&:active {
background-color: #4ca85c;
transform: scale(0.95);
}
}
.text-wrapper_4 {
padding: 16rpx 0;
background-color: #5db66f26;
border-radius: 400rpx;
mix-blend-mode: NOTTHROUGH;
width: 136rpx;
.font_10 {
font-size: 24rpx;
line-height: 24rpx;
color: #16a34a;
}
}
.btn-text {
color: #ffffff;
font-size: 28rpx;
font-weight: 500;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 120rpx 0;
color: #999999;
}
.empty-icon {
width: 160rpx;
height: 160rpx;
margin-bottom: 30rpx;
opacity: 0.6;
}
.empty-text {
font-size: 28rpx;
color: #999999;
}
/* 响应式调整 */
@media (max-width: 375px) {
.resource-content {
padding: 24rpx 20rpx;
}
.resource-name {
font-size: 30rpx;
}
.resource-meta {
font-size: 22rpx;
}
.download-btn {
padding: 10rpx 24rpx;
min-width: 100rpx;
}
.btn-text {
font-size: 26rpx;
}
}
</style>
src/pages/shouye/shouye.vue
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from 'vue' import { reactive } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app' import { onPullDownRefresh, onHide, onUnload } from '@dcloudio/uni-app'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { closeSplashscreenAndChechUpgrade } from '@/utils/upgrade' import { closeSplashscreenAndChechUpgrade } from '@/utils/upgrade'
import * as WeatherAPI from '@/api/model/weather' import * as WeatherAPI from '@/api/model/weather'
import * as HomeAPI from '@/api/model/home' import * as HomeAPI from '@/api/model/home'
import { useDictStore } from '@/store/modules/dict' import { useDictStore } from '@/store/modules/dict'
const dictStore = useDictStore()
const model = reactive({
// 湖南省人民政府
location: '112.982931,28.116698',
})
onLoad(() => { const dictStore = useDictStore()
// 关闭启动页并检查更新 const model = reactive({
closeSplashscreenAndChechUpgrade() // 湖南省人民政府
}) location: '112.982931,28.116698',
})
onShow(() => { onLoad(() => {
uni.getLocation({ // 关闭启动页并检查更新
type: 'wgs84', closeSplashscreenAndChechUpgrade()
success(res) { })
console.log(`经度：${res.longitude}`)
console.log(`纬度：${res.latitude}`)
if (res.longitude === 0 || res.latitude === 0) { onShow(() => {
return uni.getLocation({
} type: 'wgs84',
success(res) {
console.log(`经度：${res.longitude}`)
console.log(`纬度：${res.latitude}`)
pageData.weather.lon = res.longitude if (res.longitude === 0 || res.latitude === 0) {
pageData.weather.lat = res.latitude return
uni.setStorageSync('location', { }
// 缓存地址
lon: res.longitude,
lat: res.latitude,
})
model.location = `${res.longitude},${res.latitude}`
reloadWeather()
},
fail(res) {
console.log('获取位置失败:', res)
reloadWeather()
uni.showToast({
title: '获取地址失败，将导致部分功能不可用',
icon: 'none',
})
},
})
// 获取字典列表 pageData.weather.lon = res.longitude
dictStore.setDictList() pageData.weather.lat = res.latitude
uni.setStorageSync('location', {
// 查询金刚区数据 // 缓存地址
getServiceItems() lon: res.longitude,
getMenuItems() lat: res.latitude,
// 查询天气信息 })
getWarningInfo() model.location = `${res.longitude},${res.latitude}`
// 查询热门产地行情 reloadWeather()
getProductMarketList() },
// 服务展示窗 fail(res) {
getServiceStatsList() console.log('获取位置失败:', res)
// 农技课堂 reloadWeather()
getAgricultureClassList() uni.showToast({
title: '获取地址失败，将导致部分功能不可用',
icon: 'none',
})
},
}) })
// 下拉刷新 // 获取字典列表
onPullDownRefresh(() => { dictStore.setDictList()
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
})
function getWeatherRecommend(weather: string) { // 查询金刚区数据
switch (weather) { getServiceItems()
case '晴': getMenuItems()
return '宜喷药' // 查询天气信息
case '阴': getWarningInfo()
return '宜少浇水' // 查询热门产地行情
case '小雨': getProductMarketList()
return '宜播种' // 服务展示窗
case '中雨': getServiceStatsList()
return '注意防涝' // 农技课堂
default: getAgricultureClassList()
return '无建议' })
}
}
// 刷新天气信息 // 下拉刷新
function reloadWeather() { onPullDownRefresh(() => {
WeatherAPI.now(model.location).then((res) => { setTimeout(function () {
console.log('WeatherAPI.now', res) uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
})
pageData.weather.temperature = `${res.data.now.temp}°C` function getWeatherRecommend(weather: string) {
pageData.weather.condition = `${res.data.now.text} | ${getWeatherRecommend(res.data.now.text)}` switch (weather) {
pageData.weather.icon = `${res.data.now.icon}` case '晴':
}) return '宜喷药'
WeatherAPI.forecast(model.location).then((res) => { case '阴':
console.log('WeatherAPI.forecast', res) return '宜少浇水'
case '小雨':
const weekDays = ['日', '一', '二', '三', '四', '五', '六'] return '宜播种'
pageData.weather.forecast = res.data.daily.slice(1, 4).map((item: any, index: number) => { case '中雨':
return { return '注意防涝'
day: index === 0 ? '明天' : `周${weekDays[dayjs(item.fxDate).day()]}`, default:
temp: `${item.tempMin}~${item.tempMax}°`, return '无建议'
icon: item.iconDay || item.iconNight,
}
})
})
} }
}
// 页面数据 // 刷新天气信息
const pageData = reactive({ function reloadWeather() {
// 顶部标题和搜索 WeatherAPI.now(model.location).then((res) => {
header: { console.log('WeatherAPI.now', res)
title: $app.name,
searchPlaceholder: '请输入搜索内容',
},
// 天气信息 pageData.weather.temperature = `${res.data.now.temp}°C`
weather: { pageData.weather.condition = `${res.data.now.text} | ${getWeatherRecommend(res.data.now.text)}`
icon: '100', pageData.weather.icon = `${res.data.now.icon}`
location: '长沙', })
date: `${dayjs().format('MM-DD')} ${dayjs().toLunarDay().getName()}`, WeatherAPI.forecast(model.location).then((res) => {
temperature: '-°C', console.log('WeatherAPI.forecast', res)
condition: '晴｜适宜喷药',
forecast: [
{ day: '明天', temp: '24-28°', icon: '100' },
{ day: '周三', temp: '25-29°', icon: '101' },
{ day: '周四', temp: '26-31°', icon: '102' },
],
warning: '',
lon: null,
lat: null,
},
// 功能菜单 const weekDays = ['日', '一', '二', '三', '四', '五', '六']
menuItems: [], pageData.weather.forecast = res.data.daily.slice(1, 4).map((item: any, index: number) => {
return {
day: index === 0 ? '明天' : `周${weekDays[dayjs(item.fxDate).day()]}`,
temp: `${item.tempMin}~${item.tempMax}°`,
icon: item.iconDay || item.iconNight,
}
})
})
}
// 其他服务 // 页面数据
serviceItems: [], const pageData = reactive({
// 顶部标题和搜索
header: {
title: $app.name,
searchPlaceholder: '请输入搜索内容',
},
// 新闻资讯 // 天气信息
newsItems: [ weather: {
{ id: 1, type: '最新', title: '积极防范持续高温对农作物的影响', date: '2025-08-29' }, icon: '100',
{ id: 2, type: '预警', title: '', date: '2025-08-29' }, location: '长沙',
date: `${dayjs().format('MM-DD')} ${dayjs().toLunarDay().getName()}`,
temperature: '-°C',
condition: '晴｜适宜喷药',
forecast: [
{ day: '明天', temp: '24-28°', icon: '100' },
{ day: '周三', temp: '25-29°', icon: '101' },
{ day: '周四', temp: '26-31°', icon: '102' },
], ],
warning: '',
lon: null,
lat: null,
},
// 农产品行情 // 功能菜单
productMarket: { menuItems: [],
title: '热门产地行情',
// updateTime: '08-30日更新',
products: [
// { id: 1, name: '晚稻13号', price: '¥4120', change: '+1.2%', isUp: true },
// { id: 2, name: '晚稻9号', price: '¥3211', change: '+1.2%', isUp: true },
// { id: 3, name: '晚稻11号', price: '¥2120', change: '-1.2%', isUp: false },
],
},
// 服务展示窗 // 其他服务
serviceStats: [ serviceItems: [],
// {
// id: 1, // 新闻资讯
// name: '农场入驻', newsItems: [
// value: '2,360', { id: 1, type: '最新', title: '积极防范持续高温对农作物的影响', date: '2025-08-29' },
// unit: '个', { id: 2, type: '预警', title: '', date: '2025-08-29' },
// icon: '/static/images/codefun/15911306636a361a8dc16ce0283f3830.png', ],
// },
// { // 农产品行情
// id: 2, productMarket: {
// name: '空闲农机', title: '热门产地行情',
// value: '126', // updateTime: '08-30日更新',
// unit: '台', products: [
// icon: '/static/images/codefun/1d0cd168eeffbaf37a90aa949c6ad806.png', // { id: 1, name: '晚稻13号', price: '¥4120', change: '+1.2%', isUp: true },
// }, // { id: 2, name: '晚稻9号', price: '¥3211', change: '+1.2%', isUp: true },
// { // { id: 3, name: '晚稻11号', price: '¥2120', change: '-1.2%', isUp: false },
// id: 3,
// name: '产销对接',
// value: '156',
// unit: '笔',
// icon: '/static/images/codefun/24dd00386672f240ef00394b746c2ff0.png',
// },
// {
// id: 4,
// name: '服务农户',
// value: '12,580',
// unit: '人',
// icon: '/static/images/codefun/3fd6a50eaf22431687a6151df0581156.png',
// },
// {
// id: 5,
// name: '覆盖面积',
// value: '268',
// unit: 'km',
// icon: '/static/images/codefun/87773a17a1b64dc686bf935708262002.png',
// },
// {
// id: 6,
// name: '覆盖区县',
// value: '21',
// unit: '个',
// icon: '/static/images/codefun/329a4404092545f2924ad095c531cc66.png',
// },
], ],
},
// 农技课堂 // 服务展示窗
agricultureClass: { serviceStats: [
title: '', // {
// expert: '张教授', // id: 1,
time: '', // name: '农场入驻',
videoList: [], // value: '2,360',
}, // unit: '个',
current: 0, // icon: '/static/images/codefun/15911306636a361a8dc16ce0283f3830.png',
}) // },
// {
// id: 2,
// name: '空闲农机',
// value: '126',
// unit: '台',
// icon: '/static/images/codefun/1d0cd168eeffbaf37a90aa949c6ad806.png',
// },
// {
// id: 3,
// name: '产销对接',
// value: '156',
// unit: '笔',
// icon: '/static/images/codefun/24dd00386672f240ef00394b746c2ff0.png',
// },
// {
// id: 4,
// name: '服务农户',
// value: '12,580',
// unit: '人',
// icon: '/static/images/codefun/3fd6a50eaf22431687a6151df0581156.png',
// },
// {
// id: 5,
// name: '覆盖面积',
// value: '268',
// unit: 'km',
// icon: '/static/images/codefun/87773a17a1b64dc686bf935708262002.png',
// },
// {
// id: 6,
// name: '覆盖区县',
// value: '21',
// unit: '个',
// icon: '/static/images/codefun/329a4404092545f2924ad095c531cc66.png',
// },
],
function getServiceItems() { // 农技课堂
HomeAPI.zoneList({ agricultureClass: {
pageNo: 1, title: '',
pageSize: 4, // expert: '张教授',
status: 1, time: '',
type: 1, videoList: [],
}).then((res) => { },
const { records } = res current: 0,
pageData.serviceItems = [] })
pageData.serviceItems = records
})
}
function getMenuItems() {
HomeAPI.zoneList({
pageNo: 1,
pageSize: 4,
status: 1,
type: 2,
}).then((res) => {
const { records } = res
pageData.menuItems = []
pageData.menuItems = records
})
}
function getWarningInfo() {
if (!pageData.weather.lon || !pageData.weather.lat) {
return
}
HomeAPI.warningInfo({ function getServiceItems() {
lon: pageData.weather.lon, HomeAPI.zoneList({
lat: pageData.weather.lat, pageNo: 1,
}).then((res) => { pageSize: 4,
pageData.weather.warning = res[0].criteria status: 1,
}) type: 1,
} }).then((res) => {
function getProductMarketList() { const { records } = res
HomeAPI.productMarketList({ pageData.serviceItems = []
status: 1, pageData.serviceItems = records
}).then((res) => { })
const { records } = res }
console.log(res) function getMenuItems() {
pageData.productMarket.products = records HomeAPI.zoneList({
pageData.productMarket.products.forEach((item: any) => { pageNo: 1,
switch (item.tendency) { pageSize: 4,
case 1: status: 1,
item.isUp = true type: 2,
break }).then((res) => {
case 2: const { records } = res
item.isUp = false pageData.menuItems = []
break pageData.menuItems = records
} })
}) }
}) function getWarningInfo() {
} if (!pageData.weather.lon || !pageData.weather.lat) {
function getServiceStatsList() { return
HomeAPI.serviceStatsList({
status: 1,
}).then((res) => {
const { records } = res
pageData.serviceStats = records
})
} }
function getAgricultureClassList() {
HomeAPI.agricultureClassList({ HomeAPI.warningInfo({
status: 1, lon: pageData.weather.lon,
}).then((res) => { lat: pageData.weather.lat,
const { records } = res }).then((res) => {
pageData.agricultureClass.videoList = records pageData.weather.warning = res[0].criteria
pageData.agricultureClass.title = records[0]?.title })
}
function getProductMarketList() {
HomeAPI.productMarketList({
status: 1,
}).then((res) => {
const { records } = res
console.log(res)
pageData.productMarket.products = records
pageData.productMarket.products.forEach((item: any) => {
switch (item.tendency) {
case 1:
item.isUp = true
break
case 2:
item.isUp = false
break
}
}) })
} })
}
function getServiceStatsList() {
HomeAPI.serviceStatsList({
status: 1,
}).then((res) => {
const { records } = res
pageData.serviceStats = records
})
}
function getAgricultureClassList() {
HomeAPI.agricultureClassList({
status: 1,
}).then((res) => {
const { records } = res
pageData.agricultureClass.videoList = records
pageData.agricultureClass.title = records[0]?.title
})
}
// 菜单点击事件 // 菜单点击事件
function onMenuItemClick(item: any) { function onMenuItemClick(item: any) {
console.log('点击菜单项:', item) console.log('点击菜单项:', item)
// 在这里添加具体的菜单点击逻辑 // 在这里添加具体的菜单点击逻辑
} }
// 农产品关注点击事件 // 农产品关注点击事件
function onProductFollowClick(product: any) { function onProductFollowClick(product: any) {
console.log('点击关注农产品:', product) console.log('点击关注农产品:', product)
// 在这里添加具体的关注逻辑 // 在这里添加具体的关注逻辑
} }
// 查看更多农技课堂 // 查看更多农技课堂
function onViewMoreClass() { function onViewMoreClass() {
console.log('查看全部农技课堂') console.log('查看全部农技课堂')
// 在这里添加具体的查看逻辑 // 在这里添加具体的查看逻辑
} }
// 轮播视频切换的时候触发 // 轮播视频切换的时候触发
function handleChangeVideo(e: any) { function handleChangeVideo(e: any) {
// console.log('切换视频', e.detail.current) // console.log('切换视频', e.detail.current)
pageData.current = e.detail.current pageData.current = e.detail.current
pageData.agricultureClass.title = pageData.agricultureClass.videoList[pageData.current]?.title pageData.agricultureClass.title = pageData.agricultureClass.videoList[pageData.current]?.title
} }
// 获取视频时长 // 获取视频时长
function handleMetadataLoaded(e: any) { function handleMetadataLoaded(e: any) {
pageData.agricultureClass.time = e.target.duration pageData.agricultureClass.time = e.target.duration
} }
// 解决轮播视频切换时，上一个视频不停止播放的问题 // 解决轮播视频切换时，上一个视频不停止播放的问题
function handleVideoPlay(currentIndex) { function handleVideoPlay(currentIndex) {
pageData.agricultureClass.videoList.forEach((_, index) => { pageData.agricultureClass.videoList.forEach((_, index) => {
if (index !== currentIndex) { if (index !== currentIndex) {
const videoContext = uni.createVideoContext(`video${index}`) const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause() videoContext.pause()
} }
}) })
} }
</script> </script>
<template> <template>
...@@ -345,14 +345,11 @@ ...@@ -345,14 +345,11 @@
<view class="codefun-flex-row codefun-justify-between"> <view class="codefun-flex-row codefun-justify-between">
<view class="codefun-flex-row codefun-items-center"> <view class="codefun-flex-row codefun-items-center">
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
>
<text class="font_2 text_4">{{ pageData.weather.location }}</text> <text class="font_2 text_4">{{ pageData.weather.location }}</text>
</view> </view>
<image <image class="image_6 codefun-ml-6"
class="image_6 codefun-ml-6" src="/static/images/codefun/a2f290fb1b65d093b844e73ddae1aed9.png" />
src="/static/images/codefun/a2f290fb1b65d093b844e73ddae1aed9.png"
/>
</view> </view>
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_2"> <view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_2">
<text class="text_3">{{ pageData.weather.date }}</text> <text class="text_3">{{ pageData.weather.date }}</text>
...@@ -360,15 +357,13 @@ ...@@ -360,15 +357,13 @@
</view> </view>
<view class="codefun-flex-row group_5"> <view class="codefun-flex-row group_5">
<view class="codefun-flex-row codefun-items-center group_8"> <view class="codefun-flex-row codefun-items-center group_8">
<image <image class="codefun-shrink-0 image_8"
class="codefun-shrink-0 image_8" :src="`/static/images/weather/${pageData.weather.icon}.svg`" />
:src="`/static/images/weather/${pageData.weather.icon}.svg`"
/>
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-10"> <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-10">
<text class="text_5">{{ pageData.weather.temperature }}</text> <text class="text_5">{{ pageData.weather.temperature }}</text>
<text class="font_2 text_8 !text-24rpx codefun-mt-16">{{ <text class="font_2 text_8 !text-24rpx codefun-mt-16">{{
pageData.weather.condition pageData.weather.condition
}}</text> }}</text>
</view> </view>
</view> </view>
<view class="codefun-flex-col group_6 ml-2"> <view class="codefun-flex-col group_6 ml-2">
...@@ -383,78 +378,58 @@ ...@@ -383,78 +378,58 @@
src="/static/images/codefun/c785818f2c08b7682aa5188542b2dede.png" src="/static/images/codefun/c785818f2c08b7682aa5188542b2dede.png"
/> --> /> -->
<image <image class="image_7" :src="`/static/images/weather/${forecast.icon}.svg`"
class="image_7" v-for="forecast in pageData.weather.forecast" :key="forecast.day" />
:src="`/static/images/weather/${forecast.icon}.svg`"
v-for="forecast in pageData.weather.forecast"
:key="forecast.day"
/>
</view> </view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_9"> <view class="codefun-flex-row codefun-justify-between codefun-items-center group_9">
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_9" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_9">
>
<text class="font_3 text_6">{{ pageData.weather.forecast[0].day }}</text> <text class="font_3 text_6">{{ pageData.weather.forecast[0].day }}</text>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3">
>
<text class="font_3 text_52">{{ pageData.weather.forecast[1].day }}</text> <text class="font_3 text_52">{{ pageData.weather.forecast[1].day }}</text>
</view> </view>
<text class="font_3 text_7">{{ pageData.weather.forecast[2].day }}</text> <text class="font_3 text_7">{{ pageData.weather.forecast[2].day }}</text>
</view> </view>
<view class="codefun-flex-row codefun-justify-center"> <view class="codefun-flex-row codefun-justify-center">
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
>
<text class="font_4 text_9">{{ pageData.weather.forecast[0].temp }}</text> <text class="font_4 text_9">{{ pageData.weather.forecast[0].temp }}</text>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-17" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-17">
>
<text class="font_4 text_10">{{ pageData.weather.forecast[1].temp }}</text> <text class="font_4 text_10">{{ pageData.weather.forecast[1].temp }}</text>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 ml-17" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 ml-17">
>
<text class="font_4 text_9">{{ pageData.weather.forecast[2].temp }}</text> <text class="font_4 text_9">{{ pageData.weather.forecast[2].temp }}</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="codefun-flex-row section_4" v-if="pageData.weather.warning"> <view class="codefun-flex-row section_4" v-if="pageData.weather.warning">
<image <image class="codefun-shrink-0 image_10"
class="codefun-shrink-0 image_10" src="/static/images/codefun/344155285176a7ac7ccd670a2a1daf19.png" />
src="/static/images/codefun/344155285176a7ac7ccd670a2a1daf19.png"
/>
<view <view
class="codefun-flex-col codefun-justify-start codefun-shrink-0 text-wrapper_5 codefun-ml-6" class="codefun-flex-col codefun-justify-start codefun-shrink-0 text-wrapper_5 codefun-ml-6">
>
<text class="text_12">{{ pageData.weather.warning }}</text> <text class="text_12">{{ pageData.weather.warning }}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="codefun-flex-col codefun-relative section_5"> <view class="codefun-flex-col codefun-relative section_5">
<view class="codefun-flex-row"> <view class="codefun-flex-row">
<view <view v-show="item.status" v-for="item in pageData.menuItems" :key="item.id"
v-show="item.status"
v-for="item in pageData.menuItems"
:key="item.id"
class="codefun-flex-col codefun-items-center group_10" class="codefun-flex-col codefun-items-center group_10"
@click="onMenuItemClick(item)" @click="onMenuItemClick(item)">
>
<image class="image_11" :src="item.icon_url" /> <image class="image_11" :src="item.icon_url" />
<text class="font_2 mt-11">{{ item.name }}</text> <text class="font_2 mt-11">{{ item.name }}</text>
</view> </view>
</view> </view>
<view class="codefun-flex-row codefun-mt-20"> <view class="codefun-flex-row codefun-mt-20">
<view <view v-show="item.status" v-for="item in pageData.serviceItems" :key="item.id"
v-show="item.status"
v-for="item in pageData.serviceItems"
:key="item.id"
class="codefun-flex-col codefun-items-center group_10" class="codefun-flex-col codefun-items-center group_10"
@click="onMenuItemClick(item)" @click="onMenuItemClick(item)">
>
<image class="image_11" :src="item.icon_url" /> <image class="image_11" :src="item.icon_url" />
<text class="font_2 mt-11">{{ item.name }}</text> <text class="font_2 mt-11">{{ item.name }}</text>
</view> </view>
...@@ -481,77 +456,55 @@ ...@@ -481,77 +456,55 @@
<!-- <text class="font_7 text_22">{{ pageData.productMarket.updateTime }}</text> --> <!-- <text class="font_7 text_22">{{ pageData.productMarket.updateTime }}</text> -->
</view> </view>
<view class="codefun-flex-row equal-division section_8"> <view class="codefun-flex-row equal-division section_8">
<view <view v-for="(product, index) in pageData.productMarket.products" :key="product.id"
v-for="(product, index) in pageData.productMarket.products" class="codefun-flex-col group_13" :class="{
:key="product.id"
class="codefun-flex-col group_13"
:class="{
group_17: index === 0, group_17: index === 0,
group_39: index === 1, group_39: index === 1,
group_21: index === 2, group_21: index === 2,
}" }">
>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center codefun-relative group_1" class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center codefun-relative group_1">
>
<text class="font_8 text_23">{{ product.name }}</text> <text class="font_8 text_23">{{ product.name }}</text>
<text class="font_9 text_23" :class="`pos${index > 0 ? `_${index + 1}` : ''}`">{{ <text class="font_9 text_23" :class="`pos${index > 0 ? `_${index + 1}` : ''}`">{{
product.current_price product.current_price
}}</text> }}元</text>
</view> </view>
<view <view class="codefun-flex-row codefun-items-center codefun-self-stretch" :class="{
class="codefun-flex-row codefun-items-center codefun-self-stretch" section_10: product.isUp,
:class="{ section_11: !product.isUp,
section_10: product.isUp, }">
section_11: !product.isUp, <image class="codefun-shrink-0 image_14" :src="product.isUp
}" ? '/static/images/codefun/c6f953be58ac3e9752ab9475a2a53c14.png'
> : '/static/images/codefun/c7e797cc626699dcc8999a72145e9f8b.png'
<image " />
class="codefun-shrink-0 image_14" <text class="font_10 ml-3" :class="{
:src=" text_25: product.isUp,
product.isUp text_24: !product.isUp,
? '/static/images/codefun/c6f953be58ac3e9752ab9475a2a53c14.png' text_26: !product.isUp,
: '/static/images/codefun/c7e797cc626699dcc8999a72145e9f8b.png' }">
"
/>
<text
class="font_10 ml-3"
:class="{
text_25: product.isUp,
text_24: !product.isUp,
text_26: !product.isUp,
}"
>
{{ `${product.isUp ? '' : '-'}${product.percent}%` }} {{ `${product.isUp ? '' : '-'}${product.percent}%` }}
</text> </text>
</view> </view>
<view <!-- <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_6" class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_6"
@click="onProductFollowClick(product)" @click="onProductFollowClick(product)">
>
<text class="font_11">点击关注</text> <text class="font_11">点击关注</text>
</view> </view> -->
</view> </view>
</view> </view>
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_15"> <view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_15">
<text class="font_12 text_28">服务展示窗</text> <text class="font_12 text_28">服务展示窗</text>
<text class="font_7 text_20 text_29">实时数据</text> <!-- <text class="font_7 text_20 text_29">实时数据</text> -->
</view> </view>
<view class="codefun-flex-row equal-division_2 group_16"> <view class="codefun-flex-row equal-division_2 group_16">
<view <view v-for="stat in pageData.serviceStats" :key="stat.id"
v-for="stat in pageData.serviceStats" class="codefun-flex-col section_12 section_19">
:key="stat.id"
class="codefun-flex-col section_12 section_19"
>
<view <view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_27" class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_27">
>
<image class="image_5 mr-1" :class="`pos_${stat.id}`" :src="stat.icon" /> <image class="image_5 mr-1" :class="`pos_${stat.id}`" :src="stat.icon" />
<text <text class="font_13"
class="font_13" :class="`text_${stat.id === 1 ? 30 : stat.id === 2 ? 1 : stat.id > 4 ? 46 : 37}`">{{
:class="`text_${stat.id === 1 ? 30 : stat.id === 2 ? 1 : stat.id > 4 ? 46 : 37}`" stat.name }}</text>
>{{ stat.name }}</text
>
</view> </view>
<view class="codefun-flex-row codefun-justify-center codefun-items-baseline mt-11 group_30"> <view class="codefun-flex-row codefun-justify-center codefun-items-baseline mt-11 group_30">
<text class="font_12 text_37">{{ stat.num }}</text> <text class="font_12 text_37">{{ stat.num }}</text>
...@@ -561,47 +514,29 @@ ...@@ -561,47 +514,29 @@
</view> </view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_19"> <view class="codefun-flex-row codefun-justify-between codefun-items-center group_19">
<text class="font_6 text_32">农技课堂</text> <text class="font_6 text_32">农技课堂</text>
<text class="font_7 text_33" @click="onViewMoreClass">查看全部</text> <!-- <text class="font_7 text_33" @click="onViewMoreClass">查看全部</text> -->
</view> </view>
<view class="codefun-flex-col section_13"> <view class="codefun-flex-col section_13">
<fui-swiper-dot <fui-swiper-dot :items="pageData.agricultureClass.videoList" :current="pageData.current" :styles="{
:items="pageData.agricultureClass.videoList" height: 10,
:current="pageData.current" activeWidth: 40,
:styles="{ background: '#dff0e2',
height: 10, activeBackground: '#5db66f',
activeWidth: 40, bottom: 10,
background: '#dff0e2', }">
activeBackground: '#5db66f', <swiper class="fui-banner__wrap" circular :indicator-dots="false" autoplay :interval="4000"
bottom: 10, :duration="150" @change="handleChangeVideo">
}"
>
<swiper
class="fui-banner__wrap"
circular
:indicator-dots="false"
autoplay
:interval="4000"
:duration="150"
@change="handleChangeVideo"
>
<swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"> <swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
<video <video :id="`video${index}`" :src="video.media_video" :poster="video.cover_image"
:id="`video${index}`" :controls="false" style="width: 654rpx; height: 358rpx"
:src="video.media_video" @loadedmetadata="handleMetadataLoaded" @play="handleVideoPlay(index)"></video>
:poster="video.cover_image"
:controls="false"
style="width: 654rpx; height: 358rpx"
@loadedmetadata="handleMetadataLoaded"
@play="handleVideoPlay(index)"
></video>
</swiper-item> </swiper-item>
</swiper> </swiper>
</fui-swiper-dot> </fui-swiper-dot>
<view class="describe"> <view class="describe">
<text class="codefun-self-start font text_34">{{ pageData.agricultureClass.title }}</text> <text class="codefun-self-start font text_34">{{ pageData.agricultureClass.title }}</text>
<view <view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-13" class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-13">
>
<!-- <view class="codefun-flex-row codefun-items-center"> <!-- <view class="codefun-flex-row codefun-items-center">
<image <image
class="codefun-shrink-0 image_15" class="codefun-shrink-0 image_15"
...@@ -619,725 +554,882 @@ ...@@ -619,725 +554,882 @@
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.ml-17 { .ml-17 {
margin-left: 34rpx; margin-left: 34rpx;
} }
.ml-43 {
margin-left: 86rpx; .ml-43 {
} margin-left: 86rpx;
.mt-13 { }
margin-top: 26rpx;
} .mt-13 {
.ml-11 { margin-top: 26rpx;
margin-left: 22rpx; }
}
.ml-3 { .ml-11 {
margin-left: 6rpx; margin-left: 22rpx;
} }
.ml-19 {
margin-left: 38rpx; .ml-3 {
} margin-left: 6rpx;
.mt-11 { }
margin-top: 22rpx;
} .ml-19 {
.ml-5 { margin-left: 38rpx;
margin-left: 10rpx; }
}
.mt-3 { .mt-11 {
margin-top: 6rpx; margin-top: 22rpx;
} }
.page {
background-color: #e6f5e8; .ml-5 {
mix-blend-mode: NOTTHROUGH; margin-left: 10rpx;
width: 100%; }
overflow-y: auto;
overflow-x: hidden; .mt-3 {
height: 100%; margin-top: 6rpx;
padding-bottom: 20rpx; }
.group { .page {
.section { background-color: #e6f5e8;
padding: 48rpx 28rpx 220rpx; mix-blend-mode: NOTTHROUGH;
background-image: url('/static/images/codefun/1086a098c06f7f52e77bd7a646747a13.png'); width: 100%;
background-size: 100% 100%; overflow-y: auto;
background-repeat: no-repeat; overflow-x: hidden;
.group_2 { height: 100%;
padding-left: 16rpx; padding-bottom: 20rpx;
.image {
border-radius: 64rpx; .group {
width: 108rpx; .section {
height: 42rpx; padding: 48rpx 28rpx 220rpx;
} background-image: url('/static/images/codefun/1086a098c06f7f52e77bd7a646747a13.png');
.image_2 { background-size: 100% 100%;
mix-blend-mode: NOTTHROUGH; background-repeat: no-repeat;
width: 34rpx;
height: 22rpx; .group_2 {
} padding-left: 16rpx;
.image_3 {
mix-blend-mode: NOTTHROUGH; .image {
width: 30rpx; border-radius: 64rpx;
height: 22rpx; width: 108rpx;
} height: 42rpx;
.image_4 {
width: 48rpx;
height: 22rpx;
}
} }
.text {
margin-left: 5.3rpx; .image_2 {
margin-top: 37.62rpx; mix-blend-mode: NOTTHROUGH;
color: #ffffffe6; width: 34rpx;
font-size: 36rpx; height: 22rpx;
line-height: 33.58rpx;
letter-spacing: 4.32rpx;
font-family: meixin;
} }
.section_2 {
margin-top: 25.8rpx; .image_3 {
padding: 14rpx 18rpx 16rpx;
background-color: #ffffff4d;
border-radius: 1998rpx;
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
border: solid 1rpx #ffffff7d; width: 30rpx;
.text_2 { height: 22rpx;
line-height: 25.5rpx; }
}
.image_4 {
width: 48rpx;
height: 22rpx;
} }
} }
.group_3 {
margin-top: -188rpx; .text {
padding-left: 28rpx; margin-left: 5.3rpx;
.group_4 { margin-top: 37.62rpx;
// height: 864rpx; color: #ffffffe6;
.section_3 { font-size: 36rpx;
margin-right: 28rpx; line-height: 33.58rpx;
padding: 20rpx 28rpx 58rpx; letter-spacing: 4.32rpx;
background-image: linear-gradient(180deg, #dcfce7 0%, #f8fef9 100%); font-family: meixin;
border-radius: 16rpx; }
mix-blend-mode: NOTTHROUGH;
.text-wrapper { .section_2 {
padding: 7.6rpx 0 6.76rpx; margin-top: 25.8rpx;
overflow: hidden; padding: 14rpx 18rpx 16rpx;
width: 56rpx; background-color: #ffffff4d;
height: 40rpx; border-radius: 1998rpx;
.text_4 { mix-blend-mode: NOTTHROUGH;
color: #5db66f; border: solid 1rpx #ffffff7d;
line-height: 25.64rpx;
} .text_2 {
line-height: 25.5rpx;
}
}
}
.group_3 {
margin-top: -188rpx;
padding-left: 28rpx;
.group_4 {
// height: 864rpx;
.section_3 {
margin-right: 28rpx;
padding: 20rpx 28rpx 58rpx;
background-image: linear-gradient(180deg, #dcfce7 0%, #f8fef9 100%);
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
.text-wrapper {
padding: 7.6rpx 0 6.76rpx;
overflow: hidden;
width: 56rpx;
height: 40rpx;
.text_4 {
color: #5db66f;
line-height: 25.64rpx;
} }
.image_6 { }
width: 16rpx;
height: 10rpx; .image_6 {
width: 16rpx;
height: 10rpx;
}
.text-wrapper_2 {
overflow: hidden;
width: 140rpx;
height: 40rpx;
.text_3 {
margin-left: 9.28rpx;
color: #5db66f;
font-size: 24rpx;
line-height: 40rpx;
width: 164rpx;
} }
.text-wrapper_2 { }
overflow: hidden;
width: 140rpx; .group_5 {
height: 40rpx; margin-top: 16rpx;
.text_3 {
margin-left: 9.28rpx; .group_8 {
color: #5db66f; margin: 4rpx 0;
font-size: 24rpx; flex: 1 1 300.68rpx;
line-height: 40rpx;
width: 164rpx; .image_8 {
mix-blend-mode: NOTTHROUGH;
width: 112rpx;
height: 112rpx;
}
.text_5 {
color: #06280b;
font-size: 48rpx;
line-height: 34.28rpx;
}
.text_8 {
color: #555555;
line-height: 26.88rpx;
} }
} }
.group_5 {
margin-top: 16rpx; .group_6 {
.group_8 { flex: 1 1 300.68rpx;
margin: 4rpx 0;
flex: 1 1 300.68rpx; .group_7 {
.image_8 { padding: 0 8rpx;
mix-blend-mode: NOTTHROUGH;
width: 112rpx; .image_9 {
height: 112rpx; margin-top: 4rpx;
} width: 54rpx;
.text_5 { height: 42rpx;
color: #06280b;
font-size: 48rpx;
line-height: 34.28rpx;
} }
.text_8 {
color: #555555; .image_7 {
line-height: 26.88rpx; margin-right: 4rpx;
margin-bottom: 4rpx;
width: 56rpx;
height: 42rpx;
} }
} }
.group_6 {
flex: 1 1 300.68rpx; .group_9 {
.group_7 { margin-top: 10rpx;
padding: 0 8rpx; padding: 0 12rpx;
.image_9 {
margin-top: 4rpx; .text-wrapper_9 {
width: 54rpx; padding: 6.8rpx 0 4.6rpx;
height: 42rpx;
}
.image_7 {
margin-right: 4rpx;
margin-bottom: 4rpx;
width: 56rpx;
height: 42rpx;
}
}
.group_9 {
margin-top: 10rpx;
padding: 0 12rpx;
.text-wrapper_9 {
padding: 6.8rpx 0 4.6rpx;
overflow: hidden;
width: 48rpx;
height: 32rpx;
.text_6 {
line-height: 20.6rpx;
}
}
.text-wrapper_3 {
padding: 6.54rpx 0 4.92rpx;
overflow: hidden;
width: 48rpx;
height: 32rpx;
.text_52 {
line-height: 20.54rpx;
}
}
.font_3 {
font-size: 24rpx;
line-height: 22.04rpx;
color: #6b7280;
}
.text_7 {
margin-right: 9rpx;
line-height: 20.54rpx;
}
}
.text-wrapper_4 {
padding: 7.84rpx 0 7.02rpx;
overflow: hidden; overflow: hidden;
width: 76rpx; width: 48rpx;
height: 32rpx; height: 32rpx;
.text_9 {
line-height: 17.14rpx; .text_6 {
line-height: 20.6rpx;
} }
} }
.text-wrapper_1 {
padding: 7.84rpx 0 6.98rpx; .text-wrapper_3 {
padding: 6.54rpx 0 4.92rpx;
overflow: hidden; overflow: hidden;
width: 76rpx; width: 48rpx;
height: 32rpx; height: 32rpx;
.text_10 {
line-height: 17.18rpx; .text_52 {
line-height: 20.54rpx;
} }
} }
.font_3 {
font-size: 24rpx;
line-height: 22.04rpx;
color: #6b7280;
}
.text_7 {
margin-right: 9rpx;
line-height: 20.54rpx;
}
} }
}
.section_4 { .text-wrapper_4 {
margin-top: 30rpx; padding: 7.84rpx 0 7.02rpx;
padding: 10rpx 20rpx; overflow: hidden;
background-color: #fb81461f; width: 76rpx;
border-radius: 12rpx; height: 32rpx;
mix-blend-mode: NOTTHROUGH;
.image_10 { .text_9 {
width: 40rpx; line-height: 17.14rpx;
height: 40rpx; }
} }
.text-wrapper_5 {
margin-right: 180rpx; .text-wrapper_1 {
width: 90%; padding: 7.84rpx 0 6.98rpx;
height: 40rpx; overflow: hidden;
.text_12 { width: 76rpx;
margin-left: 2.3rpx; height: 32rpx;
margin-right: 13.7rpx;
font-size: 28rpx; .text_10 {
line-height: 40rpx; line-height: 17.18rpx;
overflow: hidden;
text-overflow: ellipsis; /* 超出以 ...显示 */
display: -webkit-box;
-webkit-line-clamp: 1; /* // 显示1行 */
-webkit-box-orient: vertical;
color: #ff612c;
} }
} }
} }
} }
.section_5 {
margin-right: 28rpx; .section_4 {
margin-top: -34rpx; margin-top: 30rpx;
padding: 30rpx 0 40.76rpx; padding: 10rpx 20rpx;
background-color: #ffffff; background-color: #fb81461f;
border-radius: 16rpx; border-radius: 12rpx;
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
.image_11 {
border-radius: 88rpx; .image_10 {
width: 96rpx; width: 40rpx;
height: 96rpx; height: 40rpx;
}
.group_10 {
flex: 1 1 173.5rpx;
.text_50 {
line-height: 25.76rpx;
}
.text_13 {
line-height: 24.58rpx;
}
.text_51 {
line-height: 25.78rpx;
}
}
.group_43 {
padding-bottom: 10rpx;
}
.group_42 {
padding-bottom: 10rpx;
}
.group_37 {
padding-bottom: 10.06rpx;
}
.group_40 {
padding-bottom: 10.06rpx;
} }
.group_11 {
padding-left: 31.3rpx; .text-wrapper_5 {
padding-right: 25.86rpx; margin-right: 180rpx;
.group_38 { width: 90%;
padding: 0 9.7rpx; height: 40rpx;
.image_12 {
border-radius: 88rpx; .text_12 {
mix-blend-mode: NOTTHROUGH; margin-left: 2.3rpx;
width: 88rpx; margin-right: 13.7rpx;
height: 88rpx; font-size: 28rpx;
} line-height: 40rpx;
} overflow: hidden;
.text_14 { text-overflow: ellipsis;
line-height: 25.62rpx; /* 超出以 ...显示 */
} display: -webkit-box;
.text_15 { -webkit-line-clamp: 1;
line-height: 25.76rpx; /* // 显示1行 */
} -webkit-box-orient: vertical;
.text_16 { color: #ff612c;
line-height: 25.78rpx;
} }
} }
} }
.font_2 { }
font-size: 28rpx;
line-height: 25.7rpx; .section_5 {
color: #1d2129; margin-right: 28rpx;
margin-top: -34rpx;
padding: 30rpx 0 40.76rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
.image_11 {
border-radius: 88rpx;
width: 96rpx;
height: 96rpx;
} }
.section_6 {
margin-right: 28rpx; .group_10 {
margin-top: 24rpx; flex: 1 1 173.5rpx;
padding: 18rpx 18rpx 12.32rpx 22.78rpx;
background-color: #ffffff; .text_50 {
border-radius: 16rpx; line-height: 25.76rpx;
mix-blend-mode: NOTTHROUGH;
.font_5 {
font-size: 28rpx;
line-height: 44rpx;
color: #5db66f;
}
.text_17 {
font-size: 30rpx;
font-family: alimamashuheiti;
}
.text_18 {
color: #000000;
line-height: 26.16rpx;
}
.text_19 {
font-size: 30rpx;
font-family: alimamashuheiti;
} }
.text_21 {
line-height: 17.18rpx; .text_13 {
line-height: 24.58rpx;
} }
.image_13 {
border-radius: 16rpx; .text_51 {
mix-blend-mode: NOTTHROUGH; line-height: 25.78rpx;
width: 32rpx;
height: 32rpx;
} }
} }
.font_4 {
font-size: 20rpx; .group_43 {
line-height: 18.3rpx; padding-bottom: 10rpx;
color: #000000;
} }
}
.section_7 { .group_42 {
margin-right: 8rpx; padding-bottom: 10rpx;
background-color: #00000000;
width: 24rpx;
height: 24rpx;
}
.group_12 {
margin-top: 17.72rpx;
.text_22 {
margin-right: 30.72rpx;
color: #33333399;
line-height: 22.16rpx;
} }
}
.equal-division { .group_37 {
margin-right: 28rpx; padding-bottom: 10.06rpx;
margin-top: 32.72rpx; }
.group_13 {
flex: 0 0 33.33%; .group_40 {
text-align: center; padding-bottom: 10.06rpx;
.group_41 { }
padding: 10rpx 0 4.92rpx;
width: 106rpx; .group_11 {
} padding-left: 31.3rpx;
.section_10 { padding-right: 25.86rpx;
margin: 24rpx 0 0 0;
padding: 0 14rpx; .group_38 {
background-color: #da14141a; padding: 0 9.7rpx;
border-radius: 1998rpx;
mix-blend-mode: NOTTHROUGH; .image_12 {
} border-radius: 88rpx;
.text-wrapper_6 { mix-blend-mode: NOTTHROUGH;
margin-top: 40rpx; width: 88rpx;
padding: 17.3rpx 0 16.66rpx; height: 88rpx;
background-color: #5db66f29;
border-radius: 1998rpx;
mix-blend-mode: NOTTHROUGH;
.font_11 {
font-size: 24rpx;
line-height: 22.04rpx;
color: #16a34a;
}
}
.group_20 {
padding: 10rpx 0 4.92rpx;
width: 100rpx;
}
.font_8 {
font-size: 28rpx;
line-height: 72rpx;
color: #333333;
}
.text_23 {
width: 100%;
}
.font_9 {
font-size: 36rpx;
line-height: 25.7rpx;
color: #f26464;
}
.group_1 {
padding: 10rpx 0 4.92rpx;
// width: 106rpx;
.text_24 {
color: #5db66f;
} }
} }
.section_11 {
margin: 24rpx 0 0 0; .text_14 {
padding: 0 14rpx; line-height: 25.62rpx;
background-color: rgba(93, 182, 111, 0.2);
border-radius: 1998rpx;
mix-blend-mode: NOTTHROUGH;
.text_26 {
color: #5db66f;
padding-left: 10rpx;
}
} }
.image_14 {
mix-blend-mode: NOTTHROUGH; .text_15 {
width: 28rpx; line-height: 25.76rpx;
height: 16rpx;
margin: 0 8rpx;
} }
.font_10 {
font-size: 20rpx; .text_16 {
line-height: 56rpx; line-height: 25.78rpx;
color: #f44336;
} }
} }
.group_17 {
padding: 0 31.34rpx 12rpx 32rpx;
}
.section_9 {
flex-shrink: 0;
margin: 10.62rpx 0 10rpx;
}
.horiz-divider {
background-color: #fafafa;
width: 2rpx;
height: 288rpx;
}
.group_39 {
padding: 0 30.66rpx 12rpx 32.66rpx;
}
.group_21 {
padding: 0 30rpx 12rpx 33.34rpx;
}
} }
.section_8 {
padding: 15.38rpx 0 12rpx; .font_2 {
font-size: 28rpx;
line-height: 25.7rpx;
color: #1d2129;
}
.section_6 {
margin-right: 28rpx;
margin-top: 24rpx;
padding: 18rpx 18rpx 12.32rpx 22.78rpx;
background-color: #ffffff; background-color: #ffffff;
border-radius: 16rpx; border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
overflow: scroll;
} .font_5 {
.group_15 { font-size: 28rpx;
margin-top: 41.54rpx; line-height: 44rpx;
.text_28 { color: #5db66f;
line-height: 29.56rpx; }
.text_17 {
font-size: 30rpx;
font-family: alimamashuheiti;
}
.text_18 {
color: #000000;
line-height: 26.16rpx;
} }
.text_29 {
margin-right: 24.44rpx; .text_19 {
font-size: 30rpx;
font-family: alimamashuheiti;
}
.text_21 {
line-height: 17.18rpx;
}
.image_13 {
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
width: 32rpx;
height: 32rpx;
} }
} }
.font_7 {
font-size: 24rpx; .font_4 {
line-height: 22.04rpx; font-size: 20rpx;
line-height: 18.3rpx;
color: #000000; color: #000000;
} }
.text_20 { }
opacity: 0.6;
.section_7 {
margin-right: 8rpx;
background-color: #00000000;
width: 24rpx;
height: 24rpx;
}
.group_12 {
margin-top: 17.72rpx;
.text_22 {
margin-right: 30.72rpx;
color: #33333399;
line-height: 22.16rpx;
} }
.equal-division_2 { }
margin-top: 32.9rpx;
.section_12 { .equal-division {
flex: 0 0 calc(33.33% - 14rpx); margin-right: 28rpx;
.group_25 { margin-top: 32.72rpx;
padding: 5.24rpx 0 4.8rpx;
.pos_4 { .group_13 {
position: absolute; flex: 0 0 33.33%;
left: 0; text-align: center;
top: 50%;
transform: translateY(-50%); .group_41 {
} padding: 10rpx 0 4.92rpx;
.text_30 { width: 106rpx;
line-height: 21.96rpx; }
}
} .section_10 {
.group_28 { margin: 24rpx 0 0 0;
margin-left: 5.82rpx; padding: 0 14rpx;
line-height: 26.88rpx; background-color: #da14141a;
.text_47 { border-radius: 1998rpx;
line-height: 26.88rpx; mix-blend-mode: NOTTHROUGH;
} }
.text_49 {
line-height: 21.62rpx; .text-wrapper_6 {
} margin-top: 40rpx;
} padding: 17.3rpx 0 16.66rpx;
.group_26 { background-color: #5db66f29;
padding: 5.2rpx 0 4.72rpx; border-radius: 1998rpx;
.pos_5 { mix-blend-mode: NOTTHROUGH;
position: absolute;
left: 0; .font_11 {
top: 50%;
transform: translateY(-50%);
}
.text_1 {
line-height: 22.08rpx;
}
}
.font_13 {
font-size: 24rpx; font-size: 24rpx;
line-height: 22.04rpx; line-height: 22.04rpx;
color: #666666; color: #16a34a;
} }
.group_18 { }
margin-left: 5.24rpx;
line-height: 22.84rpx; .group_20 {
.text_48 { padding: 10rpx 0 4.92rpx;
line-height: 22.84rpx; width: 100rpx;
} }
}
.group_27 { .font_8 {
padding: 5.3rpx 0 4.52rpx; font-size: 28rpx;
.text_46 { line-height: 72rpx;
line-height: 22.18rpx; color: #333333;
} }
}
.group_30 { .text_23 {
margin-left: 7.24rpx; width: 100%;
line-height: 22.84rpx; }
.text_37 {
line-height: 22.84rpx; .font_9 {
} font-size: 36rpx;
.text_31 { line-height: 25.7rpx;
line-height: 21.46rpx; color: #f26464;
} }
.group_1 {
padding: 10rpx 0 4.92rpx;
// width: 106rpx;
.text_24 {
color: #5db66f;
} }
} }
.section_18 {
padding: 32rpx 20rpx 38rpx; .section_11 {
background-color: #ffffff; margin: 24rpx 0 0 0;
border-radius: 8rpx; padding: 0 14rpx;
background-color: rgba(93, 182, 111, 0.2);
border-radius: 1998rpx;
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
height: 150rpx;
.text_26 {
color: #5db66f;
padding-left: 10rpx;
}
} }
.section_1 {
padding: 32rpx 22rpx 39.98rpx; .image_14 {
background-color: #ffffff;
border-radius: 8rpx;
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
height: 150rpx; width: 28rpx;
height: 16rpx;
margin: 0 8rpx;
} }
.section_19 {
padding: 32rpx 20rpx 40.4rpx; .font_10 {
background-color: #ffffff; font-size: 20rpx;
border-radius: 8rpx; line-height: 56rpx;
mix-blend-mode: NOTTHROUGH; color: #f44336;
height: 150rpx;
} }
} }
.group_16 {
flex-wrap: wrap; .group_17 {
gap: 20rpx; padding: 0 31.34rpx 12rpx 32rpx;
justify-content: center;
align-items: center;
margin-right: 10px;
} }
.font_12 {
font-size: 32rpx; .section_9 {
line-height: 22.04rpx; flex-shrink: 0;
color: #000000; margin: 10.62rpx 0 10rpx;
} }
.group_19 {
margin-top: 38rpx; .horiz-divider {
.text_32 { background-color: #fafafa;
line-height: 29.48rpx; width: 2rpx;
} height: 288rpx;
.text_33 { }
margin-right: 25.48rpx;
color: #5db66f; .group_39 {
line-height: 21.86rpx; padding: 0 30.66rpx 12rpx 32.66rpx;
}
} }
.font_6 {
font-size: 32rpx; .group_21 {
padding: 0 30rpx 12rpx 33.34rpx;
}
}
.section_8 {
padding: 15.38rpx 0 12rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
overflow: scroll;
}
.group_15 {
margin-top: 41.54rpx;
.text_28 {
line-height: 29.56rpx; line-height: 29.56rpx;
color: #333333;
} }
.section_13 {
position: relative;
margin-right: 28rpx;
margin-top: 32.86rpx;
height: 418rpx;
// padding: 271.06rpx 36.64rpx 22rpx 48rpx;
padding: 20rpx;
padding-bottom: 0;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
// background-image: url('/static/images/codefun/de7f2f0177d74c2b9c784b3825ea9832.png');
// background-size: 94%;
// background-repeat: no-repeat;
// background-position-x: 20rpx;
// background-position-y: 20rpx;
.fui-banner__item {
height: 358rpx;
border-radius: 20rpx;
}
.fui-banner__wrap { .text_29 {
height: 358rpx; margin-right: 24.44rpx;
}
}
.font_7 {
font-size: 24rpx;
line-height: 22.04rpx;
color: #000000;
}
:deep(.uni-video-cover) { .text_20 {
.uni-video-cover-play-button { opacity: 0.6;
width: 70rpx; }
height: 70rpx;
line-height: 40rpx; .equal-division_2 {
font-size: 56rpx; margin-top: 32.9rpx;
}
.section_12 {
flex: 0 0 calc(33.33% - 14rpx);
.group_25 {
padding: 5.24rpx 0 4.8rpx;
.pos_4 {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.text_30 {
line-height: 21.96rpx;
} }
} }
.describe {
width: 88%;
position: absolute;
bottom: 52rpx;
left: 40rpx;
}
.text_34 { .group_28 {
line-height: 26.58rpx; margin-left: 5.82rpx;
line-height: 26.88rpx;
.text_47 {
line-height: 26.88rpx;
}
.text_49 {
line-height: 21.62rpx;
}
} }
.image_15 {
mix-blend-mode: NOTTHROUGH; .group_26 {
border-radius: 50%; padding: 5.2rpx 0 4.72rpx;
width: 48rpx;
height: 48rpx; .pos_5 {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.text_1 {
line-height: 22.08rpx;
}
} }
.font_14 {
.font_13 {
font-size: 24rpx; font-size: 24rpx;
line-height: 22.04rpx; line-height: 22.04rpx;
color: #ffffff; color: #666666;
}
.text_35 {
line-height: 21.76rpx;
}
.text_36 {
line-height: 23.04rpx;
} }
.section_14 {
background-color: #5db66f; .group_18 {
border-radius: 12rpx; margin-left: 5.24rpx;
mix-blend-mode: NOTTHROUGH; line-height: 22.84rpx;
width: 40rpx;
height: 12rpx; .text_48 {
line-height: 22.84rpx;
}
} }
.image-wrapper {
width: 40rpx; .group_27 {
.image_16 { padding: 5.3rpx 0 4.52rpx;
width: 40rpx;
height: 12rpx; .text_46 {
line-height: 22.18rpx;
} }
} }
.section_15 {
background-color: #5db66f33; .group_30 {
mix-blend-mode: NOTTHROUGH; margin-left: 7.24rpx;
border-radius: 50%; line-height: 22.84rpx;
width: 12rpx;
height: 12rpx; .text_37 {
line-height: 22.84rpx;
}
.text_31 {
line-height: 21.46rpx;
}
} }
} }
.section_18 {
padding: 32rpx 20rpx 38rpx;
background-color: #ffffff;
border-radius: 8rpx;
mix-blend-mode: NOTTHROUGH;
height: 150rpx;
}
.section_1 {
padding: 32rpx 22rpx 39.98rpx;
background-color: #ffffff;
border-radius: 8rpx;
mix-blend-mode: NOTTHROUGH;
height: 150rpx;
}
.section_19 {
padding: 32rpx 20rpx 40.4rpx;
background-color: #ffffff;
border-radius: 8rpx;
mix-blend-mode: NOTTHROUGH;
height: 150rpx;
}
}
.group_16 {
flex-wrap: wrap;
gap: 20rpx;
justify-content: center;
align-items: center;
margin-right: 10px;
} }
.font {
font-size: 28rpx; .font_12 {
line-height: 25.7rpx; font-size: 32rpx;
color: #ffffff; line-height: 22.04rpx;
color: #000000;
} }
}
.equal-division_3 { .group_19 {
padding: 10rpx 7.98rpx 15.66rpx 7.98rpx; margin-top: 38rpx;
background-color: #ffffff;
mix-blend-mode: NOTTHROUGH; .text_32 {
border-top: solid 1rpx #e7e7e7; line-height: 29.48rpx;
.group_22 {
flex: 1 1 146.82rpx;
.font_15 {
font-size: 20rpx;
line-height: 18.3rpx;
color: #666666;
}
.text_44 {
line-height: 18.4rpx;
} }
.text_45 {
line-height: 18.48rpx; .text_33 {
margin-right: 25.48rpx;
color: #5db66f;
line-height: 21.86rpx;
} }
} }
.group_32 {
padding: 12rpx 0 11.68rpx; .font_6 {
font-size: 32rpx;
line-height: 29.56rpx;
color: #333333;
} }
.group_33 {
padding: 12rpx 0 10rpx; .section_13 {
position: relative;
margin-right: 28rpx;
margin-top: 32.86rpx;
height: 418rpx;
// padding: 271.06rpx 36.64rpx 22rpx 48rpx;
padding: 20rpx;
padding-bottom: 0;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
// background-image: url('/static/images/codefun/de7f2f0177d74c2b9c784b3825ea9832.png');
// background-size: 94%;
// background-repeat: no-repeat;
// background-position-x: 20rpx;
// background-position-y: 20rpx;
.fui-banner__item {
height: 358rpx;
border-radius: 20rpx;
}
.fui-banner__wrap {
height: 358rpx;
:deep(.uni-video-cover) {
.uni-video-cover-play-button {
width: 70rpx;
height: 70rpx;
line-height: 40rpx;
font-size: 56rpx;
}
}
}
.describe {
width: 88%;
position: absolute;
bottom: 52rpx;
left: 40rpx;
}
.text_34 {
line-height: 26.58rpx;
}
.image_15 {
mix-blend-mode: NOTTHROUGH;
border-radius: 50%;
width: 48rpx;
height: 48rpx;
}
.font_14 {
font-size: 24rpx;
line-height: 22.04rpx;
color: #ffffff;
}
.text_35 {
line-height: 21.76rpx;
}
.text_36 {
line-height: 23.04rpx;
}
.section_14 {
background-color: #5db66f;
border-radius: 12rpx;
mix-blend-mode: NOTTHROUGH;
width: 40rpx;
height: 12rpx;
}
.image-wrapper {
width: 40rpx;
.image_16 {
width: 40rpx;
height: 12rpx;
}
}
.section_15 {
background-color: #5db66f33;
mix-blend-mode: NOTTHROUGH;
border-radius: 50%;
width: 12rpx;
height: 12rpx;
}
} }
.group_34 { }
padding: 12rpx 0 11.48rpx;
.font {
font-size: 28rpx;
line-height: 25.7rpx;
color: #ffffff;
}
}
.equal-division_3 {
padding: 10rpx 7.98rpx 15.66rpx 7.98rpx;
background-color: #ffffff;
mix-blend-mode: NOTTHROUGH;
border-top: solid 1rpx #e7e7e7;
.group_22 {
flex: 1 1 146.82rpx;
.font_15 {
font-size: 20rpx;
line-height: 18.3rpx;
color: #666666;
} }
.group_35 {
padding: 12rpx 0 11.38rpx; .text_44 {
line-height: 18.4rpx;
} }
.group_36 {
padding: 12rpx 0 11.84rpx; .text_45 {
line-height: 18.48rpx;
} }
} }
.image_5 {
width: 32rpx; .group_32 {
height: 32rpx; padding: 12rpx 0 11.68rpx;
}
.group_33 {
padding: 12rpx 0 10rpx;
}
.group_34 {
padding: 12rpx 0 11.48rpx;
}
.group_35 {
padding: 12rpx 0 11.38rpx;
} }
.group_36 {
padding: 12rpx 0 11.84rpx;
}
}
.image_5 {
width: 32rpx;
height: 32rpx;
} }
}
</style> </style>
src/pages/wode/wode.vue
...@@ -59,7 +59,7 @@ const pageData = reactive({ ...@@ -59,7 +59,7 @@ const pageData = reactive({
status: '离线可用', status: '离线可用',
statusClass: 'text_14', statusClass: 'text_14',
arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png', arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
url: '' url: '/pages/resource/resource'
}, },
{ {
id: 2, id: 2,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论