wxml代码
<view>
<image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<view class="biaoti">
<view class="biaoti1">排名</view>
<view class="biaoti2">姓名</view>
<view class="biaoti3">票数</view>
</view>
<view class="paihang">
<view class="paihang_xuhao">01</view>
<view class="paihang_neirong">
<image class="paihang_neirong1" src="/tupian/01.jpg" mode="widthFix"></image>
<view class="paihang_neirong2">张三丰</view>
</view>
<view class="paihang_piaoshu">3678</view>
</view>
<view class="paihang">
<view class="paihang_xuhao">02</view>
<view class="paihang_neirong">
<image class="paihang_neirong1" src="/tupian/02.jpg" mode="widthFix"></image>
<view class="paihang_neirong2">李世光</view>
</view>
<view class="paihang_piaoshu">3678</view>
</view>
<view class="paihang">
<view class="paihang_xuhao">03</view>
<view class="paihang_neirong">
<image class="paihang_neirong1" src="/tupian/03.jpg" mode="widthFix"></image>
<view class="paihang_neirong2">王老五</view>
</view>
<view class="paihang_piaoshu">3678</view>
</view>
<view class="paihang">
<view class="paihang_xuhao">04</view>
<view class="paihang_neirong">
<image class="paihang_neirong1" src="/tupian/04.jpg" mode="widthFix"></image>
<view class="paihang_neirong2">张无忌</view>
</view>
<view class="paihang_piaoshu">3678</view>
</view>
<view class="paihang">
<view class="paihang_xuhao">05</view>
<view class="paihang_neirong">
<image class="paihang_neirong1" src="/tupian/05.jpg" mode="widthFix"></image>
<view class="paihang_neirong2">黄菊华</view>
</view>
<view class="paihang_piaoshu">3678</view>
</view>
wxss代码
/* pages/toupiao/paihang.wxss */
.ad01{
width: 100%;
}
.biaoti{
display: flex;
color: gray;
background-color: #f5f5f5;
padding: 5px;
box-shadow: 1px 1px 2px gainsboro;
}
.biaoti1{width: 5em; text-align:center;}
.biaoti2{ flex-grow: 1; text-align:center;}
.biaoti3{width: 5em; text-align:center;}
.paihang{
display: flex;
padding: 5px;
color: gray;
align-items: center;
border-bottom: 1px dotted gainsboro;
}
.paihang_xuhao{
width: 5em;
text-align: center;
}
.paihang_neirong{
display: flex;
align-items: center;
flex-grow: 1;
justify-content: center;
}
.paihang_neirong1{width: 40px;border-radius: 50%; margin: 3px;}
.paihang_neirong2{
}
.paihang_piaoshu{
width: 5em;
text-align: center;
}
