Merge pull request 'feat: 代码暂存' (#3) from yk-20250926 into newmain-20250926
Reviewed-on: http://gitea.tools.fontree.cn:3000/scout666/fiee-official-website/pulls/3
This commit is contained in:
commit
55c02afc0d
BIN
src/assets/image/content/bg_27.png
Normal file
BIN
src/assets/image/content/bg_27.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
src/assets/image/content/bg_29.png
Normal file
BIN
src/assets/image/content/bg_29.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
BIN
src/assets/image/content/icon-link.png
Normal file
BIN
src/assets/image/content/icon-link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 615 B |
@ -1,118 +1,161 @@
|
||||
<template>
|
||||
<div class="committees-page">
|
||||
<div class="committees-page relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div class="fixed bottom-0 z-[] bg-[#ffffff]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_27.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
<img
|
||||
src="@/assets/image/content/bg_25.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- 标题区 -->
|
||||
|
||||
<div class="title mb-[50px] text-center">
|
||||
<div class="title w-[900PX] mx-auto pl-[15PX] mb-[50px] text-left">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||
</div>
|
||||
|
||||
<!-- 委员会表格 -->
|
||||
<div class="container">
|
||||
<div class="committees-table">
|
||||
<!-- 表头 - 委员会名称 -->
|
||||
<div class="table-header">
|
||||
<div class="director-cell"></div>
|
||||
<div class="committee-cell">
|
||||
<h3>Audit Committee</h3>
|
||||
</div>
|
||||
<div class="committee-cell">
|
||||
<h3>Compensation Committee</h3>
|
||||
</div>
|
||||
<div class="committee-cell">
|
||||
<h3>Nominating and Corporate Governance Committee</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格内容 - 每位董事 -->
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(director, index) in otherDirectors"
|
||||
:key="index"
|
||||
>
|
||||
<!-- 董事姓名 -->
|
||||
<div class="director-cell">
|
||||
<div class="director-info">
|
||||
<div class="avatar"></div>
|
||||
<div>
|
||||
<router-link
|
||||
:to="'/boarddirectors'"
|
||||
style="font-size: 18px"
|
||||
class="director-link"
|
||||
>
|
||||
{{ director.name }}
|
||||
</router-link>
|
||||
<!-- <p class="director-title">{{ director.title }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 委员会职位 -->
|
||||
<div class="committee-cell">
|
||||
<div class="role-badges">
|
||||
<template v-if="getCommitteeRole(director.name, 'Audit')">
|
||||
<div
|
||||
class="role-badge"
|
||||
:class="{
|
||||
[getCommitteeRole(
|
||||
director.name,
|
||||
'Audit'
|
||||
)?.toLowerCase()]: true,
|
||||
chair: getCommitteeRole(director.name, 'Audit') === 'Chair',
|
||||
}"
|
||||
>
|
||||
{{ getCommitteeRole(director.name, "Audit") }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="committee-cell">
|
||||
<div class="role-badges">
|
||||
<template v-if="getCommitteeRole(director.name, 'Compensation')">
|
||||
<div
|
||||
class="role-badge"
|
||||
:class="{
|
||||
[getCommitteeRole(
|
||||
director.name,
|
||||
'Compensation'
|
||||
)?.toLowerCase()]: true,
|
||||
chair:
|
||||
getCommitteeRole(director.name, 'Compensation') ===
|
||||
'Chair',
|
||||
}"
|
||||
>
|
||||
{{ getCommitteeRole(director.name, "Compensation") }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="committee-cell">
|
||||
<div class="role-badges">
|
||||
<template v-if="getCommitteeRole(director.name, 'Governance')">
|
||||
<div
|
||||
class="role-badge"
|
||||
:class="{
|
||||
[getCommitteeRole(
|
||||
director.name,
|
||||
'Governance'
|
||||
)?.toLowerCase()]: true,
|
||||
chair:
|
||||
getCommitteeRole(director.name, 'Governance') === 'Chair',
|
||||
}"
|
||||
>
|
||||
{{ getCommitteeRole(director.name, "Governance") }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-[900PX] mx-auto overflow-hidden p-[10PX] relative z-99"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
virtual-scroll-y
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
:scrollbar-props="{
|
||||
trigger: 'none',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="jsx">
|
||||
import { NDataTable } from "naive-ui";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "",
|
||||
key: "name",
|
||||
minWidth: 200,
|
||||
fixed: "left",
|
||||
align: "center",
|
||||
className: "name",
|
||||
|
||||
render(row) {
|
||||
return (
|
||||
<router-link
|
||||
to="/boarddirectors"
|
||||
style={{ fontSize: "18px" }}
|
||||
class="director-link text-[#ff7bac] font-bold"
|
||||
>
|
||||
{row.name}
|
||||
</router-link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "auditCommittee",
|
||||
align: "center",
|
||||
minWidth: 200,
|
||||
className: "auditCommittee",
|
||||
title() {
|
||||
return <h3>Audit Committee</h3>;
|
||||
},
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.auditCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title() {
|
||||
return <h3>Compensation Committee</h3>;
|
||||
},
|
||||
align: "center",
|
||||
key: "compensationCommittee",
|
||||
className: "compensationCommittee",
|
||||
minWidth: 200,
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.compensationCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title() {
|
||||
return <h3>Nominating and Corporate Governance Committee</h3>;
|
||||
},
|
||||
key: "governanceCommittee",
|
||||
align: "center",
|
||||
minWidth: 200,
|
||||
className: "governanceCommittee",
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.governanceCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
const data = [
|
||||
{
|
||||
name: "Hu Bin",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "David Natan",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Chan Oi Fat",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const otherDirectors = [
|
||||
// {
|
||||
// name: "Cao Yu",
|
||||
@ -150,31 +193,52 @@ const getCommitteeRole = (name, committee) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
border-bottom-left-radius: 16px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
border-bottom-left-radius: 16px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 紫色主题变量 */
|
||||
.role-badge.chair {
|
||||
color: #00baff;
|
||||
}
|
||||
.title h1 {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
/* 紫色主题变量 */
|
||||
:root {
|
||||
--primary: #895bff;
|
||||
--primary-light: #a07cff;
|
||||
@ -188,7 +252,25 @@ const getCommitteeRole = (name, committee) => {
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.title h1 {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
top: -5px;
|
||||
height: 5px;
|
||||
background: #ff7bac;
|
||||
// border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
/* 标题区设计 */
|
||||
.hero-section {
|
||||
background: linear-gradient(
|
||||
|
||||
@ -1,114 +1,45 @@
|
||||
<template>
|
||||
<div class="committees-page">
|
||||
<div class="committees-page relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div class="fixed bottom-0 z-[] bg-[#ffffff]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_27.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
<img
|
||||
src="@/assets/image/content/bg_25.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- 标题区 -->
|
||||
<div class="title mb-[50px] text-center">
|
||||
<div class="title w-[900PX] mx-auto pl-[15PX] mb-[50px] text-left">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||
</div>
|
||||
<div class="w-[900PX] mx-auto">
|
||||
<n-data-table :columns="columns" :data="data" virtual-scroll-y />
|
||||
</div>
|
||||
|
||||
<!-- 委员会表格 -->
|
||||
<div class="container">
|
||||
<div class="committees-table">
|
||||
<!-- 表头 - 委员会名称 -->
|
||||
<div class="table-header">
|
||||
<div class="director-cell"></div>
|
||||
<div class="committee-cell">
|
||||
<h3>Audit Committee</h3>
|
||||
</div>
|
||||
<div class="committee-cell">
|
||||
<h3>Compensation Committee</h3>
|
||||
</div>
|
||||
<div class="committee-cell">
|
||||
<h3>Nominating and Corporate Governance Committee</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格内容 - 每位董事 -->
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(director, index) in otherDirectors"
|
||||
:key="index"
|
||||
>
|
||||
<!-- 董事姓名 -->
|
||||
<div class="director-cell">
|
||||
<div class="director-info">
|
||||
<div class="avatar"></div>
|
||||
<div>
|
||||
<router-link
|
||||
:to="'/boarddirectors'"
|
||||
style="font-size: 18px"
|
||||
class="director-link"
|
||||
>
|
||||
{{ director.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 委员会职位 -->
|
||||
<div class="committee-cell">
|
||||
<div class="role-badges">
|
||||
<template v-if="getCommitteeRole(director.name, 'Audit')">
|
||||
<div
|
||||
class="role-badge"
|
||||
:class="{
|
||||
[getCommitteeRole(
|
||||
director.name,
|
||||
'Audit'
|
||||
)?.toLowerCase()]: true,
|
||||
chair: getCommitteeRole(director.name, 'Audit') === 'Chair',
|
||||
}"
|
||||
>
|
||||
{{ getCommitteeRole(director.name, "Audit") }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="committee-cell">
|
||||
<div class="role-badges">
|
||||
<template v-if="getCommitteeRole(director.name, 'Compensation')">
|
||||
<div
|
||||
class="role-badge"
|
||||
:class="{
|
||||
[getCommitteeRole(
|
||||
director.name,
|
||||
'Compensation'
|
||||
)?.toLowerCase()]: true,
|
||||
chair:
|
||||
getCommitteeRole(director.name, 'Compensation') ===
|
||||
'Chair',
|
||||
}"
|
||||
>
|
||||
{{ getCommitteeRole(director.name, "Compensation") }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="committee-cell">
|
||||
<div class="role-badges">
|
||||
<template v-if="getCommitteeRole(director.name, 'Governance')">
|
||||
<div
|
||||
class="role-badge"
|
||||
:class="{
|
||||
[getCommitteeRole(
|
||||
director.name,
|
||||
'Governance'
|
||||
)?.toLowerCase()]: true,
|
||||
chair:
|
||||
getCommitteeRole(director.name, 'Governance') === 'Chair',
|
||||
}"
|
||||
>
|
||||
{{ getCommitteeRole(director.name, "Governance") }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-[900PX] mx-auto overflow-hidden p-[10PX] relative z-99"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
virtual-scroll-y
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
:scrollbar-props="{
|
||||
trigger: 'none',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -116,54 +47,115 @@
|
||||
<script setup lang="jsx">
|
||||
import { NDataTable } from "naive-ui";
|
||||
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "",
|
||||
key: "name",
|
||||
minWidth: 200,
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
// title: "Audit Committee",
|
||||
key: "age",
|
||||
minWidth: 200,
|
||||
title(){
|
||||
return <h3>Audit Committee</h3>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title(){
|
||||
return <h3>Compensation Committee</h3>;
|
||||
align: "center",
|
||||
className: "name",
|
||||
|
||||
render(row) {
|
||||
return (
|
||||
<router-link
|
||||
to="/boarddirectors"
|
||||
style={{ fontSize: "18px" }}
|
||||
class="director-link text-[#ff7bac] font-bold"
|
||||
>
|
||||
{row.name}
|
||||
</router-link>
|
||||
);
|
||||
},
|
||||
key: "age",
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
title(){
|
||||
return <h3>Nominating and Corporate Governance Committee</h3>;
|
||||
},
|
||||
key: "age",
|
||||
key: "auditCommittee",
|
||||
align: "center",
|
||||
minWidth: 200,
|
||||
className: "auditCommittee",
|
||||
title() {
|
||||
return <h3>Audit Committee</h3>;
|
||||
},
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.auditCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title() {
|
||||
return <h3>Compensation Committee</h3>;
|
||||
},
|
||||
align: "center",
|
||||
key: "compensationCommittee",
|
||||
className: "compensationCommittee",
|
||||
minWidth: 200,
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.compensationCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title() {
|
||||
return <h3>Nominating and Corporate Governance Committee</h3>;
|
||||
},
|
||||
key: "governanceCommittee",
|
||||
align: "center",
|
||||
minWidth: 200,
|
||||
className: "governanceCommittee",
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.governanceCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
let scrollX = 0;
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Cao Yu",
|
||||
age: 32,
|
||||
address: "London, Park Lane no. 1",
|
||||
name: "Hu Bin",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Cao Yu",
|
||||
age: 32,
|
||||
address: "London, Park Lane no. 1",
|
||||
name: "David Natan",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Chan Oi Fat",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const heightForRow = () => 48;
|
||||
const otherDirectors = [
|
||||
// {
|
||||
// name: "Cao Yu",
|
||||
@ -201,14 +193,46 @@ const getCommitteeRole = (name, committee) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
th {
|
||||
/* background: pink !important; */
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
:deep(.n-data-table-th) {
|
||||
background: #FFF0F5 !important;
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
border-bottom-left-radius: 16px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
border-bottom-left-radius: 16px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 紫色主题变量 */
|
||||
@ -234,13 +258,12 @@ th {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
top: -5px;
|
||||
height: 5px;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
// border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
@ -1,45 +1,455 @@
|
||||
<template>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:max-height="250"
|
||||
virtual-scroll
|
||||
virtual-scroll-x
|
||||
:scroll-x="scrollX"
|
||||
:min-row-height="48"
|
||||
:height-for-row="heightForRow"
|
||||
virtual-scroll-header
|
||||
:header-height="48"
|
||||
/>
|
||||
<div class="committees-page relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div class="fixed bottom-0 z-[] bg-[#ffffff]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_27.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 343px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
<img
|
||||
src="@/assets/image/content/bg_25.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- 标题区 -->
|
||||
<div class="title w-[343PX] mx-auto pl-[15PX] mb-[50px] text-leftPX] mx-auto pl-[15PX] mb-[50px] text-left">
|
||||
<h1 style="font-size: 24px; margin-top: 60px">Committee Composition</h1>
|
||||
</div>
|
||||
<div
|
||||
class="w-[343PX] mx-auto overflow-hidden p-[10PX] relative z-99"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
virtual-scroll-y
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
:scrollbar-props="{
|
||||
trigger: 'none'
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="jsx">
|
||||
import { NDataTable } from "naive-ui";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "",
|
||||
key: "name",
|
||||
minWidth: 100,
|
||||
fixed: "left",
|
||||
align: "center",
|
||||
className: "name",
|
||||
|
||||
const columns = [];
|
||||
render(row) {
|
||||
return (
|
||||
<router-link
|
||||
to="/boarddirectors"
|
||||
style={{ fontSize: "18px" }}
|
||||
class="director-link text-[#ff7bac] font-bold"
|
||||
>
|
||||
{row.name}
|
||||
</router-link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "auditCommittee",
|
||||
align: "center",
|
||||
minWidth: 200,
|
||||
className: "auditCommittee",
|
||||
title() {
|
||||
return <h3>Audit Committee</h3>;
|
||||
},
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.auditCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title() {
|
||||
return <h3>Compensation Committee</h3>;
|
||||
},
|
||||
align: "center",
|
||||
key: "compensationCommittee",
|
||||
className: "compensationCommittee",
|
||||
minWidth: 200,
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.compensationCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title() {
|
||||
return <h3>Nominating and Corporate Governance Committee</h3>;
|
||||
},
|
||||
key: "governanceCommittee",
|
||||
align: "center",
|
||||
minWidth: 200,
|
||||
className: "governanceCommittee",
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.governanceCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
const data = [
|
||||
{
|
||||
name: "Hu Bin",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "David Natan",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Chan Oi Fat",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
let scrollX = 0;
|
||||
const otherDirectors = [
|
||||
// {
|
||||
// name: "Cao Yu",
|
||||
// title: "Chief Financial Officer, Secretary, Treasurer and Director",
|
||||
// },
|
||||
// { name: "David Lazar", title: "Director" },
|
||||
{ name: "Hu Bin", title: "Director" },
|
||||
{ name: "David Natan", title: "Director" },
|
||||
{ name: "Chan Oi Fat", title: "Director" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < 1e3; ++i) {
|
||||
scrollX += 100;
|
||||
columns.push({
|
||||
title: `Col ${i}`,
|
||||
width: 100,
|
||||
key: i,
|
||||
fixed: i <= 1 ? "" : i > 997 ? "" : void 0,
|
||||
render(_, rowIndex) {
|
||||
return `${i}-${rowIndex}`;
|
||||
// Updated committee roles according to requirements
|
||||
const committeeRoles = {
|
||||
"Cao Yu": {},
|
||||
"David Lazar": {},
|
||||
"Hu Bin": {
|
||||
Audit: "Member",
|
||||
Compensation: "Member",
|
||||
Governance: "Member",
|
||||
},
|
||||
"David Natan": {
|
||||
Audit: "Chair",
|
||||
Compensation: "Member",
|
||||
Governance: "Member",
|
||||
},
|
||||
"Chan Oi Fat": {
|
||||
Audit: "Member",
|
||||
Compensation: "Chair",
|
||||
Governance: "Chair",
|
||||
},
|
||||
};
|
||||
|
||||
const getCommitteeRole = (name, committee) => {
|
||||
return committeeRoles[name]?.[committee] || null;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
border-bottom-left-radius: 16px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
border-bottom-left-radius: 16px;
|
||||
}
|
||||
});
|
||||
&:last-child {
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const data = Array.from({ length: 1e3 }).map((_, index) => ({
|
||||
key: index,
|
||||
name: `Edward King ${index}`,
|
||||
age: 32,
|
||||
address: `London, Park Lane no. ${index}`
|
||||
}));
|
||||
/* 紫色主题变量 */
|
||||
.role-badge.chair {
|
||||
color: #00baff;
|
||||
}
|
||||
:root {
|
||||
--primary: #895bff;
|
||||
--primary-light: #a07cff;
|
||||
--primary-dark: #6a11cb;
|
||||
--primary-transparent: rgba(255, 123, 172, 0.1);
|
||||
}
|
||||
|
||||
const heightForRow = () => 48;
|
||||
</script>
|
||||
.committees-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.title h1 {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 60PX;
|
||||
top: -5PX;
|
||||
height: 5PX
|
||||
;
|
||||
background: #ff7bac;
|
||||
// border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
/* 标题区设计 */
|
||||
.hero-section {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-light) 0%,
|
||||
var(--primary) 100%
|
||||
);
|
||||
padding: 6rem 2rem;
|
||||
text-align: center;
|
||||
color: #895bff;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* 表格设计 */
|
||||
.committees-table {
|
||||
margin: 4rem 0;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(255, 123, 172, 0.08);
|
||||
}
|
||||
|
||||
.table-header,
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr repeat(3, 1fr);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: #fff0f6;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.committee-cell {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.committee-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.committee-cell h3 {
|
||||
color: var(--primary-dark);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.director-cell {
|
||||
padding: 1.5rem;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.director-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.director-info h4 {
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.director-title {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 职位徽章设计 */
|
||||
.role-badges {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.badge-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 0.5rem;
|
||||
background: currentColor;
|
||||
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>')
|
||||
no-repeat center;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.table-row {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: #fdfcff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 5px 15px rgba(255, 123, 172, 0.05);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) {
|
||||
.committees-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-header,
|
||||
.table-row {
|
||||
grid-template-columns: 250px repeat(3, 200px);
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.director-info {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.director-cell {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.committee-cell {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
}
|
||||
.director-link {
|
||||
color: #ff7bac;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.director-link:hover {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,71 +1,161 @@
|
||||
<template>
|
||||
<div class="board-members-page">
|
||||
<!-- 页面头部 -->
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||
<div class="committees-page relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div class="fixed bottom-0 z-[] bg-[#ffffff]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_27.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- 移动端视图 -->
|
||||
<div class="container">
|
||||
<div
|
||||
class="director-card"
|
||||
v-for="(director, index) in otherDirectors"
|
||||
:key="director.name"
|
||||
:style="{ '--delay': index * 0.1 + 's' }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="director-info">
|
||||
<div class="avatar">
|
||||
<span class="initials">{{ getInitials(director.name) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<router-link
|
||||
:to="`/boarddirectors/${director.name}`"
|
||||
class="director-name"
|
||||
>
|
||||
{{ director.name }}
|
||||
</router-link>
|
||||
<!-- <p class="director-title">{{ director.title }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="committee-groups">
|
||||
<!-- 委员会职位 -->
|
||||
<div
|
||||
class="committee-group"
|
||||
v-if="getCommittees(director.name).length > 0"
|
||||
>
|
||||
<div class="role-badges">
|
||||
<template
|
||||
v-for="(committee, idx) in getCommittees(director.name)"
|
||||
:key="idx"
|
||||
>
|
||||
<div class="committee-position">
|
||||
<div
|
||||
class="role-badge"
|
||||
:class="
|
||||
getCommitteeRole(director.name, committee).toLowerCase()
|
||||
"
|
||||
>
|
||||
<span>{{ getCommitteeShortName(committee) }}</span>
|
||||
</div>
|
||||
<div style="font-size: 16px" class="role-title">
|
||||
{{ getCommitteeRole(director.name, committee) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 618px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
<img
|
||||
src="@/assets/image/content/bg_25.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- 标题区 -->
|
||||
<div class="title w-[618PX] mx-auto pl-[15PX] mb-[50px] text-left">
|
||||
<h1 style="font-size: 32px; margin-top: 60px">Committee Composition</h1>
|
||||
</div>
|
||||
<div
|
||||
class="w-[618PX] mx-auto overflow-hidden p-[10PX] relative z-99"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
virtual-scroll-y
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
:scrollbar-props="{
|
||||
trigger: 'none'
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
<script setup lang="jsx">
|
||||
import { NDataTable } from "naive-ui";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "",
|
||||
key: "name",
|
||||
minWidth: 200,
|
||||
fixed: "left",
|
||||
align: "center",
|
||||
className: "name",
|
||||
|
||||
render(row) {
|
||||
return (
|
||||
<router-link
|
||||
to="/boarddirectors"
|
||||
style={{ fontSize: "18px" }}
|
||||
class="director-link text-[#ff7bac] font-bold"
|
||||
>
|
||||
{row.name}
|
||||
</router-link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "auditCommittee",
|
||||
align: "center",
|
||||
minWidth: 200,
|
||||
className: "auditCommittee",
|
||||
title() {
|
||||
return <h3>Audit Committee</h3>;
|
||||
},
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.auditCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title() {
|
||||
return <h3>Compensation Committee</h3>;
|
||||
},
|
||||
align: "center",
|
||||
key: "compensationCommittee",
|
||||
className: "compensationCommittee",
|
||||
minWidth: 200,
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.compensationCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title() {
|
||||
return <h3>Nominating and Corporate Governance Committee</h3>;
|
||||
},
|
||||
key: "governanceCommittee",
|
||||
align: "center",
|
||||
minWidth: 200,
|
||||
className: "governanceCommittee",
|
||||
render(row) {
|
||||
return (
|
||||
<div style={{ borderLeft: "1px dashed #E7E7E7" }}>
|
||||
<row.governanceCommittee />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
const data = [
|
||||
{
|
||||
name: "Hu Bin",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "David Natan",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Chan Oi Fat",
|
||||
auditCommittee() {
|
||||
return <div class="text-[#5C6976]">Member</div>;
|
||||
},
|
||||
compensationCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
governanceCommittee() {
|
||||
return <div class="text-[#6CC7DC]">Chair</div>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// 董事会成员数据
|
||||
const otherDirectors = [
|
||||
// {
|
||||
// name: "Cao Yu",
|
||||
@ -77,7 +167,7 @@ const otherDirectors = [
|
||||
{ name: "Chan Oi Fat", title: "Director" },
|
||||
];
|
||||
|
||||
// 委员会角色数据 - 现在包含职位类型 (Chair/Member)
|
||||
// Updated committee roles according to requirements
|
||||
const committeeRoles = {
|
||||
"Cao Yu": {},
|
||||
"David Lazar": {},
|
||||
@ -98,77 +188,69 @@ const committeeRoles = {
|
||||
},
|
||||
};
|
||||
|
||||
// 委员会完整名称
|
||||
const committeeFullNames = {
|
||||
Audit: "Audit Committee",
|
||||
Compensation: "Compensation Committee",
|
||||
Governance: "Nominating and Corporate Governance Committee",
|
||||
};
|
||||
|
||||
// 获取委员会列表
|
||||
const getCommittees = (name) => {
|
||||
return Object.keys(committeeRoles[name] || {});
|
||||
};
|
||||
|
||||
// 获取委员会角色 (Chair/Member)
|
||||
const getCommitteeRole = (name, committee) => {
|
||||
return committeeRoles[name]?.[committee] || "";
|
||||
};
|
||||
|
||||
// 获取委员会简称
|
||||
const getCommitteeShortName = (committee) => {
|
||||
const names = {
|
||||
Audit: "Audit",
|
||||
Compensation: "Comp.",
|
||||
Governance: "Governance",
|
||||
};
|
||||
return names[committee] || committee;
|
||||
};
|
||||
|
||||
// 获取姓名首字母
|
||||
const getInitials = (name) => {
|
||||
return name
|
||||
.split(" ")
|
||||
.map((word) => word[0])
|
||||
.join("")
|
||||
.toUpperCase();
|
||||
return committeeRoles[name]?.[committee] || null;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加这些样式来显示职位类型 */
|
||||
.committee-position {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.role-title {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/* 保持原有的角色徽章样式 */
|
||||
.role-badge {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
border-bottom-left-radius: 16px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
border-bottom-left-radius: 16px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 紫色主题变量 */
|
||||
.role-badge.chair {
|
||||
background-color: #fcecf2;
|
||||
color: #ff7bac;
|
||||
color: #00baff;
|
||||
}
|
||||
:root {
|
||||
--primary: #895bff;
|
||||
--primary-light: #a07cff;
|
||||
--primary-dark: #6a11cb;
|
||||
--primary-transparent: rgba(255, 123, 172, 0.1);
|
||||
}
|
||||
|
||||
.role-badge.member {
|
||||
background-color: #f0f0f0;
|
||||
color: #555;
|
||||
.committees-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.title h1 {
|
||||
position: relative;
|
||||
@ -176,13 +258,13 @@ const getInitials = (name) => {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
width: 60PX;
|
||||
top: -5PX;
|
||||
height: 5PX
|
||||
;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
// border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
@ -190,143 +272,184 @@ const getInitials = (name) => {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
/* 基础变量 */
|
||||
:root {
|
||||
--primary: #895bff;
|
||||
--primary-light: #a07cff;
|
||||
--primary-dark: #6a11cb;
|
||||
--text-primary: #333;
|
||||
--text-secondary: #666;
|
||||
--bg-light: #f9f6ff;
|
||||
--border-radius: 12px;
|
||||
}
|
||||
|
||||
/* 页面样式 */
|
||||
.board-members-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
/* 标题区设计 */
|
||||
.hero-section {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-light) 0%,
|
||||
var(--primary) 100%
|
||||
);
|
||||
padding: 3rem 1rem;
|
||||
padding: 6rem 2rem;
|
||||
text-align: center;
|
||||
color: #895bff;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: clamp(1.75rem, 5vw, 2.25rem);
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
.hero-section h1 {
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: clamp(1rem, 3vw, 1.25rem);
|
||||
.hero-section p {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 董事卡片 */
|
||||
.director-card {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* 表格设计 */
|
||||
.committees-table {
|
||||
margin: 4rem 0;
|
||||
background: white;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 5px 20px rgba(255, 123, 172, 0.08);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
animation-delay: var(--delay);
|
||||
box-shadow: 0 10px 30px rgba(255, 123, 172, 0.08);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
color: #ff7bac;
|
||||
padding: 1.25rem;
|
||||
background: var(--bg-light);
|
||||
.table-header,
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr repeat(3, 1fr);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: #fff0f6;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.committee-cell {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.committee-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.committee-cell h3 {
|
||||
color: var(--primary-dark);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.director-cell {
|
||||
padding: 1.5rem;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.director-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: var(--primary-transparent);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.initials {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.director-name {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
.director-info h4 {
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.director-title {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* 委员会职位 */
|
||||
.committee-groups {
|
||||
padding: 1.25rem;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 职位徽章设计 */
|
||||
.role-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 16px;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
background: rgba(255, 123, 172, 0.08);
|
||||
color: var(--primary);
|
||||
justify-content: center;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.committee-name {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.8;
|
||||
.badge-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 0.5rem;
|
||||
background: currentColor;
|
||||
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>')
|
||||
no-repeat center;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.table-row {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: #fdfcff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 5px 15px rgba(255, 123, 172, 0.05);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) {
|
||||
.committees-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-header,
|
||||
.table-row {
|
||||
grid-template-columns: 250px repeat(3, 200px);
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.director-info {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.director-cell {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.committee-cell {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
}
|
||||
.director-link {
|
||||
color: #ff7bac;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.director-link:hover {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,30 +1,60 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_29.png"
|
||||
class="w-[100vw] h-[445PX]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="financials-container w-[900PX] relative z-99">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
<div class="financials-title text-left font-bold text-[40PX] ml-[20PX]">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title font-bold pl-[20PX] text-[20PX]">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
class="overview-text pl-[20PX] text-[#455363] text-[16PX]"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title font-bold pl-[20PX] text-[20PX]">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="w-[900PX] overflow-auto p-[10PX] bg-[#fff]"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="annualReports"
|
||||
:bordered="false"
|
||||
:scrollbar-props="{
|
||||
trigger: 'none',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="reports-table" v-if="0">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
@ -59,43 +89,70 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="jsx">
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import fileLink from "@/assets/image/content/icon-link.png";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
// title: "File Name",
|
||||
dataIndex: "fileName",
|
||||
key: "fileName",
|
||||
title() {
|
||||
return <div class="font-bold">File Name</div>;
|
||||
},
|
||||
render: (row) => {
|
||||
return (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.fileName}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
// title: "Date",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
title() {
|
||||
return <div class="font-bold">Date</div>;
|
||||
},
|
||||
render: (row) => {
|
||||
return (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.date}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
// title: "view",
|
||||
align: "center",
|
||||
title() {
|
||||
return <div class="font-bold">View</div>;
|
||||
},
|
||||
dataIndex: "download",
|
||||
key: "download",
|
||||
align: "center",
|
||||
render: (row) => {
|
||||
return (
|
||||
<div>
|
||||
<a href={row.downloadUrl} class="download-link">
|
||||
{/* {t("financialinformation.secfilings.annual_reports.view")} */}
|
||||
<img src={fileLink} alt="" class="w-[24PX] h-[24PX]" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const { t } = useI18n();
|
||||
// 年度报告数据
|
||||
const annualReports = 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",
|
||||
},
|
||||
{
|
||||
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",
|
||||
@ -108,48 +165,24 @@ const annualReports = 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",
|
||||
@ -214,36 +247,89 @@ const annualReports = ref([
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #fff8fb !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
// background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.financials-container {
|
||||
max-width: 1200px;
|
||||
// max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding-bottom: 60PX;
|
||||
// padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
// font-size: 40px;
|
||||
// text-align: center;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 60PX
|
||||
;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
.financials-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5PX;
|
||||
bottom: -10px;
|
||||
width: 60PX;
|
||||
height: 5PX;
|
||||
background-color: #FF7BAC;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
// margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 16px;
|
||||
// font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@ -1,30 +1,60 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_29.png"
|
||||
class="w-[100vw] h-[445PX]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="financials-container w-[900PX] relative z-99">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
<div class="financials-title text-left font-bold text-[40PX] ml-[20PX]">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title font-bold pl-[20PX] text-[20PX]">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
class="overview-text pl-[20PX] text-[#455363] text-[16PX]"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title font-bold pl-[20PX] text-[20PX]">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="w-[900PX] overflow-auto p-[10PX] bg-[#fff]"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="annualReports"
|
||||
:bordered="false"
|
||||
:scrollbar-props="{
|
||||
trigger: 'none',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="reports-table" v-if="0">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
@ -59,9 +89,60 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="jsx">
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import fileLink from "@/assets/image/content/icon-link.png";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
// title: "File Name",
|
||||
dataIndex: "fileName",
|
||||
key: "fileName",
|
||||
title() {
|
||||
return <div class="font-bold">File Name</div>;
|
||||
},
|
||||
render: (row) => {
|
||||
return (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.fileName}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
// title: "Date",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
title() {
|
||||
return <div class="font-bold">Date</div>;
|
||||
},
|
||||
render: (row) => {
|
||||
return (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.date}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
// title: "view",
|
||||
align: "center",
|
||||
title() {
|
||||
return <div class="font-bold">View</div>;
|
||||
},
|
||||
dataIndex: "download",
|
||||
key: "download",
|
||||
align: "center",
|
||||
render: (row) => {
|
||||
return (
|
||||
<div>
|
||||
<a href={row.downloadUrl} class="download-link">
|
||||
{/* {t("financialinformation.secfilings.annual_reports.view")} */}
|
||||
<img src={fileLink} alt="" class="w-[24PX] h-[24PX]" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const { t } = useI18n();
|
||||
// 年度报告数据
|
||||
@ -166,37 +247,89 @@ const annualReports = ref([
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #fff8fb !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-image: url("@/assets/image/bg.png");
|
||||
// background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.financials-container {
|
||||
max-width: 1200px;
|
||||
// max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding-bottom: 60PX;
|
||||
// padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
// font-size: 40px;
|
||||
// text-align: center;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 60PX
|
||||
;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
.financials-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5PX;
|
||||
bottom: -10px;
|
||||
width: 60PX;
|
||||
height: 5PX;
|
||||
background-color: #FF7BAC;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
// margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 16px;
|
||||
// font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@ -1,30 +1,60 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 318px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_29.png"
|
||||
class="w-[100vw] h-[445PX]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="financials-container w-[318PX] relative z-99">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
<div class="financials-title text-left font-bold text-[40PX] ml-[20PX]">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title font-bold pl-[20PX] text-[20PX]">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
class="overview-text pl-[20PX] text-[#455363] text-[14PX]"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title font-bold pl-[20PX] text-[20PX]">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="w-[318PX] overflow-auto p-[10PX] bg-[#fff]"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="annualReports"
|
||||
:bordered="false"
|
||||
:scrollbar-props="{
|
||||
trigger: 'none',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="reports-table" v-if="0">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
@ -59,44 +89,73 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="jsx">
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import fileLink from "@/assets/image/content/icon-link.png";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
// title: "File Name",
|
||||
dataIndex: "fileName",
|
||||
key: "fileName",
|
||||
minWidth: 150,
|
||||
title() {
|
||||
return <div class="font-bold">File Name</div>;
|
||||
},
|
||||
render: (row) => {
|
||||
return (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.fileName}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
// title: "Date",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
minWidth: 150,
|
||||
title() {
|
||||
return <div class="font-bold">Date</div>;
|
||||
},
|
||||
render: (row) => {
|
||||
return (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.date}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
// title: "view",
|
||||
align: "center",
|
||||
title() {
|
||||
return <div class="font-bold">View</div>;
|
||||
},
|
||||
dataIndex: "download",
|
||||
key: "download",
|
||||
align: "center",
|
||||
minWidth: 100,
|
||||
render: (row) => {
|
||||
return (
|
||||
<div>
|
||||
<a href={row.downloadUrl} class="download-link">
|
||||
{/* {t("financialinformation.secfilings.annual_reports.view")} */}
|
||||
<img src={fileLink} alt="" class="w-[24PX] h-[24PX]" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// 年度报告数据
|
||||
const annualReports = 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",
|
||||
},
|
||||
{
|
||||
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",
|
||||
@ -109,48 +168,24 @@ const annualReports = 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",
|
||||
@ -215,37 +250,89 @@ const annualReports = ref([
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #fff8fb !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
// background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.financials-container {
|
||||
// max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px;
|
||||
padding-bottom: 60PX;
|
||||
// padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
font-size: 113px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
// font-size: 40px;
|
||||
// text-align: center;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 60PX
|
||||
;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
.financials-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5PX;
|
||||
bottom: -10px;
|
||||
width: 60PX;
|
||||
height: 5PX;
|
||||
background-color: #FF7BAC;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
// margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 92px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 72px;
|
||||
// font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
@ -282,7 +369,7 @@ const annualReports = ref([
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 45px 0;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -293,13 +380,16 @@ const annualReports = ref([
|
||||
}
|
||||
.column {
|
||||
&.file-name {
|
||||
width: 35%;
|
||||
width: 25%;
|
||||
}
|
||||
&.date {
|
||||
width: 35%;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.download {
|
||||
margin-right: 100px;
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -318,7 +408,7 @@ const annualReports = ref([
|
||||
}
|
||||
|
||||
.sec-text {
|
||||
font-size: 72px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@ -331,3 +421,4 @@ const annualReports = ref([
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,30 +1,60 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 618px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_29.png"
|
||||
class="w-[100vw] h-[445PX]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="financials-container w-[618PX] relative z-99">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
<div class="financials-title text-left font-bold text-[40PX] ml-[20PX]">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title font-bold pl-[20PX] text-[20PX]">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
class="overview-text pl-[20PX] text-[#455363] text-[14PX]"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title font-bold pl-[20PX] text-[20PX]">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="w-[618PX] overflow-auto p-[10PX] bg-[#fff]"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="annualReports"
|
||||
:bordered="false"
|
||||
:scrollbar-props="{
|
||||
trigger: 'none',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="reports-table" v-if="0">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
@ -59,43 +89,70 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="jsx">
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import fileLink from "@/assets/image/content/icon-link.png";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
// title: "File Name",
|
||||
dataIndex: "fileName",
|
||||
key: "fileName",
|
||||
title() {
|
||||
return <div class="font-bold">File Name</div>;
|
||||
},
|
||||
render: (row) => {
|
||||
return (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.fileName}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
// title: "Date",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
title() {
|
||||
return <div class="font-bold">Date</div>;
|
||||
},
|
||||
render: (row) => {
|
||||
return (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.date}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
// title: "view",
|
||||
align: "center",
|
||||
title() {
|
||||
return <div class="font-bold">View</div>;
|
||||
},
|
||||
dataIndex: "download",
|
||||
key: "download",
|
||||
align: "center",
|
||||
render: (row) => {
|
||||
return (
|
||||
<div>
|
||||
<a href={row.downloadUrl} class="download-link">
|
||||
{/* {t("financialinformation.secfilings.annual_reports.view")} */}
|
||||
<img src={fileLink} alt="" class="w-[24PX] h-[24PX]" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const { t } = useI18n();
|
||||
// 年度报告数据
|
||||
const annualReports = 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",
|
||||
},
|
||||
{
|
||||
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",
|
||||
@ -108,48 +165,24 @@ const annualReports = 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",
|
||||
@ -214,36 +247,89 @@ const annualReports = ref([
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #fff8fb !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
// background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.financials-container {
|
||||
max-width: calc(100% - 300px);
|
||||
// max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding-bottom: 60PX;
|
||||
// padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
font-size: 85px;
|
||||
text-align: center;
|
||||
// font-size: 40px;
|
||||
// text-align: center;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 60PX
|
||||
;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
.financials-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5PX;
|
||||
bottom: -10px;
|
||||
width: 60PX;
|
||||
height: 5PX;
|
||||
background-color: #FF7BAC;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
// margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 40px;
|
||||
// font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
@ -319,7 +405,7 @@ const annualReports = ref([
|
||||
}
|
||||
|
||||
.sec-text {
|
||||
font-size: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@ -332,3 +418,4 @@ const annualReports = ref([
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,36 +1,56 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="sec-filings-container">
|
||||
<div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_29.png"
|
||||
class="w-[100vw] h-[445PX]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="sec-filings-container relative z-10 !w-[900PX] !p-0 !pb-[60PX]">
|
||||
<!-- 标题 -->
|
||||
<div class="page-title">SEC Filings</div>
|
||||
<div class="page-title ml-[30PX] mt-[50PX]">SEC Filings</div>
|
||||
|
||||
<!-- 筛选器 -->
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<div class="filters flex px-[30PX]">
|
||||
<div class="filter-group flex-1 flex">
|
||||
<label class="filter-label">Filing year</label>
|
||||
<n-select
|
||||
v-model:value="state.selectedYear"
|
||||
:options="state.yearOptions"
|
||||
placeholder="- Any -"
|
||||
style="width: 150px"
|
||||
style="flex: 1"
|
||||
clearable
|
||||
@update:value="handleYearChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-group flex-1 flex">
|
||||
<label class="filter-label">Items per page:</label>
|
||||
<n-select
|
||||
v-model:value="state.pageSize"
|
||||
:options="state.pageSizeOptions"
|
||||
style="width: 150px"
|
||||
style="flex: 1"
|
||||
@update:value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-container">
|
||||
<div
|
||||
class="table-container p-[16PX]"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:loading="state.tableLoading"
|
||||
@ -41,38 +61,40 @@
|
||||
:row-key="(row) => row.idx"
|
||||
@update:sorter="handleSort"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<n-pagination
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
show-quick-jumper
|
||||
:item-count="state.total"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
<template #prev>
|
||||
<span>‹ Previous</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span>Next ›</span>
|
||||
</template>
|
||||
</n-pagination>
|
||||
|
||||
<div class="pagination-info">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<!-- 分页器 -->
|
||||
<div
|
||||
class="pagination-container flex items-center justify-center mt-[15PX]"
|
||||
>
|
||||
<div class="pagination-info text-[#455363] mr-[15PX]">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<n-pagination
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
show-quick-jumper
|
||||
:item-count="state.total"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
<!-- <template #prev>
|
||||
<span>‹ Previous</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span>Next ›</span>
|
||||
</template> -->
|
||||
</n-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, computed, h, onMounted } from "vue";
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { reactive, computed, h, onMounted, render } from "vue";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
@ -82,7 +104,7 @@ const router = useRouter();
|
||||
import pdfFile from "@/assets/image/icon/icon-pdf.png";
|
||||
import wordFile from "@/assets/image/icon/icon-word.png";
|
||||
import excelFile from "@/assets/image/icon/icon-excel.png";
|
||||
import fileLink from "@/assets/image/icon/icon-link.png";
|
||||
import fileLink from "@/assets/image/content/icon-link.png";
|
||||
// 使用 reactive 管理所有状态
|
||||
const state = reactive({
|
||||
selectedYear: null,
|
||||
@ -249,20 +271,25 @@ const columns = [
|
||||
key: "filing_date",
|
||||
sorter: "default",
|
||||
width: 150,
|
||||
render: (row) => (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.filing_date}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Form",
|
||||
key: "form",
|
||||
width: 120,
|
||||
width: 150,
|
||||
align: "left",
|
||||
render: (row) => {
|
||||
return h(
|
||||
"a",
|
||||
"div",
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
color: "#FF7BAC",
|
||||
textDecoration: "none",
|
||||
cursor: "pointer",
|
||||
borderRight: "1px dashed #E7E7E7",
|
||||
},
|
||||
onClick: (e) => {
|
||||
e.preventDefault();
|
||||
@ -287,9 +314,12 @@ const columns = [
|
||||
{
|
||||
title: "Description",
|
||||
key: "description",
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
// ellipsis: {
|
||||
// tooltip: true,
|
||||
// },
|
||||
render: (row) => (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.description}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "View",
|
||||
@ -311,7 +341,7 @@ const columns = [
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
color: "#FF7BAC",
|
||||
textDecoration: "none",
|
||||
fontSize: "12px",
|
||||
},
|
||||
@ -469,27 +499,86 @@ const handleViewDocument = (val, type) => {
|
||||
);
|
||||
};
|
||||
</script>
|
||||
<!-- <style lang="scss">
|
||||
tr {
|
||||
td {
|
||||
&:not(:first-child) {
|
||||
border-left: 1px dashed #0078d7 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #fff8fb !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
// padding: 20px;
|
||||
}
|
||||
|
||||
.sec-filings-container {
|
||||
max-width: 1200px;
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 40px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 60px;
|
||||
top: -10px;
|
||||
height: 4px;
|
||||
background-color: #ff7bac;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
@ -501,47 +590,16 @@ const handleViewDocument = (val, type) => {
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-size: 14PX;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
.n-data-table {
|
||||
--n-th-color: #f5f5f5;
|
||||
--n-th-text-color: #333;
|
||||
--n-td-color: #fff;
|
||||
--n-border-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-th) {
|
||||
background-color: #9e9e9e !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-td) {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
||||
@ -549,31 +607,31 @@ const handleViewDocument = (val, type) => {
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
.n-base-selection {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
// .n-base-selection {
|
||||
// border: 1px solid #ccc;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.n-pagination) {
|
||||
.n-pagination-item {
|
||||
border: 1px solid #ccc;
|
||||
// :deep(.n-pagination) {
|
||||
// .n-pagination-item {
|
||||
// border: 1px solid #ccc;
|
||||
|
||||
&.n-pagination-item--active {
|
||||
background-color: #969696;
|
||||
border-color: #969696;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
// &.n-pagination-item--active {
|
||||
// background-color: #969696;
|
||||
// border-color: #969696;
|
||||
// color: white;
|
||||
// }
|
||||
// }
|
||||
|
||||
.n-pagination-quick-jumper {
|
||||
font-size: 16px;
|
||||
}
|
||||
// .n-pagination-quick-jumper {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
|
||||
.n-pagination-sizes {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
// .n-pagination-sizes {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// }
|
||||
:deep(.n-base-loading__icon) {
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
@ -1,36 +1,56 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="sec-filings-container">
|
||||
<div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_29.png"
|
||||
class="w-[100vw] h-[445PX]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="sec-filings-container relative z-10 !w-[900PX] !p-0 !pb-[60PX]">
|
||||
<!-- 标题 -->
|
||||
<div class="page-title">SEC Filings</div>
|
||||
<div class="page-title ml-[30PX] mt-[50PX]">SEC Filings</div>
|
||||
|
||||
<!-- 筛选器 -->
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<div class="filters flex px-[30PX]">
|
||||
<div class="filter-group flex-1 flex">
|
||||
<label class="filter-label">Filing year</label>
|
||||
<n-select
|
||||
v-model:value="state.selectedYear"
|
||||
:options="state.yearOptions"
|
||||
placeholder="- Any -"
|
||||
style="width: 150px"
|
||||
style="flex: 1"
|
||||
clearable
|
||||
@update:value="handleYearChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-group flex-1 flex">
|
||||
<label class="filter-label">Items per page:</label>
|
||||
<n-select
|
||||
v-model:value="state.pageSize"
|
||||
:options="state.pageSizeOptions"
|
||||
style="width: 150px"
|
||||
style="flex: 1"
|
||||
@update:value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-container">
|
||||
<div
|
||||
class="table-container p-[16PX]"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:loading="state.tableLoading"
|
||||
@ -41,39 +61,40 @@
|
||||
:row-key="(row) => row.idx"
|
||||
@update:sorter="handleSort"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<n-pagination
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
show-quick-jumper
|
||||
:item-count="state.total"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
<template #prev>
|
||||
<span>‹ Previous</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span>Next ›</span>
|
||||
</template>
|
||||
</n-pagination>
|
||||
|
||||
<div class="pagination-info">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<!-- 分页器 -->
|
||||
<div
|
||||
class="pagination-container flex items-center justify-center mt-[15PX]"
|
||||
>
|
||||
<div class="pagination-info text-[#455363] mr-[15PX]">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<n-pagination
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
show-quick-jumper
|
||||
:item-count="state.total"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
<!-- <template #prev>
|
||||
<span>‹ Previous</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span>Next ›</span>
|
||||
</template> -->
|
||||
</n-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, h, onMounted } from "vue";
|
||||
<script setup lang="jsx">
|
||||
import { reactive, computed, h, onMounted, render } from "vue";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
@ -83,7 +104,7 @@ const router = useRouter();
|
||||
import pdfFile from "@/assets/image/icon/icon-pdf.png";
|
||||
import wordFile from "@/assets/image/icon/icon-word.png";
|
||||
import excelFile from "@/assets/image/icon/icon-excel.png";
|
||||
import fileLink from "@/assets/image/icon/icon-link.png";
|
||||
import fileLink from "@/assets/image/content/icon-link.png";
|
||||
// 使用 reactive 管理所有状态
|
||||
const state = reactive({
|
||||
selectedYear: null,
|
||||
@ -250,20 +271,25 @@ const columns = [
|
||||
key: "filing_date",
|
||||
sorter: "default",
|
||||
width: 150,
|
||||
render: (row) => (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.filing_date}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Form",
|
||||
key: "form",
|
||||
width: 120,
|
||||
width: 150,
|
||||
align: "left",
|
||||
render: (row) => {
|
||||
return h(
|
||||
"a",
|
||||
"div",
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
color: "#FF7BAC",
|
||||
textDecoration: "none",
|
||||
cursor: "pointer",
|
||||
borderRight: "1px dashed #E7E7E7",
|
||||
},
|
||||
onClick: (e) => {
|
||||
e.preventDefault();
|
||||
@ -288,9 +314,12 @@ const columns = [
|
||||
{
|
||||
title: "Description",
|
||||
key: "description",
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
// ellipsis: {
|
||||
// tooltip: true,
|
||||
// },
|
||||
render: (row) => (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.description}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "View",
|
||||
@ -312,7 +341,7 @@ const columns = [
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
color: "#FF7BAC",
|
||||
textDecoration: "none",
|
||||
fontSize: "12px",
|
||||
},
|
||||
@ -470,18 +499,67 @@ const handleViewDocument = (val, type) => {
|
||||
);
|
||||
};
|
||||
</script>
|
||||
<!-- <style lang="scss">
|
||||
tr {
|
||||
td {
|
||||
&:not(:first-child) {
|
||||
border-left: 1px dashed #0078d7 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #fff8fb !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
// padding: 20px;
|
||||
}
|
||||
|
||||
.sec-filings-container {
|
||||
max-width: 1200px;
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
}
|
||||
@ -491,6 +569,16 @@ const handleViewDocument = (val, type) => {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 60px;
|
||||
top: -10px;
|
||||
height: 4px;
|
||||
background-color: #ff7bac;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
@ -502,47 +590,16 @@ const handleViewDocument = (val, type) => {
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-size: 14PX;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
.n-data-table {
|
||||
--n-th-color: #f5f5f5;
|
||||
--n-th-text-color: #333;
|
||||
--n-td-color: #fff;
|
||||
--n-border-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-th) {
|
||||
background-color: #9e9e9e !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-td) {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
||||
@ -550,31 +607,31 @@ const handleViewDocument = (val, type) => {
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
.n-base-selection {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
// .n-base-selection {
|
||||
// border: 1px solid #ccc;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.n-pagination) {
|
||||
.n-pagination-item {
|
||||
border: 1px solid #ccc;
|
||||
// :deep(.n-pagination) {
|
||||
// .n-pagination-item {
|
||||
// border: 1px solid #ccc;
|
||||
|
||||
&.n-pagination-item--active {
|
||||
background-color: #969696;
|
||||
border-color: #969696;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
// &.n-pagination-item--active {
|
||||
// background-color: #969696;
|
||||
// border-color: #969696;
|
||||
// color: white;
|
||||
// }
|
||||
// }
|
||||
|
||||
.n-pagination-quick-jumper {
|
||||
font-size: 14px;
|
||||
}
|
||||
// .n-pagination-quick-jumper {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
|
||||
.n-pagination-sizes {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
// .n-pagination-sizes {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// }
|
||||
:deep(.n-base-loading__icon) {
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
@ -1,79 +1,104 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="sec-filings-container">
|
||||
<div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 311px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_29.png"
|
||||
class="w-[100vw] h-[445PX]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="sec-filings-container relative z-10 !w-[311PX] !p-0 !pb-[60PX]">
|
||||
<!-- 标题 -->
|
||||
<div class="page-title">SEC Filings</div>
|
||||
<div class="page-title ml-[30PX] mt-[50PX]">SEC Filings</div>
|
||||
|
||||
<!-- 筛选器 -->
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<div class="filters flex px-[30PX] flex-col">
|
||||
<div class="filter-group flex-1 flex justify-between">
|
||||
<label class="filter-label">Filing year</label>
|
||||
<n-select
|
||||
v-model:value="state.selectedYear"
|
||||
:options="state.yearOptions"
|
||||
placeholder="- Any -"
|
||||
style="width: 150px"
|
||||
style="flex: 1;max-width: 250px;"
|
||||
clearable
|
||||
@update:value="handleYearChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Items per page:</label>
|
||||
<div class="filter-group flex-1 flex justify-between">
|
||||
<label class="filter-label">Items per page</label>
|
||||
<n-select
|
||||
v-model:value="state.pageSize"
|
||||
:options="state.pageSizeOptions"
|
||||
style="width: 150px"
|
||||
style="flex: 1;max-width: 250px;"
|
||||
@update:value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-container">
|
||||
<div
|
||||
class="table-container p-[16PX]"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:loading="state.tableLoading"
|
||||
:data="state.tableData"
|
||||
:pagination="false"
|
||||
:row-key="(row) => row.idx"
|
||||
@update:sorter="handleSort"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
:scroll-x="600"
|
||||
:size="'medium'"
|
||||
:row-key="(row) => row.idx"
|
||||
:scrollbar-props="{
|
||||
trigger: 'none'
|
||||
}"
|
||||
@update:sorter="handleSort"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container mt-[40px]">
|
||||
<n-pagination
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
:item-count="state.total"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
<template #prev>
|
||||
<span>‹</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span> ›</span>
|
||||
</template>
|
||||
</n-pagination>
|
||||
|
||||
<div class="pagination-info mt-[40px]">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<!-- 分页器 -->
|
||||
<div
|
||||
class="w-[300PX] pagination-container flex flex-col items-end justify-center mt-[15PX]"
|
||||
>
|
||||
<n-pagination
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
:item-count="state.total"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
:page-slot="3"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
|
||||
<!-- <template #prev>
|
||||
<span>‹ Previous</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span>Next ›</span>
|
||||
</template> -->
|
||||
</n-pagination>
|
||||
<div class="pagination-info text-[#455363] mr-[15PX] mt-[10PX]">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, h, onMounted } from "vue";
|
||||
<script setup lang="jsx">
|
||||
import { reactive, computed, h, onMounted, render } from "vue";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
@ -83,7 +108,7 @@ const router = useRouter();
|
||||
import pdfFile from "@/assets/image/icon/icon-pdf.png";
|
||||
import wordFile from "@/assets/image/icon/icon-word.png";
|
||||
import excelFile from "@/assets/image/icon/icon-excel.png";
|
||||
import fileLink from "@/assets/image/icon/icon-link.png";
|
||||
import fileLink from "@/assets/image/content/icon-link.png";
|
||||
// 使用 reactive 管理所有状态
|
||||
const state = reactive({
|
||||
selectedYear: null,
|
||||
@ -250,20 +275,25 @@ const columns = [
|
||||
key: "filing_date",
|
||||
sorter: "default",
|
||||
width: 150,
|
||||
render: (row) => (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.filing_date}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Form",
|
||||
key: "form",
|
||||
width: 120,
|
||||
width: 150,
|
||||
align: "left",
|
||||
render: (row) => {
|
||||
return h(
|
||||
"a",
|
||||
"div",
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
color: "#FF7BAC",
|
||||
textDecoration: "none",
|
||||
cursor: "pointer",
|
||||
borderRight: "1px dashed #E7E7E7",
|
||||
},
|
||||
onClick: (e) => {
|
||||
e.preventDefault();
|
||||
@ -288,9 +318,13 @@ const columns = [
|
||||
{
|
||||
title: "Description",
|
||||
key: "description",
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
minWidth: 200,
|
||||
// ellipsis: {
|
||||
// tooltip: true,
|
||||
// },
|
||||
render: (row) => (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.description}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "View",
|
||||
@ -312,7 +346,7 @@ const columns = [
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
color: "#FF7BAC",
|
||||
textDecoration: "none",
|
||||
fontSize: "12px",
|
||||
},
|
||||
@ -470,79 +504,107 @@ const handleViewDocument = (val, type) => {
|
||||
);
|
||||
};
|
||||
</script>
|
||||
<!-- <style lang="scss">
|
||||
tr {
|
||||
td {
|
||||
&:not(:first-child) {
|
||||
border-left: 1px dashed #0078d7 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #fff8fb !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
// padding: 20px;
|
||||
}
|
||||
|
||||
.sec-filings-container {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 80px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 113px;
|
||||
font-size: 24PX;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 60PX;
|
||||
top: -10PX;
|
||||
height: 4PX;
|
||||
background-color: #ff7bac;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 30px;
|
||||
align-items: end;
|
||||
// align-items: end;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
// flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 92px;
|
||||
color: #333;
|
||||
font-size: 14PX;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
.n-data-table {
|
||||
--n-th-color: #f5f5f5;
|
||||
--n-th-text-color: #333;
|
||||
--n-td-color: #fff;
|
||||
--n-border-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; // 添加这行
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 60px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 72px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-th) {
|
||||
background-color: #9e9e9e !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-td) {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
||||
@ -550,31 +612,31 @@ const handleViewDocument = (val, type) => {
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
.n-base-selection {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
// .n-base-selection {
|
||||
// border: 1px solid #ccc;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.n-pagination) {
|
||||
.n-pagination-item {
|
||||
border: 1px solid #ccc;
|
||||
// :deep(.n-pagination) {
|
||||
// .n-pagination-item {
|
||||
// border: 1px solid #ccc;
|
||||
|
||||
&.n-pagination-item--active {
|
||||
background-color: #969696;
|
||||
border-color: #969696;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
// &.n-pagination-item--active {
|
||||
// background-color: #969696;
|
||||
// border-color: #969696;
|
||||
// color: white;
|
||||
// }
|
||||
// }
|
||||
|
||||
.n-pagination-quick-jumper {
|
||||
font-size: 72px;
|
||||
}
|
||||
// .n-pagination-quick-jumper {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
|
||||
.n-pagination-sizes {
|
||||
font-size: 72px;
|
||||
}
|
||||
}
|
||||
// .n-pagination-sizes {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// }
|
||||
:deep(.n-base-loading__icon) {
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
@ -1,36 +1,56 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="sec-filings-container">
|
||||
<div class="page-container relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 618px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="fixed z-[-1] top-[50%] translate-y-[-50%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_29.png"
|
||||
class="w-[100vw] h-[445PX]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="sec-filings-container relative z-10 !w-[618PX] !p-0 !pb-[60PX]">
|
||||
<!-- 标题 -->
|
||||
<div class="page-title">SEC Filings</div>
|
||||
<div class="page-title ml-[30PX] mt-[50PX]">SEC Filings</div>
|
||||
|
||||
<!-- 筛选器 -->
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<div class="filters flex px-[30PX] flex-col">
|
||||
<div class="filter-group flex-1 flex justify-between">
|
||||
<label class="filter-label">Filing year</label>
|
||||
<n-select
|
||||
v-model:value="state.selectedYear"
|
||||
:options="state.yearOptions"
|
||||
placeholder="- Any -"
|
||||
style="width: 150px"
|
||||
style="flex: 1;max-width: 250px;"
|
||||
clearable
|
||||
@update:value="handleYearChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-group flex-1 flex justify-between">
|
||||
<label class="filter-label">Items per page:</label>
|
||||
<n-select
|
||||
v-model:value="state.pageSize"
|
||||
:options="state.pageSizeOptions"
|
||||
style="width: 150px"
|
||||
style="flex: 1;max-width: 250px;"
|
||||
@update:value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-container">
|
||||
<div
|
||||
class="table-container p-[16PX]"
|
||||
style="
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
|
||||
"
|
||||
>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:loading="state.tableLoading"
|
||||
@ -41,40 +61,41 @@
|
||||
:row-key="(row) => row.idx"
|
||||
@update:sorter="handleSort"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<n-pagination
|
||||
class="w-full"
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
show-quick-jumper
|
||||
:item-count="state.total"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
<template #prev>
|
||||
<span>‹ Previous</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span>Next ›</span>
|
||||
</template>
|
||||
</n-pagination>
|
||||
|
||||
<div class="pagination-info w-full mt-[20px]">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<!-- 分页器 -->
|
||||
<div
|
||||
class="pagination-container flex flex-col items-end justify-center mt-[15PX]"
|
||||
>
|
||||
<n-pagination
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
show-quick-jumper
|
||||
:item-count="state.total"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
|
||||
<!-- <template #prev>
|
||||
<span>‹ Previous</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span>Next ›</span>
|
||||
</template> -->
|
||||
</n-pagination>
|
||||
<div class="pagination-info text-[#455363] mr-[15PX] mt-[10PX]">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, h, onMounted } from "vue";
|
||||
<script setup lang="jsx">
|
||||
import { reactive, computed, h, onMounted, render } from "vue";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
@ -84,7 +105,7 @@ const router = useRouter();
|
||||
import pdfFile from "@/assets/image/icon/icon-pdf.png";
|
||||
import wordFile from "@/assets/image/icon/icon-word.png";
|
||||
import excelFile from "@/assets/image/icon/icon-excel.png";
|
||||
import fileLink from "@/assets/image/icon/icon-link.png";
|
||||
import fileLink from "@/assets/image/content/icon-link.png";
|
||||
// 使用 reactive 管理所有状态
|
||||
const state = reactive({
|
||||
selectedYear: null,
|
||||
@ -251,20 +272,25 @@ const columns = [
|
||||
key: "filing_date",
|
||||
sorter: "default",
|
||||
width: 150,
|
||||
render: (row) => (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.filing_date}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Form",
|
||||
key: "form",
|
||||
width: 120,
|
||||
width: 150,
|
||||
align: "left",
|
||||
render: (row) => {
|
||||
return h(
|
||||
"a",
|
||||
"div",
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
color: "#FF7BAC",
|
||||
textDecoration: "none",
|
||||
cursor: "pointer",
|
||||
borderRight: "1px dashed #E7E7E7",
|
||||
},
|
||||
onClick: (e) => {
|
||||
e.preventDefault();
|
||||
@ -289,9 +315,12 @@ const columns = [
|
||||
{
|
||||
title: "Description",
|
||||
key: "description",
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
// ellipsis: {
|
||||
// tooltip: true,
|
||||
// },
|
||||
render: (row) => (
|
||||
<div style={{ borderRight: "1px dashed #E7E7E7" }}>{row.description}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "View",
|
||||
@ -313,7 +342,7 @@ const columns = [
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
color: "#FF7BAC",
|
||||
textDecoration: "none",
|
||||
fontSize: "12px",
|
||||
},
|
||||
@ -471,80 +500,107 @@ const handleViewDocument = (val, type) => {
|
||||
);
|
||||
};
|
||||
</script>
|
||||
<!-- <style lang="scss">
|
||||
tr {
|
||||
td {
|
||||
&:not(:first-child) {
|
||||
border-left: 1px dashed #0078d7 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(
|
||||
.n-data-table
|
||||
.n-data-table-tr:not(.n-data-table-tr--summary):hover
|
||||
> .n-data-table-td
|
||||
) {
|
||||
background-color: #fff8fb !important;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background: #fff0f5 !important;
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
:deep(.n-data-table-thead) {
|
||||
background-color: none;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.n-data-table-tr) {
|
||||
> td {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
// padding: 20px;
|
||||
}
|
||||
|
||||
.sec-filings-container {
|
||||
max-width: calc(100% - 300px);
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 85px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 60PX;
|
||||
top: -10PX;
|
||||
height: 4PX;
|
||||
background-color: #ff7bac;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 30px;
|
||||
align-items: end;
|
||||
// align-items: end;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 50px;
|
||||
color: #333;
|
||||
font-size: 14PX;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
.n-data-table {
|
||||
--n-th-color: #f5f5f5;
|
||||
--n-th-text-color: #333;
|
||||
--n-td-color: #fff;
|
||||
--n-border-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; // 添加这行
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 40px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-th) {
|
||||
background-color: #9e9e9e !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-td) {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
||||
@ -552,31 +608,31 @@ const handleViewDocument = (val, type) => {
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
.n-base-selection {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
// .n-base-selection {
|
||||
// border: 1px solid #ccc;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.n-pagination) {
|
||||
.n-pagination-item {
|
||||
border: 1px solid #ccc;
|
||||
// :deep(.n-pagination) {
|
||||
// .n-pagination-item {
|
||||
// border: 1px solid #ccc;
|
||||
|
||||
&.n-pagination-item--active {
|
||||
background-color: #969696;
|
||||
border-color: #969696;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
// &.n-pagination-item--active {
|
||||
// background-color: #969696;
|
||||
// border-color: #969696;
|
||||
// color: white;
|
||||
// }
|
||||
// }
|
||||
|
||||
.n-pagination-quick-jumper {
|
||||
font-size: 40px;
|
||||
}
|
||||
// .n-pagination-quick-jumper {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
|
||||
.n-pagination-sizes {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
// .n-pagination-sizes {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// }
|
||||
:deep(.n-base-loading__icon) {
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
@ -1,51 +1,48 @@
|
||||
<template>
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="padding: 30px 150px"
|
||||
class="grid grid-cols-1 md:grid-cols-2 gap-8"
|
||||
>
|
||||
<div class="relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div class="fixed bottom-0 z-[] bg-[#ffffff]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_27.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
<img
|
||||
src="@/assets/image/content/bg_25.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="w-[900PX] mx-auto relative z-11">
|
||||
<div class="title mb-[50px] text-center text-left">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
|
||||
></div>
|
||||
<div class="relative p-8 flex flex-col h-full back-line">
|
||||
<div class="flex items-center mb-6 max-h-[3.5rem]">
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
|
||||
>
|
||||
<div
|
||||
class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
class="border-content text-[16PX] pl-[10PX] font-[500]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<h1
|
||||
<div
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
@ -56,7 +53,7 @@
|
||||
class=""
|
||||
>
|
||||
{{ item.title }}
|
||||
</h1>
|
||||
</div>
|
||||
<!-- <text> {{ item.date }}</text> -->
|
||||
</template>
|
||||
<div slot="content">
|
||||
@ -64,21 +61,17 @@
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
target="_blank"
|
||||
style="font-size: 16px; cursor: pointer"
|
||||
<div
|
||||
class="flex items-center pr-[10PX] cursor-pointer"
|
||||
@click="handleViewDocument(item)"
|
||||
>
|
||||
View Document
|
||||
<view class="text-[16PX] text-[#FF7BAC]">View Document</view>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="ml-3 -mr-1 h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke="#FF7BAC"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
@ -87,7 +80,7 @@
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -207,21 +200,32 @@ const handleViewDocument = (item) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.border-content{
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 1PX;
|
||||
height: 20PX;
|
||||
background: #FF7BAC;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.title h1 {
|
||||
position: relative;
|
||||
margin-left: 15PX;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
width: 60PX;
|
||||
height: 5PX;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
@ -252,7 +256,7 @@ const handleViewDocument = (item) => {
|
||||
rgba(255, 123, 172, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0) 50%
|
||||
);
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
@ -1,51 +1,48 @@
|
||||
<template>
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="padding: 30px 150px"
|
||||
class="grid grid-cols-1 md:grid-cols-2 gap-8"
|
||||
>
|
||||
<div class="relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div class="fixed bottom-0 z-[] bg-[#ffffff]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_27.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
<img
|
||||
src="@/assets/image/content/bg_25.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="w-[900PX] mx-auto relative z-11">
|
||||
<div class="title mb-[50px] text-center text-left">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
|
||||
></div>
|
||||
<div class="relative p-8 flex flex-col h-full back-line">
|
||||
<div class="flex items-center mb-6 max-h-[3.5rem]">
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
|
||||
>
|
||||
<div
|
||||
class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
class="border-content text-[16PX] pl-[10PX] font-[500]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<h1
|
||||
<div
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
@ -56,7 +53,7 @@
|
||||
class=""
|
||||
>
|
||||
{{ item.title }}
|
||||
</h1>
|
||||
</div>
|
||||
<!-- <text> {{ item.date }}</text> -->
|
||||
</template>
|
||||
<div slot="content">
|
||||
@ -64,21 +61,17 @@
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
target="_blank"
|
||||
style="font-size: 16px; cursor: pointer"
|
||||
<div
|
||||
class="flex items-center pr-[10PX] cursor-pointer"
|
||||
@click="handleViewDocument(item)"
|
||||
>
|
||||
View Document
|
||||
<view class="text-[16PX] text-[#FF7BAC]">View Document</view>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="ml-3 -mr-1 h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke="#FF7BAC"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
@ -87,7 +80,7 @@
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -207,21 +200,32 @@ const handleViewDocument = (item) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.border-content{
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 1PX;
|
||||
height: 20PX;
|
||||
background: #FF7BAC;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.title h1 {
|
||||
position: relative;
|
||||
margin-left: 15PX;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
width: 60PX;
|
||||
height: 5PX;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
|
||||
@ -1,48 +1,48 @@
|
||||
<template>
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div class="fixed bottom-0 z-[] bg-[#ffffff]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_27.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 327px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
<img
|
||||
src="@/assets/image/content/bg_25.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="w-[327PX] mx-auto relative z-11">
|
||||
<div class="title mb-[50px] text-center text-left">
|
||||
<h1 style="font-size: 24px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
|
||||
></div>
|
||||
<div class="relative p-8 flex flex-col h-full back-line">
|
||||
<div class="flex items-center mb-6 max-h-[3.5rem]">
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
|
||||
>
|
||||
<div
|
||||
class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
class="border-content text-[16PX] pl-[10PX] font-[500]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<n-tooltip
|
||||
trigger="click"
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<h1
|
||||
<div
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
class="text-2xl font-medium text-gray-800"
|
||||
style="
|
||||
font-size: 16px;
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
@ -50,9 +50,10 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class=""
|
||||
>
|
||||
{{ item.title }}
|
||||
</h1>
|
||||
</div>
|
||||
<!-- <text> {{ item.date }}</text> -->
|
||||
</template>
|
||||
<div slot="content">
|
||||
@ -60,21 +61,16 @@
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
target="_blank"
|
||||
style="cursor: pointer"
|
||||
<div
|
||||
class="flex items-center pr-[10PX] cursor-pointer"
|
||||
@click="handleViewDocument(item)"
|
||||
>
|
||||
View Document
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="ml-3 -mr-1 h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke="#FF7BAC"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
@ -83,7 +79,7 @@
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -203,21 +199,32 @@ const handleViewDocument = (item) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.border-content{
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 1PX;
|
||||
height: 20PX;
|
||||
background: #FF7BAC;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.title h1 {
|
||||
position: relative;
|
||||
margin-left: 15PX;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
width: 60PX;
|
||||
height: 5PX;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
@ -229,6 +236,7 @@ const handleViewDocument = (item) => {
|
||||
.governance-icon {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.governance-card:hover .governance-icon {
|
||||
animation: float 2s ease-in-out infinite;
|
||||
box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
|
||||
@ -271,3 +279,4 @@ const handleViewDocument = (item) => {
|
||||
background: linear-gradient(to right, #fff0f6, #ffffff);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,48 +1,48 @@
|
||||
<template>
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="relative overflow-hidden z-[11] bg-[#ffffff]">
|
||||
<div class="fixed bottom-0 z-[] bg-[#ffffff]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_27.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
|
||||
style="width: 618px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
<img
|
||||
src="@/assets/image/content/bg_25.png"
|
||||
class="w-[100vw] h-[611PX] relative"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="w-[618PX] mx-auto relative z-11">
|
||||
<div class="title mb-[50px] text-center text-left">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
|
||||
></div>
|
||||
<div class="relative p-8 flex flex-col h-full back-line">
|
||||
<div class="flex items-center mb-6 max-h-[3.5rem]">
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
|
||||
>
|
||||
<div
|
||||
class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
class="border-content text-[16PX] pl-[10PX] font-[500]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<n-tooltip
|
||||
trigger="click"
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<h1
|
||||
<div
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
class="text-2xl font-medium text-gray-800"
|
||||
style="
|
||||
font-size: 16px;
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
@ -50,9 +50,10 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class=""
|
||||
>
|
||||
{{ item.title }}
|
||||
</h1>
|
||||
</div>
|
||||
<!-- <text> {{ item.date }}</text> -->
|
||||
</template>
|
||||
<div slot="content">
|
||||
@ -60,21 +61,17 @@
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
target="_blank"
|
||||
style="cursor: pointer"
|
||||
<div
|
||||
class="flex items-center pr-[10PX] cursor-pointer"
|
||||
@click="handleViewDocument(item)"
|
||||
>
|
||||
View Document
|
||||
<view class="text-[16PX] text-[#FF7BAC] flex-shrink-0">View Document</view>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="ml-3 -mr-1 h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke="#FF7BAC"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
@ -83,7 +80,7 @@
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -203,21 +200,32 @@ const handleViewDocument = (item) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.border-content{
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 1PX;
|
||||
height: 20PX;
|
||||
background: #FF7BAC;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.title h1 {
|
||||
position: relative;
|
||||
margin-left: 15PX;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
width: 60PX;
|
||||
height: 5PX;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user