From 51d2364e38568750933c1c93a11f586847fc77d5 Mon Sep 17 00:00:00 2001
From: yuanshan <42023847+piercezzs@users.noreply.github.com>
Date: Sat, 11 Oct 2025 09:20:54 +0800
Subject: [PATCH] fix press-releases 768

---
 src/views/press-releases/size768/index.vue | 801 ++++++++++++++++-----
 1 file changed, 640 insertions(+), 161 deletions(-)

diff --git a/src/views/press-releases/size768/index.vue b/src/views/press-releases/size768/index.vue
index 9ed9ee1..048591e 100644
--- a/src/views/press-releases/size768/index.vue
+++ b/src/views/press-releases/size768/index.vue
@@ -1,79 +1,206 @@
 <template>
   <div class="press-releases-page">
-    <n-infinite-scroll :distance="0" @load="doLoadMore">
-      <main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px)">
-        <div class="title mb-[20px]">
+    <main class="mx-auto">
+      <div class="title-section">
+        <div class="title-decoration"></div>
+        <div class="title">
           {{ t("press_releases.title") }}
         </div>
-        <div class="search-container">
-          <n-select
-            :options="state.selectOptions"
-            v-model:value="state.selectedValue"
-            class="search-select"
-          />
-          <n-input
-            v-model:value="state.inputValue"
-            type="text"
-            :placeholder="t('press_releases.search.placeholder')"
-            class="search-input"
-          />
-          <n-button @click="handleSearch" class="search-button w-[120px]">
-            {{ t("press_releases.search.button") }}
-          </n-button>
-        </div>
-        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
-          <div class="news-item mt-[10px]">
-            <div class="news-item-date">{{ item.date }}</div>
-            <div
-              class="news-item-title text-[#0078d7] cursor-pointer"
-              style="
-                word-break: break-word;
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              "
-              @click="handleNewClick(item)"
-            >
-              {{ item.title }}
-            </div>
-            <n-tooltip
-              trigger="click"
-              :disabled="!item.showTooltip"
-              width="trigger"
-            >
-              <template #trigger>
+      </div>
+      <div class="search-container">
+        <n-select
+          :options="state.selectOptions"
+          v-model:value="state.selectedValue"
+          class="search-select"
+        />
+        <input
+          v-model="state.inputValue"
+          type="text"
+          :placeholder="t('press_releases.search.placeholder')"
+          class="search-input"
+        />
+        <button @click="handleSearch" class="search-button">
+          {{ t("press_releases.search.button") }}
+        </button>
+      </div>
+      <div class="reports-list">
+        <div
+          v-for="(item, idx) in state.filterNewsData"
+          :key="idx"
+          class="news-item table-row"
+        >
+          <div class="content">
+            <div class="file-content">
+              <div class="file-info">
+                <div class="vertical-line"></div>
                 <div
-                  :ref="(el) => setTitleRef(el, idx)"
-                  class="news-item-content"
+                  class="news-item-title text-[#000] cursor-pointer"
                   style="
-                    word-break: break-word;
+                    word-break: break-all;
                     display: -webkit-box;
-                    -webkit-line-clamp: 2;
+                    -webkit-line-clamp: 1;
+                    line-clamp: 1;
                     -webkit-box-orient: vertical;
                     overflow: hidden;
                     text-overflow: ellipsis;
                   "
+                  @click="handleNewClick(item)"
                 >
+                  {{ item.title }}
+                </div>
+                <svg
+                  class="arrow-icon"
+                  width="7"
+                  height="14"
+                  viewBox="0 0 7 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  @click="handleNewClick(item)"
+                >
+                  <path
+                    d="M1 1L6 7L1 13"
+                    stroke="#FF7BAC"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+              <n-tooltip trigger="hover" :disabled="true" width="trigger">
+                <template #trigger>
+                  <div
+                    :ref="(el) => setTitleRef(el, idx)"
+                    class="news-item-content file-description"
+                    style="
+                      word-break: break-all;
+                      display: -webkit-box;
+                      -webkit-line-clamp: 2;
+                      line-clamp: 2;
+                      -webkit-box-orient: vertical;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    "
+                  >
+                    {{ item.summary }}
+                  </div>
+                </template>
+                <div slot="content">
                   {{ item.summary }}
                 </div>
-              </template>
-              <div slot="content">
-                {{ item.summary }}
+              </n-tooltip>
+              <div class="download-section">
+                <div class="news-item-date">{{ item.date }}</div>
               </div>
