From 7187503fcf6c0489af8b0da2c6326b4c28252671 Mon Sep 17 00:00:00 2001
From: yuanshan <42023847+piercezzs@users.noreply.github.com>
Date: Tue, 30 Sep 2025 14:53:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../annualreports/size1920/index.vue          | 600 ++----------------
 1 file changed, 38 insertions(+), 562 deletions(-)

diff --git a/src/views/financialinformation/annualreports/size1920/index.vue b/src/views/financialinformation/annualreports/size1920/index.vue
index 692d0ef..2144535 100644
--- a/src/views/financialinformation/annualreports/size1920/index.vue
+++ b/src/views/financialinformation/annualreports/size1920/index.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="page-container">
     <div class="financials-container">
-      <!-- 标题区域 -->
-      <div class="title-section">
-        <div class="title-decoration"></div>
-        <div class="financials-title">
-          {{ t("financialinformation.secfilings.title") }}
-        </div>
+      <!-- 标题 -->
+      <div class="financials-title">
+        {{ t("financialinformation.secfilings.title") }}
       </div>
 
       <!-- 公司财务概览 -->
@@ -37,7 +34,7 @@
             <div class="column date">
               {{ t("financialinformation.secfilings.annual_reports.date") }}
             </div>
-            <div class="column download">view</div>
+            <div class="column download"></div>
           </div>
 
           <!-- 报告列表 -->
@@ -50,158 +47,31 @@
               <div class="column file-name">{{ report.fileName }}</div>
               <div class="column date">{{ report.date }}</div>
               <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">
-                  <img src="/src/assets/image/icon-link-svg.svg" alt="View" />
-                </a>
+                <a :href="report.downloadUrl" class="download-link">{{
+                  t("financialinformation.secfilings.annual_reports.view")
+                }}</a>
               </div>
             </div>
           </div>
         </div>
       </section>
-
-      <!-- 分页器 -->
-      <div class="pagination-container">
-        <div class="pagination-info">
-          Displaying {{ displayRange.start }} - {{ displayRange.end }} of
-          {{ state.total }} results
-        </div>
-        <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 4.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>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
-
-// 分页状态
-const state = reactive({
-  currentPage: 1,
-  pageSize: 10,
-  total: 0,
-  gotoPage: 1,
-});
-
-// 页面大小选择菜单显示状态
-const showPageSizeMenu = ref(false);
-
 // 年度报告数据
