manHourHousekeeper/fhKeeper/formulahousekeeper/course-pc/src/views/coursemanagement/list copy 2.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" @submit.native.prevent>
                <el-form-item label="课程分类">
                    <el-select v-model="categoryValue" placeholder="请选择" clearable @change="searchList" size="small">
                        <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="课程名称">
                    <el-input v-model="keyword" placeholder="请输入" clearable @change="searchList"
                        size="small"></el-input>
                </el-form-item>
                <el-form-item label="讲师">
                    <el-input v-model="instructor" placeholder="请输入" clearable @change="searchList"
                        size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addCourse()" size="small">添加课程</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="batchManage" size="small">分类管理</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
            <el-table-column type="index" width="50" align="center" label="#"></el-table-column>
            <el-table-column label="封面" width="120" align="center">
                <template slot-scope="scope">
                    <img v-if="scope.row.coverImage" :src="scope.row.coverImage" class="course-cover-image" />
                    <span v-else>无封面</span>
                </template>
            </el-table-column>
            <el-table-column prop="courseTypeName" label="课程分类" min-width="120" align="center"></el-table-column>
            <el-table-column prop="courseName" label="课程名称" min-width="180" align="center"></el-table-column>
            <el-table-column prop="courseInstructor" label="讲师" min-width="120" align="center"></el-table-column>
            <el-table-column prop="coursePrice" label="价格" min-width="100" align="center">
                <template slot-scope="scope">
                    <span>¥{{ scope.row.coursePrice }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="courseDuration" label="课程时间" min-width="120" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.courseDuration ? scope.row.courseDuration + '分钟' : '' }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="340" class-name="btns" header-align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="addVideo(scope.row)">添加视频</el-button>
                    <el-button size="mini" type="primary" @click="addCourse(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
                    <el-button size="mini" :type="scope.row.courseStatus === 1 ? 'warning' : 'success'"
                        @click="uploadItem(scope.row)">{{ scope.row.courseStatus === 1 ? '下架' : '上架' }}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>

        <!-- 分类管理 -->
        <el-dialog :visible.sync="categoryManageVisible" title="分类管理" width="600px">
            <el-table :data="categoryList" style="width: 100%" max-height="400">
                <el-table-column prop="label" label="分类名称" width="180"></el-table-column>
                <el-table-column label="封面" width="180">
                    <template slot-scope="scope">
                        <img v-if="scope.row.coverImage" :src="scope.row.coverImage" class="category-cover-image" />
                        <span v-else>无封面</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="setCategoryCover(scope.$index, scope.row)">设置封面</el-button>
                        <el-button size="mini" type="danger" @click="deleteCategory(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px;">
                <el-form :inline="true" :model="newCategory" class="demo-form-inline">
                    <el-form-item label="分类名称">
                        <el-input v-model="newCategory.label" placeholder="请输入分类名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addCategory">添加</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-dialog">
                <el-button @click="categoryManageVisible = false">关 闭</el-button>
            </span>
        </el-dialog>

        <!-- 设置分类封面 -->
        <el-dialog :visible.sync="coverDialogVisible" title="设置分类封面" width="500px">
            <div class="cover-upload-container">
                <el-upload
                    class="cover-uploader"
                    action="#"
                    :show-file-list="false"
                    :on-change="handleCoverChange"
                    :auto-upload="false"
                    :before-upload="beforeCoverUpload">
                    <img v-if="coverImageUrl" :src="coverImageUrl" class="cover-image" />
                    <i v-else class="el-icon-plus cover-uploader-icon"></i>
                </el-upload>
                <div class="cover-tip">请上传分类封面图片，建议尺寸 16:9</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="coverDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCategoryCover">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 添加课程 -->
        <el-dialog :visible.sync="addDialogVisible" title="添加课程" width="800px" top="6.5vh">
            <el-form :model="courseForm" :rules="courseRules" ref="courseForm" label-width="120px">
                <el-form-item label="课程分类" prop="courseTypeId">
                    <el-select v-model="courseForm.courseTypeId" placeholder="请选择" style="width:100%">
                        <el-option v-for="item in categoryOptions" :key="item.value" 
                            :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程名称" prop="courseName">
                    <el-input v-model="courseForm.courseName" placeholder="请输入课程名称"></el-input>
                </el-form-item>
                <el-form-item label="课程介绍" style="height: 200px;">
                    <quill-editor style="height: 150px" ref="text" v-model="courseForm.courseDesc" class="myQuillEditor" :options="editorOption"/>
                </el-form-item>
                <el-form-item label="课程价格">
                    <el-input-number v-model="courseForm.coursePrice" :min="0" :precision="2"></el-input-number>
                </el-form-item>
                <el-form-item label="课程时间(分钟)">
                    <el-input-number v-model="courseForm.courseDuration" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="课程封面">
                    <el-upload
                        class="cover-uploader"
                        action="#"
                        :show-file-list="false"
                        :on-change="handleCourseCoverChange"
                        :auto-upload="false"
                        :before-upload="beforeCoverUpload">
                        <img v-if="courseForm.coverImageUrl" :src="courseForm.coverImageUrl" class="cover-image" />
                        <i v-else class="el-icon-plus cover-uploader-icon"></i>
                    </el-upload>
                    <div class="cover-tip">建议尺寸 16:9，大小不超过2MB</div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCourseForm">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
