提交

src/components/pcclList.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="cnt_box">
+      <div class="list_box">
+          <div class="head">
+              <span class="time">
+                  <van-icon name="clock-o" />&ensp;
+                  {{item.pcsj}}</span>
+              <span class="bq red" v-if="item.pcclJg == 2">{{item.pcclJgmc}}</span>
+              <span class="bq blue" v-if="item.pcclJg == 1">{{item.pcclJgmc}}</span>
+              <span class="bq orange" v-if="item.pcclJg == 9">{{item.pcclJgmc}}</span>
+          </div>
+          <div class="info">
+              <div class="item">
+                  车辆信息：<span class="text">{{item.hphm}}</span> <span>{{setDict(item.hpzl,dict.D_BZ_HPZL)}}</span>
+              </div>
+              <div class="item">
+                  人员信息：<span class="text">{{item.jdcsyr}}</span> <span>{{item.jdcsyrsfzh}}</span>
+              </div>
+              <div class="item">
+                  盘查人：<span class="text">{{item.ssbm}}</span> <span>{{item.pcmjXm}}</span>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive,onMounted,defineProps } from "vue";
+import {getDictList,setDict} from '../utils/dict'
+const props = defineProps({
+  item: Object, //列表内容
+  path: String, //跳转详情的路由
+  dict: {
+    type: Object,
+    default: {
+      D_BZ_HPZL: []
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/styles/mixin.scss";
+.cnt_box{
+    margin-top: 2vw;
+    padding: 0 4vw;
+    box-sizing: border-box;
+    .list_box{
+        padding: 2vw;
+        box-sizing: border-box;
+        border-radius: 2vw;
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        .head{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 10vw;
+            border-bottom: 1px solid #e9e9e9;
+            .time{
+                color: #4081e9;
+                @include font_size($font_medium_s);
+            }
+            .bq{
+                padding: 1vw 4vw;
+                color: #fff;
+                border-radius: 4vw;
+                @include font_size($font_medium_s);
+            }
+            .red{
+                background: red;
+            }
+            .orange {
+                background-color: #FF802E;
+            }
+            .yellow {
+                background-color: #FFB114;
+            }
+            .blue{
+                background: #3ACDFF;
+            }
+        }
+        .info{
+            margin-top: 2vw;
+            .item{
+                @include font_size($font_medium_s);
+                line-height: 6vw;
+                .text{
+                    margin: 0 4vw;
+                }
+            }
+        }
+    }
+}
+</style>>