|
@@ -0,0 +1,1003 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="zh-CN">
|
|
|
|
|
+ <head>
|
|
|
|
|
+ <meta charset="UTF-8" />
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
+ <title>2025新版移动端配色方案展示 - 校园管理系统</title>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ * {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ body {
|
|
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
|
|
|
+ sans-serif;
|
|
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .container {
|
|
|
|
|
+ max-width: 1400px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ margin-bottom: 40px;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header h1 {
|
|
|
|
|
+ font-size: 3rem;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ background: linear-gradient(135deg, #ffffff, #e3f2fd);
|
|
|
|
|
+ -webkit-background-clip: text;
|
|
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
|
|
+ background-clip: text;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header p {
|
|
|
|
|
+ font-size: 1.2rem;
|
|
|
|
|
+ opacity: 0.9;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .version-badge {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
+ padding: 8px 16px;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .schemes-container {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
|
|
|
|
|
+ gap: 30px;
|
|
|
|
|
+ margin-bottom: 40px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .scheme-card {
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ padding: 30px;
|
|
|
|
|
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .scheme-card::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ height: 4px;
|
|
|
|
|
+ background: var(--card-accent);
|
|
|
|
|
+ transition: height 0.3s ease;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .scheme-card:hover {
|
|
|
|
|
+ transform: translateY(-8px) scale(1.02);
|
|
|
|
|
+ box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .scheme-card:hover::before {
|
|
|
|
|
+ height: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .scheme-title {
|
|
|
|
|
+ font-size: 1.8rem;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: var(--scheme-primary);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .scheme-subtitle {
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ font-style: italic;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-section {
|
|
|
|
|
+ margin-bottom: 25px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-section h4 {
|
|
|
|
|
+ font-size: 1.1rem;
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ border-left: 4px solid var(--scheme-primary);
|
|
|
|
|
+ padding-left: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 8px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ transition: background 0.2s ease;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-row:hover {
|
|
|
|
|
+ background: rgba(0, 81, 217, 0.05);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-box {
|
|
|
|
|
+ width: 50px;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ font-size: 0.8rem;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
|
|
|
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-box::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: -100%;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ 90deg,
|
|
|
|
|
+ transparent,
|
|
|
|
|
+ rgba(255, 255, 255, 0.3),
|
|
|
|
|
+ transparent
|
|
|
|
|
+ );
|
|
|
|
|
+ transition: left 0.5s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-box:hover::before {
|
|
|
|
|
+ left: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-info {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ margin-left: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-name {
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .color-code {
|
|
|
|
|
+ font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ background: #f5f5f5;
|
|
|
|
|
+ padding: 2px 8px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ui-demo {
|
|
|
|
|
+ margin-top: 30px;
|
|
|
|
|
+ padding: 25px;
|
|
|
|
|
+ border-radius: 15px;
|
|
|
|
|
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ui-demo h4 {
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-buttons {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-button {
|
|
|
|
|
+ padding: 12px 24px;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-button::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: -100%;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ 90deg,
|
|
|
|
|
+ transparent,
|
|
|
|
|
+ rgba(255, 255, 255, 0.3),
|
|
|
|
|
+ transparent
|
|
|
|
|
+ );
|
|
|
|
|
+ transition: left 0.5s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-button:hover {
|
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
|
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-button:hover::before {
|
|
|
|
|
+ left: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-button:active {
|
|
|
|
|
+ transform: translateY(0);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-card {
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ margin: 15px 0;
|
|
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
|
|
+ border-left: 4px solid var(--scheme-primary);
|
|
|
|
|
+ transition: transform 0.2s ease;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-card:hover {
|
|
|
|
|
+ transform: translateX(5px);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-card h5 {
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-card p {
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .status-badges {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ margin-top: 15px;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .badge {
|
|
|
|
|
+ padding: 6px 14px;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ font-size: 0.8rem;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .badge:hover {
|
|
|
|
|
+ transform: scale(1.05);
|
|
|
|
|
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-preview {
|
|
|
|
|
+ width: 300px;
|
|
|
|
|
+ height: 640px;
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ border-radius: 30px;
|
|
|
|
|
+ margin: 25px auto;
|
|
|
|
|
+ padding: 25px;
|
|
|
|
|
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border: 8px solid #333;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-preview::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 10px;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
|
+ width: 60px;
|
|
|
|
|
+ height: 4px;
|
|
|
|
|
+ background: #333;
|
|
|
|
|
+ border-radius: 2px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-header {
|
|
|
|
|
+ height: 70px;
|
|
|
|
|
+ border-radius: 15px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ font-size: 1.1rem;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-content {
|
|
|
|
|
+ height: calc(100% - 90px);
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-item {
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-item:hover {
|
|
|
|
|
+ box-shadow: 0 4px 15px rgba(0, 81, 217, 0.1);
|
|
|
|
|
+ border-color: var(--scheme-primary);
|
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-item strong {
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-item p {
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 清新活力风格 */
|
|
|
|
|
+ .fresh {
|
|
|
|
|
+ --scheme-primary: #0051d9;
|
|
|
|
|
+ --card-accent: linear-gradient(135deg, #0051d9 0%, #4285f4 100%);
|
|
|
|
|
+ }
|
|
|
|
|
+ .fresh .mobile-header {
|
|
|
|
|
+ background: linear-gradient(135deg, #0051d9 0%, #4285f4 100%);
|
|
|
|
|
+ }
|
|
|
|
|
+ .fresh .demo-button.primary {
|
|
|
|
|
+ background: linear-gradient(135deg, #0051d9 0%, #4285f4 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .fresh .demo-button.secondary {
|
|
|
|
|
+ background: linear-gradient(135deg, #26a69a 0%, #4db6ac 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .fresh .demo-button.accent {
|
|
|
|
|
+ background: linear-gradient(135deg, #ff5722 0%, #ff8a50 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .fresh .badge.success {
|
|
|
|
|
+ background: #4caf50;
|
|
|
|
|
+ }
|
|
|
|
|
+ .fresh .badge.warning {
|
|
|
|
|
+ background: #ff9800;
|
|
|
|
|
+ }
|
|
|
|
|
+ .fresh .badge.error {
|
|
|
|
|
+ background: #f44336;
|
|
|
|
|
+ }
|
|
|
|
|
+ .fresh .badge.info {
|
|
|
|
|
+ background: #2196f3;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 温暖商务风格 */
|
|
|
|
|
+ .warm {
|
|
|
|
|
+ --scheme-primary: #0051d9;
|
|
|
|
|
+ --card-accent: linear-gradient(135deg, #0051d9 0%, #1565c0 100%);
|
|
|
|
|
+ }
|
|
|
|
|
+ .warm .mobile-header {
|
|
|
|
|
+ background: linear-gradient(135deg, #0051d9 0%, #1565c0 100%);
|
|
|
|
|
+ }
|
|
|
|
|
+ .warm .demo-button.primary {
|
|
|
|
|
+ background: linear-gradient(135deg, #0051d9 0%, #1565c0 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .warm .demo-button.secondary {
|
|
|
|
|
+ background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .warm .demo-button.accent {
|
|
|
|
|
+ background: linear-gradient(135deg, #ff6f00 0%, #ffb74d 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .warm .badge.success {
|
|
|
|
|
+ background: #388e3c;
|
|
|
|
|
+ }
|
|
|
|
|
+ .warm .badge.warning {
|
|
|
|
|
+ background: #f57c00;
|
|
|
|
|
+ }
|
|
|
|
|
+ .warm .badge.error {
|
|
|
|
|
+ background: #d32f2f;
|
|
|
|
|
+ }
|
|
|
|
|
+ .warm .badge.info {
|
|
|
|
|
+ background: #1976d2;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 深邃科技风格 */
|
|
|
|
|
+ .tech {
|
|
|
|
|
+ --scheme-primary: #0051d9;
|
|
|
|
|
+ --card-accent: linear-gradient(135deg, #0051d9 0%, #0d47a1 100%);
|
|
|
|
|
+ }
|
|
|
|
|
+ .tech .mobile-header {
|
|
|
|
|
+ background: linear-gradient(135deg, #0051d9 0%, #0d47a1 100%);
|
|
|
|
|
+ }
|
|
|
|
|
+ .tech .demo-button.primary {
|
|
|
|
|
+ background: linear-gradient(135deg, #0051d9 0%, #0d47a1 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tech .demo-button.secondary {
|
|
|
|
|
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tech .demo-button.accent {
|
|
|
|
|
+ background: linear-gradient(135deg, #7c4dff 0%, #651fff 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tech .badge.success {
|
|
|
|
|
+ background: #00e676;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tech .badge.warning {
|
|
|
|
|
+ background: #ffab00;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tech .badge.error {
|
|
|
|
|
+ background: #ff1744;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tech .badge.info {
|
|
|
|
|
+ background: #00e5ff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .comparison-section {
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ padding: 30px;
|
|
|
|
|
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ margin-top: 40px;
|
|
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .comparison-section h3 {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ margin-bottom: 25px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-size: 1.8rem;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .comparison-table {
|
|
|
|
|
+ overflow-x: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ table {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ th,
|
|
|
|
|
+ td {
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ border-bottom: 1px solid #e0e0e0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ th {
|
|
|
|
|
+ background: linear-gradient(135deg, #0051d9 0%, #1565c0 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ font-size: 0.95rem;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ td {
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ transition: background 0.3s ease;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ tr:hover td {
|
|
|
|
|
+ background: #f8f9fa;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-grid {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
|
|
+ gap: 20px;
|
|
|
|
|
+ margin-top: 30px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-card {
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
|
|
+ transition: transform 0.3s ease;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-card:hover {
|
|
|
|
|
+ transform: translateY(-5px);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-card h4 {
|
|
|
|
|
+ color: #0051d9;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-card p {
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @media (max-width: 768px) {
|
|
|
|
|
+ .schemes-container {
|
|
|
|
|
+ grid-template-columns: 1fr;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-preview {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ max-width: 300px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-buttons {
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header h1 {
|
|
|
|
|
+ font-size: 2rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 动画效果 */
|
|
|
|
|
+ @keyframes fadeInUp {
|
|
|
|
|
+ from {
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ transform: translateY(30px);
|
|
|
|
|
+ }
|
|
|
|
|
+ to {
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+ transform: translateY(0);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .scheme-card {
|
|
|
|
|
+ animation: fadeInUp 0.6s ease forwards;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .scheme-card:nth-child(1) {
|
|
|
|
|
+ animation-delay: 0.1s;
|
|
|
|
|
+ }
|
|
|
|
|
+ .scheme-card:nth-child(2) {
|
|
|
|
|
+ animation-delay: 0.2s;
|
|
|
|
|
+ }
|
|
|
|
|
+ .scheme-card:nth-child(3) {
|
|
|
|
|
+ animation-delay: 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+ </head>
|
|
|
|
|
+ <body>
|
|
|
|
|
+ <div class="container">
|
|
|
|
|
+ <div class="header">
|
|
|
|
|
+ <h1>2025全新移动端配色方案</h1>
|
|
|
|
|
+ <p>基于主题色 #0051d9 的三套创新配色设计</p>
|
|
|
|
|
+ <div class="version-badge">Version 2.0 - 全新设计</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="schemes-container">
|
|
|
|
|
+ <!-- 清新活力风格 -->
|
|
|
|
|
+ <div class="scheme-card fresh">
|
|
|
|
|
+ <h3 class="scheme-title">清新活力风格</h3>
|
|
|
|
|
+ <p class="scheme-subtitle">Fresh Vitality - 年轻、活跃、充满活力</p>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="color-section">
|
|
|
|
|
+ <h4>核心色彩</h4>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #0051d9">主</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">主题蓝</div>
|
|
|
|
|
+ <div class="color-code">#0051d9</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #26a69a">辅</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">清新青绿</div>
|
|
|
|
|
+ <div class="color-code">#26a69a</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #ff5722">强</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">活力橙红</div>
|
|
|
|
|
+ <div class="color-code">#ff5722</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="color-section">
|
|
|
|
|
+ <h4>活力色系</h4>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #e91e63">粉</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">活力粉</div>
|
|
|
|
|
+ <div class="color-code">#e91e63</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #9c27b0">紫</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">活力紫</div>
|
|
|
|
|
+ <div class="color-code">#9c27b0</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="ui-demo">
|
|
|
|
|
+ <h4>UI组件预览</h4>
|
|
|
|
|
+ <div class="demo-buttons">
|
|
|
|
|
+ <button class="demo-button primary">主要操作</button>
|
|
|
|
|
+ <button class="demo-button secondary">次要操作</button>
|
|
|
|
|
+ <button class="demo-button accent">强调操作</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="demo-card">
|
|
|
|
|
+ <h5>🎯 学生活动中心</h5>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 充满活力的校园生活平台,为学生提供丰富多彩的校园活动信息和互动体验。
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <div class="status-badges">
|
|
|
|
|
+ <span class="badge success">进行中</span>
|
|
|
|
|
+ <span class="badge warning">即将开始</span>
|
|
|
|
|
+ <span class="badge error">已结束</span>
|
|
|
|
|
+ <span class="badge info">报名中</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="mobile-preview">
|
|
|
|
|
+ <div class="mobile-header">🌟 智慧校园</div>
|
|
|
|
|
+ <div class="mobile-content">
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>📚 课程表</strong>
|
|
|
|
|
+ <p>个性化课程安排和智能提醒</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>🎭 社团活动</strong>
|
|
|
|
|
+ <p>发现和参与精彩的校园社团活动</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>🏆 成就系统</strong>
|
|
|
|
|
+ <p>记录你的校园成长轨迹</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>💬 校园圈子</strong>
|
|
|
|
|
+ <p>与同学分享生活点滴</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 温暖商务风格 -->
|
|
|
|
|
+ <div class="scheme-card warm">
|
|
|
|
|
+ <h3 class="scheme-title">温暖商务风格</h3>
|
|
|
|
|
+ <p class="scheme-subtitle">Warm Business - 专业、亲和、温暖可信</p>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="color-section">
|
|
|
|
|
+ <h4>核心色彩</h4>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #0051d9">主</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">主题蓝</div>
|
|
|
|
|
+ <div class="color-code">#0051d9</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #5d4037">辅</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">温暖棕色</div>
|
|
|
|
|
+ <div class="color-code">#5d4037</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #ff6f00">强</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">温暖橙色</div>
|
|
|
|
|
+ <div class="color-code">#ff6f00</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="color-section">
|
|
|
|
|
+ <h4>温暖色系</h4>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #ffc107">金</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">温暖金</div>
|
|
|
|
|
+ <div class="color-code">#ffc107</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #689f38">绿</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">温暖绿</div>
|
|
|
|
|
+ <div class="color-code">#689f38</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="ui-demo">
|
|
|
|
|
+ <h4>UI组件预览</h4>
|
|
|
|
|
+ <div class="demo-buttons">
|
|
|
|
|
+ <button class="demo-button primary">主要操作</button>
|
|
|
|
|
+ <button class="demo-button secondary">次要操作</button>
|
|
|
|
|
+ <button class="demo-button accent">强调操作</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="demo-card">
|
|
|
|
|
+ <h5>🏛️ 教务管理系统</h5>
|
|
|
|
|
+ <p>专业可信的教务管理平台,为教师提供温馨便捷的教学管理体验。</p>
|
|
|
|
|
+ <div class="status-badges">
|
|
|
|
|
+ <span class="badge success">已完成</span>
|
|
|
|
|
+ <span class="badge warning">待处理</span>
|
|
|
|
|
+ <span class="badge error">需关注</span>
|
|
|
|
|
+ <span class="badge info">进行中</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="mobile-preview">
|
|
|
|
|
+ <div class="mobile-header">📖 教师工作台</div>
|
|
|
|
|
+ <div class="mobile-content">
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>📋 课程管理</strong>
|
|
|
|
|
+ <p>便捷的课程信息和教学计划管理</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>👥 学生管理</strong>
|
|
|
|
|
+ <p>全面的学生信息和学习跟踪</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>📊 成绩录入</strong>
|
|
|
|
|
+ <p>简单高效的成绩管理系统</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>📝 工作日志</strong>
|
|
|
|
|
+ <p>记录教学心得和工作总结</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 深邃科技风格 -->
|
|
|
|
|
+ <div class="scheme-card tech">
|
|
|
|
|
+ <h3 class="scheme-title">深邃科技风格</h3>
|
|
|
|
|
+ <p class="scheme-subtitle">Deep Tech - 高科技、前沿、精密</p>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="color-section">
|
|
|
|
|
+ <h4>核心色彩</h4>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #0051d9">主</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">主题蓝</div>
|
|
|
|
|
+ <div class="color-code">#0051d9</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #1a1a2e">辅</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">深空灰蓝</div>
|
|
|
|
|
+ <div class="color-code">#1a1a2e</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #7c4dff">强</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">科技紫</div>
|
|
|
|
|
+ <div class="color-code">#7c4dff</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="color-section">
|
|
|
|
|
+ <h4>科技色系</h4>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #00e5ff">青</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">科技青</div>
|
|
|
|
|
+ <div class="color-code">#00e5ff</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="color-row">
|
|
|
|
|
+ <div class="color-box" style="background: #00e676">绿</div>
|
|
|
|
|
+ <div class="color-info">
|
|
|
|
|
+ <div class="color-name">科技绿</div>
|
|
|
|
|
+ <div class="color-code">#00e676</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="ui-demo">
|
|
|
|
|
+ <h4>UI组件预览</h4>
|
|
|
|
|
+ <div class="demo-buttons">
|
|
|
|
|
+ <button class="demo-button primary">主要操作</button>
|
|
|
|
|
+ <button class="demo-button secondary">次要操作</button>
|
|
|
|
|
+ <button class="demo-button accent">强调操作</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="demo-card">
|
|
|
|
|
+ <h5>🚀 智能数据中心</h5>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 基于AI和大数据的智能校园数据分析平台,提供精准的数据洞察和决策支持。
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <div class="status-badges">
|
|
|
|
|
+ <span class="badge success">在线</span>
|
|
|
|
|
+ <span class="badge warning">分析中</span>
|
|
|
|
|
+ <span class="badge error">异常</span>
|
|
|
|
|
+ <span class="badge info">同步中</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="mobile-preview">
|
|
|
|
|
+ <div class="mobile-header">🔬 数据分析台</div>
|
|
|
|
|
+ <div class="mobile-content">
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>📈 实时监控</strong>
|
|
|
|
|
+ <p>校园各项数据的实时监控和分析</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>🤖 AI助手</strong>
|
|
|
|
|
+ <p>智能问答和数据分析助手</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>🔍 深度分析</strong>
|
|
|
|
|
+ <p>多维度数据挖掘和趋势预测</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mobile-item">
|
|
|
|
|
+ <strong>⚡ 性能优化</strong>
|
|
|
|
|
+ <p>系统性能监控和优化建议</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="comparison-section">
|
|
|
|
|
+ <h3>🔍 配色方案深度对比</h3>
|
|
|
|
|
+ <div class="comparison-table">
|
|
|
|
|
+ <table>
|
|
|
|
|
+ <thead>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <th>对比维度</th>
|
|
|
|
|
+ <th>清新活力</th>
|
|
|
|
|
+ <th>温暖商务</th>
|
|
|
|
|
+ <th>深邃科技</th>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </thead>
|
|
|
|
|
+ <tbody>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <td><strong>适用场景</strong></td>
|
|
|
|
|
+ <td>学生端、社交功能</td>
|
|
|
|
|
+ <td>教师端、管理功能</td>
|
|
|
|
|
+ <td>数据分析、高级功能</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <td><strong>视觉风格</strong></td>
|
|
|
|
|
+ <td>年轻活跃</td>
|
|
|
|
|
+ <td>专业温暖</td>
|
|
|
|
|
+ <td>高科技感</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <td><strong>用户感受</strong></td>
|
|
|
|
|
+ <td>活力创新</td>
|
|
|
|
|
+ <td>可信亲和</td>
|
|
|
|
|
+ <td>前沿精密</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <td><strong>色彩饱和度</strong></td>
|
|
|
|
|
+ <td>高</td>
|
|
|
|
|
+ <td>中等</td>
|
|
|
|
|
+ <td>中高</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <td><strong>对比度</strong></td>
|
|
|
|
|
+ <td>标准</td>
|
|
|
|
|
+ <td>标准</td>
|
|
|
|
|
+ <td>高</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <td><strong>主要用户群</strong></td>
|
|
|
|
|
+ <td>学生、年轻用户</td>
|
|
|
|
|
+ <td>教师、管理员</td>
|
|
|
|
|
+ <td>技术人员、数据分析师</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <td><strong>情感导向</strong></td>
|
|
|
|
|
+ <td>乐观积极</td>
|
|
|
|
|
+ <td>稳重可信</td>
|
|
|
|
|
+ <td>理性专业</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <td><strong>应用优势</strong></td>
|
|
|
|
|
+ <td>提升用户参与度</td>
|
|
|
|
|
+ <td>增强专业信任感</td>
|
|
|
|
|
+ <td>突出技术实力</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </tbody>
|
|
|
|
|
+ </table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="feature-grid">
|
|
|
|
|
+ <div class="feature-card">
|
|
|
|
|
+ <h4>🎨 设计原则</h4>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 所有方案均基于主题色
|
|
|
|
|
+ #0051d9,确保品牌一致性的同时,针对不同用户群体和使用场景进行个性化设计。
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="feature-card">
|
|
|
|
|
+ <h4>📱 移动优先</h4>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 专为移动端设计,考虑触摸交互、屏幕尺寸、阅读体验等移动端特有的用户体验需求。
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="feature-card">
|
|
|
|
|
+ <h4>♿ 无障碍访问</h4>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 所有配色方案都符合WCAG
|
|
|
|
|
+ 2.1标准,确保良好的对比度和可访问性,支持各种视觉需求的用户。
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="feature-card">
|
|
|
|
|
+ <h4>🌓 暗色模式</h4>
|
|
|
|
|
+ <p>每套方案都提供对应的暗色模式配色,适应用户在不同环境下的使用偏好。</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="feature-card">
|
|
|
|
|
+ <h4>🔧 易于实现</h4>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 提供完整的 uview-ui
|
|
|
|
|
+ 配置代码和CSS变量定义,开发团队可以快速应用到项目中。
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="feature-card">
|
|
|
|
|
+ <h4>🔄 可扩展性</h4>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 色彩体系设计具有良好的扩展性,可以根据业务需求增加新的功能色彩和主题变体。
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </body>
|
|
|
|
|
+</html>
|