feat():适配优化

master
李神峰 2024-06-13 16:22:28 +08:00
parent c6144980a8
commit 85ecd992bd
12 changed files with 82 additions and 67 deletions

View File

@ -1,7 +1,8 @@
<template> <template>
<view class="rain-detail-box"> <view class="rain-detail-box">
<u-status-bar></u-status-bar>
<view class="nav-bar"> <view class="nav-bar">
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon> <u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
<view class="title"> <view class="title">
{{stnm}} {{stnm}}
</view> </view>
@ -74,16 +75,18 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin-top: 30px; height: 44px;
padding-top: 20px; // margin-top: 30px;
padding-bottom: 10px; // padding-top: 20px;
// padding-bottom: 10px;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
box-shadow: 0 5px 10px -8px #dfdfdf inset; // box-shadow: 0 5px 10px -8px #dfdfdf inset;
} }
.title{ .title{
flex:1; flex:1;
text-align: center; text-align: center;
margin-right: 18px; margin-right: 18px;
font-size: 18px;
} }
.tab-bar{ .tab-bar{
display: flex; display: flex;

View File

@ -6,7 +6,7 @@
<div class="icon"> <div class="icon">
<image <image
style="width: 100%; height: 100%;border-radius: 50%;" style="width: 100%; height: 100%;border-radius: 50%;"
:src="default_src || default_img" :src="default_src"
mode="aspectFill" mode="aspectFill"
></image> ></image>
</div> </div>
@ -286,7 +286,6 @@ import moment from 'moment'
import {level} from "../../pages/utils/dicType" import {level} from "../../pages/utils/dicType"
import {disType} from "../utils/dicType.js" import {disType} from "../utils/dicType.js"
import drpOption from "./chartOption.js" import drpOption from "./chartOption.js"
import default_img from "../../static/tabs/touxiang.png"
export default { export default {
data () { data () {
return { return {
@ -335,7 +334,6 @@ export default {
readStatus:false, readStatus:false,
readYjStatus:false, readYjStatus:false,
default_src: uni.getStorageSync('avatar'), default_src: uni.getStorageSync('avatar'),
default_img
} }
}, },
computed: { computed: {

View File

@ -111,7 +111,7 @@
console.log('-----avatar------',uni.getStorageSync('avatar')); console.log('-----avatar------',uni.getStorageSync('avatar'));
}) })
} else { } else {
uni.setStorageSync('avatar','../../static/tabs/touxing.png') uni.setStorageSync('avatar','../../static/tabs/touxiang.png')
} }
}) })
} }

View File

@ -1,12 +1,12 @@
<template> <template>
<div class="table_div"> <div class="table_div">
<div class="table_cur"> <div class="table_cur">
<table style="width:100%"> <table style="width:100%;display:block">
<tr> <tr>
<th style="width: 10%;"> <th style="width: 11%;">
<div style="margin-top: 6px;">序号</div> <div style="margin-top: 6px;">序号</div>
</th> </th>
<th style="width: 28%"> <th style="width: 27%">
<div style="margin-top: 6px;">站名</div></th> <div style="margin-top: 6px;">站名</div></th>
<th style="width: 20%;"> <th style="width: 20%;">
<div>时段雨量</div> <div>时段雨量</div>
@ -21,8 +21,8 @@
</tr> </tr>
<div :style="{'max-height':height + 'px', 'overflow-y': 'auto',width:'100%'}"> <div :style="{'max-height':height + 'px', 'overflow-y': 'auto',width:'100%'}">
<tr v-for="(item, index) in list" :key="index" style="width:100%"> <tr v-for="(item, index) in list" :key="index" style="width:100%">
<td style="width: 10%;">{{ index + 1 }}</td> <td style="width: 11%;">{{ index + 1 }}</td>
<td style="width: 28%; color: #3399ef; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="jumpDetail(item)"> <td style="width: 27%; color: #3399ef; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="jumpDetail(item)">
{{ item.stnm }}</td> {{ item.stnm }}</td>
<td style="width: 20%">{{ item.drp || 0 }}</td> <td style="width: 20%">{{ item.drp || 0 }}</td>
<td style="width: 20%">{{ item.yesDrp || 0 }}</td> <td style="width: 20%">{{ item.yesDrp || 0 }}</td>

View File

