Ver Fonte

Initial commit of servo_sizer project

molt há 1 mês atrás
commit
47f007776e
5 ficheiros alterados com 975 adições e 0 exclusões
  1. 102 0
      README.md
  2. 78 0
      index.html
  3. 473 0
      script.js
  4. 21 0
      start.sh
  5. 301 0
      style.css

+ 102 - 0
README.md

@@ -0,0 +1,102 @@
+# 伺服驱动选型工具
+
+这是一个专业的伺服驱动选型计算工具,支持多种传动结构的参数计算和选型分析。
+
+## 功能特性
+
+- **多种传动结构支持**:
+  - 丝杠传动
+  - 同步带传动  
+  - 减速机传动
+  - 转盘机构
+  - 收放卷系统
+  - 直接驱动
+  - 多种组合传动
+
+- **关键指标计算**:
+  - 转速范围计算
+  - 转矩需求分析
+  - 惯量匹配计算
+  - 功率需求评估
+  - 安全系数验证
+
+- **专业参数考虑**:
+  - 机械摩擦系数
+  - 传动效率
+  - 负载惯量
+  - 加速度要求
+  - 工作循环分析
+
+- **用户友好界面**:
+  - 清晰的输入指导
+  - 实时计算反馈
+  - 工业科技风格UI
+  - 响应式设计
+
+## 使用方法
+
+1. 打开 `index.html` 文件
+2. 选择传动结构类型
+3. 输入相应的机械参数
+4. 查看计算结果和选型建议
+5. 可以导出计算报告
+
+## 技术栈
+
+- HTML5 + CSS3 + JavaScript (纯前端)
+- 无外部依赖
+- 离线可用
+- 响应式设计,支持桌面和移动设备
+
+## 文件结构
+
+```
+servo_sizer/
+├── index.html          # 主页面
+├── style.css           # 样式文件
+├── script.js           # 核心计算逻辑
+└── README.md          # 说明文档
+```
+
+## 计算公式说明
+
+### 1. 丝杠传动
+- 负载转矩: `T = (F × P) / (2π × η)`
+- 惯量折算: `J = J_load × (P/2π)²`
+- 最大转速: `n_max = v_max × 60 / P`
+
+### 2. 同步带传动
+- 负载转矩: `T = (F × r) / η`
+- 惯量折算: `J = J_load × (r₁/r₂)²`
+- 线速度: `v = ω × r`
+
+### 3. 减速机传动
+- 输出转矩: `T_out = T_in × i × η`
+- 惯量折算: `J_motor = J_load / i²`
+- 转速关系: `n_out = n_in / i`
+
+### 4. 转盘机构
+- 转动惯量: `J = 0.5 × m × r²`
+- 加速转矩: `T_acc = J × α`
+- 摩擦转矩: `T_fric = μ × m × g × r`
+
+### 5. 收放卷系统
+- 张力转矩: `T = F_tension × r`
+- 惯量变化: `J = 0.5 × m × (r_outer² + r_inner²)`
+- 功率需求: `P = T × ω`
+
+## 安全系数标准
+
+- **惯量匹配比**: 建议 ≤ 10:1 (负载惯量:电机惯量)
+- **安全系数**: 建议 ≥ 1.5-2.0
+- **效率考虑**: 丝杠(70-90%), 同步带(95-98%), 减速机(85-95%)
+
+## 开发说明
+
+所有计算逻辑都在 `script.js` 中实现,采用模块化设计,便于维护和扩展。
+
+如需添加新的传动类型或修改计算公式,请编辑相应的计算函数。
+
+## 许可证
+
+MIT License - 免费使用和修改。

