96 lines
2.7 KiB
Vue
96 lines
2.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="cnt_box">
|
|||
|
|
<div class="list_box">
|
|||
|
|
<div class="head">
|
|||
|
|
<span class="time">
|
|||
|
|
<van-icon name="clock-o" /> 
|
|||
|
|
{{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>>
|