-            </n-tooltip>
+            </div>
+          </div>
+          <div class="separator-line"></div>
+        </div>
+      </div>
+
+      <!-- 分页器 -->
+      <div class="pagination-container" v-if="state.total > 0">
+        <div class="pagination-controls">
+          <div class="pagination-buttons">
+            <button
+              class="page-btn prev-btn"
+              :disabled="state.currentPage === 1"
+              @click="goToPrevPage"
+            >
+              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+                <path
+                  d="M4 1L1 4.5L4 8"
+                  stroke="#455363"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+
+            <template v-for="page in getVisiblePages()" :key="page">
+              <button
+                v-if="page !== '...'"
+                class="page-btn"
+                :class="{ active: page === state.currentPage }"
+                @click="goToPage(page)"
+              >
+                {{ page }}
+              </button>
+              <button v-else class="page-btn disabled" disabled>...</button>
+            </template>
+
+            <button
+              class="page-btn next-btn"
+              :disabled="state.currentPage === totalPages"
+              @click="goToNextPage"
+            >
+              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
+                <path
+                  d="M1 1L4 5L1 8"
+                  stroke="#455363"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+          <div class="page-size-selector" @click="togglePageSizeMenu">
+            <span>{{ state.pageSize }}/page</span>
+            <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+              <path
+                d="M1 1L5 4L9 1"
+                stroke="#455363"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <div v-if="showPageSizeMenu" class="page-size-menu">
+              <div
+                v-for="size in [10, 20, 50]"
+                :key="size"
+                class="page-size-option"
+                :class="{ active: state.pageSize === size }"
+                @click="changePageSize(size)"
+              >
+                {{ size }}/page
+              </div>
+            </div>
+          </div>
+          <div class="goto-section">
+            <span>Goto</span>
+            <input
+              type="number"
+              v-model="state.gotoPage"
+              class="goto-input"
+              :min="1"
+              :max="totalPages"
+              @keyup.enter="handleGoto"
+            />
           </div>
         </div>
-      </main>
-    </n-infinite-scroll>
+      </div>
+      <div class="pagination-info" v-if="state.total > 0">
+        Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+        {{ state.total }} results
+      </div>
+    </main>
   </div>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
-import { reactive, onMounted, watch, nextTick, ref } from "vue";
-import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
+import {
+  reactive,
+  onMounted,
+  watch,
+  nextTick,
+  ref,
+  computed,
+  onUnmounted,
+} from "vue";
+import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
@@ -94,32 +221,16 @@ const state = reactive({
     }),
   ], //下拉选项
   inputValue: "", //输入值
-  newsData: [
-    {
-      date: "June 3, 2025",
-      title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
-      content:
-        "Hong Kong, 3 June 2025 — FiEE, Inc. (NASDAQ:FIEE) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, is pleased to announce significant business updates....",
-    },
-    {
-      date: "June 2, 2025",
-      title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
-      content:
-        "Hong Kong, 2 June 2025 — FiEE, Inc. (NASDAQ:FIEE) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, commenced...",
-    },
-    {
-      date: "May 30, 2025",
-      title: "FiEE, Inc. Announces Reinitiation of Trading on Nasdaq",
-      content:
-        "Hong Kong, May 30, 2025 — FiEE, Inc. (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...",
-    },
-  ],
   filterNewsData: [],
   loading: false, //是否正在加载数据
-  hasMore: true, //是否还有更多数据
   currentPage: 1, //当前页码
+  pageSize: 10,
+  total: 0,
+  gotoPage: 1,
 });
 
+const showPageSizeMenu = ref(false);
+
 const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
