pbl-teacher-table/src/components/pages/aiAddCourse/evaList.vue

<template>
    <div style="position: relative;" v-loading="loading" :style="{ minHeight: loading ? '250px' : 'auto' }"
        element-loading-text="小可正在努力生成中，请稍等...">
        <div class="c_pub_button_confirm stopBtn" v-if="loading" @click="cancelAjax('elist')">停止</div>
        <div class="elist_title">
            <div style=" display: flex; flex-direction: row;align-items: center; margin: 20px 0; ">
                <div class="lineTitle clineTitle">评价设置</div>
                <div style="margin-left:auto;display: flex;">
                    <div class="r_pub_button_op" style="margin-left:10px;" @click="openAiDialog('elist')">{{ (eList &&
                        eList.length) ? '重新生成评价' : '生成评价' }}</div>
                    <div  v-if="eList && eList.length" class="show_taskD" :class="{ show: interPan }" @click="toggleInterPan">
                        <img src="../../../assets/icon/new/u_up.png" />
                        {{ interPan ? '收起' : '展开' }}
                    </div>
                </div>
            </div>
        </div>
        <div class="mbCss" v-show="interPan">
            <div class="pjCss">
                <div v-if="eList && eList.length" class="elist_input">
                    <div v-for="(eItem, eIndex) in eList" :key="eIndex" class="elist_input_box">
                        <div class="elist_inptu_text">
                            <span>素养：</span>
                            <input type="input" v-model="eItem.target" placeholder="填写目标"
                                style="width: calc(100% - 280px);" />
                            <el-switch @change="forceUpdate" class="rateSwitch" style="margin-left: auto;"
                                v-model="eItem.isai" active-color="#0061FF" active-text="AI评分" inactive-text=""
                                active-value="1" inactive-value="2">
                            </el-switch>
                        </div>
                        <div class="elist_inptu_text">
                            <span>评价标准：</span>
                            <input type="input" v-model="eItem.detail" placeholder="填写评价标准" />
                            <div class="remove" @click="
                                deletEList(
                                    eIndex
                                )
                                "></div>
                        </div>
                        <div class="elist_inptu_text" style="align-items: flex-start;">
                            <span>评价细则：</span>
                            <div style="width: calc(100%);">
                                <div @click="openRule(eIndex)" class="ruleBtn">{{ eItem.isrule ? '收起细则' : '展开细则' }}
                                </div>
                                <div style="width: calc(100%);" class='op_task_box' v-if="eItem.isrule" v-loading="ruleLoading.length && ruleLoading[eIndex]" element-loading-text='小可正在努力生成中，请稍等...'>
                                    <div class="c_pub_button_confirm stopBtn" v-if="ruleLoading.length && ruleLoading[eIndex]" @click="cancelAjax('rule', eIndex)">停止</div>
                                    <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols
                                        v-model="eItem.rule" placeholder="请输入评价细则"></textarea>
                                    <div class="op_box">
                                        <div class="op_remark"></div>
                                        <div style="display: flex;">
                                                <div class="r_pub_button_op" @click="openAiDialog('rule', eIndex)">{{ eList[eIndex].rule ? '重新生成' : '生成细则'}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- <div class="eva_btn_box">
                    <div class="eva_btn_left_box">
                        <button class="c_pub_button_add pub_btn_eval_img" @click="addEList()">
                            添加
                        </button>
                    </div>
                </div> -->
            </div>
        </div>
    </div>

</template>

<script>
import { v4 as uuidv4 } from "uuid";
var OpenCC = require("opencc-js");
let converter2 = OpenCC.Converter({
    from: 'cn',
    to: 'hk'
})

export default {
    props: {
        toolsData: {
            type: Object,
            default: () => ({})
        },
        languageSetting: {
            type: Number,
            default: 0
        },
        userid: {
            type: String,
            default: ""
        },
        knowFileids: {
            type: Array,
            default: () => []
        },
        unitJson: {
            type: Array,
            default: () => []
        },
        itemTaskIndex: {
            type: Number,
            required: true
        },
        toolIndex: {
            type: Number,
            required: true
        },
        aiJson: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            eList: [],
            isEvaFold: true,
            loading: false,
            cancelToken: null,
            ruleLoading: [],
            cancelRuleToken: [],
            interPan: true
        }
    },
    watch: {
        eList: {
            handler(newVal) {
                if (newVal.length > 0) {
                    this.$emit('setEvaList', this.itemTaskIndex, this.toolIndex, newVal)
                }
            },
            immediate: true,
            deep: true
        },
        // unitJson: {
        //     handler(newVal) {
        //         debugger
        //         let elist = this.unitJson[0].chapterInfo[0].taskJson[this.itemTaskIndex].toolChoose[this.toolIndex].eList
        //         this.eList = elist ? JSON.parse(JSON.stringify(elist))  : []
        //     },
        //     immediate: true,
        //     deep: true
        // }
    },
    directives: {
        autoHeight: {
            update(el, binding) {
                const { value } = binding;
                if (value && typeof value === "number") {
                    el.style.height = `${value}px`;
                } else {
                    el.style.height = "auto";
                }
            },
            componentUpdated(el) {
                el.style.height = `${el.scrollHeight + 25}px`;
            },
        },
    },
    methods: {
        toggleInterPan() {
            this.interPan = !this.interPan;
            this.forceUpdate();
        },
        cancelAjax(type, index) {
            if(type == 'elist'){
                this.$message.success("已经成功停止生成评价设置")
                if (this.cancelToken) {
                    this.cancelToken.cancel('Request canceled by the user.');
                    this.cancelToken = null;
                }
                if (this.loading) {
                    this.loading = false
                }
                this.$forceUpdate()
            }else if(type == 'rule'){
                this.$message.success("已经成功停止生成评价细则")
                if (this.cancelRuleToken && this.cancelRuleToken[index]) {
                    this.cancelRuleToken[index].cancel('Request canceled by the user.');
                    this.cancelRuleToken[index] = null;
                }
                if (this.ruleLoading[index]) {
                    this.ruleLoading[index] = false
                }
                this.$forceUpdate()
            }

        },
        forceUpdate() {
            this.$forceUpdate();
        },
        getLang() {
            let lang = ''
            if (this.languageSetting == 0) {
                lang = 'Chinese.'
            } else if (this.languageSetting == 1) {
                lang = 'Traditional Chinese.'
            } else if (this.languageSetting == 2) {
                lang = 'English.'
            }
            return lang
        },
        openAiDialog(type, index) {
            if (type == 'elist') {
                this.aiElist();
                if(type == 1){
                    this.$emit('addCourseBehavior','courseBehavior', `右键学历案-任务${this.itemTaskIndex + 1}-工具${this.toolIndex + 1}-评价设置-${(this.eList && this.eList.length) ? '重新生成评价' : '生成评价'}按钮`)
                }else{
                    this.$emit('addCourseBehavior','courseBehavior', `右键学历案-任务${this.itemTaskIndex + 1}-任务${this.toolIndex + 1}-评价设置-${(this.eList && this.eList.length) ? '重新生成评价' : '生成评价'}按钮`)
                }
                this.$emit('')
            } else if (type == 'rule') {
                this.aiRule(index);
                this.$emit('addCourseBehavior','courseBehavior', `右键学历案-任务${this.itemTaskIndex + 1}-任务${this.toolIndex + 1}-评价设置-评价${index + 1}-重新生成细则按钮`)
            }
        },
        aiElist() {
            let _this = this
            if(!_this.knowFileids.length){
                this.$message.error(`请添加文件后，再生成评价`)
                return
            }
            _this.loading = true

            let fileid = _this.knowFileids.length ? [..._this.knowFileids] : []
            let taskDetail = _this.unitJson[0].chapterInfo[0].taskJson[_this.itemTaskIndex].taskDetail ? _this.unitJson[0].chapterInfo[0].taskJson[_this.itemTaskIndex].taskDetail.replaceAll('\n', ' ') : ''
            let tool = _this.toolsData[_this.unitJson[0].chapterInfo[0].taskJson[_this.itemTaskIndex].toolChoose[_this.toolIndex].tool[0]].name
            let toolDetail = _this.unitJson[0].chapterInfo[0].taskJson[_this.itemTaskIndex].toolChoose[_this.toolIndex].toolDetail.replaceAll('\n', ' ')
            let messages = `
Language: ${this.getLang()}

#上下文#
你是一个资深的教师，你有丰富的项目式学习、跨学科学习、STEAM导师经验。

<任务描述><工具名称>和<工具描述>是你的参考资料。任务描述中包含了多个学生活动，可能会用到多个工具。工具描述会告诉你学生要用这个工具完成怎样的作业。以下是可能出现的工具以及对应的功能。
【文档】用于记笔记、写作文、设计实验或者撰写报告等文本类作业。
【表格】用于记录数据、整理信息等
【思维导图】用于科学探究的问题分析、头脑风暴等。把各个部分主次关系能直白的展示出来，能够帮助学习和记忆。
【电子白板】用于个性化表达、自主设计类创意活动，系统支持概念图库，主要用于绘制概念图、梳理关键词/事件/问题之间的关系；或支持学生自由绘制一些方案设计图。
【作业提交】支持各类文件格式的上传与显示，如png等图片格式、pptx、docx、txt、md等。
【选择题】用于教师检查学生对知识的掌握和理解，参考指标为题目的正确率。
【排序】通过设置卡片内容及正确顺序，用于教师使用排序类题目检查学生对知识的掌握和理解，参考指标为题目的正确率。。
【选择匹配】通过上传题目图片与设置正确回答，用于教师使用选择匹配（连线）检查学生对知识的掌握和理解，参考指标为题目的正确率。

你要学习上传的文件。你只需要学习文件中“课程目标”一级标题下的内容，其中包含了该学科的“核心素养”和“目标”。“学科核心素养”指学生应具备的，能够适应终身发展和社会发展需要的必备品格和关键能力。“目标”指课程本身要实现的具体目标和意图。它规定了某一教育阶段的学生通过课程学习以后，在发展品德、智力、体质等方面期望实现的程度，它是确定课程内容、教学目标和教学方法的基础。
当选择多个学科时，上传的文件中会有《跨学科素养参考资料》，跨学科素养能力指具有跨文化一致性的、能够跨越一系列情境长期存在和发挥作用的、个体用于应对和解决日常工作和生活中遇到的各种复杂挑战和需求的能力；例如“个人社会责任”“任务规划”“自我管理”“承担风险”等。
你要理解学科核心素养和学科目标之间的关系。你生成的评价标准可以被理解为课程目标。

#目标#
你需要完成以下五个步骤：
1.你要结合<任务描述:${taskDetail}><工具名称:${tool}>和<工具描述:${toolDetail}>生成适合当前作业的评价标准。评价标准用于评估学生的能力。
2.你要严格检索和匹配上传文件的核心素养和课程目标内容。你要先将评价标准对应到课程目标中，然后检索上传的文件中的“核心素养”与评价标准进行匹配。所有的核心素养信息必须以上传文件的内容为依据，不可以使用其他的默认信息或者模版！每个评价标准必须与文件中明确的核心素养对应。避免使用文件中未出现的任何术语，不允许输出范例内容!。
3.只有当上传的文件包含多个学科的课程标准时，允许你检索《跨学科素养参考资料》。你需要先检索学科的课程标准，如果你判断当前的评价标准无法对应具体学科的核心素养，可以检索《跨学科素养参考资料》，找到最合适的并输出。
4.你要根据第一步生成的评价标准制定每一条标准的六级评价细则，这个评价细则将用于对学生能力的打分。
5.只输出json格式的内容，其他的不要输出!不要输出范例内容!

#风格#
专业的教育教学用语，简练易懂，逻辑性强。

#语气#
陈述

#受众#
教师

#输出要求#
1.评价标准的个数为3个，最多不能超过5个。每一个评价标准不能超过30字。生成的评价标准只能和当前的工具描述相关。选择题、排序、选择匹配工具只生成1个评价标准。输出内容和格式要求参考#评价标准范例#。注意！输出内容不能复制范例内容。注意！不要出现#评价标准错误范例#中的情况。
2.每1个评价标准只对应1个关联度最高的核心素养。学科核心素养输出参考#核心素养输出范例#。注意！1个评价标准不能对应多个核心素养。不允许出现上传文件中没有的核心素养。严格按照上传文件中检索到的核心素养输出。每个评价标准必须与文件中明确的核心素养对应。避免使用文件中未出现的任何术语。不要出现#核心素养错误范例#中的情况，不允许输出范例内容!。
3.具体的评价细则分为6级——0星，1星，2星，3星，4星，5星。输出格式参考#评价细则范例#。
4.参考#json格式范例#,将内容整理成json格式。**之间的内容为json格式中的代码。以*[*开头，以*]*结尾。每一条评价标准、核心素养以及评价细则以*{*开头，以*}*结尾。核心素养前有*"core":*。评价标准前有*"std":*。评价细则前有*"rule":*。具体内容放在""之间。格式如下：
[
    {"std":"评价标准","core":"核心素养（识别上传文件对应的学科）","rule":"评价细则"},
    {"std":"评价标准","core":"核心素养（识别上传文件对应的学科）","rule":"评价细则"},
    {"std":"评价标准","core":"核心素养（识别上传文件对应的学科）","rule":"评价细则"},
]
5.只输出json格式的内容，其他的不要输出!不要输出范例内容!

#评价标准范例#
学生能够准确描述红树林生态功能及动植物之间的关系。 
学生的调查报告完整详细，说明文逻辑清晰。 
艺术作品反映了对红树林生态系统的创新理解。

#评价标准错误范例#
错误范例1:工具描述是“在完成动植物调查后，同学们需要使用文档工具撰写调查报告，详细描述调查过程和结果”，输出“艺术作品反映了对红树林生态系统的创新理解”。原因是：文档工具不能支持学生完成艺术作品。
错误范例2:工具描述是“在实地考察或虚拟模拟中，同学们需要使用表格工具记录观察到的红树林生态功能和动植物信息”，输出“学生能够通过数据分析解释生态系统变化”。原因是：表格工具不能支持学生完成报告的撰写，所以不能学生通过表格工具解释变化。

#评价细则范例#
0 星，作业内容与作业要求无关；
1 星，没有识别问题和需求;
2 星，问题或需求没有被清晰理解或准确识别;
3 星，问题或需求的一部分被识别;
4 星，问题或需求的大部分被识别;
5 星，问题或需求都被识别。 

#核心素养错误范例#
错误范例1:评价标准是“学生能够展示诗歌与美术作品的创作主题和过程”。输出“审美创造（艺术）”是错误的，因为艺术学科的核心素养中没有“审美创造”。
错误范例2:评价标准是“学生能通过文档工具记录并总结对诗词的人文感悟。”。输出“表达与交流（语文）”是错误的，因为艺术学科的核心素养中没有“表达与交流”。

#核心素养输出范例#
评价标准：学生应该能准确指出光合作用发生的具体部位（叶绿体），并解释叶绿体在光合作用中的重要性。
这一条标准对应了《义务教育科学课程标准（2022年版）》中“科学观念”这一条核心素养，识别上传文件对应的学科为“科学”。所以输出内容为：科学观念（科学）。

评价标准：学生能够通过文档工具清晰表达小学生活的回忆与未来期望。
这一条标准对应了《义务教育艺术课程标准（2022年版）》中“艺术表现”这一条核心素养，识别上传文件对应的学科为“艺术”。所以输出内容为：艺术表现（艺术）。

评价标准：学生能够在小组讨论中积极表达观点。
这一条标准对应了《跨学科素养参考资料》中“合作能力”这一条核心素养，识别上传文件对应的学科为“跨学科”。所以输出内容为：合作能力（跨学科）。

#json格式范例#
[
    {"std":"学生应该能清晰地解释光合作用的定义，包括植物利用光能将二氧化碳和水转化为葡萄糖和氧气的过程。","core":"科学观念（科学）","rule":"0星，未能解释光合作用的定义，与主题无关。
1星，尝试解释光合作用但描述与实际过程不符。
2星，能够识别光合作用的要素之一，如光能、二氧化碳、水、葡萄糖或氧气，但未形成完整的定义。
3星，能够部分描述光合作用的过程，例如知道植物利用光能进行转化，但未全面涵盖所有成分。
4星，能够完整描述光合作用的过程，但细节或某些元素略显不足。
5星，清晰完整地解释了光合作用的定义，包括如何利用光能将二氧化碳和水转化为葡萄糖和氧气的详细过程。
"},
    {"std":"学生应该能正确写出光合作用的化学反应式：6CO2 + 6H2O + 光能 → C6H12O6 + 6O2，并理解每个成分的作用。","core":"科学观念（科学）","rule":"0星：未能写出任何相关的内容，完全没有涉及光合作用的化学反应式。
1星：光合作用的化学反应式错误，完全没有正确的化学分子式。
2星：能够部分写出光合作用的化学反应式，但分子式及其配比有较多错误，未能体现光能的作用。
3星：基本写出大部分的光合作用化学反应式，但有小部分错误，对于光能的作用未能准确阐述。
4星：能较完整写出光合作用的化学反应式，整体正确，但对每个成分的具体作用理解不够深入。
5星：准确无误地写出光合作用的化学反应式，并能清晰、详细地解释每个成分的作用及其在反应中的重要性。
"},
    {"std":"学生能够通过文档工具清晰表达小学生活的回忆与未来期望。","core":"艺术表现（艺术）","rule":"
0星，未能使用文档工具表达任何想法。
1星，尝试使用文档工具但表达不清晰。
2星，能够部分表达小学生活的回忆或未来期望。
3星，能够表达小学生活的回忆或未来期望，但不够完整。
4星，能够完整表达小学生活的回忆与未来期望，但细节略显不足。
5星，清晰完整地表达了小学生活的回忆与未来期望，细节丰富。
"},
]`
            _this.loading = true
            _this.cancelToken = _this.ajax.setCancelSource();
            let params = {
                assistant_id: '6063369f-289a-11ef-8bf4-12e77c4cb76b',
                message: [{ "type": "text", "text": this.languageSetting == 1 ? converter2(messages.replaceAll('\n', " ").replaceAll('*', "")) : messages.replaceAll('\n', " ").replaceAll('*', "") }],
                session_name: uuidv4(),
                userId: _this.userid,
                file_ids: fileid.length ? [...fileid] : '',
                model: 'gpt-4o-2024-08-06',
                temperature: 0.1,
            }
            _this.ajax.post('https://gpt4.cocorobo.cn/ai_agent_park_chat', params, _this.cancelToken).then(function (response) {
                console.log(response);
                let data = response.data.FunctionResponse
                if (data.message) {
                    console.log(data.message);
                    let elist = []
                    try {
                        elist = JSON.parse(data.message.replaceAll("```json", "").replaceAll("```", ""))
                        elist = elist.map(el => {
                            return {
                                isai: "1",
                                target: el.core,
                                value: "",
                                detail: el.std,
                                rule: el.rule.replace(/([；。])/g, '$1\n')
                            }
                        })
                    } catch (e) {
                        console.log("error_________________" + e);
                        try {
                            let regex = new RegExp("(?<=```json)([\\s\\S]*?)(?=```)");
                            let match = data.message.match(regex);
                            elist = JSON.parse(match[0])
                            elist = elist.map(el => {
                                return {
                                    isai: "1",
                                    target: el.core,
                                    value: "",
                                    detail: el.std,
                                    rule: el.rule.replace(/([；。])/g, '$1\n')
                                }
                            })

                        } catch (error) {
                        }
                    }

                    console.log(elist);
                    _this.eList = elist
                    _this.$forceUpdate()
                }
                _this.cancelToken = null
                _this.loading = false
            }).catch(function (error) {
                _this.cancelToken = null
                _this.loading = false
                console.log(error);
            });
        },
        aiRule(index) {
            if (!this.eList[index].target || !this.eList[index].detail) {
                this.$message.error(`评价信息完善信息后再生成细则`)
                return;
            }
            this.ruleLoading[index] = true
            this.$forceUpdate();
            let message = `NOTICE
Role: 你是一个专业的项目式学习导师
Language: ${this.getLang()}
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context
##要求
${this.aiJson['aiRateRule']}

<评价标准：${this.eList[index].detail}>
<素养：${this.eList[index].target}>

参考#Format example#,将内容整理成字符串格式。。以*====*开头，以*====*结尾。格式如下：
==== 
0 星，作业内容与作业要求无关；
1 星，没有识别问题和需求;
2 星，问题或需求没有被清晰理解或准确识别;
3 星，问题或需求的一部分被识别;
4 星，问题或需求的大部分被识别;
5 星，问题或需求都被识别。 
==== 

# Format example
==== 
0 星，作业内容与作业要求无关；
1 星，没有识别问题和需求;
2 星，问题或需求没有被清晰理解或准确识别;
3 星，问题或需求的一部分被识别;
4 星，问题或需求的大部分被识别;
5 星，问题或需求都被识别。 
==== `
            this.cancelRuleToken[index] = this.ajax.setCancelSource();
            let parm = {
                assistant_id: 'b19f1a1a-7586-11ef-8ce0-12e77c4cb76b',
                message: [{ "type": "text", "text": this.languageSetting == 1 ? converter2(message.replaceAll('\n', " ").replaceAll('*', "")) : message.replaceAll('\n', " ").replaceAll('*', "") }],
                session_name: uuidv4(),
                userId: this.userid,
                file_ids: [],
                model: 'gpt-4o-2024-08-06',
                temperature: this.mode == 3 ? 0.5 : 0.1,
            }
            this.ajax
                .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", parm, this.cancelRuleToken[index])
                .then(async (response) => {
                    console.log(response);
                    let data = response.data.FunctionResponse
                    if (data.message) {
                        console.log(data.message);

                        let content = data.message;

                        var regex = new RegExp('====([^=]+)====');
                        let match = content.match(regex);
                        if (match) {
                            content = match[1].trim().replaceAll(' ', '');
                            // 获取匹配到的内容并去除两端空格 
                            console.log('contentInsideDoubleEquals', content);
                            if (content.indexOf('0星') == -1 || content.indexOf('2星') == -1 || content.indexOf('3星') == -1 || content.indexOf('4星') == -1 || content.indexOf('5星') == -1) {
                                console.log("未有星级。");
                                this.cancelRuleToken[index] = null
                                this.aiRule(index)
                                return
                            }
                            //  return 
                        } else {
                            console.log("未找到匹配的内容。");
                            this.cancelRuleToken[index] = null
                            this.aiRule(index)
                            return
                        }

                        let elist = JSON.parse(JSON.stringify(this.eList[index]))
                        elist.rule = JSON.parse(JSON.stringify(content.replaceAll("#", "")))
                        this.$set(this.eList, index, elist)
                        this.$forceUpdate();
                        this.ruleLoading[index] = false
                        this.cancelRuleToken[index] = null
                        this.$message.success(`评价细则生成成功`)
                    } else {
                        this.ruleLoading[index] = false
                        this.cancelRuleToken[index] = null
                    }
                    this.$forceUpdate();

                })
                .catch((error) => {
                    this.cancelRuleToken[index] = null
                    this.ruleLoading[index] = false
                    this.$forceUpdate();
                    console.log(error);
                });
        },
        addEList() {

        },
        deletEList(index) {
            this.$confirm('确定删除吗？').then(() => {
                this.eList.splice(index, 1)
                if (!this.eList.length) {
                    this.$emit('setEvaList', this.itemTaskIndex, this.toolIndex, this.eList)
                }
            })

        },
        openRule(i) {
            if (this.eList[i].isrule) {
                this.eList[i].isrule = false
            } else {
                this.eList[i].isrule = true
            }
            setTimeout(() => {
                this.eList[i].rule += "*0*%*";
                setTimeout(() => {
                    this.eList[i].rule = this.eList[i].rule.replaceAll("*0*%*", "");
                }, 0);
            }, 100);
            this.$forceUpdate();
        },
    },
    mounted() {
        let elist = this.unitJson[0].chapterInfo[0].taskJson[this.itemTaskIndex].toolChoose[this.toolIndex].eList
        this.eList = elist ? JSON.parse(JSON.stringify(elist)) : []
        for (let i = 0; i < this.eList.length; i++) {
            setTimeout(() => {
                this.eList[i].rule += "*0*%*";
                setTimeout(() => {
                    this.eList[i].rule = this.eList[i].rule.replaceAll("*0*%*", "");
                }, 0);
            }, 500);
        }
    }
}
</script>