+ 78 - 0
index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>伺服驱动选型工具 - Servo Sizer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>🔧 伺服驱动选型工具</h1>
+            <p class="subtitle">专业级伺服电机与驱动器选型计算平台</p>
+        </header>
+
+        <div class="main-content">
+            <div class="input-section">
+                <div class="card">
+                    <h2>⚙️ 传动结构选择</h2>
+                    <div class="transmission-selector">
+                        <select id="transmissionType" class="form-control">
+                            <option value="ballscrew">滚珠丝杠</option>
+                            <option value="timingBelt">同步带</option>
+                            <option value="gearbox">减速机</option>
+                            <option value="rotaryTable">转盘</option>
+                            <option value="winder">收放卷</option>
+                            <option value="directDrive">直接驱动</option>
+                            <option value="combined">组合传动</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="card" id="parametersSection">
+                    <h2>📊 机械参数输入</h2>
+                    <div id="dynamicParameters">
+                        <!-- 动态参数表单将在这里生成 -->
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2>🎯 选型要求</h2>
+                    <div class="form-group">
+                        <label for="safetyFactor">安全系数:</label>
+                        <input type="number" id="safetyFactor" class="form-control" value="1.5" min="1.0" max="3.0" step="0.1">
+                    </div>
+                    <div class="form-group">
+                        <label for="inertiaRatio">允许惯量比:</label>
+                        <input type="number" id="inertiaRatio" class="form-control" value="10" min="1" max="50" step="1">
+                    </div>
+                    <div class="form-group">
+                        <label for="frictionCoeff">摩擦系数:</label>
+                        <input type="number" id="frictionCoeff" class="form-control" value="0.01" min="0.001" max="0.5" step="0.001">
+                    </div>
+                </div>
+
+                <button id="calculateBtn" class="btn btn-primary">🚀 计算选型结果</button>
+            </div>
+
+            <div class="output-section">
+                <div class="card">
+                    <h2>📈 计算结果</h2>
+                    <div id="resultsDisplay">
+                        <p class="placeholder">请输入参数并点击计算获取结果</p>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2>📊 性能图表</h2>
+                    <canvas id="performanceChart" width="400" height="300"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

+ 473 - 0
script.js

