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 17:18:56 +08:00
parent 46124ecf9c
commit 83b7bdef8d
1 changed files with 47 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,15 +9,27 @@
<div class="pdgrid-body"> <div class="pdgrid-body">
<div class="pdgrid-body__item"> <div class="pdgrid-body__item">
<h2>240</h2> <h2>240</h2>
<p>多层网格</p> <div class="bottom">
<i></i>
<p>第一网格</p>
<i class="right"></i>
</div>
</div> </div>
<div class="pdgrid-body__item" @click.stop="isShowGrid1 = true"> <div class="pdgrid-body__item" @click.stop="isShowGrid1 = true">
<h2>240</h2> <h2>240</h2>
<p>第一网格</p> <div class="bottom">
<i></i>
<p>第二网格</p>
<i class="right"></i>
</div>
</div> </div>
<div class="pdgrid-body__item"> <div class="pdgrid-body__item">
<h2>240</h2> <h2>240</h2>
<p>微网格</p> <div class="bottom">
<i></i>
<p>微网格</p>
<i class="right"></i>
</div>
</div> </div>
</div> </div>
<transition name="fade"> <transition name="fade">
@@ -158,14 +170,45 @@
} }
p { p {
font-size: 18px; max-width: 164px;
margin-top: 4px;
padding: 0 16px;
font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
text-shadow: 0px 0px 13px rgb(59 182 255 / 80%); text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
background: #fff; background: #fff;
-webkit-background-clip: text; -webkit-background-clip: text;
font-weight: 600; font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-fill-color: transparent; -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;
}
}
}
} }
} }