fiee-official-website/src/views/CommitteeAppointment/size375/index.vue

<template>
  <div class="board-members-page">
    <!-- 页面头部 -->
    <div class="title mb-[50px] text-center">
      <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
      <div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
    </div>
    <!-- 移动端视图 -->
    <div class="container">
      <div
        class="director-card"
        v-for="(director, index) in otherDirectors"
        :key="director.name"
        :style="{ '--delay': index * 0.1 + 's' }"
      >
        <div class="card-header">
          <div class="director-info">
            <div class="avatar">
              <span class="initials">{{ getInitials(director.name) }}</span>
            </div>
            <div>
              <router-link
                :to="`/boarddirectors/${director.name}`"
                class="director-name"
              >
                {{ director.name }}
              </router-link>
              <!-- <p class="director-title">{{ director.title }}</p> -->
            </div>
          </div>
        </div>

        <div class="committee-groups">
          <!-- 委员会职位 -->
          <div
            class="committee-group"
            v-if="getCommittees(director.name).length > 0"
          >
            <div class="role-badges">
              <template
                v-for="(committee, idx) in getCommittees(director.name)"
                :key="idx"
              >
                <div
                  class="role-badge"
                  :class="
                    getCommitteeRole(director.name, committee).toLowerCase()
                  "
                >
                  <span>{{ getCommitteeRole(director.name, committee) }}</span>
                  <span class="committee-name"></span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

// 董事会成员数据
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" },
];

// 委员会角色数据
const committeeRoles = {
  "Cao Yu": {},
  "David Lazar": {},
  "Hu Bin": {
    Compensation: "Audit Committee ",
    Governance: "Compensation Committee",
    Audit: "Nominating Committee",
  },
  "David Natan": {
    Compensation: "Audit Committee ",
    Governance: "Compensation Committee",
    Audit: "Nominating Committee",
  },
  "Chan Oi Fat": {
    Compensation: "Audit Committee ",
    Governance: "Compensation Committee",
    Audit: "Nominating Committee",
  },
};

// 获取委员会列表
const getCommittees = (name) => {
  return Object.keys(committeeRoles[name] || {});
};

// 获取委员会角色
const getCommitteeRole = (name, committee) => {
  return committeeRoles[name]?.[committee] || "";
};

// 获取委员会简称
const getCommitteeShortName = (committee) => {
  const names = {
    Audit: "Audit",
    Compensation: "Comp.",
    Governance: "Governance",
  };
  return names[committee] || committee;
};

// 获取姓名首字母
const getInitials = (name) => {
  return name
    .split(" ")
    .map((word) => word[0])
    .join("")
    .toUpperCase();
};
</script>

<style scoped>
/* 基础变量 */
: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-image: url("@/assets/image/bg-mobile.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.container {
  padding: 0 16px;
  margin: 0 auto;
}

/* 头部样式 */
.hero-section {
  background: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary) 100%
  );
  padding: 3rem 1rem;
  text-align: center;
  color: #895bff;
  margin-bottom: 2rem;
}

.page-title {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.page-subtitle {
  font-size: clamp(1rem, 3vw, 1.25rem);
  opacity: 0.9;
}

/* 董事卡片 */
.director-card {
  background: white;
  border-radius: var(--border-radius);
  margin-bottom: 1.5rem;
  box-shadow: 0 5px 20px rgba(137, 91, 255, 0.08);
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  animation-delay: var(--delay);
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  padding: 1.25rem;
  background: var(--bg-light);
  border-bottom: 1px solid #f0f0f0;
}

.director-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar {
  width: 56px;
  height: 56px;
  background: var(--primary-transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.initials {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--primary);
}

.director-name {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}

.director-title {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* 委员会职位 */
.committee-groups {
  padding: 1.25rem;
}

.role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.role-badge {
  padding: 0.35rem 0.75rem;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(137, 91, 255, 0.08);
  color: var(--primary);
}

.role-badge.chair {
  background: rgba(137, 91, 255, 0.15);
  color: var(--primary-dark);
}

.committee-name {
  font-size: 0.75rem;
  opacity: 0.8;
}
</style>