效果圖:

廢話不多說直接上代碼,首先引入 colorUI? 下載地址?
wxml:

<view class="margin-lr margin-tb-sm radius" style="background:#f7f7f7;"><view class="box123 bg-white"><view class="grid col-3 bg-white padding-sm text-df text-black"><view><view class="radius text-center light"><text class="cuIcon-crownfill lg crownfill" style="color:#d8537e;top:38rpx"></text><view class="user-image bg-img flex justify-center align-center"><imagesrc="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604490981257&di=22b38b92a7d05304eaeb910d332bc01a&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F73e8d40bec1e4f757c01ea7b4fbfa73fbe07416812565-kVJBcI_fw658"style="border-color: #d8537e;"></image><view class="flex justify-center align-center bg-white" style="color:#d8537e;border-color: #d8537e;">2</view></view><view class="text-black">丁曉明</view><view class="margin-top-xs text-black">賞月俱樂部</view><view class="margin-top-xs text-grey"><text class="cuIcon-likefill lg text-red"></text>13131</view></view></view><view><view class="radius text-center light "><text class="cuIcon-crownfill lg crownfill" style="color:#f6c75f;font-size:40rpx"></text><view class="user-image bg-img flex justify-center align-start bigImg"><imagesrc="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604490981257&di=22b38b92a7d05304eaeb910d332bc01a&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F73e8d40bec1e4f757c01ea7b4fbfa73fbe07416812565-kVJBcI_fw658"></image><view class="flex justify-center align-center bg-white">1</view></view><view class="text-black">丁曉明</view><view class="margin-top-xs text-black">賞月俱樂部</view><view class="margin-top-xs text-grey"><text class="cuIcon-likefill lg text-red"></text>13131</view></view></view><view><view class="radius text-center light"><text class="cuIcon-crownfill lg crownfill" style="color:#81bbfb;top:38rpx;"></text><view class="user-image bg-img flex justify-center align-center"><imagesrc="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604490981257&di=22b38b92a7d05304eaeb910d332bc01a&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F73e8d40bec1e4f757c01ea7b4fbfa73fbe07416812565-kVJBcI_fw658"></image><view class="flex justify-center align-center bg-white">3</view></view><view class="text-black">丁曉明</view><view class="margin-top-xs text-black">賞月俱樂部</view><view class="margin-top-xs text-grey"><text class="cuIcon-likefill lg text-red"></text>13131</view></view></view></view></view><view class="box456 bg-white " style="margin-top:16rpx"><view class="cu-list menu-avatar"><view class="cu-item justify-start" wx:for="{{8}}"><view class="cu-avatar round lg"style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);left:150rpx"></view><view class="cu-avatar lg " wx:if="{{index+4<11}}"style="background-image:url(https://seba.oss-cn-shanghai.com/images/mayun_meet/meetNo{{index+4}}.png);{{index+4==10?'width: 115rpx;':''}}"> <!-- 如果圖片不能使用,等到文章下方進行下載 --></view><view class="cu-avatar lg bg-white text-black " wx:else><text class="text-df">{{index+4}}</text></view><view class="action text-cut margin-right-xs" style="width:286rpx;">王子秋 奪得什么第四名<!-- <view class="text-grey algin-left">凱爾</view> --></view><view class="action flex margin-right "><text class="cuIcon-likefill lg text-red margin-right-xs"></text>13131</view></view></view></view></view>

css:

/* pages/vote2/vote2.wxss *//* 引入colorUI */ @import "./colorui/main.wxss"; @import "./colorui/icon.wxss";page {background: #010103; }.morenBt {background-color: #323232 !important;color: #a79c88;margin: 0 5rpx; }.tabSelect {background-color: #d0b781 !important;color: #292617; }.touRen {width: 345rpx;height: 492rpx;background: #323232;/* margin-bottom: 10rpx; */ }.grid.col-2>view:nth-child(even) .touRen {margin-left: 5rpx; }.product-img {width: 345rpx;height: auto;min-height: 260rpx; }.imgDiv {width: 100%;height: 410rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal !important;position: relative; }.imgDiv .bg-biaoqian {width: 101rpx;height: 82rpx;position: absolute;top: 0;left: 10rpx;background-image: url('https://seba.oss-cn-shanghai.com/images/mayun_meet/bg-biaoqian.png');color: #fbffff;line-height: 60rpx;font-size: 22rpx; }.box123, .box456 {width: 100%;min-height: 424rpx; }.user-image {width: 100%;min-height: 238rpx;background-size: 200rpx 200rpx;overflow: hidden;position: relative; }.user-image image {width: 180rpx;height: 180rpx;border-radius: 50%;border: 5rpx solid #81bbfb; }.user-image view {width: 50rpx;height: 50rpx;border-radius: 50%;border: 5rpx solid #81bbfb;color: #81bbfb;position: absolute;bottom: 5rpx;left: 80rpx} .user-image text {position: absolute;top: 0rpx;left: 80rpx}.user-image.bigImg image {width: 220rpx;height: 220rpx;border-color: #f6c75f; } .user-image.bigImg view {width: 55rpx;height: 55rpx;border-color: #f6c75f;color: #f6c75f;position: absolute;top: 190rpx;left: 80rpx}.user-image.bigImg {min-height: 250rpx; } .crownfill{position: relative;top: 9rpx; }

大家又需要拿去,素材在最下面:

?

如果你感覺有收獲，歡迎給我打賞 ———— 以激勵我輸出更多優質內容

?

?

總結

以上是生活随笔為你收集整理的小程序投票排名样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。