You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.8 KiB
94 lines
2.8 KiB
<template> |
|
<div |
|
class="card-info mb-10" |
|
v-if="extensionApply.id" |
|
> |
|
<header class="flex"> |
|
<span class="primary">延期申请中</span> |
|
<div class="step-item flex v-center"> |
|
<div class="number" active="true">1</div> |
|
<span>延期申请</span> |
|
</div> |
|
<div class="step-item flex v-center"> |
|
<div class="number">2</div> |
|
<span>二级机构专班审批</span> |
|
</div> |
|
<div class="step-item flex v-center"> |
|
<div class="number" >3</div> |
|
<span>市局专班审批</span> |
|
</div> |
|
</header> |
|
<div class="flex"> |
|
<div class="col col-6"> |
|
<label>延期时长</label> |
|
<span>{{ extensionApply.extensionDays }}天</span> |
|
</div> |
|
<div class="col col-18"> |
|
<label>延期理由</label> |
|
<span class="content" style="padding: 0">{{ extensionApply.comments }}</span> |
|
</div> |
|
</div> |
|
<!-- <div class="flex mt-20"> |
|
<div class="col" style="width: 100%"> |
|
<label>驳回理由</label> |
|
<span style="width: calc(100% - 74px)">{{ }}</span> |
|
</div> |
|
</div> --> |
|
</div> |
|
</template> |
|
<script setup> |
|
|
|
const extensionApply = inject('extensionApply') |
|
</script> |
|
<style lang="scss" scoped> |
|
.card-info { |
|
background: #f4f5ff; |
|
border: 1px solid rgba(195, 202, 245, 1); |
|
padding: 12px 20px; |
|
header { |
|
margin-bottom: 20px; |
|
.primary { |
|
font-size: 16px; |
|
color: var(--primary-color); |
|
margin-left: 20px; |
|
margin-right: 60px; |
|
} |
|
.step-item { |
|
font-size: 12px; |
|
padding-right: 52px; |
|
margin-right: 8px; |
|
position: relative; |
|
&::before { |
|
display: block; |
|
content: ""; |
|
width: 45px; |
|
height: 1px; |
|
background: #ccc; |
|
position: absolute; |
|
top: 50%; |
|
right: 0; |
|
} |
|
&:last-child::before { |
|
display: none; |
|
} |
|
.number { |
|
width: 24px; |
|
height: 24px; |
|
border-radius: 50%; |
|
text-align: center; |
|
line-height: 24px; |
|
margin-right: 6px; |
|
border: 1px solid #ccc; |
|
&[active="true"] { |
|
background: var(--primary-color); |
|
color: #fff; |
|
} |
|
&[return="true"] { |
|
background: var(--danger-color); |
|
} |
|
|
|
} |
|
} |
|
} |
|
} |
|
</style> |