liqupan/webUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化界面样式

Browse Source
This commit is contained in:
qupan li
2025-11-09 16:34:06 +08:00
parent 71ffa0a816
commit 19aa7a1f8f
7 changed files with 561 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
src/pages/mine/mine.vue
View File

@@ -1,28 +1,34 @@
<template>
<view class="container">
<!-- 头部以上背景区域 -->
<view class="top-background"></view>
<!-- 夜空装饰背景 -->
<view class="night-sky-decoration">
<view class="star star-1"></view>
<view class="star star-2"></view>
<view class="star star-3"></view>
<view class="star star-4"></view>
<view class="star star-5"></view>
<view class="star star-6"></view>
<view class="star star-7"></view>
<view class="star star-8"></view>
</view>
<!-- 顶部自定义导航栏 -->
<view class="custom-navbar fixed-navbar">
<text class="navbar-title">我的</text>
<view class="custom-navbar fixed-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="navbar-content">
<view class="navbar-stars">
<view class="navbar-star star-left"></view>
<view class="navbar-star star-right"></view>
</view>
<text class="navbar-title">我的</text>
</view>
</view>
<!-- 可滚动内容区域 -->
<scroll-view
class="scroll-container"
scroll-y="true"
enable-back-to-top="false"
refresher-enabled="false"
:refresher-triggered="false"
:refresher-threshold="0"
<scroll-view
class="scroll-container"
:style="{ marginTop: navBarHeight + 'px' }"
scroll-y="true"
:show-scrollbar="false"
:scroll-with-animation="false"
:bounces="false"
:always-bounce-vertical="false"
:scroll-top="0"
:upper-threshold="0"
:lower-threshold="0"
>
<!-- 用户信息区域 -->
<view class="user-info">
@@ -122,6 +128,10 @@ const openid = ref('');
const avatarUrl = ref('/static/default-avatar.png');
const userBalance = ref(0.00);
// 状态栏高度适配
const statusBarHeight = ref(0);
const navBarHeight = ref(0);
// 登录按钮文本
const loginButtonText = computed(() => {
return '微信一键登录';
@@ -161,8 +171,19 @@ const initUserInfo = () => {
}
};
// 获取系统状态栏高度
const getSystemInfo = () => {
const systemInfo = uni.getSystemInfoSync();
statusBarHeight.value = systemInfo.statusBarHeight || 0;
// 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
navBarHeight.value = statusBarHeight.value + 44;
console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
};
// 页面加载时初始化
onMounted(() => {
// 获取系统信息
getSystemInfo();
// 初始化用户store
userStore.init();
// 初始化本地状态
@@ -483,92 +504,171 @@ const goToHistory = () => {
};
</script>
<style scoped>
.fixed-navbar {
position: fixed;
top: 100rpx;
left: 0;
width: 100vw;
z-index: 100;
}
<style lang="scss" scoped>
.container {
background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
min-height: 100vh;
padding-top: 200rpx;
background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
padding-bottom: 120rpx;
}
/* 滚动容器样式 */
.scroll-container {
height: calc(100vh - 200rpx);
z-index: 2;
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
overflow: hidden;
}
/* 头部以上背景区域 */
.top-background {
/* 夜空装饰 */
.night-sky-decoration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.star {
position: absolute;
width: 6rpx;
height: 6rpx;
background: #f9e076;
border-radius: 50%;
animation: twinkle 2s infinite;
box-shadow: 0 0 10rpx #f9e076;
}
@keyframes twinkle {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.star-1 { top: 10%; left: 15%; animation-delay: 0s; }
.star-2 { top: 20%; left: 80%; animation-delay: 0.3s; }
.star-3 { top: 30%; left: 45%; animation-delay: 0.6s; }
.star-4 { top: 50%; left: 25%; animation-delay: 0.9s; }
.star-5 { top: 60%; left: 70%; animation-delay: 1.2s; }
.star-6 { top: 70%; left: 40%; animation-delay: 1.5s; }
.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
/* 自定义导航栏 */
.custom-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(26, 11, 46, 0.95);
backdrop-filter: blur(20rpx);
border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
z-index: 1000;
}
.fixed-navbar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100rpx;
background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
z-index: 99;
z-index: 1000;
}
.custom-navbar {
height: 100rpx;
.navbar-content {
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
backdrop-filter: blur(10px);
border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
font-weight: bold;
font-size: 38rpx;
letter-spacing: 2rpx;
padding: 0 30rpx;
position: relative;
}
.navbar-stars {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.navbar-star {
position: absolute;
width: 8rpx;
height: 8rpx;
background: #f9e076;
border-radius: 50%;
box-shadow: 0 0 15rpx #f9e076;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.star-left {
top: 50%;
left: 30rpx;
transform: translateY(-50%);
}
.star-right {
top: 50%;
right: 30rpx;
transform: translateY(-50%);
}
.navbar-title {
color: #ffffff;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
color: #f9e076;
font-weight: bold;
font-size: 36rpx;
text-shadow: 0 0 20rpx rgba(249, 224, 118, 0.5);
z-index: 1;
}
/* 滚动容器样式 */
.scroll-container {
flex: 1;
min-height: 0;
z-index: 1;
position: relative;
box-sizing: border-box;
}
/* 用户信息区域 */
.user-info {
display: flex;
align-items: center;
padding: 32rpx;
background: rgba(255, 255, 255, 0.1);
padding: 24rpx 28rpx;
margin: 20rpx 30rpx;
background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
border: 2rpx solid rgba(249, 224, 118, 0.2);
border-radius: 25rpx;
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
/* 余额区域 */
.balance-section {
padding: 0 24rpx 24rpx;
padding: 0 30rpx 20rpx;
}
.balance-card {
background: linear-gradient(135deg, #8a2be2 0%, #6b2c9c 100%);
border-radius: 20rpx;
padding: 30rpx;
background: linear-gradient(135deg, rgba(249, 224, 118, 0.15) 0%, rgba(249, 224, 118, 0.08) 100%);
border: 2rpx solid rgba(249, 224, 118, 0.2);
border-radius: 25rpx;
padding: 24rpx 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.3);
color: #f9e076;
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.balance-info .balance-label {
font-size: 28rpx;
opacity: 0.9;
margin-bottom: 8rpx;
font-size: 24rpx;
color: rgba(249, 224, 118, 0.8);
margin-bottom: 6rpx;
}
.balance-info .balance-amount {
font-size: 48rpx;
font-size: 40rpx;
font-weight: bold;
color: #f9e076;
}
.balance-actions {
@@ -578,87 +678,110 @@ const goToHistory = () => {
.balance-actions .recharge-btn,
.balance-actions .history-btn {
background: rgba(255, 255, 255, 0.2);
color: #fff;
border: 1rpx solid rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
color: #1a0b2e;
border: none;
border-radius: 30rpx;
padding: 16rpx 24rpx;
font-size: 26rpx;
min-width: 100rpx;
padding: 12rpx 20rpx;
font-size: 24rpx;
font-weight: bold;
min-width: 90rpx;
box-shadow: 0 8rpx 20rpx rgba(249, 224, 118, 0.3);
transition: all 0.3s;
}
.balance-actions .recharge-btn {
background: rgba(255, 255, 255, 0.3);
.balance-actions .recharge-btn:active,
.balance-actions .history-btn:active {
transform: scale(0.95);
box-shadow: 0 4rpx 10rpx rgba(249, 224, 118, 0.3);
}
.avatar {
width: 140rpx;
height: 140rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: #e0e0e0;
background-color: rgba(249, 224, 118, 0.2);
border: 2rpx solid rgba(249, 224, 118, 0.3);
}
.user-details {
margin-left: 30rpx;
margin-left: 24rpx;
display: flex;
flex-direction: column;
}
.login-text {
font-size: 40rpx;
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
margin-bottom: 8rpx;
color: #f9e076;
}
.user-id {
font-size: 28rpx;
color: #999;
margin-bottom: 20rpx;
font-size: 24rpx;
color: rgba(249, 224, 118, 0.6);
margin-bottom: 16rpx;
}
.login-btn {
margin-top: 20rpx;
background-color: #07c160;
color: #fff;
font-size: 28rpx;
border-radius: 40rpx;
width: 240rpx;
height: 70rpx;
line-height: 70rpx;
margin-top: 12rpx;
background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
color: #1a0b2e;
font-size: 24rpx;
font-weight: bold;
border-radius: 30rpx;
width: 200rpx;
height: 56rpx;
line-height: 56rpx;
padding: 0;
border: none;
box-shadow: 0 8rpx 20rpx rgba(249, 224, 118, 0.3);
transition: all 0.3s;
}
.login-btn:active {
transform: scale(0.95);
box-shadow: 0 4rpx 10rpx rgba(249, 224, 118, 0.3);
}
/* 菜单卡片 */
.menu-cards {
padding: 0 24rpx;
padding: 0 30rpx;
}
.menu-card {
display: flex;
align-items: center;
padding: 40rpx 30rpx;
background: rgba(255, 255, 255, 0.9);
border: 2rpx solid rgba(138, 43, 226, 0.3);
border-radius: 20rpx;
margin-bottom: 24rpx;
box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
backdrop-filter: blur(8px);
padding: 28rpx 24rpx;
background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
border: 2rpx solid rgba(249, 224, 118, 0.2);
border-radius: 25rpx;
margin-bottom: 20rpx;
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
transition: all 0.3s;
}
.menu-card:active {
transform: translateY(-4rpx);
box-shadow: 0 15rpx 50rpx rgba(249, 224, 118, 0.2);
border-color: rgba(249, 224, 118, 0.4);
}
.card-icon {
font-size: 48rpx;
color: #8a2be2;
margin-right: 24rpx;
filter: drop-shadow(0 2rpx 4rpx rgba(138, 43, 226, 0.3));
font-size: 40rpx;
margin-right: 20rpx;
filter: drop-shadow(0 2rpx 4rpx rgba(249, 224, 118, 0.3));
}
.card-title {
font-size: 32rpx;
font-size: 28rpx;
font-weight: 500;
color: #f9e076;
}
/* 区块样式 */
.section-block {
background: rgba(255, 255, 255, 0.9);
border: 2rpx solid rgba(138, 43, 226, 0.3);
border-radius: 20rpx;
margin: 24rpx;
padding: 30rpx;
margin-bottom: 24rpx;
box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
backdrop-filter: blur(8px);
background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
border: 2rpx solid rgba(249, 224, 118, 0.2);
border-radius: 25rpx;
margin: 0 30rpx 20rpx;
padding: 24rpx 28rpx;
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.section-header {
display: flex;
@@ -666,27 +789,37 @@ const goToHistory = () => {
align-items: center;
}
.section-title {
font-size: 32rpx;
font-size: 28rpx;
font-weight: bold;
color: #f9e076;
}
.view-all {
font-size: 28rpx;
color: #999;
font-size: 24rpx;
color: rgba(249, 224, 118, 0.6);
}
/* 退出登录按钮 */
.logout-section {
padding: 40rpx 24rpx;
padding: 40rpx 30rpx;
}
.logout-btn {
width: 100%;
background: rgba(255, 255, 255, 0.9);
color: #8a2be2;
height: 80rpx;
line-height: 80rpx;
background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
color: #f9e076;
font-size: 30rpx;
border: 2rpx solid rgba(138, 43, 226, 0.3);
border-radius: 20rpx;
box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.2);
backdrop-filter: blur(8px);
font-weight: bold;
border: 2rpx solid rgba(249, 224, 118, 0.2);
border-radius: 40rpx;
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
transition: all 0.3s;
}
.logout-btn:active {
transform: scale(0.95);
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
}
/* 底部留白 */