classroom/src/views/homePage/homePage_gyt.vue

<!--
* @FileDescription: 管乐迷首页
* @Author: 黄琪勇
* @Date:2024-03-20 17:26:35
-->
<template>
   <navContainer class="navContainer" :headImg="headImg" :navs="navs">
      <div class="homePage">
         <div class="classTypes">
            <div class="classType" v-for="item in classTypes" :key="item.name" @click="handleRouter(item.url)">
               <img :src="item.img" />
               <div>{{ item.name }}</div>
            </div>
         </div>
         <div class="courseBoard">
            <div class="details">
               <el-empty :image-size="360" :image="require('@/img/layout/empty.png')" description="您还没有待上课程哦～" />
            </div>
         </div>
      </div>
   </navContainer>
</template>

<script setup lang="ts">
import navContainer from "./components/navContainer"
import { useRouter } from "vue-router"
import useDialogConfirm from "@/hooks/useDialogConfirm"

const router = useRouter()

const headImg = {
   img: require("@/img/homePage/home.png")
}
const navs = [
   {
      name: "主页"
   }
]
const classTypes = [
   {
      img: require("@/img/homePage/kb.png"),
      name: "课表",
      url: ""
   },
   {
      img: require("@/img/homePage/xl.png"),
      name: "课后作业",
      url: ""
   },
   {
      img: require("@/img/homePage/jdzc.png"),
      name: "阶段自测",
      url: ""
   },
   {
      img: require("@/img/homePage/xltj.png"),
      name: "练习情况",
      url: ""
   },
   {
      img: require("@/img/homePage/yjl.png"),
      name: "云练习",
      url: ""
   },
   {
      img: require("@/img/homePage/yjc.png"),
      name: "云教材",
      url: "/cloudTextbooks"
   }
]

function handleRouter(url?: string) {
   url
      ? router.push(url)
      : useDialogConfirm({
           headImg: require("@/img/homePage/ts.png"),
           text: "该功能暂未开放，请敬请期待哦～",
           btnShow: [true]
        })
}
</script>

<style lang="scss" scoped>
.navContainer :deep(.navImg > img) {
   top: 72% !important;
}
.homePage {
   width: 100%;
   height: 100%;
   padding: 50px;
   display: flex;
   .classTypes {
      flex-grow: 1;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: -30px;
      margin-left: -30px;
      .classType {
         background: #feffff;
         box-shadow: 0px 2px 14px 0px #f1e3cc;
         border-radius: 34px;
         margin-left: 30px;
         margin-bottom: 30px;
         width: calc(33.33% - 30px);
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         cursor: pointer;
         &:hover {
            opacity: $opacity-hover;
         }
         > div {
            margin-top: 10px;
            font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
            font-weight: bold;
            font-size: 28px;
            color: #393939;
         }
         > img {
            width: 100%;
            max-width: 254px;
         }
      }
   }
   .courseBoard {
      flex-shrink: 0;
      margin-left: 50px;
      margin-top: -35px;
      width: 572px;
      height: calc(100% + 35px);
      background: url("@/img/homePage/bg.png") no-repeat;
      background-size: cover;
      position: relative;
      .details {
         width: 100%;
         position: absolute;
         display: flex;
         justify-content: center;
         align-items: center;
         top: 168px;
      }
   }
}
</style>