郫都大屏

This commit is contained in:
yanran200730
2022-08-10 17:18:56 +08:00
parent 46124ecf9c
commit 83b7bdef8d

View File

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