From 1c41f96f04fd849740e494679837948973ab668c Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 10 Aug 2022 14:54:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=AB=E9=83=BD=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/dv/apps/components/PdGrid.vue | 44 +++++++++++++++++++--------
 1 file changed, 31 insertions(+), 13 deletions(-)

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);
+            }
           }
         }
       }