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

UI完善

Browse Source
This commit is contained in:
kron
2025-06-08 12:52:49 +08:00
parent 5a50632c6c
commit deff79aa7b
15 changed files with 900 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/UserHeader.vue
View File

@@ -39,25 +39,21 @@ const toUserPage = () => {
<view class="user-details">
<view class="user-name">
<text>{{ user.nickName }}</text>
<image src="../static/vip1.png" mode="widthFix" />
<image class="user-name-image" src="../static/vip1.png" mode="widthFix" />
</view>
<view class="user-stats">
<text class="level-tag">钻石1级</text>
<text class="level-tag">{{ user.lvl }}</text>
<text class="level-tag level-tag-first">钻石1级</text>
<text class="level-tag level-tag-second">{{ user.lvl }}</text>
<view class="rank-tag">
<view :style="{ width: '40%' }" />
<text>{{ user.lvl }}/{{ user.lvlPoints }}</text>
<view class="rank-tag-progress" :style="{ width: '40%' }" />
<text class="rank-tag-text">{{ user.lvl }}/{{ user.lvlPoints }}</text>
</view>
</view>
</view>
<view v-if="showRank === true" class="rank-info">
<image src="../static/global-rank.png" mode="widthFix" />
<image class="rank-info-image" src="../static/global-rank.png" mode="widthFix" />
<text>本赛季全国</text>
<text class="rank-number"
>第<text :style="{ color: '#ffd700' }"
>{{ user.points }}/{{ user.rankLvl }}</text
>名</text
>
<text class="rank-number">第<text :style="{ color: '#ffd700' }">{{ user.points }}/{{ user.rankLvl }}</text>名</text>
</view>
</view>
</template>
@@ -83,7 +79,7 @@ const toUserPage = () => {
margin-bottom: 5px;
}
.user-name > image {
.user-name-image {
margin-left: 5px;
width: 20px;
}
@@ -97,11 +93,13 @@ const toUserPage = () => {
text-align: center;
line-height: 16px;
}
.level-tag:first-child {
.level-tag-first {
width: 45px;
background: #5f51ff;
}
.level-tag:nth-child(2) {
.level-tag-second {
width: 30px;
background: #09c504;
}
@@ -115,17 +113,17 @@ const toUserPage = () => {
.rank-tag {
position: relative;
background-color: #00000038;
width: 56px;
width: 55px;
height: 16px;
}
.rank-tag > view:first-child {
.rank-tag-progress {
background: #ffa711;
height: 100%;
border-radius: 12px;
}
.rank-tag > text {
.rank-tag-text {
position: absolute;
top: 0;
left: 5px;
@@ -134,16 +132,16 @@ const toUserPage = () => {
.rank-info {
text-align: left;
font-size: 10px;
font-size: 12px;
position: relative;
color: #b3b3b3;
padding-left: 8px;
}
.rank-info > image {
.rank-info-image {
position: absolute;
top: -8px;
left: -8px;
top: -6px;
left: -9px;
width: 90px;
}