|
|
@@ -1,7413 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="zh-CN">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>FashionCraft - 服装DIY设计</title>
|
|
|
- <style>
|
|
|
- * {
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- body {
|
|
|
- font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- min-height: 100vh;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- /* 容器样式 */
|
|
|
- .app-container {
|
|
|
- max-width: 414px;
|
|
|
- margin: 0 auto;
|
|
|
- background: #fff;
|
|
|
- min-height: 100vh;
|
|
|
- box-shadow: 0 0 30px rgba(0,0,0,0.3);
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- /* 头部导航 */
|
|
|
- .header {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- padding: 20px 20px 15px;
|
|
|
- color: white;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .header::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: -50%;
|
|
|
- left: -50%;
|
|
|
- width: 200%;
|
|
|
- height: 200%;
|
|
|
- background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="80" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
|
|
- animation: float 20s infinite linear;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes float {
|
|
|
- 0% { transform: translate(-50%, -50%) rotate(0deg); }
|
|
|
- 100% { transform: translate(-50%, -50%) rotate(360deg); }
|
|
|
- }
|
|
|
-
|
|
|
- .header-content {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .header h1 {
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 5px;
|
|
|
- text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .header p {
|
|
|
- opacity: 0.9;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 主要内容区域 */
|
|
|
- .main-content {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- padding-bottom: 80px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 轮播区域 */
|
|
|
- .banner-section {
|
|
|
- position: relative;
|
|
|
- height: 200px;
|
|
|
- overflow: hidden;
|
|
|
- margin: 20px;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .banner-slider {
|
|
|
- display: flex;
|
|
|
- transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .banner-slide {
|
|
|
- min-width: 100%;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .banner-slide:hover {
|
|
|
- transform: scale(0.98);
|
|
|
- }
|
|
|
-
|
|
|
- .banner-slide::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0)"/></linearGradient></defs><polygon points="0,0 100,0 0,100" fill="url(%23grad)"/></svg>');
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
-
|
|
|
- .banner-indicators {
|
|
|
- position: absolute;
|
|
|
- bottom: 15px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .indicator {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255,255,255,0.5);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .indicator.active {
|
|
|
- background: white;
|
|
|
- transform: scale(1.2);
|
|
|
- }
|
|
|
-
|
|
|
- /* 快速设计入口 */
|
|
|
- .quick-design {
|
|
|
- margin: 20px;
|
|
|
- padding: 25px;
|
|
|
- background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
|
|
|
- border-radius: 20px;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 8px 25px rgba(255, 154, 158, 0.4);
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .quick-design:hover {
|
|
|
- transform: translateY(-5px);
|
|
|
- box-shadow: 0 15px 35px rgba(255, 154, 158, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- .quick-design::before {
|
|
|
- content: '✨';
|
|
|
- position: absolute;
|
|
|
- top: 15px;
|
|
|
- right: 20px;
|
|
|
- font-size: 24px;
|
|
|
- animation: sparkle 2s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes sparkle {
|
|
|
- 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
|
|
- 50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
|
|
|
- }
|
|
|
-
|
|
|
- .quick-design h2 {
|
|
|
- font-size: 22px;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 8px;
|
|
|
- text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .quick-design p {
|
|
|
- color: rgba(255,255,255,0.9);
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 热门作品区 */
|
|
|
- .popular-works {
|
|
|
- margin: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .section-title {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 15px;
|
|
|
- color: #333;
|
|
|
- position: relative;
|
|
|
- padding-left: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .section-title::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 4px;
|
|
|
- height: 20px;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .works-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .work-item {
|
|
|
- background: #fff;
|
|
|
- border-radius: 15px;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .work-item:hover {
|
|
|
- transform: translateY(-8px);
|
|
|
- box-shadow: 0 15px 40px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .work-image {
|
|
|
- height: 120px;
|
|
|
- background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 36px;
|
|
|
- }
|
|
|
-
|
|
|
- .work-info {
|
|
|
- padding: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .work-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 4px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .work-stats {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* AI推荐引擎样式 */
|
|
|
- .ai-recommend-engine {
|
|
|
- margin: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-engine-card {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 20px;
|
|
|
- padding: 25px;
|
|
|
- color: white;
|
|
|
- box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-engine-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-brand {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-logo {
|
|
|
- font-size: 32px;
|
|
|
- animation: pulse 2s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-brand-text h3 {
|
|
|
- font-size: 20px;
|
|
|
- margin: 0 0 4px 0;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-brand-text p {
|
|
|
- font-size: 14px;
|
|
|
- opacity: 0.9;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-status {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- font-size: 12px;
|
|
|
- opacity: 0.9;
|
|
|
- }
|
|
|
-
|
|
|
- .status-dot {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background: #4ade80;
|
|
|
- border-radius: 50%;
|
|
|
- animation: pulse 2s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-quick-actions {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 12px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action {
|
|
|
- background: rgba(255,255,255,0.15);
|
|
|
- border-radius: 15px;
|
|
|
- padding: 15px 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- min-height: 50px;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action:hover {
|
|
|
- background: rgba(255,255,255,0.25);
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 5px 15px rgba(255,255,255,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .action-icon {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-text {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* AI悬浮球样式 */
|
|
|
- .ai-floating-ball {
|
|
|
- position: fixed;
|
|
|
- bottom: 90px;
|
|
|
- right: 20px;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 999;
|
|
|
- box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-floating-ball:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- .floating-ball-icon {
|
|
|
- font-size: 24px;
|
|
|
- color: white;
|
|
|
- z-index: 2;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .breathing-ring {
|
|
|
- position: absolute;
|
|
|
- top: -3px;
|
|
|
- left: -3px;
|
|
|
- right: -3px;
|
|
|
- bottom: -3px;
|
|
|
- border: 2px solid rgba(102, 126, 234, 0.6);
|
|
|
- border-radius: 50%;
|
|
|
- animation: breathing 2s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes breathing {
|
|
|
- 0%, 100% {
|
|
|
- transform: scale(1);
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.1);
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* AI全屏对话界面样式 */
|
|
|
- .ai-chat-modal {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0,0,0,0.95);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- z-index: 2000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-container {
|
|
|
- width: 100%;
|
|
|
- max-width: 414px;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-header {
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- border-bottom: 1px solid rgba(255,255,255,0.2);
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-avatar {
|
|
|
- position: relative;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-icon {
|
|
|
- font-size: 24px;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-status {
|
|
|
- position: absolute;
|
|
|
- bottom: 2px;
|
|
|
- right: 2px;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: #4ade80;
|
|
|
- border: 2px solid white;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-info {
|
|
|
- flex: 1;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-info h3 {
|
|
|
- font-size: 18px;
|
|
|
- margin: 0 0 4px 0;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-info p {
|
|
|
- font-size: 14px;
|
|
|
- margin: 0;
|
|
|
- opacity: 0.9;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-close {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-close:hover {
|
|
|
- background: rgba(255,255,255,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-messages {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-message {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .user-message {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 12px;
|
|
|
- flex-direction: row-reverse;
|
|
|
- }
|
|
|
-
|
|
|
- .message-avatar {
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 16px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .user-message .message-avatar {
|
|
|
- background: rgba(255,255,255,0.9);
|
|
|
- }
|
|
|
-
|
|
|
- .message-content {
|
|
|
- flex: 1;
|
|
|
- max-width: 80%;
|
|
|
- }
|
|
|
-
|
|
|
- .message-text {
|
|
|
- background: rgba(255,255,255,0.15);
|
|
|
- padding: 12px 16px;
|
|
|
- border-radius: 18px;
|
|
|
- color: white;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.5;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- }
|
|
|
-
|
|
|
- .user-message .message-text {
|
|
|
- background: rgba(255,255,255,0.9);
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .message-time {
|
|
|
- font-size: 11px;
|
|
|
- color: rgba(255,255,255,0.7);
|
|
|
- margin-top: 4px;
|
|
|
- padding-left: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .user-message .message-time {
|
|
|
- color: rgba(0,0,0,0.5);
|
|
|
- text-align: right;
|
|
|
- padding-left: 0;
|
|
|
- padding-right: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-quick-commands {
|
|
|
- padding: 15px 20px;
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- overflow-x: auto;
|
|
|
- background: rgba(255,255,255,0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .quick-command {
|
|
|
- min-width: 120px;
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- border-radius: 20px;
|
|
|
- padding: 10px 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- color: white;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-command:hover {
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .command-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-input-area {
|
|
|
- padding: 20px;
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- }
|
|
|
-
|
|
|
- .input-toolbar {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .input-tool {
|
|
|
- color: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 2px;
|
|
|
- outline: none;
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .input-tool:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- .input-tool:focus {
|
|
|
- outline: none;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-icon {
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .input-container {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .input-container input {
|
|
|
- flex: 1;
|
|
|
- background: rgba(255,255,255,0.9);
|
|
|
- border: none;
|
|
|
- border-radius: 25px;
|
|
|
- padding: 12px 20px;
|
|
|
- font-size: 14px;
|
|
|
- outline: none;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .input-container input::placeholder {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-
|
|
|
- .send-button {
|
|
|
- width: 45px;
|
|
|
- height: 45px;
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #ffa726);
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- color: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .send-button:hover {
|
|
|
- transform: scale(1.05);
|
|
|
- box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .send-icon {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- /* AI推荐结果页面样式 */
|
|
|
- .ai-recommendation-modal {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0,0,0,0.95);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- z-index: 2000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-container {
|
|
|
- width: 100%;
|
|
|
- max-width: 414px;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-header {
|
|
|
- padding: 20px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-header h2 {
|
|
|
- font-size: 20px;
|
|
|
- margin: 0;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .close-recommendation {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .close-recommendation:hover {
|
|
|
- background: rgba(255,255,255,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-content {
|
|
|
- flex: 1;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-3d-section {
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-3d-viewer {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 15px;
|
|
|
- height: 250px;
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .model-3d-container {
|
|
|
- text-align: center;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .model-3d-display {
|
|
|
- font-size: 80px;
|
|
|
- margin-bottom: 15px;
|
|
|
- animation: float 3s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes float {
|
|
|
- 0%, 100% { transform: translateY(0px); }
|
|
|
- 50% { transform: translateY(-10px); }
|
|
|
- }
|
|
|
-
|
|
|
- .model-controls {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .model-control {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- color: white;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .model-control:hover {
|
|
|
- background: rgba(255,255,255,0.3);
|
|
|
- transform: scale(1.05);
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-selector h4 {
|
|
|
- font-size: 16px;
|
|
|
- margin-bottom: 15px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-tabs {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-tab {
|
|
|
- flex: 1;
|
|
|
- padding: 10px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 10px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-tab.active {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .color-theory-section {
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .color-theory-section h4 {
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 20px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-card {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 15px;
|
|
|
- padding: 15px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-icon {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 18px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-text h5 {
|
|
|
- font-size: 16px;
|
|
|
- margin: 0 0 8px 0;
|
|
|
- color: #333;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-text p {
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- margin: 0;
|
|
|
- line-height: 1.5;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-actions {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 15px;
|
|
|
- border: none;
|
|
|
- border-radius: 15px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn.primary {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn.secondary {
|
|
|
- background: #f8f9fa;
|
|
|
- color: #666;
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .btn-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 底部导航 */
|
|
|
- .bottom-nav {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 414px;
|
|
|
- max-width: 100%;
|
|
|
- background: rgba(255,255,255,0.95);
|
|
|
- backdrop-filter: blur(20px);
|
|
|
- border-top: 1px solid rgba(0,0,0,0.1);
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding: 12px 0;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- padding: 8px;
|
|
|
- border-radius: 12px;
|
|
|
- min-width: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-item.active {
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-item:not(.active):hover {
|
|
|
- background: rgba(0,0,0,0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .nav-icon {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-text {
|
|
|
- font-size: 10px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传按钮特殊样式 */
|
|
|
- .upload-btn {
|
|
|
- position: relative;
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #ffa726) !important;
|
|
|
- color: white !important;
|
|
|
- border-radius: 50%;
|
|
|
- width: 56px;
|
|
|
- height: 56px;
|
|
|
- margin-top: -20px;
|
|
|
- box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .upload-btn:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- .upload-icon {
|
|
|
- font-size: 28px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- /* 模态框样式 */
|
|
|
- .modal {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0,0,0,0.8);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- display: none;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 1000;
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes fadeIn {
|
|
|
- from { opacity: 0; }
|
|
|
- to { opacity: 1; }
|
|
|
- }
|
|
|
-
|
|
|
- .modal-content {
|
|
|
- background: white;
|
|
|
- border-radius: 25px;
|
|
|
- padding: 30px;
|
|
|
- margin: 20px;
|
|
|
- max-width: 350px;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- transform: scale(0.9);
|
|
|
- animation: modalPop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes modalPop {
|
|
|
- to { transform: scale(1); }
|
|
|
- }
|
|
|
-
|
|
|
- .modal h3 {
|
|
|
- font-size: 24px;
|
|
|
- margin-bottom: 15px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .modal p {
|
|
|
- color: #666;
|
|
|
- margin-bottom: 25px;
|
|
|
- line-height: 1.5;
|
|
|
- }
|
|
|
-
|
|
|
- .modal-actions {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- border: none;
|
|
|
- border-radius: 12px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-primary {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-primary:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .btn-secondary {
|
|
|
- background: #f8f9fa;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-secondary:hover {
|
|
|
- background: #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- /* 设置模态框样式 */
|
|
|
- .settings-modal {
|
|
|
- display: none;
|
|
|
- position: fixed;
|
|
|
- z-index: 2000;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0,0,0,0.6);
|
|
|
- backdrop-filter: blur(5px);
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-modal-content {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 90%;
|
|
|
- max-width: 480px;
|
|
|
- max-height: 85vh;
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
|
- overflow: hidden;
|
|
|
- animation: slideIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes slideIn {
|
|
|
- from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
|
|
|
- to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
|
|
|
- }
|
|
|
-
|
|
|
- .settings-header {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-header h2 {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 600;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .close-btn {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- font-size: 24px;
|
|
|
- cursor: pointer;
|
|
|
- padding: 5px;
|
|
|
- border-radius: 50%;
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- transition: background 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .close-btn:hover {
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .settings-body {
|
|
|
- padding: 0;
|
|
|
- max-height: 60vh;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-section {
|
|
|
- padding: 20px;
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-section:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-section h3 {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin: 0 0 15px 0;
|
|
|
- }
|
|
|
-
|
|
|
- /* 个人资料样式 */
|
|
|
- .profile-info {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-avatar {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-circle {
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-circle img {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- border-radius: 50%;
|
|
|
- border: 3px solid #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-edit {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- background: #ff6b6b;
|
|
|
- color: white;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 12px;
|
|
|
- border: 2px solid white;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details .form-group {
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details label {
|
|
|
- display: block;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #555;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details input,
|
|
|
- .profile-details textarea {
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: inherit;
|
|
|
- transition: border-color 0.3s ease;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details input:focus,
|
|
|
- .profile-details textarea:focus {
|
|
|
- outline: none;
|
|
|
- border-color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details textarea {
|
|
|
- resize: vertical;
|
|
|
- min-height: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 安全设置样式 */
|
|
|
- .security-items {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .security-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 12px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 10px;
|
|
|
- cursor: pointer;
|
|
|
- transition: background 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .security-item:hover {
|
|
|
- background: #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .security-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .security-icon {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .security-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .security-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- margin-top: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .arrow {
|
|
|
- color: #999;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 隐私设置样式 */
|
|
|
- .privacy-items {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-icon {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- margin-top: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-select {
|
|
|
- padding: 6px 10px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 6px;
|
|
|
- font-size: 12px;
|
|
|
- background: white;
|
|
|
- }
|
|
|
-
|
|
|
- /* 开关样式 */
|
|
|
- .switch {
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- width: 44px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .switch input {
|
|
|
- opacity: 0;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .slider {
|
|
|
- position: absolute;
|
|
|
- cursor: pointer;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background-color: #ccc;
|
|
|
- transition: 0.3s;
|
|
|
- border-radius: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .slider:before {
|
|
|
- position: absolute;
|
|
|
- content: "";
|
|
|
- height: 18px;
|
|
|
- width: 18px;
|
|
|
- left: 3px;
|
|
|
- bottom: 3px;
|
|
|
- background-color: white;
|
|
|
- transition: 0.3s;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- input:checked + .slider {
|
|
|
- background-color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- input:checked + .slider:before {
|
|
|
- transform: translateX(20px);
|
|
|
- }
|
|
|
-
|
|
|
- /* 应用设置样式 */
|
|
|
- .app-items {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .app-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 12px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 10px;
|
|
|
- cursor: pointer;
|
|
|
- transition: background 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .app-item:hover {
|
|
|
- background: #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .app-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .app-icon {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .app-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .app-right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .version,
|
|
|
- .cache-size {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 设置底部 */
|
|
|
- .settings-footer {
|
|
|
- padding: 20px;
|
|
|
- background: #f8f9fa;
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .save-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 0.2s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .save-btn:hover {
|
|
|
- transform: translateY(-1px);
|
|
|
- }
|
|
|
-
|
|
|
- .logout-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- background: #dc3545;
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- cursor: pointer;
|
|
|
- transition: background 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .logout-btn:hover {
|
|
|
- background: #c82333;
|
|
|
- }
|
|
|
-
|
|
|
- /* 新版设计中心样式 */
|
|
|
- .design-preview-system {
|
|
|
- margin: 20px;
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-container {
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 20px;
|
|
|
- box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-3d-enhanced {
|
|
|
- position: relative;
|
|
|
- height: 280px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 15px;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .model-3d-wrapper {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- #main3DModel {
|
|
|
- font-size: 100px;
|
|
|
- color: white;
|
|
|
- z-index: 2;
|
|
|
- position: relative;
|
|
|
- animation: float 6s ease-in-out infinite;
|
|
|
- transition: all 0.5s ease;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes float {
|
|
|
- 0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
|
- 50% { transform: translateY(-10px) rotate(5deg); }
|
|
|
- }
|
|
|
-
|
|
|
- .model-highlights {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-controls {
|
|
|
- position: absolute;
|
|
|
- bottom: 15px;
|
|
|
- right: 15px;
|
|
|
- z-index: 4;
|
|
|
- }
|
|
|
-
|
|
|
- .control-group {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .control-btn {
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
- border: none;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 16px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- transition: all 0.3s ease;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- }
|
|
|
-
|
|
|
- .control-btn:hover {
|
|
|
- background: white;
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* 3D分区控制面板样式 */
|
|
|
- .zone-control-panel {
|
|
|
- margin: 20px;
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .panel-header {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- padding: 15px 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .panel-header h3 {
|
|
|
- margin: 0;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .expand-btn {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .expand-btn:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- .panel-content {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 部位选择器（胶囊式Tab）样式 */
|
|
|
- .body-part-selector {
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .part-tabs {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
-
|
|
|
- .part-tab {
|
|
|
- background: #f8f9fa;
|
|
|
- border: 2px solid transparent;
|
|
|
- border-radius: 25px;
|
|
|
- padding: 10px 15px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- flex: 1;
|
|
|
- min-width: 70px;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .part-tab:hover {
|
|
|
- background: rgba(255, 107, 107, 0.1);
|
|
|
- border-color: rgba(255, 107, 107, 0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .part-tab.active {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- border-color: #ff6b6b;
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .tab-icon {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-text {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* 色盘管理系统样式 */
|
|
|
- .color-management-system {
|
|
|
- margin: 20px;
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .color-system-header {
|
|
|
- background: linear-gradient(45deg, #667eea, #764ba2);
|
|
|
- color: white;
|
|
|
- padding: 15px 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .color-system-header h3 {
|
|
|
- margin: 0;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .color-actions {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn:hover {
|
|
|
- background: rgba(255, 255, 255, 0.3);
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- .zone-color-memory {
|
|
|
- padding: 15px 20px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-bottom: 1px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .current-part-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .part-label {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .part-name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .color-indicator {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- border: 2px solid white;
|
|
|
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .master-color-picker {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .color-picker-section {
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .color-picker-section:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .color-picker-section h4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .enhanced-palette {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(8, 1fr);
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch {
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- border-radius: 8px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid transparent;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- border-color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch.active {
|
|
|
- transform: scale(1.15);
|
|
|
- border-color: #333;
|
|
|
- box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- .custom-color-controls {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- #customColorPicker {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .add-custom-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 8px 12px;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 6px;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 0.2s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .add-custom-btn:hover {
|
|
|
- transform: translateY(-1px);
|
|
|
- }
|
|
|
-
|
|
|
- /* 历史配色库样式 */
|
|
|
- .color-history-section {
|
|
|
- padding: 20px;
|
|
|
- border-top: 1px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .color-history-section h4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-schemes {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- padding: 10px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 8px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-item:hover {
|
|
|
- background: rgba(255, 107, 107, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-preview {
|
|
|
- display: flex;
|
|
|
- gap: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-color {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-name {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 高级定制工具样式 */
|
|
|
- .advanced-tools {
|
|
|
- margin: 20px;
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .tools-header {
|
|
|
- background: linear-gradient(45deg, #43e97b, #38f9d7);
|
|
|
- color: white;
|
|
|
- padding: 15px 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .tools-header h3 {
|
|
|
- margin: 0;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-grid {
|
|
|
- padding: 20px;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-card {
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-card:hover {
|
|
|
- background: white;
|
|
|
- border-color: rgba(67, 233, 123, 0.3);
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 8px 25px rgba(67, 233, 123, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-card .tool-icon {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-content {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-card .tool-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-desc {
|
|
|
- font-size: 11px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 设计工具区域 */
|
|
|
- .design-tools {
|
|
|
- margin: 20px;
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 15px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-card {
|
|
|
- background: white;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .tool-card:hover {
|
|
|
- transform: translateY(-5px);
|
|
|
- box-shadow: 0 15px 40px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .tool-icon {
|
|
|
- font-size: 40px;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- /* 颜色选择器 */
|
|
|
- .color-picker {
|
|
|
- background: white;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .color-palette {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(7, 1fr);
|
|
|
- gap: 8px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: 380px) {
|
|
|
- .color-palette {
|
|
|
- grid-template-columns: repeat(5, 1fr);
|
|
|
- gap: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 50%;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch:hover,
|
|
|
- .color-swatch.active {
|
|
|
- transform: scale(1.2);
|
|
|
- border-color: #333;
|
|
|
- box-shadow: 0 0 15px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch[data-color="白色"]:hover,
|
|
|
- .color-swatch[data-color="白色"].active {
|
|
|
- border-color: #ff6b6b;
|
|
|
- box-shadow: 0 0 15px rgba(255,107,107,0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch[title*="白色"] {
|
|
|
- border: 2px solid #ddd !important;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch[title*="白色"]:hover {
|
|
|
- border-color: #ff6b6b !important;
|
|
|
- }
|
|
|
-
|
|
|
- /* 3D预览区 */
|
|
|
- .preview-3d {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 15px;
|
|
|
- height: 300px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-3d::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
|
|
|
- }
|
|
|
-
|
|
|
- .model-3d {
|
|
|
- font-size: 80px;
|
|
|
- z-index: 2;
|
|
|
- position: relative;
|
|
|
- animation: rotate3d 10s infinite linear;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes rotate3d {
|
|
|
- 0% { transform: rotateY(0deg); }
|
|
|
- 100% { transform: rotateY(360deg); }
|
|
|
- }
|
|
|
-
|
|
|
- /* 服装预览样式 */
|
|
|
- .clothing-preview {
|
|
|
- position: relative;
|
|
|
- width: 280px;
|
|
|
- height: 280px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-layer {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .part-image {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 100%;
|
|
|
- object-fit: contain;
|
|
|
- transition: all 0.3s ease;
|
|
|
- filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
|
|
|
- }
|
|
|
-
|
|
|
- .part-image.highlighted {
|
|
|
- filter: drop-shadow(0 0 20px #ffa726) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
|
|
|
- transform: scale(1.05);
|
|
|
- }
|
|
|
-
|
|
|
- .part-image.selected {
|
|
|
- filter: drop-shadow(0 0 15px #ff6b6b) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
|
|
|
- }
|
|
|
-
|
|
|
- /* 社区页面 */
|
|
|
- .community-page {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .community-header {
|
|
|
- background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
|
|
- padding: 20px;
|
|
|
- color: white;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .community-header-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 发布按钮样式 */
|
|
|
- .publish-btn {
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
- color: white;
|
|
|
- padding: 8px 16px;
|
|
|
- border-radius: 20px;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .publish-btn:hover {
|
|
|
- background: rgba(255, 255, 255, 0.3);
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .publish-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传模态框样式 */
|
|
|
- .upload-modal {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- display: none;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 1000;
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-modal-content {
|
|
|
- background: white;
|
|
|
- border-radius: 25px;
|
|
|
- padding: 0;
|
|
|
- margin: 20px;
|
|
|
- max-width: 380px;
|
|
|
- width: 100%;
|
|
|
- max-height: 90vh;
|
|
|
- overflow-y: auto;
|
|
|
- transform: scale(0.9);
|
|
|
- animation: modalPop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
|
- }
|
|
|
-
|
|
|
- /* 步骤指示器 */
|
|
|
- .upload-steps {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 20px 30px 0;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .step {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- flex: 1;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .step:not(:last-child)::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 15px;
|
|
|
- left: 60%;
|
|
|
- width: 40px;
|
|
|
- height: 2px;
|
|
|
- background: #e9ecef;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .step.active:not(:last-child)::after {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- }
|
|
|
-
|
|
|
- .step-number {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #e9ecef;
|
|
|
- color: #666;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 8px;
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .step.active .step-number {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .step-label {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .step.active .step-label {
|
|
|
- color: #333;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传步骤内容 */
|
|
|
- .upload-step {
|
|
|
- display: none;
|
|
|
- padding: 0 30px 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-step.active {
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-step h3 {
|
|
|
- font-size: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- /* 作品类型选择 */
|
|
|
- .work-types {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .work-type {
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .work-type:hover {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .work-type.selected {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 167, 38, 0.1));
|
|
|
- }
|
|
|
-
|
|
|
- .type-icon {
|
|
|
- font-size: 32px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .type-name {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .type-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传选项 */
|
|
|
- .upload-options {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-section {
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-section h4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 文件上传区域 */
|
|
|
- .file-upload-area {
|
|
|
- border: 2px dashed #ddd;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 30px 20px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- background: #fafafa;
|
|
|
- }
|
|
|
-
|
|
|
- .file-upload-area:hover {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .upload-placeholder {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-icon {
|
|
|
- font-size: 32px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-text {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-hint {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传预览 */
|
|
|
- .upload-preview {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 10px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-item {
|
|
|
- position: relative;
|
|
|
- aspect-ratio: 1;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- background: #f8f9fa;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-item img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-remove {
|
|
|
- position: absolute;
|
|
|
- top: 5px;
|
|
|
- right: 5px;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(0, 0, 0, 0.7);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- /* 我的设计网格 */
|
|
|
- .my-designs-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item {
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 8px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item:hover {
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .design-item.selected {
|
|
|
- background: rgba(255, 107, 107, 0.1);
|
|
|
- border: 2px solid #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .design-preview {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- border-radius: 8px;
|
|
|
- background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 24px;
|
|
|
- margin: 0 auto 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-name {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 描述表单 */
|
|
|
- .description-form {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .form-group {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .form-group label {
|
|
|
- display: block;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .form-group input,
|
|
|
- .form-group textarea,
|
|
|
- .form-group select {
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- resize: none;
|
|
|
- }
|
|
|
-
|
|
|
- .form-group input:focus,
|
|
|
- .form-group textarea:focus,
|
|
|
- .form-group select:focus {
|
|
|
- outline: none;
|
|
|
- border-color: #ff6b6b;
|
|
|
- box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .form-group textarea {
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
-
|
|
|
- .char-count {
|
|
|
- position: absolute;
|
|
|
- bottom: -20px;
|
|
|
- right: 0;
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 标签容器 */
|
|
|
- .tags-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .popular-tags {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .tag {
|
|
|
- background: #f8f9fa;
|
|
|
- color: #666;
|
|
|
- padding: 6px 12px;
|
|
|
- border-radius: 20px;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .tag:hover {
|
|
|
- background: rgba(255, 107, 107, 0.1);
|
|
|
- color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .tag.selected {
|
|
|
- background: #ff6b6b;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- /* 发布设置 */
|
|
|
- .publish-settings {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .setting-group {
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .setting-group > label {
|
|
|
- display: block;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-group {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option,
|
|
|
- .checkbox-option {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 12px;
|
|
|
- cursor: pointer;
|
|
|
- padding: 12px;
|
|
|
- border-radius: 8px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option:hover,
|
|
|
- .checkbox-option:hover {
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option input,
|
|
|
- .checkbox-option input {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-custom,
|
|
|
- .checkbox-custom {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border: 2px solid #ddd;
|
|
|
- border-radius: 50%;
|
|
|
- position: relative;
|
|
|
- transition: all 0.3s ease;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-top: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .checkbox-custom {
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option input:checked + .radio-custom,
|
|
|
- .checkbox-option input:checked + .checkbox-custom {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option input:checked + .radio-custom::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
- background: white;
|
|
|
- }
|
|
|
-
|
|
|
- .checkbox-option input:checked + .checkbox-custom::after {
|
|
|
- content: '✓';
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- color: white;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .option-content {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .option-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .option-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- line-height: 1.4;
|
|
|
- }
|
|
|
-
|
|
|
- /* 模态框底部 */
|
|
|
- .upload-modal-footer {
|
|
|
- padding: 20px 30px;
|
|
|
- border-top: 1px solid #e9ecef;
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-outline {
|
|
|
- background: transparent;
|
|
|
- border: 2px solid #ff6b6b;
|
|
|
- color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-outline:hover {
|
|
|
- background: #ff6b6b;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- /* 草稿箱和我的作品样式 */
|
|
|
- .drafts-content,
|
|
|
- .my-works-content {
|
|
|
- max-width: 400px;
|
|
|
- max-height: 80vh;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .drafts-list,
|
|
|
- .works-content {
|
|
|
- max-height: 400px;
|
|
|
- overflow-y: auto;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-item,
|
|
|
- .work-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- padding: 15px;
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- margin-bottom: 12px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-item:hover,
|
|
|
- .work-item:hover {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .draft-preview,
|
|
|
- .work-preview {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- border-radius: 8px;
|
|
|
- background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-info,
|
|
|
- .work-info {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-title,
|
|
|
- .work-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-time {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .work-stats {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-actions,
|
|
|
- .work-actions {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-actions button,
|
|
|
- .work-actions button {
|
|
|
- padding: 6px 12px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 6px;
|
|
|
- background: white;
|
|
|
- color: #666;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-actions button:hover,
|
|
|
- .work-actions button:hover {
|
|
|
- border-color: #ff6b6b;
|
|
|
- color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- /* 作品标签页 */
|
|
|
- .works-tabs {
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid #e9ecef;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab {
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- border-bottom: 2px solid transparent;
|
|
|
- transition: all 0.3s ease;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .tab.active {
|
|
|
- color: #ff6b6b;
|
|
|
- border-bottom-color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .tab:hover {
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- /* 数据分析 */
|
|
|
- .analytics-summary {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 15px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .analytics-item {
|
|
|
- padding: 20px;
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- background: linear-gradient(135deg, rgba(255, 107, 107, 0.05), rgba(255, 167, 38, 0.05));
|
|
|
- }
|
|
|
-
|
|
|
- .analytics-number {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 700;
|
|
|
- color: #ff6b6b;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .analytics-label {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 响应式调整 */
|
|
|
- @media (max-width: 380px) {
|
|
|
- .upload-modal-content {
|
|
|
- margin: 10px;
|
|
|
- max-width: calc(100% - 20px);
|
|
|
- }
|
|
|
-
|
|
|
- .upload-steps {
|
|
|
- padding: 15px 20px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-step {
|
|
|
- padding: 0 20px 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-modal-footer {
|
|
|
- padding: 15px 20px;
|
|
|
- }
|
|
|
-
|
|
|
- /* AI推荐引擎小屏幕优化 */
|
|
|
- .ai-engine-card {
|
|
|
- margin: 15px;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-quick-actions {
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action {
|
|
|
- padding: 12px 10px;
|
|
|
- min-height: 45px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-text {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-items {
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-item {
|
|
|
- padding: 12px 10px;
|
|
|
- min-height: 65px;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-image {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-title {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-tags {
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-preview-results h4 {
|
|
|
- font-size: 15px;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: 320px) {
|
|
|
- /* 极小屏幕优化 */
|
|
|
- .ai-quick-actions {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action {
|
|
|
- justify-content: center;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-items {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .community-stats {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- margin: 20px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .stat-item {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .stat-number {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- .stat-label {
|
|
|
- font-size: 12px;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
-
|
|
|
- /* 个人中心 */
|
|
|
- .profile-page {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-header {
|
|
|
- background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
|
|
|
- padding: 30px 20px;
|
|
|
- text-align: center;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255,255,255,0.3);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 36px;
|
|
|
- margin: 0 auto 15px;
|
|
|
- border: 3px solid rgba(255,255,255,0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .profile-menu {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 15px;
|
|
|
- background: white;
|
|
|
- border-radius: 12px;
|
|
|
- margin-bottom: 10px;
|
|
|
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item:hover {
|
|
|
- transform: translateX(5px);
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
|
|
- }
|
|
|
-
|
|
|
- .menu-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-icon {
|
|
|
- font-size: 18px;
|
|
|
- color: #667eea;
|
|
|
- }
|
|
|
-
|
|
|
- /* 响应式设计 */
|
|
|
- @media (max-width: 480px) {
|
|
|
- .app-container {
|
|
|
- max-width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-nav {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 滚动条样式 */
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- ::-webkit-scrollbar-track {
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- background: rgba(0,0,0,0.2);
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 页面切换动画 */
|
|
|
- .page {
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .page.fade-out {
|
|
|
- opacity: 0;
|
|
|
- transform: translateX(-20px);
|
|
|
- }
|
|
|
-
|
|
|
- .page.fade-in {
|
|
|
- opacity: 1;
|
|
|
- transform: translateX(0);
|
|
|
- }
|
|
|
-
|
|
|
- /* 3D试衣间样式 */
|
|
|
- .fitting-flow-nav {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin: 20px 0;
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .flow-step {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 15px 20px;
|
|
|
- margin: 0 10px;
|
|
|
- border-radius: 12px;
|
|
|
- background: #f8f9fa;
|
|
|
- border: 2px solid transparent;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- min-width: 80px;
|
|
|
- }
|
|
|
-
|
|
|
- .flow-step.active {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- border-color: #667eea;
|
|
|
- }
|
|
|
-
|
|
|
- .step-icon {
|
|
|
- font-size: 20px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .step-text {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .fitting-step {
|
|
|
- margin: 0 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .step-container {
|
|
|
- background: white;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 25px;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .step-title {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 20px;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- /* 照片上传样式 */
|
|
|
- .upload-methods {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 15px;
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-method {
|
|
|
- padding: 20px;
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-method.active {
|
|
|
- border-color: #667eea;
|
|
|
- background: #f8f9ff;
|
|
|
- }
|
|
|
-
|
|
|
- .method-icon {
|
|
|
- font-size: 24px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .method-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .method-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-interface, .gallery-interface {
|
|
|
- margin: 20px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-preview {
|
|
|
- height: 300px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 15px;
|
|
|
- border: 2px dashed #dee2e6;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-placeholder {
|
|
|
- text-align: center;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-icon {
|
|
|
- font-size: 48px;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-text {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-hint {
|
|
|
- font-size: 12px;
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
-
|
|
|
- .pose-guide {
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- right: 20px;
|
|
|
- background: rgba(0,0,0,0.7);
|
|
|
- color: white;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 8px;
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .guide-silhouette {
|
|
|
- font-size: 24px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-controls {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-btn {
|
|
|
- padding: 10px 20px;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- background: #667eea;
|
|
|
- color: white;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-btn:hover {
|
|
|
- background: #5a6fd8;
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .camera-btn.capture {
|
|
|
- background: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-btn.switch {
|
|
|
- background: #4ecdc4;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-zone {
|
|
|
- height: 200px;
|
|
|
- border: 2px dashed #dee2e6;
|
|
|
- border-radius: 12px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-zone:hover {
|
|
|
- border-color: #667eea;
|
|
|
- background: #f8f9ff;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-icon {
|
|
|
- font-size: 36px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-text {
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-hint {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-area {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-container {
|
|
|
- position: relative;
|
|
|
- height: 300px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-controls {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-btn {
|
|
|
- padding: 8px 16px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 6px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-btn.confirm {
|
|
|
- background: #28a745;
|
|
|
- color: white;
|
|
|
- border-color: #28a745;
|
|
|
- }
|
|
|
-
|
|
|
- /* 姿势校准样式 */
|
|
|
- .pose-calibration {
|
|
|
- margin-top: 25px;
|
|
|
- padding: 20px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .calibration-display {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 20px;
|
|
|
- margin: 20px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .body-keypoints {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .keypoint {
|
|
|
- padding: 10px;
|
|
|
- background: white;
|
|
|
- border-radius: 8px;
|
|
|
- border-left: 4px solid #28a745;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .calibration-status {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .status-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .status-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .calibration-actions {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 15px;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .calib-btn {
|
|
|
- padding: 10px 20px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 8px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .calib-btn.next {
|
|
|
- background: #28a745;
|
|
|
- color: white;
|
|
|
- border-color: #28a745;
|
|
|
- }
|
|
|
-
|
|
|
- /* 服装选择器样式 */
|
|
|
- .clothing-tabs {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 25px;
|
|
|
- border-bottom: 1px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-tab {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 8px;
|
|
|
- padding: 15px 10px;
|
|
|
- cursor: pointer;
|
|
|
- border-bottom: 2px solid transparent;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-tab.active {
|
|
|
- border-bottom-color: #667eea;
|
|
|
- color: #667eea;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-text {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-count {
|
|
|
- background: #e9ecef;
|
|
|
- color: #666;
|
|
|
- padding: 2px 6px;
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 11px;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-tab.active .tab-count {
|
|
|
- background: #667eea;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .design-grid, .trending-grid, .brand-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item, .trending-item, .brand-item {
|
|
|
- background: white;
|
|
|
- border-radius: 12px;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item:hover, .trending-item:hover, .brand-item:hover {
|
|
|
- transform: translateY(-5px);
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
|
|
- }
|
|
|
-
|
|
|
- .design-preview, .trending-preview, .brand-preview {
|
|
|
- position: relative;
|
|
|
- height: 120px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .design-image, .trending-image, .brand-image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .design-overlay {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(0,0,0,0.7);
|
|
|
- color: white;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- opacity: 0;
|
|
|
- transition: opacity 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item:hover .design-overlay {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-btn {
|
|
|
- padding: 6px 12px;
|
|
|
- background: #667eea;
|
|
|
- border-radius: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .design-info, .trending-info, .brand-item-info {
|
|
|
- padding: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-name, .trending-name, .item-name {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 13px;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-meta, .trending-author {
|
|
|
- font-size: 11px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .trending-stats {
|
|
|
- position: absolute;
|
|
|
- top: 8px;
|
|
|
- right: 8px;
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .stat {
|
|
|
- background: rgba(0,0,0,0.7);
|
|
|
- color: white;
|
|
|
- padding: 4px 6px;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-tag {
|
|
|
- position: absolute;
|
|
|
- top: 8px;
|
|
|
- left: 8px;
|
|
|
- background: #ff6b6b;
|
|
|
- color: white;
|
|
|
- padding: 4px 8px;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 10px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .item-price {
|
|
|
- color: #ff6b6b;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .trending-filter {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .filter-select {
|
|
|
- padding: 8px 12px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 6px;
|
|
|
- background: white;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-collection {
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 15px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-logo {
|
|
|
- font-size: 32px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-name {
|
|
|
- font-weight: 700;
|
|
|
- font-size: 16px;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-actions, .fitting-actions {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-btn, .fitting-btn {
|
|
|
- padding: 12px 24px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 8px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- font-weight: 600;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-btn.next, .fitting-btn.next {
|
|
|
- background: #28a745;
|
|
|
- color: white;
|
|
|
- border-color: #28a745;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-btn.back, .fitting-btn.back {
|
|
|
- background: #6c757d;
|
|
|
- color: white;
|
|
|
- border-color: #6c757d;
|
|
|
- }
|
|
|
-
|
|
|
- /* 试衣展示系统样式 */
|
|
|
- .fitting-display {
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .fitting-viewport {
|
|
|
- height: 400px;
|
|
|
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
- border-radius: 15px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .user-photo-layer, .clothing-layer {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .photo-placeholder, .clothing-placeholder {
|
|
|
- font-size: 16px;
|
|
|
- color: #666;
|
|
|
- background: rgba(255,255,255,0.8);
|
|
|
- padding: 20px;
|
|
|
- border-radius: 12px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .fitting-indicators {
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- left: 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .fit-indicator {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- background: rgba(255,255,255,0.9);
|
|
|
- padding: 8px 12px;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .fit-indicator.active {
|
|
|
- background: rgba(102, 126, 234, 0.9);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .indicator-icon {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 交互控制面板样式 */
|
|
|
- .interaction-panel {
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .control-sections {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .control-section {
|
|
|
- background: white;
|
|
|
- padding: 15px;
|
|
|
- border-radius: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .section-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 15px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .rotation-controls, .lighting-controls, .compare-controls {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
-
|
|
|
- .rotation-btn, .lighting-btn, .compare-btn {
|
|
|
- padding: 8px 16px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 8px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- font-size: 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .rotation-btn:hover, .lighting-btn:hover, .compare-btn:hover {
|
|
|
- background: #f8f9fa;
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .lighting-btn.active, .compare-btn.active {
|
|
|
- background: #667eea;
|
|
|
- color: white;
|
|
|
- border-color: #667eea;
|
|
|
- }
|
|
|
-
|
|
|
- .gesture-hint {
|
|
|
- text-align: center;
|
|
|
- font-size: 11px;
|
|
|
- color: #666;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .light-icon, .compare-icon {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 输出功能样式 */
|
|
|
- .output-panel {
|
|
|
- background: white;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .output-actions {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- padding: 15px;
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn:hover {
|
|
|
- border-color: #667eea;
|
|
|
- background: #f8f9ff;
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn.save {
|
|
|
- border-color: #28a745;
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn.share {
|
|
|
- border-color: #17a2b8;
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn.purchase {
|
|
|
- border-color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .output-icon {
|
|
|
- font-size: 24px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .output-text {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .output-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .output-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .fitting-btn.retry {
|
|
|
- background: #ffc107;
|
|
|
- color: #212529;
|
|
|
- border-color: #ffc107;
|
|
|
- }
|
|
|
-
|
|
|
- /* 移动端适配 */
|
|
|
- @media (max-width: 768px) {
|
|
|
- .fitting-flow-nav {
|
|
|
- padding: 0 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .flow-step {
|
|
|
- margin: 0 5px;
|
|
|
- padding: 10px 15px;
|
|
|
- min-width: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .step-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .step-text {
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-methods {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
-
|
|
|
- .design-grid, .trending-grid, .brand-grid {
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- }
|
|
|
-
|
|
|
- .control-sections {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
-
|
|
|
- .rotation-controls, .lighting-controls, .compare-controls {
|
|
|
- justify-content: space-around;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-actions, .fitting-actions {
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-btn, .fitting-btn {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <div class="app-container">
|
|
|
- <!-- 首页 -->
|
|
|
- <div id="home-page" class="page">
|
|
|
- <header class="header">
|
|
|
- <div class="header-content">
|
|
|
- <h1>FashionCraft</h1>
|
|
|
- <p>让创意穿在身上</p>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
-
|
|
|
- <main class="main-content">
|
|
|
- <!-- 轮播区域 -->
|
|
|
- <section class="banner-section">
|
|
|
- <div class="banner-slider" id="bannerSlider">
|
|
|
- <div class="banner-slide">
|
|
|
- <div>
|
|
|
- <div style="font-size: 24px; margin-bottom: 10px;">🎨</div>
|
|
|
- <div>春季新品发布</div>
|
|
|
- <div style="font-size: 14px; opacity: 0.8;">个性化设计，独一无二</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="banner-slide" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">
|
|
|
- <div>
|
|
|
- <div style="font-size: 24px; margin-bottom: 10px;">✨</div>
|
|
|
- <div>AI智能搭配</div>
|
|
|
- <div style="font-size: 14px; opacity: 0.8;">科技赋能时尚创意</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="banner-slide" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
|
|
|
- <div>
|
|
|
- <div style="font-size: 24px; margin-bottom: 10px;">🏆</div>
|
|
|
- <div>设计大赛进行中</div>
|
|
|
- <div style="font-size: 14px; opacity: 0.8;">万元奖金等你来拿</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="banner-indicators">
|
|
|
- <div class="indicator active" data-slide="0"></div>
|
|
|
- <div class="indicator" data-slide="1"></div>
|
|
|
- <div class="indicator" data-slide="2"></div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- 快速设计入口 -->
|
|
|
- <section class="quick-design" onclick="showDesignModal()">
|
|
|
- <h2>开始设计</h2>
|
|
|
- <p>点击开启你的创意之旅</p>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- 热门作品 -->
|
|
|
- <section class="popular-works">
|
|
|
- <h3 class="section-title">热门作品</h3>
|
|
|
- <div class="works-grid">
|
|
|
- <div class="work-item" onclick="showWorkDetail('森系小清新')">
|
|
|
- <div class="work-image">🌿</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">森系小清新</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 2.3k</span>
|
|
|
- <span>💬 186</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-item" onclick="showWorkDetail('复古摩登')">
|
|
|
- <div class="work-image" style="background: linear-gradient(45deg, #ffd89b 0%, #19547b 100%);">🎭</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">复古摩登</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 1.8k</span>
|
|
|
- <span>💬 142</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-item" onclick="showWorkDetail('未来科技')">
|
|
|
- <div class="work-image" style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);">🚀</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">未来科技</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 3.1k</span>
|
|
|
- <span>💬 256</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-item" onclick="showWorkDetail('简约现代')">
|
|
|
- <div class="work-image" style="background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);">🏛️</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">简约现代</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 1.5k</span>
|
|
|
- <span>💬 98</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- AI推荐引擎入口 -->
|
|
|
- <section class="ai-recommend-engine">
|
|
|
- <div class="ai-engine-card">
|
|
|
- <div class="ai-engine-header">
|
|
|
- <div class="ai-brand">
|
|
|
- <span class="ai-logo">🤖</span>
|
|
|
- <div class="ai-brand-text">
|
|
|
- <h3>AI时尚顾问</h3>
|
|
|
- <p>专业搭配 · 智能推荐</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="ai-status">
|
|
|
- <span class="status-dot"></span>
|
|
|
- <span class="status-text">在线</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="ai-quick-actions">
|
|
|
- <div class="quick-action" onclick="openAIChat('occasion')">
|
|
|
- <span class="action-icon">🎯</span>
|
|
|
- <span class="action-text">场合搭配</span>
|
|
|
- </div>
|
|
|
- <div class="quick-action" onclick="openAIChat('color')">
|
|
|
- <span class="action-icon">🎨</span>
|
|
|
- <span class="action-text">配色建议</span>
|
|
|
- </div>
|
|
|
- <div class="quick-action" onclick="openAIChat('style')">
|
|
|
- <span class="action-icon">✨</span>
|
|
|
- <span class="action-text">风格分析</span>
|
|
|
- </div>
|
|
|
- <div class="quick-action" onclick="openAIChat('free')">
|
|
|
- <span class="action-icon">💬</span>
|
|
|
- <span class="action-text">自由对话</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 设计中心页面 -->
|
|
|
- <div id="design-page" class="page design-tools">
|
|
|
- <header class="header">
|
|
|
- <div class="header-content">
|
|
|
- <h1>3D设计中心</h1>
|
|
|
- <p>专业级颜色DIY设计器</p>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
-
|
|
|
- <main class="main-content">
|
|
|
- <!-- 实时3D预览系统 -->
|
|
|
- <div class="design-preview-system">
|
|
|
- <div class="preview-container">
|
|
|
- <div class="preview-3d-enhanced">
|
|
|
- <div class="model-3d-wrapper">
|
|
|
- <div class="clothing-preview" id="main3DModel">
|
|
|
- <div class="clothing-layer" id="layer-s1">
|
|
|
- <img src="切片图共7个/切片图共7个/蓝色/S1.png" alt="S1部位" class="part-image" data-part="s1">
|
|
|
- </div>
|
|
|
- <div class="clothing-layer" id="layer-t1">
|
|
|
- <img src="切片图共7个/切片图共7个/蓝色/T1.png" alt="T1部位" class="part-image" data-part="t1">
|
|
|
- </div>
|
|
|
- <div class="clothing-layer" id="layer-y1">
|
|
|
- <img src="切片图共7个/切片图共7个/蓝色/Y1.png" alt="Y1部位" class="part-image" data-part="y1">
|
|
|
- </div>
|
|
|
- <div class="clothing-layer" id="layer-z1">
|
|
|
- <img src="切片图共7个/切片图共7个/蓝色/Z1.png" alt="Z1部位" class="part-image" data-part="z1">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="model-highlights" id="modelHighlights"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 3D控制面板 -->
|
|
|
- <div class="preview-controls">
|
|
|
- <div class="control-group">
|
|
|
- <button class="control-btn" onclick="rotateModel('left')" title="向左旋转">↻</button>
|
|
|
- <button class="control-btn" onclick="rotateModel('right')" title="向右旋转">↺</button>
|
|
|
- <button class="control-btn" onclick="resetModelView()" title="重置视角">⌂</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 3D分区控制面板 -->
|
|
|
- <div class="zone-control-panel">
|
|
|
- <div class="panel-header">
|
|
|
- <h3>分区控制面板</h3>
|
|
|
- <button class="expand-btn" onclick="toggleZonePanel()">⌄</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="panel-content">
|
|
|
- <!-- 部位选择器（胶囊式Tab） -->
|
|
|
- <div class="body-part-selector">
|
|
|
- <div class="part-tabs">
|
|
|
- <button class="part-tab active" data-part="overall" onclick="selectBodyPart('overall')">
|
|
|
- <span class="tab-icon">🎯</span>
|
|
|
- <span class="tab-text">整体</span>
|
|
|
- </button>
|
|
|
- <button class="part-tab" data-part="s1" onclick="selectBodyPart('s1')">
|
|
|
- <span class="tab-icon">👔</span>
|
|
|
- <span class="tab-text">S1部位</span>
|
|
|
- </button>
|
|
|
- <button class="part-tab" data-part="t1" onclick="selectBodyPart('t1')">
|
|
|
- <span class="tab-icon">👕</span>
|
|
|
- <span class="tab-text">T1部位</span>
|
|
|
- </button>
|
|
|
- <button class="part-tab" data-part="y1" onclick="selectBodyPart('y1')">
|
|
|
- <span class="tab-icon">🎽</span>
|
|
|
- <span class="tab-text">Y1部位</span>
|
|
|
- </button>
|
|
|
- <button class="part-tab" data-part="z1" onclick="selectBodyPart('z1')">
|
|
|
- <span class="tab-icon">🧥</span>
|
|
|
- <span class="tab-text">Z1部位</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 色盘管理系统 -->
|
|
|
- <div class="color-management-system">
|
|
|
- <div class="color-system-header">
|
|
|
- <h3>智能色盘系统</h3>
|
|
|
- <div class="color-actions">
|
|
|
- <button class="action-btn" onclick="syncColorToAll()" title="同步当前色到所有部位">🔄</button>
|
|
|
- <button class="action-btn" onclick="showColorHistory()" title="查看配色历史">📚</button>
|
|
|
- <button class="action-btn" onclick="saveColorScheme()" title="保存配色方案">💾</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 分区色盘记忆 -->
|
|
|
- <div class="zone-color-memory">
|
|
|
- <div class="current-part-info">
|
|
|
- <span class="part-label">当前部位：</span>
|
|
|
- <span class="part-name" id="currentPartName">整体</span>
|
|
|
- <span class="color-indicator" id="currentPartColor" style="background: #ff6b6b;"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 主色盘 -->
|
|
|
- <div class="master-color-picker">
|
|
|
- <div class="color-picker-section">
|
|
|
- <h4>基础色盘</h4>
|
|
|
- <div class="color-palette enhanced-palette">
|
|
|
- <!-- 原有颜色 -->
|
|
|
- <div class="color-swatch" style="background: #3498db" onclick="selectClothingColor('蓝色')" data-color="蓝色" title="蓝色"></div>
|
|
|
- <div class="color-swatch" style="background: #e91e63" onclick="selectClothingColor('粉色')" data-color="粉色" title="粉色"></div>
|
|
|
- <div class="color-swatch" style="background: #8bc34a" onclick="selectClothingColor('牛油果绿')" data-color="牛油果绿" title="牛油果绿"></div>
|
|
|
- <div class="color-swatch" style="background: #ffffff; border: 2px solid #ddd" onclick="selectClothingColor('白色')" data-color="白色" title="白色"></div>
|
|
|
- <div class="color-swatch" style="background: #2c3e50" onclick="selectClothingColor('黑色')" data-color="黑色" title="黑色"></div>
|
|
|
- <div class="color-swatch" style="background: #ff9800" onclick="selectClothingColor('橘色')" data-color="橘色" title="橘色"></div>
|
|
|
- <div class="color-swatch" style="background: #9e9e9e" onclick="selectClothingColor('利灰')" data-color="利灰" title="利灰"></div>
|
|
|
-
|
|
|
- <!-- 新增颜色 -->
|
|
|
- <div class="color-swatch" style="background: #1e40af" onclick="selectClothingColor('宝蓝色')" data-color="宝蓝色" title="宝蓝色"></div>
|
|
|
- <div class="color-swatch" style="background: #d2b48c" onclick="selectClothingColor('浅驼色')" data-color="浅驼色" title="浅驼色"></div>
|
|
|
- <div class="color-swatch" style="background: #9ca3af" onclick="selectClothingColor('测试色')" data-color="测试色" title="测试色"></div>
|
|
|
- <div class="color-swatch" style="background: #374151" onclick="selectClothingColor('深灰绿')" data-color="深灰绿" title="深灰绿"></div>
|
|
|
- <div class="color-swatch" style="background: #581c87" onclick="selectClothingColor('深紫色')" data-color="深紫色" title="深紫色"></div>
|
|
|
- <div class="color-swatch" style="background: #14532d" onclick="selectClothingColor('深绿色')" data-color="深绿色" title="深绿色"></div>
|
|
|
- <div class="color-swatch" style="background: #dc2626" onclick="selectClothingColor('真朱')" data-color="真朱" title="真朱"></div>
|
|
|
- <div class="color-swatch" style="background: #fbbf24" onclick="selectClothingColor('睿智金')" data-color="睿智金" title="睿智金"></div>
|
|
|
- <div class="color-swatch" style="background: #ef4444" onclick="selectClothingColor('红色')" data-color="红色" title="红色"></div>
|
|
|
- <div class="color-swatch" style="background: #84cc16" onclick="selectClothingColor('萌萌绿')" data-color="萌萌绿" title="萌萌绿"></div>
|
|
|
- <div class="color-swatch" style="background: #0891b2" onclick="selectClothingColor('蒂芙尼蓝')" data-color="蒂芙尼蓝" title="蒂芙尼蓝"></div>
|
|
|
- <div class="color-swatch" style="background: #3b82f6" onclick="selectClothingColor('长春花蓝')" data-color="长春花蓝" title="长春花蓝"></div>
|
|
|
- <div class="color-swatch" style="background: #6b46c1" onclick="selectClothingColor('青紫')" data-color="青紫" title="青紫"></div>
|
|
|
- <div class="color-swatch" style="background: #eab308" onclick="selectClothingColor('靓丽黄')" data-color="靓丽黄" title="靓丽黄"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <!-- 自定义颜色 -->
|
|
|
- <div class="color-picker-section">
|
|
|
- <h4>自定义颜色</h4>
|
|
|
- <div class="custom-color-controls">
|
|
|
- <input type="color" id="customColorPicker" value="#ff6b6b" onchange="selectCustomColor(this.value)">
|
|
|
- <button class="add-custom-btn" onclick="addCustomColor()">添加到色盘</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 历史配色库 -->
|
|
|
- <div class="color-history-section" id="colorHistorySection" style="display: none;">
|
|
|
- <h4>配色历史</h4>
|
|
|
- <div class="history-schemes">
|
|
|
- <div class="scheme-item" onclick="loadColorScheme('scheme1')">
|
|
|
- <div class="scheme-preview">
|
|
|
- <div class="scheme-color" style="background: #ff6b6b;"></div>
|
|
|
- <div class="scheme-color" style="background: #4ecdc4;"></div>
|
|
|
- <div class="scheme-color" style="background: #ffeaa7;"></div>
|
|
|
- </div>
|
|
|
- <span class="scheme-name">夏日活力</span>
|
|
|
- </div>
|
|
|
- <div class="scheme-item" onclick="loadColorScheme('scheme2')">
|
|
|
- <div class="scheme-preview">
|
|
|
- <div class="scheme-color" style="background: #667eea;"></div>
|
|
|
- <div class="scheme-color" style="background: #764ba2;"></div>
|
|
|
- <div class="scheme-color" style="background: #a29bfe;"></div>
|
|
|
- </div>
|
|
|
- <span class="scheme-name">深海紫韵</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 高级定制工具 -->
|
|
|
- <div class="advanced-tools">
|
|
|
- <div class="tools-header">
|
|
|
- <h3>高级定制</h3>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="advanced-tool-grid">
|
|
|
- <div class="advanced-tool-card" onclick="openAdvancedEmbroidery()">
|
|
|
- <span class="tool-icon">🧵</span>
|
|
|
- <div class="tool-content">
|
|
|
- <div class="tool-title">刺绣编辑器</div>
|
|
|
- <div class="tool-desc">支持按部位精确定位</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="advanced-tool-card" onclick="openTextureSystem()">
|
|
|
- <span class="tool-icon">🎨</span>
|
|
|
- <div class="tool-content">
|
|
|
- <div class="tool-title">贴图系统</div>
|
|
|
- <div class="tool-desc">可指定应用区域</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="advanced-tool-card" onclick="openPatternLibrary()">
|
|
|
- <span class="tool-icon">✨</span>
|
|
|
- <div class="tool-content">
|
|
|
- <div class="tool-title">图案库</div>
|
|
|
- <div class="tool-desc">海量设计素材</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="advanced-tool-card" onclick="openAIDesigner()">
|
|
|
- <span class="tool-icon">🤖</span>
|
|
|
- <div class="tool-content">
|
|
|
- <div class="tool-title">AI设计师</div>
|
|
|
- <div class="tool-desc">智能配色建议</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 3D试衣间页面 -->
|
|
|
- <div id="ar-page" class="page" style="display: none;">
|
|
|
- <header class="header">
|
|
|
- <div class="header-content">
|
|
|
- <h1>3D试衣间</h1>
|
|
|
- <p>智能试穿，完美贴合</p>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
-
|
|
|
- <main class="main-content">
|
|
|
- <!-- 核心流程导航 -->
|
|
|
- <div class="fitting-flow-nav">
|
|
|
- <div class="flow-step active" data-step="upload">
|
|
|
- <div class="step-icon">📷</div>
|
|
|
- <div class="step-text">照片上传</div>
|
|
|
- </div>
|
|
|
- <div class="flow-step" data-step="clothing">
|
|
|
- <div class="step-icon">👕</div>
|
|
|
- <div class="step-text">服装选择</div>
|
|
|
- </div>
|
|
|
- <div class="flow-step" data-step="fitting">
|
|
|
- <div class="step-icon">✨</div>
|
|
|
- <div class="step-text">试衣展示</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤1: 照片上传入口 -->
|
|
|
- <div class="fitting-step" id="upload-step">
|
|
|
- <div class="step-container">
|
|
|
- <h3 class="step-title">📷 照片上传入口</h3>
|
|
|
-
|
|
|
- <!-- 上传方式选择 -->
|
|
|
- <div class="upload-methods">
|
|
|
- <div class="upload-method active" data-method="camera" onclick="selectUploadMethod('camera')">
|
|
|
- <div class="method-icon">📹</div>
|
|
|
- <div class="method-title">拍照模式</div>
|
|
|
- <div class="method-desc">实时摄像头拍摄</div>
|
|
|
- </div>
|
|
|
- <div class="upload-method" data-method="gallery" onclick="selectUploadMethod('gallery')">
|
|
|
- <div class="method-icon">🖼️</div>
|
|
|
- <div class="method-title">相册选择</div>
|
|
|
- <div class="method-desc">支持裁剪调整</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 拍照模式界面 -->
|
|
|
- <div class="camera-interface" id="camera-mode">
|
|
|
- <div class="camera-preview">
|
|
|
- <div class="camera-placeholder">
|
|
|
- <div class="camera-icon">📷</div>
|
|
|
- <div class="camera-text">点击启动摄像头</div>
|
|
|
- <div class="camera-hint">请确保良好的光线条件</div>
|
|
|
- </div>
|
|
|
- <!-- 姿势引导框 -->
|
|
|
- <div class="pose-guide">
|
|
|
- <div class="guide-silhouette">🧑🦱</div>
|
|
|
- <div class="guide-text">请保持正面站立姿势</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="camera-controls">
|
|
|
- <button class="camera-btn" onclick="startCamera()">启动摄像头</button>
|
|
|
- <button class="camera-btn capture" onclick="capturePhoto()">拍摄照片</button>
|
|
|
- <button class="camera-btn switch" onclick="switchCamera()">切换摄像头</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 相册选择界面 -->
|
|
|
- <div class="gallery-interface" id="gallery-mode" style="display: none;">
|
|
|
- <div class="gallery-upload">
|
|
|
- <input type="file" id="photo-upload" accept="image/*" style="display: none;" onchange="handlePhotoUpload(this)">
|
|
|
- <div class="upload-zone" onclick="document.getElementById('photo-upload').click()">
|
|
|
- <div class="upload-icon">📁</div>
|
|
|
- <div class="upload-text">选择照片</div>
|
|
|
- <div class="upload-hint">支持JPG、PNG格式</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 图片裁剪区域 -->
|
|
|
- <div class="crop-area" id="crop-area" style="display: none;">
|
|
|
- <div class="crop-container">
|
|
|
- <canvas id="crop-canvas"></canvas>
|
|
|
- <div class="crop-overlay"></div>
|
|
|
- </div>
|
|
|
- <div class="crop-controls">
|
|
|
- <button class="crop-btn" onclick="resetCrop()">重置</button>
|
|
|
- <button class="crop-btn confirm" onclick="confirmCrop()">确认裁剪</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 姿势校准系统 -->
|
|
|
- <div class="pose-calibration" id="pose-calibration" style="display: none;">
|
|
|
- <h4>🎯 姿势校准</h4>
|
|
|
- <div class="calibration-display">
|
|
|
- <div class="body-keypoints">
|
|
|
- <div class="keypoint head" data-point="head">头部</div>
|
|
|
- <div class="keypoint shoulder-left" data-point="shoulder-left">左肩</div>
|
|
|
- <div class="keypoint shoulder-right" data-point="shoulder-right">右肩</div>
|
|
|
- <div class="keypoint waist" data-point="waist">腰部</div>
|
|
|
- <div class="keypoint hip" data-point="hip">臀部</div>
|
|
|
- </div>
|
|
|
- <div class="calibration-status">
|
|
|
- <div class="status-item">
|
|
|
- <span class="status-icon">✅</span>
|
|
|
- <span>人体识别成功</span>
|
|
|
- </div>
|
|
|
- <div class="status-item">
|
|
|
- <span class="status-icon">✅</span>
|
|
|
- <span>关键点定位完成</span>
|
|
|
- </div>
|
|
|
- <div class="status-item">
|
|
|
- <span class="status-icon">⏳</span>
|
|
|
- <span>身形分析中...</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="calibration-actions">
|
|
|
- <button class="calib-btn" onclick="recalibrate()">重新校准</button>
|
|
|
- <button class="calib-btn next" onclick="nextStep('clothing')">下一步：选择服装</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤2: 服装选择器 -->
|
|
|
- <div class="fitting-step" id="clothing-step" style="display: none;">
|
|
|
- <div class="step-container">
|
|
|
- <h3 class="step-title">👕 服装选择器</h3>
|
|
|
-
|
|
|
- <!-- 服装分类标签 -->
|
|
|
- <div class="clothing-tabs">
|
|
|
- <div class="clothing-tab active" data-tab="my-designs" onclick="switchClothingTab('my-designs')">
|
|
|
- <span class="tab-icon">🎨</span>
|
|
|
- <span class="tab-text">我的设计</span>
|
|
|
- <span class="tab-count">12</span>
|
|
|
- </div>
|
|
|
- <div class="clothing-tab" data-tab="community" onclick="switchClothingTab('community')">
|
|
|
- <span class="tab-icon">🔥</span>
|
|
|
- <span class="tab-text">社区热门</span>
|
|
|
- <span class="tab-count">156</span>
|
|
|
- </div>
|
|
|
- <div class="clothing-tab" data-tab="brands" onclick="switchClothingTab('brands')">
|
|
|
- <span class="tab-icon">🏷️</span>
|
|
|
- <span class="tab-text">品牌合作</span>
|
|
|
- <span class="tab-count">89</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 我的设计列表 -->
|
|
|
- <div class="clothing-content" id="my-designs-content">
|
|
|
- <div class="design-grid">
|
|
|
- <div class="design-item" onclick="selectClothing('my-design-1')">
|
|
|
- <div class="design-preview">
|
|
|
- <img src="切片图/切片图/宝蓝色/宝蓝色.png" alt="我的设计1" class="design-image">
|
|
|
- <div class="design-overlay">
|
|
|
- <div class="preview-btn">预览效果</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-info">
|
|
|
- <div class="design-name">经典商务款</div>
|
|
|
- <div class="design-meta">创建于 2024-01-15</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectClothing('my-design-2')">
|
|
|
- <div class="design-preview">
|
|
|
- <img src="切片图/切片图/靓丽黄/靓丽黄.png" alt="我的设计2" class="design-image">
|
|
|
- <div class="design-overlay">
|
|
|
- <div class="preview-btn">预览效果</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-info">
|
|
|
- <div class="design-name">活力运动款</div>
|
|
|
- <div class="design-meta">创建于 2024-01-12</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectClothing('my-design-3')">
|
|
|
- <div class="design-preview">
|
|
|
- <img src="切片图/切片图/蒂芙尼蓝/蒂芙尼蓝.png" alt="我的设计3" class="design-image">
|
|
|
- <div class="design-overlay">
|
|
|
- <div class="preview-btn">预览效果</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-info">
|
|
|
- <div class="design-name">优雅晚装</div>
|
|
|
- <div class="design-meta">创建于 2024-01-10</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 社区热门列表 -->
|
|
|
- <div class="clothing-content" id="community-content" style="display: none;">
|
|
|
- <div class="trending-filter">
|
|
|
- <select class="filter-select">
|
|
|
- <option>今日热门</option>
|
|
|
- <option>本周热门</option>
|
|
|
- <option>本月热门</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="trending-grid">
|
|
|
- <div class="trending-item" onclick="selectClothing('trending-1')">
|
|
|
- <div class="trending-preview">
|
|
|
- <img src="切片图/切片图/深紫色/深紫色.png" alt="热门设计1" class="trending-image">
|
|
|
- <div class="trending-stats">
|
|
|
- <span class="stat">❤️ 2.3k</span>
|
|
|
- <span class="stat">💬 156</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="trending-info">
|
|
|
- <div class="trending-name">神秘紫韵</div>
|
|
|
- <div class="trending-author">by 设计师Anna</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="trending-item" onclick="selectClothing('trending-2')">
|
|
|
- <div class="trending-preview">
|
|
|
- <img src="切片图/切片图/萌萌绿/萌萌绿.png" alt="热门设计2" class="trending-image">
|
|
|
- <div class="trending-stats">
|
|
|
- <span class="stat">❤️ 1.8k</span>
|
|
|
- <span class="stat">💬 89</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="trending-info">
|
|
|
- <div class="trending-name">春日萌动</div>
|
|
|
- <div class="trending-author">by 创意大师Leo</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 品牌合作列表 -->
|
|
|
- <div class="clothing-content" id="brands-content" style="display: none;">
|
|
|
- <div class="brand-collection">
|
|
|
- <div class="brand-header">
|
|
|
- <div class="brand-logo">🏷️</div>
|
|
|
- <div class="brand-info">
|
|
|
- <div class="brand-name">时尚前线</div>
|
|
|
- <div class="brand-desc">2024春季新品系列</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="brand-grid">
|
|
|
- <div class="brand-item" onclick="selectClothing('brand-1')">
|
|
|
- <div class="brand-preview">
|
|
|
- <img src="切片图/切片图/真朱/真朱.png" alt="品牌设计1" class="brand-image">
|
|
|
- <div class="brand-tag">限量款</div>
|
|
|
- </div>
|
|
|
- <div class="brand-item-info">
|
|
|
- <div class="item-name">经典红韵</div>
|
|
|
- <div class="item-price">¥899</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="brand-item" onclick="selectClothing('brand-2')">
|
|
|
- <div class="brand-preview">
|
|
|
- <img src="切片图/切片图/睿智金/睿智金.png" alt="品牌设计2" class="brand-image">
|
|
|
- <div class="brand-tag">新品</div>
|
|
|
- </div>
|
|
|
- <div class="brand-item-info">
|
|
|
- <div class="item-name">智慧金辉</div>
|
|
|
- <div class="item-price">¥1299</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="clothing-actions">
|
|
|
- <button class="clothing-btn back" onclick="previousStep('upload')">上一步</button>
|
|
|
- <button class="clothing-btn next" onclick="nextStep('fitting')">开始试穿</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤3: 试衣展示系统 -->
|
|
|
- <div class="fitting-step" id="fitting-step" style="display: none;">
|
|
|
- <div class="step-container">
|
|
|
- <h3 class="step-title">✨ 试衣展示系统</h3>
|
|
|
-
|
|
|
- <!-- 试穿预览区域 -->
|
|
|
- <div class="fitting-display">
|
|
|
- <div class="fitting-viewport">
|
|
|
- <div class="user-photo-layer">
|
|
|
- <div class="photo-placeholder">用户照片将显示在这里</div>
|
|
|
- </div>
|
|
|
- <div class="clothing-layer">
|
|
|
- <div class="clothing-placeholder">选中的服装将叠加在这里</div>
|
|
|
- </div>
|
|
|
- <!-- 智能贴合引擎指示器 -->
|
|
|
- <div class="fitting-indicators">
|
|
|
- <div class="fit-indicator active" data-status="processing">
|
|
|
- <span class="indicator-icon">🔄</span>
|
|
|
- <span class="indicator-text">布料物理模拟</span>
|
|
|
- </div>
|
|
|
- <div class="fit-indicator" data-status="completed">
|
|
|
- <span class="indicator-icon">✅</span>
|
|
|
- <span class="indicator-text">身形适配完成</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 交互控制面板 -->
|
|
|
- <div class="interaction-panel">
|
|
|
- <h4>🎮 交互控制面板</h4>
|
|
|
- <div class="control-sections">
|
|
|
- <!-- 旋转查看 -->
|
|
|
- <div class="control-section">
|
|
|
- <div class="section-title">旋转查看</div>
|
|
|
- <div class="rotation-controls">
|
|
|
- <button class="rotation-btn" onclick="rotateFitting('left')">⬅️ 左转</button>
|
|
|
- <button class="rotation-btn" onclick="rotateFitting('reset')">🎯 正面</button>
|
|
|
- <button class="rotation-btn" onclick="rotateFitting('right')">右转 ➡️</button>
|
|
|
- </div>
|
|
|
- <div class="gesture-hint">💡 支持手势滑动控制</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 光照调节 -->
|
|
|
- <div class="control-section">
|
|
|
- <div class="section-title">光照调节</div>
|
|
|
- <div class="lighting-controls">
|
|
|
- <button class="lighting-btn active" onclick="setFittingLight('natural')">
|
|
|
- <span class="light-icon">☀️</span>
|
|
|
- <span>自然光</span>
|
|
|
- </button>
|
|
|
- <button class="lighting-btn" onclick="setFittingLight('indoor')">
|
|
|
- <span class="light-icon">💡</span>
|
|
|
- <span>室内光</span>
|
|
|
- </button>
|
|
|
- <button class="lighting-btn" onclick="setFittingLight('studio')">
|
|
|
- <span class="light-icon">🎬</span>
|
|
|
- <span>摄影光</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 对比模式 -->
|
|
|
- <div class="control-section">
|
|
|
- <div class="section-title">对比模式</div>
|
|
|
- <div class="compare-controls">
|
|
|
- <button class="compare-btn active" onclick="toggleCompare('split')">
|
|
|
- <span class="compare-icon">⚖️</span>
|
|
|
- <span>左右对比</span>
|
|
|
- </button>
|
|
|
- <button class="compare-btn" onclick="toggleCompare('overlay')">
|
|
|
- <span class="compare-icon">🔄</span>
|
|
|
- <span>叠加对比</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 输出功能 -->
|
|
|
- <div class="output-panel">
|
|
|
- <h4>💾 输出功能</h4>
|
|
|
- <div class="output-actions">
|
|
|
- <button class="output-btn save" onclick="saveImageCard()">
|
|
|
- <span class="output-icon">💳</span>
|
|
|
- <div class="output-text">
|
|
|
- <div class="output-title">保存形象卡</div>
|
|
|
- <div class="output-desc">含服装信息和试穿效果</div>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- <button class="output-btn share" onclick="shareToCommunity()">
|
|
|
- <span class="output-icon">🌐</span>
|
|
|
- <div class="output-text">
|
|
|
- <div class="output-title">分享到社区</div>
|
|
|
- <div class="output-desc">让好友看到你的搭配</div>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- <button class="output-btn purchase" onclick="buyNow()">
|
|
|
- <span class="output-icon">🛒</span>
|
|
|
- <div class="output-text">
|
|
|
- <div class="output-title">一键购买</div>
|
|
|
- <div class="output-desc">立即下单同款服装</div>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="fitting-actions">
|
|
|
- <button class="fitting-btn back" onclick="previousStep('clothing')">重新选择</button>
|
|
|
- <button class="fitting-btn retry" onclick="retryFitting()">重新试穿</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 社区页面 -->
|
|
|
- <div id="community-page" class="page community-page">
|
|
|
- <div class="community-header">
|
|
|
- <div class="community-header-top">
|
|
|
- <h1>设计社区</h1>
|
|
|
- <!-- 新增：社区页面发布按钮 -->
|
|
|
- <button class="publish-btn" onclick="openUploadModal()">
|
|
|
- <span class="publish-icon">📝</span>
|
|
|
- 发布作品
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <p>与全球设计师交流创意</p>
|
|
|
- <div class="community-stats">
|
|
|
- <div class="stat-item">
|
|
|
- <div class="stat-number">12.8k</div>
|
|
|
- <div class="stat-label">活跃用户</div>
|
|
|
- </div>
|
|
|
- <div class="stat-item">
|
|
|
- <div class="stat-number">3.2k</div>
|
|
|
- <div class="stat-label">今日作品</div>
|
|
|
- </div>
|
|
|
- <div class="stat-item">
|
|
|
- <div class="stat-number">156</div>
|
|
|
- <div class="stat-label">在线设计师</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <main class="main-content">
|
|
|
- <div style="margin: 20px;">
|
|
|
- <!-- 热门话题 -->
|
|
|
- <div style="background: white; border-radius: 15px; padding: 20px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
|
|
|
- <h4 style="margin-bottom: 15px; font-size: 16px;">🔥 热门话题</h4>
|
|
|
- <div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
|
|
- <span style="background: #ff6b6b; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#春季时尚</span>
|
|
|
- <span style="background: #4ecdc4; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#环保设计</span>
|
|
|
- <span style="background: #45b7d1; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#极简主义</span>
|
|
|
- <span style="background: #96ceb4; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#复古回潮</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 设计师排行榜 -->
|
|
|
- <div style="background: white; border-radius: 15px; padding: 20px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
|
|
|
- <h4 style="margin-bottom: 15px; font-size: 16px;">🏆 本周设计师排行</h4>
|
|
|
- <div style="display: flex; flex-direction: column; gap: 12px;">
|
|
|
- <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-radius: 10px;">
|
|
|
- <div style="display: flex; align-items: center; gap: 12px;">
|
|
|
- <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #ff6b6b, #ffa726); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">1</div>
|
|
|
- <div>
|
|
|
- <div style="font-weight: 600; font-size: 14px;">设计大师Alex</div>
|
|
|
- <div style="font-size: 12px; color: #666;">点赞数: 8.9k</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="font-size: 20px;">👑</div>
|
|
|
- </div>
|
|
|
- <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-radius: 10px;">
|
|
|
- <div style="display: flex; align-items: center; gap: 12px;">
|
|
|
- <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #4ecdc4, #44a08d); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">2</div>
|
|
|
- <div>
|
|
|
- <div style="font-weight: 600; font-size: 14px;">时尚达人Lisa</div>
|
|
|
- <div style="font-size: 12px; color: #666;">点赞数: 7.2k</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="font-size: 20px;">🥈</div>
|
|
|
- </div>
|
|
|
- <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-radius: 10px;">
|
|
|
- <div style="display: flex; align-items: center; gap: 12px;">
|
|
|
- <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">3</div>
|
|
|
- <div>
|
|
|
- <div style="font-weight: 600; font-size: 14px;">创意师Mike</div>
|
|
|
- <div style="font-size: 12px; color: #666;">点赞数: 5.8k</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="font-size: 20px;">🥉</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 最新作品 -->
|
|
|
- <div style="background: white; border-radius: 15px; padding: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
|
|
|
- <h4 style="margin-bottom: 15px; font-size: 16px;">✨ 最新作品</h4>
|
|
|
- <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
|
|
|
- <div style="background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%); border-radius: 12px; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 36px; cursor: pointer; transition: all 0.3s ease;" onclick="likeWork(this)">🌸</div>
|
|
|
- <div style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); border-radius: 12px; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 36px; cursor: pointer; transition: all 0.3s ease;" onclick="likeWork(this)">⚡</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 个人中心页面 -->
|
|
|
- <div id="profile-page" class="page profile-page">
|
|
|
- <div class="profile-header">
|
|
|
- <div class="avatar">👤</div>
|
|
|
- <h2>时尚设计师</h2>
|
|
|
- <p>让创意成为生活的一部分</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="profile-menu">
|
|
|
- <div class="menu-item" onclick="showDrafts()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">🎨</span>
|
|
|
- <span>我的设计稿</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showMyWorks()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">📋</span>
|
|
|
- <span>我的作品</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showTryOnHistory()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">👕</span>
|
|
|
- <span>试穿历史</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showOrders()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">📦</span>
|
|
|
- <span>订单管理</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showCollections()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">❤️</span>
|
|
|
- <span>收藏夹</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showFollowers()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">👥</span>
|
|
|
- <span>粉丝管理</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showSettings()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">⚙️</span>
|
|
|
- <span>设置</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 底部导航 -->
|
|
|
- <nav class="bottom-nav">
|
|
|
- <div class="nav-item active" data-page="home">
|
|
|
- <div class="nav-icon">🏠</div>
|
|
|
- <div class="nav-text">首页</div>
|
|
|
- </div>
|
|
|
- <div class="nav-item" data-page="design">
|
|
|
- <div class="nav-icon">🎨</div>
|
|
|
- <div class="nav-text">设计</div>
|
|
|
- </div>
|
|
|
- <div class="nav-item" data-page="ar">
|
|
|
- <div class="nav-icon">📱</div>
|
|
|
- <div class="nav-text">试衣</div>
|
|
|
- </div>
|
|
|
- <div class="nav-item" data-page="community">
|
|
|
- <div class="nav-icon">👥</div>
|
|
|
- <div class="nav-text">社区</div>
|
|
|
- </div>
|
|
|
- <div class="nav-item" data-page="profile">
|
|
|
- <div class="nav-icon">👤</div>
|
|
|
- <div class="nav-text">我的</div>
|
|
|
- </div>
|
|
|
- </nav>
|
|
|
-
|
|
|
- <!-- AI对话悬浮球 -->
|
|
|
- <div id="aiFloatingBall" class="ai-floating-ball">
|
|
|
- <div class="floating-ball-icon">🤖</div>
|
|
|
- <div class="breathing-ring"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- AI全屏对话界面 -->
|
|
|
- <div id="aiChatModal" class="ai-chat-modal" style="display: none;">
|
|
|
- <div class="ai-chat-container">
|
|
|
- <!-- 对话头部 -->
|
|
|
- <div class="ai-chat-header">
|
|
|
- <div class="ai-chat-avatar">
|
|
|
- <span class="avatar-icon">🤖</span>
|
|
|
- <div class="avatar-status"></div>
|
|
|
- </div>
|
|
|
- <div class="ai-chat-info">
|
|
|
- <h3>AI时尚顾问</h3>
|
|
|
- <p id="aiChatSubtitle">智能搭配助手在线中...</p>
|
|
|
- </div>
|
|
|
- <button class="ai-chat-close" onclick="closeAIChat()">✕</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 对话消息区 -->
|
|
|
- <div class="ai-chat-messages" id="aiChatMessages">
|
|
|
- <div class="ai-message">
|
|
|
- <div class="message-avatar">🤖</div>
|
|
|
- <div class="message-content">
|
|
|
- <div class="message-text">
|
|
|
- 你好！我是你的专属AI时尚顾问✨<br>
|
|
|
- 我可以帮你进行服装搭配、配色建议、风格分析等。<br>
|
|
|
- 有什么可以帮助你的吗？
|
|
|
- </div>
|
|
|
- <div class="message-time">刚刚</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 快捷指令 -->
|
|
|
- <div class="ai-quick-commands" id="aiQuickCommands">
|
|
|
- <div class="quick-command" onclick="sendQuickCommand('帮我搭配一套商务装')">
|
|
|
- <span class="command-icon">👔</span>
|
|
|
- <span>商务装搭配</span>
|
|
|
- </div>
|
|
|
- <div class="quick-command" onclick="sendQuickCommand('推荐春季流行色')">
|
|
|
- <span class="command-icon">🌸</span>
|
|
|
- <span>春季流行色</span>
|
|
|
- </div>
|
|
|
- <div class="quick-command" onclick="sendQuickCommand('分析我的穿衣风格')">
|
|
|
- <span class="command-icon">✨</span>
|
|
|
- <span>风格分析</span>
|
|
|
- </div>
|
|
|
- <div class="quick-command" onclick="sendQuickCommand('约会穿什么好看')">
|
|
|
- <span class="command-icon">💕</span>
|
|
|
- <span>约会搭配</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 输入工具栏 -->
|
|
|
- <div class="ai-chat-input-area">
|
|
|
- <div class="input-toolbar">
|
|
|
- <button class="input-tool" onclick="startVoiceInput()" title="语音输入">
|
|
|
- <span class="tool-icon">🎤</span>
|
|
|
- </button>
|
|
|
- <button class="input-tool" onclick="uploadImage()" title="图片识别">
|
|
|
- <span class="tool-icon">📷</span>
|
|
|
- </button>
|
|
|
- <button class="input-tool" onclick="showEmoji()" title="表情">
|
|
|
- <span class="tool-icon">😊</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div class="input-container">
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- id="aiChatInput"
|
|
|
- placeholder="说说你的搭配需求..."
|
|
|
- onkeypress="handleChatInputKeypress(event)"
|
|
|
- >
|
|
|
- <button class="send-button" onclick="sendMessage()">
|
|
|
- <span class="send-icon">➤</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- AI推荐结果页面 -->
|
|
|
- <div id="aiRecommendationModal" class="ai-recommendation-modal" style="display: none;">
|
|
|
- <div class="recommendation-container">
|
|
|
- <div class="recommendation-header">
|
|
|
- <h2>🎯 专属推荐方案</h2>
|
|
|
- <button class="close-recommendation" onclick="closeRecommendation()">✕</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="recommendation-content">
|
|
|
- <!-- 3D穿搭展示 -->
|
|
|
- <div class="recommendation-3d-section">
|
|
|
- <div class="recommendation-3d-viewer">
|
|
|
- <div class="model-3d-container">
|
|
|
- <div class="model-3d-display">👤</div>
|
|
|
- <div class="model-controls">
|
|
|
- <button class="model-control" onclick="rotateModel('left')">↶</button>
|
|
|
- <button class="model-control" onclick="rotateModel('right')">↷</button>
|
|
|
- <button class="model-control" onclick="resetModel()">⌂</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 方案选择器 -->
|
|
|
- <div class="scheme-selector">
|
|
|
- <h4>推荐方案</h4>
|
|
|
- <div class="scheme-tabs">
|
|
|
- <div class="scheme-tab active" onclick="selectScheme('scheme1')">方案1</div>
|
|
|
- <div class="scheme-tab" onclick="selectScheme('scheme2')">方案2</div>
|
|
|
- <div class="scheme-tab" onclick="selectScheme('scheme3')">方案3</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 配色原理说明 -->
|
|
|
- <div class="color-theory-section">
|
|
|
- <h4>🎨 配色原理解析</h4>
|
|
|
- <div class="theory-content" id="colorTheoryContent">
|
|
|
- <div class="theory-card">
|
|
|
- <div class="theory-icon">🎯</div>
|
|
|
- <div class="theory-text">
|
|
|
- <h5>主色调选择</h5>
|
|
|
- <p>基于您的肤色和喜好，选择了温暖的蓝色作为主色调，既显稳重又不失活力。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="theory-card">
|
|
|
- <div class="theory-icon">🌈</div>
|
|
|
- <div class="theory-text">
|
|
|
- <h5>色彩搭配</h5>
|
|
|
- <p>采用邻近色搭配法，蓝色与紫色的组合营造出和谐优雅的视觉效果。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="theory-card">
|
|
|
- <div class="theory-icon">✨</div>
|
|
|
- <div class="theory-text">
|
|
|
- <h5>层次感营造</h5>
|
|
|
- <p>通过深浅不同的蓝色系形成层次，增加整体造型的丰富度和立体感。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <div class="recommendation-actions">
|
|
|
- <button class="action-btn secondary" onclick="shareRecommendation()">
|
|
|
- <span class="btn-icon">📤</span>
|
|
|
- <span>分享方案</span>
|
|
|
- </button>
|
|
|
- <button class="action-btn secondary" onclick="saveRecommendation()">
|
|
|
- <span class="btn-icon">💾</span>
|
|
|
- <span>收藏方案</span>
|
|
|
- </button>
|
|
|
- <button class="action-btn primary" onclick="importToDesignCenter()">
|
|
|
- <span class="btn-icon">🎨</span>
|
|
|
- <span>导入设计中心</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 模态框 -->
|
|
|
- <div id="modal" class="modal">
|
|
|
- <div class="modal-content">
|
|
|
- <h3 id="modalTitle">开始设计</h3>
|
|
|
- <p id="modalText">选择你想要设计的服装类型</p>
|
|
|
- <div class="modal-actions">
|
|
|
- <button class="btn btn-secondary" onclick="closeModal()">取消</button>
|
|
|
- <button class="btn btn-primary" onclick="startDesign()">开始</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 设置模态框 -->
|
|
|
- <div id="settingsModal" class="settings-modal">
|
|
|
- <div class="settings-modal-content">
|
|
|
- <div class="settings-header">
|
|
|
- <h2>设置</h2>
|
|
|
- <button class="close-btn" onclick="closeSettingsModal()">×</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="settings-body">
|
|
|
- <!-- 个人资料部分 -->
|
|
|
- <div class="settings-section">
|
|
|
- <h3>个人资料</h3>
|
|
|
- <div class="profile-info">
|
|
|
- <div class="profile-avatar">
|
|
|
- <div class="avatar-circle" onclick="changeAvatar()">
|
|
|
- <img id="userAvatar" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%23ff6b6b'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>" alt="头像">
|
|
|
- <div class="avatar-edit">📷</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="profile-details">
|
|
|
- <div class="form-group">
|
|
|
- <label for="userName">用户名</label>
|
|
|
- <input type="text" id="userName" value="时尚设计师" placeholder="输入您的用户名">
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label for="userBio">个人简介</label>
|
|
|
- <textarea id="userBio" placeholder="介绍一下您自己...">热爱时尚设计，专注于创新与美学的完美结合</textarea>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label for="userLocation">所在地</label>
|
|
|
- <input type="text" id="userLocation" value="上海" placeholder="您的所在城市">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 账户安全 -->
|
|
|
- <div class="settings-section">
|
|
|
- <h3>账户安全</h3>
|
|
|
- <div class="security-items">
|
|
|
- <div class="security-item" onclick="changePassword()">
|
|
|
- <div class="security-left">
|
|
|
- <span class="security-icon">🔒</span>
|
|
|
- <div>
|
|
|
- <div class="security-title">修改密码</div>
|
|
|
- <div class="security-desc">定期更新密码保护账户安全</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- <div class="security-item" onclick="bindPhone()">
|
|
|
- <div class="security-left">
|
|
|
- <span class="security-icon">📱</span>
|
|
|
- <div>
|
|
|
- <div class="security-title">手机号绑定</div>
|
|
|
- <div class="security-desc">已绑定：138****8888</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- <div class="security-item" onclick="bindEmail()">
|
|
|
- <div class="security-left">
|
|
|
- <span class="security-icon">📧</span>
|
|
|
- <div>
|
|
|
- <div class="security-title">邮箱绑定</div>
|
|
|
- <div class="security-desc">user@example.com</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 隐私设置 -->
|
|
|
- <div class="settings-section">
|
|
|
- <h3>隐私设置</h3>
|
|
|
- <div class="privacy-items">
|
|
|
- <div class="privacy-item">
|
|
|
- <div class="privacy-left">
|
|
|
- <span class="privacy-icon">👁️</span>
|
|
|
- <div>
|
|
|
- <div class="privacy-title">作品可见性</div>
|
|
|
- <div class="privacy-desc">设置谁可以查看您的作品</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <select class="privacy-select">
|
|
|
- <option value="public">公开</option>
|
|
|
- <option value="followers">仅粉丝</option>
|
|
|
- <option value="private">私人</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="privacy-item">
|
|
|
- <div class="privacy-left">
|
|
|
- <span class="privacy-icon">🔔</span>
|
|
|
- <div>
|
|
|
- <div class="privacy-title">消息通知</div>
|
|
|
- <div class="privacy-desc">接收点赞、评论等通知</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <label class="switch">
|
|
|
- <input type="checkbox" checked>
|
|
|
- <span class="slider"></span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="privacy-item">
|
|
|
- <div class="privacy-left">
|
|
|
- <span class="privacy-icon">📊</span>
|
|
|
- <div>
|
|
|
- <div class="privacy-title">数据分析</div>
|
|
|
- <div class="privacy-desc">允许匿名数据分析</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <label class="switch">
|
|
|
- <input type="checkbox" checked>
|
|
|
- <span class="slider"></span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 应用设置 -->
|
|
|
- <div class="settings-section">
|
|
|
- <h3>应用设置</h3>
|
|
|
- <div class="app-items">
|
|
|
- <div class="app-item" onclick="showAbout()">
|
|
|
- <div class="app-left">
|
|
|
- <span class="app-icon">ℹ️</span>
|
|
|
- <span class="app-title">关于应用</span>
|
|
|
- </div>
|
|
|
- <div class="app-right">
|
|
|
- <span class="version">v1.0.0</span>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="app-item" onclick="clearCache()">
|
|
|
- <div class="app-left">
|
|
|
- <span class="app-icon">🗑️</span>
|
|
|
- <span class="app-title">清除缓存</span>
|
|
|
- </div>
|
|
|
- <div class="app-right">
|
|
|
- <span class="cache-size">23.5MB</span>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="app-item" onclick="feedback()">
|
|
|
- <div class="app-left">
|
|
|
- <span class="app-icon">💬</span>
|
|
|
- <span class="app-title">意见反馈</span>
|
|
|
- </div>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="settings-footer">
|
|
|
- <button class="save-btn" onclick="saveSettings()">保存设置</button>
|
|
|
- <button class="logout-btn" onclick="confirmLogout()">退出登录</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 上传作品模态框 -->
|
|
|
- <div id="uploadModal" class="upload-modal">
|
|
|
- <div class="upload-modal-content">
|
|
|
- <!-- 步骤指示器 -->
|
|
|
- <div class="upload-steps">
|
|
|
- <div class="step active">
|
|
|
- <div class="step-number">1</div>
|
|
|
- <div class="step-label">选择类型</div>
|
|
|
- </div>
|
|
|
- <div class="step">
|
|
|
- <div class="step-number">2</div>
|
|
|
- <div class="step-label">上传内容</div>
|
|
|
- </div>
|
|
|
- <div class="step">
|
|
|
- <div class="step-number">3</div>
|
|
|
- <div class="step-label">作品信息</div>
|
|
|
- </div>
|
|
|
- <div class="step">
|
|
|
- <div class="step-number">4</div>
|
|
|
- <div class="step-label">发布设置</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤1: 选择作品类型 -->
|
|
|
- <div class="upload-step active">
|
|
|
- <h3>选择作品类型</h3>
|
|
|
- <div class="work-types">
|
|
|
- <div class="work-type" data-type="design" onclick="selectWorkType('design')">
|
|
|
- <div class="type-icon">🎨</div>
|
|
|
- <div class="type-name">设计稿</div>
|
|
|
- <div class="type-desc">分享你的原创设计图稿</div>
|
|
|
- </div>
|
|
|
- <div class="work-type" data-type="photo" onclick="selectWorkType('photo')">
|
|
|
- <div class="type-icon">📸</div>
|
|
|
- <div class="type-name">实物照片</div>
|
|
|
- <div class="type-desc">展示制作完成的服装作品</div>
|
|
|
- </div>
|
|
|
- <div class="work-type" data-type="video" onclick="selectWorkType('video')">
|
|
|
- <div class="type-icon">🎬</div>
|
|
|
- <div class="type-name">视频展示</div>
|
|
|
- <div class="type-desc">动态展示服装效果</div>
|
|
|
- </div>
|
|
|
- <div class="work-type" data-type="3d" onclick="selectWorkType('3d')">
|
|
|
- <div class="type-icon">🎭</div>
|
|
|
- <div class="type-name">3D模型</div>
|
|
|
- <div class="type-desc">上传3D服装模型文件</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤2: 上传内容 -->
|
|
|
- <div class="upload-step">
|
|
|
- <h3>上传内容</h3>
|
|
|
- <div class="upload-options">
|
|
|
- <!-- 文件上传区域 -->
|
|
|
- <div class="upload-section">
|
|
|
- <h4>📁 上传文件</h4>
|
|
|
- <div class="file-upload-area" onclick="triggerFileUpload()">
|
|
|
- <div class="upload-placeholder">
|
|
|
- <div class="upload-icon">📤</div>
|
|
|
- <div class="upload-text">点击上传文件</div>
|
|
|
- <div class="upload-hint">支持图片、视频格式，最多9个文件</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <input type="file" id="fileInput" multiple accept="image/*,video/*" style="display: none;" onchange="handleFileUpload(event)">
|
|
|
- <div id="uploadPreview" class="upload-preview"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 3D文件上传 -->
|
|
|
- <div class="upload-section" id="3dUploadSection" style="display: none;">
|
|
|
- <h4>🎭 上传3D模型</h4>
|
|
|
- <div class="file-upload-area" onclick="trigger3DUpload()">
|
|
|
- <div class="upload-placeholder">
|
|
|
- <div class="upload-icon">🎯</div>
|
|
|
- <div class="upload-text">上传3D模型文件</div>
|
|
|
- <div class="upload-hint">支持 .obj, .fbx, .gltf 格式</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <input type="file" id="file3DInput" accept=".obj,.fbx,.gltf" style="display: none;" onchange="handle3DUpload(event)">
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 从我的设计选择 -->
|
|
|
- <div class="upload-section">
|
|
|
- <h4>🎨 从我的设计选择</h4>
|
|
|
- <div class="my-designs-grid">
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(1)">
|
|
|
- <div class="design-preview">👕</div>
|
|
|
- <div class="design-name">春季T恤</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(2)">
|
|
|
- <div class="design-preview">👗</div>
|
|
|
- <div class="design-name">夏日连衣裙</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(3)">
|
|
|
- <div class="design-preview">🧥</div>
|
|
|
- <div class="design-name">秋季外套</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(4)">
|
|
|
- <div class="design-preview">👖</div>
|
|
|
- <div class="design-name">休闲裤</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(5)">
|
|
|
- <div class="design-preview">🧣</div>
|
|
|
- <div class="design-name">围巾设计</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(6)">
|
|
|
- <div class="design-preview">👒</div>
|
|
|
- <div class="design-name">帽子系列</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤3: 作品信息 -->
|
|
|
- <div class="upload-step">
|
|
|
- <h3>作品信息</h3>
|
|
|
- <div class="description-form">
|
|
|
- <div class="form-group">
|
|
|
- <label for="workTitle">作品标题 *</label>
|
|
|
- <input type="text" id="workTitle" placeholder="给你的作品起个好听的名字" maxlength="50">
|
|
|
- <div class="char-count"><span id="titleCount">0</span>/50</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <label for="workDescription">作品描述</label>
|
|
|
- <textarea id="workDescription" placeholder="介绍一下你的设计理念和创作过程..." maxlength="500"></textarea>
|
|
|
- <div class="char-count"><span id="descCount">0</span>/500</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <label>选择分类</label>
|
|
|
- <select>
|
|
|
- <option value="">请选择分类</option>
|
|
|
- <option value="casual">休闲装</option>
|
|
|
- <option value="formal">正装</option>
|
|
|
- <option value="sport">运动装</option>
|
|
|
- <option value="evening">晚装</option>
|
|
|
- <option value="accessories">配饰</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="tags-container">
|
|
|
- <label>添加标签</label>
|
|
|
- <div class="popular-tags">
|
|
|
- <span class="tag" onclick="toggleTag(this)">#时尚</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#原创</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#简约</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#复古</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#街头</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#优雅</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#运动</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#环保</span>
|
|
|
- </div>
|
|
|
- <input type="text" id="customTag" placeholder="输入自定义标签后按回车" onkeypress="addCustomTag(event)">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤4: 发布设置 -->
|
|
|
- <div class="upload-step">
|
|
|
- <h3>发布设置</h3>
|
|
|
- <div class="publish-settings">
|
|
|
- <div class="setting-group">
|
|
|
- <label>作品可见性</label>
|
|
|
- <div class="radio-group">
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="visibility" value="public" checked>
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">公开</div>
|
|
|
- <div class="option-desc">所有人都可以查看你的作品</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="visibility" value="followers">
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">仅粉丝可见</div>
|
|
|
- <div class="option-desc">只有关注你的用户可以查看</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="visibility" value="private">
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">私密</div>
|
|
|
- <div class="option-desc">只有你自己可以查看</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="setting-group">
|
|
|
- <label>下载权限</label>
|
|
|
- <div class="radio-group">
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="download" value="allow" checked>
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">允许下载</div>
|
|
|
- <div class="option-desc">其他用户可以下载你的作品</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="download" value="forbid">
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">禁止下载</div>
|
|
|
- <div class="option-desc">保护你的原创作品</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="setting-group">
|
|
|
- <label>其他设置</label>
|
|
|
- <label class="checkbox-option">
|
|
|
- <input type="checkbox" id="allowComments" checked>
|
|
|
- <div class="checkbox-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">允许评论</div>
|
|
|
- <div class="option-desc">其他用户可以对你的作品进行评论</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- <label class="checkbox-option">
|
|
|
- <input type="checkbox" id="copyrightAgree">
|
|
|
- <div class="checkbox-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">版权声明 *</div>
|
|
|
- <div class="option-desc">我确认拥有此作品的版权，并同意平台使用条款</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 模态框底部按钮 -->
|
|
|
- <div class="upload-modal-footer">
|
|
|
- <button class="btn btn-outline" onclick="closeUploadModal()">取消</button>
|
|
|
- <button class="btn btn-outline" id="prevBtn" onclick="prevStep()" style="display: none;">上一步</button>
|
|
|
- <button class="btn btn-primary" id="nextBtn" onclick="nextStep()">下一步</button>
|
|
|
- <button class="btn btn-primary" id="publishBtn" onclick="publishWork()" style="display: none;">发布作品</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 草稿箱模态框 -->
|
|
|
- <div id="draftsModal" class="upload-modal">
|
|
|
- <div class="upload-modal-content drafts-content">
|
|
|
- <div style="padding: 20px 30px; border-bottom: 1px solid #e9ecef;">
|
|
|
- <h3>草稿箱</h3>
|
|
|
- <p style="color: #666; font-size: 14px; margin-top: 5px;">管理你的草稿作品</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="drafts-list">
|
|
|
- <div class="draft-item">
|
|
|
- <div class="draft-preview">👕</div>
|
|
|
- <div class="draft-info">
|
|
|
- <div class="draft-title">春季T恤设计</div>
|
|
|
- <div class="draft-time">保存于 2024-03-15</div>
|
|
|
- </div>
|
|
|
- <div class="draft-actions">
|
|
|
- <button onclick="editDraft(1)">编辑</button>
|
|
|
- <button onclick="deleteDraft(1)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="draft-item">
|
|
|
- <div class="draft-preview">👗</div>
|
|
|
- <div class="draft-info">
|
|
|
- <div class="draft-title">夏日连衣裙</div>
|
|
|
- <div class="draft-time">保存于 2024-03-14</div>
|
|
|
- </div>
|
|
|
- <div class="draft-actions">
|
|
|
- <button onclick="editDraft(2)">编辑</button>
|
|
|
- <button onclick="deleteDraft(2)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="draft-item">
|
|
|
- <div class="draft-preview">🧥</div>
|
|
|
- <div class="draft-info">
|
|
|
- <div class="draft-title">秋季外套概念</div>
|
|
|
- <div class="draft-time">保存于 2024-03-12</div>
|
|
|
- </div>
|
|
|
- <div class="draft-actions">
|
|
|
- <button onclick="editDraft(3)">编辑</button>
|
|
|
- <button onclick="deleteDraft(3)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="upload-modal-footer">
|
|
|
- <button class="btn btn-outline" onclick="closeDraftsModal()">关闭</button>
|
|
|
- <button class="btn btn-primary" onclick="openUploadModal(); closeDraftsModal();">新建作品</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 我的作品模态框 -->
|
|
|
- <div id="myWorksModal" class="upload-modal">
|
|
|
- <div class="upload-modal-content">
|
|
|
- <div style="padding: 20px 30px; border-bottom: 1px solid #e9ecef;">
|
|
|
- <h3>我的作品</h3>
|
|
|
- <p style="color: #666; font-size: 14px; margin-top: 5px;">管理你发布的作品</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 标签页 -->
|
|
|
- <div class="works-tabs">
|
|
|
- <div class="tab active" onclick="switchWorksTab('published')">已发布</div>
|
|
|
- <div class="tab" onclick="switchWorksTab('analytics')">数据分析</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 已发布作品 -->
|
|
|
- <div id="publishedWorks" class="works-content">
|
|
|
- <div class="work-item">
|
|
|
- <div class="work-preview">🌸</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">春季花朵印花T恤</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 1.2k</span>
|
|
|
- <span>💬 89</span>
|
|
|
- <span>👁️ 5.6k</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-actions">
|
|
|
- <button onclick="editWork(1)">编辑</button>
|
|
|
- <button onclick="deleteWork(1)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="work-item">
|
|
|
- <div class="work-preview">⚡</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">未来科技风外套</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 2.1k</span>
|
|
|
- <span>💬 156</span>
|
|
|
- <span>👁️ 8.9k</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-actions">
|
|
|
- <button onclick="editWork(2)">编辑</button>
|
|
|
- <button onclick="deleteWork(2)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="work-item">
|
|
|
- <div class="work-preview">🌿</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">环保材质连衣裙</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 856</span>
|
|
|
- <span>💬 67</span>
|
|
|
- <span>👁️ 3.2k</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-actions">
|
|
|
- <button onclick="editWork(3)">编辑</button>
|
|
|
- <button onclick="deleteWork(3)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 数据分析 -->
|
|
|
- <div id="analyticsWorks" class="works-content" style="display: none;">
|
|
|
- <div class="analytics-summary">
|
|
|
- <div class="analytics-item">
|
|
|
- <div class="analytics-number">12</div>
|
|
|
- <div class="analytics-label">总作品数</div>
|
|
|
- </div>
|
|
|
- <div class="analytics-item">
|
|
|
- <div class="analytics-number">8.9k</div>
|
|
|
- <div class="analytics-label">总点赞数</div>
|
|
|
- </div>
|
|
|
- <div class="analytics-item">
|
|
|
- <div class="analytics-number">2.3k</div>
|
|
|
- <div class="analytics-label">总浏览量</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="padding: 20px; text-align: center; color: #666;">
|
|
|
- <div style="font-size: 48px; margin-bottom: 15px;">📊</div>
|
|
|
- <div>详细数据分析功能</div>
|
|
|
- <div style="font-size: 14px; margin-top: 8px;">即将上线，敬请期待</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="upload-modal-footer">
|
|
|
- <button class="btn btn-outline" onclick="closeMyWorksModal()">关闭</button>
|
|
|
- <button class="btn btn-outline" onclick="showDrafts(); closeMyWorksModal();">草稿箱</button>
|
|
|
- <button class="btn btn-primary" onclick="openUploadModal(); closeMyWorksModal();">发布新作品</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <script>
|
|
|
- // 全局变量
|
|
|
- let currentSlide = 0;
|
|
|
- let slideInterval;
|
|
|
- let selectedColor = '#ff6b6b';
|
|
|
-
|
|
|
- // 页面初始化
|
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
|
|
- initBannerSlider();
|
|
|
- initNavigation();
|
|
|
- initInteractions();
|
|
|
- });
|
|
|
-
|
|
|
- // 轮播图功能
|
|
|
- function initBannerSlider() {
|
|
|
- const slider = document.getElementById('bannerSlider');
|
|
|
- const indicators = document.querySelectorAll('.indicator');
|
|
|
- const slides = document.querySelectorAll('.banner-slide');
|
|
|
-
|
|
|
- // 自动播放
|
|
|
- slideInterval = setInterval(nextSlide, 4000);
|
|
|
-
|
|
|
- // 指示器点击事件
|
|
|
- indicators.forEach((indicator, index) => {
|
|
|
- indicator.addEventListener('click', () => {
|
|
|
- goToSlide(index);
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // 轮播图点击跳转事件
|
|
|
- slides.forEach((slide, index) => {
|
|
|
- slide.addEventListener('click', () => {
|
|
|
- bannerClick(index);
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // 鼠标悬停暂停
|
|
|
- slider.addEventListener('mouseenter', () => {
|
|
|
- clearInterval(slideInterval);
|
|
|
- });
|
|
|
-
|
|
|
- slider.addEventListener('mouseleave', () => {
|
|
|
- slideInterval = setInterval(nextSlide, 4000);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function nextSlide() {
|
|
|
- currentSlide = (currentSlide + 1) % 3;
|
|
|
- updateSlider();
|
|
|
- }
|
|
|
-
|
|
|
- function goToSlide(index) {
|
|
|
- currentSlide = index;
|
|
|
- updateSlider();
|
|
|
- }
|
|
|
-
|
|
|
- function updateSlider() {
|
|
|
- const slider = document.getElementById('bannerSlider');
|
|
|
- const indicators = document.querySelectorAll('.indicator');
|
|
|
-
|
|
|
- slider.style.transform = `translateX(-${currentSlide * 100}%)`;
|
|
|
-
|
|
|
- indicators.forEach((indicator, index) => {
|
|
|
- indicator.classList.toggle('active', index === currentSlide);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 轮播图点击跳转功能
|
|
|
- function bannerClick(index) {
|
|
|
- // 根据轮播图索引跳转到不同页面
|
|
|
- switch(index) {
|
|
|
- case 0: // 春季新品发布
|
|
|
- switchPage('design');
|
|
|
- // 更新导航状态
|
|
|
- updateNavigation('design');
|
|
|
- showNotification('春季新品', '欢迎查看春季新品系列！');
|
|
|
- break;
|
|
|
- case 1: // AI智能搭配
|
|
|
- showModal('AI智能搭配', '基于您的喜好，我们为您推荐了以下服装', '查看推荐', () => {
|
|
|
- closeModal(); // 关闭模态框
|
|
|
- switchPage('ar');
|
|
|
- updateNavigation('ar');
|
|
|
- });
|
|
|
- break;
|
|
|
- case 2: // 设计大赛进行中
|
|
|
- showModal('设计大赛', '设计大赛正在进行中，立即参与！', '查看详情', () => {
|
|
|
- closeModal(); // 关闭模态框
|
|
|
- switchPage('community');
|
|
|
- updateNavigation('community');
|
|
|
- });
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 更新导航状态的辅助函数
|
|
|
- function updateNavigation(page) {
|
|
|
- const navItems = document.querySelectorAll('.nav-item');
|
|
|
- navItems.forEach(nav => nav.classList.remove('active'));
|
|
|
- document.querySelector(`.nav-item[data-page="${page}"]`).classList.add('active');
|
|
|
- }
|
|
|
-
|
|
|
- // 导航功能
|
|
|
- function initNavigation() {
|
|
|
- const navItems = document.querySelectorAll('.nav-item');
|
|
|
-
|
|
|
- navItems.forEach(item => {
|
|
|
- item.addEventListener('click', () => {
|
|
|
- const page = item.dataset.page;
|
|
|
- switchPage(page);
|
|
|
-
|
|
|
- // 更新导航状态
|
|
|
- navItems.forEach(nav => nav.classList.remove('active'));
|
|
|
- item.classList.add('active');
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function switchPage(pageId) {
|
|
|
- const pages = document.querySelectorAll('.page');
|
|
|
-
|
|
|
- pages.forEach(page => {
|
|
|
- page.style.display = 'none';
|
|
|
- });
|
|
|
-
|
|
|
- const targetPage = document.getElementById(pageId + '-page');
|
|
|
- if (targetPage) {
|
|
|
- targetPage.style.display = 'block';
|
|
|
- targetPage.classList.add('fade-in');
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- targetPage.classList.remove('fade-in');
|
|
|
- }, 300);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 交互功能
|
|
|
- function initInteractions() {
|
|
|
- // 添加脉搏动画
|
|
|
- const style = document.createElement('style');
|
|
|
- style.textContent = `
|
|
|
- @keyframes pulse {
|
|
|
- 0%, 100% { transform: scale(1); }
|
|
|
- 50% { transform: scale(1.1); }
|
|
|
- }
|
|
|
- `;
|
|
|
- document.head.appendChild(style);
|
|
|
- }
|
|
|
-
|
|
|
- // 模态框功能
|
|
|
- function showDesignModal() {
|
|
|
- showModal('开始设计', '选择你想要设计的服装类型', '开始', startDesign);
|
|
|
- }
|
|
|
-
|
|
|
- function showModal(title, text, actionText = '开始', actionCallback = startDesign) {
|
|
|
- const modal = document.getElementById('modal');
|
|
|
- const modalTitle = document.getElementById('modalTitle');
|
|
|
- const modalText = document.getElementById('modalText');
|
|
|
- const primaryBtn = document.querySelector('.modal-actions .btn-primary');
|
|
|
-
|
|
|
- modalTitle.textContent = title;
|
|
|
- modalText.textContent = text;
|
|
|
- primaryBtn.textContent = actionText;
|
|
|
- primaryBtn.onclick = actionCallback;
|
|
|
-
|
|
|
- modal.style.display = 'flex';
|
|
|
- document.body.style.overflow = 'hidden';
|
|
|
- }
|
|
|
-
|
|
|
- function closeModal() {
|
|
|
- const modal = document.getElementById('modal');
|
|
|
- modal.style.display = 'none';
|
|
|
- document.body.style.overflow = 'auto';
|
|
|
- }
|
|
|
-
|
|
|
- function startDesign() {
|
|
|
- closeModal();
|
|
|
- switchPage('design');
|
|
|
- // 更新导航状态
|
|
|
- const navItems = document.querySelectorAll('.nav-item');
|
|
|
- navItems.forEach(nav => nav.classList.remove('active'));
|
|
|
- document.querySelector('.nav-item[data-page="design"]').classList.add('active');
|
|
|
-
|
|
|
- showNotification('开始设计', '欢迎来到设计中心！');
|
|
|
- }
|
|
|
-
|
|
|
- // 作品详情
|
|
|
- function showWorkDetail(title) {
|
|
|
- showNotification('作品详情', `正在查看《${title}》的详细信息`);
|
|
|
- }
|
|
|
-
|
|
|
- // AI推荐引擎相关全局变量
|
|
|
- let aiChatHistory = [];
|
|
|
- let isVoiceRecording = false;
|
|
|
- let currentRecommendationScheme = 'scheme1';
|
|
|
-
|
|
|
- // AI推荐引擎功能
|
|
|
- function openAIChat(type) {
|
|
|
- const modal = document.getElementById('aiChatModal');
|
|
|
- const subtitle = document.getElementById('aiChatSubtitle');
|
|
|
- const quickCommands = document.getElementById('aiQuickCommands');
|
|
|
-
|
|
|
- modal.style.display = 'flex';
|
|
|
- document.body.style.overflow = 'hidden';
|
|
|
-
|
|
|
- // 根据类型设置不同的对话主题
|
|
|
- switch(type) {
|
|
|
- case 'occasion':
|
|
|
- subtitle.textContent = '场合搭配专家为您服务...';
|
|
|
- showAIMessage('我来帮您根据不同场合设计完美搭配！请告诉我您要参加什么场合？');
|
|
|
- break;
|
|
|
- case 'color':
|
|
|
- subtitle.textContent = '配色大师为您分析...';
|
|
|
- showAIMessage('专业配色分析师为您服务！我可以根据您的喜好和肤色，推荐最适合的颜色组合。');
|
|
|
- break;
|
|
|
- case 'style':
|
|
|
- subtitle.textContent = '风格顾问在线中...';
|
|
|
- showAIMessage('让我来分析您的个人风格！请描述一下您喜欢的穿衣风格，或者上传一张照片。');
|
|
|
- break;
|
|
|
- case 'free':
|
|
|
- subtitle.textContent = '自由对话模式中...';
|
|
|
- showAIMessage('有任何时尚相关的问题都可以问我哦！无论是搭配建议、流行趋势还是设计灵感。');
|
|
|
- break;
|
|
|
- }
|
|
|
-
|
|
|
- // 隐藏快捷指令（进入对话状态）
|
|
|
- quickCommands.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- function closeAIChat() {
|
|
|
- const modal = document.getElementById('aiChatModal');
|
|
|
- modal.style.display = 'none';
|
|
|
- document.body.style.overflow = 'auto';
|
|
|
-
|
|
|
- // 重置快捷指令显示
|
|
|
- const quickCommands = document.getElementById('aiQuickCommands');
|
|
|
- quickCommands.style.display = 'flex';
|
|
|
- }
|
|
|
-
|
|
|
- function showAIMessage(text) {
|
|
|
- const messagesContainer = document.getElementById('aiChatMessages');
|
|
|
- const messageDiv = document.createElement('div');
|
|
|
- messageDiv.className = 'ai-message';
|
|
|
-
|
|
|
- const currentTime = new Date().toLocaleTimeString('zh-CN', {
|
|
|
- hour: '2-digit',
|
|
|
- minute: '2-digit'
|
|
|
- });
|
|
|
-
|
|
|
- messageDiv.innerHTML = `
|
|
|
- <div class="message-avatar">🤖</div>
|
|
|
- <div class="message-content">
|
|
|
- <div class="message-text">${text}</div>
|
|
|
- <div class="message-time">${currentTime}</div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
-
|
|
|
- messagesContainer.appendChild(messageDiv);
|
|
|
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
|
-
|
|
|
- // 添加到对话历史
|
|
|
- aiChatHistory.push({
|
|
|
- type: 'ai',
|
|
|
- text: text,
|
|
|
- time: currentTime
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function showUserMessage(text) {
|
|
|
- const messagesContainer = document.getElementById('aiChatMessages');
|
|
|
- const messageDiv = document.createElement('div');
|
|
|
- messageDiv.className = 'user-message';
|
|
|
-
|
|
|
- const currentTime = new Date().toLocaleTimeString('zh-CN', {
|
|
|
- hour: '2-digit',
|
|
|
- minute: '2-digit'
|
|
|
- });
|
|
|
-
|
|
|
- messageDiv.innerHTML = `
|
|
|
- <div class="message-avatar">👤</div>
|
|
|
- <div class="message-content">
|
|
|
- <div class="message-text">${text}</div>
|
|
|
- <div class="message-time">${currentTime}</div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
-
|
|
|
- messagesContainer.appendChild(messageDiv);
|
|
|
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
|
-
|
|
|
- // 添加到对话历史
|
|
|
- aiChatHistory.push({
|
|
|
- type: 'user',
|
|
|
- text: text,
|
|
|
- time: currentTime
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function sendMessage() {
|
|
|
- const input = document.getElementById('aiChatInput');
|
|
|
- const message = input.value.trim();
|
|
|
-
|
|
|
- if (!message) return;
|
|
|
-
|
|
|
- // 显示用户消息
|
|
|
- showUserMessage(message);
|
|
|
- input.value = '';
|
|
|
-
|
|
|
- // 模拟AI回复
|
|
|
- setTimeout(() => {
|
|
|
- const aiResponse = generateAIResponse(message);
|
|
|
- showAIMessage(aiResponse);
|
|
|
-
|
|
|
- // 检查是否需要显示推荐结果
|
|
|
- if (shouldShowRecommendation(message)) {
|
|
|
- setTimeout(() => {
|
|
|
- showAIMessage('我已经为您准备了专属的搭配方案，点击查看详细推荐！');
|
|
|
- setTimeout(() => {
|
|
|
- openRecommendationResult();
|
|
|
- }, 1000);
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }, 1000 + Math.random() * 2000);
|
|
|
- }
|
|
|
-
|
|
|
- function sendQuickCommand(command) {
|
|
|
- // 隐藏快捷指令
|
|
|
- const quickCommands = document.getElementById('aiQuickCommands');
|
|
|
- quickCommands.style.display = 'none';
|
|
|
-
|
|
|
- // 发送快捷指令
|
|
|
- showUserMessage(command);
|
|
|
-
|
|
|
- // AI回复
|
|
|
- setTimeout(() => {
|
|
|
- const response = generateAIResponse(command);
|
|
|
- showAIMessage(response);
|
|
|
-
|
|
|
- if (shouldShowRecommendation(command)) {
|
|
|
- setTimeout(() => {
|
|
|
- showAIMessage('我为您精心准备了搭配方案，让我们来看看推荐结果！');
|
|
|
- setTimeout(() => {
|
|
|
- openRecommendationResult();
|
|
|
- }, 1000);
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }, 1500);
|
|
|
- }
|
|
|
-
|
|
|
- function generateAIResponse(userMessage) {
|
|
|
- const responses = {
|
|
|
- '商务': [
|
|
|
- '商务装搭配需要注重专业感和权威性。推荐选择深色西装，搭配白色或浅蓝色衬衫，以及经典的领带。',
|
|
|
- '对于商务场合，建议选择海军蓝或深灰色作为主色调，这样既显稳重又不失现代感。'
|
|
|
- ],
|
|
|
- '休闲': [
|
|
|
- '休闲装的核心是舒适与时尚的平衡。可以尝试牛仔裤搭配舒适的T恤或针织衫。',
|
|
|
- '休闲风格可以更多地运用色彩层次，比如浅色系的组合会让人看起来更加放松自然。'
|
|
|
- ],
|
|
|
- '春季': [
|
|
|
- '春季流行色彩偏向清新自然，推荐薄荷绿、樱花粉、天空蓝等颜色。',
|
|
|
- '春天是万物复苏的季节，服装色彩也应该充满生机，浅色调和柔和的渐变色都是不错的选择。'
|
|
|
- ],
|
|
|
- '约会': [
|
|
|
- '约会装要在优雅与个性之间找到平衡。推荐选择有设计感但不过分夸张的单品。',
|
|
|
- '约会时的配色可以选择温暖的色调，比如粉色、桃色或者优雅的紫色系。'
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- // 简单的关键词匹配
|
|
|
- for (let keyword in responses) {
|
|
|
- if (userMessage.includes(keyword)) {
|
|
|
- const keywordResponses = responses[keyword];
|
|
|
- return keywordResponses[Math.floor(Math.random() * keywordResponses.length)];
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 默认回复
|
|
|
- const defaultResponses = [
|
|
|
- '这是一个很有趣的想法！让我为您分析一下最适合的搭配方案。',
|
|
|
- '根据您的需求，我建议从色彩搭配入手，创造出和谐统一的视觉效果。',
|
|
|
- '很好的问题！时尚搭配的关键在于了解自己的风格定位和场合需求。',
|
|
|
- '我理解您的想法，让我为您推荐一些专业的搭配建议。'
|
|
|
- ];
|
|
|
-
|
|
|
- return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
|
|
|
- }
|
|
|
-
|
|
|
- function shouldShowRecommendation(message) {
|
|
|
- const triggerWords = ['搭配', '推荐', '建议', '方案', '帮我', '想要', '设计'];
|
|
|
- return triggerWords.some(word => message.includes(word));
|
|
|
- }
|
|
|
-
|
|
|
- function handleChatInputKeypress(event) {
|
|
|
- if (event.key === 'Enter') {
|
|
|
- sendMessage();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 多模态输入功能
|
|
|
- function startVoiceInput() {
|
|
|
- if (isVoiceRecording) {
|
|
|
- stopVoiceInput();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- isVoiceRecording = true;
|
|
|
- const button = event.target.closest('.input-tool');
|
|
|
- button.style.background = 'rgba(255, 107, 107, 0.3)';
|
|
|
- button.innerHTML = '<span class="tool-icon">⏸️</span>';
|
|
|
-
|
|
|
- showNotification('语音输入', '正在录音中...');
|
|
|
-
|
|
|
- // 模拟语音识别
|
|
|
- setTimeout(() => {
|
|
|
- stopVoiceInput();
|
|
|
- const input = document.getElementById('aiChatInput');
|
|
|
- input.value = '帮我搭配一套适合春天的休闲装';
|
|
|
- showNotification('语音识别', '语音转换完成');
|
|
|
- }, 3000);
|
|
|
- }
|
|
|
-
|
|
|
- function stopVoiceInput() {
|
|
|
- isVoiceRecording = false;
|
|
|
- const button = document.querySelector('.input-tool');
|
|
|
- button.style.background = 'rgba(255,255,255,0.15)';
|
|
|
- button.innerHTML = '<span class="tool-icon">🎤</span>';
|
|
|
- }
|
|
|
-
|
|
|
- function uploadImage() {
|
|
|
- // 创建文件输入
|
|
|
- const fileInput = document.createElement('input');
|
|
|
- fileInput.type = 'file';
|
|
|
- fileInput.accept = 'image/*';
|
|
|
-
|
|
|
- fileInput.onchange = function(e) {
|
|
|
- const file = e.target.files[0];
|
|
|
- if (file) {
|
|
|
- showNotification('图片识别', '正在分析您的穿搭照片...');
|
|
|
-
|
|
|
- // 模拟图片识别
|
|
|
- setTimeout(() => {
|
|
|
- showUserMessage('📷 [已上传穿搭照片]');
|
|
|
- setTimeout(() => {
|
|
|
- showAIMessage('我看到您穿的是一套休闲风格的搭配！主要颜色是蓝色系，整体很清新。我可以为您推荐一些类似风格但更加时尚的搭配方案。');
|
|
|
- }, 1500);
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- fileInput.click();
|
|
|
- }
|
|
|
-
|
|
|
- function showEmoji() {
|
|
|
- const emojis = ['😊', '👍', '❤️', '✨', '🎨', '👔', '👕', '👗', '💫', '🌟'];
|
|
|
- const input = document.getElementById('aiChatInput');
|
|
|
- const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
|
|
|
- input.value += randomEmoji;
|
|
|
- input.focus();
|
|
|
- }
|
|
|
-
|
|
|
- // 悬浮球点击事件
|
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
|
|
- const floatingBall = document.getElementById('aiFloatingBall');
|
|
|
- if (floatingBall) {
|
|
|
- floatingBall.addEventListener('click', function() {
|
|
|
- openAIChat('free');
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 推荐结果页面功能
|
|
|
- function openRecommendationResult() {
|
|
|
- closeAIChat();
|
|
|
- const modal = document.getElementById('aiRecommendationModal');
|
|
|
- modal.style.display = 'flex';
|
|
|
- document.body.style.overflow = 'hidden';
|
|
|
-
|
|
|
- // 初始化推荐内容
|
|
|
- updateRecommendationContent();
|
|
|
- }
|
|
|
-
|
|
|
- function closeRecommendation() {
|
|
|
- const modal = document.getElementById('aiRecommendationModal');
|
|
|
- modal.style.display = 'none';
|
|
|
- document.body.style.overflow = 'auto';
|
|
|
- }
|
|
|
-
|
|
|
- function updateRecommendationContent() {
|
|
|
- const schemes = {
|
|
|
- 'scheme1': {
|
|
|
- name: '经典商务风',
|
|
|
- colors: ['#2c3e50', '#34495e', '#95a5a6'],
|
|
|
- theory: [
|
|
|
- {
|
|
|
- icon: '🎯',
|
|
|
- title: '主色调选择',
|
|
|
- desc: '基于您的需求，选择了沉稳的深蓝色作为主色调，既显专业又不失现代感。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '🌈',
|
|
|
- title: '色彩搭配',
|
|
|
- desc: '采用单色调搭配法，深浅不同的蓝色系营造层次感和稳重感。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '✨',
|
|
|
- title: '视觉效果',
|
|
|
- desc: '整体造型简洁大方，适合商务场合，彰显专业形象。'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- 'scheme2': {
|
|
|
- name: '春日清新风',
|
|
|
- colors: ['#f39c12', '#e67e22', '#d35400'],
|
|
|
- theory: [
|
|
|
- {
|
|
|
- icon: '🎯',
|
|
|
- title: '季节特色',
|
|
|
- desc: '春季专属的温暖色调，充满生机与活力，让人眼前一亮。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '🌈',
|
|
|
- title: '暖色搭配',
|
|
|
- desc: '橙色系的渐变搭配，营造温暖阳光的感觉，适合春日出行。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '✨',
|
|
|
- title: '心理效应',
|
|
|
- desc: '暖色调能够提升心情，增加亲和力和活力感。'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- 'scheme3': {
|
|
|
- name: '优雅紫罗兰',
|
|
|
- colors: ['#9b59b6', '#8e44ad', '#663399'],
|
|
|
- theory: [
|
|
|
- {
|
|
|
- icon: '🎯',
|
|
|
- title: '色彩心理',
|
|
|
- desc: '紫色代表优雅与神秘，是富有创造力和艺术感的颜色选择。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '🌈',
|
|
|
- title: '渐变层次',
|
|
|
- desc: '紫色系的深浅渐变，创造出丰富的视觉层次和高级感。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '✨',
|
|
|
- title: '独特气质',
|
|
|
- desc: '紫色搭配能够突出个人品味，展现独特的时尚态度。'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const currentScheme = schemes[currentRecommendationScheme];
|
|
|
- const theoryContent = document.getElementById('colorTheoryContent');
|
|
|
-
|
|
|
- theoryContent.innerHTML = currentScheme.theory.map(item => `
|
|
|
- <div class="theory-card">
|
|
|
- <div class="theory-icon">${item.icon}</div>
|
|
|
- <div class="theory-text">
|
|
|
- <h5>${item.title}</h5>
|
|
|
- <p>${item.desc}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- `).join('');
|
|
|
- }
|
|
|
-
|
|
|
- function selectScheme(schemeId) {
|
|
|
- currentRecommendationScheme = schemeId;
|
|
|
-
|
|
|
- // 更新方案选择状态
|
|
|
- const tabs = document.querySelectorAll('.scheme-tab');
|
|
|
- tabs.forEach(tab => tab.classList.remove('active'));
|
|
|
- event.target.classList.add('active');
|
|
|
-
|
|
|
- // 更新推荐内容
|
|
|
- updateRecommendationContent();
|
|
|
-
|
|
|
- const schemeNames = {
|
|
|
- 'scheme1': '经典商务风',
|
|
|
- 'scheme2': '春日清新风',
|
|
|
- 'scheme3': '优雅紫罗兰'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('方案切换', `已切换到${schemeNames[schemeId]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function rotateModel(direction) {
|
|
|
- const model = document.querySelector('.model-3d-display');
|
|
|
- let currentRotation = parseInt(model.dataset.rotation || '0');
|
|
|
-
|
|
|
- if (direction === 'left') {
|
|
|
- currentRotation -= 90;
|
|
|
- } else if (direction === 'right') {
|
|
|
- currentRotation += 90;
|
|
|
- }
|
|
|
-
|
|
|
- model.style.transform = `rotateY(${currentRotation}deg)`;
|
|
|
- model.dataset.rotation = currentRotation;
|
|
|
-
|
|
|
- showNotification('3D旋转', `模型已旋转 ${direction === 'left' ? '向左' : '向右'} 90°`);
|
|
|
- }
|
|
|
-
|
|
|
- function resetModel() {
|
|
|
- const model = document.querySelector('.model-3d-display');
|
|
|
- model.style.transform = 'rotateY(0deg)';
|
|
|
- model.dataset.rotation = '0';
|
|
|
- showNotification('视角重置', '已重置到正面视角');
|
|
|
- }
|
|
|
-
|
|
|
- function shareRecommendation() {
|
|
|
- showNotification('分享成功', '推荐方案已复制到剪贴板');
|
|
|
- }
|
|
|
-
|
|
|
- function saveRecommendation() {
|
|
|
- showNotification('收藏成功', '推荐方案已保存到我的收藏');
|
|
|
- }
|
|
|
-
|
|
|
- function importToDesignCenter() {
|
|
|
- closeRecommendation();
|
|
|
- switchPage('design');
|
|
|
- updateNavigation('design');
|
|
|
- showNotification('导入成功', 'AI推荐方案已导入到设计中心');
|
|
|
- }
|
|
|
-
|
|
|
- function viewAIRecommendation(type) {
|
|
|
- const recommendationTypes = {
|
|
|
- 'business': '商务精英装',
|
|
|
- 'casual': '休闲度假风'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('查看推荐', `正在查看${recommendationTypes[type]}推荐`);
|
|
|
- setTimeout(() => {
|
|
|
- openRecommendationResult();
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- // 保持向后兼容
|
|
|
- function showAIRecommend(style) {
|
|
|
- openAIChat('free');
|
|
|
- setTimeout(() => {
|
|
|
- sendQuickCommand(`帮我搭配一套${style}风格的服装`);
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- // 新版设计中心全局变量
|
|
|
- let currentBodyPart = 'overall';
|
|
|
- let currentMaterial = 'cotton';
|
|
|
- let modelRotation = 0;
|
|
|
- let partColors = {
|
|
|
- 'overall': '#ff6b6b',
|
|
|
- 'left-sleeve': '#ff6b6b',
|
|
|
- 'right-sleeve': '#ff6b6b',
|
|
|
- 'hood': '#ff6b6b',
|
|
|
- 'body': '#ff6b6b'
|
|
|
- };
|
|
|
- let colorHistory = [];
|
|
|
-
|
|
|
- // 3D模型控制函数
|
|
|
- function rotateModel(direction) {
|
|
|
- const model = document.getElementById('main3DModel');
|
|
|
- if (direction === 'left') {
|
|
|
- modelRotation -= 90;
|
|
|
- } else if (direction === 'right') {
|
|
|
- modelRotation += 90;
|
|
|
- }
|
|
|
-
|
|
|
- model.style.transform = `rotateY(${modelRotation}deg)`;
|
|
|
- showNotification('3D旋转', `模型已旋转到 ${modelRotation}°`);
|
|
|
- }
|
|
|
-
|
|
|
- function resetModelView() {
|
|
|
- modelRotation = 0;
|
|
|
- const model = document.getElementById('main3DModel');
|
|
|
- model.style.transform = 'rotateY(0deg)';
|
|
|
- showNotification('视角重置', '已重置为正面视角');
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 分区控制面板
|
|
|
- function toggleZonePanel() {
|
|
|
- const content = document.querySelector('.zone-control-panel .panel-content');
|
|
|
- const btn = document.querySelector('.expand-btn');
|
|
|
-
|
|
|
- if (content.style.display === 'none') {
|
|
|
- content.style.display = 'block';
|
|
|
- btn.textContent = '⌄';
|
|
|
- } else {
|
|
|
- content.style.display = 'none';
|
|
|
- btn.textContent = '⌃';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 部位选择功能
|
|
|
- function selectBodyPart(part) {
|
|
|
- currentBodyPart = part;
|
|
|
-
|
|
|
- // 更新Tab状态
|
|
|
- const partTabs = document.querySelectorAll('.part-tab');
|
|
|
- partTabs.forEach(tab => tab.classList.remove('active'));
|
|
|
- document.querySelector(`[data-part="${part}"]`).classList.add('active');
|
|
|
-
|
|
|
- // 更新当前部位显示
|
|
|
- const partNames = {
|
|
|
- 'overall': '整体',
|
|
|
- 'left-sleeve': '左袖',
|
|
|
- 'right-sleeve': '右袖',
|
|
|
- 'hood': '帽子',
|
|
|
- 'body': '身体'
|
|
|
- };
|
|
|
-
|
|
|
- document.getElementById('currentPartName').textContent = partNames[part];
|
|
|
- document.getElementById('currentPartColor').style.background = partColors[part];
|
|
|
-
|
|
|
- // 更新3D模型高亮效果
|
|
|
- highlightBodyPart(part);
|
|
|
-
|
|
|
- showNotification('部位选择', `已选择 ${partNames[part]} 部位`);
|
|
|
- }
|
|
|
-
|
|
|
- function highlightBodyPart(part) {
|
|
|
- // 这里可以添加3D模型部位高亮的逻辑
|
|
|
- const model = document.getElementById('main3DModel');
|
|
|
-
|
|
|
- // 根据选择的部位显示不同的模型或高亮效果
|
|
|
- switch(part) {
|
|
|
- case 'overall':
|
|
|
- model.textContent = '👕';
|
|
|
- break;
|
|
|
- case 'left-sleeve':
|
|
|
- model.textContent = '👈👕';
|
|
|
- break;
|
|
|
- case 'right-sleeve':
|
|
|
- model.textContent = '👕👉';
|
|
|
- break;
|
|
|
- case 'hood':
|
|
|
- model.textContent = '🎩👕';
|
|
|
- break;
|
|
|
- case 'body':
|
|
|
- model.textContent = '👕';
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 颜色选择功能（增强版）
|
|
|
- function selectColor(color) {
|
|
|
- selectedColor = color;
|
|
|
- partColors[currentBodyPart] = color;
|
|
|
-
|
|
|
- // 更新颜色选择状态
|
|
|
- const swatches = document.querySelectorAll('.color-swatch');
|
|
|
- swatches.forEach(swatch => {
|
|
|
- swatch.classList.remove('active');
|
|
|
- if (swatch.getAttribute('data-color') === color) {
|
|
|
- swatch.classList.add('active');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 更新当前部位颜色指示器
|
|
|
- document.getElementById('currentPartColor').style.background = color;
|
|
|
-
|
|
|
- // 保存到历史记录
|
|
|
- if (!colorHistory.includes(color)) {
|
|
|
- colorHistory.push(color);
|
|
|
- if (colorHistory.length > 10) {
|
|
|
- colorHistory.shift();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 更新3D模型颜色
|
|
|
- const model = document.getElementById('main3DModel');
|
|
|
- model.style.color = color;
|
|
|
-
|
|
|
- showNotification('颜色应用', `${currentBodyPart} 部位已应用颜色 ${color}`);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 自定义颜色选择
|
|
|
- function selectCustomColor(color) {
|
|
|
- selectColor(color);
|
|
|
- }
|
|
|
-
|
|
|
- function addCustomColor() {
|
|
|
- const customColor = document.getElementById('customColorPicker').value;
|
|
|
- selectColor(customColor);
|
|
|
- showNotification('自定义颜色', '已添加自定义颜色到色盘');
|
|
|
- }
|
|
|
-
|
|
|
- // 色盘管理功能
|
|
|
- function syncColorToAll() {
|
|
|
- const currentColor = partColors[currentBodyPart];
|
|
|
- Object.keys(partColors).forEach(part => {
|
|
|
- partColors[part] = currentColor;
|
|
|
- });
|
|
|
-
|
|
|
- showNotification('颜色同步', '已将当前颜色同步到所有部位');
|
|
|
- }
|
|
|
-
|
|
|
- function showColorHistory() {
|
|
|
- const historySection = document.getElementById('colorHistorySection');
|
|
|
- if (historySection.style.display === 'none') {
|
|
|
- historySection.style.display = 'block';
|
|
|
- } else {
|
|
|
- historySection.style.display = 'none';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function saveColorScheme() {
|
|
|
- const schemeName = prompt('请输入配色方案名称：');
|
|
|
- if (schemeName) {
|
|
|
- // 这里可以实现保存配色方案到本地存储
|
|
|
- localStorage.setItem(`colorScheme_${Date.now()}`, JSON.stringify({
|
|
|
- name: schemeName,
|
|
|
- colors: partColors,
|
|
|
- timestamp: Date.now()
|
|
|
- }));
|
|
|
-
|
|
|
- showNotification('方案保存', `配色方案 "${schemeName}" 已保存`);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function loadColorScheme(schemeId) {
|
|
|
- // 预设的配色方案
|
|
|
- const schemes = {
|
|
|
- 'scheme1': {
|
|
|
- 'overall': '#ff6b6b',
|
|
|
- 'left-sleeve': '#4ecdc4',
|
|
|
- 'right-sleeve': '#4ecdc4',
|
|
|
- 'hood': '#ffeaa7',
|
|
|
- 'body': '#ff6b6b'
|
|
|
- },
|
|
|
- 'scheme2': {
|
|
|
- 'overall': '#667eea',
|
|
|
- 'left-sleeve': '#764ba2',
|
|
|
- 'right-sleeve': '#764ba2',
|
|
|
- 'hood': '#a29bfe',
|
|
|
- 'body': '#667eea'
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const scheme = schemes[schemeId];
|
|
|
- if (scheme) {
|
|
|
- partColors = {...scheme};
|
|
|
- selectBodyPart(currentBodyPart); // 刷新显示
|
|
|
- showNotification('方案加载', '配色方案已加载');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 高级定制工具函数
|
|
|
- function openAdvancedEmbroidery() {
|
|
|
- showNotification('刺绣编辑器', `正在为 ${currentBodyPart} 部位开启高级刺绣编辑器`);
|
|
|
- }
|
|
|
-
|
|
|
- function openTextureSystem() {
|
|
|
- showNotification('贴图系统', `正在为 ${currentBodyPart} 部位开启贴图编辑系统`);
|
|
|
- }
|
|
|
-
|
|
|
- function openPatternLibrary() {
|
|
|
- showNotification('图案库', '正在打开海量设计素材库');
|
|
|
- }
|
|
|
-
|
|
|
- function openAIDesigner() {
|
|
|
- showNotification('AI设计师', '正在启动智能配色建议系统');
|
|
|
- }
|
|
|
-
|
|
|
- // 服装切片图颜色切换功能
|
|
|
- let currentSelectedPart = 'overall';
|
|
|
- let availableColors = [
|
|
|
- // 原有颜色
|
|
|
- '蓝色', '粉色', '牛油果绿', '白色', '黑色', '橘色', '利灰',
|
|
|
- // 新增颜色
|
|
|
- '宝蓝色', '浅驼色', '测试色', '深灰绿', '深紫色', '深绿色',
|
|
|
- '真朱', '睿智金', '红色', '萌萌绿', '蒂芙尼蓝', '长春花蓝',
|
|
|
- '青紫', '靓丽黄'
|
|
|
- ];
|
|
|
-
|
|
|
- function selectClothingColor(colorName) {
|
|
|
- console.log('选择颜色:', colorName, '当前部位:', currentSelectedPart);
|
|
|
-
|
|
|
- if (currentSelectedPart === 'overall') {
|
|
|
- // 整体颜色切换 - 所有部位
|
|
|
- updateAllParts(colorName);
|
|
|
- } else {
|
|
|
- // 单独部位颜色切换
|
|
|
- updateSinglePart(currentSelectedPart, colorName);
|
|
|
- }
|
|
|
-
|
|
|
- // 更新颜色选择状态
|
|
|
- updateColorSwatchState(colorName);
|
|
|
-
|
|
|
- showNotification('颜色切换', `已切换到${colorName}`);
|
|
|
- }
|
|
|
-
|
|
|
- function updateAllParts(colorName) {
|
|
|
- const parts = ['s1', 't1', 'y1', 'z1'];
|
|
|
- parts.forEach(part => {
|
|
|
- updatePartImage(part, colorName);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function updateSinglePart(partName, colorName) {
|
|
|
- updatePartImage(partName, colorName);
|
|
|
- }
|
|
|
-
|
|
|
- function updatePartImage(partName, colorName) {
|
|
|
- const imgElement = document.querySelector(`#layer-${partName} img`);
|
|
|
- if (imgElement) {
|
|
|
- const imagePath = getImagePath(partName, colorName);
|
|
|
- imgElement.src = imagePath;
|
|
|
- console.log('更新图片:', partName, '→', imagePath);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function getImagePath(partName, colorName) {
|
|
|
- // 路径映射：优先查找新切片图，再查找原切片图
|
|
|
- function tryPath(basePath, partName, colorName) {
|
|
|
- const partMap = {
|
|
|
- 's1': 'S1.png',
|
|
|
- 't1': 'T1.png',
|
|
|
- 'y1': 'Y1.png',
|
|
|
- 'z1': 'Z1.png'
|
|
|
- };
|
|
|
-
|
|
|
- const filename = partMap[partName];
|
|
|
- if (!filename) return '';
|
|
|
-
|
|
|
- // 检查是否在新切片图中
|
|
|
- const newPath = `切片图/切片图/${colorName}/${filename}`;
|
|
|
-
|
|
|
- // 特殊处理：浅驼色的文件名是小写的
|
|
|
- if (colorName === '浅驼色') {
|
|
|
- const lowercaseFilename = filename.toLowerCase();
|
|
|
- return `切片图/切片图/${colorName}/${lowercaseFilename}`;
|
|
|
- }
|
|
|
-
|
|
|
- // 检查新切片图路径是否存在（这里我们假设新路径优先）
|
|
|
- if (['宝蓝色', '浅驼色', '测试色', '深灰绿', '深紫色', '深绿色',
|
|
|
- '真朱', '睿智金', '红色', '萌萌绿', '蒂芙尼蓝', '长春花蓝',
|
|
|
- '青紫', '靓丽黄'].includes(colorName)) {
|
|
|
- return newPath;
|
|
|
- }
|
|
|
-
|
|
|
- // 特殊处理：橘色和利灰只有T1和Y1
|
|
|
- if ((colorName === '橘色' || colorName === '利灰') && (partName === 's1' || partName === 'z1')) {
|
|
|
- // 如果橘色或利灰没有该部位，使用蓝色替代
|
|
|
- return `切片图共7个/切片图共7个/蓝色/${filename}`;
|
|
|
- }
|
|
|
-
|
|
|
- // 返回原切片图路径
|
|
|
- return `切片图共7个/切片图共7个/${colorName}/${filename}`;
|
|
|
- }
|
|
|
-
|
|
|
- return tryPath('', partName, colorName);
|
|
|
- }
|
|
|
-
|
|
|
- function selectBodyPart(partName) {
|
|
|
- console.log('选择部位:', partName);
|
|
|
- currentSelectedPart = partName;
|
|
|
-
|
|
|
- // 更新按钮状态
|
|
|
- document.querySelectorAll('.part-tab').forEach(tab => {
|
|
|
- tab.classList.remove('active');
|
|
|
- });
|
|
|
- document.querySelector(`[data-part="${partName}"]`).classList.add('active');
|
|
|
-
|
|
|
- // 更新当前部位名称显示
|
|
|
- const partNames = {
|
|
|
- 'overall': '整体',
|
|
|
- 's1': 'S1部位',
|
|
|
- 't1': 'T1部位',
|
|
|
- 'y1': 'Y1部位',
|
|
|
- 'z1': 'Z1部位'
|
|
|
- };
|
|
|
-
|
|
|
- document.getElementById('currentPartName').textContent = partNames[partName] || partName;
|
|
|
-
|
|
|
- // 高亮显示选中部位
|
|
|
- highlightSelectedPart(partName);
|
|
|
-
|
|
|
- showNotification('部位选择', `已选择${partNames[partName]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function highlightSelectedPart(partName) {
|
|
|
- // 清除所有高亮
|
|
|
- document.querySelectorAll('.part-image').forEach(img => {
|
|
|
- img.classList.remove('highlighted', 'selected');
|
|
|
- });
|
|
|
-
|
|
|
- // 高亮选中部位
|
|
|
- if (partName !== 'overall') {
|
|
|
- const selectedImg = document.querySelector(`#layer-${partName} img`);
|
|
|
- if (selectedImg) {
|
|
|
- selectedImg.classList.add('selected');
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function updateColorSwatchState(colorName) {
|
|
|
- document.querySelectorAll('.color-swatch').forEach(swatch => {
|
|
|
- swatch.classList.remove('active');
|
|
|
- if (swatch.getAttribute('data-color') === colorName) {
|
|
|
- swatch.classList.add('active');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 兼容性函数（保持向后兼容）
|
|
|
- function openColorPicker() {
|
|
|
- showNotification('颜色设计器', '请使用下方的智能色盘系统');
|
|
|
- }
|
|
|
-
|
|
|
- function openPatternEditor() {
|
|
|
- openPatternLibrary();
|
|
|
- }
|
|
|
-
|
|
|
- function openEmbroidery() {
|
|
|
- openAdvancedEmbroidery();
|
|
|
- }
|
|
|
-
|
|
|
- function openAccessories() {
|
|
|
- showNotification('配饰搭配', '配饰功能将在高级定制中提供');
|
|
|
- }
|
|
|
-
|
|
|
- // AR试穿功能
|
|
|
- function selectScene(scene) {
|
|
|
- const sceneNames = {
|
|
|
- 'office': '办公场景',
|
|
|
- 'date': '约会场景',
|
|
|
- 'party': '派对场景',
|
|
|
- 'casual': '休闲场景'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('场景切换', `已切换到${sceneNames[scene]}`);
|
|
|
- }
|
|
|
-
|
|
|
- // 社区功能
|
|
|
- function likeWork(element) {
|
|
|
- element.style.transform = 'scale(0.95)';
|
|
|
- setTimeout(() => {
|
|
|
- element.style.transform = 'scale(1)';
|
|
|
- }, 150);
|
|
|
-
|
|
|
- showNotification('点赞成功', '感谢你的支持！');
|
|
|
- }
|
|
|
-
|
|
|
- // 个人中心功能
|
|
|
- function showMyDesigns() {
|
|
|
- showNotification('我的设计稿', '查看你的所有设计作品');
|
|
|
- }
|
|
|
-
|
|
|
- function showTryOnHistory() {
|
|
|
- showNotification('试穿历史', '查看你的试穿记录');
|
|
|
- }
|
|
|
-
|
|
|
- function showOrders() {
|
|
|
- showNotification('订单管理', '查看你的订单状态');
|
|
|
- }
|
|
|
-
|
|
|
- function showCollections() {
|
|
|
- showNotification('收藏夹', '查看你收藏的作品');
|
|
|
- }
|
|
|
-
|
|
|
- function showFollowers() {
|
|
|
- showNotification('粉丝管理', '管理你的粉丝关系');
|
|
|
- }
|
|
|
-
|
|
|
- function showSettings() {
|
|
|
- document.getElementById('settingsModal').style.display = 'block';
|
|
|
- }
|
|
|
-
|
|
|
- function closeSettingsModal() {
|
|
|
- document.getElementById('settingsModal').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 头像更换功能
|
|
|
- function changeAvatar() {
|
|
|
- const avatarOptions = [
|
|
|
- "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%23ff6b6b'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>",
|
|
|
- "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%2364b5f6'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>",
|
|
|
- "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%2381c784'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>",
|
|
|
- "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%23ffb74d'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>"
|
|
|
- ];
|
|
|
-
|
|
|
- const currentAvatar = document.getElementById('userAvatar').src;
|
|
|
- let currentIndex = avatarOptions.indexOf(currentAvatar);
|
|
|
- const nextIndex = (currentIndex + 1) % avatarOptions.length;
|
|
|
-
|
|
|
- document.getElementById('userAvatar').src = avatarOptions[nextIndex];
|
|
|
- showNotification('头像已更新', '您的头像已成功更换！');
|
|
|
- }
|
|
|
-
|
|
|
- // 修改密码功能
|
|
|
- function changePassword() {
|
|
|
- showNotification('修改密码', '密码修改功能将在后续版本中提供');
|
|
|
- }
|
|
|
-
|
|
|
- // 绑定手机号功能
|
|
|
- function bindPhone() {
|
|
|
- showNotification('手机号绑定', '手机号绑定功能将在后续版本中提供');
|
|
|
- }
|
|
|
-
|
|
|
- // 绑定邮箱功能
|
|
|
- function bindEmail() {
|
|
|
- showNotification('邮箱绑定', '邮箱绑定功能将在后续版本中提供');
|
|
|
- }
|
|
|
-
|
|
|
- // 关于应用功能
|
|
|
- function showAbout() {
|
|
|
- showNotification('关于应用', 'FashionCraft v1.0.0 - 专业的服装DIY设计平台');
|
|
|
- }
|
|
|
-
|
|
|
- // 清除缓存功能
|
|
|
- function clearCache() {
|
|
|
- if (confirm('确定要清除缓存吗？这将删除临时文件和设计草稿。')) {
|
|
|
- showNotification('缓存已清除', '成功清除 23.5MB 缓存数据');
|
|
|
- // 更新缓存大小显示
|
|
|
- document.querySelector('.cache-size').textContent = '0MB';
|
|
|
- setTimeout(() => {
|
|
|
- document.querySelector('.cache-size').textContent = '1.2MB';
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 意见反馈功能
|
|
|
- function feedback() {
|
|
|
- showNotification('意见反馈', '感谢您的反馈！我们会认真对待每一条建议');
|
|
|
- }
|
|
|
-
|
|
|
- // 保存设置功能
|
|
|
- function saveSettings() {
|
|
|
- const userName = document.getElementById('userName').value;
|
|
|
- const userBio = document.getElementById('userBio').value;
|
|
|
- const userLocation = document.getElementById('userLocation').value;
|
|
|
-
|
|
|
- if (!userName.trim()) {
|
|
|
- showNotification('保存失败', '用户名不能为空');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 这里可以添加实际的保存逻辑
|
|
|
- console.log('保存设置:', {
|
|
|
- userName: userName,
|
|
|
- userBio: userBio,
|
|
|
- userLocation: userLocation
|
|
|
- });
|
|
|
-
|
|
|
- showNotification('设置已保存', '您的个人设置已成功保存！');
|
|
|
- }
|
|
|
-
|
|
|
- // 退出登录确认
|
|
|
- function confirmLogout() {
|
|
|
- if (confirm('确定要退出登录吗？未保存的设计将会丢失。')) {
|
|
|
- logout();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 退出登录功能
|
|
|
- function logout() {
|
|
|
- // 清除用户数据
|
|
|
- localStorage.removeItem('userSession');
|
|
|
- localStorage.removeItem('userPreferences');
|
|
|
-
|
|
|
- showNotification('退出成功', '您已成功退出登录');
|
|
|
-
|
|
|
- // 关闭设置模态框
|
|
|
- closeSettingsModal();
|
|
|
-
|
|
|
- // 这里可以添加重定向到登录页面的逻辑
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('跳转登录', '正在跳转到登录页面...');
|
|
|
- }, 1500);
|
|
|
- }
|
|
|
-
|
|
|
- // 上传功能相关变量
|
|
|
- let currentUploadStep = 1;
|
|
|
- let selectedWorkType = '';
|
|
|
- let uploadedFiles = [];
|
|
|
- let selectedTags = [];
|
|
|
- let selectedDesigns = [];
|
|
|
-
|
|
|
- // 打开上传模态框
|
|
|
- function openUploadModal() {
|
|
|
- document.getElementById('uploadModal').style.display = 'flex';
|
|
|
- resetUploadModal();
|
|
|
- }
|
|
|
-
|
|
|
- // 关闭上传模态框
|
|
|
- function closeUploadModal() {
|
|
|
- document.getElementById('uploadModal').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 重置上传模态框
|
|
|
- function resetUploadModal() {
|
|
|
- currentUploadStep = 1;
|
|
|
- selectedWorkType = '';
|
|
|
- uploadedFiles = [];
|
|
|
- selectedTags = [];
|
|
|
- selectedDesigns = [];
|
|
|
- updateUploadStep();
|
|
|
- clearFormData();
|
|
|
- }
|
|
|
-
|
|
|
- // 更新上传步骤
|
|
|
- function updateUploadStep() {
|
|
|
- // 更新步骤指示器
|
|
|
- document.querySelectorAll('.step').forEach((step, index) => {
|
|
|
- if (index + 1 <= currentUploadStep) {
|
|
|
- step.classList.add('active');
|
|
|
- } else {
|
|
|
- step.classList.remove('active');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 显示对应步骤内容
|
|
|
- document.querySelectorAll('.upload-step').forEach((step, index) => {
|
|
|
- if (index + 1 === currentUploadStep) {
|
|
|
- step.classList.add('active');
|
|
|
- } else {
|
|
|
- step.classList.remove('active');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 更新按钮状态
|
|
|
- const prevBtn = document.getElementById('prevBtn');
|
|
|
- const nextBtn = document.getElementById('nextBtn');
|
|
|
- const publishBtn = document.getElementById('publishBtn');
|
|
|
-
|
|
|
- prevBtn.style.display = currentUploadStep > 1 ? 'block' : 'none';
|
|
|
-
|
|
|
- if (currentUploadStep < 4) {
|
|
|
- nextBtn.style.display = 'block';
|
|
|
- publishBtn.style.display = 'none';
|
|
|
- } else {
|
|
|
- nextBtn.style.display = 'none';
|
|
|
- publishBtn.style.display = 'block';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 下一步
|
|
|
- function nextStep() {
|
|
|
- if (validateCurrentStep()) {
|
|
|
- currentUploadStep++;
|
|
|
- updateUploadStep();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 上一步
|
|
|
- function prevStep() {
|
|
|
- currentUploadStep--;
|
|
|
- updateUploadStep();
|
|
|
- }
|
|
|
-
|
|
|
- // 验证当前步骤
|
|
|
- function validateCurrentStep() {
|
|
|
- switch (currentUploadStep) {
|
|
|
- case 1:
|
|
|
- if (!selectedWorkType) {
|
|
|
- showNotification('请选择作品类型');
|
|
|
- return false;
|
|
|
- }
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- if (uploadedFiles.length === 0 && selectedDesigns.length === 0) {
|
|
|
- showNotification('请上传内容或选择设计');
|
|
|
- return false;
|
|
|
- }
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- const title = document.getElementById('workTitle').value.trim();
|
|
|
- if (!title) {
|
|
|
- showNotification('请输入作品标题');
|
|
|
- return false;
|
|
|
- }
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- const copyrightAgree = document.getElementById('copyrightAgree').checked;
|
|
|
- if (!copyrightAgree) {
|
|
|
- showNotification('请同意版权声明');
|
|
|
- return false;
|
|
|
- }
|
|
|
- break;
|
|
|
- }
|
|
|
- return true;
|
|
|
- }
|
|
|
-
|
|
|
- // 选择作品类型
|
|
|
- function selectWorkType(type) {
|
|
|
- selectedWorkType = type;
|
|
|
- document.querySelectorAll('.work-type').forEach(item => {
|
|
|
- item.classList.remove('selected');
|
|
|
- });
|
|
|
- document.querySelector(`[data-type="${type}"]`).classList.add('selected');
|
|
|
- }
|
|
|
-
|
|
|
- // 触发文件上传
|
|
|
- function triggerFileUpload() {
|
|
|
- document.getElementById('fileInput').click();
|
|
|
- }
|
|
|
-
|
|
|
- // 触发3D文件上传
|
|
|
- function trigger3DUpload() {
|
|
|
- document.getElementById('file3DInput').click();
|
|
|
- }
|
|
|
-
|
|
|
- // 处理文件上传
|
|
|
- function handleFileUpload(event) {
|
|
|
- const files = Array.from(event.target.files);
|
|
|
- files.forEach(file => {
|
|
|
- if (uploadedFiles.length < 9) {
|
|
|
- uploadedFiles.push(file);
|
|
|
- addFilePreview(file);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 处理3D文件上传
|
|
|
- function handle3DUpload(event) {
|
|
|
- const file = event.target.files[0];
|
|
|
- if (file) {
|
|
|
- showNotification('3D文件上传成功: ' + file.name);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 添加文件预览
|
|
|
- function addFilePreview(file) {
|
|
|
- const preview = document.getElementById('uploadPreview');
|
|
|
- const previewItem = document.createElement('div');
|
|
|
- previewItem.className = 'preview-item';
|
|
|
-
|
|
|
- if (file.type.startsWith('image/')) {
|
|
|
- const img = document.createElement('img');
|
|
|
- img.src = URL.createObjectURL(file);
|
|
|
- previewItem.appendChild(img);
|
|
|
- } else {
|
|
|
- previewItem.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; font-size: 24px;">🎬</div>';
|
|
|
- }
|
|
|
-
|
|
|
- const removeBtn = document.createElement('button');
|
|
|
- removeBtn.className = 'preview-remove';
|
|
|
- removeBtn.innerHTML = '×';
|
|
|
- removeBtn.onclick = () => removeFilePreview(file, previewItem);
|
|
|
- previewItem.appendChild(removeBtn);
|
|
|
-
|
|
|
- preview.appendChild(previewItem);
|
|
|
- }
|
|
|
-
|
|
|
- // 移除文件预览
|
|
|
- function removeFilePreview(file, previewItem) {
|
|
|
- const index = uploadedFiles.indexOf(file);
|
|
|
- if (index > -1) {
|
|
|
- uploadedFiles.splice(index, 1);
|
|
|
- }
|
|
|
- previewItem.remove();
|
|
|
- }
|
|
|
-
|
|
|
- // 从我的设计选择
|
|
|
- function selectFromMyDesigns(designId) {
|
|
|
- const designItem = document.querySelector(`[onclick="selectFromMyDesigns(${designId})"]`);
|
|
|
- if (selectedDesigns.includes(designId)) {
|
|
|
- selectedDesigns = selectedDesigns.filter(id => id !== designId);
|
|
|
- designItem.classList.remove('selected');
|
|
|
- } else {
|
|
|
- selectedDesigns.push(designId);
|
|
|
- designItem.classList.add('selected');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 切换标签
|
|
|
- function toggleTag(tagElement) {
|
|
|
- const tagText = tagElement.textContent;
|
|
|
- if (selectedTags.includes(tagText)) {
|
|
|
- selectedTags = selectedTags.filter(tag => tag !== tagText);
|
|
|
- tagElement.classList.remove('selected');
|
|
|
- } else {
|
|
|
- selectedTags.push(tagText);
|
|
|
- tagElement.classList.add('selected');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 添加自定义标签
|
|
|
- function addCustomTag(event) {
|
|
|
- if (event.key === 'Enter') {
|
|
|
- const input = event.target;
|
|
|
- const tagText = '#' + input.value.trim();
|
|
|
- if (tagText.length > 1 && !selectedTags.includes(tagText)) {
|
|
|
- selectedTags.push(tagText);
|
|
|
-
|
|
|
- const tagElement = document.createElement('span');
|
|
|
- tagElement.className = 'tag selected';
|
|
|
- tagElement.textContent = tagText;
|
|
|
- tagElement.onclick = () => toggleTag(tagElement);
|
|
|
-
|
|
|
- document.querySelector('.popular-tags').appendChild(tagElement);
|
|
|
- input.value = '';
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 发布作品
|
|
|
- function publishWork() {
|
|
|
- if (validateCurrentStep()) {
|
|
|
- // 模拟发布过程
|
|
|
- showNotification('发布成功', '你的作品已成功发布到社区！');
|
|
|
- closeUploadModal();
|
|
|
-
|
|
|
- // 可以在这里添加实际的发布逻辑
|
|
|
- console.log('发布作品:', {
|
|
|
- type: selectedWorkType,
|
|
|
- files: uploadedFiles,
|
|
|
- designs: selectedDesigns,
|
|
|
- title: document.getElementById('workTitle').value,
|
|
|
- description: document.getElementById('workDescription').value,
|
|
|
- tags: selectedTags,
|
|
|
- visibility: document.querySelector('input[name="visibility"]:checked').value,
|
|
|
- download: document.querySelector('input[name="download"]:checked').value
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 清空表单数据
|
|
|
- function clearFormData() {
|
|
|
- document.getElementById('workTitle').value = '';
|
|
|
- document.getElementById('workDescription').value = '';
|
|
|
- document.getElementById('customTag').value = '';
|
|
|
- document.getElementById('uploadPreview').innerHTML = '';
|
|
|
- document.querySelectorAll('.work-type').forEach(item => item.classList.remove('selected'));
|
|
|
- document.querySelectorAll('.design-item').forEach(item => item.classList.remove('selected'));
|
|
|
- document.querySelectorAll('.tag').forEach(item => item.classList.remove('selected'));
|
|
|
- }
|
|
|
-
|
|
|
- // 字符计数
|
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
|
|
- const titleInput = document.getElementById('workTitle');
|
|
|
- const descInput = document.getElementById('workDescription');
|
|
|
- const titleCount = document.getElementById('titleCount');
|
|
|
- const descCount = document.getElementById('descCount');
|
|
|
-
|
|
|
- if (titleInput && titleCount) {
|
|
|
- titleInput.addEventListener('input', function() {
|
|
|
- titleCount.textContent = this.value.length;
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- if (descInput && descCount) {
|
|
|
- descInput.addEventListener('input', function() {
|
|
|
- descCount.textContent = this.value.length;
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 草稿箱功能
|
|
|
- function showDrafts() {
|
|
|
- document.getElementById('draftsModal').style.display = 'flex';
|
|
|
- }
|
|
|
-
|
|
|
- function closeDraftsModal() {
|
|
|
- document.getElementById('draftsModal').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- function editDraft(draftId) {
|
|
|
- showNotification('编辑草稿: ' + draftId);
|
|
|
- closeDraftsModal();
|
|
|
- openUploadModal();
|
|
|
- }
|
|
|
-
|
|
|
- function deleteDraft(draftId) {
|
|
|
- if (confirm('确定要删除这个草稿吗？')) {
|
|
|
- showNotification('草稿已删除');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 我的作品功能
|
|
|
- function showMyWorks() {
|
|
|
- document.getElementById('myWorksModal').style.display = 'flex';
|
|
|
- }
|
|
|
-
|
|
|
- function closeMyWorksModal() {
|
|
|
- document.getElementById('myWorksModal').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- function switchWorksTab(tab) {
|
|
|
- document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
|
- event.target.classList.add('active');
|
|
|
-
|
|
|
- if (tab === 'published') {
|
|
|
- document.getElementById('publishedWorks').style.display = 'block';
|
|
|
- document.getElementById('analyticsWorks').style.display = 'none';
|
|
|
- } else {
|
|
|
- document.getElementById('publishedWorks').style.display = 'none';
|
|
|
- document.getElementById('analyticsWorks').style.display = 'block';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function editWork(workId) {
|
|
|
- showNotification('编辑作品: ' + workId);
|
|
|
- closeMyWorksModal();
|
|
|
- }
|
|
|
-
|
|
|
- function deleteWork(workId) {
|
|
|
- if (confirm('确定要删除这个作品吗？')) {
|
|
|
- showNotification('作品已删除');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 通知系统
|
|
|
- function showNotification(title, message) {
|
|
|
- // 创建通知元素
|
|
|
- const notification = document.createElement('div');
|
|
|
- notification.style.cssText = `
|
|
|
- position: fixed;
|
|
|
- top: 20px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- padding: 15px 20px;
|
|
|
- border-radius: 25px;
|
|
|
- box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
|
- z-index: 10000;
|
|
|
- max-width: 300px;
|
|
|
- text-align: center;
|
|
|
- animation: slideDown 0.3s ease;
|
|
|
- `;
|
|
|
-
|
|
|
- notification.innerHTML = `
|
|
|
- <div style="font-weight: 600; margin-bottom: 5px;">${title}</div>
|
|
|
- <div style="font-size: 14px; opacity: 0.9;">${message}</div>
|
|
|
- `;
|
|
|
-
|
|
|
- // 添加滑入动画
|
|
|
- const style = document.createElement('style');
|
|
|
- style.textContent = `
|
|
|
- @keyframes slideDown {
|
|
|
- from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
|
|
|
- to { transform: translateX(-50%) translateY(0); opacity: 1; }
|
|
|
- }
|
|
|
- `;
|
|
|
- document.head.appendChild(style);
|
|
|
-
|
|
|
- document.body.appendChild(notification);
|
|
|
-
|
|
|
- // 3秒后自动移除
|
|
|
- setTimeout(() => {
|
|
|
- notification.style.animation = 'slideDown 0.3s ease reverse';
|
|
|
- setTimeout(() => {
|
|
|
- document.body.removeChild(notification);
|
|
|
- }, 300);
|
|
|
- }, 3000);
|
|
|
- }
|
|
|
-
|
|
|
- // 触摸手势支持
|
|
|
- let startX, startY;
|
|
|
-
|
|
|
- document.addEventListener('touchstart', function(e) {
|
|
|
- startX = e.touches[0].clientX;
|
|
|
- startY = e.touches[0].clientY;
|
|
|
- });
|
|
|
-
|
|
|
- document.addEventListener('touchend', function(e) {
|
|
|
- if (!startX || !startY) return;
|
|
|
-
|
|
|
- let endX = e.changedTouches[0].clientX;
|
|
|
- let endY = e.changedTouches[0].clientY;
|
|
|
-
|
|
|
- let diffX = startX - endX;
|
|
|
- let diffY = startY - endY;
|
|
|
-
|
|
|
- // 横向滑动切换轮播图
|
|
|
- if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
|
|
|
- if (diffX > 0) {
|
|
|
- nextSlide();
|
|
|
- } else {
|
|
|
- currentSlide = currentSlide > 0 ? currentSlide - 1 : 2;
|
|
|
- updateSlider();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- startX = startY = null;
|
|
|
- });
|
|
|
-
|
|
|
- // 页面可见性API - 当页面不可见时暂停动画
|
|
|
- document.addEventListener('visibilitychange', function() {
|
|
|
- if (document.hidden) {
|
|
|
- clearInterval(slideInterval);
|
|
|
- } else {
|
|
|
- slideInterval = setInterval(nextSlide, 4000);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 防止点击穿透
|
|
|
- document.addEventListener('click', function(e) {
|
|
|
- if (e.target.closest('.modal')) {
|
|
|
- e.stopPropagation();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 模态框外部点击关闭
|
|
|
- document.getElementById('modal').addEventListener('click', function(e) {
|
|
|
- if (e.target === this) {
|
|
|
- closeModal();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 设置模态框外部点击关闭
|
|
|
- document.getElementById('settingsModal').addEventListener('click', function(e) {
|
|
|
- if (e.target === this) {
|
|
|
- closeSettingsModal();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 初始化服装设计器
|
|
|
- function initializeClothingDesigner() {
|
|
|
- // 设置默认宝蓝色
|
|
|
- selectClothingColor('宝蓝色');
|
|
|
-
|
|
|
- // 设置默认选中整体
|
|
|
- selectBodyPart('overall');
|
|
|
-
|
|
|
- console.log('服装设计器已初始化，已加载', availableColors.length, '种颜色');
|
|
|
- }
|
|
|
-
|
|
|
- // 页面加载完成后初始化设计器
|
|
|
- window.addEventListener('load', function() {
|
|
|
- setTimeout(initializeClothingDesigner, 500);
|
|
|
- });
|
|
|
-
|
|
|
- // ============ 3D试衣间功能函数 ============
|
|
|
-
|
|
|
- // 流程控制
|
|
|
- let currentFittingStep = 'upload';
|
|
|
- let selectedClothing = null;
|
|
|
- let userPhoto = null;
|
|
|
-
|
|
|
- function nextStep(stepName) {
|
|
|
- // 隐藏当前步骤
|
|
|
- document.getElementById(`${currentFittingStep}-step`).style.display = 'none';
|
|
|
-
|
|
|
- // 显示下一步骤
|
|
|
- document.getElementById(`${stepName}-step`).style.display = 'block';
|
|
|
-
|
|
|
- // 更新流程导航状态
|
|
|
- updateStepNavigation(stepName);
|
|
|
-
|
|
|
- currentFittingStep = stepName;
|
|
|
-
|
|
|
- showNotification('流程进度', `已进入${getStepTitle(stepName)}阶段`);
|
|
|
- }
|
|
|
-
|
|
|
- function previousStep(stepName) {
|
|
|
- // 隐藏当前步骤
|
|
|
- document.getElementById(`${currentFittingStep}-step`).style.display = 'none';
|
|
|
-
|
|
|
- // 显示上一步骤
|
|
|
- document.getElementById(`${stepName}-step`).style.display = 'block';
|
|
|
-
|
|
|
- // 更新流程导航状态
|
|
|
- updateStepNavigation(stepName);
|
|
|
-
|
|
|
- currentFittingStep = stepName;
|
|
|
- }
|
|
|
-
|
|
|
- function updateStepNavigation(activeStep) {
|
|
|
- document.querySelectorAll('.flow-step').forEach(step => {
|
|
|
- step.classList.remove('active');
|
|
|
- if (step.getAttribute('data-step') === activeStep) {
|
|
|
- step.classList.add('active');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function getStepTitle(stepName) {
|
|
|
- const titles = {
|
|
|
- 'upload': '照片上传',
|
|
|
- 'clothing': '服装选择',
|
|
|
- 'fitting': '试衣展示'
|
|
|
- };
|
|
|
- return titles[stepName] || stepName;
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 照片上传功能 ============
|
|
|
-
|
|
|
- function selectUploadMethod(method) {
|
|
|
- // 更新选择状态
|
|
|
- document.querySelectorAll('.upload-method').forEach(m => m.classList.remove('active'));
|
|
|
- document.querySelector(`[data-method="${method}"]`).classList.add('active');
|
|
|
-
|
|
|
- // 显示对应界面
|
|
|
- if (method === 'camera') {
|
|
|
- document.getElementById('camera-mode').style.display = 'block';
|
|
|
- document.getElementById('gallery-mode').style.display = 'none';
|
|
|
- } else {
|
|
|
- document.getElementById('camera-mode').style.display = 'none';
|
|
|
- document.getElementById('gallery-mode').style.display = 'block';
|
|
|
- }
|
|
|
-
|
|
|
- showNotification('上传方式', `已选择${method === 'camera' ? '拍照模式' : '相册选择'}`);
|
|
|
- }
|
|
|
-
|
|
|
- function startCamera() {
|
|
|
- showNotification('启动摄像头', '正在访问摄像头权限...');
|
|
|
-
|
|
|
- // 模拟摄像头启动
|
|
|
- setTimeout(() => {
|
|
|
- document.querySelector('.camera-placeholder').innerHTML = `
|
|
|
- <div class="camera-icon">📹</div>
|
|
|
- <div class="camera-text">摄像头已启动</div>
|
|
|
- <div class="camera-hint">请对准镜头保持正面站立</div>
|
|
|
- `;
|
|
|
- showNotification('摄像头就绪', '可以开始拍摄了！');
|
|
|
- }, 1500);
|
|
|
- }
|
|
|
-
|
|
|
- function capturePhoto() {
|
|
|
- showNotification('拍摄照片', '正在拍摄...');
|
|
|
-
|
|
|
- // 模拟拍照效果
|
|
|
- setTimeout(() => {
|
|
|
- document.getElementById('pose-calibration').style.display = 'block';
|
|
|
- simulatePoseDetection();
|
|
|
- showNotification('拍摄成功', '正在进行姿势校准...');
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- function switchCamera() {
|
|
|
- showNotification('切换摄像头', '已切换到前置/后置摄像头');
|
|
|
- }
|
|
|
-
|
|
|
- function handlePhotoUpload(input) {
|
|
|
- const file = input.files[0];
|
|
|
- if (file) {
|
|
|
- const reader = new FileReader();
|
|
|
- reader.onload = function(e) {
|
|
|
- userPhoto = e.target.result;
|
|
|
- document.getElementById('crop-area').style.display = 'block';
|
|
|
- showNotification('照片上传', '请调整裁剪区域');
|
|
|
- };
|
|
|
- reader.readAsDataURL(file);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function resetCrop() {
|
|
|
- showNotification('重置裁剪', '已重置到原始尺寸');
|
|
|
- }
|
|
|
-
|
|
|
- function confirmCrop() {
|
|
|
- document.getElementById('pose-calibration').style.display = 'block';
|
|
|
- simulatePoseDetection();
|
|
|
- showNotification('裁剪完成', '正在进行姿势校准...');
|
|
|
- }
|
|
|
-
|
|
|
- function simulatePoseDetection() {
|
|
|
- const statuses = document.querySelectorAll('.status-item');
|
|
|
- let currentIndex = 2; // 从身形分析开始
|
|
|
-
|
|
|
- const updateStatus = () => {
|
|
|
- if (currentIndex < statuses.length) {
|
|
|
- const item = statuses[currentIndex];
|
|
|
- const icon = item.querySelector('.status-icon');
|
|
|
- icon.textContent = '✅';
|
|
|
- currentIndex++;
|
|
|
-
|
|
|
- if (currentIndex < statuses.length) {
|
|
|
- setTimeout(updateStatus, 1000);
|
|
|
- } else {
|
|
|
- showNotification('校准完成', '人体姿势识别成功！');
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- setTimeout(updateStatus, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- function recalibrate() {
|
|
|
- // 重置状态
|
|
|
- const statuses = document.querySelectorAll('.status-item');
|
|
|
- statuses.forEach((item, index) => {
|
|
|
- const icon = item.querySelector('.status-icon');
|
|
|
- if (index >= 2) {
|
|
|
- icon.textContent = '⏳';
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- simulatePoseDetection();
|
|
|
- showNotification('重新校准', '正在重新分析姿势...');
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 服装选择功能 ============
|
|
|
-
|
|
|
- function switchClothingTab(tabName) {
|
|
|
- // 更新标签状态
|
|
|
- document.querySelectorAll('.clothing-tab').forEach(tab => tab.classList.remove('active'));
|
|
|
- document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
|
|
|
-
|
|
|
- // 显示对应内容
|
|
|
- document.querySelectorAll('.clothing-content').forEach(content => {
|
|
|
- content.style.display = 'none';
|
|
|
- });
|
|
|
- document.getElementById(`${tabName}-content`).style.display = 'block';
|
|
|
-
|
|
|
- const tabNames = {
|
|
|
- 'my-designs': '我的设计',
|
|
|
- 'community': '社区热门',
|
|
|
- 'brands': '品牌合作'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('切换分类', `已切换到${tabNames[tabName]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function selectClothing(clothingId) {
|
|
|
- selectedClothing = clothingId;
|
|
|
-
|
|
|
- // 视觉反馈
|
|
|
- document.querySelectorAll('.design-item, .trending-item, .brand-item').forEach(item => {
|
|
|
- item.classList.remove('selected');
|
|
|
- });
|
|
|
- event.currentTarget.classList.add('selected');
|
|
|
-
|
|
|
- showNotification('选择服装', '已选择该款设计，可以进行试穿了！');
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 试衣展示功能 ============
|
|
|
-
|
|
|
- let currentRotation = 0;
|
|
|
- let currentLighting = 'natural';
|
|
|
- let compareMode = 'split';
|
|
|
-
|
|
|
- function rotateFitting(direction) {
|
|
|
- if (direction === 'left') {
|
|
|
- currentRotation -= 30;
|
|
|
- } else if (direction === 'right') {
|
|
|
- currentRotation += 30;
|
|
|
- } else {
|
|
|
- currentRotation = 0;
|
|
|
- }
|
|
|
-
|
|
|
- const viewport = document.querySelector('.fitting-viewport');
|
|
|
- if (viewport) {
|
|
|
- viewport.style.transform = `rotateY(${currentRotation}deg)`;
|
|
|
- }
|
|
|
-
|
|
|
- showNotification('旋转视角', `视角：${currentRotation}°`);
|
|
|
- }
|
|
|
-
|
|
|
- function setFittingLight(lightType) {
|
|
|
- // 更新按钮状态
|
|
|
- document.querySelectorAll('.lighting-btn').forEach(btn => btn.classList.remove('active'));
|
|
|
- event.currentTarget.classList.add('active');
|
|
|
-
|
|
|
- currentLighting = lightType;
|
|
|
-
|
|
|
- const lightFilters = {
|
|
|
- 'natural': 'brightness(1.1) contrast(1.05)',
|
|
|
- 'indoor': 'brightness(0.9) sepia(0.1)',
|
|
|
- 'studio': 'brightness(1.2) contrast(1.1) saturate(1.1)'
|
|
|
- };
|
|
|
-
|
|
|
- const viewport = document.querySelector('.fitting-viewport');
|
|
|
- if (viewport) {
|
|
|
- viewport.style.filter = lightFilters[lightType];
|
|
|
- }
|
|
|
-
|
|
|
- const lightNames = {
|
|
|
- 'natural': '自然光',
|
|
|
- 'indoor': '室内光',
|
|
|
- 'studio': '摄影光'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('光照调节', `已切换到${lightNames[lightType]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function toggleCompare(mode) {
|
|
|
- // 更新按钮状态
|
|
|
- document.querySelectorAll('.compare-btn').forEach(btn => btn.classList.remove('active'));
|
|
|
- event.currentTarget.classList.add('active');
|
|
|
-
|
|
|
- compareMode = mode;
|
|
|
-
|
|
|
- const modeNames = {
|
|
|
- 'split': '左右对比',
|
|
|
- 'overlay': '叠加对比'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('对比模式', `已切换到${modeNames[mode]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function retryFitting() {
|
|
|
- showNotification('重新试穿', '正在重新进行智能贴合...');
|
|
|
-
|
|
|
- // 模拟重新试穿过程
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('试穿完成', '新的试穿效果已生成！');
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 输出功能 ============
|
|
|
-
|
|
|
- function saveImageCard() {
|
|
|
- showNotification('保存形象卡', '正在生成专属形象卡...');
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('保存成功', '形象卡已保存到相册！');
|
|
|
- }, 1500);
|
|
|
- }
|
|
|
-
|
|
|
- function shareToCommunity() {
|
|
|
- showNotification('分享到社区', '正在上传到设计社区...');
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('分享成功', '已分享到社区，快去看看大家的反应吧！');
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
-
|
|
|
- function buyNow() {
|
|
|
- if (!selectedClothing) {
|
|
|
- showNotification('购买提醒', '请先选择要购买的服装');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- showNotification('跳转购买', '正在跳转到购买页面...');
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('购买页面', '已为您打开购买链接！');
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 试衣间初始化 ============
|
|
|
-
|
|
|
- function initializeFittingRoom() {
|
|
|
- // 设置默认状态
|
|
|
- currentFittingStep = 'upload';
|
|
|
- selectUploadMethod('camera');
|
|
|
- switchClothingTab('my-designs');
|
|
|
-
|
|
|
- console.log('3D试衣间已初始化');
|
|
|
- }
|
|
|
-
|
|
|
- // 页面加载时初始化试衣间
|
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
|
|
- if (document.getElementById('ar-page')) {
|
|
|
- initializeFittingRoom();
|
|
|
- }
|
|
|
- });
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-</html>
|
