等级&换行

src/components/level/LevelCard.vue

@@ -76,7 +76,7 @@
 
             <div class="right" :style="{ backgroundColor: levelInfo.color }">当前等级</div>
 
-            <div class="bottom">
+            <div class="bottom" v-if="!isMore">
                 <div class="text1" :style="{ color: levelInfo.textColor || levelInfo.color }">
                     距离等级Lv{{ levelInfo.level ? levelInfo.level + 1 : 1 }}还差
                 </div>
@@ -99,6 +99,10 @@ export default {
         money: {
             type: Number,
             default: 0
+        },
+        isMore: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -271,7 +275,7 @@ export default {
                     transform: scale(0.8) translate(-6px, 0);
                     border-radius: 2px;
                     padding: 0 8px;
-                    background: #3b445d43;
+                    background: rgba(255, 255, 255, 0.3);
                 }
 
                 .top-num {

src/mixins/level.js

@@ -106,6 +106,9 @@ export default {
             if (this.isLogin) {
                 let level = Math.floor(this.money / this.$rating);
                 console.log(level);
+                if (level > 99) {
+                    level = 99;
+                }
                 let info = {};
                 [...this.medals].forEach(item => {
                     if (level >= item.start) {
@@ -122,6 +125,14 @@ export default {
             } else {
                 return {};
             }
+        },
+        isMore() {
+            if (this.isLogin) {
+                let level = Math.floor(this.money / this.$rating);
+                return level >= 99;
+            } else {
+                return false;
+            }
         }
     },
     mounted() {
@@ -130,7 +141,7 @@ export default {
                 let start = index - 1 >= 0 ? res.content[index - 1].endLevel : 0;
                 return {
                     ...item,
-                    startLevel: item.startLevel || ''
+                    startLevel: item.startLevel
                 };
             });
 

src/plugins/colors.js

@@ -18,7 +18,7 @@ export default {
             };
         }
         if (process.env.NODE_ENV == 'development') {
-            app.config.globalProperties.$rating = 30;
+            app.config.globalProperties.$rating = 1;
         } else {
             app.config.globalProperties.$rating = 1000;
         }

src/views/Mine.vue

@@ -355,6 +355,10 @@ export default {
         color: @text0;
         line-height: 18px;
         margin-top: 4px;
+        white-space: nowrap;
+    }
+    .van-grid-item__content {
+        padding: 4.2vw 2.1vw;
     }
 }
 
@@ -530,6 +534,9 @@ export default {
     background-color: @bg;
     border-radius: 8px;
     overflow: hidden;
+    &.van-grid {
+        margin: 0;
+    }
 }
 
 /deep/.auth {

src/views/user/Level.vue

@@ -6,7 +6,7 @@
                 在绿洲宇宙中使用绿洲石，绿洲石将会产生原力，原力是绿洲藏家晋升之路的基础。原力越高，境界与头衔越高。
             </div>
         </div>
-        <level-card :levelInfo="levelInfo" :money="money"></level-card>
+        <level-card :levelInfo="levelInfo" :isMore="isMore" :money="money"></level-card>
         <div class="level-title">
             <div class="text1">勋章展示</div>
             <div class="text2">10级以上(包含10级)将会获得勋章奖励，最高等级Lv99</div>
@@ -57,7 +57,7 @@
 
             <div class="tr" v-for="(item, index) in levels" :key="index">
                 <div class="td">
-                    Lv{{ item.startLevel || item.startLevel === 0 ? item.startLevel + '~' : '' }} {{ item.endLevel }}级
+                    Lv{{ item.endLevel !== 0 ? item.startLevel + '~' : item.startLevel }} {{ item.endLevel || '' }}级
                 </div>
                 <div class="td">{{ item.realm || '/' }}</div>
                 <div class="td">{{ item.title }}</div>
@@ -151,18 +151,22 @@ export default {
 
         & > div {
             width: 33%;
-            padding: 0 24px;
+            padding: 0 6.4vw;
+            box-sizing: border-box;
 
             &.th {
                 font-size: 12px;
                 color: #000000;
                 line-height: 17px;
+                white-space: nowrap;
             }
 
             &.td {
                 font-size: 12px;
                 color: #939599;
                 line-height: 17px;
+                white-space: nowrap;
+                flex-shrink: 0;
                 &:first-child {
                     color: #000000;
                 }