/* 阿龙电竞 - 邀请码页面样式 */ /* 页面整体样式 */ .yaoqingma-page { min-height: 100vh; background: linear-gradient(135deg, #0a0e17 0%, #141a2a 100%); padding: 40rpx 30rpx; position: relative; overflow: hidden; color: #fff; } /* 顶部装饰条 */ .top-decoration { position: absolute; top: 0; left: 0; right: 0; height: 6rpx; background: linear-gradient(90deg, transparent 0%, #00ff88 20%, #00ff88 80%, transparent 100% ); opacity: 0.7; } /* 页面标题 */ .page-title { text-align: center; margin-bottom: 60rpx; margin-top: 40rpx; } .title-text { display: block; font-size: 52rpx; font-weight: bold; background: linear-gradient(45deg, #fff 30%, #00ffaa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 4rpx; margin-bottom: 16rpx; } .title-sub { display: block; font-size: 28rpx; color: #88aaff; opacity: 0.8; } /* 邀请码卡片 */ .yaoqingma-card { background: rgba(20, 25, 40, 0.8); border-radius: 24rpx; padding: 50rpx 40rpx; margin-bottom: 60rpx; position: relative; border: 1rpx solid rgba(0, 255, 136, 0.2); box-shadow: 0 10rpx 30rpx rgba(0, 255, 136, 0.1); transition: all 0.3s ease; } /* 卡片加载状态 */ .card-loading { opacity: 0.7; } /* 卡片装饰角 */ .card-corner { position: absolute; width: 40rpx; height: 40rpx; border: 2rpx solid #00ff88; opacity: 0.6; } .top-left { top: 12rpx; left: 12rpx; border-right: none; border-bottom: none; } .top-right { top: 12rpx; right: 12rpx; border-left: none; border-bottom: none; } .bottom-left { bottom: 12rpx; left: 12rpx; border-right: none; border-top: none; } .bottom-right { bottom: 12rpx; right: 12rpx; border-left: none; border-top: none; } /* 卡片内容 */ .card-content { position: relative; z-index: 2; } /* 加载状态样式 */ .loading-container { display: flex; flex-direction: column; align-items: center; padding: 40rpx 0; } .loading-spinner { width: 80rpx; height: 80rpx; border: 6rpx solid rgba(0, 255, 136, 0.2); border-top-color: #00ff88; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 30rpx; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-text { font-size: 28rpx; color: #88ffcc; opacity: 0.9; } /* 正常展示状态 */ .code-container { text-align: center; } .code-label { display: block; font-size: 32rpx; color: #aaddff; margin-bottom: 40rpx; letter-spacing: 4rpx; } .code-display { background: rgba(0, 20, 30, 0.7); border-radius: 16rpx; padding: 40rpx 30rpx; margin-bottom: 30rpx; border: 1rpx solid rgba(0, 255, 136, 0.3); position: relative; overflow: hidden; } .code-text { display: block; font-size: 48rpx; font-weight: bold; letter-spacing: 8rpx; font-family: 'Courier New', monospace; color: #00ffaa; text-shadow: 0 0 10rpx rgba(0, 255, 136, 0.5); transition: all 0.3s ease; word-break: break-all; } /* 复制成功后的样式 */ .code-copied { color: #88ffaa; text-shadow: 0 0 20rpx rgba(136, 255, 170, 0.8); transform: scale(1.02); } .code-status { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 255, 136, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; border-radius: 16rpx; } .status-show { opacity: 1; } .code-status .iconfont { font-size: 60rpx; color: #00ff88; margin-bottom: 20rpx; } .code-status text { font-size: 28rpx; color: #ccffee; } .code-tip { display: block; font-size: 24rpx; color: #8899cc; opacity: 0.8; margin-top: 20rpx; } /* 操作按钮区域 */ .action-area { margin-top: 40rpx; } /* 操作按钮 */ .action-btn { background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 200, 255, 0.1) 100%); border-radius: 20rpx; padding: 50rpx 40rpx; margin-bottom: 50rpx; position: relative; overflow: hidden; border: 1rpx solid rgba(0, 255, 136, 0.3); transition: all 0.3s ease; text-align: center; } /* 按钮悬停效果 */ .btn-hover { transform: translateY(-4rpx); box-shadow: 0 20rpx 40rpx rgba(0, 255, 136, 0.2); } /* 生成按钮样式 */ .btn-generate { background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 200, 255, 0.15) 100%); } /* 复制按钮样式 */ .btn-copy { background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 200, 0.2) 100%); } /* 禁用状态 */ .btn-disabled { opacity: 0.6; pointer-events: none; } /* 按钮光效 */ .btn-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( circle at center, rgba(0, 255, 136, 0.3) 0%, transparent 70% ); opacity: 0; animation: pulse 3s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 0.6; transform: scale(1.1); } } .btn-content { position: relative; z-index: 2; margin-bottom: 20rpx; } .btn-icon { display: block; font-size: 60rpx; margin-bottom: 20rpx; opacity: 0.9; } .btn-text { display: block; font-size: 40rpx; font-weight: bold; color: #fff; letter-spacing: 2rpx; text-shadow: 0 0 10rpx rgba(0, 255, 136, 0.5); } .btn-desc { display: block; font-size: 26rpx; color: #aaddff; opacity: 0.8; } /* 使用说明 */ .instruction { background: rgba(30, 35, 50, 0.5); border-radius: 16rpx; padding: 40rpx 30rpx; border: 1rpx solid rgba(100, 150, 255, 0.1); } .instruction-item { display: flex; align-items: flex-start; margin-bottom: 30rpx; } .instruction-item:last-child { margin-bottom: 0; } .instruction-icon { font-size: 36rpx; margin-right: 20rpx; opacity: 0.8; flex-shrink: 0; margin-top: 4rpx; } .instruction-text { font-size: 26rpx; color: #ccddee; line-height: 1.5; opacity: 0.9; } /* 底部装饰 */ .bottom-decoration { text-align: center; margin-top: 60rpx; padding-top: 40rpx; border-top: 1rpx solid rgba(255, 255, 255, 0.1); } .platform-name { font-size: 24rpx; color: #8899cc; opacity: 0.7; letter-spacing: 2rpx; } /* pages/yaoqingma/yaoqingma.wxss - 仅修改按钮部分 */ /* ... 其他样式保持不变 ... */ /* 操作按钮 - 缩小尺寸 */ .action-btn { background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 200, 255, 0.1) 100%); border-radius: 20rpx; padding: 36rpx 30rpx; /* 减小内边距 */ margin-bottom: 50rpx; position: relative; overflow: hidden; border: 1rpx solid rgba(0, 255, 136, 0.3); transition: all 0.3s ease; text-align: center; } /* 按钮内容相应调整 */ .btn-icon { display: block; font-size: 52rpx; /* 适当缩小图标 */ margin-bottom: 16rpx; opacity: 0.9; } .btn-text { display: block; font-size: 34rpx; /* 适当缩小字体 */ font-weight: bold; color: #fff; letter-spacing: 2rpx; text-shadow: 0 0 10rpx rgba(0, 255, 136, 0.5); } .btn-desc { display: block; font-size: 24rpx; /* 适当缩小说明文字 */ color: #aaddff; opacity: 0.8; margin-top: 8rpx; } /* ... 其他样式保持不变 ... */