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 @@

幸福郫都微网实格架构

+
+
+

240

+

多层网格

+
+
+

240

+

第一网格

+
+
+

240

+

微网格

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