feat: 优化样式和页面内容展示

src/assets/menus.ts

@@ -132,15 +132,15 @@ export const menus: IMenuItem[] = [
         name: '类别管理',
         path: '/admin/category',
       },
-      {
-        icon: Coordinate,
-        name: '资源审核管理',
-        path: '/admin/audit',
-      },
+      // {
+      //   icon: Coordinate,
+      //   name: '资源审核管理',
+      //   path: '/admin/audit',
+      // },
     ],
   },
   {
-    tag: 'v1-backend',
+    tag: 'v1-backend-data-dictionary-list',
     name: '系统管理',
     path: '/system',
     children: [

src/components/layout/Header.vue

@@ -48,13 +48,13 @@ function genNavClassName(data: IMenuItem) {
     <div class="app-header-right">
       <el-dropdown v-if="userInfo">
         <div class="avatar">
-          <img :src="userInfo.avatar || '/avatar.png'" />
+          <img :src="userInfo.avatar || '/default.jpg'" />
         </div>
         <template #dropdown>
           <el-dropdown-menu style="width: 280px">
             <div class="app-header-user">
               <div class="app-header-user-avatar">
-                <img :src="userInfo.avatar || '/center_resource/avatar.png'" />
+                <img :src="userInfo.avatar || '/default.jpg'" />
               </div>
               <div class="app-header-user-main">
                 <h3>{{ userInfo.name }}</h3>

src/modules/course/my/components/ViewCourseChapter.vue

@@ -56,7 +56,7 @@ const handleRes = function (item: any) {
 .chapter-box {
   width: 300px;
   background: #aa1941;
-  margin-left: 20px;
+  margin: 0 20px;
   height: fit-content;
   border-radius: 10px;
   height: 800px;
@@ -100,15 +100,15 @@ const handleRes = function (item: any) {
       border-bottom: 1px dotted #e06386;
       margin-top: 30px;
       .order {
-        width: 26px;
+        width: 20px;
         margin-right: 7px;
         .order-number {
-          width: 26px;
-          height: 26px;
+          width: 20px;
+          height: 20px;
           background: rgba(255, 255, 255, 1);
           border-radius: 50%;
           font-size: 16px;
-          line-height: 26px;
+          line-height: 20px;
           color: #aa1941;
           text-align: center;
         }
@@ -121,7 +121,6 @@ const handleRes = function (item: any) {
           line-height: 1.5;
           color: #ffffff;
           margin-bottom: 20px;
-          margin-top: 2px;
           cursor: pointer;
           word-break: break-all;
         }
@@ -131,8 +130,6 @@ const handleRes = function (item: any) {
           color: #ffffff;
           margin-bottom: 20px;
           cursor: pointer;
-          margin-left: 15px;
-          cursor: pointer;
           word-break: break-all;
           text-align: left;
         }
@@ -142,8 +139,7 @@ const handleRes = function (item: any) {
           color: #ffffff;
           margin-top: 10px;
           cursor: pointer;
-          margin-left: 30px;
-          cursor: pointer;
+          margin-left: 20px;
           word-break: break-all;
           text-align: left;
         }

src/modules/course/my/components/ViewCourseInfo.vue

@@ -341,7 +341,6 @@ const handleDetail = (row: any) => {
   max-height: 100px;
   background: rgb(239, 239, 239);
   overflow-y: auto;
-  text-indent: 2em;
   line-height: 1.5;
   padding: 20px 20px;
   color: #333;

src/modules/course/my/components/ViewCourseInfoTop.vue

 <script setup lang="ts">
 const props: any = defineProps({
   data: {
-    type: Object
-  }
+    type: Object,
+  },
 })
 
 interface IBasicInfo {
@@ -20,42 +20,42 @@ const basicInfo = computed((): IBasicInfo[] => {
       label: '课程类型',
       value: '',
       key: 'online_type_name',
-      border: '1'
+      border: '1',
     },
     {
       icon: '/center_resource/course-view-icon5.png',
       label: '选课类型',
       value: '',
       key: 'elective_type_name',
-      border: '1'
+      border: '1',
     },
     {
       icon: '/center_resource/course-view-icon3.png',
       label: '课程学分',
       value: '',
       key: 'credit',
-      border: '1'
+      border: '1',
     },
     {
       icon: '/center_resource/course-view-icon13.png',
       label: '负责人',
       value: '',
       key: 'belong_operator_name',
-      border: '1'
+      border: '1',
     },
     {
       icon: '/center_resource/course-view-icon8.png',
       label: '创建时间',
       value: '',
       key: 'created_time',
-      border: '0'
+      border: '0',
     },
     {
       icon: '/center_resource/course-view-icon2.png',
       label: '课程分类',
       value: '',
       key: 'classification_name',
-      border: '1'
+      border: '1',
     },
 
     {
@@ -63,29 +63,29 @@ const basicInfo = computed((): IBasicInfo[] => {
       label: '适用专业',
       value: '',
       key: 'specialty',
-      border: '1'
+      border: '1',
     },
     {
       icon: '/center_resource/course-view-icon7.png',
       label: '是否有效',
       value: '',
       key: 'status_name',
-      border: '1'
+      border: '1',
     },
     {
       icon: '/center_resource/course-view-icon6.png',
       label: '更新人',
       value: '',
       key: 'updated_operator_name',
-      border: '1'
+      border: '1',
     },
     {
       icon: '/center_resource/course-view-icon9.png',
       label: '更新时间',
       value: '',
       key: 'updated_time',
-      border: '0'
-    }
+      border: '0',
+    },
   ]
 
   basicList.map((item: any) => {
@@ -119,11 +119,9 @@ const statusStyle = (item: any) => {
         <template #reference>
           <div class="cover-name">
             {{ props.data.name }}
-            <!-- {{ props.data.belong_operator_name }} -->
           </div>
         </template>
       </el-popover>
-      <div class="cover-operator">{{ props.data.belong_operator_name }}</div>
     </div>
     <div class="info">
       <div class="info-list">
@@ -184,6 +182,7 @@ const statusStyle = (item: any) => {
   background: #fff;
   border-radius: 10px;
   padding: 25px 20px;
+  gap: 20px;
   .cover {
     min-width: 240px;
     height: 180px;
@@ -196,20 +195,24 @@ const statusStyle = (item: any) => {
     }
     .cover-name {
       position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 100%;
-      transform: translate(-50%, -50%);
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
       line-height: 37px;
       font-size: 20px;
       color: #ffffff;
-      padding-left: 16px;
+      padding: 10px;
       box-sizing: border-box;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       text-align: center;
-      cursor: pointer;
+      border-radius: 6px;
     }
     .cover-operator {
       position: absolute;
@@ -230,29 +233,18 @@ const statusStyle = (item: any) => {
     box-sizing: border-box;
     width: calc(100vw - 400px);
     .info-list {
-      display: flex;
-      justify-content: space-around;
-      flex-wrap: wrap;
-      .item:nth-child(5) {
-        width: 20%;
-      }
-      .item:nth-child(10) {
-        width: 20%;
-      }
-      .item:nth-child(1) {
-        width: 20%;
-      }
-      .item:nth-child(6) {
-        width: 20%;
-      }
+      flex: 1;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 0 20px;
       .item {
-        width: 15%;
         display: flex;
-        align-items: center;
+        align-items: start;
         height: fit-content;
         flex-wrap: nowrap;
-        margin-left: 2%;
         margin-bottom: 32px;
+        box-sizing: border-box;
+        padding: 0 20px;
         .item-right {
           margin-left: 15px;
           .label {

src/modules/course/my/views/View.vue

@@ -65,7 +65,7 @@ const handleFresh = () => {
   .course-left_info {
     display: flex;
     .info_bottom {
-      width: 67%;
+      width: 75%;
     }
     .info_chapter {
       width: 25%;

src/modules/resource/dashboard/components/Hottest.vue

@@ -5,26 +5,23 @@ import { ElMessage } from 'element-plus'
 const prop = defineProps({
   data: {
     type: Array,
-    default: () => []
-  }
+    default: () => [],
+  },
 })
 
 const router = useRouter()
 
 const listOptions = {
   columns: [
-    { label: '排名', slots: 'table-ranking', align: 'center' },
+    { label: '排名', slots: 'table-ranking', align: 'center', width: 100 },
     { label: '关联使用', slots: 'table-relation', align: 'center' },
     { label: '资源名称', prop: 'name', align: 'center' },
     { label: '资源类型', slots: 'table-type', align: 'center' },
     { label: '所在部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新人', prop: 'created_operator_name', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
+    { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right', width: 100 },
   ],
-  data: prop.data.map((item: any) => {
-    item.name = `${item.name.slice(0, 10)}...`
-    return item
-  })
+  data: prop.data,
 }
 
 const resourceType = (name: string, isGetPath: number) => {
@@ -34,21 +31,21 @@ const resourceType = (name: string, isGetPath: number) => {
       视频: '/resource/video/view',
       课件: '/resource/courseware/view',
       教案: '/resource/lessonplan/view',
-      其他资料: '/resource/other/view'
+      其他资料: '/resource/other/view',
     }
   } else if (isGetPath === 2) {
     path = {
       视频: 1,
       课件: 2,
       教案: 3,
-      其他资料: 4
+      其他资料: 4,
     }
   } else {
     path = {
       视频: 'v1-resource-video-view',
       课件: 'v1-resource-courseware-view',
       教案: 'v1-resource-lesson-plan-view',
-      其他资料: 'v1-resource-other-information-view'
+      其他资料: 'v1-resource-other-information-view',
     }
   }
   return path[name]
@@ -59,8 +56,8 @@ const viewDetails = (row: { id: string; resource_type: string }) => {
     router.push({
       path: resourceType(row.resource_type, 1),
       query: {
-        id: row.id
-      }
+        id: row.id,
+      },
     })
   } else {
     ElMessage('暂无权限查阅')

src/modules/resource/dashboard/components/Newest.vue

@@ -6,24 +6,21 @@ const router = useRouter()
 const prop = defineProps({
   data: {
     type: Array,
-    default: () => []
-  }
+    default: () => [],
+  },
 })
 
 const listOptions = {
   columns: [
-    { label: '排名', slots: 'table-ranking', align: 'center' },
+    { label: '排名', slots: 'table-ranking', align: 'center', width: 100 },
     { label: '资源名称', prop: 'name', align: 'center' },
     { label: '资源类型', slots: 'table-type', align: 'center' },
     { label: '所在部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新人', prop: 'created_operator_name', align: 'center' },
     { label: '更新时间', prop: 'updated_time', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
+    { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right', width: 100 },
   ],
-  data: prop.data.map((item: any) => {
-    item.name = item.name.length > 10 ? `${item.name.slice(0, 10)}...` : item.name
-    return item
-  })
+  data: prop.data,
 }
 
 const resourceType = (name: string, isGetPath: number) => {
@@ -33,21 +30,21 @@ const resourceType = (name: string, isGetPath: number) => {
       视频: '/resource/video/view',
       课件: '/resource/courseware/view',
       教案: '/resource/lessonplan/view',
-      其他资料: '/resource/other/view'
+      其他资料: '/resource/other/view',
     }
   } else if (isGetPath === 2) {
     path = {
       视频: 1,
       课件: 2,
       教案: 3,
-      其他资料: 4
+      其他资料: 4,
     }
   } else {
     path = {
       视频: 'v1-resource-video-view',
       课件: 'v1-resource-courseware-view',
       教案: 'v1-resource-lesson-plan-view',
-      其他资料: 'v1-resource-other-information-view'
+      其他资料: 'v1-resource-other-information-view',
     }
   }
   return path[name]
@@ -58,8 +55,8 @@ const viewDetails = (row: { id: string; auth_view: boolean; resource_type: strin
     router.push({
       path: resourceType(row.resource_type, 1),
       query: {
-        id: row.id
-      }
+        id: row.id,
+      },
     })
   } else {
     ElMessage('暂无权限查阅')

src/modules/resource/dashboard/components/RecentLearning.vue

@@ -7,24 +7,21 @@ const router = useRouter()
 const prop = defineProps({
   data: {
     type: Array,
-    default: () => []
-  }
+    default: () => [],
+  },
 })
 
 const listOptions = {
   columns: [
-    { label: '排名', slots: 'table-ranking', align: 'center' },
+    { label: '排名', slots: 'table-ranking', align: 'center', width: 100 },
     { label: '资源名称', prop: 'name', align: 'center' },
     { label: '资源类型', slots: 'table-type', align: 'center' },
     { label: '所在部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新人', prop: 'created_operator_name', align: 'center' },
     { label: '更新时间', prop: 'updated_time', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
+    { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right', width: 100 },
   ],
-  data: prop.data.map((item: any) => {
-    item.name = `${item.name.slice(0, 10)}...`
-    return item
-  })
+  data: prop.data,
 }
 
 const resourceType = (name: string, isGetPath: number) => {
@@ -34,21 +31,21 @@ const resourceType = (name: string, isGetPath: number) => {
       视频: '/resource/video/view',
       课件: '/resource/courseware/view',
       教案: '/resource/lessonplan/view',
-      其他资料: '/resource/other/view'
+      其他资料: '/resource/other/view',
     }
   } else if (isGetPath === 2) {
     path = {
       视频: 1,
       课件: 2,
       教案: 3,
-      其他资料: 4
+      其他资料: 4,
     }
   } else {
     path = {
       视频: 'v1-resource-video-view',
       课件: 'v1-resource-courseware-view',
       教案: 'v1-resource-lesson-plan-view',
-      其他资料: 'v1-resource-other-information-view'
+      其他资料: 'v1-resource-other-information-view',
     }
   }
   return path[name]
@@ -59,8 +56,8 @@ const viewDetails = (row: { id: string; resource_type: string }) => {
     router.push({
       path: resourceType(row.resource_type, 1),
       query: {
-        id: row.id
-      }
+        id: row.id,
+      },
     })
   } else {
     ElMessage('暂无权限查阅')