評選投票微信小程序 畢業設計 課程設計（2）排行頁面

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