排名

src/components/creator/RankInfo.vue

@@ -5,9 +5,12 @@
             <span v-else>{{ index + 1 }}</span>
         </div>
         <div class="content">
-            <van-image round width="28" height="28" :src="info.avatar" />
+            <van-image round width="42" height="42" :src="info.avatar" />
             <div class="name van-ellipsis">{{ info.nickname }}</div>
         </div>
+        <van-button :class="{ follow: info.follow }" @click="follow" type="primary" round size="mini" plain>
+            {{ info.follow ? '已关注' : '关注' }}
+        </van-button>
     </div>
 </template>
 
@@ -33,6 +36,29 @@ export default {
                 require('@assets/info_icon_no3-2.png')
             ]
         };
+    },
+    methods: {
+        follow() {
+            this.checkLogin().then(() => {
+                if (!this.info.follow) {
+                    this.$http.get(`/user/${this.info.id}/follow`).then(res => {
+                        this.$emit('update:info', {
+                            ...this.info,
+                            follow: true
+                        });
+                        this.$toast.success('关注成功');
+                    });
+                } else {
+                    this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
+                        this.$emit('update:info', {
+                            ...this.info,
+                            follow: false
+                        });
+                        this.$toast.success('取消关注');
+                    });
+                }
+            });
+        }
     }
 };
 </script>
