autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-04-27 14:35:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
JS-LM
2023-06-26 14:29:01 +08:00
parent e10e54ffb2
commit 7c60d8eab6
2 changed files with 126 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
jsowell-ui/src/views/homeIndex/homeIndex.vue
View File

@@ -4,68 +4,62 @@
<hr />
<div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
<div class="box">
<div>总充电电量(度)</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
<el-image
style="width: 80px; height: 80px;"
<el-image class="box-image"
:src="require('@/assets/images/lightning.png')"
></el-image>
/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
<div>总充电电量(度)</div>
<div class="progress" />
</div>
<div class="progress"></div>
</div>
<div class="box">
<div>总充电费用(元)</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalChargingAmount}}</b>
<!-- <image src="/assets/images/login-background.jpg"></image> -->
<el-image
style="width: 80px; height: 80px"
:src="require('@/assets/images/zongfeiyong.png')"
></el-image>
</div>
<div class="progress"></div>
<el-image class="box-image"
:src="require('@/assets/images/zongfeiyong.png')" />
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingAmount}}</b>
<div>总充电费用(元)</div>
<div class="progress" />
</div>
</div>
<div class="box">
<div>总充电订单数(笔)</div>
<div class="box-text">
<el-image
class="box-image"
:src="require('@/assets/images/dingdan.png')" />
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingQuantity}}</b>
<el-image
style="width: 80px; height: 80px"
:src="require('@/assets/images/dingdan.png')"
></el-image>
</div>
<div class="progress"></div>
<div>总充电订单数(笔)</div>
<div class="progress" />
</div>
</div>
<div class="box">
<div>总充电设备数量(座)</div>
<div class="box-text">
<el-image
class="box-image"
:src="require('@/assets/images/shebei.png')" />
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<el-image
style="width: 80px; height: 80px"
:src="require('@/assets/images/shebei.png')"
></el-image>
<div>总充电设备数量(座)</div>
<div class="progress" />
</div>
<div class="progress"></div>
</div>
<div class="box" v-hasRole="['admin', 'common']">
<div>总客户余额(元)</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
<el-image
style="width: 80px; height: 80px"
<el-image
class="box-image"
:src="require('@/assets/images/yue.png')"
></el-image>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
<div>总客户余额(元)</div>
<div class="progress" />
</div>
</div>
<div class="progress"></div></div>
<!-- <div class="box">-->
<!-- <div>总服务费金额</div>-->
<!-- <div class="box-text">-->
<!-- <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>-->
<!-- <i>元</i>-->
<!-- <el-image-->
<!-- style="width: 80px; height: 80px"-->
<!-- class="box-image"-->
<!-- :src="require('@/assets/images/shebei.png')"-->
<!-- ></el-image>-->
<!-- </div>-->
@@ -360,16 +354,26 @@ export default {
};
</script>
<style>
<style lang="scss" scoped>
.box {
display: flex;
height: 100px;
padding: 10px;
font-size: 18px;
/* font-size: 18px; */
color: #ffffff;
background-color: #1ab3b3;
border-radius: 8px;
box-shadow: 0 15px 10px -11px #1ab394;
margin-right: 24px;
margin-bottom: 20px;
.box-image{
width: 60px;
height: 60px;
}
.flex1{
flex: 1;
margin-left: 5px;
}
}
.box-h1 {
/* margin-top: -14px; */
@@ -377,9 +381,10 @@ export default {
}
.box-text {
margin-top: 0px;
}
.progress {
border: 3px solid #fff;
margin-right: 30%;
margin-top: 5px;
}
</style>