fiee-official-website/src/views/govern/size1920/index.vue

<template>
  <div class="title mb-[50px] text-center">
    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
  </div>

  <div
    style="padding: 30px 150px"
    class="grid grid-cols-1 md:grid-cols-2 gap-8"
  >
    <div
      v-for="(item, index) in state.list"
      :key="index"
      class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
    >
      <div
        class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
      ></div>
      <div class="relative p-8 flex flex-col h-full">
        <div class="flex items-start mb-6">
          <div
            class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
          >
            <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>
            <h1 style="font-size: 18px" class="">
              {{ item.title }}
            </h1>
            <!-- <text> {{ item.date }}</text> -->
          </div>
        </div>
        <div class="mt-auto">
          <a
            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
            target="_blank"
            style="font-size: 16px; cursor: pointer;"
            @click="handleViewDocument(item)"
          >
            View Document
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ml-3 -mr-1 h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 5l7 7-7 7"
              />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import axios from 'axios'

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',
    // },
  ],
})

onMounted(() => {
  getGovernanceDisplay()
})

//获取官网展示文档
const getGovernanceDisplay = () => {
  // let url = 'https://common.szjixun.cn/api/fiee/governance/display'
  let url = 'http://172.16.100.93:9020/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">
/* 标题样式 */
.title h1 {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: #895bff;
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  &: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(137, 91, 255, 0.3) !important;
}

/* 卡片背景渐变效果 */
.governance-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(137, 91, 255, 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);
  }
}
</style>