移动端页面重绘

jialh

2024-12-11 cb5ecb1d5e80fe0b510e5dc229c02bd25a89153b

 components/Pagination.vue

@@ -1,7 +1,10 @@
<template>
    <div class="pagination">
      <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <!-- <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span> -->
     <view class="page">
      <span> {{ currentPage }}  </span> / {{ totalPages }}
     </view>
      <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
    </div>
  </template>
@@ -46,22 +49,29 @@
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-around;
    margin: 20px 0;
  }
  
  .pagination button {
    padding: 5px 10px;
   appearance: none; /* 移除浏览器默认样式 */
    padding: 0 15px;
    margin: 0 5px;
    cursor: pointer;
   background: #3D9AFF;
   color: #FFFFFF;
  }
  
  .pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  .pagination button[disabled]{
   cursor: not-allowed; /* 禁用鼠标样式 */
    background: white !important; /* 强制覆盖背景颜色 */
    color: #666666 !important; /* 强制覆盖文字颜色 */
  }
  
  .pagination span {
  .pagination .page {
    margin: 0 10px;
  }
  .pagination .page span {
   color: #3D9AFF;
  }
  </style>