283 lines
7.1 KiB
Vue
283 lines
7.1 KiB
Vue
<template>
|
|
<div class="relative overflow-hidden z-[11] bg-[#ffffff]">
|
|
<div class="fixed bottom-0 z-[] bg-[#ffffff]">
|
|
<img
|
|
src="@/assets/image/content/bg_27.png"
|
|
class="w-[100vw] h-[611PX] relative"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[0]"
|
|
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
|
>
|
|
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
|
<img
|
|
src="@/assets/image/content/bg_25.png"
|
|
class="w-[100vw] h-[611PX] relative"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="w-[900PX] mx-auto relative z-11">
|
|
<div class="title mb-[50px] text-center text-left">
|
|
<h1 style="font-size: 40px; margin-top: 60px">{{ $t("Governance.TITLE") }}</h1>
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in state.list"
|
|
:key="index"
|
|
class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
|
|
>
|
|
<div
|
|
class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
|
|
>
|
|
<div
|
|
class="border-content text-[16PX] pl-[10PX] font-[500]"
|
|
>
|
|
<n-tooltip
|
|
trigger="hover"
|
|
:disabled="!item.showTooltip"
|
|
width="trigger"
|
|
>
|
|
<template #trigger>
|
|
<div
|
|
:ref="(el) => setTitleRef(el, index)"
|
|
style="
|
|
font-size: 16px;
|
|
word-break: break-word;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
"
|
|
class=""
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
<!-- <text> {{ item.date }}</text> -->
|
|
</template>
|
|
<div slot="content">
|
|
{{ item.title }}
|
|
</div>
|
|
</n-tooltip>
|
|
</div>
|
|
<div
|
|
class="flex items-center pr-[10PX] cursor-pointer"
|
|
@click="handleViewDocument(item)"
|
|
>
|
|
<view class="text-[16PX] text-[#FF7BAC]">View Document</view>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="ml-3 -mr-1 h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="#FF7BAC"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, onMounted, ref, nextTick, watch } from "vue";
|
|
import axios from "axios";
|
|
import { NTooltip } from "naive-ui";
|
|
|
|
import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
|
|
import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
|
|
|
|
import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
|
|
|
|
import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
|
|
|
|
const state = reactive({
|
|
list: [
|
|
// {
|
|
// title: 'AUDIT COMMITTEE CHARTER',
|
|
// description:
|
|
// 'Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.',
|
|
// url: quarterlyPdfone,
|
|
// date: 'May 30, 2025',
|
|
// },
|
|
// {
|
|
// title: 'CODE OF BUSINESS CONDUCT AND ETHICS',
|
|
// description:
|
|
// 'Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.',
|
|
// url: quarterlyPdftwo,
|
|
// date: 'May 30, 2025',
|
|
// },
|
|
// {
|
|
// title: 'COMPENSATION COMMITTEE CHARTER',
|
|
// description:
|
|
// 'Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.',
|
|
// url: quarterlyPdfthree,
|
|
// date: 'May 30, 2025',
|
|
// },
|
|
// {
|
|
// title: 'NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER',
|
|
// description:
|
|
// 'Provides the framework for director nominations and corporate governance matters.',
|
|
// url: quarterlyPdffour,
|
|
// date: 'May 30, 2025',
|
|
// },
|
|
],
|
|
});
|
|
|
|
const titleRefs = ref([]);
|
|
|
|
const setTitleRef = (el, idx) => {
|
|
if (el) titleRefs.value[idx] = el;
|
|
};
|
|
|
|
const checkAllTitleOverflow = () => {
|
|
state.list.forEach((item, idx) => {
|
|
const el = titleRefs.value[idx];
|
|
if (!el) {
|
|
item.showTooltip = false;
|
|
return;
|
|
}
|
|
item.showTooltip =
|
|
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
getGovernanceDisplay();
|
|
nextTick(() => {
|
|
checkAllTitleOverflow();
|
|
});
|
|
});
|
|
|
|
watch(
|
|
() => state.list,
|
|
() => {
|
|
nextTick(() => {
|
|
checkAllTitleOverflow();
|
|
});
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
//获取官网展示文档
|
|
const getGovernanceDisplay = () => {
|
|
// let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
|
|
let url = "https://erpapi.fiee.com/api/fiee/governance/display";
|
|
let params = {};
|
|
axios
|
|
.get(url, { params })
|
|
.then((res) => {
|
|
// console.log(res)
|
|
if (res.status === 200) {
|
|
if (res.data.status === 0) {
|
|
state.list = res.data.data.data || [];
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
// console.log(err)
|
|
});
|
|
};
|
|
|
|
// 查看文档
|
|
const handleViewDocument = (item) => {
|
|
// console.log(item)
|
|
window.open(
|
|
`${import.meta.env.VITE_PAGE_URL}/office?url=${
|
|
item.attachment
|
|
}&attachmentName=${item.attachmentName}`,
|
|
"_blank"
|
|
);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.border-content{
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 0;
|
|
width: 1PX;
|
|
height: 20PX;
|
|
background: #FF7BAC;
|
|
}
|
|
}
|
|
|
|
/* 标题样式 */
|
|
.title h1 {
|
|
position: relative;
|
|
margin-left: 15PX;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
width: 60PX;
|
|
height: 5PX;
|
|
background: #ff7bac;
|
|
}
|
|
|
|
&:hover::after {
|
|
width: 120px;
|
|
}
|
|
}
|
|
|
|
/* 卡片图标动画 */
|
|
.governance-icon {
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
|
|
.governance-card:hover .governance-icon {
|
|
animation: float 2s ease-in-out infinite;
|
|
box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
|
|
}
|
|
|
|
/* 卡片背景渐变效果 */
|
|
.governance-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 123, 172, 0.1) 0%,
|
|
rgba(0, 0, 0, 0) 50%
|
|
);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.governance-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 浮动动画 */
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0px) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-5px) rotate(3deg);
|
|
}
|
|
100% {
|
|
transform: translateY(0px) rotate(0deg);
|
|
}
|
|
}
|
|
.back-line {
|
|
background: linear-gradient(to right, #fff0f6, #ffffff);
|
|
}
|
|
</style>
|