fix press-releases 768
This commit is contained in:
yuanshan
parent
52d9083813
commit
51d2364e38
@ -1,35 +1,45 @@
|
||||
<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>
|
||||
<div class="search-container">
|
||||
<n-select
|
||||
:options="state.selectOptions"
|
||||
v-model:value="state.selectedValue"
|
||||
class="search-select"
|
||||
/>
|
||||
<n-input
|
||||
v-model:value="state.inputValue"
|
||||
<input
|
||||
v-model="state.inputValue"
|
||||
type="text"
|
||||
:placeholder="t('press_releases.search.placeholder')"
|
||||
class="search-input"
|
||||
/>
|
||||
<n-button @click="handleSearch" class="search-button w-[120px]">
|
||||
<button @click="handleSearch" class="search-button">
|
||||
{{ t("press_releases.search.button") }}
|
||||
</n-button>
|
||||
</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="reports-list">
|
||||
<div
|
||||
class="news-item-title text-[#0078d7] cursor-pointer"
|
||||
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
|
||||
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;
|
||||
@ -38,19 +48,34 @@
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<n-tooltip
|
||||
trigger="click"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
<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"
|
||||
class="news-item-content file-description"
|
||||
style="
|
||||
word-break: break-word;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -63,17 +88,119 @@
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
<div class="download-section">
|
||||
<div class="news-item-date">{{ item.date }}</div>
|
||||
</div>
|
||||
</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 class="pagination-info" v-if="state.total > 0">
|
||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
</main>
|
||||
</n-infinite-scroll>
|
||||
</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,20 +274,21 @@ 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)
|
||||
axios
|
||||
.post(url, params)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
@ -182,70 +298,44 @@ const getPressReleasesDisplay = () => {
|
||||
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;
|
||||
}
|
||||
}
|
||||
})
|
||||
.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 来实现自动筛选
|
||||
watch(
|
||||
() => [state.selectedValue, state.inputValue],
|
||||
() => {
|
||||
// handleFilter();
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
const handleSearch = () => {
|
||||
// 手动触发筛选（保留这个函数以保持兼容性）
|
||||
// handleFilter();
|
||||
watch(
|
||||
() => state.pageSize,
|
||||
() => {
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => state.currentPage,
|
||||
(newPage) => {
|
||||
state.gotoPage = newPage;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
const handleSearch = () => {
|
||||
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;
|
||||
}
|
||||
// console.log('触底了')
|
||||
state.loading = true;
|
||||
state.currentPage++;
|
||||
getPressReleasesDisplay().finally(() => {
|
||||
state.loading = false;
|
||||
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;
|
||||
}
|
||||
};
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user