task#5914 添加报备页面，地图页面

src/views/report/components/report-list-item.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="bottom_wrap">
+    <div class="report_item">
+      <img class="report_icon" src="@/assets/report/report_delay.png" alt="">
+      <div class="report_title">救援延误</div>
+    </div>
+    <div class="report_item">
+      <img class="report_icon" src="@/assets/report/report_unconnect.png" alt="">
+      <div class="report_title">客户失联</div>
+    </div>
+    <div class="report_item">
+      <img class="report_icon" src="@/assets/report/report_cancel.png" alt="">
+      <div class="report_title">客户取消</div>
+    </div>
+    <div class="report_item">
+      <img class="report_icon" src="@/assets/report/report_address.png" alt="">
+      <div class="report_title">地址变更</div>
+    </div>
+    <div class="report_item">
+      <img class="report_icon" src="@/assets/report/report_fee.png" alt="">
+      <div class="report_title">费用报备</div>
+    </div>
+    <div class="report_item">
+      <img class="report_icon" src="@/assets/report/report_other.png" alt="">
+      <div class="report_title">其他报备</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "report-list-item"
+}
+</script>
+
+<style scoped lang="scss">
+.bottom_wrap {
+  width: 100%;
+  /*position: fixed;*/
+  bottom: 0;
+  padding: 0 34px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 20px 0px rgba(53,73,93,0.2);
+  .report_item {
+    width: 25%;
+    margin-top: 20px;
+    .report_icon {
+      width: 45px;
+      height: 45px;
+    }
+    .report_title {
+      color: rgba(53, 53, 53, 0.67);
+      font-size: 11px;
+      line-height: 16px;
+      margin-top: 6px;
+    }
+  }
+}
+</style>

src/views/report/components/service-item.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="wrap">
+    <div class="service_title">
+      <span class="name">故障平板拖车</span>
+      <span class="status">调度成功，等待发车备份</span>
+    </div>
+    <!--    <img class="report_line" src="@/assets/report/report_line.png" alt="">-->
+    <div class="service_content">
+      <div class="content_left">
+        <img class="report_logo" src="@/assets/report/report_logo.png" alt="">
+      </div>
+      <div class="content_right">
+        <div class="order_code">单号：ZD20240878990</div>
+        <div class="company">单位：上海安昌汽车救援有限公司</div>
+        <div class="driver_info">
+          <span class="driver_name">张师傅</span>
+          <span>13666665577</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "service-item"
+  }
+</script>
+
+<style scoped lang="scss">
+  .wrap {
+    width: calc(100% - 20px);
+    background: #FFFFFF;
+    box-shadow: 0px 0px 9px 0px rgba(53,73,93,0.2);
+    border-radius: 8px;
+    border: 1px solid #E6E6E6;
+    backdrop-filter: blur(5.602678571428572px);
+    margin: 0 auto;
+  }
+.service_title {
+  height: 40px;
+  line-height: 42px;
+  padding-left: 22px;
+  padding-right: 14px;
+  background: #F9FDFF;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #EFEFEF;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  .name {
+    font-size: 16px;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .status {
+    font-size: 13px;
+    color: #F19028;
+  }
+}
+.service_content {
+  padding: 11px 16px 18px;
+  display: flex;
+  .content_left {
+    .report_logo {
+      width: 56px;
+      height: 56px;
+      margin-right: 14px;
+    }
+  }
+  .content_right {
+    .order_code {
+      color: #323643;
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 1px;
+    }
+    .company {
+      color: #323643;
+      font-size: 13px;
+      margin-bottom: 3px;
+    }
+    .driver_info {
+      color: rgba(50, 54, 67, 0.65);
+      font-size: 12px;
+      margin-bottom: 3px;
+      .driver_name {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+.report_line {
+
+}
+</style>