Kaynağa Gözat

样式优化

songxy 2 ay önce
ebeveyn
işleme
8312f6d953
1 değiştirilmiş dosya ile 13 ekleme ve 5 silme
  1. 13 5
      web_ui/src/views/industrial-land/ZnxzDetail.vue

+ 13 - 5
web_ui/src/views/industrial-land/ZnxzDetail.vue

@@ -140,10 +140,10 @@
               <div class="line9"></div>
               <template v-if="qytsTabs[qytsIndex].result.length > 0">
                 <div
-                  class="zbyq-item"
                   v-for="(item, index) in qytsTabs[qytsIndex].result"
-                  @click="zbyqClick(item)"
+                  @click="zbyqClick(item, index)"
                   :key="index"
+                  :class="{ 'zbyq-item': true, 'active': qytsActive2 === index}"
                 >
                   <div class="icon zbyqdiv"></div>
                   <div class="value-panel">
@@ -764,6 +764,7 @@ export default {
         { name: "周边园区", icon: "icon-zdxm", result: [] },
       ],
       qytsActive: -1,
+      qytsActive2: -1,
       qytsIndex: 0,
       jbxxIndex: 0,
       zbhjList: [],
@@ -1078,9 +1079,10 @@ export default {
       this.$emit("locationByGeojson", geojson, item.name);
       this.qytsActive = index;
     },
-    zbyqClick(item) {
+    zbyqClick(item, index) {
       let geojson = JSON.parse(item.geom);
       this.$emit("locationByGeojson", geojson,item.name);
+      this.qytsActive2 = index
     },
     //地类图斑定位
     goInfoLocation(wkt) {
@@ -2436,7 +2438,6 @@ export default {
           }
         }
         .zbyq-item {
-          height: 140px;
           background: #ffffff;
           border-radius: 8px;
           margin-bottom: 40px;
@@ -2444,6 +2445,12 @@ export default {
           display: flex;
           align-items: center;
           justify-content: space-between;
+          padding: 10px;
+          border: 1px solid transparent;
+          &.active {
+            background: rgba(22, 132, 252, 0.1);
+            border-color: rgba(22, 132, 252, .9);
+          }
           .icon {
             width: 96px;
             height: 140px;
@@ -2491,7 +2498,8 @@ export default {
               color: #999999;
             }
             .btn-type {
-              width: 73px;
+              display: inline-block;
+              padding: 0px 10px;
               height: 26px;
               background: #ff6f6f;
               border-radius: 5px;