字体+首页

src/api/cloudTextbooks.api.ts

@@ -0,0 +1,22 @@
+import { httpAxios_gym } from "@/api/ApiInstance"
+
+/** 管乐迷 */
+
+//获取课程列表
+export const queryLessonCourseware_gym = () => {
+   return httpAxios_gym.axioseRquest({
+      method: "post",
+      url: "/api-teacher/lessonCourseware/queryLessonCourseware",
+      data: {
+         query: {}
+      }
+   })
+}
+
+// 课程详情
+export const getLessonCoursewareCourseList_gym = (id: string) => {
+   return httpAxios_gym.axioseRquest({
+      method: "get",
+      url: "/api-teacher/lessonCourseware/getLessonCoursewareCourseList/" + id
+   })
+}

src/assets/font/index.scss

@@ -0,0 +1,4 @@
+@font-face {
+   font-family: "AlimamaFangYuanTiVF";
+   src: url("./AlimamaFangYuanTiVF-Thin.woff2");
+}

src/config/menus.ts

@@ -21,5 +21,15 @@ export const menus_gym: menuType[] = [
          routeType: "layout"
       },
       children: []
+   },
+   {
+      path: "/cloudTextbooks",
+      component: "cloudTextbooks",
+      title: "云教材",
+      icon: "",
+      meta: {
+         routeType: "layout"
+      },
+      children: []
    }
 ]

src/main.ts

@@ -3,6 +3,7 @@ import App from "./App.vue"
 
 import "./assets/normalize.css" //初始化css
 import "./assets/index.scss" //全局样式
+import "./assets/font/index.scss" //字体
 
 const app = createApp(App)
 

src/views/cloudTextbooks/cloudTextbooks.vue

@@ -0,0 +1,53 @@
+<!--
+* @FileDescription: 云教材
+* @Author: 黄琪勇
+* @Date:2024-03-21 15:11:49
+-->
+<template>
+   <navContainer class="navContainer" :img-obj="imgObj" :navs="navs">
+      <div class="cloudTextbooks">
+         <div v-for="item in data" :key="item.id" @click="handleClick(item.lessonCoursewareId)">
+            <img :src="item.cover" alt="" />
+         </div>
+      </div>
+   </navContainer>
+</template>
+
+<script setup lang="ts">
+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"
+
+const imgObj = {
+   img: require("@/img/homePage/back.png"),
+   url: "back"
+}
+const navs = [
+   {
+      name: "主页",
+      url: "/"
+   },
+   {
+      name: "云教材"
+   }
+]
+const data = ref<any[]>([])
+httpAjax(queryLessonCourseware_gym).then(res => {
+   console.log(res)
+   data.value = res.data.rows
+})
+
+function handleClick(id: string) {
+   httpAjax(getLessonCoursewareCourseList_gym, id).then(res => {
+      console.log(res)
+   })
+}
+</script>
+
+<style lang="scss" scoped>
+.cloudTextbooks {
+   display: flex;
+   flex-wrap: wrap;
+}
+</style>

src/views/cloudTextbooks/index.ts

@@ -0,0 +1,2 @@
+import cloudTextbooks from "./cloudTextbooks.vue"
+export default cloudTextbooks

src/views/homePage/components/navContainer/index.ts

@@ -0,0 +1,2 @@
+import navContainer from "./navContainer.vue"
+export default navContainer

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

@@ -0,0 +1,106 @@
+<!--
+* @FileDescription: 导航容器
+* @Author: 黄琪勇
+* @Date:2024-03-21 13:41:13
+-->
+<template>
+   <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>
+            <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>
+               <div class="arrow" v-if="navs.length > index + 1">></div>
+            </div>
+            <img class="horn" src="@/img/layout/jiao.png" />
+         </div>
+         <slot></slot>
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router"
+
+const router = useRouter()
+
+/**
+ * imgObj  第一个图片与跳转
+ * navs    导航栏
+ */
+const props = defineProps<{
+   imgObj: {
+      img: string
+      url?: string
+   }
+   navs: {
+      name: string
+      url?: string
+   }[]
+}>()
+
+function handleRouter(url?: string) {
+   url && (url === "back" ? router.back() : router.push(url))
+}
+</script>
+
+<style lang="scss" scoped>
+.navContainer {
+   width: 100%;
+   height: calc(100% - 72px);
+   padding: 28px;
+   .navCon {
+      position: absolute;
+      height: 57px;
+      background: #fcf2e2;
+      left: 0;
+      top: -57px;
+      border-radius: 20px 0 0 0;
+      display: flex;
+      align-items: center;
+      .cursor {
+         cursor: pointer;
+         &:hover {
+            opacity: $opacity-hover;
+         }
+      }
+      .navImg {
+         margin-left: 24px;
+         margin-right: 18px;
+         width: 42px;
+         height: 42px;
+         position: relative;
+         & > img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+         }
+      }
+      .nav {
+         display: flex;
+         align-items: center;
+         font-weight: 600;
+         font-size: 20px;
+         color: #994d1c;
+         .arrow {
+            margin: 0 6px;
+         }
+      }
+      .horn {
+         position: absolute;
+         top: -3px;
+         right: -49px;
+      }
+   }
+   .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background: #fcf2e2;
+      border-radius: 0 20px 20px 20px;
+   }
+}
+</style>

src/views/homePage/homePage_gym.vue

@@ -4,9 +4,53 @@
 * @Date:2024-03-20 17:26:35
 -->
 <template>
-   <div class="homePage_gym">homePage_gym</div>
+   <navContainer class="navContainer" :img-obj="imgObj" :navs="navs">
+      <div class="homePage_gym">
+         <div class="classTypes">
+            <div class="classType">
+               <img src="@/img/homePage/kb.png" />
+               <div>课表</div>
+            </div>
+         </div>
+         <div class="courseBoard"></div>
+      </div>
+   </navContainer>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import navContainer from "./components/navContainer"
 
-<style lang="scss" scoped></style>
+const imgObj = {
+   img: require("@/img/homePage/home.png")
+}
+const navs = [
+   {
+      name: "主页"
+   }
+]
+</script>
+
+<style lang="scss" scoped>
+.navContainer :deep(.navImg > img) {
+   top: 72% !important;
+}
+.homePage_gym {
+   width: 100%;
+   height: 100%;
+   padding: 50px;
+   display: flex;
+   .classTypes {
+      flex-grow: 1;
+      display: flex;
+      flex-wrap: wrap;
+   }
+   .courseBoard {
+      flex-shrink: 0;
+      margin-left: 50px;
+      width: 572px;
+      height: 100%;
+      background: url("@/img/homePage/bg.png") no-repeat;
+      background-size: cover;
+   }
+}
+</style>

src/viewsframe/layout/layout.vue

@@ -64,7 +64,8 @@ function handleLogout() {
 <style lang="scss" scoped>
 .layout {
    width: 100%;
-   min-height: 100%;
+   height: 100%;
+   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);
    .head {