<style scoped>
/* 评价样式 */
.elist_css {
    padding-bottom: 75px !important;
}

.elist_title {
    margin-bottom: 10px;
}

.elist_input {
    width: 100%;
}

.elist_input_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.elist_input_box+.elist_input_box {
    margin-top: 30px;
}

.elist_input .elist_input_box input {
    font: inherit;
    color: currentColor;
    width: 100%;
    /* max-width: calc(100% - 385px); */
    max-width: calc(100% - 150px);
    padding: 8px 14px;
    display: block;
    min-width: 0;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
    margin: 0 20px 0 0;
}

.elist_input .elist_input_box span {
    height: 36px;
    line-height: 36px;
    color: rgb(82, 82, 82);
    min-width: 80px;
}

.remove {
    background-image: url("../../../assets/icon/new/delete_u.png");
    cursor: pointer;
    opacity: 0.5;
    width: 30px;
    min-width: 30px;
    height: 30px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: 10px;
}

.elist_input .elist_input_box .remove {
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    background-size: 100% 100%;
    background-position: unset;
    margin-left: 5px;
}

.elist_input_box>>>.el-rate {
    display: flex;
    height: 36px;
    align-items: center;
}

.elist_input_box .elist_inptu_text {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.elist_input_box .elist_inptu_text input {
    /* width: 500px; */
    width: 100%;
    max-width: unset;
}

.elist_input_box>>>.el-rate__icon {
    font-size: 24px;
}

.elist_btn {
    margin-top: 10px;
}

.lineTitle {
    /* margin-top: 15px; */
    width: 110px;
    font-size: 16px;
    display: flex;
    align-items: center;
    line-height: 20px;
}

.lineTitle::before {
    content: "";
    display: block;
    width: 3px;
    height: 20px;
    background: #0061ff;
    border-radius: 3px;
    margin: 0 5px 0 0;
}

.clineTitle::before {
    content: "";
    display: block;
    min-width: 10px;
    width: 10px;
    height: 10px;
    background: #0061ff;
    border-radius: 50%;
    margin: 0 5px 0 0;
}

.courseTop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 10px 0;
}

