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:
cbb
2025-12-27 10:13:04 +08:00
parent 9590175188
commit 20455490f8
16 changed files with 891 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
pages/discover/ranking-list.vue
View File

@@ -5,20 +5,20 @@
<nav-bar>
<template #back>
<image
src="/static/images/public/white-arrow.png"
src="/static/images/public/return-icon.png"
mode="heightFix"
class="top-left-icon"
></image>
</template>
</nav-bar>
<view class="top-box">
<view class="public-header—box">
<image
src="/static/images/ranking-list/title-icon.png"
src="/static/images/discover/title-icon.png"
mode="aspectFit"
class="left-icon"
></image>
<image
src="/static/images/ranking-list/hat.png"
src="/static/images/discover/hat.png"
mode="aspectFit"
class="right-icon"
></image>
@@ -27,68 +27,122 @@
<!-- 表格 -->
<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>
<uni-row class="table-head">
<uni-col :span="6">
<view class="grade-box">
<text class="item-text">排行</text>
</view>
</uni-col>
<uni-col :span="12">
<view class="name">
<text class="item-text">用户</text>
</view>
</uni-col>
<uni-col :span="6">
<view class="table-right">
<text class="item-text">积分</text>
</view>
</uni-col>
</uni-row>
<!-- 列表内容 -->
<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>
<uni-row
v-for="(item, index) in 19"
:key="index"
class="table-content"
>
<uni-col :span="6">
<view class="grade-box">
<image
v-if="index < 3"
:src="`/static/images/discover/grade${index + 1}.png`"
mode="heightFix"
class="grade"
></image>
<text v-else class="item-text">1</text>
</view>
</uni-col>
<uni-col :span="12">
<view class="table-name">
<image
src="/static/images/public/random2.png"
mode="aspectFit"
class="left-icon"
></image>
<view class="name">
<text>张三</text>
<text>158****98874</text>
</view>
</view>
</uni-col>
<uni-col :span="6">
<view class="table-right">
<text class="item-text">100</text>
</view>
</uni-col>
</uni-row>
</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;
}
}
@import './styles/index.scss';
.table-box {
font-family: PingFang SC, PingFang SC;
font-style: normal;
text-transform: none;
.grade-box {
text-align: center;
.grade {
height: 64rpx;
}
}
.table-right {
text-align: center;
}
.table-head {
font-weight: bold;
font-size: 28rpx;
color: #999999;
.name {
padding-left: 18rpx;
}
}
.table-content {
margin-top: 36rpx;
display: flex;
align-items: center;
.table-name {
display: flex;
align-items: center;
.left-icon {
width: 64rpx;
height: 64rpx;
margin-right: 8rpx;
}
.name {
display: flex;
flex-direction: column;
text {
font-weight: 500;
font-size: 28rpx;
color: #333333;
line-height: 1;
&:last-child {
margin-top: 8rpx;
font-size: 24rpx;
color: #999999;
}
}
}
}
.table-right {
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
}
}
</style>