laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

内容更新

Browse Source
This commit is contained in:
kron
2026-01-06 10:00:57 +08:00
parent 60f4b3370c
commit 3d13f7c880
1 changed files with 69 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/pages/rank-intro.vue
View File

@@ -55,77 +55,77 @@ import Container from "@/components/Container.vue";
<view class="section"> <view class="section">
<view class="title">三、（表格）</view> <view class="title">三、（表格）</view>
<view class="rank-table"> <view class="rank-table">
<view class="table-header"> <view class="table-row">
<view>大段位</view> <text>大段位</text>
<view>小段位</view> <text>小段位</text>
<view>积分（100积分=1星）</view> <text>积分（100积分=1星）</text>
</view> </view>
<view class="table-row"> <view class="table-row">
<view>铜牌青铜</view> <text>倔强青铜</text>
<view> <view>
<view>青铜1*</view> <text>青铜1*</text>
<view>青铜2*</view> <text>青铜2*</text>
<view>青铜3*</view> <text>青铜3*</text>
</view> </view>
<view>每个小段位需要累计3星才能晋升到下一个段位，共9星。</view> <text>每个小段位需要满 3星才能晋升到下一个段位，共9颗星。</text>
</view> </view>
<view class="table-row"> <view class="table-row">
<view>移动白银</view> <text>秩序白银</text>
<view> <view>
<view>白铜1*</view> <text>白铜1*</text>
<view>白铜2*</view> <text>白铜2*</text>
<view>白铜3*</view> <text>白铜3*</text>
</view> </view>
<view>每个小段位需要累计3星才能晋升到下一个段位，共9星。</view> <text>每个小段位需要满 3颗星才能晋升到下一个段位，共9颗星。</text>
</view> </view>
<view class="table-row"> <view class="table-row">
<view>黄金王者</view> <text>黄金王者</text>
<view> <view>
<view>黄金1*</view> <text>黄金1*</text>
<view>黄金2*</view> <text>黄金2*</text>
<view>黄金3*</view> <text>黄金3*</text>
<view>黄金4*</view> <text>黄金4*</text>
</view> </view>
<view>每个小段位需要累计4星才能晋升到下一个段位，共15星。</view> <text>每个小段位需要满4颗星才能晋升到下一个段位，共16颗星。</text>
</view> </view>
<view class="table-row"> <view class="table-row">
<view>永恒钻石</view> <text>永恒钻石</text>
<view> <view>
<view>钻石1*</view> <text>钻石1*</text>
<view>钻石2*</view> <text>钻石2*</text>
<view>钻石3*</view> <text>钻石3*</text>
<view>钻石4*</view> <text>钻石4*</text>
<view>钻石5*</view> <text>钻石5*</text>
</view> </view>
<view>每个小段位需要累计5星才能晋升到下一个段位，共25星。</view> <text>每个小段位需要满5颗星才能晋升到下一个段位，共25颗星。</text>
</view> </view>
<view class="table-row2"> <view class="table-row2">
<view>最强王者</view> <text>最强王者</text>
<view>0-9</view> <text>0-9</text>
</view> </view>
<view class="table-row2"> <view class="table-row2">
<view>非凡王者</view> <text>非凡王者</text>
<view>0-9</view> <text>9-19</text>
</view> </view>
<view class="table-row2"> <view class="table-row2">
<view>无双王者</view> <text>无双王者</text>
<view>10-19</view> <text>20-29</text>
</view> </view>
<view class="table-row2"> <view class="table-row2">
<view>至尊王者</view> <text>绝世王者</text>
<view>20-29</view> <text>30-39</text>
</view> </view>
<view class="table-row2"> <view class="table-row2">
<view>荣耀王者</view> <text>至圣王者</text>
<view>30-39</view> <text>40-49</text>
</view> </view>
<view class="table-row2"> <view class="table-row2">
<view>璀璨王者</view> <text>荣耀王者</text>
<view>40-49</view> <text>50-99</text>
</view> </view>
<view class="table-row2"> <view class="table-row2">
<view>传奇王者</view> <text>传奇王者</text>
<view>100+</view> <text>100+</text>
</view> </view>
</view> </view>
</view> </view>
@@ -134,7 +134,7 @@ import Container from "@/components/Container.vue";
</Container> </Container>
</template> </template>
<style scoped> <style scoped lang="scss">
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -195,71 +195,47 @@ import Container from "@/components/Container.vue";
} }
.rank-table { .rank-table {
border: 1px solid #e4e4e4;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
color: #000; color: #000;
width: calc(100vw - 20px);
} }
.table-header { .rank-table > view {
display: flex; display: flex;
border-bottom: 1px solid #e4e4e4;
} }
.table-header > view { .rank-table > view > text:last-child {
padding: 5px 10px; margin-left: -1rpx;
width: 20%;
} }
.table-header > view:last-child {
padding: 5px 10px; .rank-table text {
width: 60%; padding: 10rpx 20rpx;
border: $uni-border;
box-sizing: border-box;
display: inline-block;
margin-top: -1rpx;
} }
.table-header > view:nth-child(2) {
border-left: 1px solid #e4e4e4; .table-row text {
border-right: 1px solid #e4e4e4; width: 25%;
} }
.table-row {
.table-row > view {
display: flex; display: flex;
min-height: 44px; flex-direction: column;
border-bottom: 1px solid #e4e4e4; width: 25%;
} }
.table-row > view:first-child,
.table-row > view:last-child, .table-row > view > text {
.table-row > view:nth-child(2) > view { width: 100%;
padding: 5px 10px;
} }
.table-row > view:nth-child(2) {
border-left: 1px solid #e4e4e4; .table-row > text:nth-child(3) {
border-right: 1px solid #e4e4e4; width: 50%;
} }
.table-row > view:nth-child(2) > view {
border-bottom: 1px solid #e4e4e4; .table-row2 > text {
} width: 50%;
.table-row > view:nth-child(2) > view:last-child {
border-bottom: none;
}
.table-row > view:first-child {
width: 20%;
}
.table-row > view:nth-child(2) {
width: 26.5%;
}
.table-row > view:last-child {
width: 60%;
display: flex;
justify-content: center;
align-items: center;
line-height: 2;
}
.table-row2 {
display: flex;
border-bottom: 1px solid #e4e4e4;
}
.table-row2 > view {
padding: 5px 10px;
}
.table-row2 > view:first-child {
border-right: 1px solid #e4e4e4;
width: 38.8%;
} }
</style> </style>