kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

郫都大屏

Browse Source
This commit is contained in:
yanran200730
2022-08-10 11:27:20 +08:00
parent 605599efc4
commit 01a9997c86
1 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
project/dv/apps/components/PdGrid.vue
View File

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