学习记录样式修改

src/views/MyCourseStudy/learningProcess.vue

@@ -155,6 +155,7 @@ const goToAnotherPage = (address) => {
         <ul v-if="recordList.length > 0">
           <li v-for="record in recordList" :key="record.id" v-loading="loading">
             <input
+              style="display: flex"
               type="checkbox"
               :value="record.id"
               @change="toggleSelection(record.id)"
@@ -241,29 +242,30 @@ ul {
   padding: 10;
   display: flex;
   flex-wrap: wrap;
-
   justify-content: start;
 }
 li {
+  /* margin-bottom: 30px; */
   transition: filter 0.3s; /* 添加过渡动画 */
-  flex: 0 0 20%;
+  /* flex: 1 0 20%; */
+  width: calc(20% - 20px);
   flex-direction: column;
-
-  margin-bottom: 10px;
-
+  align-items: center;
+  text-align: center;
+  /* margin: 0 15px; */
   padding: 10px;
   box-sizing: border-box;
 
   transition: box-shadow 0.3s;
   cursor: pointer;
-  align-items: center;
 }
 li:hover {
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
 .img {
-  width: 100%;
-  height: 100%;
+  display: block;
+  width: 250px;
+  height: 250px;
 }
 </style>

src/views/courseResources/componse/resourceAdd.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+// import axios from 'axios'
 import { CourseResourceControllerService } from '../../../../generated/services/CourseResourceControllerService'
 const props = defineProps(['dafulIndex'])
 import { QuillEditor } from '@vueup/vue-quill'
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
+import { ElMessage } from 'element-plus'
 //默认抽屉隐藏
 const visibleDramwer = ref(false)
 //默认数据
@@ -63,12 +65,17 @@ const selectOp = ref([
   { label: '文件', value: '5' },
   { label: '音频', value: '6' },
 ])
-const handleSel = () => {}
 
-//上传图片
-import type { UploadProps, UploadUserFile } from 'element-plus'
+const fileList = ref([])
+function clearFileList() {
+  fileList.value.length = 0
+}
+const handleSel = () => {
+  fileList.value.length = 0
+}
 
-const fileList = ref<UploadUserFile[]>([])
+//上传图片
+import type { UploadProps } from 'element-plus'
 
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   console.log(uploadFile, uploadFiles)
@@ -77,6 +84,82 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
 const handlePreview: UploadProps['onPreview'] = (file) => {
   console.log(file)
 }
+const formRef = ref()
+function isSubmit() {
+  formRef.value.validate((valid, fields) => {
+    if (valid) {
+      const params = {
+        name: formModel.value.name,
+        type: selectVal.value,
+        img: fileList.value[0]?.raw,
+        description: formModel.value.description,
+      }
+      console.log('根据参数：', params, '去调用接口？？？')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+// upd
+const beforeAvatarUpload = (rawFile) => {
+  console.log('执行了')
+  switch (+selectVal.value) {
+    case 1:
+      if (rawFile.type !== 'application/vnd.ms-powerpoint') {
+        clearFileList()
+        ElMessage.error('必须是ppt文件！')
+      } else {
+        clearFileList()
+        fileList.value.push(rawFile)
+      }
+      break
+    case 2:
+      if (!rawFile.type.startsWith('image/')) {
+        clearFileList()
+        ElMessage.error('必须是??文件！')
+      } else {
+        clearFileList()
+        fileList.value.push(rawFile)
+      }
+      break
+    // case 3:
+    //   if (false) {
+    //     clearFileList()
+    //     ElMessage.error('必须是??文件！')
+    //   } else {
+    //     clearFileList()
+    //     fileList.value.push(rawFile)
+    //   }
+    //   break
+    // case 4:
+    //   if (false) {
+    //     clearFileList()
+    //     ElMessage.error('必须是??文件！')
+    //   } else {
+    //     clearFileList()
+    //     fileList.value.push(rawFile)
+    //   }
+    //   break
+    // case 5:
+    //   if (false) {
+    //     clearFileList()
+    //     ElMessage.error('必须是??文件！')
+    //   } else {
+    //     clearFileList()
+    //     fileList.value.push(rawFile)
+    //   }
+    //   break
+    // case 6:
+    //   if (false) {
+    //     clearFileList()
+    //     ElMessage.error('必须是??文件！')
+    //   } else {
+    //     clearFileList()
+    //     fileList.value.push(rawFile)
+    //   }
+    //   break
+  }
+}
 </script>
 <template>
   <el-drawer
@@ -118,11 +201,13 @@ const handlePreview: UploadProps['onPreview'] = (file) => {
       <el-form-item label="上传资源" prop="fileList">
         <el-upload
           v-model:file-list="fileList"
+          :limit="1"
           class="upload-demo"
           action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
           :on-preview="handlePreview"
           :on-remove="handleRemove"
           list-type="picture"
+          :before-upload="beforeAvatarUpload"
         >
           <el-button type="primary">点击上传资源</el-button>
           <template #tip>
@@ -135,7 +220,7 @@ const handlePreview: UploadProps['onPreview'] = (file) => {
       <el-form-item label="资源简介" prop="description">
         <div class="editor">
           <quill-editor
-            v-model:description="formModel.description"
+            v-model:content="formModel.description"
             content-type="html"
             theme="snow"
           ></quill-editor>
@@ -143,7 +228,7 @@ const handlePreview: UploadProps['onPreview'] = (file) => {
       </el-form-item>
       <el-form-item>
         <el-button type="primary">取消</el-button>
-        <el-button type="info">确定</el-button>
+        <el-button type="info" @click="isSubmit">确定</el-button>
       </el-form-item>
     </el-form>
   </el-drawer>

src/views/courseResources/index.vue

@@ -185,13 +185,13 @@ const onEditResource = (row) => {
                   <Edit />
                 </el-icon>
               </div>
-              <div
-                class="vedio"
+              <img
+                class="img"
                 @click="generateRecords(resource)"
                 style="margin-top: 10px; margin-bottom: 10px"
-              >
-                <img :src="resource.img" />
-              </div>
+                :src="resource.img"
+              />
+
               <div class="box" style="display: flex; flex-direction: column">
                 <p style="margin-bottom: 10px">{{ resource.name }}</p>
                 <p style="margin-top: 10px">{{ resource.description }}</p>
@@ -243,7 +243,6 @@ const onEditResource = (row) => {
 }
 .body {
   background-color: #fff;
-  height: 100%;
 }
 .top {
   margin-bottom: 20px;
@@ -267,7 +266,7 @@ ul {
 }
 li {
   transition: filter 0.3s; /* 添加过渡动画 */
-  flex: 0 0 20%;
+  width: calc(25% - 25px);
   flex-direction: column;
   align-items: center;
   margin-bottom: 10px;
@@ -296,4 +295,9 @@ li:hover {
 .box p:hover {
   font-weight: bold;
 }
+.img {
+  display: block;
+  width: 250px;
+  height: 250px;
+}
 </style>