This commit is contained in:
liuye
2022-01-24 16:08:33 +08:00
parent b60f77bf07
commit 364646c1c7
5 changed files with 88 additions and 17 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@@ -40,14 +40,32 @@
<div class="text">网格入群数排行</div>
<div class="more">更多<img src="./components/img/right-icon-999.png" alt=""></div>
</div>
<div class="item">
<div>
<span>1</span>
<p>千岩街网格一</p>
<div class="content">
<div class="item">
<div class="name">
<span>1</span>
<p>千岩街网格一千岩街</p>
</div>
<div class="num">6702</div>
</div>
<div>6702</div>
</div>
</div>
<div class="list-content">
<div class="title">
<div class="text">网格事件处理排行</div>
<div class="more">更多<img src="./components/img/right-icon-999.png" alt=""></div>
</div>
<div class="content">
<div class="item">
<div class="name">
<span>1</span>
<p>千岩街网格一千岩街</p>
</div>
<div class="num">6702</div>
</div>
</div>
</div>
<img src="./components/img/user-static.png" alt="" class="back-img">
</div>
</template>
@@ -132,7 +150,8 @@ export default {
line-height: 56px;
}
img{
width: 56px;
width: 72px;
height: 72px;
position: absolute;
right: 44px;
top: 0;
@@ -156,13 +175,13 @@ export default {
}
.list-content{
width: calc(100% - 60px);
margin: 0 30px;
margin: 0 30px 32px;
border-radius: 16px;
.title{
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 28px 6px 28px 50px;
padding: 28px 6px 0 50px;
.text{
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
@@ -182,9 +201,50 @@ export default {
}
}
}
.item{
.content{
padding: 0 50px 32px 50px;
background-color: #fff;
}
.item{
display: flex;
justify-content: space-between;
padding: 28px 0;
border-bottom: 1px solid #E1E1E1;
.name{
width: calc(100% - 100px);
span{
display: inline-block;
padding: 0 10px;
height: 30px;
background: #3399FF;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
color: #FFF;
line-height: 30px;
border-radius: 50%;
margin-right: 34px;
vertical-align: top;
margin-top: 6px;
}
p{
display: inline-block;
width: calc(100% - 70px);
word-break: break-all;
}
}
.num{
display: inline-block;
width: 100px;
text-align: right;
}
}
}
.back-img{
position: fixed;
bottom: 466px;
right: 0;
width: 132px;
height: 132px;
}
}
</style>