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
            :href="item.url"
            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"
          >
            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 } from "vue";
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",
    },
  ],
});
</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>