<template>
  <div :class="isShowList == false ? 'notEvaBox' : 'tEvaBox'">
    <div class="top">
      <div @click="isShowList = !isShowList">
        <img src="../../../assets/icon/englishVoice/all.png" alt="" />
      </div>
      <div>提交列表( {{ numList }} )</div>
    </div>
    <div class="studentList">
      <div
        v-for="(item, index) in studentList"
        :key="index"
        :class="sid == item.id ? 'isSItem' : 'sItem'"
        @click="sid = item.id"
      >
        <div class="tx">
          <img
            :src="require('../../../assets/icon/englishVoice/icon_portal.png')"
            alt=""
          />
        </div>
        <!-- <div class="tx"><img :src="item.tx" alt="" /></div> 后面数据直接传头像就行 -->
        <div class="sMessage">
          <div>{{ item.name }}</div>
          <div>{{ item.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowList: true,
      numList: 13,
      studentList: [
        {
          id: "0",
          tx: "",
          name: "李二妞",
          time: "2024-04-01 23:59",
        },
        {
          id: "1",
          tx: "",
          name: "王麻子",
          time: "2024-04-01 23:59",
        },
        {
          id: "2",
          tx: "",
          name: "陈陈子",
          time: "2024-04-01 23:59",
        },
        {
          id: "3",
          tx: "",
          name: "陈陈子",
          time: "2024-04-01 23:59",
        },
        {
          id: "4",
          tx: "",
          name: "陈陈子",
          time: "2024-04-01 23:59",
        },
        {
          id: "5",
          tx: "",
          name: "陈陈子",
          time: "2024-04-01 23:59",
        },
      ], //学生列表
      sid: "",
    };
  },
};
</script>

<style scoped>
.tEvaBox,
.notEvaBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.notEvaBox {
  height: 25px;
  overflow: hidden;
}
.tEvaBox > div,
.notEvaBox > div {
  margin: 0 0 10px 0;
}
.tEvaBox > .top,
.notEvaBox > .top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.top > div:first-child {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  cursor: pointer;
}

.top > div:first-child > img {
  width: 100%;
  height: 100%;
}

.studentList {
  width: 100%;
  height: 340px;
  overflow: auto;
}

.sItem,
.isSItem {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 95%;
  height: 70px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  cursor: pointer;
}

.studentList > div:not(:last-child) {
  margin: 0 0 10px 0;
}

.isSItem {
  background: #e0eafb;
  border: 1px solid #69a0fb;
  box-sizing: border-box;
}

.sItem > .tx,
.isSItem > .tx {
  width: 50px;
  height: 50px;
}

.sItem > .tx > img,
.isSItem > .tx > img {
  width: 100%;
  height: 100%;
}

.sMessage {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin: 0 0 0 10px;
  height: 100%;
  justify-content: space-between;
}

.sMessage > div:last-child {
  font-size: 12px;
  color: #757a83;
}
</style>