<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>
