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
Split 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 {
.bg {
top: 0;
left: 0;
// width: 100%;
height: calc(100vh - 60px);
}
// 公共样式-------------------兼容1400*900
.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;
top: 6%;
left: 19%;
width: 68%;
}
.glass {
cursor: pointer;
// 玻璃窗
top: 16vh;
left: 50vw;
width: 38vw;
position: absolute;
top: -18%;
left: 47%;
width: 36.5%;
cursor: pointer;
}
.employee {
// 柜员
// top: 57%;
// left: 42%;
// width: 23%;
top: 29%;
left: 43%;
width: 18%;
cursor: pointer;
top: 50vh;
left: 40vw;
width: 23vw;
position: absolute;
}
// 先放着
.employeeText {
// 资料文字
position: absolute;
top: 64vh;
left: 58vw;
top: 47%;
left: 58%;
color: #000;
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
font-size: 18px;
width: 100px;
height: 100px;
cursor: pointer;
z-index: 100;
}
.man {
// 人
top: 10vh;
left: 70vw;
width: 23vw;
height: 50vh;
top: 0;
left: 69%;
width: 14%;
}
.money-box {
// 钱箱
top: 57vh;
left: 18vw;
width: 8vw;
top: 36%;
left: 23%;
width: 8%;
}
.important {
// 重空箱
top: 52vh;
left: 26vw;
width: 8vw;
top: 34%;
left: 27%;
width: 8%;
}
.voucher-box {
// 普通箱
top: 38vh;
left: 34vw;
width: 8vw;
top: 16%;
left: 32%;
width: 8%;
}
.summons {
// 传票栏
top: 40vh;
left: 40vw;
width: 8vw;
top: 20%;
left: 37%;
width: 8%;
}
.computer {
top: 40vh;
left: 44vw;
width: 10vw;
top: 9%;
left: 43%;
width: 12%;
}
.card-machine {
top: 47vh;
left: 52vw;
width: 6vw;
top: 33%;
left: 55%;
width: 4%;
}
.idCard-scanner {
top: 52vh;
left: 54vw;
width: 6vw;
top: 38.5%;
left: 57.5%;
width: 3.5%;
}
.seal-box {
top: 56vh;
left: 62vw;
width: 6vw;
top: 39.5%;
left: 61%;
width: 4%;
z-index: 60;
}
.currency-detector {
top: 62vh;
left: 66vw;
width: 8vw;
}
.printer {
top: 70vh;
left: 72vw;
width: 8vw;
}
.cipher-machine {
top: 50vh;
left: 68vw;
width: 6vw;
}
// 公共样式-------------------
@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 {
position: absolute;
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;
}
.money-box {
top: 380px;
left: 430px;
width: 150px;
}
.important {
top: 360px;
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 {
top: 355px;
left: 1050px;
width: 80px;
}
.idCard-scanner {
top: 405px;
left: 1110px;
width: 65px;
}
.seal-box {
top: 420px;
left: 1170px;
width: 70px;
}
.currency-detector {
top: 420px;
left: 1235px;
width: 140px;
top: 42%;
left: 65%;
width: 7%;
}
.printer {
top: 470px;
left: 1330px;
width: 180px;
top: 50%;
left: 70%;
width: 8%;
}
.cipher-machine {
top: 284px;
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;
}
.money-box {
// 钱箱
top: 51vh;
left: 20vw;
width: 8vw;
}
.important {
// 重空箱
top: 50vh;
left: 25vw;
width: 8vw;
}
.voucher-box {
// 普通箱
top: 36vh;
left: 31vw;
width: 8vw;
}
.summons {
// 传票栏
top: 39vh;
left: 36vw;
width: 8vw;
}
.computer {
top: 26vh;
left: 44vw;
width: 10vw;
}
.card-machine {
top: 45vh;
left: 54vw;
width: 5vw;
}
.idCard-scanner {
top: 50vh;
left: 57vw;
width: 4vw;
top: 26%;
left: 62%;
width: 4.5%;
}
.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;
}
// 先放着
@media screen and (max-width: 1850px) {
.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;
top: 48%;
}
.man {
// 人
top: 10vh;
left: 70vw;
width: 23vw;
height: 50vh;
}
@media screen and (max-width: 1680px) {
.money-box {
// 钱箱
top: 54vh;
left: 20vw;
width: 8vw;
top: 33%;
}
.important {
// 重空箱
top: 52vh;
left: 26vw;
width: 8vw;
}
.voucher-box {
// 普通箱
top: 38vh;
left: 34vw;
width: 8vw;
top: 31%;
}
.summons {
// 传票栏
top: 40vh;
left: 40vw;
width: 8vw;
}
// .computer {
// top: 30vh;
// left: 44vw;
// width: 10vw;
// }
.card-machine {
top: 45vh;
left: 52vw;
width: 6vw;
top: 31%;
}
.idCard-scanner {
top: 50vh;
left: 56vw;
width: 6vw;
top: 35.5%;
left: 58%;
}
.seal-box {
top: 54vh;
left: 64vw;
width: 6vw;
}
.currency-detector {
top: 58vh;
left: 68vw;
width: 8vw;
}
.printer {
top: 66vh;
left: 74vw;
width: 8vw;
top: 38%;
left: 62%;
}
.cipher-machine {
top: 46vh;
left: 68vw;
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;
top: 22%;
}
.man {
// 人
top: 14vh;
left: 70vw;
width: 20vw;
height: 48vh;
}
@media screen and (max-width: 1440px) and (min-height: 917px) {
.money-box {
// 钱箱
top: 54vh;
left: 20vw;
width: 8vw;
top: 29%;
}
.important {
// 重空箱
top: 52vh;
left: 26vw;
width: 8vw;
top: 27%;
}
.voucher-box {
// 普通箱
top: 40vh;
left: 32vw;
width: 8vw;
top: 14%;
}
.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;
top: 16%;
}
.card-machine {
top: 48vh;
left: 54vw;
width: 6vw;
top: 27%;
}
.idCard-scanner {
top: 53vh;
left: 58vw;
width: 6vw;
}
.currency-detector {
top: 55vh;
left: 67vw;
width: 8vw;
}
.printer {
top: 59vh;
left: 73vw;
width: 10vw;
top: 31%;
left: 58%;
}
.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;
top: 36.5%;
left: 55%;
}
.seal-box {
top: 54vh;
left: 64vw;
width: 6vw;
}
.currency-detector {
top: 56vh;
left: 68vw;
width: 8vw;
}
.printer {
top: 62vh;
left: 74vw;
width: 8vw;
top: 33%;
}
.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 {
// 玻璃窗
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;
top: 19%;
left: 60%;
}
.currency-detector {
top: 51vh;
left: 60vw;
width: 8vw;
top: 34%;
}
.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;
top: 41%;
}
.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;
top: -13%;
}
}

Write Preview
Loading…
Cancel
Save