fix press-releases 768
This commit is contained in:
yuanshan
parent
52d9083813
commit
51d2364e38
@ -1,79 +1,206 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="press-releases-page">
|
<div class="press-releases-page">
|
||||||
<n-infinite-scroll :distance="0" @load="doLoadMore">
|
<main class="mx-auto">
|
||||||
<main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px)">
|
<div class="title-section">
|
||||||
<div class="title mb-[20px]">
|
<div class="title-decoration"></div>
|
||||||
|
<div class="title">
|
||||||
{{ t("press_releases.title") }}
|
{{ t("press_releases.title") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="search-container">
|
</div>
|
||||||
<n-select
|
<div class="search-container">
|
||||||
:options="state.selectOptions"
|
<n-select
|
||||||
v-model:value="state.selectedValue"
|
:options="state.selectOptions"
|
||||||
class="search-select"
|
v-model:value="state.selectedValue"
|
||||||
/>
|
class="search-select"
|
||||||
<n-input
|
/>
|
||||||
v-model:value="state.inputValue"
|
<input
|
||||||
type="text"
|
v-model="state.inputValue"
|
||||||
:placeholder="t('press_releases.search.placeholder')"
|
type="text"
|
||||||
class="search-input"
|
:placeholder="t('press_releases.search.placeholder')"
|
||||||
/>
|
class="search-input"
|
||||||
<n-button @click="handleSearch" class="search-button w-[120px]">
|
/>
|
||||||
{{ t("press_releases.search.button") }}
|
<button @click="handleSearch" class="search-button">
|
||||||
</n-button>
|
{{ t("press_releases.search.button") }}
|
||||||
</div>
|
</button>
|
||||||
<div v-for="(item, idx) in state.filterNewsData" :key="idx">
|
</div>
|
||||||
<div class="news-item mt-[10px]">
|
<div class="reports-list">
|
||||||
<div class="news-item-date">{{ item.date }}</div>
|
<div
|
||||||
<div
|
v-for="(item, idx) in state.filterNewsData"
|
||||||
class="news-item-title text-[#0078d7] cursor-pointer"
|
:key="idx"
|
||||||
style="
|
class="news-item table-row"
|
||||||
word-break: break-word;
|
>
|
||||||
display: -webkit-box;
|
<div class="content">
|
||||||
-webkit-line-clamp: 2;
|
<div class="file-content">
|
||||||
-webkit-box-orient: vertical;
|
<div class="file-info">
|
||||||
overflow: hidden;
|
<div class="vertical-line"></div>
|
||||||
text-overflow: ellipsis;
|
|
||||||
"
|
|
||||||
@click="handleNewClick(item)"
|
|
||||||
>
|
|
||||||
{{ item.title }}
|
|
||||||
</div>
|
|
||||||
<n-tooltip
|
|
||||||
trigger="click"
|
|
||||||
:disabled="!item.showTooltip"
|
|
||||||
width="trigger"
|
|
||||||
>
|
|
||||||
<template #trigger>
|
|
||||||
<div
|
<div
|
||||||
:ref="(el) => setTitleRef(el, idx)"
|
class="news-item-title text-[#000] cursor-pointer"
|
||||||
class="news-item-content"
|
|
||||||
style="
|
style="
|
||||||
word-break: break-word;
|
word-break: break-all;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 1;
|
||||||
|
line-clamp: 1;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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 }}
|
{{ item.summary }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</n-tooltip>
|
||||||
<div slot="content">
|
<div class="download-section">
|
||||||
{{ item.summary }}
|
<div class="news-item-date">{{ item.date }}</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
</n-infinite-scroll>
|
<div class="pagination-info" v-if="state.total > 0">
|
||||||
|
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||||
|
{{ state.total }} results
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import customDefaultPage from "@/components/customDefaultPage/index.vue";
|
import customDefaultPage from "@/components/customDefaultPage/index.vue";
|
||||||
import { reactive, onMounted, watch, nextTick, ref } from "vue";
|
import {
|
||||||
import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
|
reactive,
|
||||||
|
onMounted,
|
||||||
|
watch,
|
||||||
|
nextTick,
|
||||||
|
ref,
|
||||||
|
computed,
|
||||||
|
onUnmounted,
|
||||||
|
} from "vue";
|
||||||
|
import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
@ -94,32 +221,16 @@ const state = reactive({
|
|||||||
}),
|
}),
|
||||||
], //下拉选项
|
], //下拉选项
|
||||||
inputValue: "", //输入值
|
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: [],
|
filterNewsData: [],
|
||||||
loading: false, //是否正在加载数据
|
loading: false, //是否正在加载数据
|
||||||
hasMore: true, //是否还有更多数据
|
|
||||||
currentPage: 1, //当前页码
|
currentPage: 1, //当前页码
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
gotoPage: 1,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const showPageSizeMenu = ref(false);
|
||||||
|
|
||||||
const titleRefs = ref([]);
|
const titleRefs = ref([]);
|
||||||
|
|
||||||
const setTitleRef = (el, idx) => {
|
const setTitleRef = (el, idx) => {
|
||||||
@ -139,14 +250,18 @@ const checkAllTitleOverflow = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// state.filterNewsData = state.newsData;
|
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
|
document.addEventListener("click", handleClickOutside);
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
checkAllTitleOverflow();
|
checkAllTitleOverflow();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.removeEventListener("click", handleClickOutside);
|
||||||
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => state.filterNewsData,
|
() => state.filterNewsData,
|
||||||
() => {
|
() => {
|
||||||
@ -159,93 +274,68 @@ watch(
|
|||||||
|
|
||||||
// 获取新闻列表
|
// 获取新闻列表
|
||||||
const getPressReleasesDisplay = () => {
|
const getPressReleasesDisplay = () => {
|
||||||
|
state.loading = true;
|
||||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||||
let params = {
|
let params = {
|
||||||
query: state.inputValue,
|
query: state.inputValue,
|
||||||
page: state.currentPage,
|
page: state.currentPage,
|
||||||
pageSize: 10,
|
pageSize: state.pageSize,
|
||||||
timeStart: state.selectedValue
|
timeStart: state.selectedValue
|
||||||
? state.selectedValue === "all_years"
|
? state.selectedValue === "all_years"
|
||||||
? null
|
? null
|
||||||
: new Date(state.selectedValue).getTime()
|
: new Date(state.selectedValue).getTime()
|
||||||
: null,
|
: null,
|
||||||
};
|
};
|
||||||
// console.log(params)
|
axios
|
||||||
axios.post(url, params).then((res) => {
|
.post(url, params)
|
||||||
// console.log(res)
|
.then((res) => {
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
if (res.data.status === 0) {
|
if (res.data.status === 0) {
|
||||||
res.data.data?.data?.forEach((item) => {
|
res.data.data?.data?.forEach((item) => {
|
||||||
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
|
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
if (state.currentPage === 1) {
|
|
||||||
state.filterNewsData = res.data.data?.data || [];
|
state.filterNewsData = res.data.data?.data || [];
|
||||||
} else {
|
state.total = res.data.data?.total || 0;
|
||||||
state.filterNewsData = [
|
|
||||||
...state.filterNewsData,
|
|
||||||
...(res.data.data?.data || []),
|
|
||||||
];
|
|
||||||
}
|
|
||||||
if (state.filterNewsData.length < (res.data.data?.total || 0)) {
|
|
||||||
state.hasMore = true;
|
|
||||||
} else {
|
|
||||||
state.hasMore = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
});
|
.finally(() => {
|
||||||
};
|
state.loading = false;
|
||||||
|
|
||||||
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;
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
// 按输入内容进行模糊查询（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 来实现自动筛选
|
// 添加 watcher 来实现自动筛选
|
||||||
watch(
|
watch(
|
||||||
() => [state.selectedValue, state.inputValue],
|
() => [state.selectedValue, state.inputValue],
|
||||||
() => {
|
() => {
|
||||||
// handleFilter();
|
|
||||||
state.currentPage = 1;
|
state.currentPage = 1;
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => state.pageSize,
|
||||||
|
() => {
|
||||||
|
state.currentPage = 1;
|
||||||
|
getPressReleasesDisplay();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => state.currentPage,
|
||||||
|
(newPage) => {
|
||||||
|
state.gotoPage = newPage;
|
||||||
|
getPressReleasesDisplay();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
// 手动触发筛选（保留这个函数以保持兼容性）
|
|
||||||
// handleFilter();
|
|
||||||
state.currentPage = 1;
|
state.currentPage = 1;
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
// console.log("筛选结果:", state.filterNewsData);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleNewClick = (item) => {
|
const handleNewClick = (item) => {
|
||||||
@ -257,72 +347,461 @@ const handleNewClick = (item) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
//加载更多数据
|
const totalPages = computed(() => {
|
||||||
const doLoadMore = () => {
|
return Math.ceil(state.total / state.pageSize) || 1;
|
||||||
if (!state.hasMore || state.loading) {
|
});
|
||||||
return;
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<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 {
|
.title {
|
||||||
font-size: 63px;
|
font-size: 32 * 2.5px;
|
||||||
color: #333;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container {
|
.search-container {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20 * 2.5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: 25px;
|
gap: 16 * 2.5px;
|
||||||
|
padding: 0 16 * 2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-select {
|
.search-select {
|
||||||
width: 360px;
|
width: 134 * 2.5px;
|
||||||
:deep(.n-base-selection) {
|
height: 34 * 2.5px;
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.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) {
|
:deep(.n-input) {
|
||||||
.n-input__input {
|
.n-input__input {
|
||||||
padding: 4px 0;
|
padding: 4 * 2.5px 0;
|
||||||
// border: 1px solid #ccc;
|
// border: 1*2.5px solid #ccc;
|
||||||
border-radius: 4px;
|
border-radius: 4 * 2.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.n-select) {
|
:deep(.n-select) {
|
||||||
.n-select__input {
|
.n-select__input {
|
||||||
padding: 8px 12px;
|
padding: 8 * 2.5px 12 * 2.5px;
|
||||||
border: 1px solid #ccc;
|
border: 1 * 2.5px solid #ccc;
|
||||||
border-radius: 4px;
|
border-radius: 4 * 2.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.n-button) {
|
:deep(.n-button) {
|
||||||
padding: 20px 16px;
|
padding: 20 * 2.5px 16 * 2.5px;
|
||||||
border-radius: 4px;
|
border-radius: 4 * 2.5px;
|
||||||
}
|
}
|
||||||
.search-button {
|
.search-button {
|
||||||
|
height: 34 * 2.5px;
|
||||||
|
padding: 7 * 2.5px 12 * 2.5px;
|
||||||
|
min-width: 160 * 2.5px;
|
||||||
background: #ff7bac;
|
background: #ff7bac;
|
||||||
color: #fff;
|
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 {
|
&:hover {
|
||||||
background: #ff7bac;
|
background: #ff7bac;
|
||||||
color: #fff;
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user