|
|
@@ -0,0 +1,544 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="timeandtype">
|
|
|
+ <view class="timebox">
|
|
|
+ <view class="firsttime" @click="timeshow=true">
|
|
|
+ <view class="" v-if="start_time!=''">
|
|
|
+ {{start_time/1000|timeFormat()}}
|
|
|
+ </view>
|
|
|
+ <view class="" v-else>
|
|
|
+ {{start_time==""?'请选择开始时间':start_time}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="jiange">
|
|
|
+ -
|
|
|
+ </view>
|
|
|
+ <view class="endtime" @click="timeshow=true">
|
|
|
+ <view class="" v-if="end_time!=''">
|
|
|
+ {{end_time/1000|timeFormat()}}
|
|
|
+ </view>
|
|
|
+ <view class="" v-else>
|
|
|
+ {{end_time==""?'请选择结束时间':end_time}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shuju_one">
|
|
|
+ <view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
+ <view class="canvastishi" v-if="dataloadingtf">
|
|
|
+ <p class="dataloading">加载中</p>
|
|
|
+ </view>
|
|
|
+ <canvas v-if="canvastishiTF" v-show="!timeshow" canvas-id="canvasColumnA" id="canvasColumnA" class="charts" @touchstart="touchLineA($event)"
|
|
|
+ @touchmove="moveLineA($event)" @touchend="touchEndLineA($event)" disable-scroll=true :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
|
|
|
+ </view>
|
|
|
+ <view class="shuju_one">
|
|
|
+ <view class="canvastishi" v-if="!canvastishiTF2 && !dataloadingtf2">
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
+ <view class="canvastishi" v-if="dataloadingtf2">
|
|
|
+ <p class="dataloading">加载中</p>
|
|
|
+ </view>
|
|
|
+ <canvas v-if="canvastishiTF2" v-show="!timeshow" canvas-id="canvasColumnB" id="canvasColumnB" class="charts" @touchstart="touchLineB($event)"
|
|
|
+ @touchmove="moveLineB($event)" @touchend="touchEndLineB($event)" disable-scroll=true :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
|
|
|
+ </view>
|
|
|
+ <view class="condition">
|
|
|
+ <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
|
|
|
+ <table class="table" v-if="$QueryPermission(267)">
|
|
|
+ <tr class="tr">
|
|
|
+ <th class="th" v-for="(item,index) in thdata" :key="'a'+index">{{item}}</th>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs" v-if="!forbidden">
|
|
|
+ <td class="td">{{items.d_h_t.addtime|timeFormat()}}</td>
|
|
|
+ <td class="td">{{Circulation.highVolt.value[items.d_h_t.highVolt]}}</td>
|
|
|
+ <td class="td">{{Circulation.light.value[items.d_h_t.light]}}</td>
|
|
|
+ <td class="td">{{items.d_h_t.temperature}}</td>
|
|
|
+ <td class="td">{{items.d_h_t.humidity}}</td>
|
|
|
+ <td class="td">{{items.d_h_t.illumination}}</td>
|
|
|
+ <td class="td">{{Circulation.rainFall.value[items.d_h_t.rainFall]}}</td>
|
|
|
+ <td class="td">{{Circulation.rectifier.value[items.d_h_t.rectifier]}}</td>
|
|
|
+ <td class="td">{{Circulation.chargeStatus.value[items.d_h_t.chargeStatus]}}</td>
|
|
|
+ <td class="td">{{items.d_h_t.bugCount}}</td>
|
|
|
+ <td class="td">{{Circulation.rectifier.value[items.d_h_t.solarStatus]}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-if="forbidden">
|
|
|
+ <td class="td" v-for="item in 11">暂无数据</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <table class="table" v-else>
|
|
|
+ <tr class="tr">
|
|
|
+ <th class="th" v-for="(item,index) in thdata2" :key="'a'+index">{{item}}</th>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs" v-if="!forbidden">
|
|
|
+ <td class="td">{{items.d_h_t.addtime|timeFormat()}}</td>
|
|
|
+ <td class="td">{{Circulation.highVolt.value[items.d_h_t.highVolt]}}</td>
|
|
|
+ <td class="td">{{Circulation.light.value[items.d_h_t.light]}}</td>
|
|
|
+ <td class="td">{{items.d_h_t.temperature}}</td>
|
|
|
+ <td class="td">{{items.d_h_t.humidity}}</td>
|
|
|
+ <td class="td">{{Circulation.chargeStatus.value[items.d_h_t.chargeStatus]}}</td>
|
|
|
+ <td class="td">{{items.d_h_t.bugCount}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-if="forbidden">
|
|
|
+ <td class="td" v-for="item in 7">暂无数据</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="pagenumber">
|
|
|
+ <button @click="prev">上一页</button>
|
|
|
+ <view class="pagenumber_page">
|
|
|
+ 第 {{page}} 页
|
|
|
+ </view>
|
|
|
+ <view class="pagenumber_page">
|
|
|
+ 共 {{pagesum}} 页
|
|
|
+ </view>
|
|
|
+ <button @click="next" :disabled="forbidden">下一页</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-calendar v-model="timeshow" :mode="mode" @change="timechange"></u-calendar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
|
|
|
+ import Circulation from "../../../static/js/equipState_dict.json"
|
|
|
+ var canvaColumnA = null;
|
|
|
+ var canvaColumnB = null
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ start_time:"",
|
|
|
+ end_time:"",
|
|
|
+ timeshow:false,
|
|
|
+ mode: 'range',
|
|
|
+ cWidth: '400',
|
|
|
+ cHeight: '400',
|
|
|
+ pixelRatio: 1,
|
|
|
+ canvastishiTF:false,
|
|
|
+ dataloadingtf:false,
|
|
|
+ canvastishiTF2:false,
|
|
|
+ dataloadingtf2:false,
|
|
|
+ equipInfo:{},
|
|
|
+ historylistdata: [],
|
|
|
+ thdata: [
|
|
|
+ "上报时间","高压网状态","灯管状态","环境温度(℃)","环境湿度(%)","光照度LUX","下雨传感","整流器状态","充电状态","杀虫数(累计)","太阳板状态",
|
|
|
+ ],
|
|
|
+ thdata2: [
|
|
|
+ "上报时间","高压网状态","灯管状态","环境温度(℃)","环境湿度(%)","充电状态","杀虫数(累计)",
|
|
|
+ ],
|
|
|
+ page:1,
|
|
|
+ pagesum:"10",
|
|
|
+ Circulation:Circulation,
|
|
|
+ forbidden:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ timechange(e){
|
|
|
+ this.start_time = +new Date(e.startDate)
|
|
|
+ this.end_time = +new Date(e.endDate)
|
|
|
+ this.history()
|
|
|
+ this.getworm()
|
|
|
+ this.getwind()
|
|
|
+ },
|
|
|
+ async history() { //历史数据列表折线图
|
|
|
+ this.dataloadingtf = true
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=forecast.worm_lamp.zjxy_at_ah',
|
|
|
+ data: {
|
|
|
+ device_type_id: 8,
|
|
|
+ d_id: this.equipInfo.d_id,
|
|
|
+ start_time: Math.floor(+new Date(this.start_time) / 1000),
|
|
|
+ end_time: Math.floor(+new Date(this.end_time) / 1000),
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res)
|
|
|
+ this.dataloadingtf = false
|
|
|
+ this.historydatas = res
|
|
|
+ console.log(this.historydatas)
|
|
|
+ if (this.historydatas.length == 0) {
|
|
|
+ this.canvastishiTF = false
|
|
|
+ } else {
|
|
|
+ this.canvastishiTF = true
|
|
|
+
|
|
|
+ var arr1 = []
|
|
|
+ var arr2 = []
|
|
|
+ var arr3 = []
|
|
|
+ var xtitle = []
|
|
|
+ for (var i = 0; i < res.length; i++) {
|
|
|
+ var times = new Date(res[i].addtime * 1000)
|
|
|
+ xtitle.push(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getMinutes())
|
|
|
+ arr1.push(res[i].at == "" ? "0" : res[i].at)
|
|
|
+ arr2.push(res[i].ah == "" ? "0" : res[i].ah)
|
|
|
+ }
|
|
|
+ // console.log(arr1)
|
|
|
+ var obj = [{
|
|
|
+ name: '温度',
|
|
|
+ data: arr1,
|
|
|
+ color: '#00E29D'
|
|
|
+ }, {
|
|
|
+ name: '湿度',
|
|
|
+ data: arr2,
|
|
|
+ color: '#6CBBFF'
|
|
|
+ }]
|
|
|
+ this.showColumn("canvasColumnA", xtitle, obj)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getworm() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=forecast.worm_lamp.zjxycb_pest_chart',
|
|
|
+ data: {
|
|
|
+ d_id: this.equipInfo.d_id,
|
|
|
+ start_time: Math.floor(+new Date(this.start_time) / 1000),
|
|
|
+ end_time: Math.floor(+new Date(this.end_time) / 1000),
|
|
|
+ device_type_id: "8",
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res)
|
|
|
+ this.dataloadingtf2 = false
|
|
|
+ var data = res.pest_data
|
|
|
+ if (data.length == 0) {
|
|
|
+ this.canvastishiTF2 = false
|
|
|
+ } else {
|
|
|
+ this.canvastishiTF2 = true
|
|
|
+
|
|
|
+ var arr1 = []
|
|
|
+ var xtitle = []
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var times = new Date(data[i].addtime * 1000)
|
|
|
+ xtitle.push(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getMinutes())
|
|
|
+ arr1.push(data[i].pest_num == "" ? "0" : data[i].pest_num)
|
|
|
+ }
|
|
|
+ // console.log(arr1)
|
|
|
+ var obj = [{
|
|
|
+ name: '诱虫次数',
|
|
|
+ data: arr1,
|
|
|
+ color: '#00E29D'
|
|
|
+ }]
|
|
|
+ this.showColumn2("canvasColumnB", xtitle, obj)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getwind() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=forecast.worm_lamp.zjxy_history_data',
|
|
|
+ data: {
|
|
|
+ d_id: this.equipInfo.d_id,
|
|
|
+ start_time: Math.floor(+new Date(this.start_time) / 1000),
|
|
|
+ end_time: Math.floor(+new Date(this.end_time) / 1000),
|
|
|
+ device_id: this.equipInfo.imei,
|
|
|
+ page: this.page,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res)
|
|
|
+ if(res.data.length){
|
|
|
+ this.historylistdata = res.data
|
|
|
+ this.pagesum = Math.ceil(res.counts/10)
|
|
|
+ this.forbidden = false
|
|
|
+ }else{
|
|
|
+ this.forbidden = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ prev() { //上一页
|
|
|
+ if (this.page > 1) {
|
|
|
+ this.page--
|
|
|
+ this.getwind()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ next() { //下一页
|
|
|
+ if(this.page < this.pagesum){
|
|
|
+ this.page++
|
|
|
+ this.getwind()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showColumn(id, xtitle, xinfo) {
|
|
|
+ var _self = this
|
|
|
+ canvaColumnA = new uCharts({
|
|
|
+ canvasId: id,
|
|
|
+ type: 'line',
|
|
|
+ legend: {
|
|
|
+ position: "top"
|
|
|
+ },
|
|
|
+ fontSize: 11,
|
|
|
+ background: '#FFFFFF',
|
|
|
+ pixelRatio: 1,
|
|
|
+ animation: true,
|
|
|
+ dataLabel: false,
|
|
|
+ categories: xtitle,
|
|
|
+ series: xinfo,
|
|
|
+ enableScroll: true, //开启图表拖拽功能
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true,
|
|
|
+ type: 'grid',
|
|
|
+ gridType: 'dash',
|
|
|
+ itemCount: 4, //x轴单屏显示数据的数量,默认为5个
|
|
|
+ scrollShow: true, //新增是否显示滚动条,默认false
|
|
|
+ // scrollAlign: 'left', //滚动条初始位置
|
|
|
+ scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
|
|
|
+ scrollColor: '#DEE7F7', //默认为 #A6A6A6
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ width: _self.cWidth * 1,
|
|
|
+ height: _self.cHeight * 1,
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: 'curve'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showColumn2(id, xtitle, xinfo) {
|
|
|
+ var _self = this
|
|
|
+ canvaColumnB = new uCharts({
|
|
|
+ canvasId: id,
|
|
|
+ type: 'line',
|
|
|
+ legend: {
|
|
|
+ position: "top"
|
|
|
+ },
|
|
|
+ fontSize: 11,
|
|
|
+ background: '#FFFFFF',
|
|
|
+ pixelRatio: 1,
|
|
|
+ animation: true,
|
|
|
+ dataLabel: false,
|
|
|
+ categories: xtitle,
|
|
|
+ series: xinfo,
|
|
|
+ enableScroll: true, //开启图表拖拽功能
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true,
|
|
|
+ type: 'grid',
|
|
|
+ gridType: 'dash',
|
|
|
+ itemCount: 4, //x轴单屏显示数据的数量,默认为5个
|
|
|
+ scrollShow: true, //新增是否显示滚动条,默认false
|
|
|
+ // scrollAlign: 'left', //滚动条初始位置
|
|
|
+ scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
|
|
|
+ scrollColor: '#DEE7F7', //默认为 #A6A6A6
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ width: _self.cWidth * 1,
|
|
|
+ height: _self.cHeight * 1,
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: 'curve'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ touchLineA(e) {
|
|
|
+ console.log(e)
|
|
|
+ canvaColumnA.scrollStart(e);
|
|
|
+ },
|
|
|
+ moveLineA(e) {
|
|
|
+ canvaColumnA.scroll(e);
|
|
|
+ },
|
|
|
+ touchEndLineA(e) {
|
|
|
+ canvaColumnA.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvaColumnA.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ touchLineB(e) {
|
|
|
+ console.log(e)
|
|
|
+ canvaColumnB.scrollStart(e);
|
|
|
+ },
|
|
|
+ moveLineB(e) {
|
|
|
+ canvaColumnB.scroll(e);
|
|
|
+ },
|
|
|
+ touchEndLineB(e) {
|
|
|
+ canvaColumnB.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvaColumnB.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.equipInfo = option
|
|
|
+ console.log(option)
|
|
|
+ this.end_time = +new Date()
|
|
|
+ this.start_time = +new Date()-30*24*60*60*1000
|
|
|
+ this.cWidth = uni.upx2px(650);
|
|
|
+ this.cHeight = uni.upx2px(500);
|
|
|
+ this.history()
|
|
|
+ this.getworm()
|
|
|
+ this.getwind()
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .timeandtype {
|
|
|
+ // background-color: #F6F6FB;
|
|
|
+ // padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 90%;
|
|
|
+ margin: 40rpx auto 0;
|
|
|
+ .timebox {
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ display: flex;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ border-top-left-radius: 5px;
|
|
|
+
|
|
|
+ .jiange {
|
|
|
+ width: 5%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .firsttime,
|
|
|
+ .endtime {
|
|
|
+ width: 45%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .warntypebox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ border-top: 1px solid #F6F6FB;
|
|
|
+ border-bottom-right-radius: 5px;
|
|
|
+ border-bottom-left-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shuju_one {
|
|
|
+ position: relative;
|
|
|
+ width: 90%;
|
|
|
+ margin: 30rpx auto;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ height: 550rpx;
|
|
|
+
|
|
|
+ .canvastishi {
|
|
|
+ font-size: 32rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -64rpx;
|
|
|
+ margin-top: -21rpx;
|
|
|
+ .dataloading:after {
|
|
|
+ overflow: hidden;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: bottom;
|
|
|
+ animation: ellipsis 2s infinite;
|
|
|
+ content: "\2026";
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes ellipsis {
|
|
|
+ from {
|
|
|
+ width: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ width: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shuju_one_title {
|
|
|
+ width: 70%;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tltle_text {
|
|
|
+ width: 25%;
|
|
|
+ border: 2rpx solid #B2B2B2;
|
|
|
+ color: #57c878;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_text_color {
|
|
|
+ width: 25%;
|
|
|
+ border: 2rpx solid #57c878;
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.u-calendar__action {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .u-calendar__action__text {
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .condition {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 90%;
|
|
|
+ margin: 30rpx auto;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .scroll-X {
|
|
|
+ width: 95%;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ .table{
|
|
|
+ width: 1416px;
|
|
|
+ }
|
|
|
+ .tr {
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .th,
|
|
|
+ .td {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 5rpx;
|
|
|
+ width: 240rpx;
|
|
|
+ text-align: center;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border: 2rpx solid #F1F1F1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .th:first-child,
|
|
|
+ .td:first-child {
|
|
|
+ width: 300rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tr:nth-child(2n-1){
|
|
|
+ background-color: #f5fff8;
|
|
|
+ }
|
|
|
+ .tr:first-child{
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagenumber {
|
|
|
+ display: flex;
|
|
|
+ margin: 20rpx auto;
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagenumber_page {
|
|
|
+ // width: 100rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|