首页卡片可以放大

src/components/area/ProblemArea.vue

@@ -1,7 +1,15 @@
 /* 问题区 */
 <template>
-    <gy-card title="问题区" area-style="problem" circle-style="green" content-style="89">
+    <gy-card title="问题区" area-style="problem" circle-style="green" content-style="89" @parentRun="run">
         <div>动态内容</div>
     </gy-card>
 </template>
 
+<script>
+    export default {
+        methods: {
+            run() {
+            }
+        }
+    }
+</script>

src/components/area/gy-card.vue

@@ -1,9 +1,10 @@
 /* 自定义tabs */
 <template>
     <transition>
-        <div :class='areaClass'>
-            <div class="gy-card-header">
-                <div :class='circleColor'></div>
+        <div :class='areaClass' @mouseover="hover = true"
+             @mouseleave="hover = false">
+            <div :class="headerClass" @dblclick="gyCardDbClick">
+                <div :class='circleClass'></div>
                 <span class="gy-card-title">{{ title }}</span>
                 <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
                 <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
@@ -17,19 +18,22 @@
 
 <script>
     /**
-     * todo 鼠标的焦点事件
-     * todo 放大
      * todo 拖动
      * todo 控制区
      *
      * 动态值:
-     * 1. label-area中的 height,margin-top
+     * 1. gy-card-area-label中的 height,margin-top
      * 2. gy-card-circle-yellow中的颜色
      * 3. gy-card-content-25 中的高度
      *
+     * 使用事例:
+     * <gy-card title="校验区" area-style="check" circle-style="green" content-style="44">
+     * <div>动态内容</div>
+     * </gy-card>
      */
     export default {
         name: 'gy-card',
+        emits: ["parentRun"],
         props: {
             title: {
                 type: String,
@@ -52,34 +56,52 @@
                 required: true
             }
         },
+        data() {
+            return {
+                hover: false,
+                big: false
+            }
+        },
         computed: {
             areaClass() {
-                return `gy-card-area-${this.areaStyle}`;
+                if (this.big) {
+                    return `gy-card-area-big`;
+                } else {
+                    return `gy-card-area-${this.areaStyle}`;
+                }
             },
-            circleColor() {
+            circleClass() {
                 return `gy-card-circle-${this.circleStyle}`;
             },
             contentClass() {
-                return `gy-card-content-${this.contentStyle}`;
+                if (this.big) {
+                    return `gy-card-content-big`;
+                } else {
+                    return `gy-card-content-${this.contentStyle}`;
+                }
+            },
+            headerClass() {
+                if (this.hover) {
+                    return `gy-card-header-hover`;
+                } else {
+                    return `gy-card-header`;
+                }
+            }
+        },
+        methods: {
+            gyCardDbClick() {
+                let big = this.big
+                if (big) {
+                    this.big = false
+                } else {
+                    this.big = true
+                }
             }
         }
     }
 </script>
 
 <style scoped="scoped">
-    .gy-card-area-problem {
-        position: relative;
-        height: 89vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
     .gy-card-header {
         position: relative;
         height: 40px;
@@ -165,6 +187,19 @@
         right: 20px;
     }
 
+    .gy-card-area-problem {
+        position: relative;
+        height: 89vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
     .gy-card-area-alarm {
         position: relative;
         height: 25vh;
@@ -226,4 +261,113 @@
         padding-bottom: 10px;
         box-sizing: border-box;
     }
+
+    .gy-card-header-hover {
+        position: relative;
+        height: 40px;
+        background-color: #606060;
+        color: white;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-problem:hover {
+        position: relative;
+        height: 89vh;
+        background-color: #606060;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-alarm:hover {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #606060;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-check:hover {
+        position: relative;
+        height: 44vh;
+        background-color: #606060;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-control:hover {
+        position: relative;
+        width: 100%;
+        height: 44vh;
+        background-color: #606060;
+        border-radius: 7px;
+        margin-top: 10px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-label:hover {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #606060;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-recommended:hover {
+        position: relative;
+        height: 37vh;
+        background-color: #606060;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-big {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        width: 100vw;
+        height: 100vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+        z-index: 900;
+    }
+
+    .gy-card-content-big {
+        position: relative;
+        height: calc(100vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
 </style>