<template>
  <div class="student">
    <!-- 标题区域 -->
    <div class="title"></div>

    <!-- 主体内容区域 -->
    <div class="content">
      <StudentLeft />
      <StudentCenter />
      <StudentRight />
    </div>

    <!-- 关闭按钮区域 -->
    <div class="close" @click="handleClose">×</div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import StudentLeft from "@/components/student/studentLeft.vue";
import StudentCenter from "@/components/student/studentCenter.vue";
import StudentRight from "@/components/student/studentRight.vue";

const router = useRouter();

// 点击关闭按钮回调
const handleClose = () => {
  router.push("user");
};
</script>

<style lang="scss" scoped>
.student {
  z-index: 2;
  position: relative;
  margin-top: 39px;
  margin-left: 17px;
  padding: 22px 38px 33px 27px;
  width: 1887px;
  height: 942px;
  background-color: rgba(2, 27, 41, 0.9);

  .title {
    width: 1823px;
    height: 32px;
    background-image: url(@/assets/images/student-title-bg.png);
    background-size: 100% 100%;
  }

  .content {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    height: 834px;
  }

  .close {
    position: absolute;
    top: 18px;
    right: 38px;
    width: 24px;
    height: 24px;
    line-height: 18px;
    text-align: center;
    color: #a6a6a6;
    font-size: 25px;
    border-radius: 2px;
    border: 1px solid #a6a6a6;
    cursor: pointer;
  }
}
</style>