@ -1,8 +1,10 @@
<template> <template>
<view class="rain-box" style="overflow:hidden"> <view class="rain-box" style="overflow:hidden">
<u-status-bar></u-status-bar>
<!-- <view style="height: var(--status-bar-height); width: 100%;"></view> -->
<view class="nav-bar"> <view class="nav-bar">
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon> <u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
<view> <view style="font-size:18px">
雨情 雨情
</view> </view>
<!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> --> <!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> -->
@ -101,10 +103,10 @@
</view> </view>
<!-- 时间段 --> <!-- 时间段 -->
<view style="padding: 5px 10px; text-align: center; color: #f7b156;"> <view style="padding: 1% 0%;width:100vw; text-align: center; color: #f7b156;">
统计时段{{tm.stm}}{{tm.etm}} 统计时段:{{tm.stm}}{{tm.etm}}
</view> </view>
<view style="margin: 0 10px;"> <view style="width:100%">
<Table :list="rainList" :height='tableHeight'/> <Table :list="rainList" :height='tableHeight'/>
</view> </view>
<u-picker <u-picker
@ -427,7 +429,7 @@
let that = this let that = this
uni.getSystemInfo({ uni.getSystemInfo({
success: (res) => { success: (res) => {
that.tableHeight = res.windowHeight - 300; that.tableHeight = res.windowHeight - 280;
console.log("this.tableHeight", that.tableHeight); console.log("this.tableHeight", that.tableHeight);
} }
}) })
@ -441,11 +443,12 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin-top: 30px; height: 44px;
padding-top: 20px; // margin-top: 30px;
padding-bottom: 10px; // padding-top: 40px;
// padding-bottom: 10px;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
box-shadow: 0 5px 10px -8px #dfdfdf inset; // box-shadow: 0 5px 10px -8px #dfdfdf inset;
} }
.search-box{ .search-box{
width: 100%; width: 100%;

View File

@ -1,7 +1,8 @@
<template> <template>
<view class="rain-detail-box"> <view class="rain-detail-box">
<u-status-bar></u-status-bar>
<view class="nav-bar"> <view class="nav-bar">
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon> <u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
<view class="title"> <view class="title">
{{stnm}} {{stnm}}
</view> </view>
@ -61,15 +62,17 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin-top: 30px; height: 44px;
padding-top: 20px; // margin-top: 30px;
padding-bottom: 10px; // padding-top: 20px;
// padding-bottom: 10px;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
box-shadow: 0 5px 10px -8px #dfdfdf inset; // box-shadow: 0 5px 10px -8px #dfdfdf inset;
} }
.title{ .title{
flex:1; flex:1;
text-align: center; text-align: center;
font-size: 18px;
} }
.tab-bar{ .tab-bar{
display: flex; display: flex;

View File

@ -1,7 +1,8 @@
<template> <template>
<view class="rain-detail-box"> <view class="rain-detail-box">
<u-status-bar></u-status-bar>
<view class="nav-bar"> <view class="nav-bar">
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon> <u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
<view class="title"> <view class="title">
{{stnm}} {{stnm}}
</view> </view>
@ -118,16 +119,18 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin-top: 30px; height: 44px;
padding-top: 20px; // margin-top: 30px;
padding-bottom: 10px; // padding-top: 20px;
// padding-bottom: 10px;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
box-shadow: 0 5px 10px -8px #dfdfdf inset; // box-shadow: 0 5px 10px -8px #dfdfdf inset;
} }
.title{ .title{
flex:1; flex:1;
text-align: center; text-align: center;
margin-right: 18px; margin-right: 18px;
font-size: 18px;
} }
.tab-bar{ .tab-bar{
// width: 100%; // width: 100%;

View File

@ -134,8 +134,9 @@
padding: 0 20px; padding: 0 20px;
} }
.content{ .content{
width: 100%;
margin-top: 10px; margin-top: 10px;
max-height: 580px; // max-height: 580px;
overflow-y: auto; overflow-y: auto;
} }

View File

@ -1,26 +1,26 @@
<template> <template>
<div class="table_div"> <div class="table_div">
<div class="table_cur" > <div class="table_cur" >
<table> <table style="width:100%;display:block">
<tr> <tr>
<th style="width: 50px;"> <th style="width: 11%;">
序号 序号
</th> </th>
<th style="width: 130px"> <th style="width: 32%">
站名 站名
<th style="width: 110px;"> <th style="width: 32%;">
监测时间 监测时间
</th> </th>
<th style="width: 100px;" > <th style="width: 25%;" >
实时水位(m) 实时水位(m)
</th> </th>
</tr> </tr>
<div :style="{'max-height':height + 'px', 'overflow-y': 'auto'}"> <div :style="{'max-height':height + 'px', 'overflow-y': 'auto'}">
<tr v-for="(item, index) in newList" :key="index"> <tr v-for="(item, index) in newList" :key="index">
<td style="width: 50px">{{ index + 1 }}</td> <td style="width: 11%">{{ index + 1 }}</td>
<td style="width: 130px;color: #3399ef;" @click="jumpDetail(item)">{{ item.stnm }}</td> <td style="width: 32%;color: #3399ef;" @click="jumpDetail(item)">{{ item.stnm }}</td>
<td style="width: 110px">{{item.tm}}</td> <td style="width: 32%">{{item.tm}}</td>
<td style="width: 100px; position: relative;" > <td style="width: 25%; position: relative;" >
<text :class="{'active1':item.gstate == 1,'active2':item.wstate == 1}">{{ item.z.toFixed(2) }}</text> <text :class="{'active1':item.gstate == 1,'active2':item.wstate == 1}">{{ item.z.toFixed(2) }}</text>
<text v-if="item.state == 1" <text v-if="item.state == 1"
style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;"></text> style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;"></text>
@ -84,10 +84,10 @@
} }
.table_cur tr { .table_cur tr {
display: flex; display: flex;
line-height: 56rpx; line-height: 80rpx;
} }
.table_cur th { .table_cur th {
height: 56rpx; height: 80rpx;
color: #3399ef; color: #3399ef;
background: #e1f3ff; background: #e1f3ff;
font-size: 14px; font-size: 14px;

View File

@ -133,8 +133,9 @@
padding: 0 20px; padding: 0 20px;
} }
.content{ .content{
width: 100%;
margin-top: 10px; margin-top: 10px;
max-height: 580px; // max-height: 580px;
overflow-y: auto; overflow-y: auto;
} }