// 富文本样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入富文本
import { quillEditor } from 'vue-quill-editor'
export default {
    components: {
        quillEditor, // 富文本
    },
    data() {
        return {
            // 课程表单
            courseForm: {
                courseTypeId: '',
                courseName: '',
                courseDesc: '',
                coursePrice: 0,
                courseDuration: 0,
                coverImageUrl: '',
                coverImageFile: null
            },
            courseRules: {
                courseTypeId: [
                    { required: true, message: '请选择课程分类', trigger: 'change' }
                ],
                courseName: [
                    { required: true, message: '请输入课程名称', trigger: 'blur' }
                ]
            },
            // 课程分类选择
            categoryValue: '',
            categoryOptions: [],
            // 搜索条件
            keyword: null, // 课程名称
            instructor: null, // 讲师

            // 表格相关
            tableHeight: 0,
            listLoading: false,
            total: 0,
            page: 1,
            size: 20,
            list: [],

            // 对话框控制
            categoryManageVisible: false,
            editDialogVisible: false,
            addDialogVisible: false,

            // 分类管理
            categoryList: [],
            newCategory: {
                label: '',
                value: '',
                coverImage: ''
            },

            // 分类封面设置
            coverDialogVisible: false,
            currentCategoryIndex: -1,
            coverImageUrl: '',
            coverImageFile: null,
            
            // 用户信息
            user: sessionStorage.user ? JSON.parse(sessionStorage.user) : {},
            editorOption: { // 富文本框里面的默认值
                placeholder: '请输入内容...',
                modules: {
                    toolbar:[
                        ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
                        // ['blockquote', 'code-block'],     //引用，代码块
                
                        [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
                        // [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                        // [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                        // [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
                        // [{ 'direction': 'rtl' }],             // 文本方向
                
                        [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                
                        [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
                        // [{ 'font': [] }],     //字体
                        [{ 'align': [] }],    //对齐方式
                
                        ['clean'],    //清除字体样式
                        // ['image','video']    //上传图片、上传视频
                        []    //上传图片、上传视频
                    ], //工具栏设置
                },
                theme: 'snow',
            },
        }
    },
    methods: {
        // 分类管理
        batchManage() {
            this.categoryManageVisible = true;
            // 加载分类数据
            this.http.post('/course-type/list', {}, res => {
                if (res.code == "ok") {
                    // 将后端返回的数据转换为前端需要的格式
                    this.categoryList = res.data.map(item => ({
                        label: item.typeName,
                        value: item.id,
                        coverImage: item.coverImage || ''
                    }));
                    
                    // 同步更新下拉选项
                    this.categoryOptions = [...this.categoryList];
                } else {
                    this.$message({
                        message: res.msg || '获取分类列表失败',
                        type: 'error'
                    });
                }
            }, error => {
                this.$message({
                    message: error || '获取分类列表失败',
                    type: 'error'
                });
            });
        },

        // 搜索课程列表
        searchList() {
            this.page = 1;
            this.getList();
        },

        // 获取课程列表
        getList() {
            this.listLoading = true;

            // 调用后端API获取课程列表
            this.http.post('/course-info/list', {
                page: this.page,
                size: this.size,
                courseType: this.categoryValue,
                courseName: this.keyword,
                courseInstructor: this.instructor
            }, res => {
                this.listLoading = false;
                if (res.code == "ok") {
                    this.list = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.$message({
                        message: res.msg || '获取课程列表失败',
                        type: 'error'
                    });
                }
            }, error => {
                this.listLoading = false;
                this.$message({
                    message: error || '获取课程列表失败',
                    type: 'error'
                });
            });
        },

        // 分页相关
        handleCurrentChange(val) {
            this.page = val;
            this.getList();
        },
        handleSizeChange(val) {
            this.page = 1;
            this.size = val;
            this.getList();
        },

        // 删除课程
        deleteItem(row) {
            this.$confirm('确认删除该课程?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 调用后端API删除课程
                this.http.post('/course-info/deleteCourse', {
                    id: row.id
                }, res => {
                    if (res.code == "ok") {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList();
                    } else {
                        this.$message({
                            message: res.msg || '删除课程失败',
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error || '删除课程失败',
                        type: 'error'
                    });
                });
            })
        },

        // 上架/下架课程
        uploadItem(row) {
            const action = row.courseStatus === 1 ? '下架' : '上架';
            this.$confirm(`确认${action}该课程?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 调用后端API上架/下架课程
                this.http.post('/course-info/saveOrUpdate', {
                    id: row.id,
                    courseStatus: row.courseStatus === 1 ? 0 : 1 // 0: 下架, 1: 上架
                }, res => {
                    if (res.code == "ok") {
                        row.courseStatus = row.courseStatus === 1 ? 0 : 1;
                        this.$message({
                            type: 'success',
                            message: `${action}成功!`
                        });
                    } else {
                        this.$message({
                            message: res.msg || `${action}失败`,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error || `${action}失败`,
                        type: 'error'
                    });
                });
            })
        },

        // 保存分类封面
        saveCategoryCover() {
            if (!this.coverImageUrl) {
                this.$message.warning('请先上传封面图片!');
                return;
            }
            
            // 关闭对话框
            this.coverDialogVisible = false;
            this.$message({
                type: 'success',
                message: '设置封面成功!'
            });
        },

        // 处理封面图片变更
        handleCoverChange(file) {
            this.coverImageFile = file.raw;
            if (this.coverImageFile) {
                this.coverImageUrl = URL.createObjectURL(this.coverImageFile);
                
                // 获取当前分类的ID
                if (this.currentCategoryIndex >= 0) {
                    const categoryId = this.categoryList[this.currentCategoryIndex].value;
                    
                    // 立即上传封面图片
                    this.listLoading = true;
                    
                    // 创建FormData对象用于上传文件
                    const formData = new FormData();
                    formData.append('id', categoryId);
                    formData.append('coverImage', this.coverImageFile);
                    
                    // 调用上传图片的API
                    this.http.uploadFile('/course-type/uploadCover', formData, res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            // 上传成功后，获取返回的图片URL
                            const imageUrl = res.data && res.data.url ? res.data.url : this.coverImageUrl;
                            
                            // 更新本地数据
                            this.categoryList[this.currentCategoryIndex].coverImage = imageUrl;
                            
                            // 同步更新到分类选项中
                            const optionIndex = this.categoryOptions.findIndex(item => item.value === categoryId);
                            if (optionIndex !== -1) {
                                this.categoryOptions[optionIndex].coverImage = imageUrl;
                            }
                            
                            this.$message({
                                type: 'success',
                                message: '封面图片上传成功!'
                            });
                        } else {
                            this.$message({
                                message: res.msg || '上传封面图片失败',
                                type: 'error'
                            });
                        }
                    }, error => {
                        this.listLoading = false;
                        this.$message({
                            message: error || '上传封面图片失败',
                            type: 'error'
                        });
                    });
                }
            }
        },

         // 设置分类封面
         setCategoryCover(index, row) {
            this.currentCategoryIndex = index;
            this.coverImageUrl = row.coverImage || '';
            this.coverDialogVisible = true;
        },

        // 处理封面图片上传前的验证
        beforeCoverUpload(file) {
            const isImage = file.type.indexOf('image/') === 0;
            const isLt2M = file.size / 1024 / 1024 < 2;
            
            if (!isImage) {
                this.$message.error('上传封面图片只能是图片格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传封面图片大小不能超过 2MB!');
            }
            
            return isImage && isLt2M;
        },

        // 添加课程
        addCourse(row) {
            this.addDialogVisible = true;
            if(!row) {
                this.courseForm = {
                    courseTypeId: '',
                    courseName: '',
                    courseDesc: '',
                    coursePrice: 0,
                    courseDuration: 0,
                    coverImageUrl: '',
                };
                if (this.$refs.courseForm) {
                    this.$refs.courseForm.resetFields();
                }
            } else {
                console.log(row, '<==== 看看数据')
                const { courseTypeId, courseName, courseDesc, coursePrice, courseDuration, coverImage, id } = row
                this.courseForm = {
                    id,
                    courseTypeId,
                    courseName,
                    courseDesc,
                    coursePrice,
                    courseDuration,
                    coverImageUrl: this.checkAndAddUpload(coverImage)
                }
            }
        },

        // 提交课程表单
        submitCourseForm() {
            this.$refs.courseForm.validate(valid => {
                if (!valid) {
                    return false;
                }
                
                const formData = new FormData();
                if(this.courseForm.id) {
                    formData.append('id', this.courseForm.id);
                }
                formData.append('courseTypeId', this.courseForm.courseTypeId);
                formData.append('courseName', this.courseForm.courseName);
                formData.append('courseDesc', this.courseForm.courseDesc);
                formData.append('coursePrice', this.courseForm.coursePrice);
                formData.append('courseDuration', this.courseForm.courseDuration);
                formData.append('coverImage', this.courseForm.coverImageUrl);

                this.listLoading = true;
                this.http.uploadFile('/course-info/saveOrUpdate', formData, res => {
                    this.listLoading = false;
                    if (res.code === "ok") {
                        this.$message.success('添加课程成功');
                        this.addDialogVisible = false;
                        this.getList();
                    } else {
                        this.$message.error(res.msg || '添加课程失败');
                    }
                }, error => {
                    this.listLoading = false;
                    this.$message.error(error || '添加课程失败');
                });
            });
        },

        // 处理课程封面图片变更
        handleCourseCoverChange(file) {
            const row = file.raw
            const formData = new FormData();
            formData.append('multipartFile', row);
            this.http.uploadFile('/common/uploadFile', formData, res => {
              if (res.code == "ok") {
                this.courseForm.coverImageUrl = this.checkAndAddUpload(res.data)
              } else {
                this.$message({
                  message: res.msg || '图片上传失败',
                  type: 'error'
                });
              }
            })
        },

        checkAndAddUpload(str) {
            if(!str) {
                return '';
            }
            if (str.includes('/upload/')) {
                return str;
            } else {
                return '/upload/' + str;
            }
        },

        // 添加分类
        addCategory() {
            if (!this.newCategory.label || !this.newCategory.label.trim()) {
                this.$message({
                    type: 'warning',
                    message: '请输入分类名称!'
                });
                return;
            }
            
            // 调用后端API保存课程分类
            this.http.post('/course-type/saveOrUpdate', {
                typeName: this.newCategory.label
            }, res => {
                if (res.code == "ok") {
                    // 生成唯一ID作为value，实际项目中应该使用后端返回的ID
                    const categoryId = res.data && res.data.id ? res.data.id : 'category_' + Date.now();
                    this.newCategory.value = categoryId;
                    
                    // 添加到分类列表
                    this.categoryList.push({...this.newCategory});
                    this.categoryOptions.push({...this.newCategory});
                    
                    // 清空输入
                    this.newCategory.label = '';
                    this.newCategory.value = '';
                    
                    this.$message({
                        type: 'success',
                        message: '添加分类成功!'
                    });
                } else {
                    this.$message({
                        message: res.msg || '添加分类失败',
                        type: 'error'
                    });
                }
            }, error => {
                this.$message({
                    message: error || '添加分类失败',
                    type: 'error'
                });
            });
        },
        
        // 删除分类
        deleteCategory(index, row) {
            this.$confirm('确认删除该分类?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 调用后端API删除课程分类
                this.http.post('/course-type/delete', {
                    id: row.value
                }, res => {
                    if (res.code == "ok") {
                        // 从分类列表中删除
                        this.categoryList.splice(index, 1);
                        
                        // 从下拉选项中删除
                        const optionIndex = this.categoryOptions.findIndex(item => item.value === row.value);
                        if (optionIndex !== -1) {
                            this.categoryOptions.splice(optionIndex, 1);
                        }
                        
                        this.$message({
                            type: 'success',
                            message: '删除分类成功!'
                        });
                    } else {
                        this.$message({
                            message: res.msg || '删除分类失败',
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error || '删除分类失败',
                        type: 'error'
                    });
                });
            })
        },
    },

    created() {
        let height = window.innerHeight;
        this.tableHeight = height - 195;
        const that = this;
        window.onresize = function temp() {
            that.tableHeight = window.innerHeight - 195;
        };

        // 初始化分类列表
        this.categoryList = [...this.categoryOptions];
    },

    mounted() {
        // 获取课程分类数据
        this.http.post('/course-type/list', {}, res => {
            if (res.code == "ok") {
                // 将后端返回的数据转换为前端需要的格式
                this.categoryList = res.data.map(item => ({
                    label: item.typeName,
                    value: item.id,
                    coverImage: item.coverImage || ''
                }));

                // 同步更新下拉选项
                this.categoryOptions = [...this.categoryList];
            } else {
                this.$message({
                    message: res.msg || '获取分类列表失败',
                    type: 'error'
                });
            }
        }, error => {
            this.$message({
                message: error || '获取分类列表失败',
                type: 'error'
            });
        });

        // 获取课程列表
        this.getList();
    }
}
</script>

<style lang="scss" scoped>
.rg_span {
    display: inline-block;
}

.rg_span span {
    text-align: right;
    box-sizing: border-box;
    padding-right: 10px;
}

.el-dialog__title {
    display: inline-table;
    margin-top: 20px;
}

.btns .el-button {
    margin-left: 10px;
    margin-bottom: 5px;
}
</style>
<style>
.course-cover-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

.otherForm .el-form-item {
    float: left;
    width: 50%;
    margin: 0;
}

/* 视频播放器样式 */
.video-player-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.video-player {
    max-width: 100%;
    max-height: 500px;
}

.video-preview {
    margin-top: 10px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
    background-color: #f9f9f9;
}

.video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
}

.video-title {
    font-weight: bold;
    color: #303133;
}

.delete-video-btn {
    color: #f56c6c;
    padding: 0;
}

.delete-video-btn:hover {
    color: #f78989;
}

.video-name {
    margin-top: 5px;
    color: #606266;
    font-size: 14px;
}

/* 编辑器样式 */
.editor-container {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
}

.editor-toolbar {
    background-color: #f5f7fa;
    padding: 5px;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
}

.editor-btn {
    background: none;
    border: none;
    padding: 5px 8px;
    margin: 0 2px;
    cursor: pointer;
    border-radius: 3px;
}

.editor-btn:hover {
    background-color: #e4e7ed;
}

.editor-separator {
    width: 1px;
    height: 16px;
    background-color: #dcdfe6;
    margin: 0 5px;
}

.editor-select {
    height: 24px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    margin: 0 5px;
}

.editor-content {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: none;
    resize: vertical;
    outline: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* 上传链接样式 */
.upload-item {
    margin-bottom: 20px;
}

.upload-link {
    color: #409eff;
    cursor: pointer;
    font-size: 14px;
}

.upload-link:hover {
    text-decoration: underline;
}

/* 分类封面图片样式 */
.category-cover-image {
    width: 100px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
}

.cover-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.cover-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 100px;
    margin-bottom: 10px;
}

.cover-uploader:hover {
    border-color: #409EFF;
}

.cover-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.cover-image {
    width: 178px;
    height: 100px;
    display: block;
    object-fit: cover;
}

.cover-tip {
    color: #909399;
    font-size: 12px;
    margin-top: 10px;
}

/* 讲师照片上传样式 */
.instructor-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.instructor-uploader:hover {
    border-color: #409EFF;
}

.instructor-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.instructor-image {
    width: 100px;
    height: 100px;
    display: block;
    object-fit: cover;
}

.upload-tip {
    color: #909399;
    font-size: 12px;
    margin-top: 5px;
}

.ql-snow .ql-picker-label::before {
    position: relative;
    top: -8px;
}
</style>