<script setup lang="ts">
defineProps<{
  students: anyObj[]
}>()
</script>

<template>
  <div class="card">
    <h2>班级同学（共{{ students.length }}人）</h2>
    <div class="card-body">
      <div class="card-body-inner">
        <ul>
          <li v-for="student in students" :key="student.avatar">
            <img :src="student.avatar" :alt="student.name" />
            <span>{{ student.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card {
  height: 308px + 86px;

  + .card {
    margin-top: $space-2_h;
  }

  h2 {
    padding: $space-2_h $space-4;
    border-radius: 1.67vh;
    background: linear-gradient(269deg, #c0c7f7 -35.56%, #ded3fb 25.96%, #e3e3ff 89.99%);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    color: $font-color;
    font-family: $font-special, serif;
    font-size: 3vh;
    font-style: normal;
    font-weight: 400;
    line-height: 4.5vh;
  }
}

.card-body {
  border-radius: $space-2;
  padding: $space-1;

  background: linear-gradient(
    180deg,
    rgba(241, 234, 250, 0.35) 65.43%,
    rgba(241, 241, 250, 0.35) 99.5%
  );
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.card-body-inner {
  border-radius: 1.33vh;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);

  color: #666;
  font-size: 2.33vh;
  font-style: normal;
  font-weight: 400;
  line-height: 3.5vh;

  &:after {
    display: block;
    content: ' ';
    background: url('../../assets/bg-stamp.svg') no-repeat center;
    background-size: cover;
    width: 162px;
    height: 11.17vh;
    position: absolute;
    right: 16px;
    bottom: 1.33vh;
    pointer-events: none;
  }
}

ul {
  height: 24.33vh;
  padding: 0 24px;
  overflow: auto;

  li {
    padding: 1.33vh 0;
    color: $font-color;
    font-family: $font-special, sans-serif;
    font-size: 2.33vh;
    line-height: 3.5vh;

    display: flex;
    align-items: center;
    position: relative;

    + li:after {
      display: block;
      content: ' ';
      height: 0.17vh;
      width: 100%;
      position: absolute;
      top: 0;

      background: repeating-linear-gradient(
        to right,
        #ccc,
        #ccc 10px,
        transparent 10px,
        transparent 20px
      );
    }

    img {
      width: 56px;
      height: 4.67vh;
      border-radius: 50%;
      margin-right: 8px;
      border: 0.08vh solid $font-color;
    }
  }
}
</style>
