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 @@
幸福郫都微网实格架构
+
@@ -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;
+ }
+ }
+ }
}