update

src/assets/menus.ts

 import type { IMenuItem } from '@/types'
-import { Collection, ChatDotSquare, FolderAdd, Setting } from '@element-plus/icons-vue'
+import { Management, Comment, FolderAdd, Setting } from '@element-plus/icons-vue'
 export const menus: IMenuItem[] = [
   {
     name: '学习',
     path: '/course',
-    icon: Collection
+    icon: Management,
+    iconImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-cou.png',
+    iconActiveImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-cou-a.png'
   },
   {
     name: '论坛',
     path: '/bbs',
-    icon: ChatDotSquare
+    icon: Comment,
+    iconImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-forum.png',
+    iconActiveImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-forum-a.png'
   },
   {
     name: '收藏',
     path: '/favorites',
-    icon: FolderAdd
+    icon: FolderAdd,
+    iconImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-collect.png',
+    iconActiveImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-collect-a.png'
   },
   {
     name: '设置',
     path: '/settings',
-    icon: Setting
+    icon: Setting,
+    iconImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-set.png',
+    iconActiveImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-set-a.png'
   }
 ]

src/components/layout/Aside.vue

@@ -57,7 +57,13 @@ function handleClick(path: string) {
             </el-menu-item>
           </el-sub-menu>
           <el-menu-item :index="item.path" @click="handleClick(item.path)" v-else>
-            <el-icon><component :is="item.icon"></component></el-icon>{{ item.name }}
+            <el-icon>
+              <img
+                :src="item.iconImg"
+                v-if="item.path.slice(1, item.path.length) !== route.path.slice(1, route.path.length).split('/')[0]"
+              />
+              <img :src="item.iconActiveImg" v-else /> </el-icon
+            >{{ item.name }}
           </el-menu-item>
         </template>
       </el-menu>
@@ -102,7 +108,9 @@ function handleClick(path: string) {
     margin: 50px auto;
     border-radius: 14px;
     &.is-active {
-      background: var(--el-menu-active-bg-color);
+      // background: var(--el-menu-active-bg-color);
+      background-color: #ab0a3d;
+      color: #fff;
     }
     .el-icon {
       margin-bottom: 7px;

src/components/layout/Index.vue

@@ -27,7 +27,7 @@ withDefaults(defineProps<{ sidebar?: boolean; hasTitle?: boolean }>(), {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background-color: #f8f8f8;
+  background-color: #eee;
 }
 .app-layout-container {
   flex: 1;

src/modules/course/components/CourseListItem.vue

@@ -85,18 +85,19 @@ function handleTop(data: CourseListItemType) {
 .course-item {
   position: relative;
   padding: 12px;
-  margin: 20px 0;
-  border: 1px solid #e6e6e6;
+  margin: 14px 0;
+  // border: 1px solid #e6e6e6;
   border-radius: 6px;
+  background-color: #fafafa;
   &.is-top {
-    --el-border-color-lighter: #fff;
-    background: #eaeaea;
+    // --el-border-color-lighter: #fff;
+    // background: #eaeaea;
   }
   &:hover,
   &.is-active {
     --el-border-color-lighter: #fff;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.12);
-    background: #eaeaea;
+    box-shadow: 0px 3px 12px 1px rgba(0, 0, 0, 0.1216);
+    background: #fff;
   }
 }
 .course-item__top {
@@ -204,4 +205,9 @@ function handleTop(data: CourseListItemType) {
     border-bottom-left-radius: 0;
   }
 }
+::v-deep {
+  .el-progress-bar__outer {
+    background-color: #efefef;
+  }
+}
 </style>

src/modules/course/components/CourseViewChapter.vue

@@ -115,6 +115,21 @@ function targetUrl(resource: CourseResourceType, section: CourseSectionType, cha
     return `/preview?course_id=${courseId}&semester_id=${semesterId}&resource_id=${resource.resource_id}&resource_type=${resource.resource_type}&url=${resource.info?.url}`
   }
 }
+
+// 父级点击开始学习按钮
+const study = function () {
+  if (chapterList.length) {
+    if (chapterList[0]?.sections?.length) {
+      if (chapterList[0].sections[0]?.resources?.length) {
+        window.open(targetUrl(chapterList[0].sections[0].resources[0], chapterList[0].sections[0], chapterList[0]))
+      }
+    }
+  }
+}
+
+defineExpose({
+  study
+})
 </script>
 <template>
   <el-collapse class="course-chapters" v-model="chapterIds" v-if="chapterList.length">

src/modules/course/views/CourseIndex.vue

@@ -59,16 +59,16 @@ log.upload({
 .course {
   display: flex;
   height: 100%;
-  background-color: #fff;
+  // background-color: #fff;
   border-radius: 6px;
 }
 // 左侧
 .course-left {
-  padding: 18px;
-  width: 354px;
+  // padding: 18px;
+  width: 313px;
   flex: 0 0 354px;
   overflow-y: auto;
-  border-right: 1px solid #e6e6e6;
+  // border-right: 1px solid #e6e6e6;
   box-sizing: border-box;
 }
 // 右侧

src/types.ts

@@ -7,6 +7,8 @@ export interface IMenuItem {
   path: string
   icon?: Component
   children?: IMenuItem[]
+  iconImg?: string
+  iconActiveImg?: string
 }
 
 // 用户类型