updates:一期二期部分页面优化

src/components/base/CardListItem.vue

@@ -39,16 +39,21 @@ const bytesToSize = (bytes: number) => {
       </el-icon>
       <div class="tool-pop-btn">
         <router-link v-if="props.data.auth_edit" :to="`${props.path}/update?id=${props.data.id}`">
-          <div class="edit-btn">编辑</div>
+          <div class="edit-btn btn">编辑</div>
         </router-link>
         <router-link v-permission="props.permission.view" :to="`${props.path}/view?id=${props.data.id}`">
-          <div class="view-btn">查看</div>
+          <div class="view-btn btn">查看</div>
         </router-link>
       </div>
     </div>
     <div class="card-item-bottom">
       <div class="item-t">
-        <div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
+        <el-popover trigger="hover" placement="right">
+          <div v-html="props.data.created_operator_name + '/' + props.data.organ_id_name"></div>
+          <template #reference>
+            <div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
+          </template>
+        </el-popover>
         <div :class="props.data.status == 1 ? 'tag green' : 'tag'">{{ props.data.status_name }}</div>
       </div>
       <div class="item-b">
@@ -126,14 +131,15 @@ const bytesToSize = (bytes: number) => {
       .edit-btn {
         width: 113px;
         line-height: 32px;
-        border: 1px solid #d3d3d3;
         border-radius: 18px;
         text-align: center;
         font-size: 14px;
         color: #ffffff;
         margin: 0 auto 12px;
         cursor: pointer;
+        background: #aa1941;
       }
+
       .view-btn {
         width: 113px;
         line-height: 32px;
@@ -145,6 +151,10 @@ const bytesToSize = (bytes: number) => {
         margin: 0 auto;
         cursor: pointer;
       }
+      .btn:hover {
+        background: none;
+        border: 1px solid #d3d3d3;
+      }
     }
   }
 }

src/modules/course/create/components/stepTwoComponents/AddExamDialog.vue

