|
|
@@ -4,12 +4,13 @@
|
|
|
<div class="user-top">
|
|
|
<img class="userInfo-bg" src="../assets/userBg.png" alt="" />
|
|
|
<div class="userInfo" v-if="user" @click="goSetting">
|
|
|
- <van-image width="60" height="60" radius="4" :src="user.avatar"></van-image>
|
|
|
- <span class="name">
|
|
|
- <div>{{ user.nickname }}</div>
|
|
|
- <div class="id">ID: {{ user.id }}</div>
|
|
|
- </span>
|
|
|
- <img src="../assets/icon_bianji.png" class="icon" alt="" />
|
|
|
+ <van-image width="60" height="60" radius="60" :src="user.avatar"></van-image>
|
|
|
+
|
|
|
+ <div class="name">
|
|
|
+ <span>{{ user.nickname }}</span>
|
|
|
+ <img src="../assets/icon_bianji.png" class="icon" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="id">ID: {{ user.id }}</div>
|
|
|
</div>
|
|
|
<div class="userInfo" v-else @click="goLogin">
|
|
|
<van-image width="60" height="60" radius="4" :src="defaultAvatar"></van-image>
|
|
|
@@ -27,7 +28,7 @@
|
|
|
<span>{{ balanceText }}</span>
|
|
|
</div>
|
|
|
|
|
|
- <div class="wallet-title">{{ $t('user.wallet') }}</div>
|
|
|
+ <!-- <div class="wallet-title">{{ $t('user.wallet') }}</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -37,7 +38,7 @@
|
|
|
<div class="card-top">
|
|
|
<span class="text1">{{ $t('order.my') }}</span>
|
|
|
<span class="text2" @click="$router.push({ name: 'order' })">{{ $t('order.status.ALL') }}</span>
|
|
|
- <img src="../assets/icon_inter.png" alt="" />
|
|
|
+ <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
</div>
|
|
|
<van-grid class="card-content" :border="false" :column-num="4">
|
|
|
<van-grid-item
|
|
|
@@ -91,55 +92,45 @@
|
|
|
</div> -->
|
|
|
</div>
|
|
|
|
|
|
- <div class="order-card">
|
|
|
- <div class="card-left">
|
|
|
- <div class="card-top">
|
|
|
- <span class="text1">{{ $t('mine.common') }}</span>
|
|
|
- </div>
|
|
|
- <van-grid class="card-content" :border="false" :column-num="4">
|
|
|
- <van-grid-item
|
|
|
- :text="$t('distribution.myProfit')"
|
|
|
- @click="$router.push({ name: 'distribution' })"
|
|
|
- >
|
|
|
- <template #icon>
|
|
|
- <img class="grid-icon" src="../assets/svgs/info_icon_shoyi.svg" alt="" />
|
|
|
- </template>
|
|
|
- </van-grid-item>
|
|
|
+ <!-- <van-cell-group class="menu" :border="false" >
|
|
|
+ <van-cell :text="$t('distribution.myProfit')" @click="$router.push({ name: 'distribution' })">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_shoyi.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
|
|
|
- <van-grid-item :text="$t('mine.bankCard')">
|
|
|
- <template #icon>
|
|
|
- <img class="grid-icon" src="../assets/svgs/info_icon_ka.svg" alt="" />
|
|
|
- </template>
|
|
|
- </van-grid-item>
|
|
|
+ <van-cell :text="$t('mine.bankCard')">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_ka.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
|
|
|
- <van-grid-item :text="$t('mine.address')" @click="wait">
|
|
|
- <template #icon>
|
|
|
- <img class="grid-icon" src="../assets/svgs/info_icon_dizhi.svg" alt="" />
|
|
|
- </template>
|
|
|
- </van-grid-item>
|
|
|
+ <van-cell :text="$t('mine.address')" @click="wait">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_dizhi.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
|
|
|
- <van-grid-item :text="$t('mine.setting')" @click="$router.push({ name: 'setting' })">
|
|
|
- <template #icon>
|
|
|
- <img class="grid-icon" src="../assets/svgs/info_icon_shezhi.svg" alt="" />
|
|
|
- </template>
|
|
|
- </van-grid-item>
|
|
|
+ <van-cell :text="$t('mine.setting')" @click="$router.push({ name: 'setting' })">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_shezhi.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
|
|
|
- <van-grid-item :text="$t('common.eula')">
|
|
|
- <template #icon>
|
|
|
- <img class="grid-icon" src="../assets/svgs/info_icon_pingtaixieyi.svg" alt="" />
|
|
|
- </template>
|
|
|
- </van-grid-item>
|
|
|
+ <van-cell :text="$t('common.eula')">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_pingtaixieyi.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
|
|
|
- <van-grid-item :text="$t('common.guide')">
|
|
|
- <template #icon>
|
|
|
- <img class="grid-icon" src="../assets/svgs/info_icon_liucheng.svg" alt="" />
|
|
|
- </template>
|
|
|
- </van-grid-item>
|
|
|
- </van-grid>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <van-cell :text="$t('common.guide')">
|
|
|
+ <template #icon>
|
|
|
+ <img class="grid-icon" src="../assets/svgs/info_icon_liucheng.svg" alt="" />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group> -->
|
|
|
|
|
|
- <!-- <van-cell-group class="menu" :border="false">
|
|
|
+ <van-cell-group class="menu" :border="false">
|
|
|
<van-cell
|
|
|
:title="$t('distribution.myProfit')"
|
|
|
:value="$t('mine.newProfit')"
|
|
|
@@ -147,42 +138,46 @@
|
|
|
:to="{ name: 'distribution' }"
|
|
|
>
|
|
|
<template #icon>
|
|
|
- <img class="menu-icon" src="../assets/info_icon_shoyi.png" alt="" />
|
|
|
- </template>
|
|
|
- <template #right-icon>
|
|
|
- <img src="../assets/icon_inter.png" alt="" class="right-icon" />
|
|
|
+ <img class="menu-icon" src="../assets/svgs/info_icon_shoyi.svg" alt="" />
|
|
|
</template>
|
|
|
+ <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>
|
|
|
<template #icon>
|
|
|
- <img class="menu-icon" src="../assets/info_icon_ka.png" alt="" />
|
|
|
+ <img class="menu-icon" src="../assets/svgs/info_icon_ka.svg" alt="" />
|
|
|
</template>
|
|
|
- <template #right-icon>
|
|
|
- <img src="../assets/icon_inter.png" alt="" class="right-icon" />
|
|
|
+ <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">
|
|
|
+ <template #icon>
|
|
|
+ <img class="menu-icon" src="../assets/svgs/info_icon_dizhi.svg" alt="" />
|
|
|
</template>
|
|
|
+ <template #right-icon> <ion-icon class="right-icon" :icon="intoIcon"></ion-icon> </template>
|
|
|
</van-cell>
|
|
|
- </van-cell-group>
|
|
|
|
|
|
- <van-cell-group class="menu" :border="false">
|
|
|
- <van-cell :title="$t('mine.address')" is-link @click="wait">
|
|
|
+ <van-cell :title="$t('mine.setting')" is-link :to="{ name: 'setting' }">
|
|
|
<template #icon>
|
|
|
- <img class="menu-icon" src="../assets/info_icon_dizhi.png" alt="" />
|
|
|
+ <img class="menu-icon" src="../assets/svgs/info_icon_shezhi.svg" alt="" />
|
|
|
</template>
|
|
|
- <template #right-icon>
|
|
|
- <img src="../assets/icon_inter.png" alt="" class="right-icon" />
|
|
|
+ <template #right-icon> <ion-icon class="right-icon" :icon="intoIcon"></ion-icon> </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell :title="$t('common.eula')" is-link>
|
|
|
+ <template #icon>
|
|
|
+ <img class="menu-icon" src="../assets/svgs/info_icon_pingtaixieyi.svg" 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('common.guide')" is-link>
|
|
|
<template #icon>
|
|
|
- <img class="menu-icon" src="../assets/info_icon_shezhi.png" alt="" />
|
|
|
+ <img class="menu-icon" src="../assets/svgs/info_icon_liucheng.svg" alt="" />
|
|
|
</template>
|
|
|
<template #right-icon>
|
|
|
- <img src="../assets/icon_inter.png" alt="" class="right-icon" />
|
|
|
+ <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
- </van-cell-group> -->
|
|
|
+ </van-cell-group>
|
|
|
</ion-content>
|
|
|
</ion-page>
|
|
|
</template>
|
|
|
@@ -195,6 +190,7 @@ import defaultAvatar from '@/assets/png_moren.png'
|
|
|
import { ref, watch } from 'vue'
|
|
|
import { http } from '@/plugins/http'
|
|
|
import { onIonViewWillEnter } from '@ionic/vue'
|
|
|
+import intoIcon from '@/assets/svgs/icon_inter.svg'
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
const user = computed(() => {
|
|
|
@@ -246,15 +242,18 @@ const balanceText = computed(() => {
|
|
|
|
|
|
.user-top {
|
|
|
position: relative;
|
|
|
- z-index: 2;
|
|
|
.wallet {
|
|
|
- position: absolute;
|
|
|
- left: 16px;
|
|
|
- right: 16px;
|
|
|
- bottom: -8px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ width: 335px;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 52px;
|
|
|
.wallet-bg {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
|
|
|
.wallet-card {
|
|
|
@@ -263,17 +262,21 @@ const balanceText = computed(() => {
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
right: 0;
|
|
|
- padding: 10px 14px;
|
|
|
+ padding: 20px 36px 10px 36px;
|
|
|
+ height: 52px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .f();
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
.text1 {
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
line-height: 17px;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.text2 {
|
|
|
.f();
|
|
|
- align-items: flex-end;
|
|
|
margin-top: 4px;
|
|
|
|
|
|
span {
|
|
|
@@ -281,15 +284,15 @@ const balanceText = computed(() => {
|
|
|
font-size: 14px;
|
|
|
font-family: Roboto-Bold, Roboto;
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
|
|
|
&:nth-child(2) {
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 16px;
|
|
|
font-family: Roboto-Bold, Roboto;
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
+ color: #333333;
|
|
|
line-height: 20px;
|
|
|
margin-left: 2px;
|
|
|
}
|
|
|
@@ -313,75 +316,97 @@ const balanceText = computed(() => {
|
|
|
}
|
|
|
}
|
|
|
.userInfo-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
z-index: 0;
|
|
|
}
|
|
|
.userInfo {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
+ position: relative;
|
|
|
z-index: 1;
|
|
|
- padding: 46px 16px 30px;
|
|
|
- .f();
|
|
|
+ padding: 46px 16px 7px;
|
|
|
+ .f-col();
|
|
|
+ align-items: center;
|
|
|
+ .van-image {
|
|
|
+ background: linear-gradient(#dfffcd 0%, #91fac5 48%, #39f3bb 100%);
|
|
|
+ padding: 1px;
|
|
|
+ :deep(img) {
|
|
|
+ border-radius: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.icon {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-left: 4px;
|
|
|
}
|
|
|
|
|
|
.name {
|
|
|
- @text-color: #ffffff;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
- color: @text-color;
|
|
|
+ color: #42f4bc;
|
|
|
line-height: 28px;
|
|
|
flex-grow: 1;
|
|
|
- margin: 0 12px;
|
|
|
- .id {
|
|
|
- font-size: 13px;
|
|
|
- color: fade(@text-color, 50);
|
|
|
- }
|
|
|
+ margin: 12px 13px 0;
|
|
|
+ .f();
|
|
|
+ }
|
|
|
+
|
|
|
+ .id {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #cccccc;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.order-card {
|
|
|
- background: var(--ion-color-step-50);
|
|
|
+ position: relative;
|
|
|
border-radius: 4px;
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
- margin: 16px 16px;
|
|
|
+ margin: 0 16px 16px;
|
|
|
+ z-index: 4;
|
|
|
+ background: linear-gradient(#dfffcd 0%, #91fac5 48%, #39f3bb 100%);
|
|
|
+ padding: 1px;
|
|
|
+ border-radius: 8px;
|
|
|
.f();
|
|
|
.card-left {
|
|
|
width: 100%;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ background: #2c302f;
|
|
|
+ border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
.card-top {
|
|
|
.f();
|
|
|
padding: 12px 14px 0;
|
|
|
.text1 {
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
- color: var(--ion-color-light-contrast);
|
|
|
+ color: #42f4bc;
|
|
|
line-height: 24px;
|
|
|
flex-grow: 1;
|
|
|
}
|
|
|
.text2 {
|
|
|
font-size: 12px;
|
|
|
- color: var(--ion-color-step-350);
|
|
|
+ color: #9fbfb1;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
|
|
|
- img {
|
|
|
+ .right-icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
+ color: #9fbfb1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.card-content {
|
|
|
+ margin: 0 15px 0;
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
- --van-grid-item-content-background: var(--ion-color-step-50);
|
|
|
+ --van-grid-item-content-background: #3d403f;
|
|
|
+ --van-grid-item-content-padding: 24px 5px;
|
|
|
+ margin-top: 12px;
|
|
|
}
|
|
|
|
|
|
.grid-icon {
|
|
|
@@ -391,7 +416,7 @@ const balanceText = computed(() => {
|
|
|
}
|
|
|
|
|
|
:deep(.van-grid) {
|
|
|
- --van-grid-item-text-color: var(--ion-color-step-350);
|
|
|
+ --van-grid-item-text-color: #9fbfb1;
|
|
|
--van-grid-item-content-padding: 16px 8px;
|
|
|
|
|
|
.van-grid-item__text {
|
|
|
@@ -428,10 +453,17 @@ const balanceText = computed(() => {
|
|
|
|
|
|
:deep(.menu) {
|
|
|
--van-cell-line-height: 28px;
|
|
|
- --van-cell-text-color: var(--ion-color-light-contrast);
|
|
|
+ --van-cell-text-color: #9fbfb1;
|
|
|
+ --van-cell-value-color: #668577;
|
|
|
--van-cell-font-size: 14px;
|
|
|
- --van-cell-vertical-padding: 16px;
|
|
|
- --van-cell-horizontal-padding: 30px;
|
|
|
+ --van-cell-vertical-padding: 9px;
|
|
|
+ --van-cell-horizontal-padding: 15px;
|
|
|
+ --van-cell-background: #2c302f;
|
|
|
+ --van-cell-group-background: #2c302f;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: 0 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 12px 0;
|
|
|
|
|
|
.menu-icon {
|
|
|
width: 28px;
|
|
|
@@ -451,6 +483,7 @@ const balanceText = computed(() => {
|
|
|
.right-icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
+ color: #9fbfb1;
|
|
|
}
|
|
|
.menu + .menu {
|
|
|
border-top: 10px solid var(--ion-background-color);
|
