95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
<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>
|