@@ -144,12 +144,16 @@ const typeFilter = () => {
     size="70%"
     :title="`添加${props.btnInfo.btn_name}`"
   >
+    <div class="btn-box">
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </div>
     <div class="video-head">
       <el-tabs @tab-change="tabChange" v-model="tabValue">
         <el-tab-pane label="我的资源" name="1"></el-tab-pane>
         <el-tab-pane label="公开资源" name="2"></el-tab-pane>
       </el-tabs>
     </div>
+
     <AppList v-bind="listOptions" ref="appList" @select="handleSelection">
       <template #filter-type="{ params }">
         <el-tree-select
@@ -164,13 +168,15 @@ const typeFilter = () => {
         />
       </template>
     </AppList>
-    <div class="btn-box" style="display: flex; justify-content: center">
-      <el-button type="primary" @click="handleSave">保存</el-button>
-    </div>
   </el-drawer>
 </template>
 <style lang="scss" scoped>
 :deep(.el-table__header-wrapper .el-checkbox) {
   display: none;
 }
+.btn-box {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: -20px;
+}
 </style>

src/modules/course/create/components/stepTwoComponents/AddVideoDialog.vue

@@ -3,7 +3,6 @@ import { getVideoList, createCharacter, getCourseListSearch, getLessonList, getO
 import CardListItem from './CardListItem.vue'
 import { useGetCategoryList } from '@/composables/useGetCategoryList'
 const appList = ref()
-const currentResource: any = $ref('')
 // 资源出处 tab触发
 const tabValue = ref('1')
 const path = ref('')
@@ -90,13 +89,13 @@ const handleCancel = () => {
   emit('update:isShowAddDialog', false)
 }
 // 保存 添加
-const handleSave = () => {
+const handleAdd = (val: any) => {
   const params: any = {
-    name: tableData.list.filter((item: any) => item.id === currentResource)[0]?.name,
+    name: val.name,
     course_id: props.course_id,
     resource_type: props.btnInfo.resource_type,
     parent_id: props.chapterID,
-    resource_id: currentResource
+    resource_id: val.id
   }
   createCharacter(params).then(() => {
     emit('update:isShowAddDialog', false)
@@ -142,26 +141,20 @@ if (props.btnInfo.resource_type === '2') {
       <template #body="{ data }">
         <div class="card-list" v-if="data.length">
           <div class="card-list-con">
-            <el-radio-group v-model="currentResource">
-              <div style="position: relative" v-for="(item, index) in data" :key="index">
-                <el-radio
-                  v-model="item.check_status"
-                  :label="item.id"
-                  style="position: absolute; right: 15px; bottom: 22px"
-                >
-                  {{ '' }}</el-radio
-                >
-                <CardListItem :tabIndex="tabValue" :data="item" :path="path"> </CardListItem>
-              </div>
-            </el-radio-group>
+            <CardListItem
+              v-for="(item, index) in data"
+              :key="index"
+              :tabIndex="tabValue"
+              :data="item"
+              :path="path"
+              @add="handleAdd"
+            >
+            </CardListItem>
           </div>
         </div>
         <el-empty v-else description="暂无数据" />
       </template>
     </AppList>
-    <div class="btn-box" style="display: flex; justify-content: center">
-      <el-button type="primary" @click="handleSave">保存</el-button>
-    </div>
   </el-drawer>
 </template>
 <style lang="scss" scoped>

src/modules/course/create/components/stepTwoComponents/CardListItem.vue

 <script setup lang="ts">
 const props: any = defineProps<{ data: object; tabIndex: string; path: string }>()
+const emit = defineEmits<Emits>()
+interface Emits {
+  (e: 'add', id: object): void
+}
+const handleAdd = () => {
+  emit('add', props.data)
+}
 </script>
 <template>
-  <!-- <div>{{ props.data }}</div> -->
   <div class="card-item">
     <div class="card-item-top">
-      <div class="title">{{ props.data.name }}</div>
-      <!-- <img :src="props.data.cover" /> -->
       <div class="cover-img" :style="`background-image:url(${props.data.cover})`"></div>
       <div class="tool-pop-btn">
         <div style="min-width: 100%">
-          <!-- <router-link v-if="props.data.auth_edit" :to="`/resource/video/update?id=${props.data.id}`">
-            <div class="edit-btn">编辑</div>
-          </router-link> -->
+          <div class="edit-btn btn" @click="handleAdd">添加</div>
         </div>
         <div style="min-width: 100%">
           <router-link v-if="props.data.auth_view" :to="`${props.path}?id=${props.data.id}`">
-            <div class="view-btn">查看</div>
+            <div class="view-btn btn">查看</div>
           </router-link>
         </div>
       </div>
@@ -85,13 +87,13 @@ const props: any = defineProps<{ data: object; tabIndex: string; path: string }>
       .edit-btn {
         width: 113px;
         line-height: 32px;
-        border: 1px solid #d3d3d3;
         border-radius: 18px;
         text-align: center;
         font-size: 14px;
         color: #ffffff;
         margin: 0 auto 12px;
         cursor: pointer;
+        background: #aa1941;
       }
       .view-btn {
         width: 113px;
@@ -104,6 +106,10 @@ const props: any = defineProps<{ data: object; tabIndex: string; path: string }>
         margin: 0 auto;
         cursor: pointer;
       }
+      .btn:hover {
+        background: none;
+        border: 1px solid #d3d3d3;
+      }
     }
   }
 }

src/modules/course/create/views/StepOne.vue

 <script setup lang="ts">
-import { createCourse, getCourseDetails, updateCourse } from '../api'
-// getMajorList
+import { createCourse, getCourseDetails, updateCourse, getMajorList } from '../api'
+//
 // setStatus
 import { useGetCategoryList } from '@/composables/useGetCategoryList'
 import { useMapStore } from '@/stores/map'
@@ -20,8 +20,8 @@ const route = useRoute()
 const router = useRouter()
 
 const id = route.query.id as string
-// const majorList: any = ref([])
-// const allMajorList: any = ref([])
+const majorList: any = ref([])
+const allMajorList: any = ref([])
 
 // is 编辑 新建
 const isUpdate = $computed(() => {
@@ -47,7 +47,7 @@ const electiveType = computed<ICourseList[]>(() => {
 })
 
 // 下拉选择tree 视频分类
-let { list: selectTree } = useGetCategoryList()
+let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = { children: 'children', label: 'category_name', value: 'id' }
 
 // form
@@ -65,8 +65,8 @@ const form = reactive<Record<string, any>>({
   previous_preparation: '',
   target: '',
   exam_id: '',
-  live_id: ''
-  // specialty_id: ''
+  live_id: '',
+  specialty_id: []
 })
 
 // 表单验证
@@ -79,8 +79,8 @@ const rules = reactive<FormRules>({
     { required: true, message: '请输入学分' },
     { pattern: /\d/, message: '请输入数字' }
   ],
-  lecturer_id: [{ required: true, message: '请添加课程讲师' }]
-  // specialty_id: [{ required: true, message: '请选择适用专业' }]
+  lecturer_id: [{ required: true, message: '请添加课程讲师' }],
+  specialty_id: [{ required: true, message: '请选择适用专业' }]
 })
 
 // 课程封面dialog
@@ -107,9 +107,12 @@ let loading = $ref<boolean>(false)
 function fetchDetail() {
   loading = true
   getCourseDetails({ id }).then((res: any) => {
+    console.log(res.data)
     Object.assign(form, res.data)
     examList.value = res.data.examinations
     form.exam_id = res.data.examinations.map((item: any) => item.id).toString()
+    form.specialty_id = res.data.specialty.map((item: any) => item.id)
+    console.log(form.specialty_id, 'form.specialty_id')
     loading = false
   })
 }
@@ -119,7 +122,6 @@ onMounted(() => {
 
 watchEffect(() => {
   form.lecturer_id = setDefaultData(form.lecturers)
-  // form.exam_id = setDefaultData(examList.value)
   form.live_id = setDefaultData(form.meetings)
 })
 
@@ -129,6 +131,7 @@ watch(
     ruleFormRef?.validateField('lecturer_id')
   }
 )
+
 function setDefaultData(data: any[] = []) {
   return data.map((item: any) => item.id).join()
 }
@@ -145,6 +148,8 @@ function handleSubmit() {
 }
 // 创建课程
 function handleCreate() {
+  form.specialty_id = form.specialty_id.toString()
+
   createCourse(form).then((res: any) => {
     if (res.code === 0) {
       // 操作第二部
@@ -157,6 +162,8 @@ function handleCreate() {
 }
 // 修改课程
 function handleUpdate() {
+  console.log(form, '0000')
+  form.specialty_id = form.specialty_id.toString()
   updateCourse(form).then((res: any) => {
     if (res.code === 0) {
       // 操作第二部
@@ -170,18 +177,19 @@ function handleUpdate() {
 
 // const handleMajorList = (query: string) => {
 //   if (query) {
-//     getMajorList({ name: query, 'per-page': '100' }).then((res: any) => {
-//       majorList.value = res.data.list
-//       majorList.value.forEach((item: any) => {
-//         const findItem = allMajorList.value.find((cItem: any) => cItem.id === item.id)
-//         if (!findItem) {
-//           allMajorList.value.push(item)
-//         }
-//       })
-//     })
-//   } else {
-//     majorList.value = []
-//   }
+getMajorList({ name: '', 'per-page': '100' }).then((res: any) => {
+  majorList.value = res.data.list
+  majorList.value.forEach((item: any) => {
+    console.log(item, 'ppp')
+    const findItem = allMajorList.value.find((cItem: any) => cItem.id === item.id)
+    if (!findItem) {
+      allMajorList.value.push(item)
+    }
+  })
+})
+// } else {
+//   majorList.value = []
+// }
 // }
 </script>
 
@@ -214,22 +222,18 @@ function handleUpdate() {
               style="width: 100%"
               v-model="form.classification"
               :data="selectTree"
+              node-key="id"
+              :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
+              placeholder="请选择课程分类"
             />
           </el-form-item>
           <el-form-item label="课程学分" prop="credit">
             <el-input v-model="form.credit" maxlength="3" />
           </el-form-item>
-          <!-- <el-form-item label="适用专业" prop="specialty_id">
-            <el-select
-              v-model="form.specialty_id"
-              placeholder="请选择适用专业"
-              style="width: 100%"
-              clearable
-              filterable
-              remote
-              :remote-method="handleMajorList"
-              :loading="loading"
-            >
+          <el-form-item label="适用专业" prop="specialty_id">
+            <el-select v-model="form.specialty_id" placeholder="请选择适用专业" style="width: 100%" clearable multiple>
+              <!-- :remote-method="handleMajorList" -->
+
               <el-option
                 v-for="(item, index) in majorList"
                 :key="index"
@@ -237,7 +241,7 @@ function handleUpdate() {
                 :value="item.id"
               ></el-option>
             </el-select>
-          </el-form-item> -->
+          </el-form-item>
         </el-form>
       </div>
       <el-form

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

@@ -17,24 +17,22 @@ const copyCourse = () => {
 }
 </script>
 <template>
-  <!-- <div>{{ props.data }}</div> -->
   <div class="card-item">
     <div class="card-item-top">
       <div class="title">{{ props.data.name }}</div>
-      <!-- <img :src="props.data.cover" /> -->
       <div class="cover-img" :style="`background-image:url(${props.data.cover})`"></div>
       <div class="tool-pop-btn">
         <div style="min-width: 100%">
           <router-link v-if="props.data.auth_edit" :to="`/course/update-course?id=${props.data.id}`">
-            <div class="edit-btn">编辑</div>
+            <div class="edit-btn btn">编辑</div>
           </router-link>
         </div>
         <div style="min-width: 100%">
           <router-link v-if="props.data.auth_view" :to="`/course/my/view?id=${props.data.id}`">
-            <div class="view-btn">查看</div>
+            <div class="view-btn btn">查看</div>
           </router-link>
           <div style="min-width: 100%" v-if="props.data.auth_copy">
-            <div class="copy-btn" plain @click="copyCourse">复制</div>
+            <div class="copy-btn btn" plain @click="copyCourse">复制</div>
           </div>
         </div>
       </div>
@@ -105,12 +103,12 @@ const copyCourse = () => {
       .edit-btn {
         width: 113px;
         line-height: 32px;
-        border: 1px solid #d3d3d3;
         border-radius: 18px;
         text-align: center;
         font-size: 14px;
         color: #ffffff;
         margin: 0 auto 5px;
+        background: #aa1941;
         cursor: pointer;
       }
       .view-btn {
@@ -132,7 +130,11 @@ const copyCourse = () => {
         font-size: 14px;
         color: #ffffff;
         margin: 5px auto;
+        background: #aa1941;
         cursor: pointer;
+      }
+      .btn:hover {
+        background: none;
         border: 1px solid #d3d3d3;
       }
     }

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

@@ -69,12 +69,12 @@ const bytesToSize = (bytes: number) => {
   justify-content: space-around;
   .item {
     padding-top: 15px;
-    min-width: 110px;
+    min-width: 19%;
     height: 140px;
     border: 1px solid #e5e5e5;
     border-radius: 6px;
     box-sizing: border-box;
-    margin-right: 20px;
+    margin-right: 1%;
     margin-top: 20px;
     // &:nth-child(1) {
     //   .icon {

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

@@ -93,6 +93,7 @@ const id = route.query.id ? route.query.id : (route.params.courseId as string)
           color: #ffffff;
           margin-bottom: 20px;
           cursor: pointer;
+          text-indent: 1em;
         }
       }
     }

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

@@ -14,88 +14,6 @@ watch(
   }
 )
 
-interface IBasicInfo {
-  icon: string
-  label: string
-  value: string
-  key: string
-}
-
-const basicInfo = computed((): IBasicInfo[] => {
-  const basicList = [
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon1.png',
-      label: '课程类型',
-      value: '',
-      key: 'online_type_name'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon2.png',
-      label: '课程分类',
-      value: '',
-      key: 'classification_name'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon3.png',
-      label: '课程学分',
-      value: '',
-      key: 'credit'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon14.png',
-      label: '适用专业',
-      value: '',
-      key: 'specialty'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon4.png',
-      label: '创建人',
-      value: '',
-      key: 'created_operator_name'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon6.png',
-      label: '更新人',
-      value: '',
-      key: 'updated_operator_name'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon13.png',
-      label: '负责人',
-      value: '',
-      key: 'belong_operator_name'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon5.png',
-      label: '选课类型',
-      value: '',
-      key: 'elective_type_name'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon7.png',
-      label: '是否有效',
-      value: '',
-      key: 'status_name'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon8.png',
-      label: '创建时间',
-      value: '',
-      key: 'created_time'
-    },
-    {
-      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon9.png',
-      label: '更新时间',
-      value: '',
-      key: 'updated_time'
-    }
-  ]
-  basicList.map((item: any) => {
-    item.value = props?.data[item.key] || '-'
-    return item
-  })
-  return basicList
-})
 const add0 = (m: number) => {
   return m < 10 ? '0' + m : m
 }
@@ -178,50 +96,32 @@ const liveOptions = computed(() => {
 </script>
 <template>
   <div class="info-box">
-    <div class="top-info">
-      <div class="cover"></div>
-      <div class="infos">
-        <div class="item" v-for="item in basicInfo" :key="item.key">
-          <img :src="item.icon" />
-          <div class="item-right">
-            <div class="label">{{ item.label }}</div>
-            <div class="value">{{ item.value.toString() || '-' }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <div class="info_title">课程授权信息</div>
 
     <div class="bottom-info">
-      <div class="lecturer-list">
-        <div v-for="item in props.data.lecturers" :key="item.id">
-          <el-popover :title="item.name" trigger="hover" placement="right">
-            <div v-html="item.summarize"></div>
-            <template #reference>
-              <div class="item">
-                <div class="avatar" :style="`background-image:url(${item.avatar})`"></div>
-                <div class="name">{{ item.name }}</div>
-              </div>
-            </template>
-          </el-popover>
-        </div>
-      </div>
       <div class="other-info">
         <div class="item">
           <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon11.png" />
-          <div class="label">课程所属部门</div>
-          <div class="value">{{ props.data.organ_id_name }}</div>
+          <div>
+            <div class="label">课程所属部门</div>
+            <div class="value">{{ props.data.organ_id_name }}</div>
+          </div>
         </div>
         <div class="item">
           <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon12.png" />
-          <div class="label">课程公开信息</div>
-          <div class="value">{{ props.data.department_public_name }}</div>
-          <div class="value">{{ props.data.platform_public_name }}</div>
+          <div>
+            <div class="label">课程公开信息</div>
+            <div class="value">{{ props.data.department_public_name }}</div>
+            <div class="value">{{ props.data.platform_public_name }}</div>
+          </div>
         </div>
         <div class="item">
           <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon15.png" />
-          <div class="label">课程授权信息</div>
-          <div class="value" v-for="(item, index) in props.data.auth_departments" :key="index">
-            {{ item.department_name }}
+          <div>
+            <div class="label">课程授权信息</div>
+            <div class="value" v-for="(item, index) in props.data.auth_departments" :key="index">
+              {{ item.department_name }}
+            </div>
           </div>
         </div>
       </div>
@@ -250,66 +150,43 @@ const liveOptions = computed(() => {
 </template>
 <style lang="scss" scoped>
 .info-box {
-  background: #f7f7f7;
+  // background: #f7f7f7;
+  background: #fff;
   border-radius: 10px;
   padding: 25px 17px;
 }
-.top-info {
-  display: flex;
-  .cover {
-    min-width: 240px;
-    height: 180px;
-    background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course_default.png);
-    background-size: cover;
-  }
-  .infos {
-    padding-left: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    .item {
-      width: 180px;
-      display: flex;
-      align-items: center;
-      height: fit-content;
-      margin: 10px 0 0;
-      .item-right {
-        margin-left: 15px;
-        .label {
-          font-size: 14px;
-          line-height: 100%;
-          color: #999999;
-          margin-bottom: 8px;
-        }
-        .value {
-          font-size: 16px;
-          font-weight: 500;
-          line-height: 100%;
-          color: #333333;
-        }
-      }
-    }
-  }
+.info_title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333333;
+  opacity: 1;
 }
 .bottom-info {
   display: flex;
   padding-top: 20px;
   .other-info {
-    width: 594px;
-    background: #ebe4d9;
+    width: 100%;
+    height: 140px;
+    background: rgba(244, 244, 244, 0.39);
     border-radius: 6px;
     display: flex;
-    padding: 64px 0 38px;
+    justify-content: space-around;
+    padding: 27px 55px 24px 32px;
+    box-sizing: border-box;
     .item {
-      flex: 1;
-      &:nth-child(2) {
-        // height: 150px;
-        border-left: 1px solid #ddb67c;
-        border-right: 1px solid #ddb67c;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-right: 1px dashed #ddb67c;
+      width: 33%;
+
+      &:last-child {
+        border: none;
       }
       img {
         width: 52px;
+        height: 52px;
         display: block;
-        margin: 0 auto;
       }
       .label {
         font-size: 14px;
@@ -317,7 +194,8 @@ const liveOptions = computed(() => {
         color: #666666;
         padding-top: 10px;
         padding-bottom: 13px;
-        text-align: center;
+        text-align: left;
+        margin-left: 15px;
       }
       .value {
         font-size: 16px;
@@ -325,7 +203,8 @@ const liveOptions = computed(() => {
         line-height: 100%;
         color: #333333;
         margin-bottom: 10px;
-        text-align: center;
+        text-align: left;
+        margin-left: 15px;
       }
     }
   }

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

+<script setup lang="ts">
+const props: any = defineProps({
+  data: {
+    type: Object
+  }
+})
+
+interface IBasicInfo {
+  icon: string
+  label: string
+  value: string
+  key: string
+  border: string
+}
+
+const basicInfo = computed((): IBasicInfo[] => {
+  const basicList = [
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon1.png',
+      label: '课程类型',
+      value: '',
+      key: 'online_type_name',
+      border: '1'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon5.png',
+      label: '选课类型',
+      value: '',
+      key: 'elective_type_name',
+      border: '1'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon3.png',
+      label: '课程学分',
+      value: '',
+      key: 'credit',
+      border: '1'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon13.png',
+      label: '负责人',
+      value: '',
+      key: 'belong_operator_name',
+      border: '1'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon8.png',
+      label: '创建时间',
+      value: '',
+      key: 'created_time',
+      border: '0'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon2.png',
+      label: '课程分类',
+      value: '',
+      key: 'classification_name',
+      border: '1'
+    },
+
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon14.png',
+      label: '适用专业',
+      value: '',
+      key: 'specialty',
+      border: '1'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon7.png',
+      label: '是否有效',
+      value: '',
+      key: 'status_name',
+      border: '1'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon6.png',
+      label: '更新人',
+      value: '',
+      key: 'updated_operator_name',
+      border: '1'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon9.png',
+      label: '更新时间',
+      value: '',
+      key: 'updated_time',
+      border: '0'
+    }
+  ]
+  basicList.map((item: any) => {
+    item.value = props?.data[item.key] || '-'
+    return item
+  })
+  return basicList
+})
+</script>
+<template>
+  <div class="top-info">
+    <div class="cover"></div>
+    <div class="info">
+      <div class="info-list">
+        <div
+          class="item"
+          v-for="item in basicInfo"
+          :key="item.key"
+          :style="item.border === '1' ? 'border-right:1px dashed #BFBFBF' : 'border-right:none'"
+        >
+          <img :src="item.icon" />
+          <div class="item-right">
+            <div class="label">{{ item.label }}</div>
+            <div class="value">{{ item.value.toString() || '-' }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="lecturer-list">
+        <div class="list-name">讲师</div>
+        <div v-for="item in props.data.lecturers" :key="item.id">
+          <el-popover :title="item.name" trigger="hover" placement="right">
+            <div v-html="item.summarize"></div>
+            <template #reference>
+              <div class="item">
+                <div class="avatar" :style="`background-image:url(${item.avatar})`"></div>
+                <div class="name">{{ item.name }}</div>
+              </div>
+            </template>
+          </el-popover>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.top-info {
+  display: flex;
+  justify-content: center;
+  background: #fff;
+  border-radius: 10px;
+  padding: 25px 20px;
+  .cover {
+    min-width: 240px;
+    height: 180px;
+    background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course_default.png);
+    background-size: cover;
+    border-radius: 6px;
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    box-sizing: border-box;
+    width: calc(100vw - 400px);
+    .info-list {
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      .item {
+        width: 15%;
+        display: flex;
+        align-items: center;
+        height: fit-content;
+        margin-left: 2%;
+        margin-bottom: 21px;
+        .item-right {
+          margin-left: 15px;
+          .label {
+            font-size: 14px;
+            line-height: 100%;
+            color: #999999;
+            margin-bottom: 8px;
+          }
+          .value {
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 100%;
+            color: #333333;
+          }
+        }
+      }
+    }
+    .lecturer-list {
+      width: 230px;
+      display: flex;
+      justify-content: center;
+      .list-name {
+        width: 18px;
+        height: 40px;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+        color: #333333;
+        opacity: 1;
+      }
+      .item {
+        margin-left: 25px;
+        width: 115px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .avatar {
+          width: 40px;
+          height: 40px;
+          background-size: cover;
+          border-radius: 50%;
+          margin: 0 auto;
+        }
+        .name {
+          text-align: center;
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 100%;
+          color: #333333;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -100,5 +100,6 @@ const changeVideo = (index: number) => {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  color: #fff;
 }
 </style>

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

 <script setup lang="ts">
 import { getCourseList } from '../api'
 import CardListItem from '../components/CardListItem.vue'
-import { Expand, PictureFilled } from '@element-plus/icons-vue'
+import { PictureFilled } from '@element-plus/icons-vue'
 import { useProjectList } from '@/composables/useGetProjectList'
 import { useUserStore } from '@/stores/user'
 
@@ -87,7 +87,14 @@ const changeCard = () => {
         <el-tab-pane label="部门课程" name="2"></el-tab-pane>
         <el-tab-pane label="公开课程" name="3"></el-tab-pane>
       </el-tabs>
-      <el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
+      <div class="video-head-icon" @click="changeCard">
+        <img
+          v-if="!isCard"
+          src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
+          alt=""
+        />
+        <img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
+      </div>
     </div>
     <div class="video-tool-btn">
       <router-link v-if="tabValue === '1'" to="/course/update-course">

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

 <script setup lang="ts">
 import ViewCourseInfo from '../components/ViewCourseInfo.vue'
+import ViewCourseInfoTop from '../components/ViewCourseInfoTop.vue'
 import ViewCourseChapter from '../components/ViewCourseChapter.vue'
 import Operation from '../components/Operation.vue'
 import { getViewCourseDetails } from '../api'
@@ -29,11 +30,14 @@ const handleFresh = () => {
   <AppCard title="查阅课程">
     <Operation :data="courseDetails" @update="handleFresh"></Operation>
     <div class="course-view">
+      <ViewCourseInfoTop :data="courseDetails"></ViewCourseInfoTop>
+
       <div class="course-left_info">
-        <ViewCourseInfo :data="courseDetails"></ViewCourseInfo>
+        <ViewCourseInfo :data="courseDetails" class="info_bottom"></ViewCourseInfo>
         <ViewCourseChapter
           v-if="Object.keys(courseDetails).length"
           :data="courseDetails.chapters[0]?.children || []"
+          class="info_chapter"
         ></ViewCourseChapter>
       </div>
     </div>
@@ -41,10 +45,19 @@ const handleFresh = () => {
 </template>
 <style lang="scss" scoped>
 .course-view {
+  border: 1px solid #bfbfbf;
+
+  border-radius: 10px;
   display: flex;
+  flex-direction: column;
   .course-left_info {
-    width: 840px;
     display: flex;
+    .info_bottom {
+      width: 67%;
+    }
+    .info_chapter {
+      width: 25%;
+    }
   }
 }
 </style>

src/modules/resource/courseware/views/List.vue

 <script setup lang="ts">
 import { getCourseList } from '../api'
 import CardListItem from '@/components/base/CardListItem.vue'
-import { Expand } from '@element-plus/icons-vue'
 import { useMapStore } from '@/stores/map'
 import { useGetCategoryList } from '@/composables/useGetCategoryList'
 import { useProjectList } from '@/composables/useGetProjectList'
@@ -17,7 +16,7 @@ const store = useMapStore()
 const departmentList: any = useProjectList('', '79806610719731712').departmentList
 
 // 下拉选择tree 视频分类
-let { list: selectTree } = useGetCategoryList()
+let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
@@ -99,10 +98,21 @@ const typeFilter = () => {
         <el-tab-pane label="部门资源" name="2"></el-tab-pane>
         <el-tab-pane label="公开资源" name="3"></el-tab-pane>
       </el-tabs>
-      <el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
+      <div class="video-head-icon" @click="changeCard">
+        <img
+          v-if="!isCard"
+          src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
+          alt=""
+        />
+        <img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
+      </div>
     </div>
     <div class="video-tool-btn">
-      <router-link v-if="tabValue === '1'" v-permission="'v1-resource-courseware-create'" to="/resource/courseware/update">
+      <router-link
+        v-if="tabValue === '1'"
+        v-permission="'v1-resource-courseware-create'"
+        to="/resource/courseware/update"
+      >
         <el-button type="primary" round>新建课件资源</el-button>
       </router-link>
     </div>
@@ -110,11 +120,13 @@ const typeFilter = () => {
       <template #header-aside></template>
       <template #filter-type="{ params }">
         <el-tree-select
+          node-key="id"
           @change="typeFilter"
           clearable
           :props="defaultProps"
           v-model="params.classification"
           :data="selectTree"
+          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
         />
       </template>
       <template v-if="tabValue == '3' && isAdmin" #filter-department="{ params }">

src/modules/resource/courseware/views/Update.vue

@@ -31,7 +31,7 @@ if (isUpdate) {
 }
 
 // 下拉选择tree 视频分类
-let { list: selectTree } = useGetCategoryList()
+let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
@@ -173,6 +173,8 @@ const changeProtocol = (data: any) => {
           v-model="form.classification"
           :data="selectTree"
           placeholder="请选择课件分类"
+          node-key="id"
+          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
         />
       </el-form-item>
       <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点：">

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

@@ -40,16 +40,16 @@ const bytesToSize = (bytes: number) => {
 <style lang="scss" scoped>
 .statistics-list {
   display: flex;
-  flex-wrap: wrap;
+  // flex-wrap: wrap;
   margin-top: -20px;
   .item {
     padding-top: 15px;
-    min-width: 110px;
+    min-width: 10%;
     height: 140px;
     border: 1px solid #e5e5e5;
     border-radius: 6px;
     box-sizing: border-box;
-    margin-right: 20px;
+    margin-right: 1%;
     margin-top: 20px;
     &:nth-child(1) {
       .icon {

src/modules/resource/lessonplan/views/List.vue

 <script setup lang="ts">
 import { getLessonList } from '../api'
 import CardListItem from '@/components/base/CardListItem.vue'
-import { Expand } from '@element-plus/icons-vue'
 import { useMapStore } from '@/stores/map'
 import { useGetCategoryList } from '@/composables/useGetCategoryList'
 import { useProjectList } from '@/composables/useGetProjectList'
@@ -25,7 +24,7 @@ const changeCard = () => {
 const departmentList: any = useProjectList('', '79806610719731712').departmentList
 
 // 下拉选择tree 视频分类
-let { list: selectTree } = useGetCategoryList()
+let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
@@ -99,10 +98,21 @@ const typeFilter = () => {
         <el-tab-pane label="部门资源" name="2"></el-tab-pane>
         <el-tab-pane label="公开资源" name="3"></el-tab-pane>
       </el-tabs>
-      <el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
+      <div class="video-head-icon" @click="changeCard">
+        <img
+          v-if="!isCard"
+          src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
+          alt=""
+        />
+        <img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
+      </div>
     </div>
     <div class="video-tool-btn">
-      <router-link v-if="tabValue === '1'" v-permission="'v1-resource-lesson-plan-create'" to="/resource/lessonplan/update">
+      <router-link
+        v-if="tabValue === '1'"
+        v-permission="'v1-resource-lesson-plan-create'"
+        to="/resource/lessonplan/update"
+      >
         <el-button type="primary" round>新建教案资源</el-button>
       </router-link>
     </div>
@@ -110,11 +120,13 @@ const typeFilter = () => {
       <template #header-aside></template>
       <template #filter-type="{ params }">
         <el-tree-select
+          node-key="id"
           @change="typeFilter"
           clearable
           :props="defaultProps"
           v-model="params.classification"
           :data="selectTree"
+          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
         />
       </template>
       <template v-if="tabValue == '3' && isAdmin" #filter-department="{ params }">

src/modules/resource/lessonplan/views/Update.vue

@@ -31,7 +31,7 @@ if (isUpdate) {
 }
 
 // 下拉选择tree 视频分类
-let { list: selectTree } = useGetCategoryList()
+let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
@@ -171,6 +171,8 @@ const changeProtocol = (data: any) => {
           style="width: 100%"
           v-model="form.classification"
           :data="selectTree"
+          node-key="id"
+          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
         />
       </el-form-item>
       <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点：">

src/modules/resource/other/views/List.vue

 <script setup lang="ts">
 import { getOtherList } from '../api'
 import CardListItem from '@/components/base/CardListItem.vue'
-import { Expand } from '@element-plus/icons-vue'
 import { useMapStore } from '@/stores/map'
 import { useProjectList } from '@/composables/useGetProjectList'
 // 下拉选择tree 视频分类
@@ -100,7 +99,14 @@ const typeFilter = () => {
         <el-tab-pane label="部门资源" name="2"></el-tab-pane>
         <el-tab-pane label="公开资源" name="3"></el-tab-pane>
       </el-tabs>
-      <el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
+      <div class="video-head-icon" @click="changeCard">
+        <img
+          v-if="!isCard"
+          src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
+          alt=""
+        />
+        <img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
+      </div>
     </div>
     <div class="video-tool-btn">
       <router-link

src/modules/resource/video/components/CardListItem.vue

@@ -10,19 +10,24 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
       <div class="tool-pop-btn">
         <div style="min-width: 100%">
           <router-link v-if="props.data.auth_edit" :to="`/resource/video/update?id=${props.data.id}`">
-            <div class="edit-btn">编辑</div>
+            <div class="edit-btn btn">编辑</div>
           </router-link>
         </div>
         <div style="min-width: 100%">
           <router-link v-if="props.data.auth_view" :to="`/resource/video/view?id=${props.data.id}`">
-            <div class="view-btn">查看</div>
+            <div class="view-btn btn">查看</div>
           </router-link>
         </div>
       </div>
     </div>
     <div class="card-item-bottom">
       <div class="item-t">
-        <div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
+        <el-popover trigger="hover" placement="right">
+          <div v-html="props.data.created_operator_name + '/' + props.data.organ_id_name"></div>
+          <template #reference>
+            <div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
+          </template>
+        </el-popover>
         <div :class="props.data.status == 1 ? 'tag green' : 'tag'">{{ props.data.status_name }}</div>
       </div>
       <div class="item-b">
@@ -82,7 +87,7 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
       .edit-btn {
         width: 113px;
         line-height: 32px;
-        border: 1px solid #d3d3d3;
+        background: #aa1941;
         border-radius: 18px;
         text-align: center;
         font-size: 14px;
@@ -90,6 +95,10 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
         margin: 0 auto 12px;
         cursor: pointer;
       }
+      .btn:hover {
+        background: none;
+        border: 1px solid #d3d3d3;
+      }
       .view-btn {
         width: 113px;
         line-height: 32px;

src/modules/resource/video/views/List.vue

 <script setup lang="ts">
 import { getVideoList } from '../api'
 import CardListItem from '../components/CardListItem.vue'
-import { Expand, PictureFilled } from '@element-plus/icons-vue'
+import { PictureFilled } from '@element-plus/icons-vue'
 import { useGetCategoryList } from '@/composables/useGetCategoryList'
 import { useProjectList } from '@/composables/useGetProjectList'
 import { useMapStore } from '@/stores/map'
@@ -17,13 +17,12 @@ const store = useMapStore()
 const departmentList: any = useProjectList('', '79806610719731712').departmentList
 
 // 筛选下拉选择tree 视频分类
-let { list: selectTree } = useGetCategoryList()
+let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
   value: 'id'
 }
-
 // 资源出处 tab触发
 const tabValue = ref('1')
 const appList = ref()
@@ -101,7 +100,14 @@ const changeCard = () => {
         <el-tab-pane label="部门资源" name="2"></el-tab-pane>
         <el-tab-pane label="公开资源" name="3"></el-tab-pane>
       </el-tabs>
-      <el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
+      <div class="video-head-icon" @click="changeCard">
+        <img
+          v-if="!isCard"
+          src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
+          alt=""
+        />
+        <img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
+      </div>
     </div>
     <div class="video-tool-btn">
       <router-link
@@ -132,11 +138,13 @@ const changeCard = () => {
       </template>
       <template #filter-type="{ params }">
         <el-tree-select
+          node-key="id"
           @change="typeFilter"
           clearable
           :props="defaultProps"
           v-model="params.classification"
           :data="selectTree"
+          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
         />
       </template>
       <template v-if="tabValue == '3' && isAdmin" #filter-department="{ params }">

src/modules/resource/video/views/Update.vue

@@ -27,7 +27,7 @@ if (isUpdate) {
 }
 
 // 下拉选择tree 视频分类
-let { list: selectTree } = useGetCategoryList()
+let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
@@ -175,6 +175,8 @@ const changeProtocol = (data: any) => {
           style="width: 100%"
           v-model="form.data.classification"
           :data="selectTree"
+          node-key="id"
+          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
         />
       </el-form-item>
       <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点：">