diff --git a/project/dv/apps/components/PdGrid.vue b/project/dv/apps/components/PdGrid.vue
index 81db6061..5a471f9a 100644
--- a/project/dv/apps/components/PdGrid.vue
+++ b/project/dv/apps/components/PdGrid.vue
@@ -17,20 +17,23 @@
         <p>微网格</p>
       </div>
     </div>
-    <div class="grid-dialog" v-show="isShowGrid1">
-      <div class="mask"></div>
-      <div class="grid-container">
-        <h2>已选择的网格</h2>
-        <div class="grid-list">
-          <div
-            :class="[currIndex1 === index ? 'grid-active' : '']"
-            v-for="(item, index) in 20"
-            :key="index">
-            幸福郫都微网实格架构
+    <transition name="fade">
+      <div class="grid-dialog" v-show="isShowGrid1">
+        <div class="mask"></div>
+        <div class="grid-container">
+          <h2>已选择的网格</h2>
+          <div class="grid-list">
+            <div
+              :class="[currIndex1 === index ? 'grid-active' : '']"
+              v-for="(item, index) in 20"
+              :key="index"
+              @click.stop="currIndex1 = index">
+              幸福郫都微网实格架构
+            </div>
           </div>
         </div>
-       </div>
-    </div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -40,7 +43,8 @@
 
     data () {
       return {
-        isShowGrid1: false
+        isShowGrid1: false,
+        currIndex1: 0
       }
     }
   }
@@ -56,6 +60,13 @@
     background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/middle-bg.png) no-repeat center;
     background-size: contain;
 
+    .fade-enter-active, .fade-leave-active {
+      transition: opacity .3s ease-in-out;
+    }
+    .fade-enter, .fade-leave-to {
+      opacity: 0;
+    }
+
     * {
       box-sizing: border-box;
     }
@@ -186,12 +197,19 @@
             text-align: center;
             color: #FFFFFF;
             font-size: 27px;
+            transition: all ease 0.3s;
 
             &.grid-active {
               background: linear-gradient(270deg, rgba(0,48,124,0) 0%, #00307C 16%, rgba(0,99,255,0.9100) 50%, rgba(0,48,124,0.8200) 87%, rgba(0,48,124,0) 100%);
               box-shadow: inset 0px -1px 0px 0px rgba(16,34,54,1);
               text-shadow: 0px 3px 5px rgba(0,0,0,0.5000);
             }
+
+            &:hover {
+              background: linear-gradient(270deg, rgba(0,48,124,0) 0%, #00307C 16%, rgba(0,99,255,0.9100) 50%, rgba(0,48,124,0.8200) 87%, rgba(0,48,124,0) 100%);
+              box-shadow: inset 0px -1px 0px 0px rgba(16,34,54,1);
+              text-shadow: 0px 3px 5px rgba(0,0,0,0.5000);
+            }
           }
         }
       }