style(components): 优化导航栏和电子木鱼组件的UI样式

- 调整CopyButton组件的圆角样式
- 更新导航栏的高度、背景、边框和阴影样式
- 优化导航链接的颜色、字体和悬停效果
- 改进折叠菜单的内容样式和动画效果
- 调整时间戳控件的响应式布局
- 优化电子木鱼组件的整体视觉效果
- 更新电子木鱼计数显示的样式和动画
- 改进控制区域输入框和按钮的样式
- 添加多设备尺寸的响应式设计适配

src/App.css

@@ -23,13 +23,15 @@ body {
 }
 
 .nav {
-    height: 48px;
+    height: 56px;
-    border-bottom: 1px solid #e5e5e5;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    border-bottom: 1px solid #e9ecef;
     display: flex;
     align-items: center;
-    padding: 0 16px;
+    padding: 0 20px;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
     position: relative;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
 .nav-content {
@@ -51,26 +53,43 @@ body {
 
 .nav-link {
     text-decoration: none;
-    color: #666;
+    color: #495057;
     font-size: 14px;
-    padding: 8px 12px;
+    font-weight: 500;
+    padding: 8px 16px;
     border-radius: 8px;
-    transition: all 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: inline-block;
     white-space: nowrap;
+    position: relative;
+    border: 1px solid transparent;
 }
 
 .nav-link:hover {
-    background-color: #f5f5f5;
+    background-color: #f8f9fa;
-    color: #333;
+    color: #212529;
+    border-color: #dee2e6;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .nav-link.active {
-    color: #1677ff;
+    color: #4361ee;
     font-weight: 600;
-    border-bottom: 2px solid #1677ff;
+    background: linear-gradient(135deg, rgba(67, 97, 238, 0.1) 0%, rgba(67, 97, 238, 0.05) 100%);
-    padding-bottom: 4px;
+    border: 1px solid rgba(67, 97, 238, 0.2);
-    background-color: rgba(22, 119, 255, 0.05);
+    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.15);
+}
+
+.nav-link.active::before {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 16px;
+    right: 16px;
+    height: 3px;
+    background: linear-gradient(90deg, #4361ee, #3a56d4);
+    border-radius: 3px;
 }
 
 /* 折叠菜单相关样式 */
@@ -85,19 +104,20 @@ body {
     top: 100%;
     right: 0;
     background: white;
-    border: 1px solid transparent; /* 使用透明边框，避免悬停时显示 */
+    border: 1px solid transparent;
-    border-radius: 8px;
+    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-    min-width: 120px;
+    min-width: 140px;
-    margin-top: 8px;
+    margin-top: 12px;
     flex-direction: column;
     gap: 0;
     opacity: 0;
     visibility: hidden;
-    transform: translateY(-10px);
+    transform: translateY(-12px) scale(0.95);
-    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, border-color 0.3s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: none;
-    border-block: 0;
+    z-index: 1000;
+    overflow: hidden;
 }
 
 .nav-collapse-item:hover .nav-collapse-content,
@@ -105,17 +125,22 @@ body {
     display: flex;
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
-    border-color: #e5e5e5; /* 只在显示时显示边框 */
+    border-color: #e9ecef;
 }
 
 .nav-collapse-content .nav-link {
-    padding: 10px 16px;
+    padding: 12px 20px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f8f9fa;
     width: 100%;
     text-align: left;
     box-sizing: border-box;
-    border-block: 0;
+    border-radius: 0;
+    border: none;
+    font-size: 14px;
+    font-weight: 500;
+    color: #495057;
+    transition: all 0.2s ease;
 }
 
 .nav-collapse-content .nav-link:last-child {
@@ -123,39 +148,90 @@ body {
 }
 
 .nav-collapse-content .nav-link:hover {
-    background-color: #f5f5f5;
+    background: linear-gradient(90deg, rgba(67, 97, 238, 0.08), rgba(67, 97, 238, 0.04));
+    color: #4361ee;
+    padding-left: 24px;
+}
+
+.nav-collapse-content .nav-link.active {
+    background: linear-gradient(90deg, rgba(67, 97, 238, 0.15), rgba(67, 97, 238, 0.08));
+    color: #4361ee;
+    font-weight: 600;
+    border: none;
+    box-shadow: none;
+}
+
+.nav-collapse-content .nav-link.active::before {
+    display: none;
 }
 
 .nav-toggle {
-    background: none;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-    border: 1px solid #e5e5e5;
+    border: 1px solid #dee2e6;
-    border-radius: 8px;
+    border-radius: 10px;
-    padding: 6px 12px;
+    padding: 8px 16px;
     cursor: pointer;
     font-size: 14px;
-    color: #666;
+    font-weight: 500;
+    color: #495057;
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 6px;
-    transition: all 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    margin-left: 8px;
+    margin-left: 12px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+    position: relative;
+    overflow: hidden;
+}
+
+.nav-toggle::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(67, 97, 238, 0.1), rgba(67, 97, 238, 0.05));
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 1;
 }
 
 .nav-toggle:hover {
-    background-color: #f5f5f5;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-    border-color: #d9d9d9;
+    border-color: #4361ee;
-    color: #333;
+    color: #4361ee;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
+}
+
+.nav-toggle:hover::before {
+    opacity: 1;
 }
 
 .nav-toggle-icon {
-    font-size: 16px;
+    font-size: 18px;
     line-height: 1;
+    position: relative;
+    z-index: 2;
+    transition: transform 0.3s ease;
+}
+
+.nav-toggle:hover .nav-toggle-icon {
+    transform: scale(1.1);
 }
 
 .nav-collapse-count {
     font-size: 12px;
-    color: #999;
+    font-weight: 600;
-    font-weight: 500;
+    color: #4361ee;
+    background: rgba(67, 97, 238, 0.1);
+    padding: 2px 6px;
+    border-radius: 10px;
+    min-width: 20px;
+    text-align: center;
+    position: relative;
+    z-index: 2;
 }
 
 /* 响应式设计 */
@@ -215,6 +291,7 @@ body {
     .nav {
         padding: 0 12px;
         z-index: 1000; /* 确保导航栏在展开菜单上方 */
+        height: 52px;
     }
 
     .nav-list {
@@ -243,25 +320,27 @@ body {
         max-width: 80px;
         overflow: hidden;
         text-overflow: ellipsis;
+        border: 1px solid transparent;
     }
 
     /* 折叠菜单内容 - 只在打开时显示 */
     .nav-collapse-content {
         position: fixed;
-        top: 48px;
+        top: 52px;
         left: 0;
         right: 0;
         background: white;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         z-index: 999;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease;
         border: 0;
+        border-radius: 0 0 12px 12px;
     }
 
     .nav-collapse-content.show {
-        max-height: calc(100% - 48px);
+        max-height: calc(100% - 52px);
         overflow-y: auto;
     }
 
@@ -269,9 +348,23 @@ body {
         display: block;
         width: 100%;
         text-align: center;
-        border-bottom: 1px solid #f0f0f0;
+        border-bottom: 1px solid #f8f9fa;
-        padding: 12px 16px;
+        padding: 14px 16px;
         font-size: 14px;
+        font-weight: 500;
+        color: #495057;
+        transition: all 0.2s ease;
+    }
+
+    .nav-collapse-content .nav-link:hover {
+        background: linear-gradient(90deg, rgba(67, 97, 238, 0.08), rgba(67, 97, 238, 0.04));
+        color: #4361ee;
+    }
+
+    .nav-collapse-content .nav-link.active {
+        background: linear-gradient(90deg, rgba(67, 97, 238, 0.15), rgba(67, 97, 238, 0.08));
+        color: #4361ee;
+        font-weight: 600;
     }
 
     .nav-collapse-content .nav-link:last-child {
@@ -286,10 +379,18 @@ body {
         display: flex;
         align-items: center;
         justify-content: center;
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+        border: 1px solid #dee2e6;
+        border-radius: 8px;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
     }
 
     .nav-toggle:hover {
-        background: #f0f0f0;
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        border-color: #4361ee;
+        color: #4361ee;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
     }
 
     .nav-collapse-count {
@@ -327,6 +428,8 @@ body,
     .nav {
         position: relative;
         border-bottom: none; /* 移除导航栏底部边框 */
+        height: 48px;
+        padding: 0 8px;
     }
 
     .nav::after {
@@ -336,7 +439,7 @@ body,
         left: 0;
         right: 0;
         height: 1px;
-        background-color: #e5e5e5;
+        background: linear-gradient(90deg, transparent, #e9ecef, transparent);
     }
 
     /* 当菜单展开时，允许换行并显示所有可见项 */
@@ -350,17 +453,44 @@ body,
         max-width: 60px;
         padding: 6px 8px;
         font-size: 12px;
+        border: 1px solid transparent;
+    }
+
+    .nav-list > li:not(.nav-collapse-item) .nav-link.active {
+        background: linear-gradient(135deg, rgba(67, 97, 238, 0.1) 0%, rgba(67, 97, 238, 0.05) 100%);
+        border: 1px solid rgba(67, 97, 238, 0.2);
+        box-shadow: 0 1px 4px rgba(67, 97, 238, 0.15);
+    }
+
+    .nav-collapse-content {
+        top: 48px;
+    }
+
+    .nav-collapse-content.show {
+        max-height: calc(100% - 48px);
     }
 
     .nav-toggle {
         padding: 6px 10px;
         font-size: 12px;
-        min-width: 40px;
+        min-width: 36px;
-        height: 30px;
+        height: 28px;
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+        border: 1px solid #dee2e6;
+        border-radius: 6px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+    }
+
+    .nav-toggle:hover {
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        border-color: #4361ee;
+        color: #4361ee;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(67, 97, 238, 0.15);
     }
 
     .nav-toggle-icon {
-        font-size: 13px;
+        font-size: 12px;
     }
 }
 
@@ -640,17 +770,22 @@ select {
     }
 
     .timestamp-controls {
-        flex-direction: column;
+        flex-direction: row;
-        align-items: center;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        gap: 8px;
     }
 
     .timestamp-btn,
     .timestamp-controls .action-btn,
     .timestamp-controls .stop-btn {
-        width: 100%;
+        width: auto;
-        max-width: 200px;
+        flex: 1;
         min-width: auto;
+        max-width: none;
         height: 44px;
+        padding: 8px 12px;
+        font-size: 0.85rem;
     }
 
     .timestamp-status {
@@ -660,6 +795,25 @@ select {
     }
 }
 
+/* 400px以下屏幕适配 - 防止按钮文本换行 */
+@media (max-width: 400px) {
+    .timestamp-controls {
+        gap: 4px;
+    }
+
+    .timestamp-btn,
+    .timestamp-controls .action-btn,
+    .timestamp-controls .stop-btn {
+        padding: 6px 4px;
+        font-size: 0.75rem;
+        height: 38px;
+        min-width: auto;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
 /* 超小屏幕适配 */
 @media (max-width: 360px) {
     .timestamp-value {
@@ -671,6 +825,18 @@ select {
         align-items: center; /* 垂直居中 */
         justify-content: center; /* 横向居中 */
     }
+
+    .timestamp-controls {
+        gap: 3px;
+    }
+
+    .timestamp-btn,
+    .timestamp-controls .action-btn,
+    .timestamp-controls .stop-btn {
+        padding: 5px 3px;
+        font-size: 0.7rem;
+        height: 36px;
+    }
 }
 
 /* 日期时间转换器样式 */
@@ -773,7 +939,7 @@ select {
 .result-info {
     padding: 12px 16px;
     background: rgba(255, 255, 255, 0.9);
-    border-radius: 6px;
+    border-radius: 8px;
     border: 1px solid #e0e0e0;
     font-size: 0.95rem;
     text-align: center;

src/components/CopyButton.js

@@ -67,7 +67,7 @@ const CopyButton = ({
         transition: 'all 0.3s ease',
         padding: '8px 16px',
         border: 'none',
-        borderRadius: '4px',
+        borderRadius: '8px',
         cursor: 'pointer'
       }}
     >

src/pages/ElectronicWoodenFish.css

@@ -1,36 +1,79 @@
 /* CSS 变量定义 */
 :root {
-    --dzmy-bg-color: black;
+    --dzmy-bg-color: #0a0a0a;
+    --dzmy-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
     --dzmy-text-color: #ffffff;
-    --dzmy-accent-color: #fadb14;
+    --dzmy-accent-color: #ffd700;
+    --dzmy-accent-glow: 0 0 20px rgba(255, 215, 0, 0.3);
     --dzmy-container-height: 500px;
     --dzmy-img-width: 160px;
     --dzmy-img-height: 120px;
     --dzmy-animation-duration: 0.12s;
     --dzmy-float-duration: 0.5s;
+    --dzmy-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    --dzmy-border-radius: 8px;
+    --dzmy-controls-bg: rgba(255, 255, 255, 0.05);
+    --dzmy-controls-border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* 主容器 */
 .dzmy-bg {
-    background-color: var(--dzmy-bg-color);
+    background: var(--dzmy-bg-gradient);
-    width: 100%;
     min-height: var(--dzmy-container-height);
     display: flex;
     flex-direction: column;
-    justify-content: space-evenly;
+    justify-content: center;
+    align-items: center;
     position: relative;
-    border-radius: 8px;
+    border-radius: var(--dzmy-border-radius);
+    box-shadow: var(--dzmy-shadow);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    overflow: hidden;
+    padding: 20px;
+}
+
+/* 添加装饰性背景元素 */
+.dzmy-bg::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
+}
+
+.dzmy-bg::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
 }
 
 /* 计数显示 */
 .dzmy-count {
     position: absolute;
-    top: 10px;
+    top: 20px;
-    left: 10px;
+    left: 20px;
-    color: var(--dzmy-text-color);
+    color: var(--dzmy-accent-color);
-    font-size: 18px;
+    font-size: 20px;
-    font-weight: bold;
+    font-weight: 700;
     z-index: 10;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 8px 16px;
+    border-radius: var(--dzmy-border-radius);
+    border: 1px solid rgba(255, 215, 0, 0.2);
+    box-shadow: var(--dzmy-accent-glow);
+    backdrop-filter: blur(4px);
+    transition: all 0.3s ease;
+}
+
+.dzmy-count:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
 }
 
 /* 木鱼图像 */
@@ -40,17 +83,60 @@
     max-width: 100%;
     max-height: 100%;
     cursor: pointer;
-    transition: transform var(--dzmy-animation-duration) ease;
+    transition: all var(--dzmy-animation-duration) ease;
     transform: scale(1);
     will-change: transform;
     touch-action: manipulation;
     user-select: none;
     object-fit: contain;
+    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
+    position: relative;
+    z-index: 5;
+}
+
+.dzmy-img:hover {
+    filter: drop-shadow(0 6px 20px rgba(255, 215, 0, 0.3));
 }
 
 /* 木鱼点击激活状态 */
 .dzmy-img.active {
     transform: scale(0.92);
+    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.5));
+}
+
+/* 添加点击涟漪效果 */
+.dzmy-img::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: var(--dzmy-border-radius);
+    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+
+.dzmy-img.active::after {
+    width: 200px;
+    height: 200px;
+    opacity: 1;
+    animation: ripple 0.3s ease-out;
+}
+
+@keyframes ripple {
+    0% {
+        width: 0;
+        height: 0;
+        opacity: 0.5;
+    }
+    100% {
+        width: 200px;
+        height: 200px;
+        opacity: 0;
+    }
 }
 
 /* 木鱼和提示容器 */
@@ -77,45 +163,89 @@
     width: 100%;
     animation: floatUp var(--dzmy-float-duration) ease-out forwards;
     color: var(--dzmy-accent-color);
-    font-weight: bold;
+    font-weight: 800;
     will-change: transform, opacity;
     transform: translateZ(0);
-    font-size: 24px;
+    font-size: 28px;
-    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+    text-shadow:
+        0 0 10px rgba(255, 215, 0, 0.8),
+        0 0 20px rgba(255, 215, 0, 0.4),
+        0 0 30px rgba(255, 215, 0, 0.2);
+    letter-spacing: 1px;
+    pointer-events: none;
+    opacity: 0;
+    animation-delay: 0.1s;
 }
 
 /* 浮动动画 */
 @keyframes floatUp {
     0% {
-        transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0) scale(0.8);
+        opacity: 0;
+    }
+    20% {
+        transform: translate3d(0, -10px, 0) scale(1.1);
         opacity: 1;
     }
     100% {
-        transform: translate3d(0, -50px, 0);
+        transform: translate3d(0, -80px, 0) scale(0.9);
         opacity: 0;
     }
 }
 
 /* 控制区域 */
 .dzmy-controls {
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     display: flex;
-    gap: 10px;
+    gap: 16px;
     justify-content: center;
     align-items: center;
-    padding: 10px;
+    padding: 16px 24px;
-    background-color: rgba(0, 0, 0, 0.1);
+    background: var(--dzmy-controls-bg);
-    border-radius: 8px;
+    border-radius: var(--dzmy-border-radius);
-    margin-top: 10px;
+    margin-top: 20px;
+    border: var(--dzmy-controls-border);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+}
+
+.dzmy-controls:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 215, 0, 0.2);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
 }
 
 /* 控制区域内的输入框 */
 .dzmy-controls input {
     width: auto;
-    min-width: 120px;
+    min-width: 140px;
     margin-bottom: 0;
     flex: 1;
-    max-width: 200px;
+    max-width: 240px;
+    padding: 12px 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--dzmy-border-radius);
+    background: rgba(0, 0, 0, 0.3);
+    color: var(--dzmy-text-color);
+    font-size: 16px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    outline: none;
+}
+
+.dzmy-controls input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.dzmy-controls input:focus {
+    border-color: var(--dzmy-accent-color);
+    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
+    background: rgba(0, 0, 0, 0.4);
+}
+
+.dzmy-controls input:hover {
+    border-color: rgba(255, 215, 0, 0.3);
 }
 
 /* 控制区域内的按钮 */
