125 行
3.1 KiB
Vue
125 行
3.1 KiB
Vue
<script>
|
||
export default {
|
||
onLaunch: function () {
|
||
console.log('App Launch: 电竞陪玩小程序初始化');
|
||
},
|
||
onShow: function () {
|
||
console.log('App Show');
|
||
},
|
||
onHide: function () {
|
||
console.log('App Hide');
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* 全局暗黑电竞基础重置 (严格符合 UI/UX Pro Max 规范) */
|
||
page {
|
||
background-color: #0A0F1D;
|
||
color: #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 rgba(99, 102, 241, 0.25) !important;
|
||
border-radius: 40rpx !important;
|
||
overflow: hidden !important;
|
||
position: relative !important;
|
||
background-color: #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: #151D30 !important;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||
}
|
||
/* #endif */
|
||
</style>
|