commit

src/views/situation/index.vue

@@ -36,56 +36,62 @@
             <el-radio-button label="red">红方</el-radio-button>
             <el-radio-button label="blue">蓝方</el-radio-button>
           </el-radio-group >
-          <div v-if="whosmodel == 'red'" class="model">
-            <div>
+          <div v-if="whosmodel == 'blue'" class="model">
+            <div :class="{active:this.modelType == 'ThadRocket'}" 
+                  @click="selectmodel('ThadRocket')">
               <el-image
                   style="width: 100px; height: 80px; margin: 0 auto;"
                   :src="url"
                   fit="fill">
               </el-image>
-              <h1 style="text-align: center;">Thad拦截导弹</h1>
+              <div style="text-align: center;">Thad拦截导弹</div>
             </div>
-            <div>
+            <div :class="{active:this.modelType == 'interceptRadar'}" 
+                  @click="selectmodel('interceptRadar')">
               <el-image
                   style="width: 100px; height: 80px; margin: 0 auto;"
                   :src="url"
                   fit="fill">
               </el-image>
-              <h1 style="text-align: center;">拦截雷达</h1>
+              <div style="text-align: center;">拦截雷达</div>
             </div>
-            <div>
+            <div :class="{active:this.modelType == 'interceptSatellite'}" 
+                  @click="selectmodel('interceptSatellite')">
               <el-image
                   style="width: 100px; height: 80px; margin: 0 auto;"
                   :src="url"
                   fit="fill">
               </el-image>
-              <h1 style="text-align: center;">拦截卫星</h1>
+              <div style="text-align: center;">拦截卫星</div>
             </div>
           </div>
           <div v-else class="model">
-            <div>
+            <div :class="{active:this.modelType == 'rocket'}" 
+                  @click="selectmodel('rocket')">
               <el-image
                   style="width: 100px; height: 80px; margin: 0 auto;"
                   :src="url"
                   fit="fill">
               </el-image>
-              <h1 style="text-align: center;">弹道导弹</h1>
+              <div style="text-align: center;">弹道导弹</div>
             </div>
-            <div>
+            <div :class="{active:this.modelType == 'radarTrap'}" 
+                  @click="selectmodel('radarTrap')">
               <el-image
                   style="width: 100px; height: 80px; margin: 0 auto;"
                   :src="url"
                   fit="fill">
               </el-image>
-              <h1 style="text-align: center;">雷达诱饵</h1>
+              <div style="text-align: center;">雷达诱饵</div>
             </div>
-            <div>
+            <div :class="{active:this.modelType == 'GRradar'}" 
+                  @click="selectmodel('GRradar')">
               <el-image
                   style="width: 100px; height: 80px; margin: 0 auto;"
                   :src="url"
                   fit="fill">
               </el-image>
-              <h1 style="text-align: center;">干扰雷达</h1>
+              <div style="text-align: center;">干扰雷达</div>
             </div>
           </div>
         </el-tab-pane>
@@ -130,6 +136,7 @@ export default ({
         isActive: false
       },
       whosmodel: "red",
+      modelType: null,
       url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
   
     }
@@ -400,6 +407,16 @@ export default ({
         this.currentLab.index = tab.index;
         tab_content[0].style.display = 'block';
       }
+    },
+
+    selectmodel(modelType){
+        if(this.modelType== modelType){
+          this.modelType == null
+        }else{
+          this.modelType = modelType
+        }
+        
+
     }
   
   }
@@ -490,6 +507,18 @@ export default ({
   padding: 5px;
 }
 
+.model > div:hover{
+  border: 2px solid blue;
+}
+
+.model > div:active{
+  border: 2px solid red;
+}
+
+.active{
+  border: 2px solid red !important;
+}
+
 .model .el-image {
     display: block !important;
 }