郫都大屏

project/dv/apps/components/PdGrid.vue

@@ -1,39 +1,53 @@
 <template>
-  <div class="pdgird">
-    <div class="pdgird-title">
+  <div class="pdgrid" @click="isShowGrid1 = false">
+    <div class="pdgrid-title">
       <h2>幸福郫都微网实格架构</h2>
     </div>
-    <div class="pdgird-body">
-      <div class="pdgird-body__item">
+    <div class="pdgrid-body">
+      <div class="pdgrid-body__item">
         <h2>240</h2>
         <p>多层网格</p>
       </div>
-      <div class="pdgird-body__item">
+      <div class="pdgrid-body__item" @click.stop="isShowGrid1 = true">
         <h2>240</h2>
         <p>第一网格</p>
       </div>
-      <div class="pdgird-body__item">
+      <div class="pdgrid-body__item">
         <h2>240</h2>
         <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">
+            幸福郫都微网实格架构
+          </div>
+        </div>
+       </div>
+    </div>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'pdgird',
+    name: 'pdgrid',
 
     data () {
       return {
-
+        isShowGrid1: false
       }
     }
   }
 </script>
 
 <style lang="scss">
-  .pdgird {
+  .pdgrid {
     position: relative;
     width: 100%;
     height: 100%;
@@ -46,7 +60,7 @@
       box-sizing: border-box;
     }
 
-    .pdgird-title {
+    .pdgrid-title {
       position: absolute;
       top: 220px;
       left: 50%;
@@ -68,7 +82,7 @@
       }
     }
 
-    .pdgird-body {
+    .pdgrid-body {
       display: flex;
       position: absolute;
       justify-content: space-between;
@@ -77,15 +91,21 @@
       width: 100%;
       padding: 0 112px;
 
-      .pdgird-body__item {
+      .pdgrid-body__item {
         display: flex;
         flex-direction: column;
         width: 200px;
         height: 187px;
         align-items: center;
         padding-top: 71px;
+        cursor: pointer;
         background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/item-bg.png) no-repeat center;
         background-size: 100% 100%;
+        transition: opacity ease 0.3s;
+
+        &:hover {
+          opacity: 0.8;
+        }
 
         &:nth-of-type(2) {
           position: relative;
@@ -112,5 +132,69 @@
         }
       }
     }
+
+    .grid-dialog {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 111;
+      width: 100%;
+      height: 100%;
+
+      & > .mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.4);
+      }
+
+      .grid-container {
+        display: flex;
+        position: absolute;
+        flex-direction: column;
+        left: 50%;
+        top: 50%;
+        z-index: 2;
+        width: 640px;
+        height: 640px;
+        background: rgba(7,13,41,0.9);
+        border: 1px solid #144662;
+        transform: translate(-50%, -50%);
+
+        & > h2 {
+          width: 100%;
+          height: 67px;
+          line-height: 67px;
+          text-align: center;
+          color: #FFFFFF;
+          font-size: 27px;
+          text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/grid-title-bg.png) no-repeat center;
+          background-size: 100% 100%;
+        }
+
+        .grid-list {
+          flex: 1;
+          overflow-y: auto;
+
+          & > div {
+            height: 67px;
+            line-height: 67px;
+            text-align: center;
+            color: #FFFFFF;
+            font-size: 27px;
+
+            &.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);
+            }
+          }
+        }
+      }
+    }
   }
 </style>