1111

Web/src/components/Base/Pagination.vue

@@ -1,31 +1,26 @@
 <template>
-  <div class="pagination">
+  <div class="pagination" v-if="totalPages > 1">
     <!-- 第一行：导航按钮 -->
     <div class="pagination-nav">
       <span v-if="currentPage > 1" @click="changePage('first')">首页</span>
+      <span v-if="currentPage > 1">&nbsp;.&nbsp;</span>
       <span v-if="currentPage > 1" @click="changePage('prev')">上一页</span>
+      <span v-if="currentPage > 1 && currentPage < totalPages">&nbsp;.&nbsp;</span>
       <span v-if="currentPage < totalPages" @click="changePage('next')">下一页</span>
-      <span v-if="currentPage < totalPages" @click="changePage('last')">尾页</span>      
+      <span v-if="currentPage < totalPages">&nbsp;.&nbsp;</span>
+      <span v-if="currentPage < totalPages" @click="changePage('last')">尾页</span>
     </div>
     <!-- 第二行：页码信息与跳转 -->
-    <div class="pagination-info">
+    <div class="pagination-info" style="margin-top: 0px;">
       <span>第{{ currentPage }}/{{ totalPages }}页</span>
-      <input 
-        v-model.number="goPage" 
-        type="number" 
-        min="1" 
-        :max="totalPages" 
-        class="page-input"
-        @keyup.enter="changePage('input')" 
-      />
-      <button @click="changePage('input')">跳转</button>
+      <input v-model.number="goPage" type="number" min="1" :max="totalPages" class="page-input"
+        @keyup.enter="changePage('input')" />
+      <button @click="changePage('input')" style="padding: 0px 10px;  font-size: 15px; ">跳转</button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
 // 定义Props
 interface Props {
   currentPage: number;  // 当前页
@@ -75,7 +70,7 @@ const scrollToTop = () => {
 // 分页切换方法
 const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
   const pages = totalPages.value
-  
+
   if (type === 'input') {
     // 输入跳转：边界校验
     let page = goPage.value
@@ -103,7 +98,7 @@ const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
   goPage.value = currentPage.value
   // 向父组件抛出最新页码
   emit('pageChange', currentPage.value)
-    scrollToTop();
+  scrollToTop();
 }
 </script>
 
@@ -114,10 +109,7 @@ const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
   margin: 16px 0;
 }
 
-.pagination-nav {
-  display: flex;
-  gap: 12px;
-}
+.pagination-nav {}
 
 .pagination-nav span {
   display: inline-block;
@@ -128,7 +120,8 @@ const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
 .pagination-nav span.disabled {
   color: #999;
   cursor: not-allowed;
-  pointer-events: none; /* 禁用点击 */
+  pointer-events: none;
+  /* 禁用点击 */
 }
 
 .pagination-info {
@@ -140,7 +133,8 @@ const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
 
 .page-input {
   width: 46px;
-  padding: 4px 6px;
+  font-size: 14px;
+  padding: 0px 6px;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 4px;