diff --git a/index.html b/index.html
index daf3a5b..5a8ce8a 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
     <title>Vite + Vue</title>
+  <meta name="apple-mobile-web-app-capable" content="yes">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/components/DashBoard.vue b/src/components/DashBoard.vue
index cc38d70..1cb07d1 100644
--- a/src/components/DashBoard.vue
+++ b/src/components/DashBoard.vue
@@ -33,7 +33,7 @@
     <el-button @click="isQuerying = true">里站搜索</el-button>
     <el-button @click="isAlterAuthCode = true">修改授权码</el-button>
     <el-button @click="deleteAuthCode">删除本地授权码</el-button>
-    <el-button @click="isConfigDarkMode = true">夜间模式配置</el-button><br>
+    <el-button @click="isConfig = true">配置</el-button><br>
     <span style="display: inline">夜间模式</span>
     <el-switch @click="toggleStyle" v-model="isDark">夜间模式</el-switch>
     <hr>
@@ -135,17 +135,25 @@
     </el-footer>
   </el-dialog>
 
-  <el-dialog title="配置夜间模式" v-model="isConfigDarkMode" width="100%">
-    <span style="display: inline-block">夜间模式跟随系统</span>
-    <el-switch v-model="darkConfig.followSystem"></el-switch><br>
-    <span style="display: inline-block">自定义起始时间(精确到分)</span>
-    <el-switch v-model="darkConfig.customTime"></el-switch><br>
-    <el-form :disabled="!darkConfig.customTime">
-      <el-time-picker v-model="darkConfig.startTime" /> ~
-      <el-time-picker v-model="darkConfig.endTime"/>
-    </el-form>
+  <el-dialog title="配置" v-model="isConfig" width="100%">
+    <div>
+      夜间模式<hr>
+      <span style="display: inline-block">夜间模式跟随系统</span>
+      <el-switch v-model="darkConfig.followSystem"></el-switch><br>
+      <span style="display: inline-block">自定义起始时间(精确到分)</span>
+      <el-switch v-model="darkConfig.customTime"></el-switch><br>
+      <el-form :disabled="!darkConfig.customTime">
+        <el-time-picker v-model="darkConfig.startTime" /> ~
+        <el-time-picker v-model="darkConfig.endTime"/>
+      </el-form>
+    </div>
+    <div>
+      在线预览<hr>
+      <span style="display: inline-block">在线预览分页页数:</span>
+      <input v-model="lengthPerPage">
+    </div>
     <template #footer>
-      <el-button type="primary" @click="saveDarkConfig">保存</el-button>
+      <el-button type="primary" @click="saveConfig">保存</el-button>
     </template>
   </el-dialog>
 
@@ -200,12 +208,13 @@ let tempAuthCode = ref("")
 
 let isQuerying = ref(false)
 let isViewingTag = ref(false)
-let isConfigDarkMode = ref(false)
+let isConfig = ref(false)
 let isDark = ref(false)
 let keyword = ref("furry yaoi")
 let galleries = ref([])
 let queryPage = ref({})
 let darkConfig = ref({})
+let lengthPerPage = ref(0)
 
 //查询相关
 let type = ref("link")
