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