/* index.wxss */ .container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 90vh; padding: 80rpx 40rpx 80rpx 40rpx; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* 页面标题 */ .title { font-size: 48rpx; font-weight: 600; color: white; text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); } /* 中间区域 */ .middle-section { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; flex: 0.8; gap: 40rpx; } /* 扫码按钮容器 */ .scan-button-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; flex: 0.5; gap: 30rpx; } /* 加速模式开关容器 */ .speed-mode-switch { display: flex; align-items: center; gap: 20rpx; padding: 20rpx; background: rgba(255, 255, 255, 0.9); border-radius: 50rpx; box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.1); } /* 开关标签 */ .switch-label { font-size: 28rpx; font-weight: 500; color: #667eea; } /* 开关样式 */ .speed-mode-switch switch { transform: scale(1.2); } /* 图片预览容器 */ .image-preview-container { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1.5; } /* 圆形扫码按钮 */ .scan-button { width: 240rpx; height: 240rpx; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; border: none; box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2); transition: all 0.3s ease; padding: 0; margin: 0; box-sizing: border-box; cursor: pointer; user-select: none; } .scan-button:hover { transform: translateY(-5rpx); box-shadow: 0 15rpx 50rpx rgba(0, 0, 0, 0.25); } .scan-button:active { transform: translateY(0) scale(0.95); box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2); } .scan-button-text { font-size: 36rpx; font-weight: 600; color: #667eea; } /* 认证按钮容器 */ .auth-button-container { width: 100%; max-width: 700rpx; } /* 长形用户认证按钮 */ .auth-button { width: 100%; height: 100rpx; border-radius: 50rpx; background: rgba(255, 255, 255, 0.9); border: 2rpx solid rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.15); transition: all 0.3s ease; } .auth-button:hover { background: white; transform: translateY(-3rpx); box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2); } .auth-button:active { transform: translateY(0) scale(0.98); box-shadow: 0 3rpx 15rpx rgba(0, 0, 0, 0.15); } .auth-button-text { font-size: 32rpx; font-weight: 500; color: #667eea; } /* 图片预览 */ .image-preview { width: 100%; max-width: 600rpx; background: rgba(255, 255, 255, 0.95); border-radius: 20rpx; padding: 30rpx; box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15); } .image-preview image { width: 100%; height: 300rpx; border-radius: 10rpx; object-fit: contain; }