task#5914 添加报备页面,地图页面
This commit is contained in:
96
src/views/report/components/service-item.vue
Normal file
96
src/views/report/components/service-item.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user