root/uniapp-im-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

排行榜，签到开发

Browse Source
This commit is contained in:
bobobobo
2025-12-27 00:06:00 +08:00
parent 57fc3b7314
commit 9edc7e7ba3
7 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
pages/ranking-list/ranking-list.vue Normal file
View File

@@ -0,0 +1,94 @@
<script setup></script>
<template>
<view class="ranking-list">
<nav-bar>
<template #back>
<image
src="/static/images/public/white-arrow.png"
mode="heightFix"
class="top-left-icon"
></image>
</template>
</nav-bar>
<view class="top-box">
<image
src="/static/images/ranking-list/title-icon.png"
mode="aspectFit"
class="left-icon"
></image>
<image
src="/static/images/ranking-list/hat.png"
mode="aspectFit"
class="right-icon"
></image>
</view>
<!-- 表格 -->
<view class="table-box">
<!-- 表头 -->
<view class="table-head">
<view class="table-item">
<text class="item-text">排行</text>
</view>
<view class="table-item">
<text class="item-text">用户</text>
</view>
<view class="table-item">
<text class="item-text">积分</text>
</view>
</view>
<!-- 列表内容 -->
<view v-for="item in 4" class="table-content">
<view class="table-item">
<text class="item-text">1</text>
</view>
<view class="table-item">
<text class="item-text">张三</text>
</view>
<view class="table-item">
<text class="item-text">100</text>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.top-left-icon {
height: 42rpx;
}
.top-box {
position: relative;
height: 466rpx;
background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
&::after {
content: '';
position: absolute;
width: 100%;
height: 38rpx;
left: 0;
bottom: 0;
background: #ffffff;
border-radius: 32rpx 32rpx 0rpx 0rpx;
}
.left-icon {
width: 354rpx;
height: 166rpx;
position: absolute;
bottom: 42rpx;
left: 48rpx;
}
.right-icon {
width: 450rpx;
height: 218rpx;
position: absolute;
bottom: 10rpx;
right: -60rpx;
}
}
.table-box {
}
</style>