rentease-app/App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			// 检查登录状态
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/* 全局CSS变量 - 蓝色主题 */
	:root {
		--primary: #2563EB;
		--primary-light: #3B82F6;
		--primary-dark: #1D4ED8;
		--primary-gradient: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
		--secondary: #60A5FA;
		--accent: #93C5FD;
		--background: #F8FAFC;
		--surface: #FFFFFF;
		--text-primary: #1E293B;
		--text-secondary: #64748B;
		--text-muted: #94A3B8;
		--border: #E2E8F0;
		--success: #10B981;
		--warning: #F59E0B;
		--error: #EF4444;
		--shadow: 0 4rpx 20rpx rgba(37, 99, 235, 0.1);
		--shadow-lg: 0 8rpx 40rpx rgba(37, 99, 235, 0.15);
		--radius-sm: 12rpx;
		--radius-md: 20rpx;
		--radius-lg: 32rpx;
	}

	/* 全局样式 */
	page {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		background-color: var(--background);
		color: var(--text-primary);
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	/* 防止内容溢出 - 只应用于布局元素，不应用于表单元素 */
	view, text, image, scroll-view, swiper, swiper-item {
		box-sizing: border-box;
	}

	/* 安全区域适配 */
	.safe-area-top {
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
	}

	.safe-area-bottom {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* 通用按钮样式 */
	.btn-primary {
		background: var(--primary-gradient);
		color: #FFFFFF;
		border-radius: var(--radius-md);
		padding: 28rpx 48rpx;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		border: none;
		box-shadow: var(--shadow);
		transition: all 0.3s ease;
	}

	.btn-primary:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 10rpx rgba(37, 99, 235, 0.2);
	}

	.btn-secondary {
		background: #FFFFFF;
		color: var(--primary);
		border-radius: var(--radius-md);
		padding: 28rpx 48rpx;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		border: 2rpx solid var(--primary);
	}

	.btn-secondary:active {
		background: rgba(37, 99, 235, 0.05);
	}

	/* 卡片样式 */
	.card {
		background: var(--surface);
		border-radius: var(--radius-md);
		padding: 32rpx;
		box-shadow: var(--shadow);
		margin-bottom: 24rpx;
	}

	/* 输入框样式 */
	.input-field {
		background: #F1F5F9;
		border-radius: var(--radius-md);
		padding: 28rpx 32rpx;
		font-size: 30rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s ease;
	}

	.input-field:focus {
		border-color: var(--primary);
		background: #FFFFFF;
	}

	/* 页面容器 */
	.page-container {
		min-height: 100vh;
		background: var(--background);
		padding: 32rpx;
		box-sizing: border-box;
	}

	/* 标题样式 */
	.page-title {
		font-size: 48rpx;
		font-weight: 700;
		color: var(--text-primary);
		margin-bottom: 16rpx;
	}

	.page-subtitle {
		font-size: 28rpx;
		color: var(--text-secondary);
		margin-bottom: 48rpx;
	}

	/* 文本工具类 */
	.text-primary { color: var(--primary); }
	.text-secondary { color: var(--text-secondary); }
	.text-muted { color: var(--text-muted); }
	.text-success { color: var(--success); }
	.text-warning { color: var(--warning); }
	.text-error { color: var(--error); }

	/* 渐变文字 */
	.gradient-text {
		background: var(--primary-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	/* 弹性布局工具类 */
	.flex { display: flex; }
	.flex-col { flex-direction: column; }
	.items-center { align-items: center; }
	.justify-center { justify-content: center; }
	.justify-between { justify-content: space-between; }
	.flex-1 { flex: 1; }

	/* 间距工具类 */
	.gap-8 { gap: 16rpx; }
	.gap-16 { gap: 32rpx; }
	.gap-24 { gap: 48rpx; }

	/* 动画 */
	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(20rpx); }
		to { opacity: 1; transform: translateY(0); }
	}

	.fade-in {
		animation: fadeIn 0.5s ease forwards;
	}

	/* 加载动画 */
	@keyframes pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.5; }
	}

	.loading-pulse {
		animation: pulse 1.5s ease-in-out infinite;
	}
</style>