|
@@ -7,15 +7,14 @@
|
|
|
mode="multiSelector" :default-selector='[0, 1]' :range="multiSelector">
|
|
|
</u-picker> -->
|
|
|
<u-select v-model="equipmentShow" mode="mutil-column-auto" :list="equipmentList" @confirm="confirm">
|
|
|
-
|
|
|
+
|
|
|
</u-select>
|
|
|
-
|
|
|
+
|
|
|
<!-- 日期选择器 -->
|
|
|
- <u-picker-select title="日期选择" v-model="tabsFrom.show2"
|
|
|
- :defaultTime="tabsFrom.show2Index" :endYear="endYear"
|
|
|
- mode="time" :params="params" @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
|
|
|
-
|
|
|
- <!-- <u-navbar :background="background" back-icon-color="#fff" title="联通公司" title-color="#fff">
|
|
|
+ <u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
|
|
|
+ mode="time" :params="params" @confirm="selector2confirm" @reset="selector2reset"></u-picker-select>
|
|
|
+
|
|
|
+ <!-- <u-navbar :background="background" back-icon-color="#fff" title="联通公司" title-color="#fff">
|
|
|
<view class="u-nav-slot" slot="right" @click="tabsFrom.show2=true,params.day=true">
|
|
|
<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
|
|
|
</view>
|
|
@@ -25,7 +24,7 @@
|
|
|
<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
|
|
|
</view>
|
|
|
<view class="title" @click="equipmentShow=true">
|
|
|
- 荆鹏软件园01<u-icon name="arrow-down" color="#fff" size="24"></u-icon>
|
|
|
+ 荆鹏软件园01<u-icon name="arrow-down" color="#fff" size="24"></u-icon>
|
|
|
</view>
|
|
|
<view class="right" @click="tabsFrom.show2=true">
|
|
|
<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
|
|
@@ -41,7 +40,7 @@
|
|
|
今天
|
|
|
</view>
|
|
|
<view class="dot">
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
@@ -150,7 +149,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="radio">
|
|
|
<u-radio-group v-model="value" @change="radioGroupChange">
|
|
|
<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.id"
|
|
@@ -172,15 +171,18 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="chart">
|
|
|
- <image class="img" src="@/assets/img/chart@1x.png" mode=""></image>
|
|
|
+ <!-- <image class="img" src="@/assets/img/chart@1x.png" mode=""></image> -->
|
|
|
+ <view id="barEcharts" style="min-height:440rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 异常波动 -->
|
|
|
- <view class="abnormal" >
|
|
|
+ <view class="abnormal">
|
|
|
<view class="headline">
|
|
|
<view class="title">
|
|
|
<view class="icon">
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
<view class="text">
|
|
|
异常告警
|
|
@@ -216,7 +218,7 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 能源监测 -->
|
|
|
- <view class="energy-inspection" >
|
|
|
+ <view class="energy-inspection">
|
|
|
<view class="title">
|
|
|
<view class="icon">
|
|
|
|
|
@@ -268,14 +270,14 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 数据分析 -->
|
|
|
- <view class="data-analysis" >
|
|
|
+ <view class="data-analysis">
|
|
|
<view class="title">
|
|
|
<view class="icon">
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
<view class="text">
|
|
|
数据分析
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="grid">
|
|
@@ -291,7 +293,7 @@
|
|
|
<image class="img" src="@/assets/img/Image@8.png" mode=""></image>
|
|
|
</view>
|
|
|
<view class="grid-text">环比分析</view>
|
|
|
- </u-grid-item>
|
|
|
+ </u-grid-item>
|
|
|
<u-grid-item>
|
|
|
<view class="icon icon9">
|
|
|
<image class="img" src="@/assets/img/Image@9.svg" mode=""></image>
|
|
@@ -301,72 +303,72 @@
|
|
|
</u-grid>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 创建工单 -->
|
|
|
- <view class="create-order">
|
|
|
- <view class="img-box">
|
|
|
- <image class="img" src="@/assets/img/riFill-file-add-fill.svg" mode=""></image>
|
|
|
- </view>
|
|
|
+ <!-- 创建工单 -->
|
|
|
+ <view class="create-order">
|
|
|
+ <view class="img-box">
|
|
|
+ <image class="img" src="@/assets/img/riFill-file-add-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
<view class="text">
|
|
|
创建工单
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- endYear:'',
|
|
|
- equipmentShow:false,
|
|
|
+ myBarChart: null,
|
|
|
+ endYear: '',
|
|
|
+ equipmentShow: false,
|
|
|
multiSelector: [
|
|
|
- ['荆鹏集团', '玉桥公园', '全季酒店'],
|
|
|
- [ '荆鹏软件园01','青少年宫02','御河社区03','荆州院子04']
|
|
|
- ],
|
|
|
- equipmentList: [
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- label: '荆鹏集团',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- label: '荆鹏集团01',
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- value: 3,
|
|
|
- label: '荆鹏集团02',
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- value: 4,
|
|
|
- label: '荆鹏集团03',
|
|
|
-
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: 5,
|
|
|
- label: '荆州院子',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 6,
|
|
|
- label: '荆州院子01',
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- value: 7,
|
|
|
- label: '荆州院子02',
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- value: 8,
|
|
|
- label: '荆州院子03',
|
|
|
-
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ],
|
|
|
+ ['荆鹏集团', '玉桥公园', '全季酒店'],
|
|
|
+ ['荆鹏软件园01', '青少年宫02', '御河社区03', '荆州院子04']
|
|
|
+ ],
|
|
|
+ equipmentList: [{
|
|
|
+ value: 1,
|
|
|
+ label: '荆鹏集团',
|
|
|
+ children: [{
|
|
|
+ value: 2,
|
|
|
+ label: '荆鹏集团01',
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: '荆鹏集团02',
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ label: '荆鹏集团03',
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 5,
|
|
|
+ label: '荆州院子',
|
|
|
+ children: [{
|
|
|
+ value: 6,
|
|
|
+ label: '荆州院子01',
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 7,
|
|
|
+ label: '荆州院子02',
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 8,
|
|
|
+ label: '荆州院子03',
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
params: {
|
|
|
year: true,
|
|
|
month: true,
|
|
@@ -377,91 +379,139 @@
|
|
|
},
|
|
|
tabsFrom: {
|
|
|
show1: false,
|
|
|
- show1Index:0,
|
|
|
- show2Index:'',
|
|
|
+ show1Index: 0,
|
|
|
+ show2Index: '',
|
|
|
show2: false,
|
|
|
show1Text: "全部类型",
|
|
|
show2Text: "全部时间",
|
|
|
- selector1:[
|
|
|
+ selector1: [{
|
|
|
+ label: '全部类型',
|
|
|
+ value: '',
|
|
|
+ },
|
|
|
{
|
|
|
- label: '全部类型',
|
|
|
- value: '',
|
|
|
- },
|
|
|
+ label: '线上充值',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
{
|
|
|
- label: '线上充值',
|
|
|
- value: '1',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '线下充值',
|
|
|
- value: '2',
|
|
|
- },
|
|
|
+ label: '线下充值',
|
|
|
+ value: '2',
|
|
|
+ },
|
|
|
]
|
|
|
},
|
|
|
background: {
|
|
|
backgroundColor: '#1677FF',
|
|
|
},
|
|
|
list: [{
|
|
|
- id:0,
|
|
|
+ id: 0,
|
|
|
name: '本月用电量',
|
|
|
disabled: false
|
|
|
},
|
|
|
{
|
|
|
- id:1,
|
|
|
+ id: 1,
|
|
|
name: '上月用电量',
|
|
|
disabled: false
|
|
|
},
|
|
|
{
|
|
|
- id:2,
|
|
|
+ id: 2,
|
|
|
name: '本年用电量',
|
|
|
disabled: false
|
|
|
}, {
|
|
|
- id:3,
|
|
|
+ id: 3,
|
|
|
name: '上年用电量',
|
|
|
disabled: false
|
|
|
}, {
|
|
|
- id:4,
|
|
|
+ id: 4,
|
|
|
name: '总用电量',
|
|
|
disabled: false
|
|
|
}, {
|
|
|
- id:5,
|
|
|
+ id: 5,
|
|
|
name: '指定月份',
|
|
|
disabled: false
|
|
|
}
|
|
|
],
|
|
|
-
|
|
|
+
|
|
|
value: '本月用电量',
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
- this.endYear=new Date().getFullYear()
|
|
|
-
|
|
|
+ this.endYear = new Date().getFullYear()
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.getBarCharts();
|
|
|
},
|
|
|
methods: {
|
|
|
- selector2confirm(e){
|
|
|
- this.tabsFrom.show2Text=e.year+"年"+e.month+"月"
|
|
|
-
|
|
|
- this.tabsFrom.show2Index=e.year+"-"+e.month
|
|
|
- if(e.day){
|
|
|
- this.tabsFrom.show2Text+=e.day+"日"
|
|
|
- this.tabsFrom.show2Index+='-'+e.day
|
|
|
+ getBarCharts() {
|
|
|
+ if (!this.myBarChart) {
|
|
|
+ this.myBarChart = echarts.init(document.getElementById('barEcharts'));
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ data: ['0-2点', '3-4点', '5-6点', '7-8点', '9-10点', '11-12点', '13-14点', '15-16点',
|
|
|
+ '17-18点', '19-20点', '21-22点', '23-24点'
|
|
|
+ ],
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value'
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ type: 'bar',
|
|
|
+ data: [2, 8, 7, 10, 40, 48, 56, 61, 59, 36, 8, 4],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ color: '#5C7BD9'
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.myBarChart.setOption(option);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ selector2confirm(e) {
|
|
|
+ this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
|
|
|
+
|
|
|
+ this.tabsFrom.show2Index = e.year + "-" + e.month
|
|
|
+ if (e.day) {
|
|
|
+ this.tabsFrom.show2Text += e.day + "日"
|
|
|
+ this.tabsFrom.show2Index += '-' + e.day
|
|
|
}
|
|
|
},
|
|
|
- selector2reset(e){
|
|
|
+ selector2reset(e) {
|
|
|
console.log(e)
|
|
|
- this.tabsFrom.show2Text='全部时间'
|
|
|
- this.tabsFrom.show2Index='';
|
|
|
+ this.tabsFrom.show2Text = '全部时间'
|
|
|
+ this.tabsFrom.show2Index = '';
|
|
|
},
|
|
|
// 选中某个单选框时,由radio时触发
|
|
|
radioChange(e) {
|
|
|
- //console.log(e);
|
|
|
+ //console.log(e);
|
|
|
},
|
|
|
// 选中任一radio时,由radio-group触发
|
|
|
radioGroupChange(e) {
|
|
|
- console.log(e);
|
|
|
- if(e==5){
|
|
|
- this.tabsFrom.show2=true
|
|
|
- this.params.day=false
|
|
|
- }
|
|
|
+ console.log(e);
|
|
|
+ if (e == 5) {
|
|
|
+ this.tabsFrom.show2 = true
|
|
|
+ this.params.day = false
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -472,24 +522,28 @@
|
|
|
page {
|
|
|
padding-bottom: 184rpx;
|
|
|
}
|
|
|
- .navbar-c{
|
|
|
- background-color: rgba(22,119,255,1);
|
|
|
- .title{
|
|
|
+
|
|
|
+ .navbar-c {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+
|
|
|
+ .title {
|
|
|
color: #fff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
- .right{
|
|
|
- .img{
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .img {
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- /deep/.uicon-nav-back{
|
|
|
+
|
|
|
+ /deep/.uicon-nav-back {
|
|
|
color: #fff !important;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.background {
|
|
@@ -557,7 +611,8 @@
|
|
|
|
|
|
.item-today {
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
- position: relative;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
.date {
|
|
|
color: rgba(22, 119, 255, 1);
|
|
|
}
|
|
@@ -565,10 +620,11 @@
|
|
|
.week {
|
|
|
color: rgba(16, 16, 16, 1);
|
|
|
}
|
|
|
- .dot{
|
|
|
+
|
|
|
+ .dot {
|
|
|
width: 10rpx;
|
|
|
height: 10rpx;
|
|
|
- background-color: rgba(255,150,0,1);
|
|
|
+ background-color: rgba(255, 150, 0, 1);
|
|
|
border-radius: 999px;
|
|
|
position: absolute;
|
|
|
bottom: -5rpx;
|
|
@@ -585,35 +641,41 @@
|
|
|
border-radius: 8px;
|
|
|
margin: -88rpx 32rpx 0;
|
|
|
position: relative;
|
|
|
- .title{
|
|
|
- color: rgba(16,16,16,1);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
font-size: 36rpx;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .degree{
|
|
|
+
|
|
|
+ .degree {
|
|
|
display: flex;
|
|
|
margin-top: 32rpx;
|
|
|
- .item{
|
|
|
+
|
|
|
+ .item {
|
|
|
margin-right: 6rpx;
|
|
|
text-align: center;
|
|
|
- .item-text{
|
|
|
- color: rgba(16,16,16,1);
|
|
|
+
|
|
|
+ .item-text {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
}
|
|
|
- .item-number{
|
|
|
+
|
|
|
+ .item-number {
|
|
|
margin-top: 24rpx;
|
|
|
width: 72rpx;
|
|
|
height: 96rpx;
|
|
|
- background-color: rgba(16,16,16,1);
|
|
|
+ background-color: rgba(16, 16, 16, 1);
|
|
|
color: #fff;
|
|
|
font-size: 72rpx;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .decimal{
|
|
|
+
|
|
|
+ .decimal {
|
|
|
background-color: #900005;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
|
|
|
// .tab {
|
|
|
// width: 240rpx;
|
|
@@ -712,7 +774,7 @@
|
|
|
padding: 40rpx 32rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 8px;
|
|
|
-
|
|
|
+
|
|
|
.headline {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
@@ -722,7 +784,8 @@
|
|
|
.title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
-font-weight: bold;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
.icon {
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
@@ -766,7 +829,8 @@ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
// 能源监测
|
|
|
- .energy-inspection,.data-analysis {
|
|
|
+ .energy-inspection,
|
|
|
+ .data-analysis {
|
|
|
margin: 24rpx 32rpx;
|
|
|
padding: 40rpx 32rpx;
|
|
|
background-color: #fff;
|
|
@@ -775,7 +839,8 @@ font-weight: bold;
|
|
|
.title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- font-weight: bold;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
.icon {
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
@@ -807,29 +872,37 @@ font-weight: bold;
|
|
|
height: 80rpx;
|
|
|
}
|
|
|
}
|
|
|
- .icon2{
|
|
|
- background-color: rgba(42,186,72,1);
|
|
|
+
|
|
|
+ .icon2 {
|
|
|
+ background-color: rgba(42, 186, 72, 1);
|
|
|
}
|
|
|
- .icon3{
|
|
|
- background-color: rgba(78,96,246,1);
|
|
|
+
|
|
|
+ .icon3 {
|
|
|
+ background-color: rgba(78, 96, 246, 1);
|
|
|
}
|
|
|
- .icon4{
|
|
|
- background-color: rgba(22,119,255,1);
|
|
|
+
|
|
|
+ .icon4 {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
}
|
|
|
- .icon5{
|
|
|
- background-color: rgba(35,186,178,1);
|
|
|
+
|
|
|
+ .icon5 {
|
|
|
+ background-color: rgba(35, 186, 178, 1);
|
|
|
}
|
|
|
- .icon6{
|
|
|
- background-color: rgba(42,186,72,1);
|
|
|
+
|
|
|
+ .icon6 {
|
|
|
+ background-color: rgba(42, 186, 72, 1);
|
|
|
}
|
|
|
- .icon7{
|
|
|
- background-color: rgba(22,119,255,1);
|
|
|
+
|
|
|
+ .icon7 {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
}
|
|
|
- .icon8{
|
|
|
- background-color: rgba(35,186,178,1);
|
|
|
+
|
|
|
+ .icon8 {
|
|
|
+ background-color: rgba(35, 186, 178, 1);
|
|
|
}
|
|
|
- .icon9{
|
|
|
- background-color: rgba(42,186,72,1);
|
|
|
+
|
|
|
+ .icon9 {
|
|
|
+ background-color: rgba(42, 186, 72, 1);
|
|
|
}
|
|
|
|
|
|
.grid-text {
|
|
@@ -838,29 +911,30 @@ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 创建工单
|
|
|
- .create-order{
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 20px;
|
|
|
- background: linear-gradient(180deg, rgba(121,172,255,1) 0%,rgba(57,132,255,1) 100%);
|
|
|
- box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: fixed;
|
|
|
- right: 32rpx;
|
|
|
- bottom: 64rpx;
|
|
|
- .img{
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- }
|
|
|
- .text{
|
|
|
- color: rgba(255,255,255,1);
|
|
|
- font-size: 22rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ // 创建工单
|
|
|
+ .create-order {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: linear-gradient(180deg, rgba(121, 172, 255, 1) 0%, rgba(57, 132, 255, 1) 100%);
|
|
|
+ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: fixed;
|
|
|
+ right: 32rpx;
|
|
|
+ bottom: 64rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ }
|
|
|
|
|
|
+ .text {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|