等级

src/components/level/Level.vue

@@ -30,7 +30,7 @@
     <div v-if="isLogin && !show && levelInfo.icon" ref="medal" class="medal-info" @click="$router.push('/mineLevel')">
         <div class="medal-icon">
             <van-image :src="levelInfo.icon" width="32" height="32" />
-            <span class="text1" :style="{ color: levelInfo.color }">{{ levelInfo.level }}</span>
+            <div class="text1" :style="{ color: levelInfo.color }">{{ levelInfo.level }}</div>
         </div>
         <div class="medal-text">
             <div class="text1" :style="{ color: levelInfo.color, backgroundColor: levelInfo.color + '33' }">
@@ -182,11 +182,13 @@ export default {
             left: 16px;
             top: 13px;
             font-size: 12px;
-            transform: scale(0.6) translate(-4px, -4px);
-            line-height: 10px;
+            transform: scale(0.6) translate(-50%, -2px);
+            line-height: 12px;
             font-weight: bold;
             text-align: center;
-            display: inline-block;
+            display: block;
+            min-width: 18px;
+            text-align: center;
         }
     }
     .medal-text {

src/components/level/LevelCard.vue

@@ -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>

src/mixins/level.js

@@ -5,7 +5,8 @@ export default {
                 {
                     start: 0,
                     end: 9,
-                    color: '#717171',
+                    color: '#3B445D',
+                    vicon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/v.png',
                     icon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/LV0-1-icon.png',
                     hide: true,
                     textColor: '#ffffff',
@@ -16,8 +17,8 @@ export default {
                     start: 10,
                     end: 19,
                     color: '#557595',
-                    startColor: '#aed6ff',
-                    endColor: '#c3e1ff',
+                    startColor: '#AAD4FF',
+                    endColor: '#C5E2FF',
                     icon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/LV10-19-icon.png',
                     bg: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/V10-19.png'
                 },
@@ -34,8 +35,8 @@ export default {
                     start: 30,
                     end: 39,
                     color: '#3C62FF',
-                    startColor: '#b7c3ff',
-                    endColor: '#dbe3ff',
+                    startColor: '#B6C2FF',
+                    endColor: '#A8B7FF',
                     icon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/LV30-39-icon.png',
                     bg: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/V30-39.png'
                 },
@@ -43,8 +44,8 @@ export default {
                     start: 40,
                     end: 49,
                     color: '#663FA7',
-                    startColor: '#aed6ff',
-                    endColor: '#c3e1ff',
+                    startColor: '#CEAFFF',
+                    endColor: '#C19AFF',
                     icon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/LV40-49-icon.png',
                     bg: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/V40-49.png'
                 },
@@ -52,8 +53,8 @@ export default {
                     start: 50,
                     end: 59,
                     color: '#1076E1',
-                    startColor: '#aed6ff',
-                    endColor: '#c3e1ff',
+                    startColor: '#B3EAFF',
+                    endColor: '#7CDAFF',
                     icon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/LV50-59-icon.png',
                     bg: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/V50-59.png'
                 },
@@ -61,6 +62,8 @@ export default {
                     start: 60,
                     end: 69,
                     color: '#DB31CA',
+                    startColor: '#FFBEF8',
+                    endColor: '#FF8DF5',
                     icon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/LV60-69-icon.png',
                     bg: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/V60-69.png'
                 },
@@ -68,6 +71,8 @@ export default {
                     start: 70,
                     end: 79,
                     color: '#3D26D2',
+                    startColor: '#B6AAFC',
+                    endColor: '#9F8EFF',
                     icon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/LV70-79-icon.png',
                     bg: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/V70-79.png'
                 },
@@ -75,6 +80,8 @@ export default {
                     start: 80,
                     end: 89,
                     color: '#DF1637',
+                    startColor: '#FFB2B9',
+                    endColor: '#F89BA3',
                     icon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/LV80-89-icon.png',
                     bg: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/V80-89.png'
                 },
@@ -82,8 +89,8 @@ export default {
                     start: 90,
                     end: 99,
                     color: '#FA6802',
-                    startColor: '#aed6ff',
-                    endColor: '#c3e1ff',
+                    startColor: '#FFE3BB',
+                    endColor: '#FFCF8C',
                     icon: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/LV90-99-icon.png',
                     bg: 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/medals/V90-99.png'
                 }

src/plugins/colors.js

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

src/views/user/Level.vue

@@ -14,12 +14,23 @@
 
         <swiper slidesPerView="auto" :spaceBetween="16" class="box-swiper">
             <template v-for="(item, index) in medals" :key="index">
-                <swiper-slide class="box" v-if="!item.hide">
-                    <van-image :src="item.bg" width="88" height="100" />
+                <swiper-slide
+                    class="box"
+                    :style="{
+                        background: `linear-gradient(180deg, ${item.startColor} 0%, ${item.endColor} 100%)`
+                    }"
+                    v-if="!item.hide"
+                >
+                    <van-image
+                        class="box-bg-img"
+                        :src="require('../../assets/diwen-gongyong-png.png')"
+                        width="88"
+                        height="100"
+                    />
 
                     <div class="box-content">
                         <div class="box-bg">
-                            <van-image width="35" height="35" :src="item.icon" />
+                            <van-image width="40" height="40" :src="item.icon" />
                             <span class="text1" :style="{ color: item.color }">**</span>
                         </div>
                         <div class="box-text" :style="{ color: item.color }">Lv{{ item.start }}-{{ item.end }}</div>
@@ -28,6 +39,8 @@
             </template>
         </swiper>
 
+        <div class="table-title">原力级别详情</div>
+
         <div class="table">
             <div class="tr">
                 <div class="th">原力级别</div>
@@ -84,12 +97,27 @@ export default {
 /deep/.box-swiper {
     padding: 6px 0 30px 16px;
     .swiper-slide {
-        background-color: @bg3;
+        // background-color: @bg3;
         height: 100px;
         width: 88px;
     }
 }
-
+.table-title {
+    font-size: 12px;
+    color: #939599;
+    line-height: 17px;
+    .flex();
+    justify-content: center;
+    &::before,
+    &::after {
+        content: '';
+        background: rgba(147, 149, 153, 0.5);
+        width: 42px;
+        height: 1px;
+        display: block;
+        margin: 0 10px;
+    }
+}
 .table {
     margin: 16px;
     border-radius: 12px;
@@ -126,6 +154,7 @@ export default {
 
 .box {
     position: relative;
+    border-radius: 8px;
 
     .box-content {
         position: absolute;
@@ -139,25 +168,32 @@ export default {
             white-space: nowrap;
             font-size: 12px;
             line-height: 20px;
-            padding: 0 5px;
+            padding: 0 6px;
             background-color: rgba(255, 255, 255, 0.3);
-            margin-top: 10px;
+            margin-top: 8px;
             border-radius: 12px;
         }
     }
 
     .box-bg {
         position: relative;
+        .van-image {
+            display: block;
+        }
 
         .text1 {
             position: absolute;
-            top: 15px;
-            left: 15px;
+            top: 18px;
+            left: 19px;
             font-size: 12px;
             font-weight: bold;
             line-height: 10px;
             transform: scale(0.8);
         }
     }
+
+    .box-bg-img {
+        display: block;
+    }
 }
 </style>