pet/prototypes/pet-detail/pet-detail-prototype-08.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物详情 - 专业医疗式</title>
    <link rel="stylesheet" href="assets/css/common.css">
    <style>
        /* 专业医疗式特有样式 */
        .medical-container {
            background: #F8F9FA;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }
        
        .medical-header {
            background: #2C5282;
            color: white;
            padding: var(--spacing-lg);
            position: relative;
        }
        
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-md);
        }
        
        .patient-id {
            font-size: 12px;
            opacity: 0.8;
        }
        
        .emergency-btn {
            background: #E53E3E;
            color: white;
            border: none;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-weight: bold;
        }
        
        .patient-info {
            display: flex;
            gap: var(--spacing-md);
            align-items: center;
        }
        
        .patient-avatar {
            width: 80px;
            height: 80px;
            border-radius: var(--radius-md);
            border: 2px solid rgba(255,255,255,0.3);
        }
        
        .patient-details h1 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: var(--spacing-xs);
        }
        
        .patient-meta {
            font-size: 14px;
            opacity: 0.9;
            line-height: 1.4;
        }
        
        .medical-tabs {
            background: white;
            border-bottom: 1px solid #E2E8F0;
            display: flex;
            overflow-x: auto;
        }
        
        .tab-item {
            padding: var(--spacing-md) var(--spacing-lg);
            border-bottom: 3px solid transparent;
            font-weight: 500;
            color: #4A5568;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .tab-item.active {
            color: #2C5282;
            border-bottom-color: #2C5282;
            background: #F7FAFC;
        }
        
        .medical-section {
            background: white;
            margin: var(--spacing-md);
            border-radius: var(--radius-md);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .section-header {
            background: #EDF2F7;
            padding: var(--spacing-md);
            border-bottom: 1px solid #E2E8F0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .section-title {
            font-weight: bold;
            color: #2D3748;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        .section-action {
            background: #2C5282;
            color: white;
            border: none;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            font-size: 12px;
        }
        
        .vital-signs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
            padding: var(--spacing-md);
        }
        
        .vital-item {
            text-align: center;
            padding: var(--spacing-md);
            background: #F7FAFC;
            border-radius: var(--radius-md);
            border: 1px solid #E2E8F0;
        }
        
        .vital-value {
            font-size: 24px;
            font-weight: bold;
            color: #2D3748;
            margin-bottom: var(--spacing-xs);
        }
        
        .vital-label {
            font-size: 12px;
            color: #718096;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .vital-status {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-top: var(--spacing-xs);
            font-weight: bold;
        }
        
        .status-normal {
            background: #C6F6D5;
            color: #22543D;
        }
        
        .status-warning {
            background: #FEFCBF;
            color: #744210;
        }
        
        .status-critical {
            background: #FED7D7;
            color: #742A2A;
        }
        
        .medical-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .medical-table th {
            background: #EDF2F7;
            padding: var(--spacing-sm);
            text-align: left;
            font-weight: bold;
            color: #2D3748;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .medical-table td {
            padding: var(--spacing-sm);
            border-bottom: 1px solid #E2E8F0;
            font-size: 14px;
            color: #4A5568;
        }
        
        .medical-table tr:hover {
            background: #F7FAFC;
        }
        
        .treatment-item {
            padding: var(--spacing-md);
            border-bottom: 1px solid #E2E8F0;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        .treatment-item:last-child {
            border-bottom: none;
        }
        
        .treatment-info {
            flex: 1;
        }
        
        .treatment-name {
            font-weight: bold;
            color: #2D3748;
            margin-bottom: var(--spacing-xs);
        }
        
        .treatment-details {
            font-size: 14px;
            color: #718096;
            line-height: 1.4;
        }
        
        .treatment-date {
            font-size: 12px;
            color: #A0AEC0;
            white-space: nowrap;
            margin-left: var(--spacing-md);
        }
        
        .alert-box {
            background: #FED7D7;
            border: 1px solid #FEB2B2;
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            margin: var(--spacing-md);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        .alert-icon {
            font-size: 20px;
            color: #E53E3E;
        }
        
        .alert-content {
            flex: 1;
        }
        
        .alert-title {
            font-weight: bold;
            color: #742A2A;
            margin-bottom: var(--spacing-xs);
        }
        
        .alert-message {
            font-size: 14px;
            color: #742A2A;
        }
        
        .medical-actions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-sm);
            padding: var(--spacing-md);
            background: #F7FAFC;
        }
        
        .medical-btn {
            background: #2C5282;
            color: white;
            border: none;
            padding: var(--spacing-md);
            border-radius: var(--radius-md);
            font-weight: bold;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .medical-btn:hover {
            background: #2A4365;
        }
        
        .medical-btn.secondary {
            background: #4A5568;
        }
        
        .medical-btn.emergency {
            background: #E53E3E;
        }
        
        .chart-placeholder {
            height: 120px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            margin: var(--spacing-md);
        }
    </style>
</head>
<body>
    <div class="container medical-container">
        <!-- 医疗头部 -->
        <div class="medical-header">
            <div class="header-top">
                <div class="patient-id">患者编号: PET-2024-001</div>
                <button class="emergency-btn">🚨 紧急联系</button>
            </div>
            
            <div class="patient-info">
                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
                     alt="小橘" class="patient-avatar">
                <div class="patient-details">
                    <h1>小橘</h1>
                    <div class="patient-meta">
                        品种: 橘猫 (Felis catus)<br>
                        性别: 雄性 (已绝育)<br>
                        年龄: 2岁3个月 | 体重: 4.2kg<br>
                        主治医师: 张医生 | 建档日期: 2022-04-20
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 医疗标签页 -->
        <div class="medical-tabs">
            <div class="tab-item active">概览</div>
            <div class="tab-item">生命体征</div>
            <div class="tab-item">治疗记录</div>
            <div class="tab-item">检查报告</div>
            <div class="tab-item">用药记录</div>
        </div>
        
        <!-- 重要提醒 -->
        <div class="alert-box">
            <div class="alert-icon">⚠️</div>
            <div class="alert-content">
                <div class="alert-title">驱虫提醒</div>
                <div class="alert-message">距离上次驱虫已超过3个月，建议尽快安排驱虫治疗</div>
            </div>
        </div>
        
        <!-- 生命体征 -->
        <div class="medical-section">
            <div class="section-header">
                <div class="section-title">
                    <span>📊</span>
                    <span>生命体征监测</span>
                </div>
                <button class="section-action">更新数据</button>
            </div>
            
            <div class="vital-signs">
                <div class="vital-item">
                    <div class="vital-value">4.2</div>
                    <div class="vital-label">体重 (kg)</div>
                    <div class="vital-status status-normal">正常</div>
                </div>
                <div class="vital-item">
                    <div class="vital-value">38.5</div>
                    <div class="vital-label">体温 (°C)</div>
                    <div class="vital-status status-normal">正常</div>
                </div>
                <div class="vital-item">
                    <div class="vital-value">85</div>
                    <div class="vital-label">健康评分</div>
                    <div class="vital-status status-normal">良好</div>
                </div>
                <div class="vital-item">
                    <div class="vital-value">120</div>
                    <div class="vital-label">心率 (bpm)</div>
                    <div class="vital-status status-warning">偏高</div>
                </div>
            </div>
        </div>
        
        <!-- 体重趋势图 -->
        <div class="chart-placeholder">
            📈 体重趋势图 (近30天)
        </div>
        
        <!-- 疫苗记录 -->
        <div class="medical-section">
            <div class="section-header">
                <div class="section-title">
                    <span>💉</span>
                    <span>疫苗接种记录</span>
                </div>
                <button class="section-action">添加记录</button>
            </div>
            
            <table class="medical-table">
                <thead>
                    <tr>
                        <th>疫苗类型</th>
                        <th>接种日期</th>
                        <th>有效期</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>狂犬疫苗</td>
                        <td>2024-01-18</td>
                        <td>2025-01-18</td>
                        <td><span class="vital-status status-normal">有效</span></td>
                    </tr>
                    <tr>
                        <td>猫三联疫苗</td>
                        <td>2023-12-15</td>
                        <td>2024-12-15</td>
                        <td><span class="vital-status status-normal">有效</span></td>
                    </tr>
                    <tr>
                        <td>猫瘟疫苗</td>
                        <td>2023-11-20</td>
                        <td>2024-11-20</td>
                        <td><span class="vital-status status-warning">即将到期</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 治疗记录 -->
        <div class="medical-section">
            <div class="section-header">
                <div class="section-title">
                    <span>🏥</span>
                    <span>最近治疗记录</span>
                </div>
                <button class="section-action">查看全部</button>
            </div>
            
            <div class="treatment-item">
                <div class="treatment-info">
                    <div class="treatment-name">狂犬疫苗接种</div>
                    <div class="treatment-details">
                        接种狂犬疫苗第二针，患者配合良好，无不良反应。
                        建议观察24小时，如有异常及时联系。
                    </div>
                </div>
                <div class="treatment-date">2024-01-18</div>
            </div>
            
            <div class="treatment-item">
                <div class="treatment-info">
                    <div class="treatment-name">常规体检</div>
                    <div class="treatment-details">
                        全面体检，各项指标正常。体重增长良好，
                        建议继续保持现有饮食和运动习惯。
                    </div>
                </div>
                <div class="treatment-date">2024-01-15</div>
            </div>
            
            <div class="treatment-item">
                <div class="treatment-info">
                    <div class="treatment-name">驱虫治疗</div>
                    <div class="treatment-details">
                        体内外驱虫，使用拜耳驱虫药。
                        下次驱虫时间建议3个月后。
                    </div>
                </div>
                <div class="treatment-date">2023-10-20</div>
            </div>
        </div>
        
        <!-- 医疗操作 -->
        <div class="medical-actions">
            <button class="medical-btn" onclick="interactions.handleButtonClick('addRecord')">
                📝 添加记录
            </button>
            <button class="medical-btn secondary" onclick="interactions.handleButtonClick('healthChart')">
                📊 健康报告
            </button>
            <button class="medical-btn" onclick="interactions.handleButtonClick('aiChat')">
                🤖 AI诊断
            </button>
            <button class="medical-btn emergency" onclick="interactions.handleButtonClick('emergency')">
                🚨 紧急求助
            </button>
        </div>
    </div>
    
    <script src="assets/js/common.js"></script>
    <script>
        // 专业医疗式特有交互
        document.addEventListener('DOMContentLoaded', function() {
            // 标签页切换
            const tabs = document.querySelectorAll('.tab-item');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    interactions.showToast(`切换到${this.textContent}页面`);
                });
            });
            
            // 生命体征数值动画
            const vitalValues = document.querySelectorAll('.vital-value');
            vitalValues.forEach((value, index) => {
                const finalValue = value.textContent;
                value.textContent = '0';
                
                setTimeout(() => {
                    let current = 0;
                    const target = parseFloat(finalValue);
                    const increment = target / 20;
                    
                    const timer = setInterval(() => {
                        current += increment;
                        if (current >= target) {
                            current = target;
                            clearInterval(timer);
                        }
                        value.textContent = current.toFixed(1);
                    }, 50);
                }, index * 200);
            });
            
            // 表格行悬停效果
            const tableRows = document.querySelectorAll('.medical-table tr');
            tableRows.forEach(row => {
                row.addEventListener('mouseenter', function() {
                    this.style.backgroundColor = '#EDF2F7';
                });
                
                row.addEventListener('mouseleave', function() {
                    this.style.backgroundColor = '';
                });
            });
            
            console.log('专业医疗式原型已加载');
        });
    </script>
</body>
</html>