@@ -139,14 +250,18 @@ const checkAllTitleOverflow = () => {
 };
 
 onMounted(() => {
-  // state.filterNewsData = state.newsData;
   getPressReleasesDisplay();
+  document.addEventListener("click", handleClickOutside);
 
   nextTick(() => {
     checkAllTitleOverflow();
   });
 });
 
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+});
+
 watch(
   () => state.filterNewsData,
   () => {
@@ -159,93 +274,68 @@ watch(
 
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
+  state.loading = true;
   let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     query: state.inputValue,
     page: state.currentPage,
-    pageSize: 10,
+    pageSize: state.pageSize,
     timeStart: state.selectedValue
       ? state.selectedValue === "all_years"
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
   };
-  // console.log(params)
-  axios.post(url, params).then((res) => {
-    // console.log(res)
-    if (res.status === 200) {
-      if (res.data.status === 0) {
-        res.data.data?.data?.forEach((item) => {
-          item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-            year: "numeric",
+  axios
+    .post(url, params)
+    .then((res) => {
+      if (res.status === 200) {
+        if (res.data.status === 0) {
+          res.data.data?.data?.forEach((item) => {
+            item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+            });
           });
-        });
-        if (state.currentPage === 1) {
           state.filterNewsData = res.data.data?.data || [];
-        } else {
-          state.filterNewsData = [
-            ...state.filterNewsData,
-            ...(res.data.data?.data || []),
-          ];
-        }
-        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
-          state.hasMore = true;
-        } else {
-          state.hasMore = false;
+          state.total = res.data.data?.total || 0;
         }
       }
-    }
-  });
-};
-
-const handleFilter = () => {
-  // 筛选逻辑
-  let filteredData = [...state.newsData];
-
-  // 按年份筛选
-  if (state.selectedValue !== "all_years") {
-    filteredData = filteredData.filter((item) => {
-      // 从日期字符串中提取年份，假设日期格式为 "May 30, 2025"
-      const dateMatch = item.date.match(/\b\d{4}\b/);
-      if (dateMatch) {
-        const year = dateMatch[0];
-        return year === state.selectedValue;
-      }
-      return false;
+    })
+    .finally(() => {
+      state.loading = false;
     });
-  }
-
-  // 按输入内容进行模糊查询（title 和 content）
-  if (state.inputValue && state.inputValue.trim() !== "") {
-    const searchText = state.inputValue.toLowerCase().trim();
-    filteredData = filteredData.filter((item) => {
-      const titleMatch = item.title.toLowerCase().includes(searchText);
-      const contentMatch = item.content.toLowerCase().includes(searchText);
-      return titleMatch || contentMatch;
-    });
-  }
-
-  state.filterNewsData = filteredData;
 };
 
 // 添加 watcher 来实现自动筛选
 watch(
   () => [state.selectedValue, state.inputValue],
   () => {
-    // handleFilter();
     state.currentPage = 1;
     getPressReleasesDisplay();
   }
 );
 
+watch(
+  () => state.pageSize,
+  () => {
+    state.currentPage = 1;
+    getPressReleasesDisplay();
+  }
+);
+
+watch(
+  () => state.currentPage,
+  (newPage) => {
+    state.gotoPage = newPage;
+    getPressReleasesDisplay();
+  }
+);
+
 const handleSearch = () => {
-  // 手动触发筛选（保留这个函数以保持兼容性）
-  // handleFilter();
   state.currentPage = 1;
   getPressReleasesDisplay();
-  // console.log("筛选结果:", state.filterNewsData);
 };
 
 const handleNewClick = (item) => {
@@ -257,72 +347,461 @@ const handleNewClick = (item) => {
   });
 };
 
-//加载更多数据
-const doLoadMore = () => {
-  if (!state.hasMore || state.loading) {
-    return;
+const totalPages = computed(() => {
+  return Math.ceil(state.total / state.pageSize) || 1;
+});
+
+const displayRange = computed(() => {
+  if (state.total === 0) return { start: 0, end: 0 };
+  const start = (state.currentPage - 1) * state.pageSize + 1;
+  const end = Math.min(state.currentPage * state.pageSize, state.total);
+  return { start, end };
+});
+
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const goToPrevPage = () => {
+  if (state.currentPage > 1) {
+    state.currentPage--;
+  }
+};
+
+const goToNextPage = () => {
+  if (state.currentPage < totalPages.value) {
+    state.currentPage++;
+  }
+};
+
+const changePageSize = (size) => {
+  state.pageSize = size;
+};
+
+const handleGoto = () => {
+  const page = parseInt(state.gotoPage);
+  if (page >= 1 && page <= totalPages.value) {
+    state.currentPage = page;
+  }
+};
+
+const togglePageSizeMenu = () => {
+  showPageSizeMenu.value = !showPageSizeMenu.value;
+};
+
+const getVisiblePages = () => {
+  const current = state.currentPage;
+  const total = totalPages.value;
+  const pages = [];
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    pages.push(1);
+
+    if (current <= 4) {
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    } else if (current >= total - 3) {
+      pages.push("...");
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push("...");
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("...");
+      pages.push(total);
+    }
+  }
+
+  return pages;
+};
+
+// 点击外部关闭页面大小选择菜单
+const handleClickOutside = (event) => {
+  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
+    showPageSizeMenu.value = false;
   }
-  // console.log('触底了')
-  state.loading = true;
-  state.currentPage++;
-  getPressReleasesDisplay().finally(() => {
-    state.loading = false;
-  });
 };
 </script>
 
 <style scoped lang="scss">
+.press-releases-page {
+  width: 650 * 2.5px;
+  margin: 0 auto;
+}
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 2.5px;
+  padding: 0 16 * 2.5px;
+}
+.title-decoration {
+  width: 58 * 2.5px;
+  height: 7 * 2.5px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43 * 2.5px;
+}
 .title {
-  font-size: 63px;
-  color: #333;
+  font-size: 32 * 2.5px;
+  color: #000;
 }
 
 .search-container {
-  margin-bottom: 20px;
+  margin-bottom: 20 * 2.5px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  gap: 25px;
+  gap: 16 * 2.5px;
+  padding: 0 16 * 2.5px;
 }
 
 .search-select {
-  width: 360px;
-  :deep(.n-base-selection) {
-    padding: 4px 0;
-  }
+  width: 134 * 2.5px;
+  height: 34 * 2.5px;
 }
 
 .search-input {
-  width: 360px;
+  width: 292 * 2.5px;
+  height: 34 * 2.5px;
+  padding: 7 * 2.5px 12 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.48 * 2.5px;
+  color: #455363;
+
+  &::placeholder {
+    color: #b6b6b6;
+  }
 }
 
 :deep(.n-input) {
   .n-input__input {
-    padding: 4px 0;
-    // border: 1px solid #ccc;
-    border-radius: 4px;
+    padding: 4 * 2.5px 0;
+    // border: 1*2.5px solid #ccc;
+    border-radius: 4 * 2.5px;
   }
 }
 
 :deep(.n-select) {
   .n-select__input {
-    padding: 8px 12px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    padding: 8 * 2.5px 12 * 2.5px;
+    border: 1 * 2.5px solid #ccc;
+    border-radius: 4 * 2.5px;
   }
 }
 
 :deep(.n-button) {
-  padding: 20px 16px;
-  border-radius: 4px;
+  padding: 20 * 2.5px 16 * 2.5px;
+  border-radius: 4 * 2.5px;
 }
 .search-button {
+  height: 34 * 2.5px;
+  padding: 7 * 2.5px 12 * 2.5px;
+  min-width: 160 * 2.5px;
   background: #ff7bac;
   color: #fff;
+  border: none;
+  border-radius: 3 * 2.5px;
+  cursor: pointer;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.48 * 2.5px;
   &:hover {
     background: #ff7bac;
     color: #fff;
   }
 }
