cxw-010203

src/App.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 08:41:57
- * @LastEditTime: 2021-10-26 13:03:31
+ * @LastEditTime: 2021-11-02 11:33:36
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/App.vue
@@ -49,6 +49,7 @@ html,
 body {
     width: 100%;
     height: 100%;
+    min-height: 760px;
     font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
     font-size: 62.5%;
     background: #010b19;

src/mixins/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:56:13
- * @LastEditTime: 2021-10-29 11:16:19
+ * @LastEditTime: 2021-11-02 11:19:16
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/mixins/index.js
@@ -31,6 +31,33 @@ export default {
                         // console.log(el, "解绑");
                         clearInterval(el.__vueSetInterval__);
                     }
+                },
+                highly: {
+                    bind(el) { // el为绑定的元素，binding为绑定给指令的对象
+                        // console.log(el, "绑定", binding);
+                        function adaptive() {
+                            const style = document.defaultView.getComputedStyle(el); // 获取元素
+                            const wh = document.body.clientHeight;
+                            const height = style.height;
+                            let z = 1;
+                            let gh = 1080;
+                            if(wh >= gh) {
+                                z = 1;
+                            } else if(wh >= 760 && wh < gh) {
+                                z = wh / gh
+                            } else {
+                                z = 760 / gh
+                            }
+                            el.style.height = z * parseFloat(height) + 'px'; 
+                             
+                        }
+                        adaptive();
+                        // el.__vueSetInterval__ = setInterval(adaptive, 300);
+                    },
+                    unbind(el) {
+                        // console.log(el, "解绑");
+                        clearInterval(el.__vueSetInterval__);
+                    }
                 }
             },
             computed: {

src/styles/index.less

@@ -9,7 +9,7 @@
     position: relative;
     width: 1920px;
     margin: 0 auto;
-    height: auto;
+    min-height: 100%;
     background: #010B19;
     border-top: 1px solid transparent;
     margin-top: -1px;

src/views/Index/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 09:17:42
- * @LastEditTime: 2021-11-01 11:22:01
+ * @LastEditTime: 2021-11-02 11:31:33
  * @LastEditors: Please set LastEditors
  * @Description: 行业洞察
  * @FilePath: /data-show/src/views/Index/index.vue
@@ -170,34 +170,27 @@ export default {
 <style lang="less" scoped>
 .In-body {
     padding: 0px 16px 16px 16px;
+    height: 100%;
     display: flex;
     justify-content: flex-start;
-    height: calc(100vh - 80px);
     .d1 {
-        display: flex;
-        flex-direction: column;
         height: 100%;
     }
     .d3 { 
-       display: flex;
-       flex-direction: column;  
        height: 100%;
     }
     .d2 {
         width: 936px;
         margin-left: 16px;
-        display: flex;
-        flex-direction: column; 
         height: 100%;
         .d2-top {
             width: 100%;
-            height:  59.4%;
+            height:  644px;
             overflow: hidden;
         }
         .d2-bottom {
             display: flex;
             justify-content: flex-start;
-            height: 316px;
         }
     }
 }

src/views/Index/realTimeEvent/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 15:56:35
- * @LastEditTime: 2021-11-01 09:17:36
+ * @LastEditTime: 2021-11-02 10:03:05
  * @LastEditors: Please set LastEditors
  * @Description: 实时事件
  * @FilePath: /data-show/src/views/Index/realTimeEvent/index.vue