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