增加小卡片的选中效果

src/components/area/windturbine/WindturbineMinCard.vue

@@ -1,6 +1,6 @@
 /* 风机矩阵小卡片 */
 <template>
-    <div :class="cardStyle">
+    <div :class="cardStyle" @click="sigSelectClick">
         <el-row>
             <div :class="leftStyle">
                 <el-row>
@@ -31,12 +31,25 @@
         props: {
             status: String,
         },
+        data() {
+            return {
+                sigSelect: false
+            }
+        },
         computed: {
             cardStyle: function () {
-                return "card-style-" + this.status;
+                if (this.sigSelect) {
+                    return "card-style-select-" + this.status;
+                } else {
+                    return "card-style-" + this.status;
+                }
             },
             leftStyle: function () {
-                return "card-left-style-" + this.status;
+                if (this.sigSelect) {
+                    return "card-left-style-select-" + this.status;
+                } else {
+                    return "card-left-style-" + this.status;
+                }
             },
             rightStyle: function () {
                 return "card-right-style-" + this.status;
@@ -51,6 +64,17 @@
                 return "card-content-style-" + this.status;
             }
         },
+        methods: {
+            sigSelectClick() {
+                let sigSelect = this.sigSelect
+                if (sigSelect) {
+                    this.sigSelect = false
+                } else {
+                    this.sigSelect = true
+                }
+                // todo retun id,父组件中接收id
+            }
+        }
     };
 </script>
 <style scoped>
@@ -64,6 +88,16 @@
         display: inline-block;
     }
 
+    .card-style-select-1 {
+        position: relative;
+        width: 116px;
+        height: 50px;
+        border: 2px solid #4952a6;
+        background-color: rgba(200, 10, 10, 0.3);
+        box-sizing: border-box;
+        display: inline-block;
+    }
+
     .card-left-style-1 {
         position: relative;
         width: 25px;
@@ -74,6 +108,16 @@
         display: inline-block;
     }
 
+    .card-left-style-select-1 {
+        position: relative;
+        width: 25px;
+        height: 41px;
+        background-color: rgba(200, 40, 40, 0.5);
+        box-sizing: border-box;
+        margin: 3px;
+        display: inline-block;
+    }
+
     .card-right-style-1 {
         position: relative;
         width: calc(116px - 4px - 6px - 25px);