郫都大屏
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user