图片附件（存放路径/static/image/rank_1/）

rank.vue

<template> <view class="page"> <view class="header"> <!-- <text> 2024-04-02更新 </text> --> </view> <view class="top"> <view class="top-item"> <image class="top-item-king" src="/static/image/rank_1/1.png"></image> <image class="top-item-avatar" src="/static/image/avatar.jpg"></image> <text class="top-item-name">黄烟尘</text> <text class="top-item-score">100</text> </view> <view class="top-item"> <image class="top-item-king" src="/static/image/rank_1/2.png"></image> <image class="top-item-avatar" src="/static/image/avatar.jpg"></image> <text class="top-item-name">李飞羽</text> <text class="top-item-score">97</text> </view> <view class="top-item"> <image class="top-item-king" src="/static/image/rank_1/3.png"></image> <image class="top-item-avatar" src="/static/image/avatar.jpg"></image> <text class="top-item-name">王猛</text> <text class="top-item-score">95</text> </view> </view> <view class="ranking"> <view class="rangking-title"> <text>排名</text> <text>昵称</text> <text>得分</text> </view> <view class="ranking-list"> <view class="ranking-list-item" v-for="(item, key) in list" :key="key"> <text class="ranking-list-number">{{key + 4}}</text> <view class="ranking-list-nickname"> <image :src="'/static/image/avatar.jpg'"></image> <text>编号{{key}}</text> </view> <text class="ranking-list-score">90</text> </view> </view> </view> </view> </template> <script> export default { data() { return { list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}] } } } </script> <style lang="scss"> page { background: #3980ff; } .page { padding-bottom: 20rpx; .header { width: 100vw; height: 100rpx; line-height: 80rpx; color: #fff; font-size: 12px; text-align: center; } .top { width: 660rpx; margin: auto; display: flex; justify-content: space-between; align-items: flex-end; .top-item { width: 200rpx; height: 320rpx; display: flex; flex-direction: column; background: #1a64b1; position: relative; align-items: center; border-radius: 100rpx 100rpx 0 0; color: #fff; &:nth-child(1) { height: 400rpx; } &:nth-child(2) { height: 360rpx; } .top-item-king { width: 80rpx; height: 80rpx; position: absolute; left: 60rpx; top: -40rpx; } .top-item-avatar { border-radius: 50%; width: 120rpx; height: 120rpx; margin-top: 60rpx; } .top-item-name { margin: 10rpx 0; } .top-item-score { font-size: 24px; color: #E28935; } } } .ranking { width: 700rpx; border-radius: 30rpx; margin: auto; background: #fff; box-sizing: border-box; padding: 20rpx; .rangking-title { display: flex; font-size: 14px; color: #555; height: 50rpx; line-height: 50rpx; text { display: block; width: 70rpx; &:nth-child(2) { width: calc(100% - 140rpx); } } } .ranking-list-item { height: 110rpx; display: flex; align-items: center; font-size: 14px; .ranking-list-number { display: block; width: 70rpx; color: #777; } .ranking-list-score { display: block; width: 70rpx; color: #E28935; font-size: 16px; } .ranking-list-nickname { display: flex; align-items: center; width: calc(100% - 140rpx); image { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; } text { width: auto; } } } } } </style>