smt/App.vue

<script>
export default {
	onLaunch: function() {
		console.log('App Launch')
	},
	onShow: function() {
		console.log('App Show')
	},
	onHide: function() {
		console.log('App Hide')
	}
}
</script>

<style>
:root {
	--color-bg: #0D1F17;
	--color-bg-card: #1A3325;
	--color-bg-card-light: #243D2E;
	--color-primary: #4ADE80;
	--color-primary-dark: #22C55E;
	--color-text: #FFFFFF;
	--color-text-secondary: #9CA3AF;
	--color-text-muted: #6B7280;
	--color-border: #374151;
	--color-success: #4ADE80;
	--color-warning: #FBBF24;
	--color-danger: #EF4444;
}

page {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 28rpx;
	line-height: 1.5;
}

.container {
	padding: 32rpx;
	min-height: 100vh;
	box-sizing: border-box;
}

.card {
	background-color: var(--color-bg-card);
	border-radius: 24rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
}

.card-light {
	background-color: var(--color-bg-card-light);
}

.text-primary {
	color: var(--color-primary);
}

.text-secondary {
	color: var(--color-text-secondary);
}

.text-muted {
	color: var(--color-text-muted);
}

.text-center {
	text-align: center;
}

.text-bold {
	font-weight: 600;
}

.flex {
	display: flex;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-1 {
	flex: 1;
}

.gap-sm {
	gap: 16rpx;
}

.gap-md {
	gap: 24rpx;
}

.gap-lg {
	gap: 32rpx;
}

.mt-sm {
	margin-top: 16rpx;
}

.mt-md {
	margin-top: 24rpx;
}

.mt-lg {
	margin-top: 32rpx;
}

.mb-sm {
	margin-bottom: 16rpx;
}

.mb-md {
	margin-bottom: 24rpx;
}

.mb-lg {
	margin-bottom: 32rpx;
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96rpx;
	border-radius: 48rpx;
	font-size: 32rpx;
	font-weight: 500;
}

.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-bg);
}

.btn-secondary {
	background-color: var(--color-bg-card);
	color: var(--color-text);
	border: 2rpx solid var(--color-border);
}

.btn-outline {
	background-color: transparent;
	color: var(--color-primary);
	border: 2rpx solid var(--color-primary);
}

.safe-area-bottom {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
</style>