Skip to content

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

按需修改样式

上级 25740bd7
正在显示 包含 669 行增加 和 725 行删除
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
src/androidPrivacy.json
{ {
"prompt": "template" "prompt" : "template"
} }
src/common/public.less
...@@ -35,3 +35,15 @@ ...@@ -35,3 +35,15 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.fontsize_28{
font-size: 28rpx;
font-weight: 500;
color: #333333;
}
.fontsize_24{
font-size: 24rpx;
font-weight: 400;
}
.align-center{
align-items: center;
}
src/components/Map/Mapbox/hook.ts
...@@ -187,13 +187,22 @@ export function flyTo( ...@@ -187,13 +187,22 @@ export function flyTo(
map: MapboxInstance, map: MapboxInstance,
center: [number, number] = DEFAULT_MAP_CENTER, center: [number, number] = DEFAULT_MAP_CENTER,
zoom: number = DEFAULT_MAP_ZOOM, zoom: number = DEFAULT_MAP_ZOOM,
duration?: number,
) { ) {
map.flyTo({ const flyOptions: any = {
center, center,
zoom, zoom,
speed: 0.2,
essential: true, essential: true,
}) }
// 如果提供了时长，使用 duration 参数
if (duration !== undefined) {
flyOptions.duration = duration * 1000 // 转换为毫秒
} else {
flyOptions.speed = 0.2
}
map.flyTo(flyOptions)
} }
/** /**
......
src/components/Map/Mapbox/index.ts
...@@ -39,13 +39,13 @@ export const defaultStyle: mapboxgl.Style = { ...@@ -39,13 +39,13 @@ export const defaultStyle: mapboxgl.Style = {
sprite: `${host}/api/sprites/drainage/sprite`, sprite: `${host}/api/sprites/drainage/sprite`,
glyphs: `${host}/api/fonts/{fontstack}/{range}.pbf`, glyphs: `${host}/api/fonts/{fontstack}/{range}.pbf`,
sources: { sources: {
'wms-img_w-source': { 'wms-cia_w-source': {
type: 'raster', type: 'raster',
tiles: [buildTdtTileUrl('img', tk)], tiles: [buildTdtTileUrl('cia', tk)],
tileSize: 256, tileSize: 256,
maxzoom: 18, maxzoom: 18,
}, },
'wms-cia_w-source': { 'wms-img_w-source': {
type: 'raster', type: 'raster',
tiles: [buildTdtTileUrl('cia', tk)], tiles: [buildTdtTileUrl('cia', tk)],
tileSize: 256, tileSize: 256,
...@@ -58,20 +58,20 @@ export const defaultStyle: mapboxgl.Style = { ...@@ -58,20 +58,20 @@ export const defaultStyle: mapboxgl.Style = {
id: 'background', id: 'background',
type: 'background', type: 'background',
layout: { visibility: 'visible' }, layout: { visibility: 'visible' },
paint: { 'background-color': '#FFFFFF' }, paint: { 'background-color': '#EFF3FA' },
}, },
// 默认图层 - 影像底图 // 默认图层 - 标注底图
{ {
id: 'wms-img_w-layer', id: 'wms-cia_w-layer',
type: 'raster', type: 'raster',
source: 'wms-img_w-source', source: 'wms-cia_w-source',
layout: { visibility: 'visible' }, layout: { visibility: 'visible' },
}, },
// 默认图层 - 标注底图 // 默认图层 - 影像底图
{ {
id: 'wms-cia_w-layer', id: 'wms-img_w-layer',
type: 'raster', type: 'raster',
source: 'wms-cia_w-source', source: 'wms-img_w-source',
layout: { visibility: 'visible' }, layout: { visibility: 'visible' },
}, },
// 天空图层 // 天空图层
......
src/components/Map/Mapbox/mapbox.module.js
...@@ -100,7 +100,7 @@ export default { ...@@ -100,7 +100,7 @@ export default {
if (this.map && this.map.remove) { if (this.map && this.map.remove) {
this.map.remove() this.map.remove()
} }
console.log(123123, merge(defaultStyle, options?.style))
// [107.570282, 19.474339], // [107.570282, 19.474339],
// [115.629717, 34.466859], // [115.629717, 34.466859],
......
src/pages/common/feedback/index.vue
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
</view> </view>
<text class="text-black">联系方式<text class="text-grey">(选填)</text> </text> <text class="text-black">联系方式<text class="text-grey">(选填)</text> </text>
<input class="feedback-input" v-model="model.mobile" placeholder="请输入您的手机号" /> <input class="feedback-input" type="number" v-model="model.mobile" placeholder="请输入您的手机号" />
<view class="btn"> <view class="btn">
<fui-button <fui-button
:disabled="!model.content || model.loading" :disabled="!model.content || model.loading"
......
src/pages/fuwu/dailijizhang/dailijizhang.vue
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<view class="codefun-mt-12 codefun-flex-col section_4"> <view class="codefun-mt-12 codefun-flex-col section_4">
<text class="codefun-self-start font text_11">郴州市财汇商务咨询有限公司</text> <text class="codefun-self-start font text_11">郴州市财汇商务咨询有限公司</text>
<text class="codefun-self-stretch font_6 text_12"> <text class="codefun-self-stretch font_6 text_12">
州市财汇商务咨询有限公司自2022年成立以来，业务发展迅速，客户群体以政府及公共机构为主。服务涵盖： 郴州市财汇商务咨询有限公司自2022年成立以来，业务发展迅速，客户群体以政府及公共机构为主。服务涵盖：
</text> </text>
<view class="codefun-flex-col codefun-self-stretch group_5"> <view class="codefun-flex-col codefun-self-stretch group_5">
<view class="codefun-flex-row group_6"> <view class="codefun-flex-row group_6">
...@@ -513,6 +513,7 @@ ...@@ -513,6 +513,7 @@
font-family: SourceHanSansCN; font-family: SourceHanSansCN;
line-height: 24rpx; line-height: 24rpx;
color: #666666; color: #666666;
font-weight: 400;
} }
.group_18 { .group_18 {
margin-top: 24rpx; margin-top: 24rpx;
...@@ -566,8 +567,8 @@ ...@@ -566,8 +567,8 @@
.font_8 { .font_8 {
font-size: 28rpx; font-size: 28rpx;
font-family: SourceHanSansCN; font-family: SourceHanSansCN;
line-height: 26.34rpx;
color: #333333; color: #333333;
font-weight: 500;
} }
} }
.font { .font {
......
src/pages/fuwu/fuwu.vue
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
}, },
], ],
// 农机案例 // 品牌策划
machineryCases: [ machineryCases: [
{ {
id: 1, id: 1,
...@@ -181,7 +181,7 @@ ...@@ -181,7 +181,7 @@
}, },
{ {
id: 2, id: 2,
name: '绿鲜农场', name: '山水有机',
image: '/static/images/codefun/8d11e3cbcb918502bb6582a24cddb930.png', image: '/static/images/codefun/8d11e3cbcb918502bb6582a24cddb930.png',
}, },
], ],
...@@ -378,7 +378,7 @@ ...@@ -378,7 +378,7 @@
@click="onMenuItemClick(item)" @click="onMenuItemClick(item)"
> >
<image class="image_7" :src="item.icon_url" /> <image class="image_7" :src="item.icon_url" />
<text class="font_4" :class="`text_${item.id + 2} mt-13`">{{ item.name }}</text> <text class="fontsize_28" :class="`text_${item.id + 2} mt-13`">{{ item.name }}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -476,6 +476,9 @@ ...@@ -476,6 +476,9 @@
> >
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch section_10" class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch section_10"
:style="{
'background-image': `url(${product.image})`,
}"
> >
<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"
...@@ -549,7 +552,7 @@ ...@@ -549,7 +552,7 @@
<view <view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_14" class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_14"
> >
<text class="font_5">一站式解决农机问题</text> <text class="font_5">品牌策划</text>
<!-- <text class="font_6 text_37" @click="onViewAllMachineryCases">全部案例</text> --> <!-- <text class="font_6 text_37" @click="onViewAllMachineryCases">全部案例</text> -->
</view> </view>
<view class="codefun-flex-col codefun-self-stretch section_14"> <view class="codefun-flex-col codefun-self-stretch section_14">
...@@ -1188,7 +1191,7 @@ ...@@ -1188,7 +1191,7 @@
.section_10 { .section_10 {
padding: 20rpx 0 130rpx; padding: 20rpx 0 130rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx; border-radius: 16rpx 16rpx 0rpx 0rpx;
background-image: url('/static/images/codefun/e1d1e83ba1f6592210e646c5b6ca5b53.png'); // background-image: url('/static/images/codefun/e1d1e83ba1f6592210e646c5b6ca5b53.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
......
src/pages/linghuoyonggong/components/yonggongmap.vue
<!-- 农场详情 --> <!-- 农场详情 -->
<script setup lang="ts"> <script setup lang="ts">
import * as turf from '@turf/turf' import * as turf from '@turf/turf'
import type { Page } from './config' import type { Page } from './config'
import Navigate from '@/utils/page/navigate' import Navigate from '@/utils/page/navigate'
import { import {
addDefaultGeoJSONSource, addDefaultGeoJSONSource,
addDefaultSplotLayer, addDefaultSplotLayer,
addDefaultSymbolLayer, addDefaultSymbolLayer,
useMapbox, useMapbox,
} from '@/components/Map/Mapbox/hook' flyTo,
import { getText } from '@/utils/dict/area' } from '@/components/Map/Mapbox/hook'
import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong' import { getText } from '@/utils/dict/area'
import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
// 页面参数 // 页面参数
const page = reactive<Page>({ const page = reactive<Page>({
id: 'example-mapbox', id: 'example-mapbox',
init: false, init: false,
requests: 0, requests: 0,
latest: null, latest: null,
query: {}, query: {},
}) })
const model = reactive({ const model = reactive({
id: '', id: '',
name: '', name: '',
lonlat: `${uni.getStorageSync('location').lon},${uni.getStorageSync('location').lat}`, lonlat: `${uni.getStorageSync('location').lon},${uni.getStorageSync('location').lat}`,
...@@ -50,9 +51,14 @@ ...@@ -50,9 +51,14 @@
loading: false, loading: false,
total: 0, total: 0,
requestDebounce: null, requestDebounce: null,
}) // 用户当前位置
userLocation: {
longitude: uni.getStorageSync('location').lon,
latitude: uni.getStorageSync('location').lat,
},
})
onLoad((options) => { onLoad((options) => {
model.id = options.id model.id = options.id
model.name = decodeURIComponent(options.name) model.name = decodeURIComponent(options.name)
model.search.pageNo = 1 model.search.pageNo = 1
...@@ -60,13 +66,36 @@ ...@@ -60,13 +66,36 @@
model.search.createBy = '' model.search.createBy = ''
model.employmentList = [] model.employmentList = []
getEmploymentList() getEmploymentList()
}) })
// 地图组件 // 地图组件
const center: [number, number] = [uni.getStorageSync('location').lon, uni.getStorageSync('location').lat] const center: [number, number] = [uni.getStorageSync('location').lon, uni.getStorageSync('location').lat]
const [registerMap, map] = useMapbox({ const [registerMap, map] = useMapbox({
style: { center, zoom: 15 }, style: { center, zoom: 12 },
onLoaded: (data) => { onLoaded: (data) => {
// 渲染用户当前位置
const userLocationPoint = turf.point([
model.userLocation.longitude,
model.userLocation.latitude
], {
name: '我的位置',
description: '当前位置',
icon: 'GD',
popup: `我的位置`,
})
addDefaultGeoJSONSource(map, `${page.id}-user-location`, [userLocationPoint])
addDefaultSymbolLayer(map, `${page.id}-user-location`, {
layout: {
'text-field': '',
'icon-image': ['get', 'icon'],
'icon-size': 1.2,
'icon-allow-overlap': true,
},
paint: {
'icon-color': '#FF4444',
},
})
const employments = [] const employments = []
// 渲染设备数据 // 渲染设备数据
model.employmentList.forEach((item) => { model.employmentList.forEach((item) => {
...@@ -97,18 +126,17 @@ ...@@ -97,18 +126,17 @@
onSourceRequestErrorHandle: () => { onSourceRequestErrorHandle: () => {
Message.hideLoading() Message.hideLoading()
}, },
}) })
// 分类标签点击事件
// 分类标签点击事件 function onCategoryTabClick(tab: any) {
function onCategoryTabClick(tab: any) {
model.search.type = tab.id model.search.type = tab.id
model.search.pageNo = 1 model.search.pageNo = 1
model.employmentList = [] model.employmentList = []
getEmploymentList() getEmploymentList()
// 在这里添加具体的分类标签点击逻辑 // 在这里添加具体的分类标签点击逻辑
} }
function getEmploymentList() { function getEmploymentList() {
// 如果正在加载或没有更多数据，直接返回 // 如果正在加载或没有更多数据，直接返回
if (model.loading || (model.total > 0 && model.employmentList.length >= model.total)) { if (model.loading || (model.total > 0 && model.employmentList.length >= model.total)) {
return return
...@@ -150,10 +178,10 @@ ...@@ -150,10 +178,10 @@
model.loading = false model.loading = false
model.requestDebounce = null model.requestDebounce = null
} }
} }
// 获取时间差 // 获取时间差
function getDaysDiff(date1: Date | number | string, date2: Date | number | string): number { function getDaysDiff(date1: Date | number | string, date2: Date | number | string): number {
// 将输入转换为Date对象 // 将输入转换为Date对象
const d1 = new Date(date1) const d1 = new Date(date1)
const d2 = new Date(date2) const d2 = new Date(date2)
...@@ -174,27 +202,88 @@ ...@@ -174,27 +202,88 @@
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
return diffDays return diffDays
}
// 回到当前位置
function backToUserLocation() {
if (map && model.userLocation.longitude && model.userLocation.latitude) {
flyTo(map, [model.userLocation.longitude, model.userLocation.latitude], 15, 0.5)
uni.showToast({
title: '已回到当前位置',
icon: 'none',
duration: 1500
})
} else {
// 重新获取用户位置
uni.getLocation({
type: 'wgs84',
success: (res) => {
if (res.longitude !== 0 && res.latitude !== 0) {
model.userLocation.longitude = res.longitude
model.userLocation.latitude = res.latitude
// 更新缓存位置
uni.setStorageSync('location', {
lon: res.longitude,
lat: res.latitude,
})
// 更新地图上的用户位置标记
const userLocationPoint = turf.point([res.longitude, res.latitude], {
name: '我的位置',
description: '当前位置',
icon: 'user-location-icon',
popup: `我的位置`,
})
addDefaultGeoJSONSource(map, `${page.id}-user-location`, [userLocationPoint])
addDefaultSymbolLayer(map, `${page.id}-user-location`, {
layout: {
'text-field': '',
'icon-image': ['get', 'icon'],
'icon-size': 1.2,
'icon-allow-overlap': true,
},
paint: {
'icon-color': '#FF4444',
},
})
// 飞到用户位置
flyTo(map, [res.longitude, res.latitude], 15, 0.5)
uni.showToast({
title: '已获取并回到当前位置',
icon: 'none',
duration: 1500
})
} }
},
fail: (err) => {
console.error('获取位置失败:', err)
uni.showToast({
title: '获取位置失败，请检查定位权限',
icon: 'none',
duration: 2000
})
}
})
}
}
onNavigationBarButtonTap((e) => { onNavigationBarButtonTap((e) => {
if (e.index === 0) { if (e.index === 0) {
Navigate.to('/pages/linghuoyonggong/linghuoyonggong') Navigate.to('/pages/linghuoyonggong/linghuoyonggong')
} }
}) })
</script> </script>
<template> <template>
<view class="page h-95_dl_5vh bg-#E6F5E8 flex flex-col justify-between"> <view class="page h-95_dl_5vh bg-#E6F5E8 flex flex-col justify-between">
<view class="h-200rpx p-3"> <view class="h-200rpx p-3">
<view class="w-full h-60rpx border-rd-3xl!"> <view class="w-full h-60rpx border-rd-3xl!">
<fui-input <fui-input :bottomLeft="0" class="w-full h-full border-rd-3xl!" borderTop placeholder="请输入搜索内容"
:bottomLeft="0"
class="w-full h-full border-rd-3xl!"
borderTop
placeholder="请输入搜索内容"
placeholderStyle="color: #CCCCCC; font-weight: 400; font-family: PingFangSC-Regular;" placeholderStyle="color: #CCCCCC; font-weight: 400; font-family: PingFangSC-Regular;"
v-model="text" v-model="text">
>
<template #left> <template #left>
<view class="fui-left__icon"> <view class="fui-left__icon">
<fui-icon name="search" color="#CCCCCC" :size="36" /> <fui-icon name="search" color="#CCCCCC" :size="36" />
...@@ -203,13 +292,10 @@ ...@@ -203,13 +292,10 @@
</fui-input> </fui-input>
</view> </view>
<view class="codefun-mt-14 codefun-flex-row group_2 gap-2"> <view class="codefun-mt-14 codefun-flex-row group_2 gap-2">
<view <view v-for="tab in model.categoryTabs" :key="tab.id"
v-for="tab in model.categoryTabs"
:key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center" class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="[tab.id === model.search.type ? 'text-wrapper' : 'text-wrapper_2']" :class="[tab.id === model.search.type ? 'text-wrapper' : 'text-wrapper_2']"
@click="onCategoryTabClick(tab)" @click="onCategoryTabClick(tab)">
>
<text class="font_2 text_2"> <text class="font_2 text_2">
{{ tab.name }} {{ tab.name }}
</text> </text>
...@@ -218,16 +304,26 @@ ...@@ -218,16 +304,26 @@
</view> </view>
<!-- 地图组件 --> <!-- 地图组件 -->
<!-- <view class="h-730 overflow-hidden map-box"> --> <!-- <view class="h-730 overflow-hidden map-box"> -->
<view class="overflow-hidden map-box" style="height: calc(100% - 200rpx)"> <view class="overflow-hidden map-box" style="height: calc(100vh - 200rpx)">
<!-- 地图组件 --> <!-- 地图组件 -->
<Mapbox @register="registerMap" /> <Mapbox @register="registerMap" />
<!-- 回到当前位置按钮 -->
<view class="location-control" @click="backToUserLocation">
<view class="location-button">
<fui-icon name="location" color="#5DB66F" :size="36" />
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
// //
.page { .page {
min-height: 100vh;
background: #E6F5E8;
.map-box { .map-box {
// #ifdef APP-PLUS // #ifdef APP-PLUS
position: relative; position: relative;
...@@ -237,6 +333,10 @@ ...@@ -237,6 +333,10 @@
position: relative; position: relative;
top: 0; top: 0;
// #endif // #endif
width: 690rpx;
left: 30rpx;
border-radius: 20rpx;
background: #E6F5E8;
} }
.group_2 { .group_2 {
...@@ -246,29 +346,71 @@ ...@@ -246,29 +346,71 @@
border-radius: 19998rpx; border-radius: 19998rpx;
line-height: 60rpx; line-height: 60rpx;
height: 60rpx; height: 60rpx;
.text_2 { .text_2 {
color: #ffffff; color: #ffffff;
} }
} }
.text-wrapper_2 { .text-wrapper_2 {
flex: 1 1 120rpx; flex: 1 1 120rpx;
line-height: 60rpx; line-height: 60rpx;
background-color: #ffffff; background-color: #ffffff;
border-radius: 19998rpx; border-radius: 19998rpx;
height: 60rpx; height: 60rpx;
.text_3 { .text_3 {
line-height: 25.88rpx; line-height: 25.88rpx;
} }
.text_4 { .text_4 {
line-height: 26.16rpx; line-height: 26.16rpx;
} }
.text_5 { .text_5 {
line-height: 25.96rpx; line-height: 25.96rpx;
} }
.text_6 { .text_6 {
line-height: 25.68rpx; line-height: 25.68rpx;
} }
} }
} }
// 回到当前位置控制按钮样式
.location-control {
position: absolute;
bottom: 100rpx;
right: 30rpx;
z-index: 1000;
.location-button {
display: flex;
align-items: center;
justify-content: center;
width: 80rpx;
height: 80rpx;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10rpx);
border: 2rpx solid #5DB66F;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
background: linear-gradient(135deg, #5DB66F 0%, #4CAF50 100%);
:deep(.fui-icon) {
color: #FFFFFF !important;
}
}
&:hover {
transform: scale(1.05);
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
}
}
} }
}
</style> </style>
src/pages/login/login.vue
...@@ -308,6 +308,7 @@ ...@@ -308,6 +308,7 @@
v-model="model.form.data.code" v-model="model.form.data.code"
backgroundColor="transparent" backgroundColor="transparent"
borderColor="#DDDDDD" borderColor="#DDDDDD"
type="number"
> >
<template #left> <template #left>
<view class="fui-left__icon mr-2"> <view class="fui-left__icon mr-2">
......
src/pages/news/index.vue
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
@click="toNewsDetail(news)" @click="toNewsDetail(news)"
> >
<view class="flex flex-col justify-between" :style="news.posterUrl ? 'width: 68%' : 'width: 100%'"> <view class="flex flex-col justify-between" :style="news.posterUrl ? 'width: 68%' : 'width: 100%'">
<view class="ellipsis-multiline text-28 color-#333333">{{ news.title }}</view> <view class="ellipsis-multiline fontsize_28 color-#333333">{{ news.title }}</view>
<view class="flex flex-row justify-between text-25 color-#686868"> <view class="flex flex-row justify-between text-25 color-#686868">
<text>{{ dayjs(news.publishDate).format('YYYY年MM月DD日') }}</text> <text>{{ dayjs(news.publishDate).format('YYYY年MM月DD日') }}</text>
<view class="mr-1 flex-center"> <view class="mr-1 flex-center">
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
<view v-show="!news.posterUrl" class="w-4%"></view> <view v-show="!news.posterUrl" class="w-4%"></view>
</view> </view>
</view> </view>
<view v-show="news.posterUrl" class="w-30% h-120"> <view v-show="news.posterUrl" class="w-30% h-130">
<image class="w-full h-full border-rd" :src="news.posterUrl" /> <image class="w-full h-full border-rd" :src="news.posterUrl" />
</view> </view>
</view> </view>
......
src/pages/nongchang/components/WeatherForecast.vue
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
console.log('forecasts', forecasts) console.log('forecasts', forecasts)
// 逐 7 天预报数据 // 逐 7 天预报数据
const _7DayForecastData = forecasts.map((item) => { const _7DayForecastData = forecasts.map((item, index) => {
return { return {
minTem: item.tempMin, minTem: item.tempMin,
maxTem: item.tempMax, maxTem: item.tempMax,
...@@ -28,9 +28,12 @@ ...@@ -28,9 +28,12 @@
textNight: item.textNight, textNight: item.textNight,
dayWeather: item.iconDay, dayWeather: item.iconDay,
nightWeather: item.iconNight, nightWeather: item.iconNight,
fxDate: item.fxDate,
...getDayLabelValue(index),
} }
}) })
const _7DayForecastMaxTemValue = Math.max(..._7DayForecastData.map((item) => Number(item.maxTem))) const _7DayForecastMaxTemValue = Math.max(..._7DayForecastData.map((item) => Number(item.maxTem)))
const _7DayForecastMinTemValue = Math.min(..._7DayForecastData.map((item) => Number(item.minTem)))
// 设置逐 7 天预报图表参数 // 设置逐 7 天预报图表参数
Forecast7Chart.setOption({ Forecast7Chart.setOption({
...@@ -41,15 +44,14 @@ ...@@ -41,15 +44,14 @@
}, },
}, },
grid: { grid: {
top: '38%', top: '25%',
bottom: '3%', bottom: '10%',
left: '0%', left: '0',
right: '0%', right: '3%',
}, },
xAxis: [ xAxis: {
{
type: 'category', type: 'category',
data: [], data: _7DayForecastData.map((item) => item.value),
axisLine: { axisLine: {
show: false, show: false,
}, },
...@@ -57,23 +59,9 @@ ...@@ -57,23 +59,9 @@
show: false, show: false,
}, },
axisLabel: { axisLabel: {
interval: 0, show: false, // 隐藏x轴标签
},
}, },
{
type: 'category',
data: [],
axisLine: {
show: false,
}, },
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
},
},
],
yAxis: { yAxis: {
type: 'value', type: 'value',
splitLine: { splitLine: {
...@@ -85,59 +73,70 @@ ...@@ -85,59 +73,70 @@
}, },
series: [ series: [
{ {
label: { name: '最高温度',
show: true,
position: 'top',
formatter: '{c}°c',
},
type: 'line', type: 'line',
data: _7DayForecastData.map((item) => item.maxTem), data: _7DayForecastData.map((item) => item.maxTem),
smooth: true, smooth: true,
color: '#F79D80', color: '#F79D80',
}, symbolSize: 6,
{
label: { label: {
show: true, show: true,
position: 'bottom', position: 'top',
formatter: '{c}°c', formatter: '{c}°',
color: '#F79D80',
fontSize: 11,
},
}, },
{
name: '最低温度',
type: 'line', type: 'line',
data: _7DayForecastData.map((item) => item.minTem), data: _7DayForecastData.map((item) => item.minTem),
smooth: true, smooth: true,
color: '#1890FF', color: '#52C41A',
symbolSize: 6,
label: {
show: true,
position: 'bottom',
formatter: '{c}°',
color: '#52C41A',
fontSize: 11,
},
}, },
{ {
name: '白天天气',
type: 'scatter', type: 'scatter',
data: _7DayForecastData.map((item, index) => { data: _7DayForecastData.map((item, index) => {
const { label, value } = getDayLabelValue(index) console.log('item', item,[index, Number(_7DayForecastMaxTemValue) + 3])
return { return {
value: [index, Number(_7DayForecastMaxTemValue) + 7, item.textDay], value: [index, Number(_7DayForecastMaxTemValue) + 3],
symbol: `image://${getWeatherIcon(String(item.dayWeather))}`, symbol: `image://${getWeatherIcon(String(item.dayWeather))}`,
symbolSize: [24, 24], symbolSize: [20, 20],
symbolOffset: [0, -35], symbolOffset: [0, -12],
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
formatter: `${label}\n\n${value}\n\n{@[2]}`, formatter: `${item.label}\n${item.value}\n${item.textDay}`,
fontSize: 11,
color: '#333',
fontWeight: 'bold', fontWeight: 'bold',
lineHeight: 18,
}, },
} }
}), }),
}, },
{ {
name: '天气描述',
type: 'scatter', type: 'scatter',
data: _7DayForecastData.map((item, index) => { data: _7DayForecastData.map((item, index) => {
return { return {
value: [index, -7, item.textNight], value: [index, Number(_7DayForecastMinTemValue) - 3],
symbol: `image://${getWeatherIcon(String(item.nightWeather))}`, symbolSize: 0,
symbolSize: [24, 24],
symbolOffset: [0, -20],
label: { label: {
show: true, show: true,
position: 'bottom', position: 'bottom',
formatter: '{@[2]}', formatter: item.textDay,
fontWeight: 'bold', fontSize: 10,
color: '#999',
}, },
} }
}), }),
...@@ -153,7 +152,7 @@ ...@@ -153,7 +152,7 @@
<view class="rain-forecast mt-2rpx bg-#fff rd-1.5 shadow flex flex-col px-2"> <view class="rain-forecast mt-2rpx bg-#fff rd-1.5 shadow flex flex-col px-2">
<view class="flex items-center justify-between pt-3 px-2"> <view class="flex items-center justify-between pt-3 px-2">
<view class="text-32 font-600">{{ model.days }} 天预报</view> <view class="text-32 font-600">{{ model.days }} 天预报</view>
<view class="text-24">发布时间：{{ model.updateTime }}</view> <!-- <view class="text-24">发布时间：{{ model.updateTime }}</view> -->
</view> </view>
<scroll-view class="flex-1" scroll-x="true"> <scroll-view class="flex-1" scroll-x="true">
<Echarts @register="register7Forecast" class="w-1400 h-600" /> <Echarts @register="register7Forecast" class="w-1400 h-600" />
......
src/pages/nongchang/nongchang.vue
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from 'vue' import { reactive } from 'vue'
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app' import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import WeatherForecast from './components/WeatherForecast.vue' import WeatherForecast from './components/WeatherForecast.vue'
import Navigate from '@/utils/page/navigate' import Navigate from '@/utils/page/navigate'
import * as NongChangAPI from '@/api/model/nongchang' import * as NongChangAPI from '@/api/model/nongchang'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import { getList as getVideoList } from '@/api/model/knowledgeVideo' import { getList as getVideoList } from '@/api/model/knowledgeVideo'
const userStore = useUserStore() const userStore = useUserStore()
onShow(() => { onShow(() => {
// 获取金刚区菜单数据 // 获取金刚区菜单数据
getZoomList() getZoomList()
// 获取农业模型数据 // 获取农业模型数据
...@@ -24,18 +24,18 @@ ...@@ -24,18 +24,18 @@
getDeviceList() getDeviceList()
// 获取农村 // 获取农村
getFarmList() getFarmList()
}) })
// 下拉刷新 // 下拉刷新
onPullDownRefresh(() => { onPullDownRefresh(() => {
setTimeout(function () { setTimeout(function () {
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
Message.toast('刷新成功') Message.toast('刷新成功')
}, 1000) }, 1000)
}) })
// 页面数据 // 页面数据
const pageData = reactive({ const pageData = reactive({
// 顶部标题和搜索 // 顶部标题和搜索
header: { header: {
title: '农场', title: '农场',
...@@ -210,9 +210,9 @@ ...@@ -210,9 +210,9 @@
userInfo: { userInfo: {
creditScore: 0, creditScore: 0,
}, },
}) })
function getZoomList() { function getZoomList() {
NongChangAPI.zoneList({ NongChangAPI.zoneList({
pageNo: 1, pageNo: 1,
pageSize: 5, pageSize: 5,
...@@ -222,8 +222,8 @@ ...@@ -222,8 +222,8 @@
const { records } = res const { records } = res
pageData.menuItems = records pageData.menuItems = records
}) })
} }
function getAgricultureModelsList() { function getAgricultureModelsList() {
NongChangAPI.agricultureModelsList({ NongChangAPI.agricultureModelsList({
status: 1, status: 1,
}).then((res) => { }).then((res) => {
...@@ -231,8 +231,8 @@ ...@@ -231,8 +231,8 @@
pageData.agricultureModels = [] pageData.agricultureModels = []
pageData.agricultureModels = records pageData.agricultureModels = records
}) })
} }
function getBaseManagementList() { function getBaseManagementList() {
NongChangAPI.baseManagementList({ NongChangAPI.baseManagementList({
pageNo: 1, pageNo: 1,
pageSize: 5, pageSize: 5,
...@@ -242,8 +242,8 @@ ...@@ -242,8 +242,8 @@
pageData.baseManagement = [] pageData.baseManagement = []
pageData.baseManagement = records pageData.baseManagement = records
}) })
} }
function getCommonToolsList() { function getCommonToolsList() {
NongChangAPI.commonToolsList({ NongChangAPI.commonToolsList({
status: 1, status: 1,
}).then((res) => { }).then((res) => {
...@@ -251,38 +251,38 @@ ...@@ -251,38 +251,38 @@
pageData.commonTools = [] pageData.commonTools = []
pageData.commonTools = records pageData.commonTools = records
}) })
} }
function getAgricultureClassList() { function getAgricultureClassList() {
getVideoList({ pageNo: 1, pageSize: 3, status: 1, classify: 3 }).then((res) => { getVideoList({ pageNo: 1, pageSize: 3, status: 1, classify: 3 }).then((res) => {
const { records } = res const { records } = res
pageData.agricultureClass.videoList = records pageData.agricultureClass.videoList = records
pageData.agricultureClass.title = records[0]?.title pageData.agricultureClass.title = records[0]?.title
}) })
} }
function getDeviceList() { function getDeviceList() {
NongChangAPI.getDeviceList({}).then((res) => { NongChangAPI.getDeviceList({}).then((res) => {
pageData.smartDevices = res.records pageData.smartDevices = res.records
}) })
} }
function getFarmList() { function getFarmList() {
NongChangAPI.AllFarms().then((res) => { NongChangAPI.AllFarms().then((res) => {
if (res) { if (res) {
pageData.hasFarm = JSON.stringify(res) != '{}' pageData.hasFarm = JSON.stringify(res) != '{}'
pageData.farmInfo = res pageData.farmInfo = res
} }
}) })
} }
function toAdd() { function toAdd() {
Navigate.to('/pages/nongchang/create-nongchang-form').catch(() => { Navigate.to('/pages/nongchang/create-nongchang-form').catch(() => {
Message.alert('跳转失败', '添加基地') Message.alert('跳转失败', '添加基地')
}) })
} }
// 菜单点击事件 // 菜单点击事件
function onMenuItemClick(item: any) { function onMenuItemClick(item: any) {
console.log('点击菜单项:', item) console.log('点击菜单项:', item)
// 在这里添加具体的菜单点击逻辑+ // 在这里添加具体的菜单点击逻辑+
...@@ -323,82 +323,82 @@ ...@@ -323,82 +323,82 @@
}) })
} }
} }
} }
// 农业模型点击事件 // 农业模型点击事件
function onAgricultureModelClick(model: any) { function onAgricultureModelClick(model: any) {
console.log('点击农业模型:', model) console.log('点击农业模型:', model)
// 在这里添加具体的农业模型点击逻辑 // 在这里添加具体的农业模型点击逻辑
// 打开模型详情页面 // 打开模型详情页面
Navigate.to('/pages/nongyedamoxing/nongyedamoxing') Navigate.to('/pages/nongyedamoxing/nongyedamoxing')
} }
// 基地管理点击事件 // 基地管理点击事件
function onBaseManagementClick(item: any) { function onBaseManagementClick(item: any) {
console.log('点击基地管理项:', item) console.log('点击基地管理项:', item)
// 在这里添加具体的基地管理点击逻辑 // 在这里添加具体的基地管理点击逻辑
uni.navigateTo({ uni.navigateTo({
url: '/pages/jidiguanli/jidiguanli', url: '/pages/jidiguanli/jidiguanli',
}) })
} }
// 查看更多监测预警 // 查看更多监测预警
function onViewMoreMonitoring() { function onViewMoreMonitoring() {
console.log('查看更多监测预警') console.log('查看更多监测预警')
// 在这里添加具体的查看逻辑 // 在这里添加具体的查看逻辑
} }
// 查看更多常用工具 // 查看更多常用工具
function onViewMoreTools() { function onViewMoreTools() {
console.log('查看更多常用工具') console.log('查看更多常用工具')
// 在这里添加具体的查看逻辑 // 在这里添加具体的查看逻辑
} }
// 设备管理点击事件 // 设备管理点击事件
function onDeviceManagementClick() { function onDeviceManagementClick() {
console.log('设备管理') console.log('设备管理')
// 在这里添加具体的设备管理逻辑 // 在这里添加具体的设备管理逻辑
uni.navigateTo({ uni.navigateTo({
url: '/pages/device/device', url: '/pages/device/device',
}) })
} }
// 灵活用工 // 灵活用工
function onViewMoreFlexibleEmployment(type) { function onViewMoreFlexibleEmployment(type) {
console.log('查看更多灵活用工业务') console.log('查看更多灵活用工业务')
// 在这里添加具体的查看逻辑 // 在这里添加具体的查看逻辑
// 跳转到灵活用工界面 // 跳转到灵活用工界面
Navigate.to(`/pages/linghuoyonggong/linghuoyonggong?type=${type}`) Navigate.to(`/pages/linghuoyonggong/linghuoyonggong?type=${type}`)
} }
// 查看金融服务 // 查看金融服务
function onViewFinancialServices() { function onViewFinancialServices() {
console.log('查看金融服务') console.log('查看金融服务')
// 在这里添加具体的查看逻辑 // 在这里添加具体的查看逻辑
Navigate.to('/pages/zhunongjinrong/zhunongjinrong') Navigate.to('/pages/zhunongjinrong/zhunongjinrong')
} }
// 查看更多农技课堂 // 查看更多农技课堂
function onViewMoreClass() { function onViewMoreClass() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/knowledgeVideo/index?classify=3', url: '/pages/knowledgeVideo/index?classify=3',
}) })
} }
// 点击常用工具 // 点击常用工具
function onClickTool(tool: any) { function onClickTool(tool: any) {
console.log('点击常用工具:', tool) console.log('点击常用工具:', tool)
// 在这里添加具体的常用工具点击逻辑 // 在这里添加具体的常用工具点击逻辑
uni.navigateTo({ uni.navigateTo({
url: `/pages/webview/webview?url=${encodeURIComponent(tool.addr)}`, url: `/pages/webview/webview?url=${encodeURIComponent(tool.addr)}`,
}) })
} }
// 轮播视频切换的时候触发 // 轮播视频切换的时候触发
function handleChangeVideo(e: any) { function handleChangeVideo(e: any) {
const currentIndex = e.detail.current const currentIndex = e.detail.current
pageData.current = currentIndex pageData.current = currentIndex
pageData.agricultureClass.title = pageData.agricultureClass.videoList[currentIndex]?.title pageData.agricultureClass.title = pageData.agricultureClass.videoList[currentIndex]?.title
...@@ -429,21 +429,21 @@ ...@@ -429,21 +429,21 @@
// } // }
// }) // })
// }, 100) // }, 100)
} }
// 处理swiper过渡动画 // 处理swiper过渡动画
function handleTransition(e: any) { function handleTransition(e: any) {
// 过渡期间可以做一些优化处理 // 过渡期间可以做一些优化处理
console.log('swiper过渡中...') console.log('swiper过渡中...')
} }
// 获取视频时长 // 获取视频时长
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) {
try { try {
...@@ -454,35 +454,35 @@ ...@@ -454,35 +454,35 @@
} }
} }
}) })
} }
// 视频暂停事件处理 // 视频暂停事件处理
function handleVideoPause(currentIndex) { function handleVideoPause(currentIndex) {
console.log(`视频${currentIndex}暂停`) console.log(`视频${currentIndex}暂停`)
} }
function playVideo(index) { function playVideo(index) {
const videoContext = uni.createVideoContext(`video${index}`) const videoContext = uni.createVideoContext(`video${index}`)
videoContext.requestFullScreen({ direction: 0 }) videoContext.requestFullScreen({ direction: 0 })
videoContext.play() videoContext.play()
} }
function handleFullscreenChange(e: any, index) { function handleFullscreenChange(e: any, index) {
console.log(`视频${index}全屏状态改变`) console.log(`视频${index}全屏状态改变`)
if (!e.detail.fullScreen) { if (!e.detail.fullScreen) {
const videoContext = uni.createVideoContext(`video${index}`) const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause() videoContext.pause()
} }
} }
function toDetail(item: Recordable) { function toDetail(item: Recordable) {
// Navigate.to(`/pages/nongchang/detail/index?id=${item.id}&name=${encodeURIComponent(item.name)}`) // Navigate.to(`/pages/nongchang/detail/index?id=${item.id}&name=${encodeURIComponent(item.name)}`)
let id = Object.keys(item)[0] let id = Object.keys(item)[0]
let name = Object.values(item)[0] let name = Object.values(item)[0]
Navigate.to(`/pages/nongchang/detail/index?id=${id}&name=${encodeURIComponent(name)}`) Navigate.to(`/pages/nongchang/detail/index?id=${id}&name=${encodeURIComponent(name)}`)
} }
onHide(() => { onHide(() => {
// 停止所有其他视频的播放（只暂停，不重置位置） // 停止所有其他视频的播放（只暂停，不重置位置）
pageData.agricultureClass.videoList.forEach((_, index) => { pageData.agricultureClass.videoList.forEach((_, index) => {
try { try {
...@@ -493,7 +493,7 @@ ...@@ -493,7 +493,7 @@
console.log('停止视频失败:', error) console.log('停止视频失败:', error)
} }
}) })
}) })
</script> </script>
<template> <template>
...@@ -509,12 +509,8 @@ ...@@ -509,12 +509,8 @@
<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>
</view> --> </view> -->
<view class="codefun-flex-row equal-division section_3"> <view class="codefun-flex-row equal-division section_3">
<view <view v-for="item in pageData.menuItems" :key="item.id"
v-for="item in pageData.menuItems" class="codefun-flex-col codefun-items-center" @click="onMenuItemClick(item)">
:key="item.id"
class="codefun-flex-col codefun-items-center"
@click="onMenuItemClick(item)"
>
<image class="image_6" :src="item.icon_url" /> <image class="image_6" :src="item.icon_url" />
<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>
...@@ -534,8 +530,7 @@ ...@@ -534,8 +530,7 @@
<text class="font_4 text_9">{{ pageData.farmInfo.area }}</text> <text class="font_4 text_9">{{ pageData.farmInfo.area }}</text>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2 ml-3" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2 ml-3">
>
<text class="font_4 text_10">{{ pageData.farmInfo.crops }}</text> <text class="font_4 text_10">{{ pageData.farmInfo.crops }}</text>
</view> </view>
</view> </view>
...@@ -562,29 +557,23 @@ ...@@ -562,29 +557,23 @@
</view> </view>
<view class="h-300rpx codefun-flex-col mr-3.5 mt-17 nongchang_box relative"> <view class="h-300rpx codefun-flex-col mr-3.5 mt-17 nongchang_box relative">
<image class="w-full h-full" src="/static/images/nongchang/mynongchang-1.png" /> <image class="w-full h-full" src="/static/images/nongchang/mynongchang-1.png" />
<view <view v-show="pageData.hasFarm"
v-show="pageData.hasFarm"
class="w-240rpx h-80rpx flex-center border-rd-3xl absolute top-50% left-50% color-#ffffff" class="w-240rpx h-80rpx flex-center border-rd-3xl absolute top-50% left-50% color-#ffffff"
style=" style="
background-color: rgb(255 255 255 / 20%); background-color: rgb(255 255 255 / 20%);
border: 1rpx solid #fff; border: 1rpx solid #fff;
transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
" " @click="toDetail(pageData.farmInfo)">
@click="toDetail(pageData.farmInfo)"
>
<image class="mr-1 w-40 h-40" src="/static/images/nongchang/eye-white.png" /> <image class="mr-1 w-40 h-40" src="/static/images/nongchang/eye-white.png" />
<text style="font-family: '思源黑体'; font-weight: 300">进入农场</text> <text style="font-family: '思源黑体'; font-weight: 300">进入农场</text>
</view> </view>
<view <view v-show="!pageData.hasFarm"
v-show="!pageData.hasFarm"
class="w-240rpx h-80rpx flex-center border-rd-3xl absolute top-50% left-50% color-#ffffff" class="w-240rpx h-80rpx flex-center border-rd-3xl absolute top-50% left-50% color-#ffffff"
style=" style="
background-color: rgb(255 255 255 / 20%); background-color: rgb(255 255 255 / 20%);
border: 1rpx solid #fff; border: 1rpx solid #fff;
transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
" " @click="toAdd">
@click="toAdd"
>
<image class="mr-1 w-40 h-40" src="/static/images/nongchang/add.png" /> <image class="mr-1 w-40 h-40" src="/static/images/nongchang/add.png" />
<text style="font-family: '思源黑体'; font-weight: 300">添加农场</text> <text style="font-family: '思源黑体'; font-weight: 300">添加农场</text>
</view> </view>
...@@ -600,17 +589,18 @@ ...@@ -600,17 +589,18 @@
<view class="codefun-flex-row equal-division_3"> <view class="codefun-flex-row equal-division_3">
<template v-for="model in pageData.agricultureModels" :key="model.id"> <template v-for="model in pageData.agricultureModels" :key="model.id">
<view class="codefun-flex-col equal-division-item_5 group_11"> <view class="codefun-flex-col equal-division-item_5 group_11">
<view class="flex flex-row"> <view class=" flex-row" style="text-align: center;">
<view class="w-30% flex-center"><image class="w-80 h-80" :src="model.icon_url" /></view> <view class=" flex-center">
<view class="w-70%"> <image class="w-80 h-80" :src="model.icon_url" />
<view class="w-full font_5 text_18">{{ model.name }}</view> </view>
<view class="w-full font_7 text_21">{{ model.describes }}</view> <view class="">
<view class="fontsize_28">{{ model.name }}</view>
<view class="fontsize_24 font_11">{{ model.describes }}</view>
</view> </view>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3 m-0!" class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3 mt-2!"
@click="onAgricultureModelClick(model)" @click="onAgricultureModelClick(model)">
>
<text class="font_8 text_24">查看介绍</text> <text class="font_8 text_24">查看介绍</text>
</view> </view>
</view> </view>
...@@ -619,29 +609,22 @@ ...@@ -619,29 +609,22 @@
</view> </view>
<view class="codefun-mt-12 codefun-flex-col section_8"> <view class="codefun-mt-12 codefun-flex-col section_8">
<view class="codefun-flex-row equal-division_4"> <view class="codefun-flex-row equal-division_4">
<view <view class="codefun-flex-row codefun-justify-center equal-division-item_6 section_9"
class="codefun-flex-row codefun-justify-center equal-division-item_6 section_9" @click="onViewMoreFlexibleEmployment(1)">
@click="onViewMoreFlexibleEmployment(1)"
>
<text class="codefun-self-start font_9 text_25">{{ <text class="codefun-self-start font_9 text_25">{{
pageData.flexibleEmployment.working pageData.flexibleEmployment.working
}}</text> }}</text>
<image <image class="codefun-self-center image_8 ml-9"
class="codefun-self-center image_8 ml-9" src="/static/images/codefun/e12b4605ec265981ebf23e742ae09d77.png" />
src="/static/images/codefun/e12b4605ec265981ebf23e742ae09d77.png"
/>
</view> </view>
<view <view
class="codefun-flex-row codefun-justify-evenly equal-division-item_6 section_10 ml-11" class="codefun-flex-row codefun-justify-evenly equal-division-item_6 section_10 ml-11"
@click="onViewMoreFlexibleEmployment(2)" @click="onViewMoreFlexibleEmployment(2)">
>
<text class="codefun-self-start font_9 text_26">{{ <text class="codefun-self-start font_9 text_26">{{
pageData.flexibleEmployment.earning pageData.flexibleEmployment.earning
}}</text> }}</text>
<image <image class="codefun-self-center image_9"
class="codefun-self-center image_9" src="/static/images/codefun/abc27711926ec08e17bd512f96740931.png" />
src="/static/images/codefun/abc27711926ec08e17bd512f96740931.png"
/>
</view> </view>
</view> </view>
<text class="codefun-self-start font_10 text_27 mt-7">{{ <text class="codefun-self-start font_10 text_27 mt-7">{{
...@@ -656,15 +639,11 @@ ...@@ -656,15 +639,11 @@
<text class="font_6 text_29" @click="onBaseManagementClick">更多</text> <text class="font_6 text_29" @click="onBaseManagementClick">更多</text>
</view> </view>
<view class="codefun-flex-row equal-division_5 mt-17"> <view class="codefun-flex-row equal-division_5 mt-17">
<view <view v-for="(item, index) in pageData.baseManagement" :key="item.id"
v-for="(item, index) in pageData.baseManagement" class="codefun-flex-col section_11 equal-division-item_7 gap-1 justify-center align-center"
:key="item.id" :class="{ 'ml-9': index > 0 }" @click="onBaseManagementClick(item)">
class="codefun-flex-col codefun-items-start section_11 equal-division-item_7 gap-1"
:class="{ 'ml-9': index > 0 }"
@click="onBaseManagementClick(item)"
>
<image class="image_5" :src="item.icon" /> <image class="image_5" :src="item.icon" />
<text class="font_11" :class="`text_${30 + item.id - 1}`">{{ item.name }}</text> <text class="fontsize_24 font_11 mt-0.5" :class="`text_${30 + item.id - 1}`">{{ item.name }}</text>
<view class="group_25"> <view class="group_25">
<text class="font_12" :class="`text_${35 + item.id - 1}`">{{ item.num }}</text> <text class="font_12" :class="`text_${35 + item.id - 1}`">{{ item.num }}</text>
<text class="font_10" :class="`text_${35 + item.id + 3}`">{{ item.unit }}</text> <text class="font_10" :class="`text_${35 + item.id + 3}`">{{ item.unit }}</text>
...@@ -691,12 +670,9 @@ ...@@ -691,12 +670,9 @@
<view class="divider view_2" /> <view class="divider view_2" />
<view class="divider view_3" /> <view class="divider view_3" />
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-start image-wrapper pos_2" class="codefun-flex-col codefun-justify-start codefun-items-start image-wrapper pos_2">
> <image class="codefun-shrink-0 image_11"
<image src="/static/images/codefun/fb791ee7e711cfb556043cb81d3c32b1.png" />
class="codefun-shrink-0 image_11"
src="/static/images/codefun/fb791ee7e711cfb556043cb81d3c32b1.png"
/>
</view> </view>
<view class="divider pos" /> <view class="divider pos" />
<view class="divider pos_3" /> <view class="divider pos_3" />
...@@ -705,54 +681,41 @@ ...@@ -705,54 +681,41 @@
<view class="codefun-mt-10 codefun-flex-col codefun-justify-start group_25"> <view class="codefun-mt-10 codefun-flex-col codefun-justify-start group_25">
<view class="codefun-flex-row equal-division_6"> <view class="codefun-flex-row equal-division_6">
<view class="codefun-flex-col codefun-items-center section_13 equal-division-item_8"> <view class="codefun-flex-col codefun-items-center section_13 equal-division-item_8">
<image <image class="image_12"
class="image_12" src="/static/images/codefun/68bae99a74dc71e194d799ee24c1f023.png" />
src="/static/images/codefun/68bae99a74dc71e194d799ee24c1f023.png"
/>
<view <view
class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4" class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
>
<text class="font_10 text_50">气象灾害</text> <text class="font_10 text_50">气象灾害</text>
</view> </view>
<view <view
class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4" class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
>
<text class="font_10 text_53">台风预警</text> <text class="font_10 text_53">台风预警</text>
</view> </view>
</view> </view>
<view class="codefun-flex-col section_13 equal-division-item_8 ml-11"> <view class="codefun-flex-col section_13 equal-division-item_8 ml-11">
<image <image class="codefun-self-center image_12"
class="codefun-self-center image_12" src="/static/images/codefun/29bc217d767c53f1f4968ddcf08b6d85.png" />
src="/static/images/codefun/29bc217d767c53f1f4968ddcf08b6d85.png"
/>
<view <view
class="codefun-mt-4 codefun-flex-col codefun-items-center codefun-self-stretch" class="codefun-mt-4 codefun-flex-col codefun-items-center codefun-self-stretch">
>
<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_10 text_51">作物倒伏</text> <text class="font_10 text_51">作物倒伏</text>
</view> </view>
<view <view
class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4" class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
>
<text class="font_10 text_54">中等风险</text> <text class="font_10 text_54">中等风险</text>
</view> </view>
</view> </view>
</view> </view>
<view class="codefun-flex-col section_13 section_14 ml-11"> <view class="codefun-flex-col section_13 section_14 ml-11">
<image <image class="codefun-self-center image_12"
class="codefun-self-center image_12" src="/static/images/codefun/143013b1c946e75b10133de0db6d9c7f.png" />
src="/static/images/codefun/143013b1c946e75b10133de0db6d9c7f.png"
/>
<view <view
class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_5" class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_5">
>
<text class="font_10 text_52">病虫害风险</text> <text class="font_10 text_52">病虫害风险</text>
</view> </view>
<view <view
class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_5" class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_5">
>
<text class="font_10 text_55">水稻稻瘟病</text> <text class="font_10 text_55">水稻稻瘟病</text>
</view> </view>
</view> </view>
...@@ -766,15 +729,12 @@ ...@@ -766,15 +729,12 @@
<text class="font_6 text_43 text_44" @click="onViewMoreTools">更多</text> <text class="font_6 text_43 text_44" @click="onViewMoreTools">更多</text>
</view> </view>
<view class="codefun-flex-col section_12"> <view class="codefun-flex-col section_12">
<view class="flex-center flex-wrap gap-2 pt-3"> <view class="flex-center flex-wrap pt-3">
<view <view v-for="tool in pageData.commonTools" :key="tool.id"
v-for="tool in pageData.commonTools"
:key="tool.id"
class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2" class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2"
@click="onClickTool(tool)" @click="onClickTool(tool)">
>
<image class="w-100 h-100" :src="tool.icon" mode="scaleToFill" /> <image class="w-100 h-100" :src="tool.icon" mode="scaleToFill" />
<view class="text-24">{{ tool.name }}</view> <view class="text-24 fontsize_28">{{ tool.name }}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -785,25 +745,17 @@ ...@@ -785,25 +745,17 @@
<text class="font_6 text_57" @click="onDeviceManagementClick">设备管理</text> <text class="font_6 text_57" @click="onDeviceManagementClick">设备管理</text>
</view> </view>
<view class="codefun-flex-row group_26 mt-17 gap-2"> <view class="codefun-flex-row group_26 mt-17 gap-2">
<view <view v-for="(device, index) in pageData.smartDevices" :key="device.id"
v-for="(device, index) in pageData.smartDevices" class="section_16 codefun-flex-row codefun-justify-center codefun-items-center codefun-shrink-0 codefun-relative">
:key="device.id" <image class="image_13"
class="section_16 codefun-flex-row codefun-justify-center codefun-items-center codefun-shrink-0 codefun-relative" :src="device.isOnline === 1 ? pageData.smartDeviceIcon[0] : pageData.smartDeviceIcon[1]" />
>
<image
class="image_13"
:src="device.isOnline === 1 ? pageData.smartDeviceIcon[0] : pageData.smartDeviceIcon[1]"
/>
<view class="codefun-ml-8 codefun-flex-col"> <view class="codefun-ml-8 codefun-flex-col">
<text class="font_10">{{ device.deviceName }}</text> <text class="font_10">{{ device.deviceName }}</text>
<view class="codefun-mt-10 codefun-flex-row codefun-items-center"> <view class="codefun-mt-10 codefun-flex-row codefun-items-center">
<view class="section_17" v-if="index !== 1" /> <view class="section_17" v-if="index !== 1" />
<view class="section_18" v-if="index === 1" /> <view class="section_18" v-if="index === 1" />
<text <text class="codefun-ml-4 font_4" :class="index !== 1 ? 'text_59' : 'text_60'"
class="codefun-ml-4 font_4" :style="{ color: device.statusColor }">
:class="index !== 1 ? 'text_59' : 'text_60'"
:style="{ color: device.statusColor }"
>
{{ device.isOnline_dictText }} {{ device.isOnline_dictText }}
</text> </text>
</view> </view>
...@@ -814,8 +766,7 @@ ...@@ -814,8 +766,7 @@
<view class="codefun-flex-col group_28" id="creditCenter"> <view class="codefun-flex-col group_28" id="creditCenter">
<text class="codefun-self-start font text_61">信用中心</text> <text class="codefun-self-start font text_61">信用中心</text>
<view <view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch section_19 mt-21" class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch section_19 mt-21">
>
<image class="image_15" :src="pageData.creditCenter.image" /> <image class="image_15" :src="pageData.creditCenter.image" />
<view class="codefun-flex-col codefun-items-start group_29"> <view class="codefun-flex-col codefun-items-start group_29">
<text class="text_62">{{ userStore.getUserInfo?.creditScore || 600 }}</text> <text class="text_62">{{ userStore.getUserInfo?.creditScore || 600 }}</text>
...@@ -823,8 +774,7 @@ ...@@ -823,8 +774,7 @@
<text class="font_10 text_64 mt-13">{{ pageData.creditCenter.tips }}</text> <text class="font_10 text_64 mt-13">{{ pageData.creditCenter.tips }}</text>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6 mt-13" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6 mt-13"
@click="onViewFinancialServices" @click="onViewFinancialServices">
>
<text class="font_15 text_65">{{ pageData.creditCenter.actionText }}</text> <text class="font_15 text_65">{{ pageData.creditCenter.actionText }}</text>
</view> </view>
</view> </view>
...@@ -836,72 +786,38 @@ ...@@ -836,72 +786,38 @@
<text class="font_6 text_43 text_67" @click="onViewMoreClass">查看更多</text> <text class="font_6 text_43 text_67" @click="onViewMoreClass">查看更多</text>
</view> </view>
<view class="codefun-flex-col section_20 !relative"> <view class="codefun-flex-col section_20 !relative">
<fui-swiper-dot <fui-swiper-dot :items="pageData.agricultureClass.videoList" :current="pageData.current"
:items="pageData.agricultureClass.videoList"
:current="pageData.current"
:styles="{ :styles="{
height: 10, height: 10,
activeWidth: 40, activeWidth: 40,
background: '#dff0e2', background: '#dff0e2',
activeBackground: '#5db66f', activeBackground: '#5db66f',
bottom: 10, bottom: 10,
}" }">
> <swiper class="fui-banner__wrap" circular :indicator-dots="false" :autoplay="false"
<swiper :interval="8000" :duration="300" :disable-touch="false" :touch-angle="45"
class="fui-banner__wrap" :threshold="50" @change="handleChangeVideo" @transition="handleTransition">
circular
:indicator-dots="false"
:autoplay="false"
:interval="8000"
:duration="300"
:disable-touch="false"
:touch-angle="45"
:threshold="50"
@change="handleChangeVideo"
@transition="handleTransition"
>
<swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"> <swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
<image <image :src="video.thumbnailPath" mode="scaleToFill" class="w-654rpx h-358rpx"
:src="video.thumbnailPath" @click="playVideo(index)" />
mode="scaleToFill" <video :id="`video${index}`" :src="video.url" :poster="video.thumbnailPath"
class="w-654rpx h-358rpx" :title="video.title" :controls="true" style="width: 654rpx; height: 358rpx"
@click="playVideo(index)" :autoplay="false" :muted="false" :loop="true" :show-play-btn="true"
/> :show-center-play-btn="true" :enable-progress-gesture="true"
<video :show-progress="true" :direction="0" object-fit="contain"
:id="`video${index}`" @loadedmetadata="handleMetadataLoaded" @play="handleVideoPlay(index)"
:src="video.url"
:poster="video.thumbnailPath"
:title="video.title"
:controls="true"
style="width: 654rpx; height: 358rpx"
:autoplay="false"
:muted="false"
:loop="true"
:show-play-btn="true"
:show-center-play-btn="true"
:enable-progress-gesture="true"
:show-progress="true"
:direction="0"
object-fit="contain"
@loadedmetadata="handleMetadataLoaded"
@play="handleVideoPlay(index)"
@pause="handleVideoPause(index)" @pause="handleVideoPause(index)"
@fullscreenchange="handleFullscreenChange($event, index)" @fullscreenchange="handleFullscreenChange($event, index)"
class="!hidden" class="!hidden"></video>
></video>
<view class="describe relative"> <view class="describe relative">
<text class="codefun-self-start font text_34">{{ <text class="codefun-self-start font text_34">{{
pageData.agricultureClass.title pageData.agricultureClass.title
}}</text> }}</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">
> <image src="/static/images/codefun/play.png" mode="scaleToFill"
<image
src="/static/images/codefun/play.png"
mode="scaleToFill"
class="absolute w-64 h-64 top--150 left-275" class="absolute w-64 h-64 top--150 left-275"
@click="playVideo(index)" @click="playVideo(index)" />
/>
<text class="font_14 text_36">{{ pageData.agricultureClass.time }}</text> <text class="font_14 text_36">{{ pageData.agricultureClass.time }}</text>
</view> </view>
</view> </view>
...@@ -916,59 +832,59 @@ ...@@ -916,59 +832,59 @@
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.mt-19 { .mt-19 {
margin-top: 38rpx; margin-top: 38rpx;
} }
.ml-3 { .ml-3 {
margin-left: 6rpx; margin-left: 6rpx;
} }
.mt-7 { .mt-7 {
margin-top: 14rpx; margin-top: 14rpx;
} }
.ml-9 { .ml-9 {
margin-left: 18rpx; margin-left: 18rpx;
} }
.ml-7 { .ml-7 {
margin-left: 14rpx; margin-left: 14rpx;
} }
.ml-11 { .ml-11 {
margin-left: 22rpx; margin-left: 22rpx;
} }
.mt-17 { .mt-17 {
margin-top: 34rpx; margin-top: 34rpx;
} }
.mt-11 { .mt-11 {
margin-top: 22rpx; margin-top: 22rpx;
} }
.mt-5 { .mt-5 {
margin-top: 10rpx; margin-top: 10rpx;
} }
.mt-21 { .mt-21 {
margin-top: 42rpx; margin-top: 42rpx;
} }
.mt-13 { .mt-13 {
margin-top: 26rpx; margin-top: 26rpx;
} }
.ml-5 { .ml-5 {
margin-left: 10rpx; margin-left: 10rpx;
} }
.mt-3 { .mt-3 {
margin-top: 6rpx; margin-top: 6rpx;
} }
.page { .page {
background-color: #e6f5e8; background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
width: 100%; width: 100%;
...@@ -1073,6 +989,7 @@ ...@@ -1073,6 +989,7 @@
} }
.group_4 { .group_4 {
// position: absolute; // position: absolute;
// right: 147rpx; // right: 147rpx;
// top: 6rpx; // top: 6rpx;
...@@ -1082,6 +999,7 @@ ...@@ -1082,6 +999,7 @@
} }
.equal-division-item_3 { .equal-division-item_3 {
// position: absolute; // position: absolute;
// right: 13rpx; // right: 13rpx;
// top: 6rpx; // top: 6rpx;
...@@ -1598,13 +1516,11 @@ ...@@ -1598,13 +1516,11 @@
.divider { .divider {
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(90deg,
90deg,
#c6cacd, #c6cacd,
#c6cacd 1.36%, #c6cacd 1.36%,
transparent 1.36%, transparent 1.36%,
transparent 2.717% transparent 2.717%);
);
background-position: -4rpx 0rpx; background-position: -4rpx 0rpx;
height: 2rpx; height: 2rpx;
} }
...@@ -2061,11 +1977,15 @@ ...@@ -2061,11 +1977,15 @@
line-height: 18.3rpx; line-height: 18.3rpx;
color: #666666; color: #666666;
} }
} }
.nongchang_box { .nongchang_box {
background-image: url('/static/images/nongchang/mynongchang-2.png'); background-image: url('/static/images/nongchang/mynongchang-2.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.font_11 {
color: #666666;
}
</style> </style>
src/pages/shouye/shouye.vue
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app' import { onPullDownRefresh } 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 * as UserAPI from '@/api/model/userInfo' import * as UserAPI from '@/api/model/userInfo'
import { useDictStore } from '@/store/modules/dict' import { useDictStore } from '@/store/modules/dict'
import Navigate from '@/utils/page/navigate' import Navigate from '@/utils/page/navigate'
import * as AreaDict from '@/utils/dict/area' import * as AreaDict from '@/utils/dict/area'
import { getList } from '@/api/model/news' import { getList } from '@/api/model/news'
import { getList as getVideoList } from '@/api/model/knowledgeVideo' import { getList as getVideoList } from '@/api/model/knowledgeVideo'
const dictStore = useDictStore() const dictStore = useDictStore()
const model = reactive({ const model = reactive({
// 湖南省人民政府 // 湖南省人民政府
location: '112.982931,28.116698', location: '112.982931,28.116698',
}) })
// 位置获取频率控制 // 位置获取频率控制
const lastLocationTime = ref(0) const lastLocationTime = ref(0)
const LOCATION_CACHE_TIME = 5 * 60 * 1000 // 5分钟缓存时间 const LOCATION_CACHE_TIME = 5 * 60 * 1000 // 5分钟缓存时间
onLoad(() => { onLoad(() => {
// 关闭启动页并检查更新 // 关闭启动页并检查更新
closeSplashscreenAndChechUpgrade() closeSplashscreenAndChechUpgrade()
}) })
onShow(() => { onShow(() => {
// 检查是否需要重新获取位置（5分钟缓存） // 检查是否需要重新获取位置（5分钟缓存）
const currentTime = Date.now() const currentTime = Date.now()
const cachedLocation = uni.getStorageSync('location') const cachedLocation = uni.getStorageSync('location')
...@@ -51,8 +51,7 @@ ...@@ -51,8 +51,7 @@
UserAPI.location({ lat: cachedLocation.lat, lon: cachedLocation.lon }) UserAPI.location({ lat: cachedLocation.lat, lon: cachedLocation.lon })
.then((res) => { .then((res) => {
console.log('UserAPI.location', res) console.log('UserAPI.location', res)
pageData.weather.detailedLocation = `${res.province}-${res.city}-${res.country}-${ pageData.weather.detailedLocation = `${res.province}-${res.city}-${res.country}-${res.road
res.road
}-${res.town}-${res.address}` }-${res.town}-${res.address}`
}) })
.catch(() => { .catch(() => {
...@@ -87,8 +86,7 @@ ...@@ -87,8 +86,7 @@
UserAPI.location({ lat: res.latitude, lon: res.longitude }) UserAPI.location({ lat: res.latitude, lon: res.longitude })
.then((res) => { .then((res) => {
console.log('UserAPI.location', res) console.log('UserAPI.location', res)
pageData.weather.detailedLocation = `${res.province}-${res.city}-${res.country}-${ pageData.weather.detailedLocation = `${res.province}-${res.city}-${res.country}-${res.road
res.road
}-${res.town}-${res.address}` }-${res.town}-${res.address}`
}) })
.catch(() => { .catch(() => {
...@@ -144,17 +142,17 @@ ...@@ -144,17 +142,17 @@
getAgricultureClassList() getAgricultureClassList()
// 预警信息 // 预警信息
getWarning() getWarning()
}) })
// 下拉刷新 // 下拉刷新
onPullDownRefresh(() => { onPullDownRefresh(() => {
setTimeout(function () { setTimeout(function () {
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
Message.toast('刷新成功') Message.toast('刷新成功')
}, 1000) }, 1000)
}) })
function getWeatherRecommend(weather: string) { function getWeatherRecommend(weather: string) {
switch (weather) { switch (weather) {
case '晴': case '晴':
return '宜喷药' return '宜喷药'
...@@ -167,10 +165,10 @@ ...@@ -167,10 +165,10 @@
default: default:
return '无建议' return '无建议'
} }
} }
// 刷新天气信息 // 刷新天气信息
function reloadWeather() { function reloadWeather() {
WeatherAPI.now(model.location).then((res) => { WeatherAPI.now(model.location).then((res) => {
console.log('WeatherAPI.now', res) console.log('WeatherAPI.now', res)
...@@ -190,10 +188,10 @@ ...@@ -190,10 +188,10 @@
} }
}) })
}) })
} }
// 页面数据 // 页面数据
const pageData = reactive({ const pageData = reactive({
// 顶部标题和搜索 // 顶部标题和搜索
header: { header: {
title: $app.name, title: $app.name,
...@@ -278,15 +276,11 @@ ...@@ -278,15 +276,11 @@
// 农技课堂 // 农技课堂
agricultureClass: { agricultureClass: {
title: '',
// expert: '张教授',
time: '',
videoList: [], videoList: [],
}, },
current: 0, })
})
function getServiceItems() { function getServiceItems() {
HomeAPI.zoneList({ HomeAPI.zoneList({
pageNo: 1, pageNo: 1,
pageSize: 8, pageSize: 8,
...@@ -297,8 +291,8 @@ ...@@ -297,8 +291,8 @@
pageData.serviceItems = [] pageData.serviceItems = []
pageData.serviceItems = records pageData.serviceItems = records
}) })
} }
function getWarningInfo() { function getWarningInfo() {
if (!pageData.weather.lon || !pageData.weather.lat) { if (!pageData.weather.lon || !pageData.weather.lat) {
return return
} }
...@@ -309,40 +303,39 @@ ...@@ -309,40 +303,39 @@
}).then((res) => { }).then((res) => {
pageData.weather.warning = res[0].criteria pageData.weather.warning = res[0].criteria
}) })
} }
function getServiceStatsList() { function getServiceStatsList() {
HomeAPI.serviceStatsList({ HomeAPI.serviceStatsList({
status: 1, status: 1,
}).then((res) => { }).then((res) => {
const { records } = res const { records } = res
pageData.serviceStats = records pageData.serviceStats = records
}) })
} }
function getAgricultureClassList() { function getAgricultureClassList() {
getVideoList({ pageNo: 1, pageSize: 3, status: 1 }).then((res) => { getVideoList({ pageNo: 1, pageSize: 10, status: 1 }).then((res) => {
const { records } = res const { records } = res
pageData.agricultureClass.videoList = records pageData.agricultureClass.videoList = records
pageData.agricultureClass.title = records[0]?.title
}) })
} }
function getWarning() { function getWarning() {
HomeAPI.warning().then((res) => { HomeAPI.warning().then((res) => {
const { records } = res const { records } = res
pageData.warnings = records pageData.warnings = records
}) })
} }
function getNews() { function getNews() {
getList({ pageNo: 1, pageSize: 2 }).then((res) => { getList({ pageNo: 1, pageSize: 2 }).then((res) => {
const { records } = res const { records } = res
pageData.newsItems = records pageData.newsItems = records
}) })
} }
// 菜单点击事件 // 菜单点击事件
function onMenuItemClick(item: any) { function onMenuItemClick(item: any) {
console.log('点击菜单项:', item) console.log('点击菜单项:', item)
// 在这里添加具体的菜单点击逻辑 // 在这里添加具体的菜单点击逻辑
...@@ -383,89 +376,51 @@ ...@@ -383,89 +376,51 @@
}) })
} }
} }
} }
// 查看更多农技课堂 // 查看更多农技课堂
function onViewMoreClass() { function onViewMoreClass() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/knowledgeVideo/index', url: '/pages/knowledgeVideo/index',
}) })
} }
// 轮播视频切换的时候触发 // 视频暂停事件处理
function handleChangeVideo(e: any) { function handleVideoPause(currentIndex) {
const currentIndex = e.detail.current
pageData.current = currentIndex
pageData.agricultureClass.title = pageData.agricultureClass.videoList[currentIndex]?.title
console.log('当前索引:', currentIndex)
// // 延迟处理视频切换，避免卡顿
// setTimeout(() => {
// // 停止所有其他视频的播放（只暂停，不重置位置）
// pageData.agricultureClass.videoList.forEach((_, index) => {
// if (index !== currentIndex) {
// try {
// const videoContext = uni.createVideoContext(`video${index}`)
// videoContext.pause()
// // 不重置到开头，保留播放位置
// } catch (error) {
// console.log('停止视频失败:', error)
// }
// } else {
// // 当前视频：尝试播放
// try {
// const videoContext = uni.createVideoContext(`video${index}`)
// // 自动播放当前视频
// videoContext.play()
// } catch (error) {
// console.log('播放视频失败:', error)
// }
// }
// })
// }, 100)
}
// 处理swiper过渡动画
function handleTransition(e: any) {
// 过渡期间可以做一些优化处理
console.log('swiper过渡中...')
}
// 视频暂停事件处理
function handleVideoPause(currentIndex) {
console.log(`视频${currentIndex}暂停`) console.log(`视频${currentIndex}暂停`)
} }
function handleFullscreenChange(e: any, index) { function handleFullscreenChange(e: any, index) {
console.log(`视频${index}全屏状态改变`) console.log(`视频${index}全屏状态改变`)
if (!e.detail.fullScreen) { if (!e.detail.fullScreen) {
const videoContext = uni.createVideoContext(`video${index}`) const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause() videoContext.pause()
} }
} }
// 获取视频时长 // 获取视频时长
function handleMetadataLoaded(e: any) { function handleMetadataLoaded(e: any) {
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()
} }
}) })
} }
function playVideo(index) { function playVideo(index) {
const videoContext = uni.createVideoContext(`video${index}`) const videoContext = uni.createVideoContext(`video${index}`)
videoContext.requestFullScreen({ direction: 0 }) videoContext.requestFullScreen({ direction: 0 })
videoContext.play() videoContext.play()
} }
function onClickWarning(item) { function onClickWarning(item) {
console.log('点击预警信息:', item) console.log('点击预警信息:', item)
// 在这里添加具体的点击逻辑 // 在这里添加具体的点击逻辑
...@@ -474,20 +429,20 @@ ...@@ -474,20 +429,20 @@
content: item.title, content: item.title,
showCancel: false, showCancel: false,
}) })
} }
function toNewsList() { function toNewsList() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/news/index', url: '/pages/news/index',
}) })
} }
function toNewsDetail(item) { function toNewsDetail(item) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/news/detail?id=${item.id}`, url: `/pages/news/detail?id=${item.id}`,
}) })
} }
onHide(() => { onHide(() => {
// 停止所有其他视频的播放（只暂停，不重置位置） // 停止所有其他视频的播放（只暂停，不重置位置）
pageData.agricultureClass.videoList.forEach((_, index) => { pageData.agricultureClass.videoList.forEach((_, index) => {
try { try {
...@@ -498,7 +453,7 @@ ...@@ -498,7 +453,7 @@
console.log('停止视频失败:', error) console.log('停止视频失败:', error)
} }
}) })
}) })
</script> </script>
<template> <template>
...@@ -517,29 +472,18 @@ ...@@ -517,29 +472,18 @@
<view class="codefun-flex-col section_3"> <view class="codefun-flex-col section_3">
<view class="codefun-flex-row codefun-justify-between" style="align-items: center"> <view class="codefun-flex-row codefun-justify-between" style="align-items: center">
<view <view
class="codefun-flex-row codefun-items-center codefun-relative codefun-overflow-hidden" class="codefun-flex-row codefun-items-center codefun-relative codefun-overflow-hidden">
>
<!-- 定位图标 --> <!-- 定位图标 -->
<image <image class="codefun-shrink-0 image_13 codefun-mr-4"
class="codefun-shrink-0 image_13 codefun-mr-4" src="/static/images/local-address.png" />
src="/static/images/local-address.png"
/>
<!-- 滚动位置信息 --> <!-- 滚动位置信息 -->
<view <view
class="codefun-flex-row codefun-items-center codefun-overflow-hidden text-wrapper_2" class="codefun-flex-row codefun-items-center codefun-overflow-hidden text-wrapper_2"
style="width: 400rpx" style="width: 400rpx">
> <up-notice-bar v-if="pageData.weather.detailedLocation != '获取中'" icon=""
<up-notice-bar bgColor="#FFFFFF00" color="#5db66f" class="text_3"
v-if="pageData.weather.detailedLocation != '获取中'" :text="pageData.weather.detailedLocation" scrollable :speed="50"
icon="" style="width: 100%; height: auto" />
bgColor="#FFFFFF00"
color="#5db66f"
class="text_3"
:text="pageData.weather.detailedLocation"
scrollable
:speed="50"
style="width: 100%; height: auto"
/>
<view v-else class="text_3">{{ pageData.weather.detailedLocation }}</view> <view v-else class="text_3">{{ pageData.weather.detailedLocation }}</view>
</view> </view>
<!-- <image <!-- <image
...@@ -553,10 +497,8 @@ ...@@ -553,10 +497,8 @@
</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">{{
...@@ -576,51 +518,39 @@ ...@@ -576,51 +518,39 @@
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="mt-2 mb-3" v-if="pageData.weather.warning"> <view class="mt-2 mb-3" v-if="pageData.weather.warning">
<fui-notice-bar <fui-notice-bar :content="pageData.weather.warning" scrollable
:content="pageData.weather.warning" :padding="['0', '32rpx']">
scrollable
:padding="['0', '32rpx']"
>
<view class="fui-icon__box"> <view class="fui-icon__box">
<fui-icon name="notice" :size="36" color="#FF2B2B" /> <fui-icon name="notice" :size="36" color="#FF2B2B" />
</view> </view>
...@@ -640,56 +570,33 @@ ...@@ -640,56 +570,33 @@
</view> --> </view> -->
</view> </view>
<view class="codefun-flex-row section_5"> <view class="codefun-flex-row section_5">
<view <view v-show="item.status" v-for="item in pageData.serviceItems" :key="item.id"
v-show="item.status" class="codefun-flex-col codefun-items-center group_10 mt-5" @click="onMenuItemClick(item)">
v-for="item in pageData.serviceItems"
:key="item.id"
class="codefun-flex-col codefun-items-center group_10"
@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>
<swiper <swiper :autoplay="true" :interval="5000" :duration="500" :circular="true" :vertical="true"
:autoplay="true"
:interval="5000"
:duration="500"
:circular="true"
:vertical="true"
:indicator-dots="false" :indicator-dots="false"
class="codefun-flex-row codefun-justify-between codefun-items-center section_6 warn-scroll" class="codefun-flex-row codefun-justify-between codefun-items-center section_6 warn-scroll"
v-if="pageData.warnings.length" v-if="pageData.warnings.length">
> <swiper-item id="scroll-view-content" v-for="item of pageData.warnings" :key="item.id"
<swiper-item class="codefun-flex-col" @click="onClickWarning(item)">
id="scroll-view-content"
v-for="item of pageData.warnings"
:key="item.id"
class="codefun-flex-col"
@click="onClickWarning(item)"
>
<view class="codefun-flex-row codefun-items-baseline" style="align-items: center"> <view class="codefun-flex-row codefun-items-baseline" style="align-items: center">
<view class="font_5 text_17">最新预警</view> <view class="font_5 text_17">最新预警</view>
<view <view class="codefun-flex-row" style="
class="codefun-flex-row"
style="
flex-flow: column; flex-flow: column;
justify-content: space-around; justify-content: space-around;
height: 90rpx; height: 90rpx;
width: calc(100% - 110rpx); width: calc(100% - 110rpx);
" ">
> <view class="font_2 text_18 ml-11"
<view style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{
class="font_2 text_18 ml-11" item.title }}</view>
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
>{{ item.title }}</view
>
<text class="text-26 text_20 text_21 ml-11">{{ item.warningDate }}</text> <text class="text-26 text_20 text_21 ml-11">{{ item.warningDate }}</text>
</view> </view>
<image <image class="warn-image"
class="warn-image" src="/static/images/codefun/64d85a99ca3de5fab9ce0e8dc71aa791.png" />
src="/static/images/codefun/64d85a99ca3de5fab9ce0e8dc71aa791.png"
/>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
...@@ -703,20 +610,17 @@ ...@@ -703,20 +610,17 @@
</text> </text>
</view> </view>
<view class="codefun-flex-col equal-division bg-#fff border-rd-lg"> <view class="codefun-flex-col equal-division bg-#fff border-rd-lg">
<view <view v-for="news in pageData.newsItems" :key="news.id"
v-for="news in pageData.newsItems" class="w-full h-auto flex flex-row justify-around p-2" style="min-height: 150rpx;"
:key="news.id" @click="toNewsDetail(news)">
class="w-full h-auto flex flex-row justify-around p-2" <view class="flex flex-col justify-between"
style="min-height: 150rpx;" :style="news.posterUrl ? 'width: 68%' : 'width: 100%'">
@click="toNewsDetail(news)" <view class="ellipsis-multiline fontsize_28 color-#333333 mb-1">{{ news.title }}</view>
> <view class="fontsize_24 color-#686868">{{
<view class="flex flex-col justify-between" :style="news.posterUrl ? 'width: 68%' : 'width: 100%'">
<view class="ellipsis-multiline text-25 color-#333333 mb-1">{{ news.title }}</view>
<view class="text-25 color-#686868">{{
dayjs(news.publishDate).format('YYYY年MM月DD日') dayjs(news.publishDate).format('YYYY年MM月DD日')
}}</view> }}</view>
</view> </view>
<view v-show="news.posterUrl" class="w-30% h-150"> <view v-show="news.posterUrl" class="w-30% h-130">
<image class="w-full h-full border-rd" :src="news.posterUrl" /> <image class="w-full h-full border-rd" :src="news.posterUrl" />
</view> </view>
</view> </view>
...@@ -726,19 +630,13 @@ ...@@ -726,19 +630,13 @@
<!-- <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 v-for="stat in pageData.serviceStats" :key="stat.id"
class="codefun-flex-col section_12 section_19">
<view <view
v-for="stat in pageData.serviceStats" class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_27">
:key="stat.id"
class="codefun-flex-col section_12 section_19"
>
<view
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 }} {{ stat.name }}
</text> </text>
</view> </view>
...@@ -752,123 +650,74 @@ ...@@ -752,123 +650,74 @@
<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 !relative"> <view class="codefun-flex-col section_13 !relative rounded-lg" style="margin-left: -28rpx;">
<fui-swiper-dot <fui-waterfall topGap="20" leftGap="20" rightGap="20" bottomGap="20">
:items="pageData.agricultureClass.videoList" <fui-waterfall-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"
:current="pageData.current" :src="video.thumbnailPath" @click="playVideo(index)">
:styles="{ <view class="flex flex-col justify-between pl-2 pr-2 pb-2">
height: 10, <view class="fontsize_28 mt-1 mb-2 font-13">{{ video.title }}</view>
activeWidth: 40, <view class="flex justify-between text-25 color-#686868">
background: '#dff0e2', <view class="mr-1 flex-center">
activeBackground: '#5db66f', <!-- <image class="mt-0.2 mr-1 w-30 h-26" src="/static/images/news/views.png" /> -->
bottom: 10, <view class="flex-center text-24 lh-24rpx">{{ video.viewCount || 0 }}次播放</view>
}"
>
<swiper
class="fui-banner__wrap"
circular
:indicator-dots="false"
:autoplay="false"
:interval="8000"
:duration="300"
:disable-touch="false"
:touch-angle="45"
:threshold="50"
@change="handleChangeVideo"
@transition="handleTransition"
>
<swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
<image
:src="video.thumbnailPath"
mode="scaleToFill"
class="w-654rpx h-358rpx"
@click="playVideo(index)"
/>
<video
:id="`video${index}`"
:src="video.url"
:poster="video.thumbnailPath"
:title="video.title"
:controls="true"
style="width: 654rpx; height: 358rpx"
:autoplay="false"
:muted="false"
:loop="true"
:show-play-btn="true"
:show-center-play-btn="true"
:enable-progress-gesture="true"
:show-progress="true"
:direction="0"
object-fit="contain"
@loadedmetadata="handleMetadataLoaded"
@play="handleVideoPlay(index)"
@pause="handleVideoPause(index)"
@fullscreenchange="handleFullscreenChange($event, index)"
class="!hidden"
></video>
<view class="describe relative">
<text class="codefun-self-start font text_34">{{
pageData.agricultureClass.title
}}</text>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-13"
>
<image
src="/static/images/codefun/play.png"
mode="scaleToFill"
class="absolute w-64 h-64 top--150 left-275"
@click="playVideo(index)"
/>
<text class="font_14 text_36">{{ pageData.agricultureClass.time }}</text>
</view> </view>
<text>{{ dayjs(video.publishDate).format('MM-DD') }}</text>
</view> </view>
</swiper-item>
</swiper>
</fui-swiper-dot>
</view> </view>
<video :id="`video${index}`" :src="video.url" :poster="video.thumbnailPath"
:title="video.title" :controls="true" :autoplay="false" :muted="false" :loop="true"
:show-play-btn="true" :show-center-play-btn="true" :enable-progress-gesture="true"
:show-progress="true" :direction="0" object-fit="contain"
@loadedmetadata="handleMetadataLoaded" @play="handleVideoPlay(index)"
@pause="handleVideoPause(index)"
@fullscreenchange="handleFullscreenChange($event, index)" class="!hidden"></video>
</fui-waterfall-item>
</fui-waterfall>
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.ml-17 { .ml-17 {
margin-left: 34rpx; margin-left: 34rpx;
} }
.ml-43 { .ml-43 {
margin-left: 86rpx; margin-left: 86rpx;
} }
.mt-13 { .mt-13 {
margin-top: 26rpx; margin-top: 26rpx;
} }
.ml-11 { .ml-11 {
margin-left: 22rpx; margin-left: 22rpx;
} }
.ml-3 { .ml-3 {
margin-left: 6rpx; margin-left: 6rpx;
} }
.ml-19 { .ml-19 {
margin-left: 38rpx; margin-left: 38rpx;
} }
.mt-11 { .mt-11 {
margin-top: 22rpx; margin-top: 22rpx;
} }
.ml-5 { .ml-5 {
margin-left: 10rpx; margin-left: 10rpx;
} }
.mt-3 { .mt-3 {
margin-top: 6rpx; margin-top: 6rpx;
} }
.page { .page {
background-color: #e6f5e8; background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
width: 100%; width: 100%;
...@@ -938,6 +787,7 @@ ...@@ -938,6 +787,7 @@
padding-left: 28rpx; padding-left: 28rpx;
.group_4 { .group_4 {
// height: 864rpx; // height: 864rpx;
.section_3 { .section_3 {
width: 694rpx; width: 694rpx;
...@@ -1122,7 +972,7 @@ ...@@ -1122,7 +972,7 @@
flex-wrap: wrap; flex-wrap: wrap;
margin-right: 28rpx; margin-right: 28rpx;
margin-top: -34rpx; margin-top: -34rpx;
padding: 30rpx 0 30rpx; padding: 00rpx 0 30rpx;
background-color: #ffffff; background-color: #ffffff;
border-radius: 16rpx; border-radius: 16rpx;
...@@ -1239,6 +1089,7 @@ ...@@ -1239,6 +1089,7 @@
line-height: 17.18rpx; line-height: 17.18rpx;
} }
} }
.warn-scroll { .warn-scroll {
width: 655rpx; width: 655rpx;
height: 90rpx; height: 90rpx;
...@@ -1250,15 +1101,18 @@ ...@@ -1250,15 +1101,18 @@
height: 32rpx; height: 32rpx;
} }
} }
.image_13 { .image_13 {
border-radius: 16rpx; border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
} }
.codefun-mr-4 { .codefun-mr-4 {
margin-right: 10rpx; margin-right: 10rpx;
} }
.font_4 { .font_4 {
font-size: 20rpx; font-size: 20rpx;
line-height: 18.3rpx; line-height: 18.3rpx;
...@@ -1479,7 +1333,7 @@ ...@@ -1479,7 +1333,7 @@
} }
.font_13 { .font_13 {
font-size: 24rpx; font-size: 28rpx;
line-height: 22.04rpx; line-height: 22.04rpx;
color: #666666; color: #666666;
} }
...@@ -1578,11 +1432,6 @@ ...@@ -1578,11 +1432,6 @@
position: relative; position: relative;
margin-right: 28rpx; margin-right: 28rpx;
margin-top: 32.86rpx; margin-top: 32.86rpx;
height: 428rpx;
// padding: 271.06rpx 36.64rpx 22rpx 48rpx;
padding: 20rpx;
padding-bottom: 10rpx;
background-color: #ffffff;
border-radius: 16rpx; border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH; mix-blend-mode: NOTTHROUGH;
...@@ -1725,20 +1574,28 @@ ...@@ -1725,20 +1574,28 @@
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
} }
} }
.u-notice-bar {
.u-notice-bar {
padding: unset !important; padding: unset !important;
font-size: 28rpx !important; font-size: 28rpx !important;
} }
:v-deep .u-notice-bar {
:v-deep .u-notice-bar {
padding: unset !important; padding: unset !important;
font-size: 28rpx; font-size: 28rpx;
} }
.ellipsis-multiline {
display: -webkit-box; /* 必须 */ .ellipsis-multiline {
-webkit-box-orient: vertical; /* 垂直排列 */ display: -webkit-box;
-webkit-line-clamp: 2; /* 限制显示3行 */ /* 必须 */
overflow: hidden; /* 隐藏超出内容 */ -webkit-box-orient: vertical;
text-overflow: ellipsis; /* 可选，部分浏览器不生效 */ /* 垂直排列 */
} -webkit-line-clamp: 2;
/* 限制显示3行 */
overflow: hidden;
/* 隐藏超出内容 */
text-overflow: ellipsis;
/* 可选，部分浏览器不生效 */
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论