手机端项目整体UI调整修改
This commit is contained in:
黎小北
+480
-98
@@ -1,70 +1,105 @@
|
||||
<template>
|
||||
<view class="user">
|
||||
<view class="card">
|
||||
<view class="uid">ID:{{ userInfo.username }}</view>
|
||||
<u--image
|
||||
class="logo"
|
||||
:showLoading="true"
|
||||
:src="loginLogo"
|
||||
width="50px"
|
||||
height="auto"
|
||||
mode="widthFix"
|
||||
></u--image>
|
||||
<view class="box">
|
||||
<view class="text">{{ $lang.userBalance }}</view>
|
||||
<view class="money">{{ money }}</view>
|
||||
<view class="hero">
|
||||
<view class="card">
|
||||
<view class="card-sheen"></view>
|
||||
<view class="card-orb"></view>
|
||||
<view class="card-grid"></view>
|
||||
<view class="card-head">
|
||||
<view class="uid">ID:{{ userInfo.username }}</view>
|
||||
<view class="logo-shell">
|
||||
<u--image
|
||||
class="logo"
|
||||
:showLoading="true"
|
||||
:src="loginLogo"
|
||||
width="42px"
|
||||
height="42px"
|
||||
mode="scaleToFill"
|
||||
></u--image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="text">{{ $lang.userBalance }}</view>
|
||||
<view class="money-row">
|
||||
<view class="money-icon"></view>
|
||||
<view class="money">{{ money }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u--image
|
||||
:showLoading="false"
|
||||
:src="require('static/images/card_bg.png')"
|
||||
width="100%"
|
||||
height="auto"
|
||||
mode="widthFix"
|
||||
></u--image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view
|
||||
class="cell"
|
||||
v-for="(item, index) in userMenu"
|
||||
:key="index"
|
||||
@click="goPath(item)"
|
||||
>
|
||||
<view class="lab">{{ item.name }}</view>
|
||||
<u-icon
|
||||
class="icon"
|
||||
name="arrow-right"
|
||||
color="#757272"
|
||||
size="16"
|
||||
></u-icon>
|
||||
<view class="section-title">{{ $lang.tip }}</view>
|
||||
<view class="menu-panel">
|
||||
<view
|
||||
class="cell"
|
||||
v-for="(item, index) in userMenu"
|
||||
:key="index"
|
||||
@click="goPath(item)"
|
||||
>
|
||||
<view class="cell-left">
|
||||
<view class="cell-dot"></view>
|
||||
<view class="lab">{{ item.name }}</view>
|
||||
</view>
|
||||
<u-icon
|
||||
class="icon"
|
||||
name="arrow-right"
|
||||
color="#b9aa84"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="logout" @tap="modalShow = true">{{ $lang.logout }}</view>
|
||||
</view>
|
||||
<u-picker
|
||||
:title="$lang.languageSettings"
|
||||
closeOnClickOverlay
|
||||
:defaultIndex="defaultIndex"
|
||||
<u-popup
|
||||
:show="show"
|
||||
:columns="langList"
|
||||
:cancelText="$lang.cancel"
|
||||
:confirmText="$lang.confirm"
|
||||
keyName="name"
|
||||
@close="show = false"
|
||||
@cancel="show = false"
|
||||
@confirm="confirm"
|
||||
></u-picker>
|
||||
<u-modal
|
||||
:show="modalShow"
|
||||
:title="$lang.tip"
|
||||
:confirmText="$lang.confirm"
|
||||
:cancelText="$lang.cancel"
|
||||
@confirm="confirmLogout"
|
||||
@cancel="modalShow = false"
|
||||
:showCancelButton="true"
|
||||
ref="uModal"
|
||||
:asyncClose="true"
|
||||
mode="bottom"
|
||||
round="20"
|
||||
closeOnClickOverlay
|
||||
@close="closeLangPopup"
|
||||
>
|
||||
<view style="text-align: center">{{ $lang.logoutTip }}</view>
|
||||
</u-modal>
|
||||
<view class="lang-popup">
|
||||
<view class="popup-header">
|
||||
<view class="popup-action cancel" @click="closeLangPopup">{{
|
||||
$lang.cancel
|
||||
}}</view>
|
||||
<view class="popup-title">{{ $lang.languageSettings }}</view>
|
||||
<view class="popup-action confirm" @click="confirmLanguageSelection">{{
|
||||
$lang.confirm
|
||||
}}</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="popup-list">
|
||||
<view
|
||||
class="popup-item"
|
||||
:class="{ active: tempLanguageKey === item.key }"
|
||||
v-for="item in langList[0]"
|
||||
:key="item.key"
|
||||
@click="tempLanguageKey = item.key"
|
||||
>
|
||||
<text>{{ item.name }}</text>
|
||||
<u-icon
|
||||
v-if="tempLanguageKey === item.key"
|
||||
name="checkmark"
|
||||
color="#231705"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup :show="modalShow" mode="center" round="20" @close="closeLogoutModal">
|
||||
<view class="logout-modal">
|
||||
<view class="logout-title">{{ $lang.tip }}</view>
|
||||
<view class="logout-text">{{ $lang.logoutTip }}</view>
|
||||
<view class="logout-actions">
|
||||
<view class="logout-btn logout-btn-cancel" @click="closeLogoutModal">{{
|
||||
$lang.cancel
|
||||
}}</view>
|
||||
<view class="logout-btn logout-btn-confirm" @click="confirmLogout">{{
|
||||
$lang.confirm
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<view class="mb60"></view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -78,6 +113,7 @@ export default {
|
||||
modalShow: false,
|
||||
|
||||
defaultIndex: [0],
|
||||
tempLanguageKey: "cn",
|
||||
langList: [
|
||||
[
|
||||
{ key: "en", name: "English" },
|
||||
@@ -121,6 +157,7 @@ export default {
|
||||
this.defaultIndex = [i];
|
||||
}
|
||||
});
|
||||
this.tempLanguageKey = this.language;
|
||||
this.getUserMoneyData()
|
||||
},
|
||||
methods: {
|
||||
@@ -128,8 +165,22 @@ export default {
|
||||
this.$store.commit("app/updateLanguage", item.value[0].key);
|
||||
this.show = false;
|
||||
},
|
||||
closeLangPopup() {
|
||||
this.tempLanguageKey = this.language;
|
||||
this.show = false;
|
||||
},
|
||||
confirmLanguageSelection() {
|
||||
if (this.tempLanguageKey) {
|
||||
this.$store.commit("app/updateLanguage", this.tempLanguageKey);
|
||||
}
|
||||
this.show = false;
|
||||
},
|
||||
closeLogoutModal() {
|
||||
this.modalShow = false;
|
||||
},
|
||||
goPath(item) {
|
||||
if (item.id == 0) {
|
||||
this.tempLanguageKey = this.language;
|
||||
this.show = true;
|
||||
} else if (item.id == 4 || item.id == 5 || item.id == 6) {
|
||||
uni.switchTab({
|
||||
@@ -149,6 +200,7 @@ export default {
|
||||
}
|
||||
},
|
||||
confirmLogout() {
|
||||
this.modalShow = false;
|
||||
localStorage.removeItem("userInfo");
|
||||
localStorage.removeItem("uni_id_token");
|
||||
sessionStorage.clear();
|
||||
@@ -183,83 +235,413 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user {
|
||||
background: #0b1520;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
|
||||
color: #f7ecd0;
|
||||
|
||||
.hero {
|
||||
padding: 14px 12px 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 28px;
|
||||
min-height: 188px;
|
||||
border: 1px solid rgba(226, 193, 117, 0.22);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
|
||||
inset 0 1px 0 rgba(255, 245, 223, 0.08);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#f1d488 0%,
|
||||
#ddaf4e 42%,
|
||||
#c78f28 100%
|
||||
);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.2) 0%,
|
||||
rgba(255, 255, 255, 0.04) 26%,
|
||||
rgba(133, 88, 16, 0.08) 60%,
|
||||
rgba(78, 50, 8, 0.18) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-sheen {
|
||||
position: absolute;
|
||||
top: -22px;
|
||||
right: -36px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 247, 218, 0.34) 0%,
|
||||
rgba(255, 247, 218, 0.06) 46%,
|
||||
rgba(255, 247, 218, 0) 74%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-orb {
|
||||
position: absolute;
|
||||
left: -34px;
|
||||
bottom: -48px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(169, 107, 20, 0.24) 0%,
|
||||
rgba(169, 107, 20, 0.08) 45%,
|
||||
rgba(169, 107, 20, 0) 76%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 241, 204, 0.14) 12%,
|
||||
transparent 12%,
|
||||
transparent 50%,
|
||||
rgba(160, 107, 22, 0.08) 50%,
|
||||
rgba(160, 107, 22, 0.08) 62%,
|
||||
transparent 62%
|
||||
),
|
||||
linear-gradient(
|
||||
28deg,
|
||||
rgba(255, 247, 228, 0.08) 14%,
|
||||
transparent 14%,
|
||||
transparent 56%,
|
||||
rgba(149, 98, 21, 0.08) 56%,
|
||||
rgba(149, 98, 21, 0.08) 70%,
|
||||
transparent 70%
|
||||
);
|
||||
background-size: 180px 180px, 220px 220px;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uid {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 25px;
|
||||
z-index: 3;
|
||||
font-size: 14px;
|
||||
color: #573d14;
|
||||
max-width: calc(100% - 82px);
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(84, 64, 25, 0.38);
|
||||
border: 1px solid rgba(113, 82, 24, 0.12);
|
||||
color: rgba(92, 61, 12, 0.92);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.logo-shell {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 247, 224, 0.12);
|
||||
border: 1px solid rgba(115, 81, 18, 0.1);
|
||||
backdrop-filter: blur(2px);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 20px;
|
||||
z-index: 3;
|
||||
opacity: 0.96;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
top: 55%;
|
||||
z-index: 3;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #573d14;
|
||||
width: calc(100% - 52px);
|
||||
text-align: center;
|
||||
.money {
|
||||
padding-left: 38px;
|
||||
padding-right: 36px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 4px;
|
||||
color: #5d4312;
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.money-row {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 10px auto 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.money-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
background: url("/static/images/balance_icon.png") no-repeat;
|
||||
background-size: 33px auto;
|
||||
background-position: left top;
|
||||
background-size: 28px auto;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.money {
|
||||
padding: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 20px 15px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin: 18px 12px 0;
|
||||
|
||||
.section-title {
|
||||
margin: 0 2px 12px;
|
||||
font-size: 13px;
|
||||
color: #a9956d;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.menu-panel {
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 13, 11, 0.96) 0%,
|
||||
rgba(10, 8, 7, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18),
|
||||
inset 0 1px 0 rgba(255, 245, 223, 0.03);
|
||||
}
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
padding: 15px 10px;
|
||||
color: #deb366;
|
||||
border-bottom: 1px solid #594522;
|
||||
background: #151617;
|
||||
min-height: 58px;
|
||||
padding: 0 16px;
|
||||
color: #e1c483;
|
||||
border-bottom: 1px solid rgba(223, 189, 120, 0.08);
|
||||
background: rgba(19, 17, 15, 0.82);
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cell-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cell-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
box-shadow: 0 0 0 4px rgba(223, 189, 120, 0.06);
|
||||
}
|
||||
|
||||
.lab {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #e0c283;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
background: #e5b932;
|
||||
font-weight: 600;
|
||||
margin: 20px auto;
|
||||
border-radius: 5px;
|
||||
font-size: 15px;
|
||||
color: #231705;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
margin: 18px auto 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.36);
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
opacity: 0.86;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lang-popup {
|
||||
background: linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
|
||||
border-top: 1px solid rgba(223, 189, 120, 0.14);
|
||||
border-radius: 20px 20px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 54px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid rgba(223, 189, 120, 0.1);
|
||||
background: rgba(21, 18, 15, 0.96);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #f4dfae;
|
||||
}
|
||||
|
||||
.popup-action {
|
||||
min-width: 52px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
|
||||
&.cancel {
|
||||
color: #a9956d;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
color: #dfbd78;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-list {
|
||||
max-height: 50vh;
|
||||
padding: 10px 12px calc(18px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.popup-item {
|
||||
min-height: 48px;
|
||||
padding: 0 14px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #d9c6a0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(25, 21, 18, 0.96) 0%,
|
||||
rgba(17, 14, 12, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #231705;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
border-color: rgba(242, 223, 182, 0.45);
|
||||
box-shadow: 0 10px 20px rgba(125, 84, 22, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
.logout-modal {
|
||||
width: 620rpx;
|
||||
padding: 34rpx 34rpx 28rpx;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(20, 16, 12, 0.98) 0%,
|
||||
rgba(11, 9, 7, 0.98) 100%
|
||||
);
|
||||
border: 1rpx solid rgba(223, 189, 120, 0.18);
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.logout-title {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #f4dfae;
|
||||
}
|
||||
|
||||
.logout-text {
|
||||
margin-top: 18rpx;
|
||||
color: #d9c6a0;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.7;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logout-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
flex: 1;
|
||||
height: 78rpx;
|
||||
border-radius: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
|
||||
&.logout-btn-cancel {
|
||||
color: #d9c6a0;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1rpx solid rgba(223, 189, 120, 0.12);
|
||||
}
|
||||
|
||||
&.logout-btn-confirm {
|
||||
color: #231705;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
box-shadow: 0 10rpx 20rpx rgba(125, 84, 22, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user