1

2025-08-13 16:35:38 +08:00
parent da67ef6214
commit 8ed7531ad7
22 changed files with 10202 additions and 217 deletions
@@ -0,0 +1,157 @@
+/* 宠物详情页面原型通用样式 */
+
+/* 基础重置和变量 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    /* 项目色彩语义化系统 */
+    --pet-primary: #FF8A80;      /* 温暖珊瑚红 - 主要操作 */
+    --pet-secondary: #81C784;    /* 自然绿 - 健康相关 */
+    --pet-accent: #64B5F6;       /* 友好蓝 - 信息提示 */
+    --pet-warning: #FFB74D;      /* 温和橙 - 注意事项 */
+    --pet-success: #A5D6A7;      /* 清新绿 - 成功状态 */
+    --pet-neutral: #F5F5F5;      /* 中性灰 - 背景色 */
+    
+    /* 文字颜色 */
+    --text-primary: #333333;
+    --text-secondary: #666666;
+    --text-light: #999999;
+    --text-white: #FFFFFF;
+    
+    /* 间距系统 */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    
+    /* 圆角系统 */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-round: 50%;
+    
+    /* 阴影系统 */
+    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
+    --shadow-md: 0 4px 8px rgba(0,0,0,0.12);
+    --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
+}
+
+/* 基础样式 */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: var(--pet-neutral);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 375px;
+    margin: 0 auto;
+    background: white;
+    min-height: 100vh;
+    position: relative;
+}
+
+/* 通用组件样式 */
+.pet-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: var(--radius-round);
+    object-fit: cover;
+    border: 3px solid var(--pet-primary);
+}
+
+.pet-avatar-lg {
+    width: 120px;
+    height: 120px;
+}
+
+.card {
+    background: white;
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md);
+    margin: var(--spacing-md);
+    box-shadow: var(--shadow-sm);
+}
+
+.btn {
+    padding: var(--spacing-sm) var(--spacing-md);
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-primary {
+    background: var(--pet-primary);
+    color: var(--text-white);
+}
+
+.btn-secondary {
+    background: var(--pet-secondary);
+    color: var(--text-white);
+}
+
+.btn-accent {
+    background: var(--pet-accent);
+    color: var(--text-white);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+/* 文字样式 */
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-light { color: var(--text-light); }
+.text-white { color: var(--text-white); }
+
+.text-sm { font-size: 12px; }
+.text-md { font-size: 14px; }
+.text-lg { font-size: 16px; }
+.text-xl { font-size: 18px; }
+.text-2xl { font-size: 24px; }
+
+.font-bold { font-weight: bold; }
+.font-medium { font-weight: 500; }
+
+/* 布局工具类 */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.text-center { text-align: center; }
+
+.p-sm { padding: var(--spacing-sm); }
+.p-md { padding: var(--spacing-md); }
+.p-lg { padding: var(--spacing-lg); }
+
+.m-sm { margin: var(--spacing-sm); }
+.m-md { margin: var(--spacing-md); }
+.m-lg { margin: var(--spacing-lg); }
+
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+
+/* 响应式 */
+@media (max-width: 375px) {
+    .container {
+        max-width: 100%;
+    }
+    
+    .card {
+        margin: var(--spacing-sm);
+        padding: var(--spacing-sm);
+    }
+}
@@ -0,0 +1,209 @@
+// 宠物详情页面原型通用脚本
+
+// 模拟宠物数据
+const mockPetData = {
+    id: 1,
+    name: "小橘",
+    breed: "橘猫",
+    gender: "公",
+    age: "2岁3个月",
+    weight: "4.2kg",
+    birthday: "2022-03-15",
+    adoptDate: "2022-04-20",
+    avatar: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K",
+    companionDays: 645,
+    healthStatus: "healthy",
+    personality: ["活泼", "粘人", "贪吃"],
+    lastCheckup: "2024-01-15",
+    nextVaccine: "2024-03-20"
+};
+
+// 模拟记录数据
+const mockRecords = [
+    {
+        id: 1,
+        type: "daily",
+        title: "今天的体重记录",
+        content: "小橘今天体重4.2kg，比上周增加了0.1kg",
+        time: "2024-01-20 09:30",
+        icon: "⚖️"
+    },
+    {
+        id: 2,
+        type: "health",
+        title: "疫苗接种",
+        content: "完成了狂犬疫苗第二针接种",
+        time: "2024-01-18 14:20",
+        icon: "💉"
+    },
+    {
+        id: 3,
+        type: "moment",
+        title: "搞破坏现场",
+        content: "把我的拖鞋咬坏了，但是看起来很开心的样子",
+        time: "2024-01-17 16:45",
+        icon: "😸"
+    },
+    {
+        id: 4,
+        type: "care",
+        title: "洗澡记录",
+        content: "给小橘洗了澡，全程很乖没有挣扎",
+        time: "2024-01-15 10:00",
+        icon: "🛁"
+    },
+    {
+        id: 5,
+        type: "food",
+        title: "换新猫粮",
+        content: "尝试了新品牌的猫粮，适应性很好",
+        time: "2024-01-14 18:30",
+        icon: "🍽️"
+    }
+];
+
+// 模拟健康数据
+const mockHealthData = {
+    weight: [
+        { date: "2024-01-01", value: 4.0 },
+        { date: "2024-01-08", value: 4.1 },
+        { date: "2024-01-15", value: 4.1 },
+        { date: "2024-01-20", value: 4.2 }
+    ],
+    healthScore: 85,
+    vaccineStatus: {
+        rabies: { status: "completed", nextDate: "2024-03-20" },
+        feline: { status: "due", nextDate: "2024-02-15" }
+    }
+};
+
+// 工具函数
+const utils = {
+    // 计算陪伴天数
+    calculateCompanionDays(adoptDate) {
+        const today = new Date();
+        const adopt = new Date(adoptDate);
+        const diffTime = Math.abs(today - adopt);
+        return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    },
+
+    // 格式化日期
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('zh-CN', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+    },
+
+    // 格式化时间
+    formatTime(timeString) {
+        const date = new Date(timeString);
+        return date.toLocaleString('zh-CN', {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    },
+
+    // 获取健康状态颜色
+    getHealthStatusColor(status) {
+        const colors = {
+            healthy: '#A5D6A7',
+            warning: '#FFB74D',
+            danger: '#FF8A80'
+        };
+        return colors[status] || colors.healthy;
+    },
+
+    // 生成随机ID
+    generateId() {
+        return Date.now() + Math.random().toString(36).substr(2, 9);
+    }
+};
+
+// 通用交互函数
+const interactions = {
+    // 显示提示信息
+    showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `toast toast-${type}`;
+        toast.textContent = message;
+        toast.style.cssText = `
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--pet-primary);
+            color: white;
+            padding: 12px 24px;
+            border-radius: 8px;
+            z-index: 1000;
+            animation: slideDown 0.3s ease;
+        `;
+        
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+            toast.style.animation = 'slideUp 0.3s ease';
+            setTimeout(() => {
+                document.body.removeChild(toast);
+            }, 300);
+        }, 2000);
+    },
+
+    // 模拟按钮点击
+    handleButtonClick(action) {
+        const actions = {
+            edit: () => this.showToast('编辑功能'),
+            addRecord: () => this.showToast('添加记录'),
+            aiChat: () => this.showToast('AI聊天'),
+            healthChart: () => this.showToast('健康图表'),
+            timeline: () => this.showToast('成长时光'),
+            share: () => this.showToast('分享功能')
+        };
+        
+        if (actions[action]) {
+            actions[action]();
+        } else {
+            this.showToast(`${action} 功能`);
+        }
+    }
+};
+
+// 添加CSS动画
+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; }
+    }
+    
+    @keyframes slideUp {
+        from { transform: translateX(-50%) translateY(0); opacity: 1; }
+        to { transform: translateX(-50%) translateY(-100%); opacity: 0; }
+    }
+    
+    .fade-in {
+        animation: fadeIn 0.5s ease;
+    }
+    
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+`;
+document.head.appendChild(style);
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+    // 更新陪伴天数
+    mockPetData.companionDays = utils.calculateCompanionDays(mockPetData.adoptDate);
+    
+    // 添加淡入动画
+    document.body.classList.add('fade-in');
+    
+    console.log('宠物详情页面原型已加载');
+});