|
|
@@ -67,162 +67,407 @@
|
|
|
<view class="body">
|
|
|
<u-radio-group v-model="radiovalue" @change="radioGroupChange">
|
|
|
<u-radio @change="radioChange" v-for="(item, index) in radiolist" :key="index"
|
|
|
- :name="item.value" >
|
|
|
+ :name="item.value">
|
|
|
{{item.name}}
|
|
|
</u-radio>
|
|
|
</u-radio-group>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="statistics ">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>车位平均占用率(%)</view>
|
|
|
- <view class="tag">2025年1月<u-icon name="arrow-down"></u-icon></view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body2">
|
|
|
- <view class="body2lineChart">
|
|
|
-
|
|
|
- <view id="body2line1" class="body2line">
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="statistics ">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>地锁历史异常状态</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body1">
|
|
|
- <view class="body1pieChart">
|
|
|
-
|
|
|
- <view id="body1pie1" class="body1pie">
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="statistics ">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>高频使用时段分布</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body3">
|
|
|
- <view class="body3barChart">
|
|
|
-
|
|
|
- <view id="body3bar1" class="body3bar">
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="statistics ">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>用户停留时长分群特征</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body4">
|
|
|
- <view class="body4pieChart">
|
|
|
-
|
|
|
- <view id="body4pie1" class="body4pie">
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>车位平均占用率(%)</view>
|
|
|
+ <view class="tag">2025年1月<u-icon name="arrow-down"></u-icon></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body2">
|
|
|
+ <view class="body2lineChart">
|
|
|
+
|
|
|
+ <view id="body2line1" class="body2line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>地锁历史异常状态</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body1">
|
|
|
+ <view class="body1pieChart">
|
|
|
+
|
|
|
+ <view id="body1pie1" class="body1pie">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>高频使用时段分布</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body3">
|
|
|
+ <view class="body3barChart">
|
|
|
+
|
|
|
+ <view id="body3bar1" class="body3bar">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>用户停留时长分群特征</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body4">
|
|
|
+ <view class="body4pieChart">
|
|
|
+
|
|
|
+ <view id="body4pie1" class="body4pie">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>高频使用用户TOP5</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body5">
|
|
|
+ <view class="body5data">
|
|
|
+ <view class="line">
|
|
|
+ <view class="data">
|
|
|
+ <view class="item">
|
|
|
+ 王二
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 鄂DDT1268
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 28次
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goto">
|
|
|
+ <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line">
|
|
|
+ <view class="data">
|
|
|
+ <view class="item">
|
|
|
+ 王三
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 鄂DDT1268
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 8次
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goto">
|
|
|
+ <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- end-->
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>白名单用户清单</view>
|
|
|
+ <view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body7">
|
|
|
+ <view class="body7data">
|
|
|
+ <view class="line">
|
|
|
+
|
|
|
+ <view class="value">
|
|
|
+ 用户姓名
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 车主身份
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 使用次数
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="line">
|
|
|
+
|
|
|
+ <view class="value">
|
|
|
+ 孙培军
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 车位所有人
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 22
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="line">
|
|
|
+
|
|
|
+ <view class="value">
|
|
|
+ 刘洋
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 白名单用户
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 11
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- end-->
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>车位异常记录</view>
|
|
|
+
|
|
|
+ <view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body6">
|
|
|
+ <view class="body6main">
|
|
|
+ <view class="line" v-for="(item,index) in abnormalRecordsList" :key="index">
|
|
|
+ <view class="abnormal-item">
|
|
|
+ <!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
|
|
|
+ -->
|
|
|
+ <view class="item-title">
|
|
|
+
|
|
|
+ <view class="name">
|
|
|
+ <span v-if="item.level==1" class="level level1 ">一级</span>
|
|
|
+ <span v-if="item.level==2" class="level level2">二级</span>
|
|
|
+
|
|
|
+ {{item.content}}
|
|
|
+ </view>
|
|
|
+ <view class="date"
|
|
|
+ style="display: flex; justify-content: space-between;margin-top: 4rpx;">
|
|
|
+ <view>{{item.title}}</view>
|
|
|
+ <view>{{item.createTime}}</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- end-->
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>地锁信息</view>
|
|
|
+
|
|
|
+ <view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body8">
|
|
|
+ <view class="body8main">
|
|
|
+ <view class="line">
|
|
|
+ <view class="value">
|
|
|
+ 类型
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 设备编号
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 设备地址
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="line">
|
|
|
+ <view class="value">
|
|
|
+ 智能地锁
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ JPDJ01-0002
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 软件园软件园软件园软件园软件园软件园
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- end-->
|
|
|
+ <u-divider border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
- import jpContent from '@/components/JPcontent.vue'
|
|
|
- import * as echarts from 'echarts';
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
-
|
|
|
- jpContent
|
|
|
+<script>
|
|
|
+ import jpContent from '@/components/JPcontent.vue'
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+
|
|
|
+ jpContent
|
|
|
},
|
|
|
data() {
|
|
|
- return {
|
|
|
- echartsList: {},
|
|
|
- jpContentMap: {
|
|
|
- body1: 2,
|
|
|
- body2: 2,
|
|
|
- body3: 2,
|
|
|
- body4: 2,
|
|
|
- body5: 2,
|
|
|
- body6: 2,
|
|
|
- body7: 2,
|
|
|
- body8: 2,
|
|
|
- body9: 2,
|
|
|
- body10: 2,
|
|
|
+ return {
|
|
|
+ echartsList: {},
|
|
|
+ jpContentMap: {
|
|
|
+ body1: 2,
|
|
|
+ body2: 2,
|
|
|
+ body3: 2,
|
|
|
+ body4: 2,
|
|
|
+ body5: 2,
|
|
|
+ body6: 2,
|
|
|
+ body7: 2,
|
|
|
+ body8: 2,
|
|
|
+ body9: 2,
|
|
|
+ body10: 2,
|
|
|
},
|
|
|
title: "软件园",
|
|
|
backgroundObj: {
|
|
|
background: '#307AF6'
|
|
|
- },
|
|
|
- radiovalue:"2",
|
|
|
+ },
|
|
|
+ radiovalue: "2",
|
|
|
radiolist: [{
|
|
|
name: '上月',
|
|
|
value: "2"
|
|
|
@@ -247,21 +492,36 @@
|
|
|
name: '指定时间',
|
|
|
value: "10"
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ abnormalRecordsList: [{
|
|
|
+ level: 1,
|
|
|
+ content: "1111111",
|
|
|
+ title: "11",
|
|
|
+ createTime: "123:123"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: 2,
|
|
|
+ content: "1111111",
|
|
|
+ title: "11",
|
|
|
+ createTime: "123:123"
|
|
|
+ }
|
|
|
+ ],
|
|
|
};
|
|
|
- },onLoad() {
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
|
|
|
},
|
|
|
onReady() {
|
|
|
this.init();
|
|
|
},
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- this.getbody1()
|
|
|
- this.getbody2()
|
|
|
- this.getbody3()
|
|
|
- this.getbody4()
|
|
|
- },getbody1() {
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.getbody1()
|
|
|
+ this.getbody2()
|
|
|
+ this.getbody3()
|
|
|
+ this.getbody4()
|
|
|
+ },
|
|
|
+ getbody1() {
|
|
|
var key = "body1pie1"
|
|
|
var myChart = this.echartsList[key];
|
|
|
if (!myChart) {
|
|
|
@@ -287,20 +547,31 @@
|
|
|
|
|
|
type: 'pie',
|
|
|
radius: ['80%', '50%'],
|
|
|
- radius: [45, 60],
|
|
|
+ radius: [35, 50],
|
|
|
data: [{
|
|
|
+ itemStyle: {
|
|
|
+ color: "#EB3C31"
|
|
|
+ },
|
|
|
value: 1048,
|
|
|
- name: '0.5小时\n20%'
|
|
|
+ name: '0.5小时\n20%',
|
|
|
+
|
|
|
},
|
|
|
{
|
|
|
+ itemStyle: {
|
|
|
+ color: "#EF8132"
|
|
|
+ },
|
|
|
+
|
|
|
value: 735,
|
|
|
name: '2小时\n10%'
|
|
|
},
|
|
|
{
|
|
|
+ itemStyle: {
|
|
|
+ color: "#929292"
|
|
|
+ },
|
|
|
value: 580,
|
|
|
name: '2-6小时\n30%'
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
|
|
|
]
|
|
|
|
|
|
@@ -308,7 +579,8 @@
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
this.echartsList[key] = myChart;
|
|
|
- },getbody4() {
|
|
|
+ },
|
|
|
+ getbody4() {
|
|
|
var key = "body4pie1"
|
|
|
var myChart = this.echartsList[key];
|
|
|
if (!myChart) {
|
|
|
@@ -491,7 +763,7 @@
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
this.echartsList[key] = myChart;
|
|
|
- },
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -505,82 +777,86 @@
|
|
|
height: 268rpx;
|
|
|
background: linear-gradient(180deg, rgba(22, 119, 255, 1) 20%, rgba(121, 177, 255, 1) 100%);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.main {
|
|
|
|
|
|
padding: 32rpx;
|
|
|
- .no_statistics{
|
|
|
- margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ .no_statistics {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
}
|
|
|
+
|
|
|
.statistics {
|
|
|
border-radius: 8px;
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
|
|
|
margin-bottom: 24rpx;
|
|
|
- padding: 40rpx;
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 32rpx;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- vertical-align: middle;
|
|
|
- border-radius: 999px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .change {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .change-img {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
-
|
|
|
- text {
|
|
|
-
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .text {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 36rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .tag {
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(187, 187, 187, 1);
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
-
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 1px 8rpx;
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .change {
|
|
|
- margin-left: 16rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #838383;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .check-all {
|
|
|
- margin-left: auto;
|
|
|
- color: rgba(131, 131, 131, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
+ padding: 40rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 999px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .change-img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(187, 187, 187, 1);
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 1px 8rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #838383;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-all {
|
|
|
+ margin-left: auto;
|
|
|
+ color: rgba(131, 131, 131, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -652,9 +928,187 @@
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .body{
|
|
|
- padding: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ padding: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body5data {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .data {
|
|
|
+ display: flex;
|
|
|
+ width: 80%;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body7data {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ width: 33%;
|
|
|
+ padding: 16rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .value:nth-child(3) {
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 隔行变色: 偶数行设置背景色 */
|
|
|
+ .line:nth-child(odd) {
|
|
|
+ background-color: #F2F2F2;
|
|
|
+ /* 偶数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .line:nth-child(even) {
|
|
|
+ background-color: #FFFFFF
|
|
|
+ /* 奇数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .body8main {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ width: 33%;
|
|
|
+ padding: 16rpx;
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 隔行变色: 偶数行设置背景色 */
|
|
|
+ .line:nth-child(odd) {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ /* 偶数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .line:nth-child(even) {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ /* 奇数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .body6main {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .abnormal-item:last-of-type {
|
|
|
+ border-bottom: none !important;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .abnormal-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ .level {
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ padding: 4rpx 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level1 {
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level2 {
|
|
|
+ background-color: rgba(255, 123, 0, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ text-align: right;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .more {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value2 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
zhengkaixin