Browse Source

feat: 监考大屏缩放适配调整

chenhao 2 years ago
parent
commit
f4c1c97933

+ 11 - 4
src/features/invigilation/RealtimeMonitoring/RealtimeMonitoringFull.vue

@@ -153,8 +153,8 @@ export default {
       communicationList: [],
       /** 屏幕适配缩放 */
       viewStyle: {
-        "transform-origin": "center top",
-        transform: "scale(1)",
+        "transform-origin": "0 0",
+        transform: "scale(1) translate(-50%)",
       },
     };
   },
@@ -401,7 +401,7 @@ export default {
     observerResize() {
       const resizeHandle = debounce(() => {
         const scale = this.getScale();
-        this.viewStyle.transform = `scale(${scale})`;
+        this.viewStyle.transform = `scale(${scale}) translate(-50%)`;
       }, 60);
       resizeHandle();
       window.addEventListener("resize", resizeHandle);
@@ -448,6 +448,13 @@ export default {
     text-overflow: ellipsis;
   }
   .monitor-view {
+    width: 1920px;
+    height: 1080px;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform-origin: 0 0;
+    transform: translate(-50%);
     .monitor-view-header {
       height: 64px;
       background: #2e3238;
@@ -475,7 +482,7 @@ export default {
         .monitor-view-content-video-table {
           display: flex;
           flex-wrap: wrap;
-          margin-top: 20px;
+          margin-top: 15px;
           .invigilation-student-item {
             margin-right: 10px;
             &:nth-child(6n) {