|
|
|
@ -1,38 +1,24 @@ |
|
|
|
|
<template> |
|
|
|
|
<!-- 业务选择列表 --> |
|
|
|
|
<el-dialog :visible="true" |
|
|
|
|
class="" |
|
|
|
|
:modal="false" |
|
|
|
|
@close="closeData" |
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
:show-close="false" |
|
|
|
|
custom-class="data-dia 2xl:w-7/12 xl:w-9/12 lg:w-full h-9/12"> |
|
|
|
|
<div slot="title" |
|
|
|
|
class="dia-header2"> |
|
|
|
|
<el-dialog :visible="true" class="" :modal="false" @close="closeData" :close-on-click-modal="false" |
|
|
|
|
:show-close="false" custom-class="data-dia 2xl:w-7/12 xl:w-9/12 lg:w-full h-9/12"> |
|
|
|
|
<div slot="title" class="dia-header2"> |
|
|
|
|
<div class="data-title2">业务选择</div> |
|
|
|
|
<div class="close"><img v-lazy="closeImg" |
|
|
|
|
alt="" |
|
|
|
|
@click="showBusinessSelect(false)" /></div> |
|
|
|
|
<div class="close"><img v-lazy="closeImg" alt="" @click="showBusinessSelect(false)" /></div> |
|
|
|
|
</div> |
|
|
|
|
<p class="tips2">请选择您要办理的业务:</p> |
|
|
|
|
<ul class="take-list2"> |
|
|
|
|
<li v-for="(item) in getBusinessSelectList" |
|
|
|
|
:class="{checked: takeCheck == item.myKey}" |
|
|
|
|
:key="item.myKey" |
|
|
|
|
@click="checkTake(item.myKey)"> |
|
|
|
|
<img v-lazy="businessImg" |
|
|
|
|
alt=""> |
|
|
|
|
<p>{{ item.myKey + item.text}}</p> |
|
|
|
|
<li v-for="(item) in getBusinessSelectList" :class="{ checked: takeCheck == item.myKey }" :key="item.myKey" |
|
|
|
|
@click="checkTake(item.myKey)"> |
|
|
|
|
<img v-lazy="businessImg" alt=""> |
|
|
|
|
<p>{{ item.myKey + item.text }}</p> |
|
|
|
|
</li> |
|
|
|
|
<li v-for="(item) in (3 - getBusinessSelectList.length%3)" |
|
|
|
|
class="sitting" |
|
|
|
|
:key="item"></li> |
|
|
|
|
<li v-for="(item) in (3 - getBusinessSelectList.length % 3)" class="sitting" :key="item"></li> |
|
|
|
|
</ul> |
|
|
|
|
<div class="dia-footer2"> |
|
|
|
|
<div class='busyButtonBox'> |
|
|
|
|
<el-button @click="showBusinessSelect(false)">取消</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="selectBusiness()">确定</el-button> |
|
|
|
|
<el-button type="primary" @click="selectBusiness()">确定</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-dialog> |
|
|
|
@ -40,6 +26,7 @@ |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { mapState, mapMutations, mapGetters } from 'vuex'; |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
props: { |
|
|
|
@ -141,7 +128,7 @@ export default { |
|
|
|
|
let timestamp = sessionStorage.getItem('timestamp') |
|
|
|
|
let startTime = sessionStorage.getItem('startTime') |
|
|
|
|
const storeProjectId = sessionStorage.getItem('storeProjectId') |
|
|
|
|
sessionStorage.clear() |
|
|
|
|
Util.clearSession() |
|
|
|
|
sessionStorage.setItem('token', token) |
|
|
|
|
sessionStorage.setItem('cid', cid) |
|
|
|
|
sessionStorage.setItem('systemId', systemId) |
|
|
|
@ -193,249 +180,284 @@ export default { |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.data-dia { |
|
|
|
|
border-radius: 16px; |
|
|
|
|
margin-top: 4vh !important; |
|
|
|
|
background: #fff; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 7%; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, 0); |
|
|
|
|
padding: 0 15px 15px; |
|
|
|
|
z-index: 997; |
|
|
|
|
border: 1px solid #e6e6e6; |
|
|
|
|
max-height: 600px; |
|
|
|
|
border-radius: 16px; |
|
|
|
|
margin-top: 4vh !important; |
|
|
|
|
background: #fff; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 7%; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, 0); |
|
|
|
|
padding: 0 15px 15px; |
|
|
|
|
z-index: 997; |
|
|
|
|
border: 1px solid #e6e6e6; |
|
|
|
|
max-height: 600px; |
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
|
|
// 业务选择中的 |
|
|
|
|
.take-list2 { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
flex-direction: row; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
height: 40vh; |
|
|
|
|
overflow: auto; |
|
|
|
|
// 业务选择中的 |
|
|
|
|
.take-list2 { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
flex-direction: row; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
height: 40vh; |
|
|
|
|
overflow: auto; |
|
|
|
|
li { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 30%; |
|
|
|
|
height: 10vh; |
|
|
|
|
font-size: 16px; |
|
|
|
|
margin: 1vh 0; |
|
|
|
|
border: 4px solid #dbdbdb; |
|
|
|
|
border-radius: 20px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
background-color: rgba(216, 216, 216, 0.1); |
|
|
|
|
// &:first-child{ |
|
|
|
|
// margin: 0 0px 50px 0; |
|
|
|
|
// } |
|
|
|
|
// &:last-child{ |
|
|
|
|
// margin-left: 50px; |
|
|
|
|
// } |
|
|
|
|
img { |
|
|
|
|
width: 15%; |
|
|
|
|
margin: 0; |
|
|
|
|
//height: 154px; |
|
|
|
|
//margin: 0 45px; |
|
|
|
|
} |
|
|
|
|
p { |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #000; |
|
|
|
|
text-align: left; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
// white-space: wrap; |
|
|
|
|
// overflow: hidden; |
|
|
|
|
// text-overflow: ellipsis; |
|
|
|
|
text-overflow: -o-ellipsis-lastline; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
display: -webkit-box; |
|
|
|
|
-webkit-line-clamp: 2; |
|
|
|
|
-webkit-box-orient: vertical; |
|
|
|
|
} |
|
|
|
|
&.checked { |
|
|
|
|
background: rgba(97, 145, 255, 0.1) url('../../assets/svg/checked.svg') 96% 7% / auto no-repeat; |
|
|
|
|
border-color: #6191ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 30%; |
|
|
|
|
height: 10vh; |
|
|
|
|
font-size: 16px; |
|
|
|
|
margin: 1vh 0; |
|
|
|
|
border: 4px solid #dbdbdb; |
|
|
|
|
border-radius: 20px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
background-color: rgba(216, 216, 216, 0.1); |
|
|
|
|
|
|
|
|
|
// &:first-child{ |
|
|
|
|
// margin: 0 0px 50px 0; |
|
|
|
|
// } |
|
|
|
|
// &:last-child{ |
|
|
|
|
// margin-left: 50px; |
|
|
|
|
// } |
|
|
|
|
img { |
|
|
|
|
width: 15%; |
|
|
|
|
margin: 0; |
|
|
|
|
//height: 154px; |
|
|
|
|
//margin: 0 45px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #000; |
|
|
|
|
text-align: left; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
// white-space: wrap; |
|
|
|
|
// overflow: hidden; |
|
|
|
|
// text-overflow: ellipsis; |
|
|
|
|
text-overflow: -o-ellipsis-lastline; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
display: -webkit-box; |
|
|
|
|
-webkit-line-clamp: 2; |
|
|
|
|
-webkit-box-orient: vertical; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.checked { |
|
|
|
|
background: rgba(97, 145, 255, 0.1) url('../../assets/svg/checked.svg') 96% 7% / auto no-repeat; |
|
|
|
|
border-color: #6191ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.dia-header2 { |
|
|
|
|
position: relative; |
|
|
|
|
height: 50px; |
|
|
|
|
line-height: 50px; |
|
|
|
|
background-color: rgb(98, 149, 243); |
|
|
|
|
border-top-left-radius: 14px; |
|
|
|
|
border-top-right-radius: 14px; |
|
|
|
|
|
|
|
|
|
.data-title2 { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 15px; |
|
|
|
|
height: 50px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
line-height: 50px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.close { |
|
|
|
|
height: 50px; |
|
|
|
|
position: absolute; |
|
|
|
|
right: 15px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
vertical-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.dia-header2 { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tips2 { |
|
|
|
|
margin: 1vh 0 2vh 0; |
|
|
|
|
text-align: left; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list { |
|
|
|
|
width: 940px; |
|
|
|
|
min-height: 204px; |
|
|
|
|
max-height: 360px; |
|
|
|
|
overflow: auto; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.img-wrap { |
|
|
|
|
background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat; |
|
|
|
|
width: 180px; |
|
|
|
|
height: 180px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
margin: 5px 10px; |
|
|
|
|
position: relative; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
.file { |
|
|
|
|
position: relative; |
|
|
|
|
height: 50px; |
|
|
|
|
line-height: 50px; |
|
|
|
|
background-color: rgb(98, 149, 243); |
|
|
|
|
border-top-left-radius: 14px; |
|
|
|
|
border-top-right-radius: 14px; |
|
|
|
|
.data-title2 { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 15px; |
|
|
|
|
height: 50px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
line-height: 50px; |
|
|
|
|
color: #fff; |
|
|
|
|
max-width: 180px; |
|
|
|
|
max-height: 130px; |
|
|
|
|
text-align: center; |
|
|
|
|
margin: 10px 10px; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
margin-top: 45px; |
|
|
|
|
} |
|
|
|
|
.close { |
|
|
|
|
height: 50px; |
|
|
|
|
position: absolute; |
|
|
|
|
right: 15px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
img { |
|
|
|
|
vertical-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
line-height: 54px; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
font-size: 18px; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 15px; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.checked { |
|
|
|
|
background: url('../../assets/img/data-frame-checked.png') 0 0 / cover no-repeat, |
|
|
|
|
url('../../assets/svg/checked.svg') 165px 7% / auto no-repeat; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tips2 { |
|
|
|
|
margin: 1vh 0 2vh 0; |
|
|
|
|
text-align: left; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.seal { |
|
|
|
|
width: 1100px; |
|
|
|
|
padding: 0 5%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
|
.box { |
|
|
|
|
border: 2px solid #e6e6e6; |
|
|
|
|
width: 45%; |
|
|
|
|
min-height: 300px; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
padding: 10px; |
|
|
|
|
} |
|
|
|
|
.list { |
|
|
|
|
width: 940px; |
|
|
|
|
min-height: 204px; |
|
|
|
|
max-height: 360px; |
|
|
|
|
overflow: auto; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
.img-wrap { |
|
|
|
|
background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat; |
|
|
|
|
width: 180px; |
|
|
|
|
height: 180px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
margin: 5px 10px; |
|
|
|
|
position: relative; |
|
|
|
|
cursor: pointer; |
|
|
|
|
.file { |
|
|
|
|
position: relative; |
|
|
|
|
max-width: 180px; |
|
|
|
|
max-height: 130px; |
|
|
|
|
text-align: center; |
|
|
|
|
margin: 10px 10px; |
|
|
|
|
img { |
|
|
|
|
margin-top: 45px; |
|
|
|
|
} |
|
|
|
|
p { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
line-height: 54px; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
font-size: 18px; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 15px; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, 0); |
|
|
|
|
} |
|
|
|
|
&.checked { |
|
|
|
|
background: url('../../assets/img/data-frame-checked.png') 0 0 / cover no-repeat, |
|
|
|
|
url('../../assets/svg/checked.svg') 165px 7% / auto no-repeat; |
|
|
|
|
p { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
display: flex; |
|
|
|
|
width: 50%; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
|
.file { |
|
|
|
|
position: relative; |
|
|
|
|
width: 140px; |
|
|
|
|
height: 140px; |
|
|
|
|
text-align: center; |
|
|
|
|
background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat; |
|
|
|
|
cursor: pointer; |
|
|
|
|
margin: 5px 7px; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
width: 130px; |
|
|
|
|
max-height: 90px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.seal { |
|
|
|
|
width: 1100px; |
|
|
|
|
padding: 0 5%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.box { |
|
|
|
|
border: 2px solid #e6e6e6; |
|
|
|
|
width: 45%; |
|
|
|
|
min-height: 300px; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
padding: 10px; |
|
|
|
|
|
|
|
|
|
&:last-child { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
.left { |
|
|
|
|
display: flex; |
|
|
|
|
width: 50%; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
.file { |
|
|
|
|
position: relative; |
|
|
|
|
width: 140px; |
|
|
|
|
height: 140px; |
|
|
|
|
text-align: center; |
|
|
|
|
background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat; |
|
|
|
|
cursor: pointer; |
|
|
|
|
margin: 5px 7px; |
|
|
|
|
img { |
|
|
|
|
width: 130px; |
|
|
|
|
max-height: 90px; |
|
|
|
|
} |
|
|
|
|
&:last-child { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
&:nth-child(n > 1) { |
|
|
|
|
margin-top: 0; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
width: 130px; |
|
|
|
|
max-height: 108px; |
|
|
|
|
margin: 10px auto 0; |
|
|
|
|
z-index: 9; |
|
|
|
|
} |
|
|
|
|
p { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
line-height: 54px; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
&.checked { |
|
|
|
|
background: url('../../assets/img/data-frame-checked.png') 0 0 / cover no-repeat, |
|
|
|
|
url('../../assets/svg/checked.svg') 163px 7% / auto no-repeat; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.active { |
|
|
|
|
left: 0; |
|
|
|
|
z-index: 9999; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:last-child { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:nth-child(n > 1) { |
|
|
|
|
margin-top: 0; |
|
|
|
|
} |
|
|
|
|
.right { |
|
|
|
|
margin-left: 5%; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
width: 130px; |
|
|
|
|
max-height: 108px; |
|
|
|
|
margin: 10px auto 0; |
|
|
|
|
z-index: 9; |
|
|
|
|
} |
|
|
|
|
.else { |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
line-height: 54px; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.dia-footer2 { |
|
|
|
|
height: 70px; |
|
|
|
|
line-height: 70px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
align-items: center; |
|
|
|
|
.busyButtonBox { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
|
&.checked { |
|
|
|
|
background: url('../../assets/img/data-frame-checked.png') 0 0 / cover no-repeat, |
|
|
|
|
url('../../assets/svg/checked.svg') 163px 7% / auto no-repeat; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
left: 0; |
|
|
|
|
z-index: 9999; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&:last-child { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
margin-left: 5%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.else { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.dia-footer2 { |
|
|
|
|
height: 70px; |
|
|
|
|
line-height: 70px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.busyButtonBox { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.sitting { |
|
|
|
|
opacity: 0; |
|
|
|
|
cursor: default !important; |
|
|
|
|
opacity: 0; |
|
|
|
|
cursor: default !important; |
|
|
|
|
} |
|
|
|
|
</style> |