From 7b3ef1497745777c99720b6ad034638a50609b88 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Mon, 11 Apr 2022 17:03:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E5=90=88=E6=9F=9C=E5=8F=B0=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/counter/list/index.vue | 1002 ++++--------------------------
 1 file changed, 128 insertions(+), 874 deletions(-)

diff --git a/src/pages/counter/list/index.vue b/src/pages/counter/list/index.vue
index 0a247f1..f794502 100644
--- a/src/pages/counter/list/index.vue
+++ b/src/pages/counter/list/index.vue
@@ -2251,922 +2251,176 @@ export default {
 }
 
 .wrap {
-    .bg {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 68px);
+    overflow: hidden;
+    background:url("../../../assets/img/integrated-counter-bg.png");
+
+    .counter {
+        top: 6%;
+        left: 19%;
+        width: 68%;
+    }
+    .glass {
+        // 玻璃窗
+        top: -18%;
+        left: 47%;
+        width: 36.5%;
+        cursor: pointer;
+    }
+    .employee {
+        // 柜员
+        top: 29%;
+        left: 43%;
+        width: 18%;
+        cursor: pointer;
+    }
+    // 先放着
+    .employeeText {
+        // 资料文字
+        position: absolute;
+        top: 47%;
+        left: 58%;
+        color: #000;
+        transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
+        font-size: 18px;
+        cursor: pointer;
+        z-index: 100;
+    }
+    .man {
+        // 人
         top: 0;
-        left: 0;
-        // width: 100%;
-        height: calc(100vh - 60px);
+        left: 69%;
+        width: 14%;
     }
-
-    
-
-    // 公共样式-------------------兼容1400*900
-
-    .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 {
-            cursor: pointer;
-            // 玻璃窗
-            top: 16vh;
-            left: 50vw;
-            width: 38vw;
-            position: absolute;
-        }
-        .employee {
-            // 柜员
-            // top: 57%;
-            // left: 42%;
-            // width: 23%;
-            cursor: pointer;
-            top: 50vh;
-            left: 40vw;
-            width: 23vw;
-            position: absolute;
-        }
-        // 先放着
-        .employeeText {
-            // 资料文字
-            position: absolute;
-            top: 64vh;
-            left: 58vw;
-            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;
-        }
-        .money-box {
-            // 钱箱
-            top: 57vh;
-            left: 18vw;
-            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: 40vh;
-            left: 44vw;
-            width: 10vw;
-        }
-        .card-machine {
-            top: 47vh;
-            left: 52vw;
-            width: 6vw;
-        }
-        .idCard-scanner {
-            top: 52vh;
-            left: 54vw;
-            width: 6vw;
-        }
-        .seal-box {
-            top: 56vh;
-            left: 62vw;
-            width: 6vw;
-            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;
-        }
-        .printer {
-            top: 470px;
-            left: 1330px;
-            width: 180px;
-        }
-        .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;
-            }
-        }
+    .money-box {
+        // 钱箱
+        top: 36%;
+        left: 23%;
+        width: 8%;
     }
-    @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;
-        }
-        
-        .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;
-        }
+    .important {
+        // 重空箱
+        top: 34%;
+        left: 27%;
+        width: 8%;
     }
-    @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 {
-            // 资料文字
-            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: 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 {
-            top: 54vh;
-            left: 64vw;
-            width: 6vw;
-        }
-        .currency-detector {
-            top: 58vh;
-            left: 68vw;
-            width: 8vw;
-        }
-        .printer {
-            top: 66vh;
-            left: 74vw;
-            width: 8vw;
-        }
-        .cipher-machine {
-            top: 46vh;
-            left: 68vw;
-            width: 6vw;
-        }
+    .voucher-box {
+        // 普通箱
+        top: 16%;
+        left: 32%;
+        width: 8%;
     }
-    @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;
-        }
-        // 先放着
+    .summons {
+        // 传票栏
+        top: 20%;
+        left: 37%;
+        width: 8%;
+    }
+    .computer {
+        top: 9%;
+        left: 43%;
+        width: 12%;
+    }
+    .card-machine {
+        top: 33%;
+        left: 55%;
+        width: 4%;
+    }
+    .idCard-scanner {
+        top: 38.5%;
+        left: 57.5%;
+        width: 3.5%;
+    }
+    .seal-box {
+        top: 39.5%;
+        left: 61%;
+        width: 4%;
+        z-index: 60;
+    }
+    .currency-detector {
+        top: 42%;
+        left: 65%;
+        width: 7%;
+    }
+    .printer {
+        top: 50%;
+        left: 70%;
+        width: 8%;
+    }
+    .cipher-machine {
+        top: 26%;
+        left: 62%;
+        width: 4.5%;
+    }
+
+    @media screen and (max-width: 1850px) {
         .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;
+            top: 48%;
         }
