GCLS_Page_Learn/src/views/new_task_view/components/layouts/RightSidebar.vue

<template>
  <nav class="right-sidebar">
    <ul class="student-list">
      <li
        v-for="{ student_id, student_name, student_image_url } in studentList"
        :key="student_id"
        :class="['student-list-item', { active: curStudentId === student_id }]"
        @click="getCSItemTaskList(student_id)"
      >
        <el-avatar icon="el-icon-user" :size="32" :src="student_image_url" /> <span>{{ student_name }}</span>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'RightSidebar'
};
</script>

<script setup>
defineProps({
  studentList: {
    type: Array,
    required: true
  },
  curStudentId: {
    type: String,
    required: true
  },
  getCSItemTaskList: {
    type: Function,
    required: true
  }
});
</script>

<style lang="scss" scoped>
.right-sidebar {
  width: 180px;
  background-color: #f7f7f7;
  border-left: 1px solid $border-color;

  .student-list {
    &-item {
      display: flex;
      column-gap: 8px;
      height: 48px;
      padding: 8px;
      line-height: 32px;
      color: #fff;
      cursor: pointer;
      border-radius: 2px;

      &.active {
        background-color: #5498ff;
      }
    }
  }
}
</style>