+
+.reports-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4 * 2.5px;
+  background: #fff;
+  width: 650 * 2.5px;
+}
+
+.table-row {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 8 * 2.5px;
+
+  // &:last-child {
+  //   .separator-line {
+  //     display: none;
+  //   }
+  // }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 2.5px;
+}
+
+.table-row .content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0;
+  &:hover {
+    background: #fff8fb;
+  }
+}
+
+.file-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-right: 16 * 2.5px;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16 * 2.5px;
+  flex: 1;
+}
+
+.news-item-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.48 * 2.5px;
+  color: #000000;
+}
+
+.arrow-icon {
+  margin-left: auto;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.vertical-line {
+  width: 1 * 2.5px;
+  height: 20 * 2.5px;
+  background: #ff7bac;
+  flex-shrink: 0;
+}
+
+.file-description {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.48 * 2.5px;
+  color: #455363;
+  margin: 0;
+  padding-left: 17 * 2.5px;
+  margin-top: 8 * 2.5px;
+}
+
+.news-item-date {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.48 * 2.5px;
+  color: #455363;
+}
+
+.download-section {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 4 * 2.5px 16 * 2.5px;
+}
+
+.separator-line {
+  width: 100%;
+  height: 1 * 2.5px;
+  background: repeating-linear-gradient(
+    to right,
+    #e6eaee 0 * 2.5px,
+    #e6eaee 2 * 2.5px,
+    transparent 2 * 2.5px,
+    transparent 4 * 2.5px
+  );
+  margin-top: 16 * 2.5px;
+}
+
+// 分页器样式
+.pagination-container {
+  display: flex;
+  align-items: center;
+  margin: 20 * 2.5px 0;
+  justify-content: flex-end;
+  padding: 0 16 * 2.5px;
+}
+
+.pagination-info {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.4375em;
+  color: #455363;
+  text-align: right;
+  margin-bottom: 30 * 2.5px;
+  padding: 0 16 * 2.5px;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 8 * 2.5px;
+}
+
+.pagination-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8 * 2.5px;
+}
+.page-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28 * 2.5px;
+  height: 28 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    border-color: #ff7bac;
+    color: #ff7bac;
+  }
+
+  &.active {
+    border-color: #ff7bac;
+    color: #ff7bac;
+    background: #fff0f5;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.page-size-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 18 * 2.5px;
+  padding: 4 * 2.5px 12 * 2.5px;
+  height: 28 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  background: #ffffff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+
+.page-size-menu {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  box-shadow: 0 2 * 2.5px 8 * 2.5px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  margin-bottom: 2 * 2.5px;
+}
+
+.page-size-option {
+  padding: 8 * 2.5px 12 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: #fff0f5;
+  }
+
+  &.active {
+    background: #fff0f5;
+    color: #ff7bac;
+  }
+}
+
+.goto-section {
+  display: flex;
+  align-items: center;
+  gap: 8 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+}
+
+.goto-input {
+  width: 60 * 2.5px;
+  height: 28 * 2.5px;
+  padding: 4 * 2.5px 12 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.428em;
+  color: #455363;
+  text-align: center;
+
+  &:focus {
+    outline: none;
+    border-color: #ff7bac;
+  }
+}
 </style>