样式

jsowell-ui/src/views/homeIndex/homeIndex.vue

@@ -1,75 +1,23 @@
 <template>
   <div>
-<!--    <h1>电桩</h1>-->
-<!--    <hr />-->
-<!--    <el-table-->
-<!--      stripe-->
-<!--      border-->
-<!--      :data="tableData"-->
-<!--      style="width: 100%">-->
-<!--      <el-table-column-->
-<!--        label="序号"-->
-<!--        type="index"-->
-<!--      >-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="pileSn"-->
-<!--        label="编号">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="stationName"-->
-<!--        label="名称"-->
-<!--      >-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="stationAddress"-->
-<!--        label="电站">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="type"-->
-<!--        label="接口">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="power"-->
-<!--        label="功率">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="degree"-->
-<!--        label="度数">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="electricityPrice"-->
-<!--        label="电费">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="servicePrice"-->
-<!--        label="服务费">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="chargingNumber"-->
-<!--        label="充电次数">-->
-<!--      </el-table-column>-->
-<!--    </el-table>-->
     <h1>概况</h1>
     <hr />
     <div style="display: flex;justify-content: space-between">
       <div class="box">
-        <div>总充电电量</div>
+        <div>总充电电量(度)</div>
         <div class="box-text">
           <b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
-          <i>度</i>
           <el-image
-            style="width: 80px; height: 80px"
+            style="width: 80px; height: 80px;display:none"
             :src="require('@/assets/images/lightning.png')"
           ></el-image>
         </div>
         <div class="progress"></div>
       </div>
       <div class="box">
-        <div>总充电费用</div>
+        <div>总充电费用(元)</div>
         <div class="box-text">
-          <b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
+          <b class="box-h1">{{ generalSituation.totalChargingAmount}}</b>
-          <i>元</i>
           <!-- <image src="/assets/images/login-background.jpg"></image> -->
           <el-image
             style="width: 80px; height: 80px"
@@ -79,10 +27,9 @@
         <div class="progress"></div>
       </div>
       <div class="box">
-        <div>总充电订单数</div>
+        <div>总充电订单数(笔)</div>
         <div class="box-text">
           <b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
-          <i>笔</i>
           <el-image
             style="width: 80px; height: 80px"
             :src="require('@/assets/images/dingdan.png')"
@@ -91,10 +38,9 @@
         <div class="progress"></div>
       </div>
       <div class="box">
-        <div>总充电设备数量</div>
+        <div>总充电设备数量(座)</div>
         <div class="box-text">
           <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
-          <i>座</i>
           <el-image
             style="width: 80px; height: 80px"
             :src="require('@/assets/images/shebei.png')"
@@ -103,10 +49,10 @@
         <div class="progress"></div>
       </div>
       <div class="box"  v-hasRole="['admin', 'common']">
-        <div>总客户余额</div>
+        <div>总客户余额(元)</div>
         <div class="box-text">
           <b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
-          <i>元</i>
+
           <el-image
             style="width: 80px; height: 80px"
             :src="require('@/assets/images/yue.png')"
@@ -422,13 +368,14 @@ export default {
   background-color: #1ab3b3;
   border-radius: 8px;
   box-shadow: 0 15px 10px -11px #1ab394;
+  margin-right: 24px;
 }
 .box-h1 {
-  margin-top: -14px;
+  /* margin-top: -14px; */
   font-size: 47px;
 }
 .box-text {
-  margin-top: -13px;
+  margin-top: 0px;
 }
 .progress {
   border: 3px solid #fff;