From 01a9997c865abf2eef7526d01f8bd9053c141274 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 10 Aug 2022 11:27:20 +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 | 64 +++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/project/dv/apps/components/PdGrid.vue b/project/dv/apps/components/PdGrid.vue
index f06e96b6..5ea1a988 100644
--- a/project/dv/apps/components/PdGrid.vue
+++ b/project/dv/apps/components/PdGrid.vue
@@ -3,6 +3,20 @@
     <div class="pdgird-title">
       <h2>幸福郫都微网实格架构</h2>
     </div>
+    <div class="pdgird-body">
+      <div class="pdgird-body__item">
+        <h2>240</h2>
+        <p>多层网格</p>
+      </div>
+      <div class="pdgird-body__item">
+        <h2>240</h2>
+        <p>第一网格</p>
+      </div>
+      <div class="pdgird-body__item">
+        <h2>240</h2>
+        <p>微网格</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -28,6 +42,10 @@
     background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/middle-bg.png) no-repeat center;
     background-size: contain;
 
+    * {
+      box-sizing: border-box;
+    }
+
     .pdgird-title {
       position: absolute;
       top: 140px;
@@ -42,11 +60,57 @@
 
       h2 {
         color: #FFFFFF;
+        font-size: 32px;
         text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
         background: #fff;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
     }
+
+    .pdgird-body {
+      display: flex;
+      position: absolute;
+      justify-content: space-between;
+      bottom: 220px;
+      left: 0;
+      width: 100%;
+      padding: 0 112px;
+
+      .pdgird-body__item {
+        display: flex;
+        flex-direction: column;
+        width: 200px;
+        height: 187px;
+        align-items: center;
+        padding-top: 71px;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/item-bg.png) no-repeat center;
+        background-size: 100% 100%;
+
+        &:nth-of-type(2) {
+          position: relative;
+          top: 67px;
+        }
+
+        h2 {
+          font-size: 36px;
+          color: #FFFFFF;
+          text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
+          background: #fff;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+
+        p {
+          font-size: 18px;
+          color: #FFFFFF;
+          text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
+          background: #fff;
+          -webkit-background-clip: text;
+          font-weight: 600;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
   }
 </style>