云教材页面加弹窗

src/api/cloudTextbooks.api.ts

@@ -14,7 +14,7 @@ export const queryLessonCourseware_gym = () => {
 }
 
 // 课程详情列表
-export const getLessonCoursewareCourseList_gym = (id: string) => {
+export const getLessonCoursewareCourseList_gym = (id: number) => {
    return httpAxios_gym.axioseRquest({
       method: "get",
       url: "/api-teacher/lessonCourseware/getLessonCoursewareCourseList/" + id

src/assets/elementTheme.scss

@@ -1,15 +1,15 @@
 /* 修改主题的时候  去掉registerComponents.ts文件里面的全局导入*/
-// @forward "element-plus/theme-chalk/src/common/var.scss" with (
-//    $colors: (
-//       "primary": (
-//          "base": #c22f36
-//       )
-//    ),
-//    // $text-color: (
-//    //    "regular": red
-//    // )
-// );
-// @use "element-plus/theme-chalk/src/index.scss" as *;
+@forward "element-plus/theme-chalk/src/common/var.scss" with (
+   $colors: (
+      "primary": (
+         "base": #f5c42d
+      )
+   ),
+   // $text-color: (
+   //    "regular": red
+   // )
+);
+@use "element-plus/theme-chalk/src/index.scss" as *;
 
 /* 普通模式 */
 // :root {}
@@ -19,3 +19,9 @@
 .el-table .el-table__header thead th {
    background-color: var(--el-bg-color-page);
 }
+
+.el-empty .el-empty__description p {
+   font-weight: 400;
+   font-size: 22px;
+   color: #aaaaaa;
+}

src/components/dictionary/dictionary.vue

@@ -14,6 +14,7 @@
       :options="props.options"
       :props="propsOpt"
       :clearable="props.clearable"
+      :placeholder="placeholder"
    />
 </template>
 
@@ -32,6 +33,7 @@ const props = withDefaults(
       dictionaryKey?: string
       disabled?: boolean
       size?: "default" | "small" | "large"
+      placeholder?: string
    }>(),
    {
       clearable: true,

src/config/menus.ts

@@ -28,7 +28,7 @@ export const menus_gym: menuType[] = [
       title: "云教材",
       icon: "",
       meta: {
-         routeType: "singlepage"
+         routeType: "layout"
       },
       children: []
    }

src/hooks/useDialogConfirm/index.ts

@@ -22,6 +22,7 @@ type objType = {
 }
 export default ({ text, onCancel, onOk, onClose, btnShow, headImg }: objType) => {
    modalFrame({
+      maskClose: true,
       template: dialogConfirm,
       width: 478,
       height: 248,

src/registerComponents.ts

@@ -1,6 +1,6 @@
 import { App } from "vue"
 import ElementPlus from "element-plus"
-import "element-plus/dist/index.css"
+//import "element-plus/dist/index.css"
 import "@/assets/elementTheme.scss"
 import zhCn from "element-plus/es/locale/lang/zh-cn"
 import dictionary from "@/components/dictionary"

src/router/modules.ts

@@ -1,5 +1,5 @@
 export default {
    homePage_gym: () => import("@/views/homePage/homePage_gym.vue"),
    homePage_gyt: () => import("@/views/homePage/homePage_gyt.vue"),
-   cloudTextbooks: () => import("@/views/coursewarePlay") // 云教材
+   cloudTextbooks: () => import("@/views/cloudTextbooks") // 云教材
 }

src/store/modules/user.ts

@@ -13,14 +13,14 @@ interface userDataType {
 }
 interface userType {
    userInfo: Record<string, any>
-   roles: string
+   roles?: "GYM" | "GYM"
 }
 
 const useStore = defineStore("user", {
    state: (): userType => {
       return {
          userInfo: {}, //用户信息
-         roles: "" //用户角色
+         roles: undefined //用户角色
       }
    },
    actions: {
@@ -50,7 +50,7 @@ const useStore = defineStore("user", {
          }
          const userInfo = userInfoRes.data || {}
          this.userInfo = userInfo
-         this.roles = userType
+         this.roles = userType as any
          // GYM 和 GYT 区分  区分菜单然后分配路由
          return Promise.resolve(userType === "GYM" ? menus_gym : menus_gyt)
       },
@@ -67,7 +67,7 @@ const useStore = defineStore("user", {
       /** 清空所有登录信息，退出 */
       resetUser() {
          this.userInfo = {}
-         this.roles = ""
+         this.roles = undefined
          removeToken()
          removeUserType()
          resetRouter()

src/views/cloudTextbooks/chooseDialog.vue

@@ -0,0 +1,320 @@
+<!--
+* @FileDescription: 选中弹窗
+* @Author: 黄琪勇
+* @Date:2024-03-22 15:21:44
+-->
+<template>
+   <div class="chooseDialog">
+      <div class="close" @click="close">
+         <img src="@/img/useDialogConfirm/close.png" />
+      </div>
+      <div class="chooseCon">
+         <img class="imgMid" src="@/img/cloudTextbooks/shu.png" />
+         <div class="chooseBox">
+            <div class="leftOperate">
+               <img src="@/img/cloudTextbooks/left.png" />
+            </div>
+            <div class="chooseList"></div>
+         </div>
+         <div class="chooseBox">
+            <div class="rightOperate">
+               <img src="@/img/cloudTextbooks/right.png" />
+            </div>
+            <div class="chooseList">
+               <div class="listItem">
+                  <div class="img">
+                     <template v-if="false">
+                        <img src="@/img/cloudTextbooks/bf.png" />
+                        <img src="@/img/cloudTextbooks/xm.png" />
+                     </template>
+                     <template v-else>
+                        <img src="@/img/cloudTextbooks/jy.png" />
+                     </template>
+                  </div>
+                  <div class="nameCon">
+                     <div class="name">第一课</div>
+                     <div class="text">已使用5次</div>
+                  </div>
+                  <div class="play">查看</div>
+               </div>
+               <div class="listItem">
+                  <div class="img">
+                     <template v-if="false">
+                        <img src="@/img/cloudTextbooks/bf.png" />
+                        <img src="@/img/cloudTextbooks/xm.png" />
+                     </template>
+                     <template v-else>
+                        <img src="@/img/cloudTextbooks/jy.png" />
+                     </template>
+                  </div>
+                  <div class="nameCon">
+                     <div class="name">第一课</div>
+                     <div class="text">已使用5次</div>
+                  </div>
+                  <div class="play disabled">查看</div>
+               </div>
+               <div class="listItem">
+                  <div class="img">
+                     <template v-if="false">
+                        <img src="@/img/cloudTextbooks/bf.png" />
+                        <img src="@/img/cloudTextbooks/xm.png" />
+                     </template>
+                     <template v-else>
+                        <img src="@/img/cloudTextbooks/jy.png" />
+                     </template>
+                  </div>
+                  <div class="nameCon">
+                     <div class="name">第一课</div>
+                     <div class="text">已使用5次</div>
+                  </div>
+                  <div class="play">查看</div>
+               </div>
+               <div class="listItem">
+                  <div class="img">
+                     <template v-if="false">
+                        <img src="@/img/cloudTextbooks/bf.png" />
+                        <img src="@/img/cloudTextbooks/xm.png" />
+                     </template>
+                     <template v-else>
+                        <img src="@/img/cloudTextbooks/jy.png" />
+                     </template>
+                  </div>
+                  <div class="nameCon">
+                     <div class="name">第一课</div>
+                     <div class="text">已使用5次</div>
+                  </div>
+                  <div class="play">查看</div>
+               </div>
+               <div class="listItem">
+                  <div class="img">
+                     <template v-if="false">
+                        <img src="@/img/cloudTextbooks/bf.png" />
+                        <img src="@/img/cloudTextbooks/xm.png" />
+                     </template>
+                     <template v-else>
+                        <img src="@/img/cloudTextbooks/jy.png" />
+                     </template>
+                  </div>
+                  <div class="nameCon">
+                     <div class="name">第一课</div>
+                     <div class="text">已使用5次</div>
+                  </div>
+                  <div class="play">查看</div>
+               </div>
+               <div class="listItem">
+                  <div class="img">
+                     <template v-if="false">
+                        <img src="@/img/cloudTextbooks/bf.png" />
+                        <img src="@/img/cloudTextbooks/xm.png" />
+                     </template>
+                     <template v-else>
+                        <img src="@/img/cloudTextbooks/jy.png" />
+                     </template>
+                  </div>
+                  <div class="nameCon">
+                     <div class="name">第一课</div>
+                     <div class="text">已使用5次</div>
+                  </div>
+                  <div class="play">查看</div>
+               </div>
+               <div class="listItem">
+                  <div class="img">
+                     <template v-if="false">
+                        <img src="@/img/cloudTextbooks/bf.png" />
+                        <img src="@/img/cloudTextbooks/xm.png" />
+                     </template>
+                     <template v-else>
+                        <img src="@/img/cloudTextbooks/jy.png" />
+                     </template>
+                  </div>
+                  <div class="nameCon">
+                     <div class="name">第一课</div>
+                     <div class="text">已使用5次</div>
+                  </div>
+                  <div class="play">查看</div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+   modalData: {
+      id: number
+   }
+}>()
+
+const emits = defineEmits<{
+   (e: "onClose"): void
+}>()
+
+function close() {
+   emits("onClose")
+}
+</script>
+
+<style lang="scss" scoped>
+.chooseDialog {
+   width: 100%;
+   height: 100%;
+   padding: 40px;
+   .close {
+      position: absolute;
+      top: -14px;
+      right: -16px;
+      width: 42px;
+      height: 44px;
+      cursor: pointer;
+   }
+   .chooseCon {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      .imgMid {
+         position: absolute;
+         left: 50%;
+         top: 50%;
+         transform: translate(-50%, -50%);
+      }
+      .chooseBox {
+         width: 50%;
+         height: 100%;
+         background: #f6d7c1;
+         box-shadow: 0px 2px 3px 0px #a05400;
+         border-radius: 17px;
+         padding: 5px;
+         position: relative;
+         &:nth-child(2) {
+            &:hover .leftOperate {
+               opacity: 1;
+            }
+         }
+         &:last-child {
+            margin-left: 10px;
+            &:hover .rightOperate {
+               opacity: 1;
+            }
+         }
+         .leftOperate,
+         .rightOperate {
+            width: 30px;
+            height: 68px;
+            background: #fffefb;
+            position: absolute;
+            top: 50%;
+            transform: translate(0, -50%);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 0.28s;
+            opacity: 0;
+            &:hover {
+               background-color: #edeff0;
+            }
+         }
+         .leftOperate {
+            left: -30px;
+            border-radius: 6px 0px 0px 6px;
+         }
+         .rightOperate {
+            right: -30px;
+            border-radius: 0px 6px 6px 0px;
+         }
+         .chooseList {
+            width: 100%;
+            height: 100%;
+            background: #fdf7f0;
+            border-radius: 17px;
+            padding: 0 40px 0 30px;
+            overflow: hidden;
+            .listItem {
+               margin-top: 12px;
+               padding: 10px 0;
+               display: flex;
+               justify-content: space-between;
+               align-items: center;
+               border-bottom: 1px solid #eaeaea;
+               &:first-child {
+                  margin-top: 32px;
+               }
+               &:last-child {
+                  border-bottom: none;
+               }
+               .img {
+                  flex-shrink: 0;
+                  width: 35px;
+                  height: 40%;
+                  position: relative;
+                  & > img:nth-child(1) {
+                     width: 100%;
+                  }
+                  & > img:nth-child(2) {
+                     position: absolute;
+                     left: 0;
+                     top: 0;
+                     z-index: 1;
+                  }
+               }
+               .nameCon {
+                  margin-left: 7px;
+                  flex-grow: 1;
+                  .name {
+                     font-weight: 600;
+                     font-size: 16px;
+                     color: #333333;
+                     line-height: 22px;
+                  }
+                  .text {
+                     font-weight: 400;
+                     font-size: 12px;
+                     color: #777777;
+                     line-height: 17px;
+                  }
+               }
+               .play {
+                  flex-shrink: 0;
+                  width: 64px;
+                  height: 24px;
+                  background: linear-gradient(180deg, #ffab71 0%, #ff6e45 100%);
+                  border-radius: 12px;
+                  line-height: 24px;
+                  text-align: center;
+                  font-weight: 500;
+                  font-size: 12px;
+                  color: #ffffff;
+                  letter-spacing: 1px;
+                  cursor: pointer;
+                  &:hover {
+                     opacity: $opacity-hover;
+                  }
+                  &.disabled {
+                     background: linear-gradient(180deg, #d3d3d3 0%, #b5b5b5 100%);
+                     cursor: not-allowed;
+                     &:hover {
+                        opacity: 1;
+                     }
+                  }
+               }
+            }
+         }
+      }
+   }
+}
+</style>
+<style lang="scss">
+.modalFrame.chooseDialog {
+   --modalFrameTitHeight: 0px;
+   .modalFrameTitle {
+      display: none !important;
+   }
+   .modalFrameBox {
+      background: url("@/img/cloudTextbooks/bg.png") no-repeat;
+      background-size: cover;
+      box-shadow: none;
+   }
+}
+</style>

src/views/cloudTextbooks/cloudTextbooks.vue

@@ -4,10 +4,39 @@
 * @Date:2024-03-21 15:11:49
 -->
 <template>
-   <navContainer class="navContainer" :img-obj="imgObj" :navs="navs">
+   <navContainer :headImg="headImg" :navs="navs">
       <div class="cloudTextbooks">
-         <div v-for="item in data" :key="item.id" @click="handleClick(item.lessonCoursewareId)">
-            <img :src="item.cover" alt="" />
+         <div class="headCon">
+            <div class="operate">
+               <dictionary
+                  class="classTypes"
+                  v-model="value"
+                  :options="options"
+                  :propsOpt="{ label: 'label', value: 'value' }"
+                  placeholder="课程类型"
+               />
+               <el-input v-model="input3" style="max-width: 600px" placeholder="请输入教材名称" clearable class="iptSelect">
+                  <template #prepend>
+                     <img src="@/img/cloudTextbooks/ss.png" />
+                  </template>
+                  <template #append>
+                     <div class="btnSelect">搜索</div>
+                  </template>
+               </el-input>
+            </div>
+         </div>
+         <div class="cloudTextbooksCon">
+            <ElScrollbar class="elScrollbar">
+               <div class="cloudTextbooksBox">
+                  <div class="bookshelf" v-for="(books, index) in []" :key="index">
+                     <div class="book" v-for="item in books" :key="item.id">
+                        <ElImage class="img" :src="item.cover" @click="handleClick(item.lessonCoursewareId)" />
+                        <div class="name">{{ item.name }}</div>
+                     </div>
+                  </div>
+                  <el-empty :image-size="360" :image="require('@/img/layout/empty.png')" description="暂无搜索结果" />
+               </div>
+            </ElScrollbar>
          </div>
       </div>
    </navContainer>
@@ -18,8 +47,13 @@ import navContainer from "@/views/homePage/components/navContainer"
 import { queryLessonCourseware_gym, getLessonCoursewareCourseList_gym } from "@/api/cloudTextbooks.api"
 import { ref } from "vue"
 import { httpAjax } from "@/plugin/httpAjax"
+import modalFrame from "@/plugin/modalFrame"
+import chooseDialog from "./chooseDialog.vue"
+import userStore from "@/store/modules/user"
+
+const userStoreHook = userStore()
 
-const imgObj = {
+const headImg = {
    img: require("@/img/homePage/back.png"),
    url: "back"
 }
@@ -29,25 +63,175 @@ const navs = [
       url: "/"
    },
    {
-      name: "云教材"
+      name: userStoreHook.roles === "GYM" ? "云教程" : "云教材"
    }
 ]
 const data = ref<any[]>([])
+
+const value = ref()
+const options = ref([
+   {
+      value: "guide",
+      label: "Guide"
+   }
+])
+
+const input3 = ref()
+
 httpAjax(queryLessonCourseware_gym).then(res => {
    console.log(res)
-   data.value = res.data.rows
+   data.value = chunkArray([...res.data.rows, ...res.data.rows], 5)
 })
 
-function handleClick(id: string) {
+function handleClick(id: number) {
+   console.log(id)
+   modalFrame({
+      template: chooseDialog,
+      width: 1110,
+      height: 675,
+      btnShow: [],
+      modalData: {
+         id
+      },
+      maskClose: true,
+      className: "chooseDialog"
+   })
+   return
    httpAjax(getLessonCoursewareCourseList_gym, id).then(res => {
       console.log(res)
    })
 }
+
+function chunkArray(array: any[], size: number) {
+   const result = []
+   for (let i = 0; i < array.length; i += size) {
+      result.push(array.slice(i, i + size))
+   }
+   return result
+}
 </script>
 
 <style lang="scss" scoped>
 .cloudTextbooks {
-   display: flex;
-   flex-wrap: wrap;
+   width: 100%;
+   height: 100%;
+   .headCon {
+      padding: 40px 26px;
+      display: flex;
+      flex-direction: row-reverse;
+      .operate {
+         display: flex;
+         & > :deep(.classTypes) {
+            flex-shrink: 0;
+            width: 150px;
+            .el-input {
+               --el-input-text-color: #333;
+               font-size: 16px;
+            }
+            .el-input__suffix {
+               font-size: 14px;
+            }
+            .el-input__wrapper {
+               border-radius: 20px;
+               box-shadow: none;
+               padding: 1px 26px;
+               .el-input__inner {
+                  --el-input-inner-height: 40px;
+                  text-align: center;
+               }
+            }
+         }
+         & > :deep(.iptSelect) {
+            margin-left: 12px;
+            width: 382px;
+            background: #ffffff;
+            border-radius: 21px;
+            &.el-input {
+               --el-input-text-color: #333;
+               font-size: 16px;
+            }
+            .el-input-group__prepend {
+               background-color: transparent;
+               box-shadow: none;
+               padding: 0 0 0 15px;
+            }
+            .el-input-group__append {
+               background-color: transparent;
+               box-shadow: none;
+               padding: 0 4px;
+            }
+            .el-input__wrapper {
+               box-shadow: none;
+               .el-input__inner {
+                  --el-input-inner-height: 40px;
+               }
+            }
+            .btnSelect {
+               width: 70px;
+               height: 36px;
+               background: linear-gradient(180deg, #ffab71 0%, #ff6e45 100%), #ffad49;
+               border-radius: 21px;
+               font-weight: 500;
+               font-size: 16px;
+               color: #ffffff;
+               line-height: 36px;
+               text-align: center;
+               cursor: pointer;
+               &:hover {
+                  opacity: $opacity-hover;
+               }
+            }
+         }
+      }
+   }
+   .cloudTextbooksCon {
+      height: calc(100% - 122px);
+      > :deep(.elScrollbar) {
+         .el-scrollbar__wrap {
+            overflow-x: hidden;
+         }
+         .el-scrollbar__bar.is-vertical {
+            width: 4px;
+            right: 0;
+         }
+      }
+      .cloudTextbooksBox {
+         display: flex;
+         flex-direction: column;
+         align-items: center;
+         .bookshelf {
+            width: 1500px;
+            padding: 0 116px;
+            margin-bottom: 70px;
+            display: flex;
+            flex-wrap: wrap;
+            background: url("@/img/cloudTextbooks/sj.png") no-repeat;
+            background-size: contain;
+            background-position-y: 120px;
+            &:last-child {
+               margin-bottom: 0;
+            }
+            .book {
+               width: 20%;
+               text-align: center;
+               .img {
+                  cursor: pointer;
+                  width: 172px;
+                  height: 212px;
+                  &:hover {
+                     opacity: $opacity-hover;
+                  }
+               }
+               .name {
+                  margin-top: 50px;
+                  font-weight: 400;
+                  font-size: 19px;
+                  color: #393939;
+                  line-height: 26px;
+               }
+            }
+         }
+      }
+   }
 }
 </style>

src/views/homePage/components/navContainer/navContainer.vue

@@ -7,8 +7,8 @@
    <div class="navContainer">
       <div class="container">
          <div class="navCon">
-            <div class="navImg" :class="{ cursor: props.imgObj.url }">
-               <img :src="props.imgObj.img" @click="handleRouter(props.imgObj.url)" />
+            <div class="navImg" :class="{ cursor: props.headImg.url }">
+               <img :src="props.headImg.img" @click="handleRouter(props.headImg.url)" />
             </div>
             <div class="nav" v-for="(nav, index) in navs" :key="nav.name">
                <div class="name" :class="{ cursor: nav.url }" @click="handleRouter(nav.url)">{{ nav.name }}</div>
@@ -26,12 +26,12 @@ import { useRouter } from "vue-router"
 
 const router = useRouter()
 
-/**
- * imgObj  第一个图片与跳转
+/*
+ * headImg  头部图片与跳转
  * navs    导航栏
  */
 const props = defineProps<{
-   imgObj: {
+   headImg: {
       img: string
       url?: string
    }

src/views/homePage/homePage_gym.vue

@@ -4,23 +4,31 @@
 * @Date:2024-03-20 17:26:35
 -->
 <template>
-   <navContainer class="navContainer" :img-obj="imgObj" :navs="navs">
-      <div class="homePage_gym">
+   <navContainer class="navContainer" :headImg="headImg" :navs="navs">
+      <div class="homePage">
          <div class="classTypes">
-            <div class="classType">
-               <img src="@/img/homePage/kb.png" />
-               <div>课表</div>
+            <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 class="courseBoard"></div>
       </div>
    </navContainer>
 </template>
 
 <script setup lang="ts">
 import navContainer from "./components/navContainer"
+import { useRouter } from "vue-router"
+import useDialogConfirm from "@/hooks/useDialogConfirm"
 
-const imgObj = {
+const router = useRouter()
+
+const headImg = {
    img: require("@/img/homePage/home.png")
 }
 const navs = [
@@ -28,13 +36,55 @@ 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/jdcp.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_gym {
+.homePage {
    width: 100%;
    height: 100%;
    padding: 50px;
@@ -43,14 +93,53 @@ const navs = [
       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: 100%;
+      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>

src/views/homePage/homePage_gyt.vue

@@ -1,12 +1,145 @@
 <!--
-* @FileDescription: 管乐团首页
+* @FileDescription: 管乐迷首页
 * @Author: 黄琪勇
 * @Date:2024-03-20 17:26:35
 -->
 <template>
-   <div class="homePage_gyt">homePage_gyt</div>
+   <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"></script>
+<script setup lang="ts">
+import navContainer from "./components/navContainer"
+import { useRouter } from "vue-router"
+import useDialogConfirm from "@/hooks/useDialogConfirm"
 
-<style lang="scss" scoped></style>
+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>

src/viewsframe/errorPage/errorPage.vue

@@ -7,7 +7,7 @@
    <div class="errorPage">
       <div class="error">
          <div>您访问的页面不存在!</div>
-         <ElButton color="#F5C42D" type="primary" @click="handleGoHome">返回首页</ElButton>
+         <ElButton type="primary" @click="handleGoHome">返回首页</ElButton>
       </div>
    </div>
 </template>

src/viewsframe/layout/layout.vue

@@ -65,6 +65,7 @@ function handleLogout() {
 .layout {
    width: 100%;
    height: 100%;
+   min-width: 1200px;
    min-height: 880px;
    background: linear-gradient(180deg, #ffd884 0%, #ffa943 100%);
    box-shadow: 0px 11px 15px 0px #63bd73, inset 0px 1px 14px 0px rgba(255, 255, 255, 0.5);