style(KIP-7551): 缴费详情页面2

src/pages/parkingFee/components/base/parkingFeeDetailSuccess.vue

@@ -1,146 +1,150 @@
 <template>
   <scroll-view scroll-y="true" class="scroll-Y">
-<div>
-  <!--    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>-->
-
-  <div class="parking-info">
-    <div class="parking-price">
-      <div class="price">{{ (detail.payfee / 100) | currency }}</div>
-      <div class="price-text">{{
-          detail.refundStatus === 1
-            ? '已退款'
-            : detail.payStatus === 1
-              ? '支付成功'
-              : '支付失败'
-        }}</div>
-    </div>
-    <div class="parking-part parking-detail">
-      <div class="parking-info-item">
-        <span class="info-key">支付方式</span>
-        <span class="info-value">{{ detail.paykind || '' }}</span>
-      </div>
+    <div>
+      <!--    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>-->
 
-      <div class="parking-info-item">
-        <span class="info-key">支付时间</span>
-        <span class="info-value">{{ detail.createDate || '' }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">车牌号</span>
-        <span class="info-value">{{ detail.carno | formatCarno }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">停车场</span>
-        <span class="info-value">{{ detail.parkname }}</span>
-      </div>
-    </div>
-    <div class="parking-part parking-detail">
-      <div class="parking-info-item">
-        <span class="info-key">订单号</span>
-        <span class="info-value">{{ detail.orderno }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">入场时间</span>
-        <span class="info-value">{{ detail.entertime }}</span>
-      </div>
-      <!-- <div class="parking-info-item">
-        <span class="info-key">离场时间</span>
-        <span class="info-value">{{ detail.outtime || "" }}</span>
-      </div> -->
-      <div class="parking-info-item">
-        <span class="info-key">停车时长</span>
-        <span class="info-value">{{ parkingTime }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">开票状态</span>
-        <span class="info-value">{{ isInvoiceName }}</span>
-      </div>
-    </div>
-  </div>
-  <div class="parking-info mgb-40 mb-save">
-    <div class="parking-part">
-      <div class="parking-info-item" v-if="false"
-      ><!--todo: 杭州首停不显示暂时根据groupId写死-->
-        <span class="info-key">首停优惠</span>
-        <span class="info-value">{{
-            (detail.firstParkFee / 100) | currency
-          }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">会员等级减免</span>
-        <span class="info-value">{{
-            (detail.memberGradeFee / 100) | currency
-          }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">消费减免</span>
-        <span class="info-value">{{
-            (detail.consumeFee / 100) | currency
-          }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">新会员积分减免</span>
-        <span class="info-value">{{
-            (detail.newMemeberBonusFee / 100) | currency
-          }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">积分减免</span>
-        <span class="info-value">{{
-            (detail.bonusfee / 100) | currency
-          }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">会员卡券</span>
-        <span class="info-value">{{
-            (detail.couponfee / 100) | currency
-          }}</span>
-      </div>
-      <div class="parking-info-item" v-if="detail.paperCouponCode">
-        <span class="info-key">纸质优惠券</span>
-        <span class="info-value">{{
-            (detail.paperCouponFee / 100) | currency
-          }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">使用优惠总计</span>
-        <span class="info-value">{{
-            ((detail.usetotalfee || 0) / 100) | currency
-          }}</span>
-      </div>
-      <div
-        class="parking-info-item"
-        v-if="detail.usetotalfee > detail.totalfee"
-      >
-        <span class="info-key">实际优惠总计</span>
-        <span class="info-value">{{
-            (detail.totalfee / 100) | currency
-          }}</span>
-      </div>
-    </div>
-    <div class="parking-part parking-detail">
-      <div class="parking-info-item">
-        <span class="info-key">应缴</span>
-        <span class="info-value">{{
-            (detail.servicefee / 100) | currency
-          }}</span>
-      </div>
-      <div class="parking-info-item">
-        <span class="info-key">实缴</span>
-        <span class="info-value red">{{
-            (detail.payfee / 100) | currency
-          }}</span>
-      </div>
+      <div class="parking-info">
+        <div class="parking-price">
+          <div class="price">{{ (detail.payfee / 100) | currency }}</div>
+          <div class="price-text">
+            {{
+              detail.refundStatus === 1
+                ? '已退款'
+                : detail.payStatus === 1
+                ? '支付成功'
+                : '支付失败'
+            }}
+          </div>
+        </div>
+        <div class="parking-part parking-detail">
+          <div class="parking-info-item">
+            <span class="info-key">支付方式</span>
+            <span class="info-value">{{ detail.paykind || '' }}</span>
+          </div>
+
+          <div class="parking-info-item">
+            <span class="info-key">支付时间</span>
+            <span class="info-value">{{ detail.createDate || '' }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">车牌号</span>
+            <span class="info-value">{{ detail.carno | formatCarno }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">停车场</span>
+            <span class="info-value">{{ detail.parkname }}</span>
+          </div>
+        </div>
+        <div class="parking-part parking-detail">
+          <div class="parking-info-item">
+            <span class="info-key">订单号</span>
+            <span class="info-value">{{ detail.orderno }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">入场时间</span>
+            <span class="info-value">{{ detail.entertime }}</span>
+          </div>
+          <!-- <div class="parking-info-item">
+            <span class="info-key">离场时间</span>
+            <span class="info-value">{{ detail.outtime || "" }}</span>
+          </div> -->
+          <div class="parking-info-item">
+            <span class="info-key">停车时长</span>
+            <span class="info-value">{{ parkingTime }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">开票状态</span>
+            <span class="info-value">{{ isInvoiceName }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="parking-info mgb-40 mb-save">
+        <div class="parking-part">
+          <div class="parking-info-item" v-if="false">
+            <!--todo: 杭州首停不显示暂时根据groupId写死-->
+            <span class="info-key">首停优惠</span>
+            <span class="info-value">{{
+              (detail.firstParkFee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">会员等级减免</span>
+            <span class="info-value">{{
+              (detail.memberGradeFee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">消费减免</span>
+            <span class="info-value">{{
+              (detail.consumeFee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">新会员积分减免</span>
+            <span class="info-value">{{
+              (detail.newMemeberBonusFee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">积分减免</span>
+            <span class="info-value">{{
+              (detail.bonusfee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">会员卡券</span>
+            <span class="info-value">{{
+              (detail.couponfee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item" v-if="detail.paperCouponCode">
+            <span class="info-key">纸质优惠券</span>
+            <span class="info-value">{{
+              (detail.paperCouponFee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">使用优惠总计</span>
+            <span class="info-value">{{
+              ((detail.usetotalfee || 0) / 100) | currency
+            }}</span>
+          </div>
+          <div
+            class="parking-info-item"
+            v-if="detail.usetotalfee > detail.totalfee"
+          >
+            <span class="info-key">实际优惠总计</span>
+            <span class="info-value">{{
+              (detail.totalfee / 100) | currency
+            }}</span>
+          </div>
+        </div>
+        <div class="parking-part parking-detail">
+          <div class="parking-info-item">
+            <span class="info-key">应缴</span>
+            <span class="info-value">{{
+              (detail.servicefee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">实缴</span>
+            <span class="info-value red">{{
+              (detail.payfee / 100) | currency
+            }}</span>
+          </div>
+        </div>
+      </div>
+      <div style="height: 30px"></div>
     </div>
-  </div>
-</div>
   </scroll-view>
 </template>
 
 <script>
-import parkingFeeDetailSuccessJs from '../../mixins/parkingFeeDetailSuccess'
+import parkingFeeDetailSuccessJs from '../../mixins/parkingFeeDetailSuccess';
+
 export default {
-  mixins:[parkingFeeDetailSuccessJs]
-}
+  mixins: [parkingFeeDetailSuccessJs],
+};
 </script>
 
 <style lang="less" scoped>
@@ -151,52 +155,64 @@ export default {
   height: 100vh;
   background: #f2f2f2;
   padding-bottom: 20px;
+
   .parking-info {
     margin: 20px;
     padding: 20px;
     border-radius: 30px;
     background-color: #ffffff;
+
     .parking-price {
       text-align: center;
       padding: 20px 0px 40px;
+
       .price {
         color: rgb(255, 0, 0);
         font-weight: 600;
         font-size: 52px;
       }
+
       .price-text {
         font-weight: 300;
         font-size: 30px;
       }
     }
+
     .parking-detail {
       border-top: 2px solid #f5f5f5;
     }
+
     .parking-part {
       padding: 20px;
+
       .parking-info-item {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 20px 0px;
         font-size: 32px;
+
         .info-key {
           text-align: left;
           color: #242424;
         }
+
         .info-value {
           text-align: right;
           color: #999999;
         }
+
         .red {
           color: #ee2c34;
         }
       }
     }
   }
+
   .mgb-40 {
     margin-bottom: 20px;
   }
+
   //.mgb-40 {
   //  margin-bottom: 24px;
   //}