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

修改首页样式

Browse Source
This commit is contained in:
admin-lmm
2023-07-15 10:44:54 +08:00
parent 017556418c
commit ca943ce257
1 changed files with 11 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,19 +5,20 @@
<hr/>
<div style="display: flex;justify-content: space-between;margin-top: 10px;flex-wrap: wrap;">
<div class="box" style="background-color: #ffba00;">
<el-image class="box-image"
<el-image class="box-image"
:src="require('@/assets/images/lightning.png')"
/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingDegree}}</b>
<div class="box-h1">{{ generalSituation.totalChargingDegree}}</div>
<div>总充电电量(度)</div>
</div>
</div>
<div class="box" style="background-color: #c74542;">
<el-image class="box-image"
:src="require('@/assets/images/zongfeiyong.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
<div class="box-h1">{{ generalSituation.totalChargingAmount }}</div>
<div>总充电费用(元)</div>
</div>
</div>
@@ -26,7 +27,7 @@
class="box-image"
:src="require('@/assets/images/dingdan.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
<div class="box-h1">{{ generalSituation.totalChargingQuantity }}</div>
<div>总充电订单数(笔)</div>
</div>
</div>
@@ -35,7 +36,7 @@
class="box-image"
:src="require('@/assets/images/shebei.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<div class="box-h1">{{ generalSituation.totalPileQuantity }}</div>
<div>总充电设备数量(座)</div>
</div>
</div>
@@ -45,76 +46,12 @@
:src="require('@/assets/images/yue.png')"
></el-image>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
<div class="box-h1">{{ generalSituation.totalMemberAmount }}</div>
<div>总客户余额(元)</div>
</div>
</div>
</div>
<!-- <el-row >
<div style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px">
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<div class="box" style="background-color: #ffba00;">
<el-image class="box-image"
:src="require('@/assets/images/lightning.png')"
/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
<div>总充电电量(度)</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<div class="box" style="background-color: #c74542;">
<el-image class="box-image"
:src="require('@/assets/images/zongfeiyong.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
<div>总充电费用(元)</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<div class="box" style="background-color: #12ce65;">
<el-image
class="box-image"
:src="require('@/assets/images/dingdan.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
<div>总充电订单数(笔)</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<div class="box" style="background-color: #909399;">
<el-image
class="box-image"
:src="require('@/assets/images/shebei.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<div>总充电设备数量(座)</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<div class="box" v-hasRole="['admin', 'common']" style="background-color: #ff4949;">
<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>
</div>
</el-col>
</div>
</el-row> -->
<h1>订单</h1>
<hr/>
<el-button style="background-color: #1ab394; color: #ffffff"
@@ -412,6 +349,7 @@ export default {
// overflow: scroll;
// }
.box {
position: relative;
width: 15rem;
display: flex;
height: 6.25rem;
@@ -424,6 +362,8 @@ export default {
margin-bottom: 20px;
position: relative;
.box-image {
position: absolute;
left: 0;
width: 3.75rem;
height: 3.75rem;
// background-size: 100% 100%;
@@ -435,37 +375,14 @@ export default {
.flex1 {
flex: 1;
margin-left: 5px;
margin-left: 48px;
}
}
.box-h1 {
/* margin-top: -14px; */
font-size: 2rem;
}
.box-text {
margin-top: 0px;
}
.progress {
border: 3px solid #fff;
margin-top: 5px;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.el-col-lg-4-8 {
width: 20%;
}
</style>