huoran
/
FE_bankTeaching
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

修改样式整体缩小

Browse Source
20240205
e 3 years ago
parent 56a03911de
commit 8498f8e3a4
6 changed files with 134 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/components/selectBusiness/index.vue
  2. 2
      src/layouts/home/index.vue
  3. 150
      src/pages/counter/list/index.vue
  4. 30
      src/pages/index/list/index.vue
  5. 70
      src/pages/lobbyManager/list/index.vue
  6. 10
      src/styles/common.scss

14
src/components/selectBusiness/index.vue
Unescape View File

@ -352,8 +352,8 @@ export default {
align-items: center; align-items: center;
.img-wrap{ .img-wrap{
background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat; background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat;
width: 200px; width: 180px;
height: 200px; height: 180px;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 5px 10px; margin: 5px 10px;
@ -362,7 +362,7 @@ export default {
.file { .file {
position: relative; position: relative;
max-width: 180px; max-width: 180px;
max-height: 140px; max-height: 130px;
text-align: center; text-align: center;
margin: 10px 10px ; margin: 10px 10px ;
img { img {
@ -413,12 +413,16 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
.file { .file {
position: relative; position: relative;
width: 164px; width: 140px;
height: 164px; height: 140px;
text-align: center; text-align: center;
background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat; background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat;
cursor: pointer; cursor: pointer;
margin: 5px 7px; margin: 5px 7px;
img{
width: 130px;
max-height: 90px;
}
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }

2
src/layouts/home/index.vue
Unescape View File

@ -57,6 +57,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main{ .main{
min-height: 100vh; min-height: 99vh;
} }
</style> </style>

150
src/pages/counter/list/index.vue
Unescape View File

@ -10,60 +10,60 @@
<!-- 系统录入 height: 178px;position:relative;top:-450px;right:20px--> <!-- 系统录入 height: 178px;position:relative;top:-450px;right:20px-->
<el-tooltip placement="top" popper-class="sth-popper"> <el-tooltip placement="top" popper-class="sth-popper">
<div slot="content"> <div slot="content">
<img style="height: 178px;position:relative;top:-7vh;right:20px" v-lazy="lazyImg[3]" alt="" /> <!-- <img style="height: 178px;position:relative;top:-30vh;right:20px" v-lazy="lazyImg[3]" alt="" />-->
</div> </div>
<img @click="showManage" class="sth computer cp" v-lazy="lazyImg[4]" alt="" /> <img @click="showManage" class="sth computer cp" v-lazy="lazyImg[4]" alt="" />
</el-tooltip> </el-tooltip>
<!-- 点击打开传票栏-->
<el-tooltip placement="top" popper-class="sth-popper" offset="50"> <el-tooltip placement="top" popper-class="sth-popper" offset="50">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[5]" alt="" /> <img v-lazy="lazyImg[5]" alt="" />
</div> </div>
<img class="sth summons cp" v-lazy="lazyImg[6]" alt="" @click="showData('传票栏',1)" /> <img class="sth summons cp" v-lazy="lazyImg[6]" alt="" @click="showData('传票栏',1)" />
</el-tooltip> </el-tooltip>
<!-- 点击打开普通凭证箱-->
<el-tooltip placement="top-start" popper-class="sth-popper" offset="250"> <el-tooltip placement="top-start" popper-class="sth-popper" offset="250">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[7]" alt="" /> <img v-lazy="lazyImg[7]" alt="" />
</div> </div>
<img class="sth voucher-box cp" v-lazy="lazyImg[8]" alt="" @click="showData('普通凭证箱',2)" /> <img class="sth voucher-box cp" v-lazy="lazyImg[8]" alt="" @click="showData('普通凭证箱',2)" />
</el-tooltip> </el-tooltip>
<!-- 点击打开重要凭证箱-->
<el-tooltip placement="top-start" popper-class="sth-popper" offset="250"> <el-tooltip placement="top-start" popper-class="sth-popper" offset="250">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[9]" alt="" /> <img v-lazy="lazyImg[9]" alt="" />
</div> </div>
<img class="sth important cp" v-lazy="lazyImg[10]" alt="" @click="showData('重要空白凭证箱',3)" /> <img class="sth important cp" v-lazy="lazyImg[10]" alt="" @click="showData('重要空白凭证箱',3)" />
</el-tooltip> </el-tooltip>
<!-- 点击打开钱箱-->
<el-tooltip placement="left-start" popper-class="sth-popper"> <el-tooltip placement="left-start" popper-class="sth-popper">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[11]" alt="" /> <img v-lazy="lazyImg[11]" alt="" />
</div> </div>
<img class="sth money-box cp" v-lazy="lazyImg[12]" alt="" @click="showData('钱箱',4)" /> <img class="sth money-box cp" v-lazy="lazyImg[12]" alt="" @click="showData('钱箱',4)" />
</el-tooltip> </el-tooltip>
<!-- 点击打开印章盒-->
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[13]" alt="" /> <img v-lazy="lazyImg[13]" alt="" />
</div> </div>
<img class="sth seal-box cp" v-lazy="lazyImg[14]" @click="showData('印章盒',5)" alt="" /> <img class="sth seal-box cp" v-lazy="lazyImg[14]" @click="showData('印章盒',5)" alt="" />
</el-tooltip> </el-tooltip>
<!-- 点击打开验钞机-->
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[15]" alt="" /> <img v-lazy="lazyImg[15]" alt="" />
</div> </div>
<img class="sth currency-detector cp" v-lazy="lazyImg[16]" @click="showData('验钞机',6)" alt="" /> <img class="sth currency-detector cp" v-lazy="lazyImg[16]" @click="showData('验钞机',6)" alt="" />
</el-tooltip> </el-tooltip>
<!-- 点击打开打印机-->
<el-tooltip placement="top" popper-class="sth-popper" offset="-400"> <el-tooltip placement="top" popper-class="sth-popper" offset="-400">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[17]" alt="" /> <img v-lazy="lazyImg[17]" alt="" />
</div> </div>
<img class="sth printer cp" v-lazy="lazyImg[18]" alt="" @click="showData('打印机',7)" /> <img class="sth printer cp" v-lazy="lazyImg[18]" alt="" @click="showData('打印机',7)" />
</el-tooltip> </el-tooltip>
<!-- 点击打开密码器-->
<el-tooltip placement="top" popper-class="sth-popper" offset="50"> <el-tooltip placement="top" popper-class="sth-popper" offset="50">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[19]" alt="" /> <img v-lazy="lazyImg[19]" alt="" />
@ -77,21 +77,21 @@
</div> </div>
<img class="sth employee" v-lazy="lazyImg[21]" @click="setShowBusiness(true)" alt="" /> <img class="sth employee" v-lazy="lazyImg[21]" @click="setShowBusiness(true)" alt="" />
</el-tooltip> </el-tooltip>
<!-- 点击打开资料-->
<el-tooltip placement="top" popper-class="sth-popper" offset="-50"> <el-tooltip placement="top" popper-class="sth-popper" offset="-50">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[22]" alt="" /> <img v-lazy="lazyImg[22]" alt="" />
</div> </div>
<p class="employeeText" @click="showData('资料',9)">资料</p> <p class="employeeText" @click="showData('资料',9)">资料</p>
</el-tooltip> </el-tooltip>
<!-- 点击打开刷卡器-->
<el-tooltip placement="top" popper-class="sth-popper" offset="00"> <el-tooltip placement="top" popper-class="sth-popper" offset="00">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[23]" alt="" /> <img v-lazy="lazyImg[23]" alt="" />
</div> </div>
<img class="sth card-machine cp" v-lazy="lazyImg[24]" alt="" @click="showData('刷卡器',10)" /> <img class="sth card-machine cp" v-lazy="lazyImg[24]" alt="" @click="showData('刷卡器',10)" />
</el-tooltip> </el-tooltip>
<!-- 点击打开身份证-->
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
<div slot="content"> <div slot="content">
<img v-lazy="lazyImg[25]" alt="" /> <img v-lazy="lazyImg[25]" alt="" />
@ -161,7 +161,6 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="popText==='普通凭证箱'" class="seal" style="width:1200px;"> <div v-else-if="popText==='普通凭证箱'" class="seal" style="width:1200px;">
<div class="left else"> <div class="left else">
<div v-for="(item) in commonArr" :key="item.id" :class="{ checked: commonChecked.includes(item.id),file:true }" @click="dblClickFn(item)"> <div v-for="(item) in commonArr" :key="item.id" :class="{ checked: commonChecked.includes(item.id),file:true }" @click="dblClickFn(item)">
@ -170,28 +169,24 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="popText==='身份证扫描仪'" class="list" ref="popUp"> <div v-else-if="popText==='身份证扫描仪'" class="list" ref="popUp">
<div class="img-wrap" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" v-for="(item, index) in receptionList" :key="item.id" @click='dislodgeItem(index)'> <div class="img-wrap" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" v-for="(item, index) in receptionList" :key="item.id" @click='dislodgeItem(index)'>
<img :src="item.src" class="file" alt="" /> <img :src="item.src" class="file" alt="" />
<p class="text">{{item.name}}</p> <p class="text">{{item.name}}</p>
</div> </div>
</div> </div>
<div v-else-if="popText==='身份证扫描器'" class="list" ref="popUp"> <div v-else-if="popText==='身份证扫描器'" class="list" ref="popUp">
<div class="img-wrap" v-for="(item, index) in receptionList" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" :key="item.id" @click='dislodgeItem(index)'> <div class="img-wrap" v-for="(item, index) in receptionList" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" :key="item.id" @click='dislodgeItem(index)'>
<img :src="item.src" class="file" alt="" /> <img :src="item.src" class="file" alt="" />
<p class="text">{{item.name}}</p> <p class="text">{{item.name}}</p>
</div> </div>
</div> </div>
<div v-else-if="popText==='刷卡器'" class="list" ref="popUp"> <div v-else-if="popText==='刷卡器'" class="list" ref="popUp">
<div class="img-wrap" v-for="(item, index) in receptionList" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" @click='dislodgeItem(index)' :key="item.id"> <div class="img-wrap" v-for="(item, index) in receptionList" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" @click='dislodgeItem(index)' :key="item.id">
<img :src="item.src" class="file" alt="" /> <img :src="item.src" class="file" alt="" />
<p class="text">{{item.name}}</p> <p class="text">{{item.name}}</p>
</div> </div>
</div> </div>
<!-- 暂时未确定是否公共使用一个弹框 receptionList--> <!-- 暂时未确定是否公共使用一个弹框 receptionList-->
<div v-else class="list" ref="popUp"><!-- 钱箱 / 传票栏 ... 一系列可存物品弹框 --> <div v-else class="list" ref="popUp"><!-- 钱箱 / 传票栏 ... 一系列可存物品弹框 -->
<div class="img-wrap" v-for="(item, index) in goodState" @click='dislodgeItem(index)' :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" :key="item.id"> <div class="img-wrap" v-for="(item, index) in goodState" @click='dislodgeItem(index)' :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" :key="item.id">
@ -199,9 +194,6 @@
<p class="text">{{item.name }}</p> <p class="text">{{item.name }}</p>
</div> </div>
</div> </div>
<div class="dia-footer"> <div class="dia-footer">
<button v-throttle @click="popSure" type="button">确定</button> <button v-throttle @click="popSure" type="button">确定</button>
</div> </div>
@ -2430,23 +2422,20 @@ export default {
.counter { .counter {
top: 23vh; top: 23vh;
left: 15vw; left: 15vw;
width: 75vw; width: 68vw;
position: absolute; position: absolute;
} }
.glass { .glass {
// 玻璃窗 // 玻璃窗
top: 4vh; top: 5vh;
left: 46vw; left: 45vw;
width: 40vw; width: 35vw;
position: absolute; position: absolute;
} }
.employee { .employee {
// 柜员 // 柜员
// top: 57%; top: 43vh;
// left: 42%; left: 39vw;
// width: 23%;
top: 44vh;
left: 43vw;
width: 18vw; width: 18vw;
position: absolute; position: absolute;
} }
@ -2454,8 +2443,8 @@ export default {
.employeeText { .employeeText {
// 资料文字 // 资料文字
position: absolute; position: absolute;
top: 56vh; top: 57vh;
left: 56vw; left: 52vw;
color: #000; color: #000;
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
font-size: 18px; font-size: 18px;
@ -2465,68 +2454,68 @@ export default {
} }
.man { .man {
// 人 // 人
top: 16vh; top: 14vh;
left: 70vw; left: 66vw;
width: 18vw; width: 16vw;
} }
.money-box { .money-box {
// 钱箱 // 钱箱
top: 49vh; top: 48vh;
left: 19vw; left: 19vw;
width: 8vw; width: 8vw;
} }
.important { .important {
// 重空箱 // 重空箱
top: 47vh; top: 46vh;
left: 24vw; left: 24vw;
width: 8vw; width: 8vw;
} }
.voucher-box { .voucher-box {
// 普通箱 // 普通箱
top: 35vh; top: 32vh;
left: 29vw; left: 29vw;
width: 8vw; width: 8vw;
} }
.summons { .summons {
// 传票栏 // 传票栏
top: 37vh; top: 36vh;
left: 34vw; left: 34vw;
width: 8vw; width: 7vw;
} }
.computer { .computer {
top: 24vh; top: 22vh;
left: 42vw; left: 40vw;
width: 10vw; width: 10vw;
} }
.card-machine { .card-machine {
top: 45vh; top: 45vh;
left: 54vw; left: 50vw;
width: 5vw; width: 5vw;
} }
.idCard-scanner { .idCard-scanner {
top: 50vh; top: 50vh;
left: 57vw; left: 53vw;
width: 4vw; width: 4vw;
} }
.seal-box { .seal-box {
top: 52vh; top: 52vh;
left: 61vw; left: 56vw;
width: 4vw; width: 4vw;
} }
.currency-detector { .currency-detector {
top: 51vh; top: 51vh;
left: 65vw; left: 60vw;
width: 8vw; width: 8vw;
} }
.printer { .printer {
top: 58vh; top: 58vh;
left: 72vw; left: 66vw;
width: 8vw; width: 8vw;
} }
.cipher-machine { .cipher-machine {
top: 39vh; top: 39vh;
left: 61vw; left: 57vw;
width: 6vw; width: 5vw;
} }
} }
@media screen and (min-width: 1551px) and (max-width: 1919px) { @media screen and (min-width: 1551px) and (max-width: 1919px) {
@ -2899,8 +2888,8 @@ export default {
align-items: center; align-items: center;
.img-wrap{ .img-wrap{
background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat; background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat;
width: 200px; width: 180px;
height: 200px; height: 180px;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 5px 10px; margin: 5px 10px;
@ -2909,7 +2898,7 @@ export default {
.file { .file {
position: relative; position: relative;
max-width: 180px; max-width: 180px;
max-height: 140px; max-height: 130px;
text-align: center; text-align: center;
margin: 10px 10px ; margin: 10px 10px ;
img { img {
@ -2960,8 +2949,8 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
.file { .file {
position: relative; position: relative;
width: 164px; width: 140px;
height: 164px; height: 140px;
text-align: center; text-align: center;
background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat; background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat;
cursor: pointer; cursor: pointer;
@ -2973,8 +2962,8 @@ export default {
margin-top: 0; margin-top: 0;
} }
img { img {
width: 130px; width: 90px;
max-height: 108px; max-height: 90px;
margin: 10px auto 0; margin: 10px auto 0;
z-index: 9; z-index: 9;
} }
@ -3028,7 +3017,7 @@ export default {
} }
} }
.dia-footer { .dia-footer {
margin-top: 140px; margin-top: 100px;
text-align: center; text-align: center;
button { button {
width: 300px; width: 300px;
@ -3062,7 +3051,7 @@ export default {
.data-dia { .data-dia {
top: 7%; top: 7%;
left: 50%; left: 50%;
min-height: 75vh; min-height: 65vh;
.seal{ .seal{
margin-top: -5vh; margin-top: -5vh;
.left{ .left{
@ -3093,10 +3082,10 @@ export default {
} }
} }
.dia-footer { .dia-footer {
position: absolute; //position: absolute;
bottom: 1vh; //bottom: 1vh;
left: 50%; //left: 50%;
transform: translateX(-50%); //transform: translateX(-50%);
} }
} }
} }
@ -3120,28 +3109,33 @@ export default {
} }
/deep/ .view .el-dialog__body { /deep/ .view .el-dialog__body {
padding: 0 !important; padding: 0 !important;
background: #f5f6f8;
width: 100%;
height: 100%;
overflow: hidden;
} }
.sth{ .sth{
position: absolute; position: absolute;
&.cp{ &.cp{
cursor: pointer; cursor: pointer;
} }
} }
.guide{ .guide{
top: 80px; top: 80px;
left: 10px; left: 10px;
width: 150px; width: 150px;
cursor: pointer; cursor: pointer;
background:url(../../../assets/img/lobby-btn-bg.png); background:url(../../../assets/img/lobby-btn-bg.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
line-height: 50px; line-height: 50px;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
color: #fff; color: #fff;
&:hover{ &:hover{
opacity: .9; opacity: .9;
} }
} }
</style> </style>

30
src/pages/index/list/index.vue
Unescape View File

@ -128,12 +128,12 @@ export default {
position: absolute; position: absolute;
top: 43%; top: 43%;
left: -23%; left: -23%;
width: 280px; width: 220px;
height: 100px; height: 85px;
line-height: 94px; line-height: 75px;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 28px; font-size: 24px;
background: url(../../../assets/img/index-btn-bg.png) 0 0/cover no-repeat; background: url(../../../assets/img/index-btn-bg.png) 0 0/cover no-repeat;
} }
} }
@ -152,30 +152,30 @@ export default {
} }
} }
.credit-dep{ .credit-dep{
top: 38%; top: 35%;
left: 0; left: 0;
width: 21%; width: 20%;
} }
.company-finance{ .company-finance{
top: 62%; top: 55%;
left: 10%; left: 9%;
width: 30%; width: 28%;
} }
.personal-finance{ .personal-finance{
top: 78%; top: 72%;
left: 31%; left: 25%;
width: 30%; width: 30%;
} }
.case{ .case{
position: absolute; position: absolute;
top: 80px; top: 80px;
left: 40px; left: 40px;
width: 250px; width: 200px;
height: 106px; height: 85px;
line-height: 106px; line-height: 85px;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 26px; font-size: 24px;
background: url(../../../assets/img/case.png) 0 0 /cover no-repeat; background: url(../../../assets/img/case.png) 0 0 /cover no-repeat;
cursor: pointer; cursor: pointer;
} }

70
src/pages/lobbyManager/list/index.vue
Unescape View File

@ -42,13 +42,13 @@
</div> </div>
</el-dialog> </el-dialog>
<el-dialog :visible.sync="takeResultVisible" width="580px" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> <el-dialog :visible.sync="takeResultVisible" width="400px" :close-on-click-modal="false" :show-close="false" custom-class="data-dia">
<div slot="title" class="dia-header"> <div slot="title" class="dia-header">
<div class="data-title">取号机</div> <div class="data-title">取号机</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="takeResultVisible = false"> <img class="close" src="@/assets/svg/close.svg" alt="" @click="takeResultVisible = false">
</div> </div>
<div class="result"> <div class="result">
<div style='width: 136px;height: 136px;margin: auto'> <div style='width: 50px;height: 50px;margin: auto'>
<img src="@/assets/img/finish.png" alt=""> <img src="@/assets/img/finish.png" alt="">
</div> </div>
<h6>取号成功</h6> <h6>取号成功</h6>
@ -85,8 +85,8 @@
<p>特殊业务申请书</p> <p>特殊业务申请书</p>
</li> </li>
<li :class="{checked: checkList.includes(4)}" @click="checkData(4)"> <li :class="{checked: checkList.includes(4)}" @click="checkData(4)">
<img style="margin-top: 32px" src="@/assets/img/goods/cash-sm.png" alt=""> <img style="margin-top: 10px" src="@/assets/img/goods/cash-sm.png" alt="">
<p style="font-size: 12px">开立单位银行结算账户申请书</p> <p style="font-size: 14px;line-height: 15px">开立单位银行结算账户申请书</p>
</li> </li>
<li :class="{checked: checkList.includes(5)}" @click="checkData(5)"> <li :class="{checked: checkList.includes(5)}" @click="checkData(5)">
<img src="@/assets/img/goods/CashCertificate.png" alt=""> <img src="@/assets/img/goods/CashCertificate.png" alt="">
@ -105,7 +105,7 @@
<p>现金支票</p> <p>现金支票</p>
</li> </li>
<li :class="{checked: checkList.includes(8)}" @click="checkData(8)"> <li :class="{checked: checkList.includes(8)}" @click="checkData(8)">
<img style="margin-top: 32px" src="@/assets/img/goods/cash-sm.png" alt=""> <img style="margin-top: 10px" src="@/assets/img/goods/cash-sm.png" alt="">
<p>转账支票</p> <p>转账支票</p>
</li> </li>
<li :class="{checked: checkList.includes(9)}" @click="checkData(9)"> <li :class="{checked: checkList.includes(9)}" @click="checkData(9)">
@ -121,7 +121,7 @@
<p>现金缴款单</p> <p>现金缴款单</p>
</li> </li>
<li :class="{checked: checkList.includes(11)}" @click="checkData(11)"> <li :class="{checked: checkList.includes(11)}" @click="checkData(11)">
<img style="margin-top: 32px" src="@/assets/img/goods/cash-sm.png" alt=""> <img style="margin-top: 10px" src="@/assets/img/goods/cash-sm.png" alt="">
<p>境外汇款申请书</p> <p>境外汇款申请书</p>
</li> </li>
<!-- 这个是占位的！ --> <!-- 这个是占位的！ -->
@ -146,10 +146,10 @@
<p>身份证</p> <p>身份证</p>
</li> </li>
<li :class="{checked: checkList.includes(3)}" @click="checkData(3)"> <li :class="{checked: checkList.includes(3)}" @click="checkData(3)" style='margin-left: 10px'>
<!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> --> <!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> -->
<el-image <el-image
style="margin-top: -10" style="margin-top: 10px"
:src="elImg[1]" :src="elImg[1]"
:fit="elImgFit" :fit="elImgFit"
></el-image> ></el-image>
@ -172,7 +172,7 @@
<img src="@/assets/img/idCard-sm.png" alt=""> <img src="@/assets/img/idCard-sm.png" alt="">
<p>身份证</p> <p>身份证</p>
</li> </li>
<li :class="{checked: checkList.includes(3)}" @click="checkData(3)"> <li :class="{checked: checkList.includes(3)}" @click="checkData(3)" style='margin-left: 10px'>
<!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> --> <!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> -->
<el-image <el-image
style="margin-top: -10" style="margin-top: -10"
@ -212,31 +212,18 @@ export default {
listLi1 : [ listLi1 : [
{checked: 1, click: 1, src: require('@/assets/img/goods/accountApplyBook.jpg'), title: '开户申请书'}, {checked: 1, click: 1, src: require('@/assets/img/goods/accountApplyBook.jpg'), title: '开户申请书'},
{checked: 2, click: 2, src: require('@/assets/img/idCard-copy-sm.png'), title: '密码挂失申请书'}, {checked: 2, click: 2, src: require('@/assets/img/idCard-copy-sm.png'), title: '密码挂失申请书'},
{checked: 3, click: 3, src: require('@/assets/img/goods/businessSpecialApplication.png'), title: '特殊业务申请书'}, {checked: 3, click: 3, src: require('@/assets/img/goods/businessSpecialApplication.png'), title: '特殊业务申请书'},
{checked: 4, click: 4, src: require('@/assets/img/goods/cash-sm.png'), title: '开立单位银行结算账户申请书'}, {checked: 4, click: 4, src: require('@/assets/img/goods/cash-sm.png'), title: '开立单位银行结算账户申请书'},
{checked: 1, click: 5, src: require('@/assets/img/goods/CashCertificate.png'), title: '现金存款凭证'}, {checked: 1, click: 5, src: require('@/assets/img/goods/CashCertificate.png'), title: '现金存款凭证'},
{checked: 2, click: 6, src: require('@/assets/img/goods/zzpt.png'), title: '转账凭证'}, {checked: 2, click: 6, src: require('@/assets/img/goods/zzpt.png'), title: '转账凭证'},
{checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'}, {checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'},
{checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金支票'}, {checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金支票'},
{checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '转账支票'}, {checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '转账支票'},
{checked: 2, click: 6, src: require('@/assets/img/idCard-copy-sm.png'), title: '支票领购单'}, {checked: 2, click: 6, src: require('@/assets/img/idCard-copy-sm.png'), title: '支票领购单'},
{checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金缴款单'}, {checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金缴款单'},
{checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'}, {checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'},
], ],
lazy1: require('@/assets/img/manager.png') lazy1: require('@/assets/img/manager.png')
} }
}, },
mounted() { mounted() {
@ -366,8 +353,8 @@ export default {
margin-right: 50px; margin-right: 50px;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 32px; font-size: 28px;
line-height: 94px; line-height: 70px;
background: url(../../../assets/img/lobby-btn-bg.png) 0 0/cover no-repeat; background: url(../../../assets/img/lobby-btn-bg.png) 0 0/cover no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
cursor: pointer; cursor: pointer;
@ -379,10 +366,11 @@ export default {
} }
/deep/.data-dia{ /deep/.data-dia{
// width:80%; // width:80%;
min-width:960px; width: 800px;
min-width:400px;
margin: auto; margin: auto;
.take-list{ .take-list{
width: 810px; width: 600px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -390,30 +378,27 @@ export default {
li{ li{
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
width: 45%; width: 250px;
height: 150px; height: 120px;
border: 4px solid #DBDBDB; border: 4px solid #DBDBDB;
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
background-color: rgba(216,216,216,0.10); background-color: rgba(216,216,216,0.10);
&:first-child{ &:first-child{
margin: 0 0px 50px 0; margin: 0 0px 30px 0;
} }
&:last-child{ &:last-child{
margin-left: 50px; //margin-left: 30px;
} }
img{ img{
width: 30%; width: 100%;
margin: 0;
//height: 154px;
//margin: 0 45px;
} }
p{ p{
font-size: 22px; font-size: 18px;
color: #000; color: #000;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
padding: 0 20px; padding: 0 18px;
} }
&.checked{ &.checked{
background: rgba(97,145,255,0.10) url(../../../assets/svg/checked.svg) 96% 7%/auto no-repeat; background: rgba(97,145,255,0.10) url(../../../assets/svg/checked.svg) 96% 7%/auto no-repeat;
@ -444,7 +429,8 @@ export default {
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
&>li { &>li {
width: 22%; width: 140px;
height: 140px;
margin: 10px 0; margin: 10px 0;
// 这里和common.js混了！ // 这里和common.js混了！
box-sizing: border-box; box-sizing: border-box;
@ -460,14 +446,18 @@ export default {
// //max-width: 90%; // //max-width: 90%;
// } // }
&>.el-image { &>.el-image {
// width: 90%; width: 100%;
max-height: 75%; max-height: 80px;
overflow: hidden; overflow: hidden;
img { img {
transform: translateY(-35%); //transform: translateY(-35%);
// width: 100%; // width: 100%;
} }
} }
p{
font-size: 14px;
line-height: 40px;
}
} }
} }
} }

10
src/styles/common.scss
Unescape View File

@ -234,7 +234,7 @@
color: #000; color: #000;
} }
.list{ .list{
width: 956px; width: 100%;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
@ -248,7 +248,7 @@
background: url(../assets/img/data-frame.png) 0 0/cover no-repeat; background: url(../assets/img/data-frame.png) 0 0/cover no-repeat;
cursor: pointer; cursor: pointer;
img{ img{
margin-top: 45px; margin-top: 10px;
} }
p{ p{
position: absolute; position: absolute;
@ -272,10 +272,10 @@
margin-top: 50px; margin-top: 50px;
text-align: center; text-align: center;
button{ button{
width: 300px; width: 250px;
line-height: 60px; line-height: 50px;
color: #fff; color: #fff;
font-size: 24px; font-size: 18px;
background-color: rgb(81,147,255); background-color: rgb(81,147,255);
border: 0; border: 0;
border-radius: 20px; border-radius: 20px;

Write Preview
Loading…
Cancel
Save