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,16 +26,7 @@
     
     <div v-else class="book-container">
 
-      <!-- 点读按钮 -->
-      <button 
-        class="point-read-btn"
-        :class="{ active: isPointReadMode }"
-        @click="togglePointReadMode"
-        title="点读模式"
-      >
-        {{ isPointReadMode ? '退出点读' : '点读' }}
-      </button>
-      
+      <div class="mode-actions">
         <!-- AI翻译按钮 -->
         <button 
           class="translate-btn"
@@ -46,6 +37,17 @@
           {{ 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 }">
         <!-- 多页显示 -->