169 行
4.6 KiB
Vue
169 行
4.6 KiB
Vue
<script>
|
||
import { getCurrentThemeKey } from './common/theme.js';
|
||
|
||
export default {
|
||
onLaunch: function () {
|
||
const currentTheme = getCurrentThemeKey();
|
||
console.log('App Launch: 电竞陪玩小程序初始化, 当前主题:', currentTheme);
|
||
},
|
||
onShow: function () {
|
||
console.log('App Show');
|
||
},
|
||
onHide: function () {
|
||
console.log('App Hide');
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* 双主题 Design Tokens (CSS Variables 全局动态驱动) */
|
||
:root, page {
|
||
--bg-primary: #0A0F1D;
|
||
--bg-surface: #151D30;
|
||
--bg-surface-elevated: #1E2942;
|
||
--bg-surface-glass: rgba(21, 29, 48, 0.85);
|
||
--color-brand: #6366F1;
|
||
--color-brand-light: #818CF8;
|
||
--color-brand-gold: #F59E0B;
|
||
--color-brand-glow: rgba(99, 102, 241, 0.35);
|
||
--color-brand-gradient: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||
--border-subtle: #1E293B;
|
||
--border-focus: #4F46E5;
|
||
--text-primary: #F8FAFC;
|
||
--text-secondary: #94A3B8;
|
||
--text-muted: #64748B;
|
||
--shadow-brand: 0 8rpx 24rpx rgba(99, 102, 241, 0.35);
|
||
}
|
||
|
||
/* 暖阳赤焰暖色系主题 (Sunset Amber & Warm Ember) */
|
||
page.theme-warm, .theme-warm {
|
||
--bg-primary: #140E0A;
|
||
--bg-surface: #221711;
|
||
--bg-surface-elevated: #2E1F17;
|
||
--bg-surface-glass: rgba(34, 23, 17, 0.85);
|
||
--color-brand: #F97316;
|
||
--color-brand-light: #FB923C;
|
||
--color-brand-gold: #F59E0B;
|
||
--color-brand-glow: rgba(249, 115, 22, 0.35);
|
||
--color-brand-gradient: linear-gradient(135deg, #F97316, #F59E0B);
|
||
--border-subtle: #342217;
|
||
--border-focus: #EA580C;
|
||
--text-primary: #FFF7ED;
|
||
--text-secondary: #C7B5A7;
|
||
--text-muted: #8C7565;
|
||
--shadow-brand: 0 8rpx 24rpx rgba(249, 115, 22, 0.35);
|
||
|
||
background-color: #140E0A;
|
||
color: #FFF7ED;
|
||
}
|
||
|
||
/* 全局暗黑电竞基础重置 (严格符合 UI/UX Pro Max 规范) */
|
||
page {
|
||
background-color: var(--bg-primary, #0A0F1D);
|
||
color: var(--text-primary, #F8FAFC);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', sans-serif;
|
||
box-sizing: border-box;
|
||
-webkit-font-smoothing: antialiased;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
view, text, image, input, button {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 触控交互微反馈：80-120ms 弹性缩放，无布局位移 (CLS < 0.1) */
|
||
.btn-active:active, .card-active:active {
|
||
transform: scale(0.975);
|
||
opacity: 0.88;
|
||
transition: transform 100ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 100ms ease-out;
|
||
}
|
||
|
||
/* 纯数字等宽排版 (避免金额、核销码、倒计时跳动) */
|
||
.tabular-num {
|
||
font-variant-numeric: tabular-nums;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
/* 隐藏移动端原生滚动条 */
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|
||
|
||
/* 移动端与 H5 响应式体验优化 */
|
||
/* #ifdef H5 */
|
||
html, body {
|
||
background-color: #0A0F1D;
|
||
margin: 0;
|
||
padding: 0;
|
||
-webkit-tap-highlight-color: transparent;
|
||
touch-action: manipulation;
|
||
}
|
||
|
||
/* 在 PC 宽屏上以 iPhone 15 Pro 仿真机壳居中展示，兼顾专业质感 */
|
||
@media screen and (min-width: 481px) {
|
||
html, body {
|
||
background-color: #050811 !important;
|
||
}
|
||
|
||
uni-app {
|
||
max-width: 450px !important;
|
||
margin: 20px auto !important;
|
||
min-height: calc(100vh - 40px) !important;
|
||
box-shadow: 0 0 80rpx rgba(0, 0, 0, 0.95), 0 0 0 2rpx var(--color-brand-glow, rgba(99, 102, 241, 0.25)) !important;
|
||
border-radius: 40rpx !important;
|
||
overflow: hidden !important;
|
||
position: relative !important;
|
||
background-color: var(--bg-primary, #0A0F1D) !important;
|
||
}
|
||
|
||
uni-page-head {
|
||
max-width: 450px !important;
|
||
left: 0 !important;
|
||
right: 0 !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
uni-tabbar, .uni-tabbar {
|
||
position: fixed !important;
|
||
bottom: 20px !important;
|
||
left: 0 !important;
|
||
right: 0 !important;
|
||
margin: 0 auto !important;
|
||
max-width: 450px !important;
|
||
width: 100% !important;
|
||
z-index: 9999 !important;
|
||
border-bottom-left-radius: 40rpx !important;
|
||
border-bottom-right-radius: 40rpx !important;
|
||
overflow: hidden !important;
|
||
}
|
||
}
|
||
|
||
/* 在手机移动浏览器上 100% 原生沉浸贴合，适配动态视口与底部安全区 */
|
||
@media screen and (max-width: 480px) {
|
||
uni-app {
|
||
width: 100% !important;
|
||
min-height: 100vh !important;
|
||
min-height: 100dvh !important;
|
||
}
|
||
|
||
uni-tabbar, .uni-tabbar {
|
||
position: fixed !important;
|
||
bottom: 0 !important;
|
||
left: 0 !important;
|
||
right: 0 !important;
|
||
width: 100% !important;
|
||
z-index: 9999 !important;
|
||
padding-bottom: env(safe-area-inset-bottom) !important;
|
||
}
|
||
}
|
||
|
||
uni-tabbar .uni-tabbar__bd {
|
||
background-color: var(--bg-surface, #151D30) !important;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||
}
|
||
/* #endif */
|
||
</style>
|