+    }
+    @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: 40vh;
-            left: 32vw;
-            width: 8vw;
-        }
-        .summons {
-            // 传票栏
-            top: 42vh;
-            left: 38vw;
-            width: 8vw;
+          top: 31%;
         }
-        // .computer {
-        //     top: 30vh;
-        //     left: 44vw;
-        //     width: 10vw;
-        // }
         .card-machine {
-            top: 48vh;
-            left: 55vw;
-            width: 5vw;
+            top: 31%;
         }
         .idCard-scanner {
-            top: 52vh;
-            left: 58vw;
-            width: 4vw;
+          top: 35.5%;
+          left: 58%;
         }
         .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;
+          top: 38%;
+          left: 62%;
         }
         .cipher-machine {
-            top: 46vh;
-            left: 63vw;
-            width: 6vw;
+          top: 22%;
         }
     }
-    @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;
-        }
+    @media screen and (max-width: 1440px) and (min-height: 917px) {
         .money-box {
-            // 钱箱
-            top: 52vh;
-            left: 20vw;
-            width: 8vw;
+          top: 29%;
         }
         .important {
-            // 重空箱
-            top: 50vh;
-            left: 26vw;
-            width: 8vw;
+          top: 27%;
         }
         .voucher-box {
-            // 普通箱
-            top: 40vh;
-            left: 32vw;
-            width: 8vw;
+          top: 14%;
         }
         .summons {
-            // 传票栏
-            top: 40vh;
-            left: 38vw;
-            width: 8vw;
-        }
-        .computer {
-            top: 30vh;
-            left: 44vw;
-            width: 10vw;
+          top: 16%;
         }
         .card-machine {
-            top: 47vh;
-            left: 54vw;
-            width: 6vw;
+            top: 27%;
         }
         .idCard-scanner {
-            top: 51vh;
-            left: 58vw;
-            width: 6vw;
-        }
-        .card-machine {
-            top: 48vh;
-            left: 54vw;
-            width: 6vw;
+          top: 31%;
+          left: 58%;
         }
-        .idCard-scanner {
-            top: 53vh;
-            left: 58vw;
-            width: 6vw;
-        }
-        .seal-box {
-            top: 54vh;
-            left: 64vw;
-            width: 6vw;
-        }
-        .currency-detector {
-            top: 56vh;
-            left: 68vw;
-            width: 8vw;
-        }
-        .printer {
-            top: 62vh;
-            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 {
-            // 玻璃窗
-            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;
+            top: 36.5%;
+            left: 55%;
         }
         .seal-box {
-            top: 52vh;
-            left: 56vw;
-            width: 4vw;
-        }
-        .currency-detector {
-            top: 51vh;
-            left: 60vw;
-            width: 8vw;
-        }
-        .printer {
-            top: 58vh;
-            left: 66vw;
-            width: 8vw;
+          top: 33%;
         }
         .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;
+          top: 19%;
+          left: 60%;
         }
         .currency-detector {
-            top: 56vh;
-            left: 62vw;
-            width: 117px;
+          top: 34%;
         }
         .printer {
-            top: 60vh;
-            left: 67vw;
-            width: 149px;
+          top: 41%;
         }
-        .cipher-machine {
-            top: 394px;
-            left: 932px;
-            width: 79px;
+        .glass {
+          top: -13%;
         }
     }