diff --git a/src/components/pet/index.tsx b/src/components/pet/index.tsx
index c859b68..51871bc 100644
--- a/src/components/pet/index.tsx
+++ b/src/components/pet/index.tsx
@@ -1,91 +1,109 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './pet.module.css'; // 确保这个路径对
 
-const petList = [
-  {
-    id: 'cat01',
-    name: '喵喵',
-    image: '/pets/cat.png',
-    mood: '开心',
-    hunger: 50,
-  },
-  {
-    id: 'dog01',
-    name: '汪汪',
-    image: '/pets/dog.png',
-    mood: '饥饿',
-    hunger: 70,
-  }
-];
+const PetGame: React.FC = () => {
+  const petRef = useRef<HTMLDivElement>(null);
+  const [mood, setMood] = useState(50);
+  const [hunger, setHunger] = useState(50);
 
-const PetGame = () => {
-  const [selectedPetIndex, setSelectedPetIndex] = useState(0);
-  const [petStates, setPetStates] = useState(petList);
-
-  // 定时每 5 秒减少一点饥饿值
+  // 从 localStorage 恢复状态
   useEffect(() => {
-    const timer = setInterval(() => {
-      setPetStates(prev =>
-        prev.map((pet, index) =>
-          index === selectedPetIndex
-            ? {
-                ...pet,
-                hunger: Math.min(100, pet.hunger + 2),
-                mood: pet.hunger > 80 ? '生气' : pet.mood
-              }
-            : pet
-        )
-      );
-    }, 5000);
-    return () => clearInterval(timer);
-  }, [selectedPetIndex]);
+    const saved = localStorage.getItem('petState');
+    if (saved) {
+      const { mood: savedMood, hunger: savedHunger } = JSON.parse(saved);
+      setMood(savedMood);
+      setHunger(savedHunger);
+    }
+  }, []);
 
+  // 每分钟更新状态并保存
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setMood(prev => {
+        const newMood = Math.min(prev + 1, 100);
+        savePetState(newMood, hunger);
+        return newMood;
+      });
+      setHunger(prev => {
+        const newHunger = Math.max(prev - 1, 0);
+        savePetState(mood, newHunger);
+        return newHunger;
+      });
+    }, 60000); // 每分钟一次
+
+    return () => clearInterval(interval);
+  }, [mood, hunger]);
+
+  // 保存状态到 localStorage
+  const savePetState = (newMood: number, newHunger: number) => {
+    localStorage.setItem('petState', JSON.stringify({ mood: newMood, hunger: newHunger }));
+  };
+
+  // 拖动功能（保留）
+  useEffect(() => {
+    const pet = petRef.current;
+    if (!pet) return;
+
+    let offsetX = 0;
+    let offsetY = 0;
+    let isDragging = false;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      isDragging = true;
+      const rect = pet.getBoundingClientRect();
+      offsetX = e.clientX - rect.left;
+      offsetY = e.clientY - rect.top;
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging && pet) {
+        pet.style.left = `${e.clientX - offsetX}px`;
+        pet.style.top = `${e.clientY - offsetY}px`;
+      }
+    };
+
+    const handleMouseUp = () => {
+      isDragging = false;
+    };
+
+    pet.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      pet.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+
+  // 喂食按钮逻辑
   const handleFeed = () => {
-    setPetStates(prev =>
-      prev.map((pet, index) =>
-        index === selectedPetIndex
-          ? {
-              ...pet,
-              hunger: Math.max(0, pet.hunger - 20),
-              mood: '开心'
-            }
-          : pet
-      )
-    );
+    const newHunger = Math.min(hunger + 10, 100);
+    setHunger(newHunger);
+    savePetState(mood, newHunger);
   };
 
-  const handlePet = () => {
-    setPetStates(prev =>
-      prev.map((pet, index) =>
-        index === selectedPetIndex
-          ? { ...pet, mood: '超级开心' }
-          : pet
-      )
-    );
+  // 互动按钮逻辑
+  const handleInteract = () => {
+    const newMood = Math.min(mood + 10, 100);
+    setMood(newMood);
+    savePetState(newMood, hunger);
   };
 
-  const currentPet = petStates[selectedPetIndex];
-
   return (
-    <div style={{ textAlign: 'center', padding: 20 }}>
-      <h2>当前宠物：{currentPet.name}</h2>
-      <img
-        src={currentPet.image}
-        alt={currentPet.name}
-        style={{ width: 200, height: 200, cursor: 'pointer' }}
-        onClick={handlePet}
-      />
-      <p>情绪：{currentPet.mood}</p>
-      <p>饥饿值：{currentPet.hunger}/100</p>
+    <div className={styles.cardContainer}>
+      <div className={styles.card}>
+        <p className={styles.text}>情绪：{mood}</p>
+        <p className={styles.text}>饥饿值：{hunger}/100</p>
 
-      <button onClick={handleFeed}>🍖 喂食</button>
+        <button className={styles.feedButton} onClick={handleFeed}>
+          🍖 喂食
+        </button>
 
-      <div style={{ marginTop: 20 }}>
-        <h4>切换宠物：</h4>
-        {petStates.map((pet, index) => (
-          <button key={pet.id} onClick={() => setSelectedPetIndex(index)} style={{ marginRight: 8 }}>
-            {pet.name}
-          </button>
-        ))}
+        <button className={styles.feedButton} onClick={handleInteract}>
+          🐾 摸摸头 / 玩游戏
+        </button>
       </div>
     </div>
   );
diff --git a/src/components/pet/pet.module.css b/src/components/pet/pet.module.css
new file mode 100644
index 0000000..833729a
--- /dev/null
+++ b/src/components/pet/pet.module.css
@@ -0,0 +1,71 @@
+/* 外部容器：左右布局 */
+.wrapper {
+    background:none;
+    border:none;
+    box-shadow: none;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 40px;
+  gap: 60px;
+}
+
+/* 宠物区域 */
+.petSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.petImage {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  cursor: pointer;
+  margin-bottom: 12px;
+}
+
+/* 卡片区域：紧跟宠物图下方，模拟右下角 */
+.cardContainer {
+  align-self: flex-end; /* 让它贴底部对齐 */
+  width: 280px;
+}
+
+.card {
+
+  border-radius: 16px;
+
+  padding: 20px;
+}
+
+.text {
+  font-size: 16px;
+  margin: 12px 0;
+  color: #333;
+}
+
+.feedButton {
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  background-color: #ff9800;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  margin: 16px 0;
+  transition: background-color 0.2s;
+}
+
+.feedButton:hover {
+  background-color: #fb8c00;
+}
+
+.switchSection {
+  margin-top: 20px;
+}
+
+.switchTitle {
+  font-weight: 600;
+  font-size: 14px;
+}