color

src/styles/common.less

@@ -9,7 +9,7 @@
 }
 
 .gt() {
-    background: linear-gradient(135deg, #d700ff 0%, #3e22ff 100%);
+    background: linear-gradient(90deg, #dfffcd 0%, #90f9c4 48%, #39f3bb 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

src/styles/main.less

@@ -1,17 +1,26 @@
 :root {
     --van-primary-color: #2d2d2d;
     --van-tabbar-item-icon-margin-bottom: 2px;
-    --van-dialog-confirm-button-text-color: #a108ff;
+    --van-dialog-confirm-button-text-color: #42f4bc;
     --van-button-default-color: #aaacad;
     --van-gray-6: #c8c9cc;
-    --yellow: #FFF43E;
+    --yellow: #fff43e;
     --red: #ff0000;
-    --green: #1AFF47;
+    --green: #1aff47;
     --van-empty-padding: 100px 10px;
     --van-empty-image-size: 200px;
     --van-empty-description-font-size: 14px;
     --van-empty-description-color: #737373;
     --van-empty-description-margin-top: 16px;
+    --van-cell-line-height: 28px;
+    --van-cell-text-color: #9fbfb1;
+    --van-cell-value-color: #668577;
+    --van-cell-font-size: 14px;
+    --van-cell-vertical-padding: 9px;
+    --van-cell-horizontal-padding: 15px;
+    --van-cell-background: #2c302f;
+    --van-cell-group-background: #2c302f;
+    --van-cell-active-color: shade(#2c302f, 10%);
 }
 .van-theme-dark .van-empty {
     opacity: 1;
@@ -43,12 +52,12 @@ ion-toast.error-toast {
 
 ion-toolbar {
     --border-style: none;
-    --background: var(--ion-color-step-0);
+    --background: #161616;
     ion-back-button {
-        --color: var(--ion-color-step-900);
+        --color: #ffffff;
     }
     ion-button {
-        --color: var(--ion-color-step-900);
+        --color: #ffffff;
     }
 }
 ion-refresher {
@@ -73,8 +82,9 @@ ion-modal.dialog {
     color: var(--ion-color-step-400) !important;
 }
 .van-button--primary {
-    background: linear-gradient(135deg, #d700ff 0%, #3e22ff 100%);
-    border-width: 0;
+    background: linear-gradient(90deg, #dfffcd 0%, #91fac5 48%, #39f3bb 100%);
+    color: #000000;
+    border: none;
 }
 .van-button--plain {
     background: transparent;
@@ -84,7 +94,7 @@ ion-modal.dialog {
     --van-button-normal-font-size: 14px;
 }
 .gt {
-    background: linear-gradient(135deg, #d700ff 0%, #3e22ff 100%);
+    background: linear-gradient(90deg, #dfffcd 0%, #90f9c4 48%, #39f3bb 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

src/styles/theme/variables.less

@@ -3,265 +3,97 @@ http://ionicframework.com/docs/theming/ */
 
 /** Ionic CSS Variables **/
 :root {
-    --ion-background-color: #f5f7fa;
-    --ion-background-color-rgb: 245, 247, 250;
-    --ion-login-icon: #689dff;
-
-    --ion-text-color: #000000;
-    --ion-text-color-rgb: 0, 0, 0;
-
-    --ion-color-step-0: #ffffff;
-    --ion-color-step-50: #f5f7fa;
-    --ion-color-step-100: #e6e6e6;
-    --ion-color-step-150: #d9d9d9;
-    --ion-color-step-200: #cccccc;
-    --ion-color-step-250: #bfbfbf;
-    --ion-color-step-300: #b3b3b3;
-    --ion-color-step-350: #a6a6a6;
-    --ion-color-step-400: #999999;
-    --ion-color-step-450: #8c8c8c;
-    --ion-color-step-500: #808080;
-    --ion-color-step-550: #737373;
-    --ion-color-step-600: #666666;
-    --ion-color-step-650: #595959;
-    --ion-color-step-700: #4d4d4d;
-    --ion-color-step-750: #404040;
-    --ion-color-step-800: #333333;
-    --ion-color-step-850: #262626;
-    --ion-color-step-900: #191919;
-    --ion-color-step-950: #0d0d0d;
-
-    /** primary **/
-    --ion-color-primary: #4078de;
-    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-background-color: #1C1C1C;
+    --ion-background-color-rgb: 18, 19, 37;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-color-step-0: #1C1C1C;
+    --ion-color-step-50: #1e1f30;
+    --ion-color-step-100: #2a2b3b;
+    --ion-color-step-150: #363646;
+    --ion-color-step-200: #414251;
+    --ion-color-step-250: #4d4e5c;
+    --ion-color-step-300: #595a66;
+    --ion-color-step-350: #60616d;
+    --ion-color-step-400: #71717c;
+    --ion-color-step-450: #7d7d87;
+    --ion-color-step-500: #898992;
+    --ion-color-step-550: #94959d;
+    --ion-color-step-600: #a0a1a8;
+    --ion-color-step-650: #acacb3;
+    --ion-color-step-700: #b8b8be;
+    --ion-color-step-750: #c4c4c9;
+    --ion-color-step-800: #d4d4d4;
+    --ion-color-step-850: #dbdcde;
+    --ion-color-step-900: #e7e7e9;
+    --ion-color-step-950: #f3f3f4;
+
+    --ion-item-background: #1C1C1C;
+
+    --ion-card-background: #1C1C1C;
+
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66, 140, 255;
     --ion-color-primary-contrast: #ffffff;
     --ion-color-primary-contrast-rgb: 255, 255, 255;
-    --ion-color-primary-shade: #3171e0;
-    --ion-color-primary-tint: #4c8dff;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
 
-    /** secondary **/
-    --ion-color-secondary: #3dc2ff;
-    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80, 200, 255;
     --ion-color-secondary-contrast: #ffffff;
     --ion-color-secondary-contrast-rgb: 255, 255, 255;
-    --ion-color-secondary-shade: #36abe0;
-    --ion-color-secondary-tint: #50c8ff;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
 
-    /** tertiary **/
-    --ion-color-tertiary: #5260ff;
-    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106, 100, 255;
     --ion-color-tertiary-contrast: #ffffff;
     --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-    --ion-color-tertiary-shade: #4854e0;
-    --ion-color-tertiary-tint: #6370ff;
-
-    /** success **/
-    --ion-color-success: #2dd36f;
-    --ion-color-success-rgb: 45, 211, 111;
-    --ion-color-success-contrast: #ffffff;
-    --ion-color-success-contrast-rgb: 255, 255, 255;
-    --ion-color-success-shade: #28ba62;
-    --ion-color-success-tint: #42d77d;
-
-    /** warning **/
-    --ion-color-warning: #ffc409;
-    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47, 223, 117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255, 213, 52;
     --ion-color-warning-contrast: #000000;
     --ion-color-warning-contrast-rgb: 0, 0, 0;
-    --ion-color-warning-shade: #e0ac08;
-    --ion-color-warning-tint: #ffca22;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
 
-    /** danger **/
-    --ion-color-danger: #eb445a;
-    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255, 73, 97;
     --ion-color-danger-contrast: #ffffff;
     --ion-color-danger-contrast-rgb: 255, 255, 255;
-    --ion-color-danger-shade: #cf3c4f;
-    --ion-color-danger-tint: #ed576b;
-
-    /** dark **/
-    --ion-color-dark: #222428;
-    --ion-color-dark-rgb: 34, 36, 40;
-    --ion-color-dark-contrast: #ffffff;
-    --ion-color-dark-contrast-rgb: 255, 255, 255;
-    --ion-color-dark-shade: #1e2023;
-    --ion-color-dark-tint: #383a3e;
-
-    /** medium **/
-    --ion-color-medium: #92949c;
-    --ion-color-medium-rgb: 146, 148, 156;
-    --ion-color-medium-contrast: #ffffff;
-    --ion-color-medium-contrast-rgb: 255, 255, 255;
-    --ion-color-medium-shade: #808289;
-    --ion-color-medium-tint: #9d9fa6;
-
-    /** light **/
-    --ion-color-light: #f4f5f8;
-    --ion-color-light-rgb: 244, 245, 248;
-    --ion-color-light-contrast: #000000;
-    --ion-color-light-contrast-rgb: 0, 0, 0;
-    --ion-color-light-shade: #d7d8da;
-    --ion-color-light-tint: #f5f6f9;
-}
-
-/*
-* Dark Colors
-* -------------------------------------------
-*/
-//全部dark
-.dark {
-    body {
-        --ion-color-primary: #428cff;
-        --ion-color-primary-rgb: 66, 140, 255;
-        --ion-color-primary-contrast: #ffffff;
-        --ion-color-primary-contrast-rgb: 255, 255, 255;
-        --ion-color-primary-shade: #3a7be0;
-        --ion-color-primary-tint: #5598ff;
-
-        --ion-color-secondary: #50c8ff;
-        --ion-color-secondary-rgb: 80, 200, 255;
-        --ion-color-secondary-contrast: #ffffff;
-        --ion-color-secondary-contrast-rgb: 255, 255, 255;
-        --ion-color-secondary-shade: #46b0e0;
-        --ion-color-secondary-tint: #62ceff;
-
-        --ion-color-tertiary: #6a64ff;
-        --ion-color-tertiary-rgb: 106, 100, 255;
-        --ion-color-tertiary-contrast: #ffffff;
-        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-        --ion-color-tertiary-shade: #5d58e0;
-        --ion-color-tertiary-tint: #7974ff;
-
-        --ion-color-success: #2fdf75;
-        --ion-color-success-rgb: 47, 223, 117;
-        --ion-color-success-contrast: #000000;
-        --ion-color-success-contrast-rgb: 0, 0, 0;
-        --ion-color-success-shade: #29c467;
-        --ion-color-success-tint: #44e283;
-
-        --ion-color-warning: #ffd534;
-        --ion-color-warning-rgb: 255, 213, 52;
-        --ion-color-warning-contrast: #000000;
-        --ion-color-warning-contrast-rgb: 0, 0, 0;
-        --ion-color-warning-shade: #e0bb2e;
-        --ion-color-warning-tint: #ffd948;
-
-        --ion-color-danger: #ff4961;
-        --ion-color-danger-rgb: 255, 73, 97;
-        --ion-color-danger-contrast: #ffffff;
-        --ion-color-danger-contrast-rgb: 255, 255, 255;
-        --ion-color-danger-shade: #e04055;
-        --ion-color-danger-tint: #ff5b71;
-
-        --ion-color-dark: #f4f5f8;
-        --ion-color-dark-rgb: 244, 245, 248;
-        --ion-color-dark-contrast: #000000;
-        --ion-color-dark-contrast-rgb: 0, 0, 0;
-        --ion-color-dark-shade: #d7d8da;
-        --ion-color-dark-tint: #f5f6f9;
-
-        --ion-color-medium: #989aa2;
-        --ion-color-medium-rgb: 152, 154, 162;
-        --ion-color-medium-contrast: #000000;
-        --ion-color-medium-contrast-rgb: 0, 0, 0;
-        --ion-color-medium-shade: #86888f;
-        --ion-color-medium-tint: #a2a4ab;
-
-        --ion-color-light: #222428;
-        --ion-color-light-rgb: 34, 36, 40;
-        --ion-color-light-contrast: #ffffff;
-        --ion-color-light-contrast-rgb: 255, 255, 255;
-        --ion-color-light-shade: #1e2023;
-        --ion-color-light-tint: #383a3e;
-
-        --van-cell-background: var(--ion-color-step-50);
-    }
-
-    /*
-   * iOS Dark Theme
-   * -------------------------------------------
-   */
-
-    &.ios body {
-        --ion-background-color: #121325;
-        --ion-background-color-rgb: 18, 19, 37;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-color-step-0: #121325;
-        --ion-color-step-50: #1e1f30;
-        --ion-color-step-100: #2a2b3b;
-        --ion-color-step-150: #363646;
-        --ion-color-step-200: #414251;
-        --ion-color-step-250: #4d4e5c;
-        --ion-color-step-300: #595a66;
-        --ion-color-step-350: #60616d;
-        --ion-color-step-400: #71717c;
-        --ion-color-step-450: #7d7d87;
-        --ion-color-step-500: #898992;
-        --ion-color-step-550: #94959d;
-        --ion-color-step-600: #a0a1a8;
-        --ion-color-step-650: #acacb3;
-        --ion-color-step-700: #b8b8be;
-        --ion-color-step-750: #c4c4c9;
-        --ion-color-step-800: #d4d4d4;
-        --ion-color-step-850: #dbdcde;
-        --ion-color-step-900: #e7e7e9;
-        --ion-color-step-950: #f3f3f4;
-
-        --ion-item-background: #121325;
-
-        --ion-card-background: #121325;
-
-
-        --ion-login-icon: #fff;
-    }
-
-    &.ios ion-modal {
-        --ion-background-color: var(--ion-color-step-100);
-        --ion-toolbar-background: var(--ion-color-step-150);
-        --ion-toolbar-border-color: var(--ion-color-step-250);
-    }
-
-    /*
-   * Material Design Dark Theme
-   * -------------------------------------------
-   */
-
-    &.md body {
-        --ion-background-color: #121325;
-        --ion-background-color-rgb: 18, 19, 37;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-color-step-0: #000000;
-        --ion-color-step-50: #1e1f30;
-        --ion-color-step-100: #2a2b3b;
-        --ion-color-step-150: #363646;
-        --ion-color-step-200: #414251;
-        --ion-color-step-250: #4d4e5c;
-        --ion-color-step-300: #595a66;
-        --ion-color-step-350: #656671;
-        --ion-color-step-400: #71717c;
-        --ion-color-step-450: #7d7d87;
-        --ion-color-step-500: #898992;
-        --ion-color-step-550: #94959d;
-        --ion-color-step-600: #a0a1a8;
-        --ion-color-step-650: #acacb3;
-        --ion-color-step-700: #b8b8be;
-        --ion-color-step-750: #c4c4c9;
-        --ion-color-step-800: #d0d0d3;
-        --ion-color-step-850: #dbdcde;
-        --ion-color-step-900: #e7e7e9;
-        --ion-color-step-950: #f3f3f4;
-
-        --ion-item-background: #121325;
-
-        --ion-card-background: #121325;
-
-
-        --ion-login-icon: #fff;
-    }
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244, 245, 248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152, 154, 162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34, 36, 40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255, 255, 255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
 }

src/views/BLFPage.vue

@@ -50,6 +50,9 @@ const buy = () => {
 </script>
 
 <style lang="less" scoped>
+ion-content {
+    --background: no-repeat center/cover url('@/assets/home_bg.png');
+}
 .top-img {
     width: 100%;
     display: block;

src/views/DistributionPage.vue

@@ -8,7 +8,7 @@
                 <ion-title>{{ $t('title.distribution') }}</ion-title>
             </ion-toolbar>
         </ion-header>
-        <ion-content>
+        <ion-content fullscreen>
             <div class="head">
                 <!-- <div class="title">{{ $t('title.distribution') }}</div>
                 <div class="desc" v-if="superior">{{ $t('distribution.myInvitor') }}: {{ superior.nickname }}</div>
@@ -397,9 +397,7 @@ ion-content {
     .title {
         flex-grow: 1;
         font-size: 24px;
-        color: transparent;
-        background: linear-gradient(90deg, #dfffcd 0%, #90f9c4 48%, #39f3bb 100%);
-        -webkit-background-clip: text;
+        .gt();
         position: relative;
         .title-bg {
             width: 64px;

src/views/HomePage.vue

@@ -1,6 +1,6 @@
 <template>
     <ion-page>
-        <ion-content :fullscreen="true" class="home">
+        <ion-content fullscreen class="home">
             <!-- 轮播图模块 -->
             <div class="swiper-content">
                 <swiper
@@ -177,7 +177,8 @@ import 'swiper/swiper.min.css'
 import 'swiper/swiper-bundle.min.css'
 import SwiperCore, { Pagination, Autoplay, Parallax, Controller } from 'swiper'
 import { useRouter, useRoute } from 'vue-router'
-import { ref, getCurrentInstance, onMounted, watch } from 'vue'
+import { ref, watch } from 'vue'
+import { onIonViewWillEnter } from '@ionic/vue'
 
 import intoIcon from '@/assets/svgs/icon_inter.svg'
 
@@ -268,7 +269,7 @@ function goNews() {
     })
 }
 
-onMounted(() => {
+onIonViewWillEnter(() => {
     // toast.loading({
     //     message: '加载中...',
     //     forbidClick: true
@@ -346,6 +347,9 @@ function tutorial() {
 </script>
 
 <style lang="less" scoped>
+ion-content {
+    --background: no-repeat center/cover url('@/assets/home_bg.png');
+}
 .mySwiper {
     height: 65vw;
     :deep(.swiper-pagination-bullet) {
@@ -431,11 +435,10 @@ function tutorial() {
 }
 
 :deep(.van-cell) {
-    --van-cell-background: var(--ion-background-color);
+    --van-cell-background: transparent;
+    --van-cell-active-color: transparent;
     --van-cell-horizontal-padding: 20px;
-    --van-cell-text-color: var(--ion-color-step-800);
     --van-cell-value-color: #9fbfb1;
-    --van-cell-text-color: var(--ion-text-color) .f();
     .van-cell__title {
         font-size: 16px;
         font-family: TsangerYuMo;
@@ -446,9 +449,7 @@ function tutorial() {
             span {
                 position: relative;
                 z-index: 1;
-                color: transparent;
-                background: linear-gradient(90deg, #dfffcd 0%, #90f9c4 48%, #39f3bb 100%);
-                -webkit-background-clip: text;
+                .gt();
                 text-align: left;
             }
             .title-bg {

src/views/MinePage.vue

@@ -138,6 +138,7 @@
                     :value="$t('mine.newProfit')"
                     is-link
                     :to="{ name: 'distribution' }"
+                    :border="false"
                 >
                     <template #icon>
                         <img class="menu-icon" src="../assets/info_icon_shoyi.png" alt="" />
@@ -145,33 +146,33 @@
                     <template #right-icon> <ion-icon class="right-icon" :icon="intoIcon"></ion-icon> </template>
                 </van-cell>
 
-                <van-cell :title="$t('mine.bankCard')" :value="$t('mine.noBind')" is-link @click="wait">
+                <van-cell :title="$t('mine.bankCard')" :value="$t('mine.noBind')" is-link @click="wait" :border="false">
                     <template #icon>
                         <img class="menu-icon" src="../assets/info_icon_ka.png" alt="" />
                     </template>
                     <template #right-icon> <ion-icon class="right-icon" :icon="intoIcon"></ion-icon> </template>
                 </van-cell>
-                <van-cell :title="$t('mine.address')" is-link @click="wait">
+                <van-cell :title="$t('mine.address')" is-link @click="wait" :border="false">
                     <template #icon>
                         <img class="menu-icon" src="../assets/info_icon_dizhi.png" alt="" />
                     </template>
                     <template #right-icon> <ion-icon class="right-icon" :icon="intoIcon"></ion-icon> </template>
                 </van-cell>
 
-                <van-cell :title="$t('mine.setting')" is-link :to="{ name: 'setting' }">
+                <van-cell :title="$t('mine.setting')" is-link :to="{ name: 'setting' }" :border="false">
                     <template #icon>
                         <img class="menu-icon" src="../assets/info_icon_shezhi.png" alt="" />
                     </template>
                     <template #right-icon> <ion-icon class="right-icon" :icon="intoIcon"></ion-icon> </template>
                 </van-cell>
-                <van-cell :title="$t('common.eula')" :to="{ name: 'rule' }" is-link>
+                <van-cell :title="$t('common.eula')" :to="{ name: 'rule' }" is-link :border="false">
                     <template #icon>
                         <img class="menu-icon" src="../assets/info_icon_pingtaixieyi.png" alt="" />
                     </template>
                     <template #right-icon> <ion-icon class="right-icon" :icon="intoIcon"></ion-icon> </template>
                 </van-cell>
 
-                <van-cell :title="$t('common.guide')" :to="{ name: 'turtorial' }" is-link>
+                <van-cell :title="$t('common.guide')" :to="{ name: 'turtorial' }" is-link :border="false">
                     <template #icon>
                         <img class="menu-icon" src="../assets/info_icon_liucheng.png" alt="" />
                     </template>
@@ -238,6 +239,9 @@ const balanceText = computed(() => {
 </script>
 
 <style lang="less" scoped>
+ion-content {
+    --background: no-repeat center/cover url('@/assets/home_bg.png');
+}
 .mine {
     --ion-background-color: var(--ion-color-step-0);
 }
@@ -453,7 +457,7 @@ const balanceText = computed(() => {
     margin-top: 14px;
 }
 
-:deep(.menu) {
+.menu {
     --van-cell-line-height: 28px;
     --van-cell-text-color: #9fbfb1;
     --van-cell-value-color: #668577;
@@ -487,14 +491,4 @@ const balanceText = computed(() => {
     height: 24px;
     color: #9fbfb1;
 }
-.menu + .menu {
-    border-top: 10px solid var(--ion-background-color);
-}
-.dark .mine {
-    --van-cell-background: var(--ion-color-step-0);
-    --van-cell-active-color: var(--ion-color-step-50);
-    .menu + .menu {
-        border-top: 10px solid var(--ion-color-step-50);
-    }
-}
 </style>

src/views/SettingPage.vue

@@ -10,7 +10,7 @@
         </ion-header>
         <ion-content>
             <div class="setting">
-                <van-cell-group :border="false">
+                <van-cell-group inset>
                     <van-cell :title="$t('mine.avatar')" is-link>
                         <template #value>
                             <van-image
@@ -63,7 +63,7 @@
                         </template>
                     </van-cell>
                 </van-cell-group> -->
-                <van-cell-group :border="false">
+                <van-cell-group inset>
                     <van-cell :title="$t('mine.bindPhone')" class="not" :value="(user || {}).phone"> </van-cell>
                     <!-- <van-cell title="修改密码" is-link></van-cell> -->
                     <van-cell
@@ -92,9 +92,9 @@
                 />
 
                 <!-- <van-area title="选择地址" :area-list="areaList" :columns-num="2" /> -->
-                <van-button style="margin-top: 20px" type="primary" block @click="onLogout">{{
-                    $t('mine.logout')
-                }}</van-button>
+                <div style="padding: 16px">
+                    <van-button type="primary" block @click="onLogout">{{ $t('mine.logout') }}</van-button>
+                </div>
             </div>
         </ion-content>
     </ion-page>
@@ -248,7 +248,7 @@ export default {
 
 <style lang="less" scoped>
 .setting {
-    padding: 16px;
+    padding-top: 16px;
 }
 
 .van-cell-group {

src/views/TabsPage.vue

@@ -88,6 +88,7 @@ function goRank() {
 <style lang="less" scoped>
 ion-tab-bar {
     --border: none;
+    --background: rgba(28, 28, 28, 0.6);
 }
 ion-tab-button {
     --color: var(--ion-color-step-400);