task#13992,代办列表更新，新增维保审批列表

src/views/vehicle-maintenance/maintenance-application.vue

@@ -0,0 +1,134 @@
+<template>
+<div class="wrap">
+  <div class="navBar">
+    <van-nav-bar
+        title="车辆维保"
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="h5GoBack"
+    />
+  </div>
+  <div class="detailInfo">
+    <div class="line1">
+        <div class="leftTitle">维保申请:</div>
+        <div class="right">
+          <img class="commonImg" src="@/assets/waitSubmit.png">
+          <div class="yelColor">待审核</div>
+        </div>
+    </div>
+    <div class="line"></div>
+    <div class="carName"><span class="opa">车辆名称:</span><span>小宋车辆</span></div>
+    <div class="carNum"><span class="opa">车牌号:</span><span>沪A123456</span></div>
+    <div class="shopName"><span class="opa">门店信息:</span><span>浦东新区欧洲维修高科西路店浦东新区欧洲维修高科西路店</span></div>
+    <div class="shopImgList">
+      <img src="@/assets/love.jpg">
+      <img src="@/assets/love.jpg">
+      <img src="@/assets/love.jpg">
+      <img src="@/assets/love.jpg">
+
+    </div>
+  </div>
+
+  <div class="approvalContent">
+
+  </div>
+</div>
+</template>
+
+<script>
+import {myMixins} from  "@/utils/myMixins"
+export default {
+  name: "maintenance-application",
+  mixins:[myMixins],
+  data() {
+    return {
+      id:'',
+      noClick:true,
+    }
+  },
+  mounted() {
+    this.id=this.$route.params.id
+    console.log("mounted.",this.id)
+    // this.getList()
+  },
+  methods: {
+
+    async getList() {
+
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+@import "@/styles/approval.scss";
+.wrap{
+  background-color: #F4F5F7;
+}
+.detailInfo{
+  width: 100%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 13px 25px 24px 24px;
+  margin-bottom: 10px;
+  .line1{
+    display: flex;
+    justify-content: space-between;
+    line-height: 23px;
+    .leftTitle{
+      font-weight: bold;
+      font-size: 14px;
+      color: #323643;
+      line-height: 20px;
+      opacity: .66;
+    }
+    .right{
+      display: flex;
+      align-items: center;
+    }
+  }
+  .line{
+    margin: 5px 0;
+    width: 325px;
+    border-bottom: 2px solid;
+    opacity: 0.16;
+    border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
+  }
+  .opa{
+    display: inline-block;
+    width: 60px;
+    font-size: 12px;
+    color: #000000;
+    line-height: 27px;
+    opacity: .5;
+  }
+  .shopName{
+    display: flex;
+    align-items: baseline;
+  }
+  .shopImgList{
+    margin-top: 6px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    img{
+      background: #FAFAFA;
+      border-radius: 3px;
+      border: 1px solid #EAEAEA;
+      backdrop-filter: blur(10px);
+      @include wh(154px,93px);
+      margin-bottom: 10px;
+    }
+  }
+}
+.approvalContent{
+  background-color: #FFFFFF;
+  width: 100%;
+  height: 200px;
+}
+</style>