176 lines
3.6 KiB
Vue
176 lines
3.6 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" global>
|
|
/*每个页面公共css */
|
|
@import '@/static/iconfont/iconfont.css';
|
|
|
|
/* ===== 全局系统字体栈 ===== */
|
|
/* iPhone: PingFang SC */
|
|
/* 华为鸿蒙: HarmonyOS Sans */
|
|
/* 小米: MiSans */
|
|
/* OPPO/vivo/realme: 系统默认黑体 */
|
|
/* 其他安卓: Source Han Sans CN / Roboto */
|
|
page, view, text, input, textarea, button {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans', 'MiSans',
|
|
'Source Han Sans CN', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* 顶部状态栏占位（自动适配刘海高度） */
|
|
.status-bar {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
background: linear-gradient(180deg, #fafbff 0%, #f5f6fa 100%);
|
|
}
|
|
|
|
.page-container {
|
|
width: 100%;
|
|
height: calc(100vh - var(--status-bar-height));
|
|
background: linear-gradient(180deg, #f0f2ff 0%, #f5f6fa 40%, #fafbfc 100%);
|
|
}
|
|
|
|
.solid-line {
|
|
width: 100%;
|
|
height: 1rpx;
|
|
background: linear-gradient(90deg, transparent, #d4d4f0, transparent);
|
|
}
|
|
|
|
.icon-btn {
|
|
padding: 12rpx;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all 0.2s ease;
|
|
&:active {
|
|
background: rgba(170, 170, 255, 0.12);
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
.text-btn {
|
|
padding: 12rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all 0.2s ease;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
&:active {
|
|
opacity: 0.8;
|
|
transform: scale(0.97);
|
|
}
|
|
}
|
|
|
|
.switch-box {
|
|
width: 48px;
|
|
height: 26px;
|
|
background-color: #d4d4d8;
|
|
border-radius: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 2px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.switch-box.active {
|
|
justify-content: flex-end;
|
|
background: linear-gradient(135deg, #aaaaff, #3b86ff);
|
|
box-shadow: 0 0 12rpx rgba(170, 170, 255, 0.4);
|
|
}
|
|
|
|
.switch-track {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-color: #ffffff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.popup-overlay {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(30, 30, 50, 0.35);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
z-index: 1000;
|
|
animation: fadeIn 0.25s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(40rpx) scale(0.96); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.popup-card {
|
|
width: 90%;
|
|
height: auto;
|
|
background-color: #ffffff;
|
|
border-radius: 40rpx;
|
|
padding: 48rpx 40rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.08);
|
|
animation: slideUp 0.3s ease;
|
|
}
|
|
|
|
.close-popup-card {
|
|
position: absolute;
|
|
top: 16rpx;
|
|
right: 16rpx;
|
|
color: #ff4d4f;
|
|
padding: 10rpx;
|
|
box-sizing: border-box;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
transition: all 0.2s ease;
|
|
&:active {
|
|
background: rgba(255, 77, 79, 0.1);
|
|
}
|
|
}
|
|
|
|
.popup-title {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: #1a1a2e;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
</style>
|