|
|
@@ -13,13 +13,42 @@
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <img src="../../assets/dadiwen-o1ceng-png.png" alt="" class="bg-img" />
|
|
|
<div class="level-icon">
|
|
|
<div class="level-item" v-for="(item, index) in levelList" :key="index">
|
|
|
<span :style="{ color: levelInfo.textColor || levelInfo.color }">Lv{{ item.val }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="level-text">
|
|
|
- <div class="top">
|
|
|
+ <div class="top" v-if="(levelInfo.level || 0) < 9">
|
|
|
+ <div class="top-content">
|
|
|
+ <div class="text1">
|
|
|
+ <div class="top-num">
|
|
|
+ <van-image class="top-icon" width="28" height="28" :src="levelInfo.vicon" />
|
|
|
+ <div class="num-val" :style="{ color: levelInfo.textColor || levelInfo.color }">
|
|
|
+ {{ levelInfo.level }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span
|
|
|
+ class="tips1"
|
|
|
+ v-if="levelInfo.realm"
|
|
|
+ :style="{ color: levelInfo.textColor || levelInfo.color }"
|
|
|
+ >{{ levelInfo.realm }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="tips2"
|
|
|
+ :style="{
|
|
|
+ color: levelInfo.textColor || levelInfo.color
|
|
|
+ }"
|
|
|
+ >{{ levelInfo.title }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="text2" :style="{ color: (levelInfo.textColor || levelInfo.color) + '70' }">
|
|
|
+ 每十级将获得新的勋章奖励哦～
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top" v-else>
|
|
|
<div class="num">
|
|
|
<van-image width="52" height="52" :src="levelInfo.icon" />
|
|
|
<span class="num-val" :style="{ color: levelInfo.textColor || levelInfo.color }">{{
|
|
|
@@ -34,8 +63,7 @@
|
|
|
<span
|
|
|
class="tips2"
|
|
|
:style="{
|
|
|
- color: levelInfo.textColor || levelInfo.color,
|
|
|
-
|
|
|
+ color: levelInfo.textColor || levelInfo.color
|
|
|
}"
|
|
|
>{{ levelInfo.title }}</span
|
|
|
>
|
|
|
@@ -45,6 +73,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="right" :style="{ backgroundColor: levelInfo.color }">当前等级</div>
|
|
|
+
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="text1" :style="{ color: levelInfo.textColor || levelInfo.color }">
|
|
|
+ 距离等级Lv{{ levelInfo.level ? levelInfo.level + 1 : 1 }}还差
|
|
|
+ </div>
|
|
|
+ <div class="text2" :style="{ backgroundColor: levelInfo.color + 'DD' }">{{ need }}个绿洲石</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -66,7 +103,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- rates: [0, 34, 63, 89, 100]
|
|
|
+ rates: [2, 34, 63, 89, 100]
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -105,6 +142,9 @@ export default {
|
|
|
});
|
|
|
|
|
|
return rate;
|
|
|
+ },
|
|
|
+ need() {
|
|
|
+ return Math.ceil(this.$rating - (this.money % this.$rating));
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -116,7 +156,7 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.level-card {
|
|
|
margin: 16px;
|
|
|
- border-radius: 20px;
|
|
|
+ border-radius: 16px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
@@ -217,10 +257,12 @@ export default {
|
|
|
|
|
|
.top-content {
|
|
|
.text1 {
|
|
|
+ .flex();
|
|
|
.tips1 {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
line-height: 24px;
|
|
|
+ margin-right: 4px;
|
|
|
}
|
|
|
.tips2 {
|
|
|
display: inline-block;
|
|
|
@@ -228,11 +270,25 @@ export default {
|
|
|
line-height: 18px;
|
|
|
transform: scale(0.8) translate(-6px, 0);
|
|
|
border-radius: 2px;
|
|
|
- padding: 0 6px;
|
|
|
- background: rgba(255, 255, 255, 0.3);
|
|
|
+ padding: 0 8px;
|
|
|
+ background: #3b445d43;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
+ .top-num {
|
|
|
+ .flex();
|
|
|
+ // align-items: flex-end;
|
|
|
+ .num-val {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top-icon {
|
|
|
+ transform: translateY(-3px);
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
.text2 {
|
|
|
font-size: 12px;
|
|
|
transform: scale(0.8) translate(-15px, -4px);
|
|
|
@@ -240,5 +296,48 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .right {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 0 14px;
|
|
|
+ border-radius: 0px 16px 0px 12px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ .flex();
|
|
|
+ position: absolute;
|
|
|
+ bottom: 16px;
|
|
|
+ right: 10px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 12px;
|
|
|
+ transform: translateX(15px) scale(0.8);
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 12px;
|
|
|
+ padding: 5px 12px;
|
|
|
+ border-radius: 100px;
|
|
|
+ transform: scale(0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bg-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
</style>
|
panhui