-const allAnnualReports = ref([
-  {
-    fileName: "2024 Annual Report Amendment No.2",
-    date: "August 20, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625006571/fieeinc_10ka.htm",
-  },
-  {
-    fileName: "2024 Annual Report Amendment No.1",
-    date: "April 30, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625003214/fieeinc_10ka.htm",
-  },
+const annualReports = ref([
   {
     fileName: "2024 Annual Report",
     date: "April 10, 2025",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
   },
-  {
-    fileName: "2023 Annual Report Amendment",
-    date: "July 28, 2025",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625005429/fieeinc_10ka.htm",
-  },
-  {
-    fileName: "2023 Annual Report Amendment No.1",
-    date: "April 29, 2024",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002836/miniminc_10ka.htm",
-  },
   {
     fileName: "2023 Annual Report",
     date: "April 12, 2024",
@@ -214,48 +84,24 @@ const allAnnualReports = ref([
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
   },
-  {
-    fileName: "2021 Annual Report Amendment No.1",
-    date: "August 19, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222023610/form10ka.htm",
-  },
   {
     fileName: "2021 Annual Report",
     date: "March 31, 2022",
     downloadUrl:
       "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
   },
-  {
-    fileName: "2020 Annual Report Amendment No.1",
-    date: "April 29, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000114036121015017/brhc10023805_10ka.htm",
-  },
   {
     fileName: "2020 Annual Report",
     date: "April 13, 2021",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
   },
-  {
-    fileName: "2019 Annual Report Amendment No.1",
-    date: " April 29, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004635/zmtp_10ka.htm",
-  },
   {
     fileName: "2019 Annual Report",
     date: "April 15, 2020",
     downloadUrl:
       "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
   },
-  {
-    fileName: "2018 Annual Report Amendment No.1",
-    date: "April 30, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419005031/zmtp_10ka.htm",
-  },
   {
     fileName: "2018 Annual Report",
     date: "April 1, 2019",
@@ -317,199 +163,43 @@ const allAnnualReports = ref([
       "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
   },
 ]);
-
-// 初始化总数
-state.total = allAnnualReports.value.length;
-
-// 计算当前页显示的数据
-const annualReports = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return allAnnualReports.value.slice(start, end);
-});
-
-// 计算总页数
-const totalPages = computed(() => {
-  return Math.ceil(state.total / state.pageSize);
-});
-
-// 计算显示范围
-const displayRange = computed(() => {
-  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;
-  state.currentPage = 1; // 重置到第一页
-};
-
-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) {
-    // 如果总页数小于等于7，显示所有页码
-    for (let i = 1; i <= total; i++) {
-      pages.push(i);
-    }
-  } else {
-    // 显示第一页
-    pages.push(1);
-
-    if (current <= 4) {
-      // 当前页在前4页
-      for (let i = 2; i <= 5; i++) {
-        pages.push(i);
-      }
-      pages.push("...");
-      pages.push(total);
-    } else if (current >= total - 3) {
-      // 当前页在后4页
-      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;
-};
-
-// 监听页面大小变化
-watch(
-  () => state.pageSize,
-  () => {
-    state.currentPage = 1;
-  }
-);
-
-// 监听当前页变化，更新goto输入框
-watch(
-  () => state.currentPage,
-  (newPage) => {
-    state.gotoPage = newPage;
-  }
-);
-
-// 点击外部关闭页面大小选择菜单
-const handleClickOutside = (event) => {
-  if (!event.target.closest(".page-size-selector")) {
-    showPageSizeMenu.value = false;
-  }
-};
-
-// 添加和移除事件监听器
-onMounted(() => {
-  document.addEventListener("click", handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener("click", handleClickOutside);
-});
 </script>
 
 <style scoped lang="scss">
 .page-container {
+  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
-
 .financials-container {
-  max-width: 932px;
+  max-width: 1200px;
   margin: 0 auto;
-}
-
-.title-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 0 16px;
-  margin-bottom: 32px;
-}
-
-.title-decoration {
-  width: 58px;
-  height: 7px;
-  background: #ff7bac;
-  margin: auto 0;
-  margin-top: 43px;
+  padding: 20px;
 }
 
 .financials-title {
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 500;
   font-size: 40px;
-  line-height: 1.4em;
-  letter-spacing: 3%;
-  color: #000000;
+  text-align: center;
+  margin-bottom: 60px;
+  color: #333;
 }
 
 .section {
-  margin-bottom: 16px;
+  margin-bottom: 60px;
 }
 
 .section-title {
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 500;
-  font-size: 24px;
-  line-height: 1.333em;
-  letter-spacing: 5%;
-  color: #000000;
-  margin-bottom: 12px;
+  font-size: 18px;
+  margin-bottom: 20px;
+  color: #333;
 }
 
 .overview-text {
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
   font-size: 16px;
-  line-height: 1.375em;
-  letter-spacing: 3%;
-  color: #455363;
-  margin-bottom: 12px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 30px;
 }
 
 .tabs {
@@ -530,88 +220,40 @@ onUnmounted(() => {
 
 .reports-table {
   width: 100%;
-  background: #ffffff;
-  border-radius: 16px;
-  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
-  padding: 16px;
+  border-collapse: collapse;
 }
 
 .table-header {
   display: flex;
-  background: #fff0f5;
-  border-radius: 8px;
-  padding: 16px 0;
-  margin-bottom: 4px;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
   justify-content: space-between;
-  align-items: center;
-
-  .column {
-    font-family: "PingFang SC", sans-serif;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 1.375em;
-    letter-spacing: 3%;
-    color: #000000;
-    text-align: center;
-  }
 }
 
 .table-row {
   display: flex;
-  padding: 16px 0;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
   align-items: center;
   justify-content: space-between;
-  position: relative;
-  border-radius: 8px;
-  &:hover {
-    background: #fff8fb;
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:nth-child(even) {
-    margin: 4px 0;
-  }
 }
-
 .reports-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+  // max-height: 600px;
+  // overflow-y: auto;
 }
-
 .column {
   &.file-name {
-    width: 420px;
-    padding: 4px 16px;
-    font-family: "PingFang SC", sans-serif;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 1.375em;
-    letter-spacing: 3%;
-    color: #455363;
-    text-align: left;
+    width: 25%;
   }
   &.date {
-    flex: 1;
-    padding: 4px 16px;
-    font-family: "PingFang SC", sans-serif;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 1.375em;
-    letter-spacing: 3%;
-    color: #455363;
-    text-align: left;
+    width: 25%;
   }
+
   &.download {
-    width: 152px;
-    padding: 4px 16px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 25%;
+    text-align: right;
+    margin-right: 50px;
   }
 }
 
@@ -621,22 +263,11 @@ onUnmounted(() => {
 }
 
 .download-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 23px;
-  height: 22px;
-  border-radius: 4px;
+  color: #0078d7;
   text-decoration: none;
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
   &:hover {
-    background: #fff8fb;
+    text-decoration: underline;
   }
 }
 
@@ -653,159 +284,4 @@ onUnmounted(() => {
     text-decoration: underline;
   }
 }
-
-// 分页器样式
-.pagination-container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-bottom: 30px;
-  gap: 21px;
-}
-
-.pagination-info {
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 1.4375em;
-  color: #455363;
-  text-align: right;
-}
-
-.pagination-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.pagination-buttons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.page-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  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: 18px;
-  padding: 4px 12px;
-  height: 28px;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-
-  &:hover {
-    border-color: #ff7bac;
-  }
-}
-
-.page-size-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: #ffffff;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  margin-top: 2px;
-}
-
-.page-size-option {
-  padding: 8px 12px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  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: 8px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  margin-right: 16px;
-}
-
-.goto-input {
-  width: 60px;
-  height: 28px;
-  padding: 4px 12px;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  text-align: center;
-
-  &:focus {
-    outline: none;
-    border-color: #ff7bac;
-  }
-}
 </style>