@@ -0,0 +1,473 @@
+// 伺服驱动选型工具 - 核心计算逻辑
+class ServoSizer {
+    constructor() {
+        this.currentType = 'ballScrew';
+        this.init();
+    }
+
+    init() {
+        this.bindEvents();
+        this.updateUI();
+        this.loadDefaults();
+    }
+
+    bindEvents() {
+        // 传动类型切换
+        document.querySelectorAll('.transmission-type').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                this.currentType = e.target.dataset.type;
+                this.updateUI();
+                this.clearResults();
+            });
+        });
+
+        // 输入验证
+        document.querySelectorAll('input[type="number"]').forEach(input => {
+            input.addEventListener('input', () => {
+                this.validateInput(input);
+            });
+        });
+
+        // 计算按钮
+        document.getElementById('calculateBtn').addEventListener('click', () => {
+            this.calculate();
+        });
+
+        // 重置按钮
+        document.getElementById('resetBtn').addEventListener('click', () => {
+            this.resetForm();
+        });
+
+        // 导出按钮
+        document.getElementById('exportBtn').addEventListener('click', () => {
+            this.exportResults();
+        });
+    }
+
+    validateInput(input) {
+        const value = parseFloat(input.value);
+        const min = parseFloat(input.min) || -Infinity;
+        const max = parseFloat(input.max) || Infinity;
+        
+        if (value < min || value > max) {
+            input.classList.add('error');
+        } else {
+            input.classList.remove('error');
+        }
+    }
+
+    loadDefaults() {
+        // 加载默认值
+        const defaults = {
+            friction: 0.1,
+            efficiency: 0.9,
+            safetyFactor: 1.5,
+            inertiaRatio: 10
+        };
+        
+        Object.keys(defaults).forEach(key => {
+            const input = document.querySelector(`[name="${key}"]`);
+            if (input) input.value = defaults[key];
+        });
+    }
+
+    updateUI() {
+        // 隐藏所有传动类型表单
+        document.querySelectorAll('.transmission-form').forEach(form => {
+            form.style.display = 'none';
+        });
+        
+        // 显示当前选中的传动类型表单
+        const currentForm = document.getElementById(`${this.currentType}Form`);
+        if (currentForm) currentForm.style.display = 'block';
+        
+        // 更新按钮状态
+        document.querySelectorAll('.transmission-type').forEach(btn => {
+            btn.classList.remove('active');
+        });
+        document.querySelector(`[data-type="${this.currentType}"]`).classList.add('active');
+        
+        // 更新标题
+        const titles = {
+            ballScrew: '滚珠丝杠传动',
+            timingBelt: '同步带传动', 
+            gearbox: '减速机传动',
+            turntable: '转盘传动',
+            winding: '收放卷传动',
+            directDrive: '直接驱动'
+        };
+        document.getElementById('currentTypeTitle').textContent = titles[this.currentType] || '伺服驱动选型';
+    }
+
+    // 滚珠丝杠计算
+    calculateBallScrew(params) {
+        const {
+            loadMass, screwDiameter, screwLead, friction, efficiency,
+            maxSpeed, accelerationTime, travelDistance
+        } = params;
+
+        // 转换为标准单位
+        const lead = screwLead / 1000; // mm to m
+        const diameter = screwDiameter / 1000; // mm to m
+        
+        // 1. 负载转矩计算
+        const gravity = 9.81;
+        const frictionForce = loadMass * gravity * friction;
+        const frictionTorque = (frictionForce * diameter) / 2;
+        
+        // 推力转矩 (忽略效率先)
+        const thrustTorque = (loadMass * gravity * lead) / (2 * Math.PI);
+        const totalTorque = (thrustTorque + frictionTorque) / efficiency;
+        
+        // 2. 转速计算
+        const maxRpm = (maxSpeed * 60) / (lead * 1000); // mm/s to rpm
+        
+        // 3. 惯量计算
+        const screwInertia = (Math.PI * 7800 * Math.pow(diameter, 4) * travelDistance) / (32 * Math.pow(lead, 2));
+        const loadInertia = loadMass * Math.pow(lead / (2 * Math.PI), 2);
+        const totalInertia = screwInertia + loadInertia;
+        
+        // 4. 加速度转矩
+        const angularAccel = (maxRpm * 2 * Math.PI / 60) / accelerationTime;
+        const accelTorque = totalInertia * angularAccel;
+        
+        // 5. 峰值转矩
+        const peakTorque = totalTorque + accelTorque;
+        
+        // 6. 功率计算
+        const power = (peakTorque * maxRpm * 2 * Math.PI) / 60;
+        
+        return {
+            speedRange: { min: 0, max: maxRpm },
+            torque: { continuous: totalTorque, peak: peakTorque },
+            inertia: { motor: 0, load: totalInertia, ratio: totalInertia / 0.001 }, // 假设电机惯量
+            power: { required: power, rated: power * 1.2 }
+        };
+    }
+
+    // 同步带计算
+    calculateTimingBelt(params) {
+        const {
+            loadMass, pulleyDiameter, friction, efficiency,
+            maxSpeed, accelerationTime
+        } = params;
+
+        const radius = pulleyDiameter / 2000; // mm to m
+        
+        // 负载转矩
+        const gravity = 9.81;
+        const frictionForce = loadMass * gravity * friction;
+        const loadTorque = (loadMass * gravity * radius + frictionForce * radius) / efficiency;
+        
+        // 转速
+        const maxRpm = (maxSpeed * 60) / (Math.PI * pulleyDiameter);
+        
+        // 惯量
+        const pulleyInertia = 0.5 * 0.1 * Math.pow(radius, 2); // 假设滑轮质量0.1kg
+        const loadInertia = loadMass * Math.pow(radius, 2);
+        const totalInertia = pulleyInertia + loadInertia;
+        
+        // 加速度转矩
+        const angularAccel = (maxRpm * 2 * Math.PI / 60) / accelerationTime;
+        const accelTorque = totalInertia * angularAccel;
+        
+        const peakTorque = loadTorque + accelTorque;
+        const power = (peakTorque * maxRpm * 2 * Math.PI) / 60;
+        
+        return {
+            speedRange: { min: 0, max: maxRpm },
+            torque: { continuous: loadTorque, peak: peakTorque },
+            inertia: { motor: 0, load: totalInertia, ratio: totalInertia / 0.001 },
+            power: { required: power, rated: power * 1.2 }
+        };
+    }
+
+    // 减速机计算
+    calculateGearbox(params) {
+        const {
+            loadInertia, loadTorque, gearRatio, efficiency,
+            maxSpeed, accelerationTime
+        } = params;
+
+        // 折算到电机侧
+        const reflectedInertia = loadInertia / Math.pow(gearRatio, 2);
+        const reflectedTorque = loadTorque / (gearRatio * efficiency);
+        
+        // 电机转速
+        const motorRpm = maxSpeed * gearRatio;
+        
+        // 加速度转矩
+        const angularAccel = (motorRpm * 2 * Math.PI / 60) / accelerationTime;
+        const accelTorque = reflectedInertia * angularAccel;
+        
+        const peakTorque = reflectedTorque + accelTorque;
+        const power = (peakTorque * motorRpm * 2 * Math.PI) / 60;
+        
+        return {
+            speedRange: { min: 0, max: motorRpm },
+            torque: { continuous: reflectedTorque, peak: peakTorque },
+            inertia: { motor: 0, load: reflectedInertia, ratio: reflectedInertia / 0.001 },
+            power: { required: power, rated: power * 1.2 }
+        };
+    }
+
+    // 转盘计算
+    calculateTurntable(params) {
+        const {
+            tableMass, tableRadius, friction, efficiency,
+            maxSpeed, accelerationTime
+        } = params;
+
+        const radius = tableRadius / 1000; // mm to m
+        
+        // 转盘惯量 (实心圆盘)
+        const tableInertia = 0.5 * tableMass * Math.pow(radius, 2);
+        
+        // 摩擦转矩
+        const gravity = 9.81;
+        const frictionTorque = tableMass * gravity * friction * radius;
+        
+        // 转速
+        const maxRpm = maxSpeed;
+        
+        // 加速度转矩
+        const angularAccel = (maxRpm * 2 * Math.PI / 60) / accelerationTime;
+        const accelTorque = tableInertia * angularAccel;
+        
+        const peakTorque = (frictionTorque + accelTorque) / efficiency;
+        const power = (peakTorque * maxRpm * 2 * Math.PI) / 60;
+        
+        return {
+            speedRange: { min: 0, max: maxRpm },
+            torque: { continuous: frictionTorque / efficiency, peak: peakTorque },
+            inertia: { motor: 0, load: tableInertia, ratio: tableInertia / 0.001 },
+            power: { required: power, rated: power * 1.2 }
+        };
+    }
+
+    // 收放卷计算
+    calculateWinding(params) {
+        const {
+            materialDensity, materialWidth, initialDiameter, finalDiameter,
+            lineSpeed, tension, accelerationTime
+        } = params;
+
+        const initialRadius = initialDiameter / 2000; // mm to m
+        const finalRadius = finalDiameter / 2000;
+        const width = materialWidth / 1000;
+        
+        // 卷筒惯量 (空心圆柱)
+        const initialMass = materialDensity * Math.PI * (Math.pow(finalRadius, 2) - Math.pow(initialRadius, 2)) * width;
+        const initialInertia = 0.5 * initialMass * (Math.pow(finalRadius, 2) + Math.pow(initialRadius, 2));
+        
+        // 张力转矩
+        const tensionTorque = tension * finalRadius;
+        
+        // 转速范围
+        const minRpm = (lineSpeed * 60) / (Math.PI * finalDiameter);
+        const maxRpm = (lineSpeed * 60) / (Math.PI * initialDiameter);
+        
+        // 加速度转矩 (使用最大惯量)
+        const angularAccel = (maxRpm * 2 * Math.PI / 60) / accelerationTime;
+        const accelTorque = initialInertia * angularAccel;
+        
+        const peakTorque = tensionTorque + accelTorque;
+        const power = (peakTorque * maxRpm * 2 * Math.PI) / 60;
+        
+        return {
+            speedRange: { min: minRpm, max: maxRpm },
+            torque: { continuous: tensionTorque, peak: peakTorque },
+            inertia: { motor: 0, load: initialInertia, ratio: initialInertia / 0.001 },
+            power: { required: power, rated: power * 1.2 }
+        };
+    }
+
+    // 直接驱动计算
+    calculateDirectDrive(params) {
+        const {
+            loadInertia, frictionTorque, maxSpeed, accelerationTime
+        } = params;
+
+        // 直接驱动,无传动比
+        const motorRpm = maxSpeed;
+        
+        // 加速度转矩
+        const angularAccel = (motorRpm * 2 * Math.PI / 60) / accelerationTime;
+        const accelTorque = loadInertia * angularAccel;
+        
+        const peakTorque = frictionTorque + accelTorque;
+        const power = (peakTorque * motorRpm * 2 * Math.PI) / 60;
+        
+        return {
+            speedRange: { min: 0, max: motorRpm },
+            torque: { continuous: frictionTorque, peak: peakTorque },
+            inertia: { motor: 0, load: loadInertia, ratio: loadInertia / 0.001 },
+            power: { required: power, rated: power * 1.2 }
+        };
+    }
+
+    getFormValues() {
+        const form = document.getElementById(`${this.currentType}Form`);
+        const inputs = form.querySelectorAll('input[type="number"]');
+        const values = {};
+        
+        inputs.forEach(input => {
+            const name = input.name;
+            const value = parseFloat(input.value) || 0;
+            values[name] = value;
+        });
+        
+        // 获取通用参数
+        const friction = parseFloat(document.querySelector('[name="friction"]').value) || 0.1;
+        const efficiency = parseFloat(document.querySelector('[name="efficiency"]').value) || 0.9;
+        const safetyFactor = parseFloat(document.querySelector('[name="safetyFactor"]').value) || 1.5;
+        const inertiaRatio = parseFloat(document.querySelector('[name="inertiaRatio"]').value) || 10;
+        
+        return { ...values, friction, efficiency, safetyFactor, inertiaRatio };
+    }
+
+    calculate() {
+        const params = this.getFormValues();
+        
+        // 验证输入
+        if (!this.validateInputs(params)) {
+            this.showAlert('请检查输入参数是否有效', 'error');
+            return;
+        }
+        
+        let results;
+        try {
+            switch (this.currentType) {
+                case 'ballScrew':
+                    results = this.calculateBallScrew(params);
+                    break;
+                case 'timingBelt':
+                    results = this.calculateTimingBelt(params);
+                    break;
+                case 'gearbox':
+                    results = this.calculateGearbox(params);
+                    break;
+                case 'turntable':
+                    results = this.calculateTurntable(params);
+                    break;
+                case 'winding':
+                    results = this.calculateWinding(params);
+                    break;
+                case 'directDrive':
+                    results = this.calculateDirectDrive(params);
+                    break;
+                default:
+                    throw new Error('未知的传动类型');
+            }
+            
+            // 应用安全系数
+            results.torque.continuous *= params.safetyFactor;
+            results.torque.peak *= params.safetyFactor;
+            results.power.rated *= params.safetyFactor;
+            
+            this.displayResults(results);
+            this.showAlert('计算完成!', 'success');
+            
+        } catch (error) {
+            console.error('计算错误:', error);
+            this.showAlert('计算出错: ' + error.message, 'error');
+        }
+    }
+
+    validateInputs(params) {
+        // 基本验证
+        for (let key in params) {
+            if (params[key] < 0) return false;
+            if (isNaN(params[key])) return false;
+        }
+        return true;
+    }
+
+    displayResults(results) {
+        const resultsDiv = document.getElementById('results');
+        resultsDiv.innerHTML = `
+            <div class="result-card">
+                <h3>计算结果</h3>
+                <div class="result-grid">
+                    <div class="result-item">
+                        <label>转速范围 (RPM)</label>
+                        <div class="result-value">${results.speedRange.min.toFixed(1)} - ${results.speedRange.max.toFixed(1)}</div>
+                    </div>
+                    <div class="result-item">
+                        <label>连续转矩 (N·m)</label>
+                        <div class="result-value">${results.torque.continuous.toFixed(3)}</div>
+                    </div>
+                    <div class="result-item">
+                        <label>峰值转矩 (N·m)</label>
+                        <div class="result-value">${results.torque.peak.toFixed(3)}</div>
+                    </div>
+                    <div class="result-item">
+                        <label>负载惯量 (kg·m²)</label>
+                        <div class="result-value">${results.inertia.load.toExponential(3)}</div>
+                    </div>
+                    <div class="result-item">
+                        <label>惯量比</label>
+                        <div class="result-value">${results.inertia.ratio.toFixed(1)}</div>
+                    </div>
+                    <div class="result-item">
+                        <label>所需功率 (W)</label>
+                        <div class="result-value">${results.power.required.toFixed(1)}</div>
+                    </div>
+                    <div class="result-item">
+                        <label>额定功率 (W)</label>
+                        <div class="result-value">${results.power.rated.toFixed(1)}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+        resultsDiv.style.display = 'block';
+    }
+
+    clearResults() {
+        document.getElementById('results').style.display = 'none';
+    }
+
+    resetForm() {
+        document.querySelectorAll('input[type="number"]').forEach(input => {
+            input.value = input.defaultValue || '';
+            input.classList.remove('error');
+        });
+        this.clearResults();
+        this.loadDefaults();
+    }
+
+    exportResults() {
+        const resultsDiv = document.getElementById('results');
+        if (resultsDiv.style.display === 'none') {
+            this.showAlert('请先进行计算', 'warning');
+            return;
+        }
+        
+        const results = resultsDiv.innerText;
+        const blob = new Blob([results], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `servo_sizing_results_${new Date().toISOString().slice(0, 10)}.txt`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+
+    showAlert(message, type = 'info') {
+        const alertDiv = document.createElement('div');
+        alertDiv.className = `alert alert-${type}`;
+        alertDiv.textContent = message;
+        document.body.appendChild(alertDiv);
+        
+        setTimeout(() => {
+            alertDiv.remove();
+        }, 3000);
+    }
+}
+
+// 初始化应用
+document.addEventListener('DOMContentLoaded', () => {
+    new ServoSizer();
+});

+ 21 - 0
start.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+# 伺服驱动选型工具启动脚本
+
+echo "🚀 启动伺服驱动选型工具..."
+echo "🔧 工具文件位置: $(pwd)"
+echo "🌐 在浏览器中打开 index.html 即可使用"
+echo ""
+echo "💡 使用说明:"
+echo "1. 打开 index.html 文件"
+echo "2. 选择传动结构类型"
+echo "3. 输入相应的机械参数"
+echo "4. 点击'计算选型结果'按钮"
+echo "5. 查看计算结果和性能图表"
+
+# 如果系统有python3,可以启动简单的HTTP服务器
+if command -v python3 &> /dev/null; then
+    echo ""
+    echo "🎯 您也可以运行以下命令启动本地服务器:"
+    echo "cd servo_sizer && python3 -m http.server 8080"
+    echo "然后在浏览器中访问 http://localhost:8080"
+fi

+ 301 - 0
style.css

@@ -0,0 +1,301 @@
+/* 工业科技风格CSS */
+:root {
+  --primary-color: #007acc;
+  --secondary-color: #2c3e50;
+  --accent-color: #e74c3c;
+  --success-color: #27ae60;
+  --warning-color: #f39c12;
+  --light-gray: #ecf0f1;
+  --dark-gray: #34495e;
+  --border-color: #bdc3c7;
+  --card-bg: #ffffff;
+  --panel-bg: #f8f9fa;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 100%);
+  color: #ecf0f1;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.header h1 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+  background: linear-gradient(45deg, #00c6ff, #0072ff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.header p {
+  font-size: 1.1rem;
+  opacity: 0.8;
+}
+
+.main-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 25px;
+}
+
+@media (max-width: 1200px) {
+  .main-content {
+    grid-template-columns: 1fr;
+  }
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  padding: 25px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.card h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: #00c6ff;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.card h2 i {
+  font-size: 1.2rem;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #ecf0f1;
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 12px 15px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
+}
+
+.form-group input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.transmission-type {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.transmission-btn {
+  padding: 15px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  color: white;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.transmission-btn:hover {
+  background: rgba(0, 198, 255, 0.2);
+  border-color: #00c6ff;
+}
+
+.transmission-btn.active {
+  background: rgba(0, 198, 255, 0.3);
+  border-color: #00c6ff;
+  color: #00c6ff;
+}
+
+.combination-section {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-group {
+  display: flex;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.btn {
+  padding: 12px 25px;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  flex: 1;
+}
+
+.btn-primary {
+  background: linear-gradient(45deg, #007acc, #005fa3);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: linear-gradient(45deg, #0066b3, #004d8c);
+  transform: translateY(-2px);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.results-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.result-card {
+  background: rgba(39, 174, 96, 0.1);
+  border: 1px solid rgba(39, 174, 96, 0.3);
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+}
+
+.result-card h3 {
+  font-size: 1rem;
+  margin-bottom: 10px;
+  color: #27ae60;
+}
+
+.result-card .value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: white;
+}
+
+.result-card .unit {
+  font-size: 0.9rem;
+  opacity: 0.7;
+}
+
+.warning {
+  background: rgba(243, 156, 18, 0.1);
+  border: 1px solid rgba(243, 156, 18, 0.3);
+  color: #f39c12;
+  padding: 15px;
+  border-radius: 8px;
+  margin-top: 20px;
+  display: none;
+}
+
+.error {
+  background: rgba(231, 76, 60, 0.1);
+  border: 1px solid rgba(231, 76, 60, 0.3);
+  color: #e74c3c;
+  padding: 15px;
+  border-radius: 8px;
+  margin-top: 20px;
+  display: none;
+}
+
+.guidance-section {
+  margin-top: 20px;
+  padding: 15px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  border-left: 4px solid #00c6ff;
+}
+
+.guidance-section h4 {
+  margin-bottom: 10px;
+  color: #00c6ff;
+}
+
+.guidance-section ul {
+  padding-left: 20px;
+}
+
+.guidance-section li {
+  margin-bottom: 5px;
+  line-height: 1.4;
+}
+
+.hidden {
+  display: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .main-content {
+    gap: 15px;
+  }
+  
+  .card {
+    padding: 15px;
+  }
+  
+  .header h1 {
+    font-size: 2rem;
+  }
+  
+  .transmission-type {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
+  
+  .btn-group {
+    flex-direction: column;
+  }
+  
+  .btn {
+    flex: none;
+  }
+}