Compare commits
2 Commits
df01e9b81b
...
7187503fcf
Author | SHA1 | Date | |
---|---|---|---|
|
7187503fcf | ||
|
a3209aa170 |
Before Width: | Height: | Size: 590 KiB After Width: | Height: | Size: 590 KiB |
Before Width: | Height: | Size: 712 KiB After Width: | Height: | Size: 712 KiB |
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 712 KiB After Width: | Height: | Size: 712 KiB |
Before Width: | Height: | Size: 296 KiB After Width: | Height: | Size: 296 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 412 KiB After Width: | Height: | Size: 412 KiB |
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
Before Width: | Height: | Size: 8.0 MiB After Width: | Height: | Size: 8.0 MiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 40 KiB |
@ -30,31 +30,31 @@ const routes = [
|
||||
{
|
||||
path: "/stock-quote",
|
||||
name: "stock-quote",
|
||||
meta: { bg:'url("@/assets/image/bg-stock-quote.png")' },
|
||||
meta: { bg:'url("@/assets/image/1920/bg-stock-quote.png")' },
|
||||
component: () => import("@/views/stock-quote/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/historic-stock",
|
||||
name: "historic-stock",
|
||||
meta: { bg: 'url("@/assets/image/bg-events-calendar.png")' },
|
||||
meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
|
||||
component: () => import("@/views/historic-stock/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/contacts",
|
||||
name: "contacts",
|
||||
meta: { bg: 'url("@/assets/image/bg-contacts.png")' },
|
||||
meta: { bg: 'url("@/assets/image/1920/bg-contacts.png")' },
|
||||
component: () => import("@/views/contacts/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/email-alerts",
|
||||
name: "email-alerts",
|
||||
meta: { bg: 'url("@/assets/image/bg-contacts.png")' },
|
||||
meta: { bg: 'url("@/assets/image/1920/bg-contacts.png")' },
|
||||
component: () => import("@/views/email-alerts/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/quarterlyreports",
|
||||
name: "quarterlyreports",
|
||||
meta: { bg: 'url("@/assets/image/bg-events-calendar.png")' },
|
||||
meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
|
||||
component: () =>
|
||||
import("@/views/financialinformation/quarterlyreports/index.vue"),
|
||||
},
|
||||
@ -73,26 +73,26 @@ const routes = [
|
||||
{
|
||||
path: "/annualreports",
|
||||
name: "AnnualReports",
|
||||
meta: { bg: 'url("@/assets/image/bg-events-calendar.png")' },
|
||||
meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
|
||||
component: () =>
|
||||
import("@/views/financialinformation/annualreports/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/press-releases",
|
||||
name: "press-releases",
|
||||
meta: { bg: 'url("@/assets/image/bg-events-calendar.png")' },
|
||||
meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
|
||||
component: () => import("@/views/press-releases/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/news",
|
||||
name: "news",
|
||||
meta: { bg: 'url("@/assets/image/bg-news.png")' },
|
||||
meta: { bg: 'url("@/assets/image/1920/bg-news.png")' },
|
||||
component: () => import("@/views/news/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/events-calendar",
|
||||
name: "events-calendar",
|
||||
meta: { bg: 'url("@/assets/image/bg-events-calendar.png")' },
|
||||
meta: { bg: 'url("@/assets/image/1920/bg-events-calendar.png")' },
|
||||
component: () => import("@/views/events-calendar/index.vue"),
|
||||
},
|
||||
{
|
||||
|
@ -69,7 +69,7 @@ function copyEmail() {
|
||||
gap: 4px;
|
||||
background-color: white;
|
||||
border-radius: 1rem;
|
||||
background-image: url("@/assets/image/contacts-bg.png");
|
||||
background-image: url("@/assets/image/1920/contacts-bg.png");
|
||||
background-size: 64% auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
@ -240,7 +240,7 @@ async function handleSubmit(e) {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("@/assets/image/email-alerts-submit.png");
|
||||
background-image: url("@/assets/image/1920/email-alerts-submit.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-size: 100%;
|
||||
|
@ -79,7 +79,7 @@
|
||||
<!-- 背景图片区域 -->
|
||||
<div class="background-image-container">
|
||||
<img
|
||||
src="@/assets/image/events-calendar-bg.png"
|
||||
src="@/assets/image/1920/events-calendar-bg.png"
|
||||
alt="Events Calendar Background"
|
||||
class="background-image"
|
||||
/>
|
||||
|
@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
@ -37,7 +34,7 @@
|
||||
<div class="column date">
|
||||
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||
</div>
|
||||
<div class="column download">view</div>
|
||||
<div class="column download"></div>
|
||||
</div>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
@ -50,158 +47,31 @@
|
||||
<div class="column file-name">{{ report.fileName }}</div>
|
||||
<div class="column date">{{ report.date }}</div>
|
||||
<div class="column download">
|
||||
<a :href="report.downloadUrl" class="download-link">
|
||||
<img src="/src/assets/image/icon-link-svg.svg" alt="View" />
|
||||
</a>
|
||||
<a :href="report.downloadUrl" class="download-link">{{
|
||||
t("financialinformation.secfilings.annual_reports.view")
|
||||
}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-info">
|
||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<div class="pagination-controls">
|
||||
<div class="pagination-buttons">
|
||||
<button
|
||||
class="page-btn prev-btn"
|
||||
:disabled="state.currentPage === 1"
|
||||
@click="goToPrevPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M4 1L1 4.5L4 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- 动态生成页码按钮 -->
|
||||
<template v-for="page in getVisiblePages()" :key="page">
|
||||
<button
|
||||
v-if="page !== '...'"
|
||||
class="page-btn"
|
||||
:class="{ active: page === state.currentPage }"
|
||||
@click="goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button v-else class="page-btn disabled" disabled>...</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
class="page-btn next-btn"
|
||||
:disabled="state.currentPage === totalPages"
|
||||
@click="goToNextPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M1 1L4 4.5L1 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-size-selector" @click="togglePageSizeMenu">
|
||||
<span>{{ state.pageSize }}/page</span>
|
||||
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
|
||||
<path
|
||||
d="M1 1L5 4L9 1"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<!-- 页面大小选择菜单 -->
|
||||
<div v-if="showPageSizeMenu" class="page-size-menu">
|
||||
<div
|
||||
v-for="size in [10, 20, 50]"
|
||||
:key="size"
|
||||
class="page-size-option"
|
||||
:class="{ active: state.pageSize === size }"
|
||||
@click="changePageSize(size)"
|
||||
>
|
||||
{{ size }}/page
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goto-section">
|
||||
<span>Goto</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="state.gotoPage"
|
||||
class="goto-input"
|
||||
:min="1"
|
||||
:max="totalPages"
|
||||
@keyup.enter="handleGoto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// 分页状态
|
||||
const state = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
gotoPage: 1,
|
||||
});
|
||||
|
||||
// 页面大小选择菜单显示状态
|
||||
const showPageSizeMenu = ref(false);
|
||||
|
||||
// 年度报告数据
|
||||
const allAnnualReports = ref([
|
||||
{
|
||||
fileName: "2024 Annual Report Amendment No.2",
|
||||
date: "August 20, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625006571/fieeinc_10ka.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2024 Annual Report Amendment No.1",
|
||||
date: "April 30, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625003214/fieeinc_10ka.htm",
|
||||
},
|
||||
const annualReports = ref([
|
||||
{
|
||||
fileName: "2024 Annual Report",
|
||||
date: "April 10, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report Amendment",
|
||||
date: "July 28, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625005429/fieeinc_10ka.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report Amendment No.1",
|
||||
date: "April 29, 2024",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002836/miniminc_10ka.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report",
|
||||
date: "April 12, 2024",
|
||||
@ -214,48 +84,24 @@ const allAnnualReports = ref([
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2021 Annual Report Amendment No.1",
|
||||
date: "August 19, 2022",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222023610/form10ka.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2021 Annual Report",
|
||||
date: "March 31, 2022",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2020 Annual Report Amendment No.1",
|
||||
date: "April 29, 2021",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000114036121015017/brhc10023805_10ka.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2020 Annual Report",
|
||||
date: "April 13, 2021",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2019 Annual Report Amendment No.1",
|
||||
date: " April 29, 2020",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004635/zmtp_10ka.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2019 Annual Report",
|
||||
date: "April 15, 2020",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2018 Annual Report Amendment No.1",
|
||||
date: "April 30, 2019",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419005031/zmtp_10ka.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2018 Annual Report",
|
||||
date: "April 1, 2019",
|
||||
@ -317,199 +163,43 @@ const allAnnualReports = ref([
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||
},
|
||||
]);
|
||||
|
||||
// 初始化总数
|
||||
state.total = allAnnualReports.value.length;
|
||||
|
||||
// 计算当前页显示的数据
|
||||
const annualReports = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize;
|
||||
const end = start + state.pageSize;
|
||||
return allAnnualReports.value.slice(start, end);
|
||||
});
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(state.total / state.pageSize);
|
||||
});
|
||||
|
||||
// 计算显示范围
|
||||
const displayRange = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize + 1;
|
||||
const end = Math.min(state.currentPage * state.pageSize, state.total);
|
||||
return { start, end };
|
||||
});
|
||||
|
||||
// 分页方法
|
||||
const goToPage = (page) => {
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
state.currentPage = page;
|
||||
}
|
||||
};
|
||||
|
||||
const goToPrevPage = () => {
|
||||
if (state.currentPage > 1) {
|
||||
state.currentPage--;
|
||||
}
|
||||
};
|
||||
|
||||
const goToNextPage = () => {
|
||||
if (state.currentPage < totalPages.value) {
|
||||
state.currentPage++;
|
||||
}
|
||||
};
|
||||
|
||||
const changePageSize = (size) => {
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
const handleGoto = () => {
|
||||
const page = parseInt(state.gotoPage);
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
state.currentPage = page;
|
||||
}
|
||||
};
|
||||
|
||||
// 切换页面大小选择菜单
|
||||
const togglePageSizeMenu = () => {
|
||||
showPageSizeMenu.value = !showPageSizeMenu.value;
|
||||
};
|
||||
|
||||
// 获取可见的页码数组
|
||||
const getVisiblePages = () => {
|
||||
const current = state.currentPage;
|
||||
const total = totalPages.value;
|
||||
const pages = [];
|
||||
|
||||
if (total <= 7) {
|
||||
// 如果总页数小于等于7,显示所有页码
|
||||
for (let i = 1; i <= total; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
// 显示第一页
|
||||
pages.push(1);
|
||||
|
||||
if (current <= 4) {
|
||||
// 当前页在前4页
|
||||
for (let i = 2; i <= 5; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push("...");
|
||||
pages.push(total);
|
||||
} else if (current >= total - 3) {
|
||||
// 当前页在后4页
|
||||
pages.push("...");
|
||||
for (let i = total - 4; i <= total; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
// 当前页在中间
|
||||
pages.push("...");
|
||||
for (let i = current - 1; i <= current + 1; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push("...");
|
||||
pages.push(total);
|
||||
}
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
// 监听页面大小变化
|
||||
watch(
|
||||
() => state.pageSize,
|
||||
() => {
|
||||
state.currentPage = 1;
|
||||
}
|
||||
);
|
||||
|
||||
// 监听当前页变化,更新goto输入框
|
||||
watch(
|
||||
() => state.currentPage,
|
||||
(newPage) => {
|
||||
state.gotoPage = newPage;
|
||||
}
|
||||
);
|
||||
|
||||
// 点击外部关闭页面大小选择菜单
|
||||
const handleClickOutside = (event) => {
|
||||
if (!event.target.closest(".page-size-selector")) {
|
||||
showPageSizeMenu.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 添加和移除事件监听器
|
||||
onMounted(() => {
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("click", handleClickOutside);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.financials-container {
|
||||
max-width: 932px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
width: 58px;
|
||||
height: 7px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 43px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 40px;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: 3%;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 1.333em;
|
||||
letter-spacing: 5%;
|
||||
color: #000000;
|
||||
margin-bottom: 12px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 3%;
|
||||
color: #455363;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
@ -530,88 +220,40 @@ onUnmounted(() => {
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
||||
padding: 16px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
background: #fff0f5;
|
||||
border-radius: 8px;
|
||||
padding: 16px 0;
|
||||
margin-bottom: 4px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.column {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 3%;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 16px 0;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
&:hover {
|
||||
background: #fff8fb;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
// max-height: 600px;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
|
||||
.column {
|
||||
&.file-name {
|
||||
width: 420px;
|
||||
padding: 4px 16px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 3%;
|
||||
color: #455363;
|
||||
text-align: left;
|
||||
width: 25%;
|
||||
}
|
||||
&.date {
|
||||
flex: 1;
|
||||
padding: 4px 16px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 3%;
|
||||
color: #455363;
|
||||
text-align: left;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.download {
|
||||
width: 152px;
|
||||
padding: 4px 16px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -621,22 +263,11 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.download-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 23px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
color: #0078d7;
|
||||
text-decoration: none;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #fff8fb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@ -653,159 +284,4 @@ onUnmounted(() => {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页器样式
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
gap: 21px;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.4375em;
|
||||
color: #455363;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid #e0e0e6;
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: #ff7bac;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #ff7bac;
|
||||
color: #ff7bac;
|
||||
background: #fff0f5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.page-size-selector {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 4px 12px;
|
||||
height: 28px;
|
||||
border: 1px solid #e0e0e6;
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: #ff7bac;
|
||||
}
|
||||
}
|
||||
|
||||
.page-size-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e0e0e6;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.page-size-option {
|
||||
padding: 8px 12px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #fff0f5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fff0f5;
|
||||
color: #ff7bac;
|
||||
}
|
||||
}
|
||||
|
||||
.goto-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
width: 60px;
|
||||
height: 28px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #e0e0e6;
|
||||
border-radius: 3px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #ff7bac;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -20,7 +20,7 @@ function resolveAssetUrl(possiblePath) {
|
||||
}
|
||||
}
|
||||
|
||||
const defaultBgUrl = resolveAssetUrl("@/assets/image/bg-pc.png");
|
||||
const defaultBgUrl = resolveAssetUrl("@/assets/image/1920/bg-pc.png");
|
||||
|
||||
const currentBg = computed(() => {
|
||||
// 支持三种:
|
||||
|
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/product-introduction-img2.png"
|
||||
src="@/assets/image/1920/product-introduction-img2.png"
|
||||
alt="background"
|
||||
class="hero-bg-img"
|
||||
/>
|
||||
@ -109,7 +109,7 @@
|
||||
<div class="solutions-list">
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-icon1.png"
|
||||
src="@/assets/image/1920/product-introduction-icon1.png"
|
||||
alt="KOL Brand Promotion"
|
||||
class="solution-icon"
|
||||
/>
|
||||
@ -125,7 +125,7 @@
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-icon2.png"
|
||||
src="@/assets/image/1920/product-introduction-icon2.png"
|
||||
alt="Content Creation Support"
|
||||
class="solution-icon"
|
||||
/>
|
||||
@ -141,7 +141,7 @@
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-icon3.png"
|
||||
src="@/assets/image/1920/product-introduction-icon3.png"
|
||||
alt="Account Operation"
|
||||
class="solution-icon"
|
||||
/>
|
||||
@ -158,7 +158,7 @@
|
||||
</div>
|
||||
<div class="solution-image-container">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-img1.png"
|
||||
src="@/assets/image/1920/product-introduction-img1.png"
|
||||
alt="Value Added Solutions"
|
||||
class="solution-image"
|
||||
/>
|
||||
@ -228,7 +228,7 @@
|
||||
|
||||
<section class="cta-section">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-img5.png"
|
||||
src="@/assets/image/1920/product-introduction-img5.png"
|
||||
alt="background"
|
||||
class="cta-bg-img"
|
||||
/>
|
||||
@ -253,7 +253,7 @@
|
||||
</div>
|
||||
<div class="cta-qr-code">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-img6.png"
|
||||
src="@/assets/image/1920/product-introduction-img6.png"
|
||||
alt="QR Code"
|
||||
/>
|
||||
</div>
|
||||
@ -274,7 +274,7 @@
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-image: url("@/assets/image/product-introduction-img3.png");
|
||||
background-image: url("@/assets/image/1920/product-introduction-img3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: top;
|
||||
@ -445,7 +445,7 @@
|
||||
.advantages-section {
|
||||
margin-top: 80px;
|
||||
padding: 80px 0;
|
||||
background-image: url("@/assets/image/product-introduction-img4.png");
|
||||
background-image: url("@/assets/image/1920/product-introduction-img4.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
|