@@ -123,27 +253,133 @@
     margin-right: 0;
     opacity: 1;
     flex-shrink: 0;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: var(--dzmy-border-radius);
+    background: linear-gradient(135deg, #f32152 0%, #ff0000 100%);
+    border: none;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    min-width: 100px;
+    box-shadow: 0 4px 12px rgba(243, 33, 82, 0.3);
 }
 
 .dzmy-controls .action-btn:hover {
-    opacity: 0.9;
+    opacity: 0.95;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(243, 33, 82, 0.4);
 }
 
 .dzmy-controls .action-btn:active {
-    opacity: 0.8;
+    opacity: 0.9;
-    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(243, 33, 82, 0.3);
+}
+
+.dzmy-controls .action-btn:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(243, 33, 82, 0.2);
 }
 
 /* 响应式设计 */
+
+/* 平板设备 */
 @media (max-width: 768px) {
     :root {
-        --dzmy-container-height: 300px;
+        --dzmy-container-height: 400px;
+        --dzmy-img-width: 140px;
+        --dzmy-img-height: 105px;
+        --dzmy-border-radius: var(--dzmy-border-radius);
+    }
+
+    .dzmy-count {
+        font-size: 16px;
+        top: 16px;
+        left: 16px;
+        padding: 6px 12px;
+    }
+
+    .tip-item {
+        font-size: 22px;
+    }
+
+    .dzmy-controls {
+        padding: 14px 20px;
+        gap: 12px;
+    }
+
+    .dzmy-controls input {
+        min-width: 120px;
+        max-width: 180px;
+        padding: 10px 14px;
+        font-size: 15px;
+    }
+
+    .dzmy-controls .action-btn {
+        padding: 10px 20px;
+        font-size: 15px;
+        min-width: 90px;
+    }
+}
+
+/* 大手机设备 */
+@media (max-width: 480px) {
+    :root {
+        --dzmy-container-height: 350px;
         --dzmy-img-width: 120px;
         --dzmy-img-height: 90px;
+        --dzmy-border-radius: 8px;
     }
 
     .dzmy-count {
         font-size: 14px;
+        top: 12px;
+        left: 12px;
+        padding: 5px 10px;
+    }
+
+    .tip-item {
+        font-size: 20px;
+    }
+
+    .dzmy-controls {
+        flex-direction: column;
+        align-items: stretch;
+        padding: 12px 16px;
+        gap: 10px;
+    }
+
+    .dzmy-controls input {
+        min-width: 100%;
+        max-width: 100%;
+        padding: 10px 12px;
+        font-size: 14px;
+    }
+
+    .dzmy-controls .action-btn {
+        width: 100%;
+        padding: 10px 16px;
+        font-size: 14px;
+        min-width: auto;
+    }
+}
+
+/* 小手机设备 */
+@media (max-width: 360px) {
+    :root {
+        --dzmy-container-height: 300px;
+        --dzmy-img-width: 100px;
+        --dzmy-img-height: 75px;
+        --dzmy-border-radius: 8px;
+    }
+
+    .dzmy-count {
+        font-size: 12px;
+        top: 10px;
+        left: 10px;
+        padding: 4px 8px;
     }
 
     .tip-item {
@@ -151,11 +387,58 @@
     }
 
     .dzmy-controls {
-        flex-wrap: wrap;
+        padding: 10px 12px;
+        gap: 8px;
     }
 
     .dzmy-controls input {
-        min-width: 100px;
+        padding: 8px 10px;
+        font-size: 13px;
+    }
+
+    .dzmy-controls .action-btn {
+        padding: 8px 12px;
+        font-size: 13px;
+    }
+}
+
+/* 超小手机设备 */
+@media (max-width: 320px) {
+    :root {
+        --dzmy-container-height: 280px;
+        --dzmy-img-width: 90px;
+        --dzmy-img-height: 68px;
+    }
+
+    .dzmy-count {
+        font-size: 11px;
+    }
+
+    .tip-item {
+        font-size: 16px;
+    }
+}
+
+/* 横屏模式优化 */
+@media (max-height: 500px) and (orientation: landscape) {
+    :root {
+        --dzmy-container-height: 250px;
+        --dzmy-img-width: 100px;
+        --dzmy-img-height: 75px;
+    }
+
+    .dzmy-controls {
+        flex-direction: row;
+        padding: 8px 12px;
+    }
+
+    .dzmy-controls input {
+        min-width: 120px;
         max-width: 150px;
     }
+
+    .dzmy-controls .action-btn {
+        min-width: 80px;
+        padding: 6px 12px;
+    }
 }