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

324ea9ae · 王鹏飞 · fd7bc1bd · 324ea9ae · 324ea9ae · 324ea9ae
--- a/src/assets/menus.ts
+++ b/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: [

--- a/src/components/layout/Header.vue
+++ b/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>

--- a/src/modules/course/my/components/ViewCourseChapter.vue
+++ b/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;
        }

--- a/src/modules/course/my/components/ViewCourseInfo.vue
+++ b/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;

--- a/src/modules/course/my/components/ViewCourseInfoTop.vue
+++ b/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 {

--- a/src/modules/course/my/views/View.vue
+++ b/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%;

--- a/src/modules/resource/dashboard/components/Hottest.vue
+++ b/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('暂无权限查阅')

--- a/src/modules/resource/dashboard/components/Newest.vue
+++ b/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('暂无权限查阅')

--- a/src/modules/resource/dashboard/components/RecentLearning.vue
+++ b/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('暂无权限查阅')