@@ -40,25 +66,25 @@ export default {
 <style lang="less" scoped>
 .rank {
     .flex();
-    padding: 8px 16px;
+    padding: 12px 12px;
     overflow: hidden;
-    background: var(--rankBg);
+    position: relative;
 
     .rank-icon {
-        width: 42px;
-        height: 42px;
+        width: 38px;
+        height: 38px;
         flex-shrink: 0;
         .flex();
         justify-content: center;
         img {
-            width: 42px;
-            height: 42px;
+            width: 38px;
+            height: 38px;
         }
         span {
             font-size: 20px;
             font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
             font-weight: bold;
-            color: #939599;
+            color: var(--text0);
             line-height: 20px;
         }
     }
@@ -67,7 +93,7 @@ export default {
         .flex();
         overflow: hidden;
         flex-grow: 1;
-        margin-left: 30px;
+        margin-left: 14px;
         .van-image {
             flex-shrink: 0;
         }
@@ -77,45 +103,30 @@ export default {
             line-height: 24px;
             margin-left: 10px;
             color: var(--text0);
+            font-weight: bold;
         }
     }
 
-    &.rank0 {
-        background: var(--rankBg0);
-        // border: 1px solid #ffdca2;
-        .content {
-            .name {
-                color: var(--rankText0);
-                font-weight: bold;
-            }
-            .van-image {
-                border: 1px solid var(--rankBorder0);
-            }
-        }
-    }
+    .van-button {
+        border: 1px solid var(--prim);
+        --van-button-primary-background-color: var(--prim);
+        --van-button-mini-font-size: 12px;
+        min-width: 60px;
 
-    &.rank1 {
-        background: var(--rankBg1);
-        .content {
-            .name {
-                font-weight: bold;
-            }
-            .van-image {
-                border: 1px solid var(--rankBorder1);
-            }
+        &.follow {
+            border-color: var(--btnBorderInfo);
+            --van-button-primary-background-color: var(--btnInfo);
         }
     }
-    &.rank2 {
-        background: var(--rankBg2);
-        .content {
-            .name {
-                color: var(--rankText2);
-                font-weight: bold;
-            }
-            .van-image {
-                border: 1px solid var(--rankBorder2);
-            }
-        }
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 16px;
+        right: 16px;
+        bottom: 0;
+        height: 1px;
+        background-color: var(--border);
     }
 }
 </style>

src/styles/theme.less

@@ -13,14 +13,17 @@
     --rankBorder2: #e7926c;
     --rankText0: #f5791d;
     --rankText2: #e48154;
-    --saleBg:#f5f7fa;
+    --saleBg: #f5f7fa;
     --text0: #000;
-    --text1:rgba(0, 0, 0, 0.2);
+    --text1: rgba(0, 0, 0, 0.2);
+    --prim: #3ab200;
+    --btnInfo:#939599;
+    --btnBorderInfo:#C8C9CC;
 }
 
 .darkTheme {
-    --bg: #272b2e;
-    --bg2: #373b3e;
+    --bg: #000000;
+    --bg2: #1c1c1e;
     --border: #ffffff10;
     --btnplaintBg: #373b3e;
     --btnplaintBorder: #43ce00;
@@ -28,12 +31,15 @@
     --rankBg0: rgba(0, 0, 0, 0.1);
     --rankBg1: rgba(0, 0, 0, 0.1);
     --rankBg2: rgba(0, 0, 0, 0.1);
-    --rankBorder0: #FF9815;
+    --rankBorder0: #ff9815;
     --rankBorder1: #929292;
-    --rankBorder2: #E4AF98;
-    --rankText0: #FF9815;
-    --rankText2: #E4AF98;
-    --saleBg:rgba(255,255,255,0.1);
+    --rankBorder2: #e4af98;
+    --rankText0: #ff9815;
+    --rankText2: #e4af98;
+    --saleBg: rgba(255, 255, 255, 0.1);
     --text0: #fff;
-    --text1:rgba(255, 255, 255, 0.2);
+    --text1: rgba(255, 255, 255, 0.2);
+    --prim: #43ce00;
+    --btnInfo:#939599;
+    --btnBorderInfo:#ffffff10;
 }

src/views/Home.vue

@@ -36,9 +36,17 @@
                 </swiper-slide>
             </swiper>
             <van-grid :column-num="3" :border="false" class="top-grid">
-                <van-grid-item :icon="require('@assets/icon2.png')" text="绿洲电竞链" />
-                <van-grid-item :icon="require('@assets/icon2.png')" text="元宇宙农业" />
-                <van-grid-item :icon="require('@assets/icon2.png')" text="OASISMETA" />
+                <van-grid-item
+                    url="https://yags.raex.vip/h5/home"
+                    :icon="require('@assets/icon2.png')"
+                    text="绿洲电竞链"
+                />
+                <van-grid-item @click="wait" :icon="require('@assets/icon2.png')" text="元宇宙农业" />
+                <van-grid-item
+                    url="https://www.raex.vip/static/download_raex_space.html"
+                    :icon="require('@assets/icon2.png')"
+                    text="OASISMETA"
+                />
             </van-grid>
             <img src="@assets/topbg1.png" class="swiper-bg" alt="" />
         </div>
@@ -95,7 +103,7 @@
                         free-mode
                     >
                         <swiper-slide v-for="(item, index) in hotUsers" :key="index">
-                            <rank-info :index="index" :info="item"></rank-info>
+                            <rank-info :index="index" v-model:info="hotUsers[index]"></rank-info>
                         </swiper-slide>
                     </swiper>
                     <div class="rank-more" :style="{ visibility: hideMore ? 'hidden' : 'visible' }">
@@ -786,12 +794,9 @@ export default {
 }
 
 .rankSwiper {
-    height: 338px;
+    height: 320px;
     .swiper-slide {
-        height: 58px;
-    }
-    .swiper-slide + .swiper-slide {
-        margin-top: 12px;
+        height: 65px;
     }
     // overflow: auto;
 }

src/views/Index.vue

@@ -104,6 +104,7 @@ export default {
 
 .index {
     background-color: @bg3;
+    --van-tabbar-item-text-color: #939599;
     .flex-col();
     padding-top: 0 !important;
 }
@@ -113,9 +114,10 @@ export default {
         border: 1px solid @bg3;
     }
     &.bgBack {
-        background-color: #222426;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(30px);
         &::after {
-            border: 1px solid #222426;
+            border: 1px solid rgba(0, 0, 0, 0.5);
         }
     }
 }