.stepsNav {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.stepsWord {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    margin-left: auto;
    background: rgb(15, 126, 255);
    border-radius: 5px;
    padding: 3px 25px;
    box-sizing: border-box;
}

.stepBox {
    width: calc(100% - 40px);
    height: calc(100% - 50px);
    overflow: hidden;
    border-radius: 5px;
    margin: 0 auto;
}

.rightBox {
    width: calc(100%);
    background: #f0f2f5;
    /* border-radius: 10px; */
    overflow: auto;
    height: calc(100% - 150px);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.e_add_top {
    display: flex;
    justify-content: space-between;
    background: #fff;
    position: absolute;
    right: 20px;
    height: 50px;
    align-items: center;
}

.e_add_title2 {
    display: flex;
    align-items: center;
}

.e_add_title2 span {
    width: 40px;
}

.e_add_title {
    display: flex;
    align-items: center;
    color: #b8b8b8;
    font-size: 18px;
    position: relative;
    height: 40px;
}

.e_add_title span {
    margin-right: 10px;
}

.e_add_title .el_input {
    width: 300px;
}

.e_add_title>>>.el-input__inner {
    width: 400px;
}

.e_add_btn {}

.e_add_content {
    display: flex;
    width: 100%;
}

.e_add_list {
    background: #fff;
    height: 500px;
    width: 210px;
    position: relative;
    margin: 15px 5px 0 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.e_add_list_title {
    font-size: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 40px;
    text-align: center;
    border-bottom: 1px solid #eaeaea;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 57px;
    background: #f6f6f6;
}

.e_add_list_title span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.e_add_list_title img {
    position: absolute;
    right: 15px;
    width: 25px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}

.e_add_list_body {
    height: calc(100% - 187px);
    overflow: auto;
}

.e_add_list_child {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    padding: 15px 40px;
    text-align: center;
}

.e_add_list_child span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.e_add_list_child img {
    position: absolute;
    right: 10px;
    width: 21px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}

.e_add_list_child+.e_add_list_child {
    border-top: 1px solid #eaeaea;
}

.e_add_list_child .active {
    color: #409eff;
}

.e_add_list_btn {
    position: absolute;
    bottom: 0;
    height: 50px;
    background: rgb(120, 120, 254);
    width: 100%;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}

.e_add_list_detail {
    position: absolute;
    bottom: 0;
    height: 130px;
    background: rgb(120, 120, 254);
    width: 100%;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e_add_list_detail textarea {
    height: 90%;
    width: 95%;
    border: none;
    resize: none;
    outline: none;
    padding: 5px;
    box-sizing: border-box;
}

.e_add_list_pbox {
    width: 100%;
}

.e_add_list_pbox_title {
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    flex-direction: row;
    flex-wrap: wrap;
}

.mbCss {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: flex-start;
    justify-content: flex-start;
}

.pjCss {
    /* width: 42%; */
    width: calc(100%);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.e_box {
    /* display: flex; */
    flex-wrap: wrap;
    max-height: 500px;
    align-items: flex-start;
    overflow: auto;
    width: 100%;
}

.e_card {
    border: 1px solid #ccc;
    background: #fff;
    margin-right: 20px;
    width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
}

.e_card_picture {
    margin: 10px 0;
}

.e_card_picture>img {
    width: 50px;
}

.e_card_name {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.e_card_time {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 15px;
    color: #c3c3c3;
    margin-bottom: 10px;
}

.e_card_btn {
    height: 40px;
    display: flex;
    align-items: center;
    width: 100%;
    background: rgb(244, 244, 244);
}

.e_card_btn:hover {
    background: rgb(221 221 221);
}

.e_card_btn span {
    flex: 1 1 auto;
    text-align: center;
    cursor: pointer;
}

.addEva {
    border: 1px solid #ccc;
    background: #fff;
    margin-right: 20px;
    width: 270px;
    height: 149px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    justify-content: center;
}

.addEva>img {
    width: 50px;
    object-fit: cover;
}

.ruleBtn {
    width: fit-content;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
    color: #0061FF;
}

.op_task_box,
.op_tool_box,
.outline_detail {
    position: relative;
}

.op_task_box:hover .op_box,
.op_tool_box:hover .op_box,
.outline_detail:hover .op_box {
    display: flex
}

.op_box {
  position: absolute;
  bottom: 10px;
  display: none;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 20px);
  left: 50%;
  transform: translateX(-50%);
}

.op_box .op_remark {
  color: #8E8E8E;
  font-size: 14px;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 16px;
    resize: none;
    font-family: "Microsoft YaHei";
    min-height: 48px;
    /* border: 1px solid #3682fc00; */
    border: 1.5px solid #cad1dc;
}

.binfo_textarea {
    border: 1.5px solid #cad1dc;
    font-size: 16px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: "Microsoft YaHei";
}

.binfo_input:focus-visible {
    border: 1.5px solid #3681fc !important;
}

.rateSwitch>>>.el-switch__label.is-active {
    color: #0061FF;
}

.rateSwitch>>>.el-switch__label--right {
    display: flex;
    align-items: center;
}

.rateSwitch>>>.el-switch__label--right::before {
    content: "";
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    background-size: 100% 100%;
    display: block;
    margin-right: 7px;
    background-image: url(../../../assets/icon/new/u_op2.png);
}

.rateSwitch>>>.el-switch__label--right.is-active::before {
    background-image: url(../../../assets/icon/new/u_op.png);
}

.stopBtn {
    z-index: 999999;
    position: absolute;
    left: 50%;
    top: calc(50% + 70px);
    transform: translateX(-50%);
}

.show_taskD {
  min-width: fit-content;
  margin-left: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  color: #0061FF;
}

.show_taskD>img {
  width: 15px;
  margin-right: 5px;
  transition: 0.2s all;
  transform: rotate(-90deg);
}

.show_taskD.show>img {
  transform: rotate(0deg);
}
</style>