/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); margin: 0; padding: 0; } .container { padding: 40rpx 0; margin: 0; width: 100%; display: flex; flex-direction: column; justify-content: space-around; min-height: calc(100vh - 100rpx); } .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); } /* 按钮区域样式 */ .buttons-section { width: 80%; margin: 20rpx auto; display: flex; flex-direction: column; gap: 20rpx; flex: 0 1 auto; } /* 按钮行样式 */ .btn-row { display: flex; flex-direction: row; justify-content: space-between; gap: 20rpx; } /* 全宽按钮行样式 */ .btn-row.full-width { justify-content: center; } /* 消息按钮样式 */ .message-btn { color: #FF6B6B; background: rgba(255, 107, 107, 0.15); margin: 0; width: 48%; } /* 联系客服按钮样式 */ .service-btn { color: #1677ff; background: rgba(22, 119, 255, 0.15); margin: 0; width: 48%; } /* 立即入驻按钮样式 */ .settlement-btn { color: #2196F3; background: rgba(33, 150, 243, 0.15); margin: 0; width: 100%; } /* 未入驻按钮样式 */ .settlement-btn.not-approved { background: rgba(255, 77, 79, 0.15); color: #ff4d4f; } /* 按钮点击效果 */ .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: 9999; } .auth-modal-container { background-color: #fff; border-radius: 24rpx; width: 85%; max-width: 520rpx; padding: 50rpx 40rpx; box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.18); } .auth-modal-title { font-size: 40rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 35rpx; } .auth-modal-content { font-size: 32rpx; line-height: 1.6; color: #666; text-align: center; margin-bottom: 50rpx; } .auth-modal-buttons { display: flex; flex-direction: column; gap: 24rpx; } .auth-primary-button { background-color: #07c160; color: #fff; font-size: 34rpx; font-weight: 600; line-height: 1.6; border-radius: 12rpx; padding: 24rpx 0; box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); } .auth-cancel-button { background-color: #fff; color: #999; font-size: 34rpx; font-weight: 500; line-height: 1.6; border-radius: 12rpx; padding: 24rpx 0; border: 2rpx solid #e5e5e5; } .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; } /* 滚动图片区域样式 */ .swiper-container { width: 80%; margin: 20rpx auto; border-radius: 20rpx; overflow: hidden; box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.1); position: relative; flex: 0 1 auto; } /* 轮播图指示器样式 */ .swiper-container .wx-swiper-dots { bottom: 15rpx; } .swiper-container .wx-swiper-dot { width: 12rpx; height: 12rpx; background: rgba(255, 255, 255, 0.6); } .swiper-container .wx-swiper-dot-active { width: 36rpx; background: #fff; } /* 图片提示框样式 */ .swiper-hint { background: rgba(0, 0, 0, 0.7); color: #fff; padding: 15rpx; border-radius: 0 0 20rpx 20rpx; font-size: 24rpx; text-align: center; margin-top: -10rpx; } .hint-text { display: block; line-height: 1.4; } /* 顶部横幅图片样式 */ .top-banner { width: 100%; height: 425rpx; margin: -280rpx auto 10rpx; display: block; } /* 标题样式 */ .title { font-size: 40rpx; font-weight: bold; text-align: center; color: #333; margin: 20rpx auto; padding: 0 20rpx; flex: 0 1 auto; }