story#6735 task#7361 车辆报警列表静态页

src/router/index.js

@@ -251,6 +251,14 @@ const routes = [
             title:'车辆维保'
         }
     },
+    {
+        path: '/vehicleAlarmList',
+        name: 'vehicleAlarmList',
+        component:()=>import('@/views/vehicle-maintenance/vehicle-alarm-list.vue'),
+        meta: {
+            title:'车辆报警'
+        }
+    },
     {
         path: '/maintenanceApplication',
         name: 'maintenanceApplication',

src/views/vehicle-maintenance/vehicle-alarm-list.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="wrap">
+    <div class="tab_wrap">
+      <div class="item_wrap" v-for="(item, index) in tabArr" :key="index" @click="changeTab(index)">
+        <span class="alpha" :class="{'active' : activeIndex == index }"> {{ item.name }}</span>
+        <span class="numTip" style="opacity: 1 !important;" v-if="item.num > 0">{{item.num}}</span>
+      </div>
+    </div>
+    <div class="content_wrap">
+      <div class="alarm_wrap" v-for="i in 6" :key="i">
+        <div class="alarm_title">
+          <div class="title_left">
+            <span>设备离线 {{i}}</span>
+<!--            <img class="alarm_level" src="@/assets/alarm_one.png" alt="">-->
+<!--            <img class="alarm_level" src="@/assets/alarm_two.png" alt="">-->
+            <img class="alarm_level" src="@/assets/alarm_three.png" alt="">
+          </div>
+          <div class="label">2025-06-18 10:00</div>
+        </div>
+        <div class="alarm_content">
+          <div class="label">车辆名称:</div>
+          <div class="content">GZ103大板</div>
+        </div>
+        <div class="alarm_content">
+          <div class="label">报警详情:</div>
+          <div class="content">APP未到达C点，车斗状态识别为空车</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "vehicleAlarmList",
+    data() {
+      return {
+        tabArr: [{ name: '未处理', status: 2, num: 6 }, { name: '技术处理中', status: 2, num: 0 }, {name: '处理中', status: 2, num: 3 }],
+        activeIndex: 0,
+      }
+    },
+    methods: {
+      async changeTab(index) {
+        this.activeIndex = index
+        this.pageNum = 1
+        this.pageList = [];
+        this.total= 0
+        await this.getList()
+      },
+      getList() {
+
+      },
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .wrap{
+    width: 100%;
+    height: 100%;
+    background-color: #F4F5F7 !important;
+    box-sizing: border-box;
+    overflow-y: auto;
+  }
+.tab_wrap {
+  display: flex;
+  justify-content: space-around;
+  padding-top: 15px;
+  padding-bottom: 10px;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: #F4F5F7;
+  .item_wrap {
+    display: flex;
+    align-items: center;
+  }
+  .alpha {
+    color: rgba(115, 115, 115, 0.7);
+    font-size: 13px;
+    line-height: 13px;
+  }
+  .active {
+    font-size: 14px;
+    color: #3678FF;
+    position: relative;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    width: 18px;
+    height: 3px;
+    background: linear-gradient( 270deg, #33A3FF 0%, #176AFE 100%);
+    border-radius: 2px;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .numTip {
+    border-radius: 4px;
+    background: #F95B45;
+    display: inline-block;
+    padding: 2px 4px;
+    font-weight: 600;
+    font-size: 11px;
+    color: #FFFFFF;
+    margin-left: 5px;
+  }
+}
+  .content_wrap {
+    padding: 50px 12px 0;
+    .alarm_wrap {
+      margin-top: 10px;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
+      border-radius: 6px;
+      padding: 13px 13px 17px 18px;
+      box-sizing: border-box;
+      .alarm_title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .label {
+        color: rgba(0, 0, 0, 0.5);
+      }
+      .title_left {
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 14px;
+          font-weight: bold;
+          color: rgba(0, 0, 0, 0.85);
+        }
+        .alarm_level {
+          width: 32px;
+          height: 14px;
+          margin-left: 7px;
+        }
+      }
+      .alarm_content {
+        display: flex;
+        margin-top: 10px;
+        .content {
+          margin-left: 10px;
+          font-size: 13px;
+          color: rgba(0, 0, 0, 0.75);
+        }
+      }
+    }
+  }
+</style>