/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); margin: 0; padding: 0; } .container { padding: 0; margin: 0; width: 100%; } .scrollarea { flex: 1; overflow-y: hidden; } /* 玻璃质感按钮样式 */ .btn { /* 基础样式重置 */ border: none; border-radius: 24rpx; font-size: 32rpx; font-weight: 600; padding: 28rpx 0; margin: 0 auto 24rpx; width: 80%; display: block; text-align: center; white-space: nowrap; line-height: 1.5; /* 玻璃质感效果 */ background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); /* 过渡效果 */ transition: all 0.3s ease; position: relative; overflow: hidden; } /* 买家按钮样式 */ .buyer-btn { color: #07c160; background: rgba(7, 193, 96, 0.15); } /* 卖家按钮样式 */ .seller-btn { color: #1677ff; background: rgba(22, 119, 255, 0.15); } /* 估价按钮样式 */ .evaluate-btn { color: #4CAF50; background: rgba(76, 175, 80, 0.15); } /* 立即入驻按钮样式 */ .settlement-btn { color: #2196F3; background: rgba(33, 150, 243, 0.15); } /* 按钮点击效果 */ .btn:active { transform: scale(0.98); box-shadow: 0 4rpx 16rpx rgba(31, 38, 135, 0.1), 0 2rpx 8rpx rgba(0, 0, 0, 0.05), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5), inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.05); } /* 按钮悬浮光晕效果 */ .btn::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: rotate(45deg); animation: shine 3s infinite; opacity: 0; } @keyframes shine { 0% { transform: translateX(-100%) rotate(45deg); opacity: 0; } 50% { opacity: 0.2; } 100% { transform: translateX(100%) rotate(45deg); opacity: 0; } } .btn:active::after { animation: none; } /* 弹窗样式 */ .auth-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1002; } .auth-modal-container { background-color: #fff; border-radius: 20rpx; width: 80%; max-width: 500rpx; padding: 40rpx; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15); } .auth-modal-title { font-size: 36rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 30rpx; } .auth-modal-content { font-size: 32rpx; line-height: 1.5; color: #666; text-align: center; margin-bottom: 40rpx; } .auth-modal-buttons { display: flex; flex-direction: column; gap: 20rpx; } .auth-primary-button { background-color: #1677ff; color: #fff; font-size: 32rpx; line-height: 1.5; border-radius: 8rpx; padding: 20rpx 0; } .auth-cancel-button { background-color: #f5f5f5; color: #666; font-size: 32rpx; line-height: 1.5; border-radius: 8rpx; padding: 20rpx 0; } .primary-button { background-color: #1677ff; color: white; width: 100%; border-radius: 8rpx; margin-bottom: 20rpx; border: none; } .cancel-button { background: none; color: #666; border: none; } /* 头像选择样式 */ .avatar-section { text-align: center; margin-bottom: 40rpx; } .avatar-wrapper { padding: 0; background: none; border: none; } .avatar { width: 160rpx; height: 160rpx; border-radius: 50%; } /* 表单样式 */ .form-group { margin-bottom: 30rpx; } .form-label { font-size: 28rpx; margin-bottom: 10rpx; display: block; } .form-input { border: 1rpx solid #eee; border-radius: 8rpx; padding: 20rpx; width: 100%; max-width: 100%; box-sizing: border-box; font-size: 28rpx; } .form-actions { text-align: center; margin-top: 40rpx; } .confirm-button { background-color: #07c160; color: white; width: 100%; border-radius: 8rpx; border: none; } /* 登录提示样式 */ .login-hint { margin-top: 50rpx; font-size: 28rpx; color: #666; text-align: center; } .link-text { color: #1677ff; } /* 标题样式 */ .title { font-size: 40rpx; font-weight: bold; text-align: center; color: #333; margin-top: 20rpx; margin-bottom: 10rpx; }