From defb6f90820349920e35f6224512240c9798af6c Mon Sep 17 00:00:00 2001 From: "luoJunYong.123" Date: Tue, 7 Dec 2021 17:18:54 +0800 Subject: [PATCH] 1528_css --- src/pages/counter/list/index.vue | 790 +++++++++---------------------- 1 file changed, 234 insertions(+), 556 deletions(-) diff --git a/src/pages/counter/list/index.vue b/src/pages/counter/list/index.vue index bb59fed..ae00245 100644 --- a/src/pages/counter/list/index.vue +++ b/src/pages/counter/list/index.vue @@ -946,562 +946,7 @@ export default { height: calc(100vh - 60px); } - - // 1920 - // @media screen and (min-width: 1920px) { - // .wrap { - // width: 100%; - // position: relative; - // //width: 100%; - // height: calc(100vh - 68px); - // overflow: hidden; - // background:url("../../../assets/img/integrated-counter-bg.png"); - // } - // .counter { - // top: 116px; - // left: 357px; - // width: 1555px; - // } - // .glass { - // top: -145px; - // left: 964px; - // width: 855px; - // } - // .employee { - // top: 371px; - // left: 920px; - // width: 388px; - // } - // .employeeText { - // position: absolute; - // top: 503px; - // left: 1229px; - // color: #000; - // transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); - // font-size: 18px; - // width: 100px; - // height: 100px; - // text-align: center; - // line-height: 100px; - // cursor: pointer; - // } - // .man { - // top: 82px; - // right: 150px; - // width: 262px; - // } - // .money-box { - // top: 406px; - // left: 445px; - // width: 197px; - // } - // .important { - // top: 372px; - // left: 582px; - // width: 175px; - // } - // .voucher-box { - // top: 216px; - // left: 718px; - // width: 160px; - // } - // .summons { - // top: 250px; - // left: 844px; - // width: 139px; - // } - // .computer { - // top: 120px; - // left: 955px; - // width: 219px; - // } - // .card-machine { - // top: 377px; - // left: 1147px; - // width: 110px; - // } - // .idCard-scanner { - // top: 443px; - // left: 1229px; - // width: 82px; - // } - // .seal-box { - // top: 486px; - // left: 1340px; - // width: 97px; - // } - // .currency-detector { - // top: 492px; - // left: 1421px; - // width: 151px; - // } - // .printer { - // top: 550px; - // left: 1531px; - // width: 205px; - // } - // .cipher-machine { - // top: 324px; - // left: 1298px; - // width: 100px; - // } - // .el-tooltip__popper.sth-popper { - // padding: 0; - // // background-color: transparent; - // background-color: #fff; - // img { - // height: 78px; - // } - // .popper__arrow { - // display: none; - // } - // } - // } - // // 1440-1550 - // @media screen and (max-width: 1550px) { - // .wrap { - // width: 1550px; - // position: relative; - // //width: 100%; - // height: calc(100vh - 68px); - // overflow: hidden; - // background:url("../../../assets/img/integrated-counter-bg.png"); - // } - // .counter { - // top: 35%; - // left: 10%; - // height: 61vh; - // } - // .glass { - // // 玻璃窗 - // top: 185px; - // left: 716px; - // width: 690px; - // } - // .employee { - // // 柜员 - // // top: 57%; - // // left: 42%; - // // width: 23%; - // top: 617px; - // left: 610px; - // width: 333px; - // position: relative; - // } - // .employeeText { - // // 资料文字 - // position: absolute; - // top: 746px; - // left: 925px; - // color: #000; - // transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); - // font-size: 18px; - // width: 100px; - // height: 100px; - // cursor: pointer - // } - // .man { - // // 人 - // top: 278px; - // left: 1075px; - // width: 267px; - // } - // .money-box { - // // 钱箱 - // top: 637px; - // left: 195px; - // width: 164px; - // } - // .important { - // // 重空箱 - // top: 621px; - // left: 314px; - // width: 149px; - // } - // .voucher-box { - // // 普通箱 - // top: 482px; - // left: 434px; - // width: 134px; - // } - // .summons { - // // 传票栏 - // top: 500px; - // left: 548px; - // width: 112px; - // } - // .computer { - // top: 395px; - // left: 652px; - // width: 170px; - // } - // .card-machine { - // top: 596px; - // left: 800px; - // width: 100px; - // } - // .idCard-scanner { - // top: 656px; - // left: 861px; - // width: 100px; - // } - // .seal-box { - // top: 680px; - // left: 966px; - // width: 86px; - // } - // .currency-detector { - // top: 693px; - // left: 1035px; - // width: 142px; - // } - // .printer { - // top: 758px; - // left: 1162px; - // width: 187px; - // } - // .cipher-machine { - // top: 551px; - // left: 977px; - // width: 122px; - // } - // } - // @media screen and (min-width: 1550px) and (max-width: 1919px) { - // .wrap{ - // width: 1550px; - // position: relative; - // //width: 100%; - // height: calc(100vh - 68px); - // overflow: hidden; - // background:url("../../../assets/img/integrated-counter-bg.png"); - // } - // .counter { - // top: 30%; - // left: 8%; - // height: 63vh; - // } - // .glass { - // // 玻璃窗 - // top: 15vh; - // left: 35vw; - // width: 35vw; - // } - - // .employee { - // // 柜员 - // // top: 57%; - // // left: 42%; - // // width: 23%; - // top: 430px; - // left: 490px; - // width: 283px; - // position: relative; - // } - // .employeeText { - // // 资料文字 - // position: absolute; - // top: 580px; - // left: 710px; - // color: #000; - // transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); - // font-size: 18px; - // width: 100px; - // text-align: center; - // height: 100px; - // line-height: 100px; - // cursor: pointer - - // } - // .man { - // // 人 - // top: 191px; - // left: 846px; - // width: 199px; - // } - // .money-box { - // // 钱箱 - // top: 540px; - // left: 190px; - // width: 129px; - // } - // .important { - // // 重空箱 - // top: 48vh; - // left: 18vw; - // width: 118px; - // } - // .voucher-box { - // // 普通箱 - // top: 35vh; - // left: 24vw; - // width: 112px; - // } - // .summons { - // // 传票栏 - // top: 35vh; - // left: 30vw; - // width: 112px; - // } - // .computer { - // top: 30vh; - // left: 35vw; - // width: 148px; - // } - // .card-machine { - // top: 50vh; - // left: 43vw; - // width: 66px; - // } - // .idCard-scanner { - // top: 53vh; - // left: 46vw; - // width: 46px; - // } - // .seal-box { - // top: 55vh; - // left: 49vw; - // width: 50px; - // } - // .currency-detector { - // top: 55vh; - // left: 51vw; - // width: 117px; - // } - // .printer { - // top: 60vh; - // left: 56vw; - // width: 149px; - // } - // .cipher-machine { - // top: 391px; - // left: 711px; - // width: 79px; - // } - // } - // @media screen and (min-width: 900px) and (max-width: 1550px) { - // .wrap { - // width: 100%; - // position: relative; - // //width: 100%; - // height: calc(100vh - 68px); - // overflow: hidden; - // background:url("../../../assets/img/integrated-counter-bg.png"); - // } - // .counter { - // top: 30vh; - // left: 15vw; - // width: 80vw; - // position: absolute; - // } - // .glass { - // // 玻璃窗 - // top: 12vh; - // left: 50vw; - // width: 36vw; - // position: absolute; - // } - // .employee { - // // 柜员 - // // top: 57%; - // // left: 42%; - // // width: 23%; - // top: 40vh; - // left: 40vw; - // width: 23vw; - // position: absolute; - // } - // // 先放着 - // .employeeText { - // // 资料文字 - // position: absolute; - // top: 58vh; - // left: 58vw; - // color: #000; - // transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); - // font-size: 18px; - // width: 100px; - // height: 100px; - // cursor: pointer - // } - // .man { - // // 人 - // top: 10vh; - // left: 70vw; - // width: 23vw; - // height: 50vh; - // } - // .money-box { - // // 钱箱 - // top: 48vh; - // left: 18vw; - // width: 8vw; - // } - // .important { - // // 重空箱 - // top: 46vh; - // left: 26vw; - // width: 8vw; - // } - // .voucher-box { - // // 普通箱 - // top: 32vh; - // left: 34vw; - // width: 8vw; - // } - // .summons { - // // 传票栏 - // top: 32vh; - // left: 42vw; - // width: 8vw; - // } - // .computer { - // top: 28vh; - // left: 48vw; - // width: 10vw; - // } - // .card-machine { - // top: 47vh; - // left: 57vw; - // width: 6vw; - // } - // .idCard-scanner { - // top: 52vh; - // left: 61vw; - // width: 6vw; - // } - // .seal-box { - // top: 54vh; - // left: 66vw; - // width: 6vw; - // } - // .currency-detector { - // top: 57vh; - // left: 70vw; - // width: 6vw; - // } - // .printer { - // top: 62vh; - // left: 76vw; - // width: 6vw; - // } - // .cipher-machine { - // top: 50vh; - // left: 75vw; - // width: 6vw; - // } - // } - // @media screen and (min-width: 1590px) and (max-width: 1650px) { - // .wrap { - // width: 100%; - // position: relative; - // //width: 100%; - // height: calc(100vh - 68px); - // overflow: hidden; - // background:url("../../../assets/img/integrated-counter-bg.png"); - // } - // .counter { - // top: 30vh; - // left: 15vw; - // width: 80vw; - // position: absolute; - // } - // .glass { - // // 玻璃窗 - // top: 12vh; - // left: 50vw; - // width: 36vw; - // position: absolute; - // } - // .employee { - // // 柜员 - // // top: 57%; - // // left: 42%; - // // width: 23%; - // top: 40vh; - // left: 40vw; - // width: 23vw; - // position: absolute; - // } - // // 先放着 - // .employeeText { - // // 资料文字 - // position: absolute; - // top: 58vh; - // left: 58vw; - // color: #000; - // transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); - // font-size: 18px; - // width: 100px; - // height: 100px; - // cursor: pointer - // } - // .man { - // // 人 - // top: 10vh; - // left: 70vw; - // width: 23vw; - // height: 50vh; - // } - // .money-box { - // // 钱箱 - // top: 48vh; - // left: 18vw; - // width: 8vw; - // } - // .important { - // // 重空箱 - // top: 46vh; - // left: 26vw; - // width: 8vw; - // } - // .voucher-box { - // // 普通箱 - // top: 32vh; - // left: 34vw; - // width: 8vw; - // } - // .summons { - // // 传票栏 - // top: 32vh; - // left: 42vw; - // width: 8vw; - // } - // .computer { - // top: 28vh; - // left: 48vw; - // width: 10vw; - // } - // .card-machine { - // top: 47vh; - // left: 57vw; - // width: 6vw; - // } - // .idCard-scanner { - // top: 52vh; - // left: 61vw; - // width: 6vw; - // } - // .seal-box { - // top: 54vh; - // left: 66vw; - // width: 6vw; - // } - // .currency-detector { - // top: 57vh; - // left: 70vw; - // width: 6vw; - // } - // .printer { - // top: 62vh; - // left: 76vw; - // width: 6vw; - // } - // .cipher-machine { - // top: 50vh; - // left: 75vw; - // width: 6vw; - // } - // } + // 公共样式-------------------兼容1400*900 @@ -2196,6 +1641,239 @@ export default { width: 6vw; } } + @media screen and (min-width: 1500px) and (max-width: 1550px) { + .data-dia { + top: -2vh!important; + height: 67vh!important; + .data-title { + height: 8vh!important; + } + .dia-footer { + margin-top: 10vh!important; + } + } + .wrap { + width: 100%; + position: relative; + //width: 100%; + height: calc(100vh - 68px); + overflow: hidden; + background:url("../../../assets/img/integrated-counter-bg.png"); + } + .counter { + top: 30vh; + left: 15vw; + width: 80vw; + position: absolute; + } + .glass { + // 玻璃窗 + top: 4vh; + left: 46vw; + width: 43vw; + position: absolute; + } + .employee { + // 柜员 + // top: 57%; + // left: 42%; + // width: 23%; + top: 62vh; + left: 44vw; + width: 18vw; + position: absolute; + } + // 先放着 + .employeeText { + // 资料文字 + position: absolute; + top: 77vh; + left: 58vw; + color: #000; + transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); + font-size: 18px; + width: 100px; + height: 100px; + cursor: pointer + } + .man { + // 人 + top: 16vh; + left: 70vw; + width: 18vw; + } + .money-box { + // 钱箱 + top: 68vh; + left: 20vw; + width: 8vw; + } + .important { + // 重空箱 + top: 64vh; + left: 26vw; + width: 8vw; + } + .voucher-box { + // 普通箱 + top: 46vh; + left: 32vw; + width: 8vw; + } + .summons { + // 传票栏 + top: 46vh; + left: 38vw; + width: 8vw; + } + .computer { + top: 28vh; + left: 42vw; + width: 10vw; + } + .card-machine { + top: 52vh; + left: 50vw; + width: 6vw; + } + .idCard-scanner { + top: 60vh; + left: 54vw; + width: 6vw; + } + .seal-box { + top: 63vh; + left: 60vw; + width: 6vw; + } + .currency-detector { + top: 70vh; + left: 69vw; + width: 8vw; + } + .printer { + top: 80vh; + left: 76vw; + width: 8vw; + } + .cipher-machine { + top: 50vh; + left: 64vw; + width: 6vw; + } + } + @media screen and (min-width: 1551px) and (max-width: 1919px) { + .wrap{ + width: 1550px; + position: relative; + //width: 100%; + height: calc(100vh - 68px); + overflow: hidden; + background:url("../../../assets/img/integrated-counter-bg.png"); + } + .counter { + top: 30%; + left: 8%; + height: 63vh; + } + .glass { + // 玻璃窗 + top: 15vh; + left: 35vw; + width: 35vw; + } + + .employee { + // 柜员 + // top: 57%; + // left: 42%; + // width: 23%; + top: 430px; + left: 490px; + width: 283px; + position: relative; + } + .employeeText { + // 资料文字 + position: absolute; + top: 580px; + left: 710px; + color: #000; + transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); + font-size: 18px; + width: 100px; + text-align: center; + height: 100px; + line-height: 100px; + cursor: pointer + + } + .man { + // 人 + top: 191px; + left: 846px; + width: 199px; + } + .money-box { + // 钱箱 + top: 540px; + left: 190px; + width: 129px; + } + .important { + // 重空箱 + top: 48vh; + left: 18vw; + width: 118px; + } + .voucher-box { + // 普通箱 + top: 35vh; + left: 24vw; + width: 112px; + } + .summons { + // 传票栏 + top: 35vh; + left: 30vw; + width: 112px; + } + .computer { + top: 30vh; + left: 35vw; + width: 148px; + } + .card-machine { + top: 50vh; + left: 43vw; + width: 66px; + } + .idCard-scanner { + top: 53vh; + left: 46vw; + width: 46px; + } + .seal-box { + top: 55vh; + left: 49vw; + width: 50px; + } + .currency-detector { + top: 55vh; + left: 51vw; + width: 117px; + } + .printer { + top: 60vh; + left: 56vw; + width: 149px; + } + .cipher-machine { + top: 391px; + left: 711px; + width: 79px; + } + } // 配合公共样式---------------