feat

play/index.css

@@ -206,12 +206,26 @@ body {
   z-index: 200;
 }
 
-/* 点读按钮样式 */
-.point-read-btn {
+/* AI翻译 / 点读：右下角 */
+.mode-actions {
   position: absolute;
-  top: 20px;
   right: 20px;
+  bottom: 20px;
   z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+@media (max-width: 480px) {
+  .mode-actions {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
+
+/* 点读按钮样式 */
+.point-read-btn {
   padding: 10px 20px;
   border: none;
   border-radius: 25px;
@@ -240,10 +254,6 @@ body {
 
 /* AI翻译按钮样式 */
 .translate-btn {
-  position: absolute;
-  top: 20px;
-  right: 120px;
-  z-index: 100;
   padding: 10px 20px;
   border: none;
   border-radius: 25px;

play/index.html

@@ -26,25 +26,27 @@
     
     <div v-else class="book-container">
 
-      <!-- 点读按钮 -->
-      <button 
-        class="point-read-btn"
-        :class="{ active: isPointReadMode }"
-        @click="togglePointReadMode"
-        title="点读模式"
-      >
-        {{ isPointReadMode ? '退出点读' : '点读' }}
-      </button>
-      
-      <!-- AI翻译按钮 -->
-      <button 
-        class="translate-btn"
-        :class="{ active: isTranslateMode }"
-        @click="toggleTranslateMode"
-        title="AI翻译模式"
-      >
-        {{ isTranslateMode ? '退出翻译' : 'AI翻译' }}
-      </button>
+      <div class="mode-actions">
+        <!-- AI翻译按钮 -->
+        <button 
+          class="translate-btn"
+          :class="{ active: isTranslateMode }"
+          @click="toggleTranslateMode"
+          title="AI翻译模式"
+        >
+          {{ isTranslateMode ? '退出翻译' : 'AI翻译' }}
+        </button>
+
+        <!-- 点读按钮 -->
+        <button 
+          class="point-read-btn"
+          :class="{ active: isPointReadMode }"
+          @click="togglePointReadMode"
+          title="点读模式"
+        >
+          {{ isPointReadMode ? '退出点读' : '点读' }}
+        </button>
+      </div>
       
       <!-- 图片容器 -->
       <div class="image-container" :class="{ 'multi-page-container': currentPages.length > 1 }">