View File

@ -1,36 +1,36 @@
<template> <template>
<div class="table_div"> <div class="table_div">
<div class="table_cur"> <div class="table_cur">
<table> <table style="width:100%;display:block">
<tr> <tr>
<th style="width: 40px;"> <th style="width: 11%;">
序号 序号
</th> </th>
<th style="width: 90px"> <th style="width: 24%">
站名 站名
<th style="width: 80px;"> <th style="width: 22%;">
监测时间 监测时间
</th> </th>
<th style="width: 100px;" > <th style="width: 25%;" >
实时水位(m) 实时水位(m)
</th> </th>
<th style="width: 90px;" > <th style="width: 20%;" >
超汛限(m) 超汛限(m)
</th> </th>
</tr> </tr>
<div :style="{'max-height':height + 'px', 'overflow-y': 'auto'}"> <div :style="{'max-height':height + 'px', 'overflow-y': 'auto'}">
<tr v-for="(item, index) in newList" :key="index"> <tr v-for="(item, index) in newList" :key="index">
<td style="width: 40px">{{ index + 1 }}</td> <td style="width: 11%">{{ index + 1 }}</td>
<td style="width: 90px;color: #3399ef;" @click="jumpDetail(item)">{{ item.stnm }}</td> <td style="width: 24%;color: #3399ef;" @click="jumpDetail(item)">{{ item.stnm }}</td>
<td style="width: 80px">{{item.tm}}</td> <td style="width: 22%">{{item.tm}}</td>
<td style="width: 100px; position: relative;" > <td style="width: 25%; position: relative;" >
<text :class="{'active1':item.flState == 1,'active2':item.desState == 1,'active3':item.calState}">{{ item.rz.toFixed(2) }}</text> <text :class="{'active1':item.flState == 1,'active2':item.desState == 1,'active3':item.calState}">{{ item.rz.toFixed(2) }}</text>
<text v-if="item.state == 1" <text v-if="item.state == 1"
style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;"></text> style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;"></text>
<text v-else-if="item.state == 2" style="position: absolute; <text v-else-if="item.state == 2" style="position: absolute;
top:0px;right: 0; color: #32E48E; font-size: 18px;"></text> top:0px;right: 0; color: #32E48E; font-size: 18px;"></text>
</td> </td>
<td style="width: 90px">{{item.afsltdz ? item.afsltdz.toFixed(2):'-'}}</td> <td style="width: 20%">{{item.afsltdz ? item.afsltdz.toFixed(2):'-'}}</td>
</tr> </tr>
</div> </div>
</table> </table>
@ -89,10 +89,10 @@
} }
.table_cur tr { .table_cur tr {
display: flex; display: flex;
line-height: 56rpx; line-height: 80rpx;
} }
.table_cur th { .table_cur th {
height: 56rpx; height: 80rpx;
color: #3399ef; color: #3399ef;
background: #e1f3ff; background: #e1f3ff;
font-size: 14px; font-size: 14px;

View File

@ -1,7 +1,8 @@
<template> <template>
<view class="water-box"> <view class="water-box">
<u-status-bar></u-status-bar>
<view class="nav-bar"> <view class="nav-bar">
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon> <u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
<view class="title"> <view class="title">
水情 水情
</view> </view>
@ -46,7 +47,7 @@
let that = this let that = this
uni.getSystemInfo({ uni.getSystemInfo({
success: (res) => { success: (res) => {
that.tableHeight = res.windowHeight - 240; that.tableHeight = res.windowHeight - 220;
console.log("that.tableHeight",that.tableHeight); console.log("that.tableHeight",that.tableHeight);
} }
}) })
@ -61,16 +62,18 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin-top: 30px; height: 44px;
padding-top: 20px; // margin-top: 30px;
padding-bottom: 10px; // padding-top: 40px;
// padding-bottom: 10px;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
box-shadow: 0 5px 10px -8px #dfdfdf inset; // box-shadow: 0 5px 10px -8px #dfdfdf inset;
} }
.title{ .title{
flex:1; flex:1;
text-align: center; text-align: center;
margin-right: 15px; margin-right: 15px;
font-size: 18px;
} }
.tab-bar{ .tab-bar{
display: flex; display: flex;