样式修改
This commit is contained in:
978184212@qq.com
parent
feee3428d3
commit
04a4cc4ac1
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name" : "汾西县黄河流域面源污染监测",
|
||||
"name" : "汾西小流域面源污染监测",
|
||||
"appid" : "__UNI__44A8AB0",
|
||||
"description" : "",
|
||||
"versionName" : "2.2.22",
|
||||
|
|
|
|||
|
|
@ -26,25 +26,28 @@
|
|||
<view class="qsttitle">
|
||||
重要污染物趋势图
|
||||
</view>
|
||||
<view class="search">
|
||||
<picker @change="bindPickerChange" :value="index" :range="array">
|
||||
<view class="uni-input">{{array[index]}}
|
||||
<image src="../../static/data_btn_sanjiao_xia.png"></image>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="sxbox wrwCov">
|
||||
<view class="leftsxbox">
|
||||
<picker @change="bindPickerChange" :value="index" :range="array">
|
||||
<view class="uni-input">{{array[index]}}
|
||||
<image src="../../static/data_btn_sanjiao_xia.png"></image>
|
||||
</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>
|
||||
<!-- 在template部分，找到年月日选择器部分，修改为以下代码 -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<radio-group class="radio-group" @change="radioChange">
|
||||
<label class="radio-label" v-for="(item, index) in timList" :key="item.value">
|
||||
<radio :value="item.value" :checked="index === current" />
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</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>
|
||||
<radio-group class="radio-group" @change="radioChange">
|
||||
<label class="radio-label" v-for="(item, index) in timList" :key="item.value">
|
||||
<radio :value="item.value" :checked="index === current" class="radio-item" />
|
||||
<view class="radio-text">{{item.name}}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="qstcontent">
|
||||
<qiun-data-charts
|
||||
|
|
@ -158,17 +161,21 @@
|
|||
padding: [15,10,0,15],
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
enableScroll: true,
|
||||
enableScroll: false,
|
||||
legend: {},
|
||||
xAxis: {
|
||||
disableGrid: true, // 禁用网格线
|
||||
type: 'grid', // 网格类型
|
||||
gridType: 'dash', // 虚线样式
|
||||
itemCount: 3, // 单屏显示数据数量
|
||||
scrollShow: true, // 显示滚动条
|
||||
scrollAlign: 'left', // 滚动条初始位置
|
||||
scrollBackgroundColor: '#F7F7FF', // 滚动条背景色
|
||||
scrollColor: '#DEE7F7' // 滚动条颜色
|
||||
// X全显示
|
||||
disabled: true, // 禁用默认X轴
|
||||
itemCount: 3,
|
||||
// 可滚动
|
||||
// disableGrid: true, // 禁用网格线
|
||||
// type: 'grid', // 网格类型
|
||||
// gridType: 'dash', // 虚线样式
|
||||
// itemCount: 3, // 单屏显示数据数量
|
||||
// scrollShow: true, // 显示滚动条
|
||||
// scrollAlign: 'left', // 滚动条初始位置
|
||||
// scrollBackgroundColor: '#F7F7FF', // 滚动条背景色
|
||||
// scrollColor: '#DEE7F7' // 滚动条颜色
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
|
|
@ -863,6 +870,11 @@
|
|||
padding: 0 32rpx 0;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.wrwCov{
|
||||
width: 94%!important;
|
||||
margin: 0 auto;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
width: 100%;
|
||||
|
|
@ -1086,64 +1098,56 @@
|
|||
}
|
||||
// 选择年月日
|
||||
.radio-group {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 20rpx 32rpx 0;
|
||||
background: #F6F9FF;
|
||||
border-radius: 16rpx;
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.3s ease;
|
||||
// background: #F6F9FF;
|
||||
&:active {
|
||||
background: rgba(15, 110, 254, 0.1);
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
transform: scale(0.9);
|
||||
|
||||
// 选中状态样式
|
||||
&.radio-checked {
|
||||
background-color: #0f6efe;
|
||||
border-color: #0f6efe;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
color: #667482;
|
||||
margin-left: 16rpx;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
// 选中状态的文字样式
|
||||
// .radio-item[checked] + .radio-text {
|
||||
// color: #0f6efe;
|
||||
// font-weight: 600;
|
||||
// }
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
// margin: 20rpx 32rpx 0;
|
||||
border-radius: 20rpx;
|
||||
padding: 8rpx;
|
||||
// width: 60%;
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
transition: all 0.3s ease;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
margin: 0 4rpx;
|
||||
|
||||
&:active {
|
||||
background: rgba(15, 110, 254, 0.1);
|
||||
}
|
||||
|
||||
// 选中状态背景
|
||||
&.checked {
|
||||
background: #0f6efe;
|
||||
|
||||
.radio-text {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
transform: scale(0.8);
|
||||
margin-right: 8rpx;
|
||||
|
||||
// 选中状态样式
|
||||
&[checked] {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.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{
|
||||
width: 40%;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "汾西县黄河流域面源污染监测",
|
||||
"navigationBarTitleText": "汾西小流域面源污染监测",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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>
|
||||
<scroll-view class="content" scroll-y="true" :style="{height:contentheight + 'rpx'}">
|
||||
<view class="top_address">
|
||||
|
|
@ -1229,7 +1229,7 @@
|
|||
getsssj() {
|
||||
this.$http.post('/applet/wxclient/getNewestData').then(res => {
|
||||
this.list = res.data.data
|
||||
if (this.list) {
|
||||
if (this.list.length>0) {
|
||||
for (var i = 0; i < this.list.length; i++) {
|
||||
// console.log(Object.keys(this.list[i]),Object.keys(this.list[i]).length)
|
||||
this.list[i].wrwcode = []
|
||||
|
|
|
|||
Loading…
Reference in New Issue