feat: 新增部分分页的国际化
This commit is contained in:
parent
f711a35651
commit
83b7070d66
@ -169,6 +169,8 @@ const getListData = async () => {
|
|||||||
};
|
};
|
||||||
getListData();
|
getListData();
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getListData();
|
getListData();
|
||||||
});
|
});
|
||||||
const columns = [
|
const columns = [
|
||||||
|
|||||||
@ -169,6 +169,8 @@ const getListData = async () => {
|
|||||||
};
|
};
|
||||||
getListData();
|
getListData();
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getListData();
|
getListData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -170,6 +170,8 @@ const getListData = async () => {
|
|||||||
};
|
};
|
||||||
getListData();
|
getListData();
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getListData();
|
getListData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -169,6 +169,8 @@ const getListData = async () => {
|
|||||||
};
|
};
|
||||||
getListData();
|
getListData();
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getListData();
|
getListData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -238,6 +238,8 @@ const getListData = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getListData();
|
getListData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -238,6 +238,8 @@ const getListData = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getListData();
|
getListData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -222,6 +222,8 @@ const getListData = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getListData();
|
getListData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -236,6 +236,8 @@ const getListData = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getListData();
|
getListData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -99,93 +99,40 @@
|
|||||||
|
|
||||||
<!-- 分页器 -->
|
<!-- 分页器 -->
|
||||||
<div class="pagination-container" v-if="state.total > 0">
|
<div class="pagination-container" v-if="state.total > 0">
|
||||||
<div class="pagination-info">
|
<div class="pagination-info text-[#455363] mr-[15PX]">
|
||||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
{{ t("financialinformation.quarterlyreports.pagination.displaying", {
|
||||||
{{ state.total }} results
|
start: (state.currentPage - 1) * state.pageSize + 1,
|
||||||
</div>
|
end: Math.min(state.currentPage * state.pageSize, state.total),
|
||||||
<div class="pagination-controls">
|
total: state.total,
|
||||||
<div class="pagination-buttons">
|
}) }}
|
||||||
<button
|
|
||||||
class="page-btn-prev 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-page"
|
|
||||||
:class="{ active: page === state.currentPage }"
|
|
||||||
@click="goToPage(page)"
|
|
||||||
>
|
|
||||||
{{ page }}
|
|
||||||
</button>
|
|
||||||
<button v-else class="page-btn-page disabled" disabled>
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="page-btn-next 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>
|
||||||
|
<NPagination
|
||||||
|
v-model:page="state.currentPage"
|
||||||
|
v-model:page-size="state.pageSize"
|
||||||
|
show-size-picker
|
||||||
|
show-quick-jumper
|
||||||
|
:item-count="state.total"
|
||||||
|
:page-sizes="[
|
||||||
|
{
|
||||||
|
label: t('historic_stock.pagination.perPage', { size: 10 }),
|
||||||
|
value: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('historic_stock.pagination.perPage', { size: 25 }),
|
||||||
|
value: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('historic_stock.pagination.perPage', { size: 50 }),
|
||||||
|
value: 50,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
@update:page="getPressReleasesDisplay"
|
||||||
|
@update:page-size="getPressReleasesDisplay"
|
||||||
|
>
|
||||||
|
<template #goto>{{
|
||||||
|
t("financialinformation.quarterlyreports.pagination.goto")
|
||||||
|
}}</template>
|
||||||
|
</NPagination>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
@ -200,10 +147,8 @@ import {
|
|||||||
watch,
|
watch,
|
||||||
nextTick,
|
nextTick,
|
||||||
ref,
|
ref,
|
||||||
computed,
|
|
||||||
onUnmounted,
|
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { NTooltip } from "naive-ui";
|
import { NTooltip, NPagination } from "naive-ui";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
@ -229,11 +174,8 @@ const state = reactive({
|
|||||||
currentPage: 1, //当前页码
|
currentPage: 1, //当前页码
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
gotoPage: 1,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const showPageSizeMenu = ref(false);
|
|
||||||
|
|
||||||
const titleRefs = ref([]);
|
const titleRefs = ref([]);
|
||||||
|
|
||||||
const setTitleRef = (el, idx) => {
|
const setTitleRef = (el, idx) => {
|
||||||
@ -254,17 +196,12 @@ const checkAllTitleOverflow = () => {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
document.addEventListener("click", handleClickOutside);
|
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
checkAllTitleOverflow();
|
checkAllTitleOverflow();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.removeEventListener("click", handleClickOutside);
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => state.filterNewsData,
|
() => state.filterNewsData,
|
||||||
() => {
|
() => {
|
||||||
@ -320,6 +257,8 @@ const getPressReleasesDisplay = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
});
|
});
|
||||||
// 添加 watcher 来实现自动筛选
|
// 添加 watcher 来实现自动筛选
|
||||||
@ -342,7 +281,6 @@ watch(
|
|||||||
watch(
|
watch(
|
||||||
() => state.currentPage,
|
() => state.currentPage,
|
||||||
(newPage) => {
|
(newPage) => {
|
||||||
state.gotoPage = newPage;
|
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -360,93 +298,6 @@ const handleNewClick = (item) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -652,8 +503,8 @@ const handleClickOutside = (event) => {
|
|||||||
.pagination-container {
|
.pagination-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: center;
|
||||||
margin-top: 20px;
|
margin-top: 15px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
gap: 21px;
|
gap: 21px;
|
||||||
}
|
}
|
||||||
@ -667,179 +518,7 @@ const handleClickOutside = (event) => {
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-controls {
|
:deep(.n-base-loading__icon) {
|
||||||
display: flex;
|
color: #ff7bac;
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-buttons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-btn-prev,
|
|
||||||
.page-btn-next {
|
|
||||||
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-btn-page {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
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;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
border-color: #ff7bac;
|
|
||||||
color: #ff7bac;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: #ff7bac;
|
|
||||||
color: #ff7bac;
|
|
||||||
border: 1px solid #e0e0e6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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;
|
|
||||||
bottom: 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-bottom: 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>
|
</style>
|
||||||
|
|||||||
@ -99,93 +99,40 @@
|
|||||||
|
|
||||||
<!-- 分页器 -->
|
<!-- 分页器 -->
|
||||||
<div class="pagination-container" v-if="state.total > 0">
|
<div class="pagination-container" v-if="state.total > 0">
|
||||||
<div class="pagination-info">
|
<div class="pagination-info text-[#455363] mr-[15PX]">
|
||||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
{{ t("financialinformation.quarterlyreports.pagination.displaying", {
|
||||||
{{ state.total }} results
|
start: (state.currentPage - 1) * state.pageSize + 1,
|
||||||
</div>
|
end: Math.min(state.currentPage * state.pageSize, state.total),
|
||||||
<div class="pagination-controls">
|
total: state.total,
|
||||||
<div class="pagination-buttons">
|
}) }}
|
||||||
<button
|
|
||||||
class="page-btn-prev 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-page"
|
|
||||||
:class="{ active: page === state.currentPage }"
|
|
||||||
@click="goToPage(page)"
|
|
||||||
>
|
|
||||||
{{ page }}
|
|
||||||
</button>
|
|
||||||
<button v-else class="page-btn-page disabled" disabled>
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="page-btn-next 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>
|
||||||
|
<NPagination
|
||||||
|
v-model:page="state.currentPage"
|
||||||
|
v-model:page-size="state.pageSize"
|
||||||
|
show-size-picker
|
||||||
|
show-quick-jumper
|
||||||
|
:item-count="state.total"
|
||||||
|
:page-sizes="[
|
||||||
|
{
|
||||||
|
label: t('historic_stock.pagination.perPage', { size: 10 }),
|
||||||
|
value: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('historic_stock.pagination.perPage', { size: 25 }),
|
||||||
|
value: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('historic_stock.pagination.perPage', { size: 50 }),
|
||||||
|
value: 50,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
@update:page="getPressReleasesDisplay"
|
||||||
|
@update:page-size="getPressReleasesDisplay"
|
||||||
|
>
|
||||||
|
<template #goto>{{
|
||||||
|
t("financialinformation.quarterlyreports.pagination.goto")
|
||||||
|
}}</template>
|
||||||
|
</NPagination>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
@ -203,7 +150,7 @@ import {
|
|||||||
computed,
|
computed,
|
||||||
onUnmounted,
|
onUnmounted,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { NTooltip } from "naive-ui";
|
import { NTooltip, NPagination } from "naive-ui";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
@ -229,11 +176,8 @@ const state = reactive({
|
|||||||
currentPage: 1, //当前页码
|
currentPage: 1, //当前页码
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
gotoPage: 1,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const showPageSizeMenu = ref(false);
|
|
||||||
|
|
||||||
const titleRefs = ref([]);
|
const titleRefs = ref([]);
|
||||||
|
|
||||||
const setTitleRef = (el, idx) => {
|
const setTitleRef = (el, idx) => {
|
||||||
@ -254,17 +198,12 @@ const checkAllTitleOverflow = () => {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
document.addEventListener("click", handleClickOutside);
|
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
checkAllTitleOverflow();
|
checkAllTitleOverflow();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.removeEventListener("click", handleClickOutside);
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => state.filterNewsData,
|
() => state.filterNewsData,
|
||||||
() => {
|
() => {
|
||||||
@ -320,6 +259,8 @@ const getPressReleasesDisplay = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -343,7 +284,6 @@ watch(
|
|||||||
watch(
|
watch(
|
||||||
() => state.currentPage,
|
() => state.currentPage,
|
||||||
(newPage) => {
|
(newPage) => {
|
||||||
state.gotoPage = newPage;
|
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -361,93 +301,6 @@ const handleNewClick = (item) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -649,8 +502,8 @@ const handleClickOutside = (event) => {
|
|||||||
.pagination-container {
|
.pagination-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 20px;
|
justify-content: center;
|
||||||
justify-content: flex-end;
|
margin-top: 15px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
gap: 21px;
|
gap: 21px;
|
||||||
}
|
}
|
||||||
@ -664,179 +517,7 @@ const handleClickOutside = (event) => {
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-controls {
|
:deep(.n-base-loading__icon) {
|
||||||
display: flex;
|
color: #ff7bac;
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-buttons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-btn-prev,
|
|
||||||
.page-btn-next {
|
|
||||||
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-btn-page {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
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;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
border-color: #ff7bac;
|
|
||||||
color: #ff7bac;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: #ff7bac;
|
|
||||||
color: #ff7bac;
|
|
||||||
border: 1px solid #e0e0e6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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;
|
|
||||||
bottom: 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-bottom: 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>
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -3,7 +3,7 @@
|
|||||||
<main class="mx-auto">
|
<main class="mx-auto">
|
||||||
<div class="title-section">
|
<div class="title-section">
|
||||||
<div class="title-decoration"></div>
|
<div class="title-decoration"></div>
|
||||||
<div class="title">
|
<div class="title mb-[20px]">
|
||||||
{{ t("press_releases.title") }}
|
{{ t("press_releases.title") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -74,8 +74,8 @@
|
|||||||
style="
|
style="
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 1;
|
||||||
line-clamp: 2;
|
line-clamp: 1;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -99,93 +99,40 @@
|
|||||||
|
|
||||||
<!-- 分页器 -->
|
<!-- 分页器 -->
|
||||||
<div class="pagination-container" v-if="state.total > 0">
|
<div class="pagination-container" v-if="state.total > 0">
|
||||||
<div class="pagination-controls">
|
<div class="pagination-info text-[#455363] mr-[15PX]">
|
||||||
<div class="pagination-buttons">
|
{{ t("financialinformation.quarterlyreports.pagination.displaying", {
|
||||||
<button
|
start: (state.currentPage - 1) * state.pageSize + 1,
|
||||||
class="page-btn-prev prev-btn"
|
end: Math.min(state.currentPage * state.pageSize, state.total),
|
||||||
:disabled="state.currentPage === 1"
|
total: state.total,
|
||||||
@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-page"
|
|
||||||
:class="{ active: page === state.currentPage }"
|
|
||||||
@click="goToPage(page)"
|
|
||||||
>
|
|
||||||
{{ page }}
|
|
||||||
</button>
|
|
||||||
<button v-else class="page-btn-page disabled" disabled>
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="page-btn-next 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>
|
<NPagination
|
||||||
<div class="pagination-info" v-if="state.total > 0">
|
v-model:page="state.currentPage"
|
||||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
v-model:page-size="state.pageSize"
|
||||||
{{ state.total }} results
|
show-size-picker
|
||||||
|
show-quick-jumper
|
||||||
|
:item-count="state.total"
|
||||||
|
:page-sizes="[
|
||||||
|
{
|
||||||
|
label: t('historic_stock.pagination.perPage', { size: 10 }),
|
||||||
|
value: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('historic_stock.pagination.perPage', { size: 25 }),
|
||||||
|
value: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('historic_stock.pagination.perPage', { size: 50 }),
|
||||||
|
value: 50,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
@update:page="getPressReleasesDisplay"
|
||||||
|
@update:page-size="getPressReleasesDisplay"
|
||||||
|
>
|
||||||
|
<template #goto>{{
|
||||||
|
t("financialinformation.quarterlyreports.pagination.goto")
|
||||||
|
}}</template>
|
||||||
|
</NPagination>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
@ -201,9 +148,8 @@ import {
|
|||||||
nextTick,
|
nextTick,
|
||||||
ref,
|
ref,
|
||||||
computed,
|
computed,
|
||||||
onUnmounted,
|
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { NTooltip } from "naive-ui";
|
import { NTooltip, NPagination } from "naive-ui";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
@ -229,13 +175,31 @@ const state = reactive({
|
|||||||
currentPage: 1, //当前页码
|
currentPage: 1, //当前页码
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
gotoPage: 1,
|
showYearPicker: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const showPageSizeMenu = ref(false);
|
|
||||||
|
|
||||||
const titleRefs = ref([]);
|
const titleRefs = ref([]);
|
||||||
|
|
||||||
|
const selectedYearLabel = computed(() => {
|
||||||
|
const option = state.selectOptions.find(
|
||||||
|
(opt) => opt.value === state.selectedValue
|
||||||
|
);
|
||||||
|
return option ? option.label : "";
|
||||||
|
});
|
||||||
|
|
||||||
|
const openYearPicker = () => {
|
||||||
|
state.showYearPicker = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeYearPicker = () => {
|
||||||
|
state.showYearPicker = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onYearConfirm = (year) => {
|
||||||
|
state.selectedValue = year;
|
||||||
|
closeYearPicker();
|
||||||
|
};
|
||||||
|
|
||||||
const setTitleRef = (el, idx) => {
|
const setTitleRef = (el, idx) => {
|
||||||
if (el) titleRefs.value[idx] = el;
|
if (el) titleRefs.value[idx] = el;
|
||||||
};
|
};
|
||||||
@ -254,17 +218,12 @@ const checkAllTitleOverflow = () => {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
document.addEventListener("click", handleClickOutside);
|
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
checkAllTitleOverflow();
|
checkAllTitleOverflow();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.removeEventListener("click", handleClickOutside);
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => state.filterNewsData,
|
() => state.filterNewsData,
|
||||||
() => {
|
() => {
|
||||||
@ -303,7 +262,7 @@ const getPressReleasesDisplay = () => {
|
|||||||
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.date).toLocaleDateString("en-US", {
|
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
@ -320,6 +279,8 @@ const getPressReleasesDisplay = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
watch(locale, (newLocale, oldLocale) => {
|
watch(locale, (newLocale, oldLocale) => {
|
||||||
|
// 页码重置为第一页
|
||||||
|
state.currentPage = 1;
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -343,7 +304,6 @@ watch(
|
|||||||
watch(
|
watch(
|
||||||
() => state.currentPage,
|
() => state.currentPage,
|
||||||
(newPage) => {
|
(newPage) => {
|
||||||
state.gotoPage = newPage;
|
|
||||||
getPressReleasesDisplay();
|
getPressReleasesDisplay();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -361,99 +321,13 @@ const handleNewClick = (item) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.press-releases-page {
|
.press-releases-page {
|
||||||
width: 650 * 2.5px;
|
width: 650 * 2.5px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
.title-section {
|
.title-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -465,7 +339,6 @@ const handleClickOutside = (event) => {
|
|||||||
width: 58 * 2.5px;
|
width: 58 * 2.5px;
|
||||||
height: 7 * 2.5px;
|
height: 7 * 2.5px;
|
||||||
background: #ff7bac;
|
background: #ff7bac;
|
||||||
margin: auto 0;
|
|
||||||
margin-top: 43 * 2.5px;
|
margin-top: 43 * 2.5px;
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
@ -474,21 +347,36 @@ const handleClickOutside = (event) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-container {
|
.search-container {
|
||||||
|
margin-top: 32 * 2.5px;
|
||||||
margin-bottom: 20 * 2.5px;
|
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: space-between;
|
||||||
|
flex-flow: wrap;
|
||||||
gap: 16 * 2.5px;
|
gap: 16 * 2.5px;
|
||||||
padding: 0 16 * 2.5px;
|
padding: 0 16 * 2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-select {
|
.search-select {
|
||||||
width: 134 * 2.5px;
|
width: 201 * 2.5px;
|
||||||
|
height: 34 * 2.5px;
|
||||||
|
padding: 0 12 * 2.5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14 * 2.5px;
|
||||||
|
color: #455363;
|
||||||
|
}
|
||||||
|
.search-select-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
width: 292 * 2.5px;
|
width: 401 * 2.5px;
|
||||||
height: 34 * 2.5px;
|
height: 34 * 2.5px;
|
||||||
padding: 7 * 2.5px 12 * 2.5px;
|
padding: 7 * 2.5px 12 * 2.5px;
|
||||||
border: 1 * 2.5px solid #e0e0e6;
|
border: 1 * 2.5px solid #e0e0e6;
|
||||||
@ -499,7 +387,6 @@ const handleClickOutside = (event) => {
|
|||||||
line-height: 1.375em;
|
line-height: 1.375em;
|
||||||
letter-spacing: 0.48 * 2.5px;
|
letter-spacing: 0.48 * 2.5px;
|
||||||
color: #455363;
|
color: #455363;
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: #b6b6b6;
|
color: #b6b6b6;
|
||||||
@ -507,20 +394,19 @@ const handleClickOutside = (event) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-button {
|
.search-button {
|
||||||
|
width: 201 * 2.5px;
|
||||||
height: 34 * 2.5px;
|
height: 34 * 2.5px;
|
||||||
padding: 7 * 2.5px 12 * 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: none;
|
||||||
border-radius: 3 * 2.5px;
|
border-radius: 3 * 2.5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: "PingFang SC", sans-serif;
|
font-family: "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
font-size: 14 * 2.5px;
|
font-size: 14 * 2.5px;
|
||||||
line-height: 1.375em;
|
line-height: 1.375em;
|
||||||
letter-spacing: 0.48 * 2.5px;
|
letter-spacing: 0.48 * 2.5px;
|
||||||
box-sizing: border-box;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #ff7bac;
|
background: #ff7bac;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@ -532,7 +418,6 @@ const handleClickOutside = (event) => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4 * 2.5px;
|
gap: 4 * 2.5px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: 650 * 2.5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-row {
|
.table-row {
|
||||||
@ -540,12 +425,6 @@ const handleClickOutside = (event) => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 8 * 2.5px;
|
border-radius: 8 * 2.5px;
|
||||||
|
|
||||||
// &:last-child {
|
|
||||||
// .separator-line {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
@ -561,6 +440,7 @@ const handleClickOutside = (event) => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
|
padding: 0 16 * 2.5px;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #fff8fb;
|
background: #fff8fb;
|
||||||
}
|
}
|
||||||
@ -582,6 +462,13 @@ const handleClickOutside = (event) => {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vertical-line {
|
||||||
|
width: 1 * 2.5px;
|
||||||
|
height: 20 * 2.5px;
|
||||||
|
background: #ff7bac;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.news-item-title {
|
.news-item-title {
|
||||||
font-family: "PingFang SC", sans-serif;
|
font-family: "PingFang SC", sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -591,29 +478,29 @@ const handleClickOutside = (event) => {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow-icon {
|
.news-item-content {
|
||||||
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-family: "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14 * 2.5px;
|
font-size: 14 * 2.5px;
|
||||||
line-height: 1.375em;
|
line-height: 1.375em;
|
||||||
letter-spacing: 0.48 * 2.5px;
|
letter-spacing: 0.48 * 2.5px;
|
||||||
color: #455363;
|
color: #455363;
|
||||||
margin: 0;
|
margin-top: 4 * 2.5px;
|
||||||
padding: 0 16 * 2.5px;
|
padding: 0 16 * 2.5px;
|
||||||
margin-top: 8 * 2.5px;
|
}
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
margin-left: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: 4 * 2.5px 16 * 2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-item-date {
|
.news-item-date {
|
||||||
@ -625,23 +512,15 @@ const handleClickOutside = (event) => {
|
|||||||
color: #455363;
|
color: #455363;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
width: 100%;
|
|
||||||
padding: 4 * 2.5px 16 * 2.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.separator-line {
|
.separator-line {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1 * 2.5px;
|
height: 1 * 2.5px;
|
||||||
background: repeating-linear-gradient(
|
background: repeating-linear-gradient(
|
||||||
to right,
|
to right,
|
||||||
#e6eaee 0 * 2.5px,
|
#e6eaee 0px,
|
||||||
#e6eaee 2 * 2.5px,
|
#e6eaee 4 * 2.5px,
|
||||||
transparent 2 * 2.5px,
|
transparent 4 * 2.5px,
|
||||||
transparent 4 * 2.5px
|
transparent 8 * 2.5px
|
||||||
);
|
);
|
||||||
margin-top: 16 * 2.5px;
|
margin-top: 16 * 2.5px;
|
||||||
}
|
}
|
||||||
@ -650,9 +529,10 @@ const handleClickOutside = (event) => {
|
|||||||
.pagination-container {
|
.pagination-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 20 * 2.5px 0;
|
justify-content: center;
|
||||||
justify-content: flex-end;
|
margin-top: 15 * 2.5px;
|
||||||
padding: 0 16 * 2.5px;
|
margin-bottom: 30 * 2.5px;
|
||||||
|
gap: 21 * 2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-info {
|
.pagination-info {
|
||||||
@ -662,182 +542,9 @@ const handleClickOutside = (event) => {
|
|||||||
line-height: 1.4375em;
|
line-height: 1.4375em;
|
||||||
color: #455363;
|
color: #455363;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-bottom: 30 * 2.5px;
|
|
||||||
padding: 0 16 * 2.5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-controls {
|
:deep(.n-base-loading__icon) {
|
||||||
display: flex;
|
color: #ff7bac;
|
||||||
align-items: center;
|
|
||||||
gap: 8 * 2.5px;
|
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
.pagination-buttons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8 * 2.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-btn-prev,
|
|
||||||
.page-btn-next {
|
|
||||||
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-btn-page {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 28 * 2.5px;
|
|
||||||
height: 28 * 2.5px;
|
|
||||||
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;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
border-color: #ff7bac;
|
|
||||||
color: #ff7bac;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: #ff7bac;
|
|
||||||
color: #ff7bac;
|
|
||||||
border: 1 * 2.5px solid #e0e0e6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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>
|
|
||||||
@ -37,10 +37,8 @@ const trimTrailingLetter = (val) => {
|
|||||||
stockQuote.change
|
stockQuote.change
|
||||||
? String(stockQuote.change).includes('-')
|
? String(stockQuote.change).includes('-')
|
||||||
? 'negative-change'
|
? 'negative-change'
|
||||||
: String(stockQuote.change).includes('+')
|
: 'positive-change'
|
||||||
? 'positive-change'
|
|
||||||
: 'neutral-change'
|
: 'neutral-change'
|
||||||
: 'neutral-change'
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ stockQuote.change }}
|
{{ stockQuote.change }}
|
||||||
|
|||||||
@ -38,10 +38,8 @@ const trimTrailingLetter = (val) => {
|
|||||||
stockQuote.change
|
stockQuote.change
|
||||||
? String(stockQuote.change).includes('-')
|
? String(stockQuote.change).includes('-')
|
||||||
? 'negative-change'
|
? 'negative-change'
|
||||||
: String(stockQuote.change).includes('+')
|
: 'positive-change'
|
||||||
? 'positive-change'
|
|
||||||
: 'neutral-change'
|
: 'neutral-change'
|
||||||
: 'neutral-change'
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ stockQuote.change }}
|
{{ stockQuote.change }}
|
||||||
|
|||||||
@ -51,7 +51,7 @@ const trimTrailingLetter = (val) => {
|
|||||||
class="detail-value"
|
class="detail-value"
|
||||||
:class="{
|
:class="{
|
||||||
'text-red': String(stockQuote.change).includes('-'),
|
'text-red': String(stockQuote.change).includes('-'),
|
||||||
'text-green': String(stockQuote.change).includes('+'),
|
'!text-green': !String(stockQuote.change).includes('-'),
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
{{ stockQuote.change }}
|
{{ stockQuote.change }}
|
||||||
|
|||||||
@ -50,7 +50,7 @@ const trimTrailingLetter = (val) => {
|
|||||||
class="detail-value"
|
class="detail-value"
|
||||||
:class="{
|
:class="{
|
||||||
'text-red': String(stockQuote.change).includes('-'),
|
'text-red': String(stockQuote.change).includes('-'),
|
||||||
'text-green': String(stockQuote.change).includes('+'),
|
'!text-green': !String(stockQuote.change).includes('-'),
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
{{ stockQuote.change }}
|
{{ stockQuote.change }}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user