修改样式整体缩小

src/components/selectBusiness/index.vue

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

src/layouts/home/index.vue

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

src/pages/counter/list/index.vue

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

src/pages/index/list/index.vue

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

src/pages/lobbyManager/list/index.vue

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

src/styles/common.scss

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