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

综合柜台自适应完善

Browse Source
20240205
yujialong 3 years ago
parent da8bebcf5e
commit 7b3ef14977
1 changed files with 128 additions and 874 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. 900
      src/pages/counter/list/index.vue

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

@ -2251,922 +2251,176 @@ export default {
} }
.wrap { .wrap {
.bg {
top: 0;
left: 0;
// width: 100%;
height: calc(100vh - 60px);
}
// 公共样式-------------------兼容1400*900
.wrap {
width: 100%;
position: relative; position: relative;
width: 100%;
height: calc(100vh - 68px); height: calc(100vh - 68px);
overflow: hidden; overflow: hidden;
background:url("../../../assets/img/integrated-counter-bg.png"); background:url("../../../assets/img/integrated-counter-bg.png");
}
.counter { .counter {
top: 30vh; top: 6%;
left: 15vw; left: 19%;
width: 80vw; width: 68%;
position: absolute;
} }
.glass { .glass {
cursor: pointer;
// 玻璃窗 // 玻璃窗
top: 16vh; top: -18%;
left: 50vw; left: 47%;
width: 38vw; width: 36.5%;
position: absolute; cursor: pointer;
} }
.employee { .employee {
// 柜员 // 柜员
// top: 57%; top: 29%;
// left: 42%; left: 43%;
// width: 23%; width: 18%;
cursor: pointer; cursor: pointer;
top: 50vh;
left: 40vw;
width: 23vw;
position: absolute;
} }
// 先放着 // 先放着
.employeeText { .employeeText {
// 资料文字 // 资料文字
position: absolute; position: absolute;
top: 64vh; top: 47%;
left: 58vw; left: 58%;
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;
width: 100px;
height: 100px;
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
} }
.man { .man {
// 人 // 人
top: 10vh; top: 0;
left: 70vw; left: 69%;
width: 23vw; width: 14%;
height: 50vh;
} }
.money-box { .money-box {
// 钱箱 // 钱箱
top: 57vh; top: 36%;
left: 18vw; left: 23%;
width: 8vw; width: 8%;
} }
.important { .important {
// 重空箱 // 重空箱
top: 52vh; top: 34%;
left: 26vw; left: 27%;
width: 8vw; width: 8%;
} }
.voucher-box { .voucher-box {
// 普通箱 // 普通箱
top: 38vh; top: 16%;
left: 34vw; left: 32%;
width: 8vw; width: 8%;
} }
.summons { .summons {
// 传票栏 // 传票栏
top: 40vh; top: 20%;
left: 40vw; left: 37%;
width: 8vw; width: 8%;
} }
.computer { .computer {
top: 40vh; top: 9%;
left: 44vw; left: 43%;
width: 10vw; width: 12%;
} }
.card-machine { .card-machine {
top: 47vh; top: 33%;
left: 52vw; left: 55%;
width: 6vw; width: 4%;
} }
.idCard-scanner { .idCard-scanner {
top: 52vh; top: 38.5%;
left: 54vw; left: 57.5%;
width: 6vw; width: 3.5%;
} }
.seal-box { .seal-box {
top: 56vh; top: 39.5%;
left: 62vw; left: 61%;
width: 6vw; width: 4%;
z-index: 60; z-index: 60;
} }
.currency-detector { .currency-detector {
top: 62vh; top: 42%;
left: 66vw; left: 65%;
width: 8vw; width: 7%;
} }
.printer { .printer {
top: 70vh; top: 50%;
left: 72vw; left: 70%;
width: 8vw; width: 8%;
} }
.cipher-machine { .cipher-machine {
top: 50vh; top: 26%;
left: 68vw; left: 62%;
width: 6vw; width: 4.5%;
} }
@media screen and (max-width: 1850px) {
// 公共样式-------------------
@media screen and (min-width: 1920px) {
.wrap {
width: 100%;
position: relative;
height: calc(100vh - 68px);
overflow: hidden;
background:url("../../../assets/img/integrated-counter-bg.png");
}
.counter {
top: 116px;
left: 357px;
width: 1300px;
}
.glass {
top: -100px;
left: 900px;
width: 700px;
}
.employee {
top: 325px;
left: 820px;
width: 340px;
}
.employeeText { .employeeText {
position: absolute; top: 48%;
top: 435px;
left: 1070px;
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;
} }
@media screen and (max-width: 1680px) {
.money-box { .money-box {
top: 380px; top: 33%;
left: 430px;
width: 150px;
} }
.important { .important {
top: 360px; top: 31%;
left: 510px;
width: 145px;
}
.voucher-box {
top: 222px;
left: 615px;
width: 140px;
}
.summons {
top: 250px;
left: 700px;
width: 139px;
}
.computer {
top: 140px;
left: 790px;
width: 230px;
} }
.card-machine { .card-machine {
top: 355px; top: 31%;
left: 1050px;
width: 80px;
} }
.idCard-scanner { .idCard-scanner {
top: 405px; top: 35.5%;
left: 1110px; left: 58%;
width: 65px;
} }
.seal-box { .seal-box {
top: 420px; top: 38%;
left: 1170px; left: 62%;
width: 70px;
}
.currency-detector {
top: 420px;
left: 1235px;
width: 140px;
}
.printer {
top: 470px;
left: 1330px;
width: 180px;
} }
.cipher-machine { .cipher-machine {
top: 284px; top: 22%;
left: 1172px;
width: 90px;
}
.el-tooltip__popper.sth-popper {
z-index: 100!important;
padding: 0;
// background-color: transparent;
background-color: #fff;
img {
height: 78px;
}
.popper__arrow {
display: none;
}
}
}
@media screen and (min-width: 1400px) and (max-width: 1500px) and (min-height: 850px) and (max-height: 950px) {
.wrap {
width: 100%;
position: relative;
height: calc(100vh - 68px);
overflow: hidden;
background:url("../../../assets/img/integrated-counter-bg.png");
}
.counter {
top: 25vh;
left: 15vw;
width: 78vw;
position: absolute;
}
.glass {
// 玻璃窗
top: 7vh;
left: 47vw;
width: 41vw;
position: absolute;
} }
.employee {
top: 44vh;
left: 42vw;
width: 21vw;
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: 19vw;
height: 50vh;
} }
@media screen and (max-width: 1440px) and (min-height: 917px) {
.money-box { .money-box {
// 钱箱 top: 29%;
top: 51vh;
left: 20vw;
width: 8vw;
} }
.important { .important {
// 重空箱 top: 27%;
top: 50vh;
left: 25vw;
width: 8vw;
} }
.voucher-box { .voucher-box {
// 普通箱 top: 14%;
top: 36vh;
left: 31vw;
width: 8vw;
} }
.summons { .summons {
// 传票栏 top: 16%;
top: 39vh;
left: 36vw;
width: 8vw;
}
.computer {
top: 26vh;
left: 44vw;
width: 10vw;
} }
.card-machine { .card-machine {
top: 45vh; top: 27%;
left: 54vw;
width: 5vw;
} }
.idCard-scanner { .idCard-scanner {
top: 50vh; top: 31%;
left: 57vw; left: 58%;
width: 4vw;
}
.seal-box {
top: 52vh;
left: 61vw;
width: 5vw;
} }
.currency-detector {
top: 55vh;
left: 68vw;
width: 8vw;
}
.printer {
top: 62vh;
left: 75vw;
width: 8vw;
}
.cipher-machine {
top: 42vh;
left: 63vw;
width: 6vw;
}
}
@media screen and (min-width: 1400px) and (max-width: 1500px) and (min-height: 950px) and (max-height: 1100px) {
.wrap {
width: 100%;
position: relative;
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: 20vh;
left: 50vw;
width: 38vw;
position: absolute;
}
.employee {
// 柜员
// top: 57%;
// left: 42%;
// width: 23%;
top: 48vh;
left: 40vw;
width: 23vw;
position: absolute;
}
// 先放着
.employeeText { .employeeText {
// 资料文字 top: 36.5%;
position: absolute; left: 55%;
top: 59vh;
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: 54vh;
left: 20vw;
width: 8vw;
}
.important {
// 重空箱
top: 52vh;
left: 26vw;
width: 8vw;
}
.voucher-box {
// 普通箱
top: 38vh;
left: 34vw;
width: 8vw;
}
.summons {
// 传票栏
top: 40vh;
left: 40vw;
width: 8vw;
}
// .computer {
// top: 30vh;
// left: 44vw;
// width: 10vw;
// }
.card-machine {
top: 45vh;
left: 52vw;
width: 6vw;
}
.idCard-scanner {
top: 50vh;
left: 56vw;
width: 6vw;
} }
.seal-box { .seal-box {
top: 54vh; top: 33%;
left: 64vw;
width: 6vw;
}
.currency-detector {
top: 58vh;
left: 68vw;
width: 8vw;
}
.printer {
top: 66vh;
left: 74vw;
width: 8vw;
} }
.cipher-machine { .cipher-machine {
top: 46vh; top: 19%;
left: 68vw; left: 60%;
width: 6vw;
}
}
@media screen and (min-width: 1298px) and (max-width: 1390px){
.wrap {
width: 100%;
position: relative;
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: 14vh;
left: 48vw;
width: 42vw;
position: absolute;
}
.employee {
// 柜员
// top: 57%;
// left: 42%;
// width: 23%;
top: 47vh;
left: 42vw;
width: 22vw;
position: absolute;
}
// 先放着
.employeeText {
// 资料文字
position: absolute;
top: 60vh;
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: 14vh;
left: 70vw;
width: 20vw;
height: 48vh;
}
.money-box {
// 钱箱
top: 54vh;
left: 20vw;
width: 8vw;
}
.important {
// 重空箱
top: 52vh;
left: 26vw;
width: 8vw;
}
.voucher-box {
// 普通箱
top: 40vh;
left: 32vw;
width: 8vw;
}
.summons {
// 传票栏
top: 42vh;
left: 38vw;
width: 8vw;
}
// .computer {
// top: 30vh;
// left: 44vw;
// width: 10vw;
// }
.card-machine {
top: 48vh;
left: 55vw;
width: 5vw;
}
.idCard-scanner {
top: 52vh;
left: 58vw;
width: 4vw;
}
.seal-box {
top: 55vh;
left: 63vw;
width: 5vw;
}
.card-machine {
top: 48vh;
left: 54vw;
width: 6vw;
}
.idCard-scanner {
top: 53vh;
left: 58vw;
width: 6vw;
}
.currency-detector {
top: 55vh;
left: 67vw;
width: 8vw;
}
.printer {
top: 59vh;
left: 73vw;
width: 10vw;
}
.cipher-machine {
top: 46vh;
left: 63vw;
width: 6vw;
}
}
@media screen and (min-width: 1250px) and (max-width: 1297px){
.wrap {
width: 100%;
position: relative;
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: 14vh;
left: 49vw;
width: 42vw;
position: absolute;
}
.employee {
// 柜员
// top: 57%;
// left: 42%;
// width: 23%;
top: 46vh;
left: 40vw;
width: 23vw;
position: absolute;
}
// 先放着
.employeeText {
// 资料文字
position: absolute;
top: 59vh;
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: 52vh;
left: 20vw;
width: 8vw;
}
.important {
// 重空箱
top: 50vh;
left: 26vw;
width: 8vw;
}
.voucher-box {
// 普通箱
top: 40vh;
left: 32vw;
width: 8vw;
}
.summons {
// 传票栏
top: 40vh;
left: 38vw;
width: 8vw;
}
.computer {
top: 30vh;
left: 44vw;
width: 10vw;
}
.card-machine {
top: 47vh;
left: 54vw;
width: 6vw;
}
.idCard-scanner {
top: 51vh;
left: 58vw;
width: 6vw;
}
.card-machine {
top: 48vh;
left: 54vw;
width: 6vw;
}
.idCard-scanner {
top: 53vh;
left: 58vw;
width: 6vw;
}
.seal-box {
top: 54vh;
left: 64vw;
width: 6vw;
} }
.currency-detector { .currency-detector {
top: 56vh; top: 34%;
left: 68vw;
width: 8vw;
} }
.printer { .printer {
top: 62vh; top: 41%;
left: 74vw;
width: 8vw;
}
.cipher-machine {
top: 44vh;
left: 64vw;
width: 6vw;
}
}
@media screen and (min-width: 1500px) and (max-width: 1550px) {
.wrap {
width: 100%;
position: relative;
height: calc(100vh - 68px);
overflow: hidden;
background:url("../../../assets/img/integrated-counter-bg.png");
}
.counter {
top: 23vh;
left: 15vw;
width: 68vw;
position: absolute;
} }
.glass { .glass {
// 玻璃窗 top: -13%;
top: 5vh;
left: 45vw;
width: 35vw;
position: absolute;
}
.employee {
// 柜员
top: 43vh;
left: 39vw;
width: 18vw;
position: absolute;
}
// 先放着
.employeeText {
// 资料文字
position: absolute;
top: 57vh;
left: 52vw;
color: #000;
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
font-size: 18px;
width: 100px;
height: 100px;
cursor: pointer;
}
.man {
// 人
top: 14vh;
left: 66vw;
width: 16vw;
}
.money-box {
// 钱箱
top: 48vh;
left: 19vw;
width: 8vw;
}
.important {
// 重空箱
top: 46vh;
left: 24vw;
width: 8vw;
}
.voucher-box {
// 普通箱
top: 32vh;
left: 29vw;
width: 8vw;
}
.summons {
// 传票栏
top: 36vh;
left: 34vw;
width: 7vw;
}
.computer {
top: 29vh;
left: 40vw;
width: 10vw;
}
.card-machine {
top: 45vh;
left: 50vw;
width: 5vw;
}
.idCard-scanner {
top: 50vh;
left: 53vw;
width: 4vw;
}
.seal-box {
top: 52vh;
left: 56vw;
width: 4vw;
}
.currency-detector {
top: 51vh;
left: 60vw;
width: 8vw;
}
.printer {
top: 58vh;
left: 66vw;
width: 8vw;
}
.cipher-machine {
top: 39vh;
left: 57vw;
width: 5vw;
}
}
@media screen and (min-width: 1551px) and (max-width: 1919px) {
.wrap{
width: 1550px;
position: relative;
height: calc(100vh - 68px);
overflow: hidden;
background:url("../../../assets/img/integrated-counter-bg.png");
}
.counter {
width: 65vw;
top: 30%;
left: 18%;
height: 67vh;
}
.glass {
// 玻璃窗
top: 13vh;
left: 46vw;
width: 33vw;
}
.employee {
// 柜员
top: 46vh;
left: 39vw;
width: 283px;
position: absolute;
}
.employeeText {
// 资料文字
position: absolute;
top: 56vh;
left: 53vw;
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;
z-index: 200;
}
.man {
// 人
top: 191px;
left: 1090px;
width: 199px;
}
.money-box {
// 钱箱
top: 480px;
left: 353px;
width: 129px;
}
.important {
// 重空箱
top: 51vh;
left: 26vw;
width: 118px;
}
.voucher-box {
// 普通箱
top: 40vh;
left: 31vw;
width: 112px;
}
.summons {
// 传票栏
top: 42vh;
left: 35vw;
width: 112px;
}
.computer {
top: 34vh;
left: 40vw;
width: 148px;
}
.card-machine {
top: 48vh;
left: 50vw;
width: 60px;
}
.idCard-scanner {
top: 52vh;
left: 53vw;
width: 46px;
}
.seal-box {
top: 55vh;
left: 57vw;
width: 50px;
z-index: 300;
}
.currency-detector {
top: 56vh;
left: 62vw;
width: 117px;
}
.printer {
top: 60vh;
left: 67vw;
width: 149px;
}
.cipher-machine {
top: 394px;
left: 932px;
width: 79px;
} }
} }

Write Preview
Loading…
Cancel
Save