Administrator
/
FenXiNspUniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

This commit is contained in:
978184212@qq.com 2025-11-24 16:49:49 +08:00
parent feee3428d3
commit 04a4cc4ac1
4 changed files with 91 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
manifest.json
View File

@ -1,5 +1,5 @@
{ {
"name" : "汾西县黄河流域面源污染监测", "name" : "汾西小流域面源污染监测",
"appid" : "__UNI__44A8AB0", "appid" : "__UNI__44A8AB0",
"description" : "", "description" : "",
"versionName" : "2.2.22", "versionName" : "2.2.22",

170
packDetail/pages/analysis/index.vue
View File

@ -26,25 +26,28 @@
<view class="qsttitle"> <view class="qsttitle">
重要污染物趋势图 重要污染物趋势图
</view> </view>
<view class="search"> <view class="sxbox wrwCov">
<picker @change="bindPickerChange" :value="index" :range="array"> <view class="leftsxbox">
<view class="uni-input">{{array[index]}} <picker @change="bindPickerChange" :value="index" :range="array">
<image src="../../static/data_btn_sanjiao_xia.png"></image> <view class="uni-input">{{array[index]}}
</view> <image src="../../static/data_btn_sanjiao_xia.png"></image>
</picker> </view>
</picker>
</view>
<view class="rightsxbox">
<picker mode="date" :value="dateqs" :start="startDate" :end="endDate" @change="bindDateqsChange">
<view class="uni-input">{{dateqs}} <image src="../../static/data_btn_sanjiao_xia.png"></image></view>
</picker>
</view>
</view> </view>
<!-- 在template部分，找到年月日选择器部分，修改为以下代码 -->
<view class="uni-form-item uni-column"> <view class="uni-form-item uni-column">
<radio-group class="radio-group" @change="radioChange"> <radio-group class="radio-group" @change="radioChange">
<label class="radio-label" v-for="(item, index) in timList" :key="item.value"> <label class="radio-label" v-for="(item, index) in timList" :key="item.value">
<radio :value="item.value" :checked="index === current" /> <radio :value="item.value" :checked="index === current" class="radio-item" />
<view>{{item.name}}</view> <view class="radio-text">{{item.name}}</view>
</label> </label>
</radio-group> </radio-group>
</view>
<view class="uni-list-cell-db qstim">
<picker mode="date" :value="dateqs" :start="startDate" :end="endDate" @change="bindDateqsChange">
<view class="uni-input">{{dateqs}} <image src="../../static/data_btn_sanjiao_xia.png"></image></view>
</picker>
</view> </view>
<view class="qstcontent"> <view class="qstcontent">
<qiun-data-charts <qiun-data-charts
@ -158,17 +161,21 @@
padding: [15,10,0,15], padding: [15,10,0,15],
dataLabel: false, dataLabel: false,
dataPointShape: false, dataPointShape: false,
enableScroll: true, enableScroll: false,
legend: {}, legend: {},
xAxis: { xAxis: {
disableGrid: true, // 禁用网格线 // X全显示
type: 'grid', // 网格类型 disabled: true, // 禁用默认X轴
gridType: 'dash', // 虚线样式 itemCount: 3,
itemCount: 3, // 单屏显示数据数量 // 可滚动
scrollShow: true, // 显示滚动条 // disableGrid: true, // 禁用网格线
scrollAlign: 'left', // 滚动条初始位置 // type: 'grid', // 网格类型
scrollBackgroundColor: '#F7F7FF', // 滚动条背景色 // gridType: 'dash', // 虚线样式
scrollColor: '#DEE7F7' // 滚动条颜色 // itemCount: 3, // 单屏显示数据数量
// scrollShow: true, // 显示滚动条
// scrollAlign: 'left', // 滚动条初始位置
// scrollBackgroundColor: '#F7F7FF', // 滚动条背景色
// scrollColor: '#DEE7F7' // 滚动条颜色
}, },
yAxis: { yAxis: {
gridType: "dash", gridType: "dash",
@ -863,6 +870,11 @@
padding: 0 32rpx 0; padding: 0 32rpx 0;
margin-top: 32rpx; margin-top: 32rpx;
} }
.wrwCov{
width: 94%!important;
margin: 0 auto;
margin-top: 20rpx;
}
.uni-input { .uni-input {
width: 100%; width: 100%;
@ -1086,64 +1098,56 @@
} }
// 选择年月日 // 选择年月日
.radio-group { .radio-group {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin: 20rpx 32rpx 0; // margin: 20rpx 32rpx 0;
background: #F6F9FF; border-radius: 20rpx;
border-radius: 16rpx; padding: 8rpx;
.radio-label { // width: 60%;
display: flex; .radio-label {
align-items: center; display: flex;
padding: 16rpx 32rpx; align-items: center;
border-radius: 12rpx; padding: 12rpx 24rpx;
transition: all 0.3s ease; border-radius: 16rpx;
// background: #F6F9FF; transition: all 0.3s ease;
&:active { flex: 1;
background: rgba(15, 110, 254, 0.1); justify-content: center;
} margin: 0 4rpx;
.radio-item { &:active {
transform: scale(0.9); background: rgba(15, 110, 254, 0.1);
}
// 选中状态样式
&.radio-checked { // 选中状态背景
background-color: #0f6efe; &.checked {
border-color: #0f6efe; background: #0f6efe;
}
} .radio-text {
color: #ffffff;
.radio-text { font-weight: 600;
font-size: 28rpx; }
font-family: Source Han Sans SC; }
font-weight: 500;
color: #667482; .radio-item {
margin-left: 16rpx; transform: scale(0.8);
transition: color 0.3s ease; margin-right: 8rpx;
}
// 选中状态样式
// 选中状态的文字样式 &[checked] {
// .radio-item[checked] + .radio-text { color: #ffffff;
// color: #0f6efe; }
// font-weight: 600; }
// }
} .radio-text {
font-size: 24rpx;
font-family: Source Han Sans SC;
font-weight: 500;
color: #667482;
transition: color 0.3s ease;
white-space: nowrap;
}
}
} }
// 适配暗色模式
// @media (prefers-color-scheme: dark) {
// .radio-group {
// background: #1a1a1a;
// .radio-label {
// .radio-text {
// color: #fff;
// }
// .radio-item[checked] + .radio-text {
// color: #0f6efe;
// }
// }
// }
// }
.qstim{ .qstim{
width: 40%; width: 40%;
display: block; display: block;

2
pages.json
View File

@ -4,7 +4,7 @@
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "汾西县黄河流域面源污染监测", "navigationBarTitleText": "汾西小流域面源污染监测",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },

4
pages/index/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<view class="container"> <view class="container">
<uni-nav-bar :fixed="true" background-color="transparent" status-bar title="汾西县黄河流域面源污染监测" /> <uni-nav-bar :fixed="true" background-color="transparent" status-bar title="汾西小流域面源污染监测" />
<image src="../../static/home_top_bg.png" mode="" class="bgimg"></image> <image src="../../static/home_top_bg.png" mode="" class="bgimg"></image>
<scroll-view class="content" scroll-y="true" :style="{height:contentheight + 'rpx'}"> <scroll-view class="content" scroll-y="true" :style="{height:contentheight + 'rpx'}">
<view class="top_address"> <view class="top_address">
@ -1229,7 +1229,7 @@
getsssj() { getsssj() {
this.$http.post('/applet/wxclient/getNewestData').then(res => { this.$http.post('/applet/wxclient/getNewestData').then(res => {
this.list = res.data.data this.list = res.data.data
if (this.list) { if (this.list.length>0) {
for (var i = 0; i < this.list.length; i++) { for (var i = 0; i < this.list.length; i++) {
// console.log(Object.keys(this.list[i]),Object.keys(this.list[i]).length) // console.log(Object.keys(this.list[i]),Object.keys(this.list[i]).length)
this.list[i].wrwcode = [] this.list[i].wrwcode = []