CounterFireGames/src/components/about/TeamMember.vue

<template>
  <div class="team-content">
    <div
      v-for="member in teamMembers"
      :key="member.name"
      :class="
        selectedMember === member.name ? 'team-member-active' : 'team-member'
      "
    >
      <div class="name" @click="selectMember(member.name)">
        <div>{{ member.name }}</div>
        <div>{{ member.title }}</div>
      </div>
      <div v-if="selectedMember === member.name" class="gameWeb_aboutP2_deco">
        <img src="@/assets/img/about/gameWeb_aboutP2_deco.png" alt="" />
      </div>
      <transition name="slide-fade">
        <div v-if="selectedMember === member.name" class="details">
          <ul>
            <li v-for="desc in member.description" :key="desc">{{ desc }}</li>
          </ul>
        </div>
      </transition>
    </div>
  </div>
</template>

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

const teamMembers = [
  {
    name: "Michael",
    title: "Founder/CEO",
    description: [
      "Ops Manager in Shanda Group",
      "Co-Founder of Giant Interactive(NYSE:GA)",
      "Founder of FH Capital, investing in ThinkingData, 9IACT, Inke(HK:03700), etc",
      "Founder of Bubble Candy Studio to build Counter Fire",
    ],
  },
  {
    name: "K",
    title: "Cheif Economist",
    description: [
      "Senior Researcher in the Gamefi field",
      "Assisted over 10 Gamefi projects in shaping their tokenomics",
      "Founded a proprietary DAO community, generating over 150,000 words of investment research articles.",
    ],
  },
  {
    name: "SUPER G",
    title: "Producer",
    description: [
      "4 million-player games in Shanda Group",
      "Producer in RobTop Games to build",
      'Geometry Battle Royale" with 20m gamers',
      "Porducer of Counter Fire",
    ],
  },
  {
    name: "Xin",
    title: "CTO",
    description: [
      "Tech Director in Shanda Group",
      "In charge of Legends of the world, The Romance of Legends, etc",
      "Expert in Crypto Tech, developing all decentralized products in Counter Fire",
    ],
  },
];

const selectedMember = ref("Michael");

const selectMember = (name) => {
  if (selectedMember.value === name) {
    selectedMember.value = "";
  } else {
    selectedMember.value = name;
  }
};
</script>

<style lang="scss" scoped>
.team-content {
  display: flex;
  justify-content: space-between;
}

.team-member {
  position: relative;
  width: 372px;
  height: 115px;
  .name {
    cursor: pointer;
    // background-color: #333;
    color: #fff;
    // width: 372px;
    text-align: center;
    padding: 10px;
    border-radius: 0px 30px 0px 0px;
    border: 1px dashed #676a87;
    border-bottom: 2px solid #BB7FFF;
    font-size: 28px;
    font-family: "Poppins";
    font-weight: bold;
    color: #e6e7ff;
    line-height: 34.5px;
  }

  .details {
    position: absolute;
    top: 100%;
    left: 0;
    text-align: left;
    background-color: rgba(11,12,20,0.75);
    // border: 1px solid #ccc;
    width: 100%;
    height: 391px;

    h4 {
      margin-top: 0;
      padding: 10px;
      background-color: #eee;
    }

    ul {
      margin: 0;
      padding: 0 10px;

      li {
        list-style: none;
      }
    }
  }
}

.team-member-active {
  position: relative;
  width: 372px;
  border-radius: 0px 30px 0px 0px;
  background-color: rgba(11,12,20,0.75);
  .gameWeb_aboutP2_deco {
    position: absolute;
    left: 50%; /* 水平居中 */
    bottom: 5px; /* 垂直底部对齐 */
    z-index: 3;
    transform: translateX(-50%); /* 使元素水平居中 */
    img {
      transform: rotate(135deg);
      width: 36px;
      height: 36px;
    }
  }

  .name {
    cursor: pointer;
    //background-color: #333;
    color: #fff;
    // width: 372px;
    text-align: center;
    padding: 10px;
    border-radius: 0px 30px 0px 0px;
    border: none;
    border-bottom: 2px solid #BB7FFF;
    font-size: 28px;
    font-family: "Poppins";
    font-weight: bold;
    line-height: 35px;
  }

  .details {
    position: absolute;
    top: 100%;
    left: 0;
    text-align: left;
    background-color: rgba(11,12,20,0.75);
    // border: 1px solid #ccc;
    border-top: none;
    width: 100%;
    height: 391px;
    padding-top: 0px;
    padding-left: 34px;
    padding-right: 40px;
    font-size: 22px;
    font-family: "Poppins-Regular";
    font-weight: 400;
    color: #f3f0ff;
    // line-height: 40px;
    h4 {
      margin-top: 0;
      padding: 10px;
      background-color: #eee;
    }

    ul {
      margin: 0;
      padding: 0 10px;
      position: relative;

      li {
        list-style: none;
        padding-left: 8px;
      }
    }
  }
}

.details ul li::before {
  content: "-"; 
  position: absolute;
  left: 0px;
  display: inline-block;
  margin-right: 10px; 
  color: #f0f8f8; 
 
}
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: opacity 1s;
}
.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
}
</style>