@@ -496,6 +505,10 @@ function showThumbnail(gallery){
 onMounted(() => {
   const auth = localStorage.getItem("auth")
   adjustForStyle()
+  store.state.lengthPerPage = localStorage.getItem("lengthPerPage")
+  store.state.lengthPerPage = store.state.lengthPerPage === null ? 30: Number(store.state.lengthPerPage)
+  lengthPerPage.value = store.state.lengthPerPage
+
   if(auth !== null){
     store.dispatch("validate", auth)
   }
@@ -576,7 +589,7 @@ function light(){
   document.querySelector(".DashBoard").style.setProperty("background-color", "ghostwhite")
   document.querySelector(".app").style.setProperty("background-color", "#c6e2ff")
 }
-function saveDarkConfig(){
+function saveConfig(){
   if(darkConfig.value.customTime) {
     if(darkConfig.value.startTime === undefined || darkConfig.value.endTime === undefined){
       ElMessage("请正确选择起始时间")
@@ -584,8 +597,10 @@ function saveDarkConfig(){
     }
   }
 
+  store.state.lengthPerPage = Number(lengthPerPage.value)
+  localStorage.setItem("lengthPerPage", lengthPerPage.value)
   localStorage.setItem("darkConfig", JSON.stringify(darkConfig.value))
-  isConfigDarkMode.value = false
+  isConfig.value = false
   adjustForStyle()
 }
 </script>
diff --git a/src/components/OnlineReader.vue b/src/components/OnlineReader.vue
new file mode 100644
index 0000000..4ee543c
--- /dev/null
+++ b/src/components/OnlineReader.vue
@@ -0,0 +1,79 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import store from "../store/index.js";
+let props = defineProps(['currentLinks', 'isOnlineReading'])
+let isShowUp = ref()
+let onlineReadingScrollbar = ref()
+let links = ref()
+let index = ref(0)
+let temp_index = ref(0)   //用于跳转
+let max = ref(0)
+let lengthPerPage = computed(() => {
+  return store.state.lengthPerPage
+})
+
+watch(props, (props)=>{
+  isShowUp.value = props.isOnlineReading
+  alterPage()
+})
+
+//切换本子
+function alterPage(){
+  console.log(lengthPerPage.value)
+  if(props.currentLinks.length > lengthPerPage.value){
+    links.value = props.currentLinks.slice(0, lengthPerPage.value)
+    max.value = Math.ceil(props.currentLinks.length / lengthPerPage.value)
+  }else{
+    links.value = props.currentLinks
+  }
+  index.value = 0
+  temp_index.value = 1
+}
+
+//跳转到对应页数
+function jump(targetIndex){
+  links.value = props.currentLinks.slice(targetIndex * lengthPerPage.value, (targetIndex + 1) * lengthPerPage.value)
+  index.value = targetIndex
+  temp_index.value = targetIndex + 1
+}
+
+function closeDialog(){
+  onlineReadingScrollbar.value.setScrollTop(0)
+}
+
+</script>
+
+<template>
+  <el-dialog v-model="isShowUp" title="在线预览" @close="closeDialog" width="100%" top="0">
+    <div style="font-size: 20px; text-align: center;"  v-if="max > 0">
+      {{index + 1}} - {{(index) * lengthPerPage + 1}} ~ {{(index + 1) * lengthPerPage + 1 > currentLinks.length? currentLinks.length: (index + 1) * lengthPerPage + 1}}
+    </div>
+    <el-scrollbar height="75vh" ref="onlineReadingScrollbar">
+      <el-image v-for="(link, i) in links" :src="link" :style="{'width': 'auto', 'text-align': 'center', 'background-color': 'ghostwhite'}"
+                :preview-src-list="currentLinks" :initial-index="index * lengthPerPage + i" loading="lazy"/>
+    </el-scrollbar>
+
+    <!--五页以下-->
+    <div v-if="max > 1 && max < 4">
+      <el-button @click="jump(index - 1)" :disabled="index === 0" size="small">上一页</el-button>
+      <el-button v-for="i in max" @click="jump(i - 1)" size="small">
+      {{i}}
+      </el-button>
+      <el-button @click="jump(index + 1)" :disabled="index === max - 1" size="small">下一页</el-button>
+    </div>
+
+    <!--五页及以上-->
+    <div v-if="max >= 4" style="text-align: center">
+      <el-button @click="jump(index - 1)" :disabled="index === 0" size="small">上一页</el-button>
+      1 &lt;
+      <el-input-number v-model="temp_index" :min="1" :max="max"/>
+      &lt; {{max}}
+      <el-button @click="jump(index + 1)" :disabled="index === max - 1" size="small">下一页</el-button>
+      <el-button @click="jump(temp_index - 1)" size="large">跳转</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Side.vue b/src/components/Side.vue
index fd43c4b..fa12dfd 100644
--- a/src/components/Side.vue
+++ b/src/components/Side.vue
@@ -104,12 +104,7 @@
     </el-form>
   </el-dialog>
 
-  <el-dialog v-model="isOnlineReading" title="在线预览" @close="closeOnlineReading" width="100%" top="0">
-    <el-scrollbar height="80vh" ref="onlineReadingScrollbar">
-      <el-image v-for="(link, index) in currentLinks" :src="link" :style="{'width': 'auto', 'text-align': 'center', 'background-color': 'ghostwhite'}"
-                :preview-src-list="currentLinks" :initial-index="index" loading="lazy"/>
-    </el-scrollbar>
-  </el-dialog>
+  <OnlineReader :currentLinks="currentLinks" :isOnlineReading="isOnlineReading"/>
 </template>
 
 <script setup>
@@ -117,6 +112,7 @@ import store from "../store";
 import {computed, ref} from "vue";
 import axios from "axios";
 import {ElMessage} from "element-plus";
+import OnlineReader from "./OnlineReader.vue";
 
 //输入
 let inputNode = ref(null)
@@ -301,10 +297,6 @@ function deleteGallery(gid){
 function onlineGalleryReader(gid){
   store.dispatch("queryOnlineLinks", gid)
 }
-function closeOnlineReading(){
-  store.state.isOnlineReading = false
-  onlineReadingScrollbar.value.setScrollTop(0)
-}
 function shareGallery(data){
   const {gid, shortName} = data
   let link
diff --git a/src/store/index.js b/src/store/index.js
index 7987fab..60828ba 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -617,6 +617,7 @@ const state = {
     isOnlineReading: false,                  //是否在线看
     currentGid: "",                          //当前GID
     currentLinks: [],                        //当前本子链接
+    lengthPerPage: 0,                        //在线预览每页图片数量
 
     page: 1,                                 //当前页数
     length: 5,                               //每页能有多少个链接
