From 83b7bdef8dc95093228f1f2fcbaa9466b4314072 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 10 Aug 2022 17:18:56 +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 | 51 ++++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/project/dv/apps/components/PdGrid.vue b/project/dv/apps/components/PdGrid.vue
index 1e9d7397..b077d2f2 100644
--- a/project/dv/apps/components/PdGrid.vue
+++ b/project/dv/apps/components/PdGrid.vue
@@ -9,15 +9,27 @@
     <div class="pdgrid-body">
       <div class="pdgrid-body__item">
         <h2>240</h2>
-        <p>多层网格</p>
+        <div class="bottom">
+          <i></i>
+          <p>第一网格</p>
+          <i class="right"></i>
+        </div>
       </div>
       <div class="pdgrid-body__item" @click.stop="isShowGrid1 = true">
         <h2>240</h2>
-        <p>第一网格</p>
+        <div class="bottom">
+          <i></i>
+          <p>第二网格</p>
+          <i class="right"></i>
+        </div>
       </div>
       <div class="pdgrid-body__item">
         <h2>240</h2>
-        <p>微网格</p>
+        <div class="bottom">
+          <i></i>
+          <p>微网格</p>
+          <i class="right"></i>
+        </div>
       </div>
     </div>
     <transition name="fade">
@@ -158,14 +170,45 @@
         }
 
         p {
-          font-size: 18px;
+          max-width: 164px;
+          margin-top: 4px;
+          padding: 0 16px;
+          font-size: 16px;
           color: #FFFFFF;
           text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
           background: #fff;
           -webkit-background-clip: text;
           font-weight: 600;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
           -webkit-text-fill-color: transparent;
         }
+
+        .bottom {
+          display: flex;
+          align-items: center;
+
+          i {
+            width: 0px;
+            height: 0px;
+            border: 6px solid transparent;
+            border-top-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+            border-right-color: #FFCB42;
+
+            &.right {
+              width: 0px;
+              height: 0px;
+              border: 6px solid transparent;
+              border-top-color: transparent;
+              border-bottom-color: transparent;
+              border-left-color: #FFCB42;
+              border-right-color: transparent;
+            }
+          }
+        }
       }
     }