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