update

src/components/pages/addCourse.vue

@@ -2405,7 +2405,9 @@
                               <div v-if="itemTask.eList && itemTask.eList.length" class="elist_input">
                                 <div v-for="(eItem, eIndex) in itemTask.eList" :key="eIndex" class="elist_input_box">
                                   <span>评价名称：</span>
-                                  <input type="input" v-model="itemTask.eList[eIndex].value" placeholder="填写评价名称" />
+                                  <el-tooltip effect="dark" :content="itemTask.eList[eIndex].value || '填写评价名称'" placement="top" popper-class="text_tooltip2">
+                                    <input type="input" v-model="itemTask.eList[eIndex].value" placeholder="填写评价名称" />
+                                  </el-tooltip>
                                   <span>评星等级：</span>
                                   <el-rate v-model="itemTask.eList[eIndex].score" @change="setEListStar()"
                                     disabled></el-rate>
@@ -2414,7 +2416,9 @@
                                     "></div>
                                   <div class="elist_inptu_text">
                                     <span>评价描述：</span>
-                                    <input type="input" v-model="itemTask.eList[eIndex].detail" placeholder="填写评价描述" />
+                                    <el-tooltip effect="dark" :content="itemTask.eList[eIndex].detail || '填写评价描述'" placement="top" popper-class="text_tooltip2">
+                                      <input type="input" v-model="itemTask.eList[eIndex].detail" placeholder="填写评价描述" />
+                                    </el-tooltip>
                                   </div>
                                   <div class="elist_inptu_text" v-if="evalua">
                                     <span>目标：</span>

src/components/pages/test/add/addTest.vue

@@ -23,8 +23,9 @@
                     </div>
                     <div class="r_pub_button_retrun" @click="retrunCourse">返回</div>
                 </div>
-                <div class="step_box">
-                    <setInfo v-if="steps == 1" :oid="oid" :org="org" :steps.sync="steps" :title.sync="title" :testType.sync="testType" :see.sync="see"></setInfo>
+                <div class="step_box" :style="{width: steps == 2 && '100%'}">
+                    <setInfo v-if="steps == 1" :oid="oid" :org="org" :steps.sync="steps" :title.sync="title" :testType.sync="testType" :see.sync="see" :cJson.sync="cJson"></setInfo>
+                    <editInfo v-if="steps == 2" :oid="oid" :org="org" :steps.sync="steps" :title.sync="title" :cJson.sync="cJson"></editInfo>
                 </div>
             </div>
         </div>
@@ -33,9 +34,10 @@
 
 <script>
 import setInfo from './setInfo/index.vue'
+import editInfo from './edit/index.vue'
 export default {
     components: {
-        setInfo,
+        setInfo,editInfo
     },
     data() {
         return {
@@ -47,6 +49,7 @@ export default {
             title: "",
             testType: [],
             see: false,
+            cJson: [],
         }
     },
     methods: {

src/components/pages/test/add/edit/edit/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="edit_box">
+    <div>题目添加</div>
+    <div></div>
+    <div>题目排序</div>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        }
+    },
+}
+</script>
+
+<style scoped>
+.edit_box{
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: flex;
+}
+</style>

src/components/pages/test/add/edit/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="rightBox">
+    <div class="edit_top">
+      <div class="edit_btn">
+        <span :class="{ active: type == 1 }" @click="type = 1">编辑</span>
+        <span :class="{ active: type == 2 }" @click="type = 2">预览</span>
+        <span :class="{ active: type == 3 }" @click="type = 3">回答</span>
+        <span :class="{ active: type == 4 }" @click="type = 4">统计</span>
+      </div>
+      <div class="op_btn">
+        <el-button type="primary" size="small" @click="lastSteps">上一步</el-button>
+        <el-button type="primary" size="small" >保存</el-button>
+        <el-button type="primary" size="small" >发布</el-button>
+        
+      </div>
+    </div>
+    <div class="e_box">
+      <editBox v-if="type"></editBox>
+    </div>
+  </div>
+</template>
+
+<script>
+import editBox from './edit/index.vue'
+export default {
+  components: {
+    editBox,
+  },
+  props: {
+    title: {
+      type: String
+    },
+    testType: {
+      type: Array
+    },
+    see: {
+      type: Boolean
+    },
+    steps: {
+      type: Number
+    },
+    cJson: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      type:1
+    }
+  },
+  methods: {
+    lastSteps() {
+      this.$emit('update:steps', this.steps - 1)
+    }
+  },
+}
+</script>
+
+<style scoped>
+.rightBox {
+  width: calc(100%);
+  background: #F0F2F5;
+  overflow: auto;
+  height: calc(100% - 20px);
+  margin: 0 auto;
+  position: relative;
+  box-sizing: border-box;
+}
+.edit_top{
+  height: 50px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.edit_top > .edit_btn{
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+.edit_top > .edit_btn > span{
+  cursor: pointer;
+  padding-bottom: 5px;
+  display: block;
+}
+.edit_top > .edit_btn >.active {
+    color: #3e88f4;
+    border-bottom: 2px solid #2f80f3;
+}
+
+.edit_top > .edit_btn > span + span{
+  margin-left: 35px;
+}
+.edit_top > .op_btn{
+  position: absolute;
+  right: 30px;
+}
+
+.e_box{
+  height: calc(100% - 50px);
+  width: 100%;
+  overflow: hidden;
+  background: rgb(196, 226, 241);
+}
+</style>

src/components/pages/test/add/setInfo/index.vue

@@ -45,7 +45,7 @@
                         <!-- <span :class="{ active: type == 3 }" @click="type = 3">题库导入</span> -->
                     </div>
                     <div class="c_info_tab_box">
-                        <manualCreate v-if="type == 2" :manualJson.sync="manualJson"></manualCreate>
+                        <manualCreate v-if="type == 2" :manualJson.sync="manualJson" @nextSteps="nextSteps"></manualCreate>
                     </div>
                 </div>
             </div>
@@ -57,15 +57,9 @@
 import manualCreate from './manualCreated.vue';
 export default {
     components: {
-        manualCreate,
+        manualCreate
     },
     props: {
-        oid: {
-            type: String,
-        },
-        org: {
-            type: String,
-        },
         title:{
             type: String
         },
@@ -74,6 +68,12 @@ export default {
         },
         see:{
             type: Boolean
+        },
+        steps:{
+            type: Number
+        },
+        cJson:{
+            type:Array
         }
     },
     data() {
@@ -171,12 +171,19 @@ export default {
         },
         depthCopy(s){
             return JSON.parse(JSON.stringify(s))
+        },
+        nextSteps(){
+            if(this.type == 2){
+                this.$emit("update:cJson", this.manualJson)
+            }
+            this.$emit('update:steps',this.steps+1)
         }
     },
     created() {
         this.courseTypeId = this.depthCopy(this.testType)
         this.courseName = this.depthCopy(this.title)
         this.isTeacherSee = this.depthCopy(this.see)
+        this.manualJson = this.depthCopy(this.cJson)
 
         this.selectAllType();
     }

src/components/pages/test/add/setInfo/manualCreated.vue

@@ -17,28 +17,54 @@
                 <div class="title">请添加题目类型与数量</div>
                 <div class="btnBox">
                     <el-button type="primary" size="mini" v-for="item in buttonOptions" :key="item.type" class="e-button"
-                        @click="addQtype(item.type)">{{
-                            item.name }}</el-button>
-
+                        @click="addQtype(item.type)">{{ item.name }}</el-button>
                 </div>
             </div>
         </div>
         <div class="mc_checkBox">
-            <div v-for="(item1, index1) in this.checkJson" :key="index1">
-                <div>
-                    <div><span>{{ selectType(item1,index1) }}</span></div>
-                    <div v-if="item1.array && item1.array.length">
-                        <div v-for="(item2, index2) in item1.array" :key="`${index1}-${index2}`">
-                            <div><span>{{ selectType(item2,index2) }}</span></div>
-                            <div v-if="item2.array && item2.array.length">
-                                <div v-for="(item3, index3) in item2.array" :key="`${index1}-${index2}-${index3}`">
-                                    <div><span>{{ selectType(item3,index3) }}</span></div>
+            <div v-for="(item1, index1) in this.checkJson" :key="index1" class="mc_ti_1" :draggable="isdrag == `${index1}`"
+                :class="{ active: checkC === `x${index1}` }">
+                <div class="title" @click.stop="checkTitle(`${index1}`)">
+                    <div class="drag" @mousedown="setDrag(`${index1}`)" @mouseup="isdrag = ''"></div>
+                    <span>{{ selectType(item1, index1) }}</span>
+                    <div class="btnBox">
+                        <div class="delete" @click.stop="deleteCheck(`${index1}`)"></div>
+                        <div class="open" v-if="item1.array && item1.array.length" :class="{ isopen: item1.isopen }"
+                            @click.stop="openPan(index1)"></div>
+                    </div>
+                </div>
+                <div v-if="item1.array && item1.array.length && item1.isopen" class="mc_ti_1_xia">
+                    <div v-for="(item2, index2) in item1.array" :key="`${index1}-${index2}`" class="mc_ti_2"
+                        :draggable="isdrag == `${index1}-${index2}`" :class="{ active: checkC === `x${index1}-${index2}` }">
+                        <div class="title" @click.stop="checkTitle(`${index1}-${index2}`)">
+                            <div class="drag" @mousedown="setDrag(`${index1}-${index2}`)" @mouseup="isdrag = ''"></div>
+                            <span>{{ selectType(item2, index2) }}</span>
+                            <div class="btnBox">
+                                <div class="delete" @click.stop="deleteCheck(`${index1}-${index2}`)"></div>
+                                <div class="open" v-if="item2.array && item2.array.length" :class="{ isopen: item2.isopen }"
+                                    @click.stop="openPan(index1, index2)"></div>
+                            </div>
+                        </div>
+                        <div v-if="item2.array && item2.array.length && item2.isopen" class="mc_ti_2_xia">
+                            <div v-for="(item3, index3) in item2.array" :key="`${index1}-${index2}-${index3}`"
+                                class="mc_ti_3" :draggable="isdrag == `${index1}-${index2}-${index3}`"
+                                :class="{ active: checkC === `x${index1}-${index2}-${index3}` }">
+                                <div class="title" @click.stop="checkTitle(`${index1}-${index2}-${index3}`)">
+                                    <div class="drag" @mousedown="setDrag(`${index1}-${index2}-${index3}`)"
+                                        @mouseup="isdrag = ''"></div>
+                                    <span>{{ selectType(item3, index3) }}</span>
+                                    <div class="btnBox">
+                                        <div class="delete" @click.stop="deleteCheck(`${index1}-${index2}-${index3}`)"></div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+            <div class="e_btn">
+                <el-button type="primary" size="mini" @click="nextSteps()">下一步</el-button>
+            </div>
         </div>
     </div>
 </template>
@@ -47,8 +73,8 @@
 export default {
     props: {
         manualJson: {
-            type: Array,
-        },
+            type: Array
+        }
     },
     data() {
         return {
@@ -72,147 +98,282 @@ export default {
                     label: "添加文档"
                 }
             ],
-            options2:{
-                1:"选择题",
-                2:"问答题",
-                3:"填空题",
-                4:"添加文档"
+            options2: {
+                1: "选择题",
+                2: "问答题",
+                3: "填空题",
+                4: "添加文档"
             },
             buttonOptions: [
                 { name: "分组", type: 1 },
-                { name: "分页", type: 2 },
+                { name: "分页", type: 2 }
             ],
             checkJson: [
                 // {
                 //     ttype: 1, //题目分类 1普通题目 2分组 3分页
                 //     type: 1, //题型分类 1选择题, 2问答题 3填空题 4添加文档
-                //     array:[] //题目 
+                //     array:[] //题目
                 // }
             ],
             checkC: "",
-        }
+            isdrag: ""
+        };
     },
     computed: {
         selectType() {
-            return function(item,index){
-                if(item.ttype == 1){
-                    return (index+1)+'、'+this.options2[item.type];
-                }else if(item.ttype == 2){
-                    return `第${index+1}组 （共${item.array.length}题）`;
-                }else if(item.ttype == 3){
-                    return `分页${index+1}`;
+            return function (item, index) {
+                if (item.ttype == 1) {
+                    return index + 1 + "、" + this.options2[item.type];
+                } else if (item.ttype == 2) {
+                    return `第${index + 1}组 （共${item.array.length}题）`;
+                } else if (item.ttype == 3) {
+                    return `分页${index + 1}`;
                 }
-            } 
+            };
         }
     },
     methods: {
         numberPan() {
             if (/[^\d]/.test(this.number)) {
-                this.$message.error('请填写数字')
-                this.number = ''
+                this.$message.error("请填写数字");
+                this.number = "";
             }
         },
         addCheck() {
             if (!this.topicType) {
-                this.$message.error("请选择题目类型")
-                return
+                this.$message.error("请选择题目类型");
+                return;
             }
             if (!this.number) {
-                this.$message.error("请填写题目数量")
-                return
+                this.$message.error("请填写题目数量");
+                return;
+            }
+            let type = 1;
+            if (this.checkJson.length > 0) {
+                for (var i = 0; i < this.checkJson.length; i++) {
+                    if (this.checkJson[i].ttype == 2) {
+                        type = 2;
+                    } else if (this.checkJson[i].ttype == 3) {
+                        type = 3;
+                    }
+                }
             }
             if (this.checkC) {
+                let _check = this.checkC.replace('x', '').split("-")
+                let _json = this.checkJson[_check[0]]
+                let json = {
+                    ttype: 1,
+                    type: this.topicType
+                }
+                if (_json.array) {
+                    if (type == 3 && _check.length == 2) {
+                        if (this.checkJson[_check[0]].array[_check[1]].array) {
+                            for (var i = 0; i < this.number; i++) {
+                                this.checkJson[_check[0]].array[_check[1]].array.push(json)
+                            }
+                        } else {
+                            for (var i = 0; i < this.number; i++) {
+                                this.checkJson[_check[0]].array.splice((_check[1]) + 1, 0, json)
+                            }
+                        }
 
-            } else {
-                let type = 1
-                if (this.checkJson.length > 0) {
-                    for (var i = 0; i < this.checkJson.length; i++) {
-                        if (this.checkJson[i].ttype == 2) {
-                            type = 2
-                        } else if (this.checkJson[i].ttype == 3) {
-                            type = 3
+                    } else if (type == 3 && _check.length == 3) {
+                        for (var i = 0; i < this.number; i++) {
+                            this.checkJson[_check[0]].array[_check[1]].array.splice((_check[2]) + 1, 0, json)
                         }
+                    } else if (type == 2 && _check.length == 2) {
+                        for (var i = 0; i < this.number; i++) {
+                            this.checkJson[_check[0]].array.splice((_check[1]) + 1, 0, json)
+                        }
+                    } else if ((type == 2 || type == 3) && _check.length == 1) {
+                        for (var i = 0; i < this.number; i++) {
+                            this.checkJson[_check[0]].array.push(json)
+                        }
+                    }
+                } else {
+                    for (var i = 0; i < this.number; i++) {
+                        this.checkJson.splice(parseInt(_check[0]) + 1, 0, json);
                     }
                 }
+            } else {
                 if (type == 1) {
                     for (var i = 0; i < this.number; i++) {
                         this.checkJson.push({
                             ttype: 1,
-                            type: this.topicType,
-                        })
+                            type: this.topicType
+                        });
                     }
-                } else if (type == 3) {
-                    this.$message.error("请选中分页或分组添加题目")
-                    return
+                } else if (type == 3 || type == 2) {
+                    this.$message.error("请选中分页或者分组添加题目");
+                    return;
                 }
-
             }
-            this.topicType = ""
-            this.number = ""
-            this.$emit("update:manualJson", this.checkJson)
+            this.topicType = "";
+            this.number = "";
+            this.$emit("update:manualJson", this.checkJson);
         },
         addQtype(type) {
             if (type == 1) {
-                if (this.checkC) {
 
-                } else {
-                    let type = 1
-                    if (this.checkJson.length > 0) {
-                        for (var i = 0; i < this.checkJson.length; i++) {
-                            if (this.checkJson[i].ttype == 1) {
-                                type = 2
-                            } else if (this.checkJson[i].ttype == 3) {
-                                type = 3
-                            }
+                let type = 1;
+                if (this.checkJson.length > 0) {
+                    for (var i = 0; i < this.checkJson.length; i++) {
+                        if (this.checkJson[i].ttype == 1) {
+                            type = 2;
+                        } else if (this.checkJson[i].ttype == 3) {
+                            type = 3;
                         }
                     }
-                    if (type == 1) {
-                        this.checkJson.push({
-                            ttype: 2,
-                            array: []
-                        })
-                    } else if (type == 2) {
-                        this.checkJson = [{
+                }
+                let json = {
+                    ttype: 2,
+                    array: [],
+                    isopen: true
+                }
+                if (type == 1) {
+                    if (this.checkC) {
+                        let _check = this.checkC.replace('x', '').split("-")
+                        this.checkJson.splice(parseInt(_check[0]) + 1, 0, json);
+                    } else {
+                        this.checkJson.push(json);
+                    }
+                } else if (type == 2) {
+                    this.checkJson = [
+                        {
                             ttype: 2,
-                            array: this.depthCopy(this.checkJson)
-                        }]
-                    } else if (type == 3) {
-                        this.$message.error("请选中分页添加分组")
-                        return
+                            array: this.depthCopy(this.checkJson),
+                            isopen: true
+                        }
+                    ];
+                } else if (type == 3) {
+                    if (this.checkC) {
+                        let _check = this.checkC.replace('x', '').split("-")
+
+                        if (_check.length > 1 && this.checkJson[_check[0]].array) {
+                            this.checkJson[_check[0]].array.splice(parseInt(_check[1]) + 1, 0, json);
+                        } else if (!this.checkJson[_check[0]].array[0].array) {
+                            this.checkJson[_check[0]].array = [
+                                {
+                                    ttype: 2,
+                                    array: this.depthCopy(this.checkJson[_check[0]].array),
+                                    isopen: true
+                                }
+                            ]
+                        } else {
+                            this.checkJson[_check[0]].array.push(json);
+                        }
+                    } else {
+                        this.$message.error("请选中分页添加分组");
+                        return;
                     }
                 }
+
             } else if (type == 2) {
-                let type = 1
+
+                let type = 1;
                 if (this.checkJson.length > 0) {
                     for (var i = 0; i < this.checkJson.length; i++) {
                         if (this.checkJson[i].ttype == 1 || this.checkJson[i].ttype == 2) {
-                            type = 2
+                            type = 2;
                         }
                     }
                 }
                 if (type == 1) {
-                    this.checkJson.push({
+                    let json = {
                         ttype: 3,
-                        array: []
-                    })
+                        array: [],
+                        isopen: true
+                    }
+                    if (this.checkC) {
+                        let _check = this.checkC.replace('x', '').split("-")
+
+                        this.checkJson.splice(parseInt(_check[0]) + 1, 0, json);
+                    } else {
+                        this.checkJson.push(json);
+                    }
                 } else {
-                    this.checkJson = [{
-                        ttype: 3,
-                        array: this.depthCopy(this.checkJson)
-                    }]
+                    this.checkJson = [
+                        {
+                            ttype: 3,
+                            array: this.depthCopy(this.checkJson),
+                            isopen: true
+                        }
+                    ];
                 }
 
             }
-            this.$emit("update:manualJson", this.checkJson)
+            this.$emit("update:manualJson", this.checkJson);
         },
         depthCopy(s) {
-            return JSON.parse(JSON.stringify(s))
+            return JSON.parse(JSON.stringify(s));
+        },
+        setDrag(index) {
+            console.log(index);
+            this.isdrag = index
+        },
+        openPan(index1, index2) {
+            if (index2 === 0 || index2) {
+                this.checkJson[index1].array[index2].isopen = !this.checkJson[index1].array[index2].isopen
+            } else {
+                this.checkJson[index1].isopen = !this.checkJson[index1].isopen
+            }
+            this.$forceUpdate();
+            this.$emit("update:manualJson", this.checkJson);
+        },
+        checkTitle(index) {
+            if (this.checkC === "x" + index) {
+                this.checkC = ""
+            } else {
+                this.checkC = 'x' + index
+            }
+        },
+        deleteCheck(index) {
+            let _check = index.split("-")
+            let string = ""
+            if (_check.length == 1) {
+                if (this.checkJson[_check[0]].ttype == 1) {
+                    string = "确定删除该题目吗?"
+                } else if (this.checkJson[_check[0]].ttype == 2) {
+                    string = "删除该分组将会同步删除该分组下所有内容，是否继续操作?"
+                } else if (this.checkJson[_check[0]].ttype == 3) {
+                    string = "删除该分页将会同步删除该分页下所有内容，是否继续操作?"
+                }
+            } else if (_check.length == 2) {
+                if (this.checkJson[_check[0]].array[_check[1]].ttype == 1) {
+                    string = "确定删除该题目吗?"
+                } else if (this.checkJson[_check[0]].array[_check[1]].ttype == 2) {
+                    string = "删除该分组将会同步删除该分组下所有内容，是否继续操作?"
+                }
+            } else if (_check.length == 3) {
+                string = "确定删除该题目吗?"
+            }
+            this.$confirm(string, "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    if (_check.length == 1) {
+                        this.checkJson.splice(_check[0], 1)
+                    } else if (_check.length == 2) {
+                        this.checkJson[_check[0]].array.splice(_check[1], 1)
+                    } else if (_check.length == 3) {
+                        this.checkJson[_check[0]].array[_check[1]].array.splice(_check[2], 1)
+                    }
+                    this.checkC = ""
+                    this.$forceUpdate()
+                    this.$emit("update:manualJson", this.checkJson);
+                })
+                .catch(() => { });
+        },
+        nextSteps(){
+            this.$emit("nextSteps")
         }
     },
     created() {
         this.checkJson = this.depthCopy(this.manualJson);
-    },
-}
+    }
+};
 </script>
 
 <style scoped>
@@ -220,7 +381,6 @@ export default {
     width: 90%;
     margin: 10px auto;
     display: flex;
-
 }
 
 .mc_addBox {
@@ -268,5 +428,134 @@ export default {
     margin-left: 20px;
     border: 1px solid #898989;
     border-radius: 8px;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+.mc_ti_1 {
+    width: 100%;
+    min-height: 40px;
+    border: 1px solid #bcbcbc;
+    padding: 10px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+}
+
+
+
+.mc_ti_1+.mc_ti_1 {
+    margin-top: 10px;
+}
+
+.mc_ti_1>.title {
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.mc_ti_1_xia,
+.mc_ti_2_xia {
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.mc_ti_2 {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    border: 1px solid #bcbcbc;
+}
+
+.mc_ti_2+.mc_ti_2 {
+    margin-top: 10px;
+}
+
+.mc_ti_2>.title {
+    cursor: pointer;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+}
+
+
+.mc_ti_3 {
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid #bcbcbc;
+}
+
+.mc_ti_3+.mc_ti_3 {
+    margin-top: 10px;
+}
+
+.mc_ti_3>.title {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.mc_ti_1>.title>.drag,
+.mc_ti_2>.title>.drag,
+.mc_ti_3>.title>.drag {
+    display: block;
+    background-image: url('../../../../../assets/icon/new/icon_course_drag.png');
+    background-size: 100% 100%;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.mc_ti_1>.title>.btnBox,
+.mc_ti_2>.title>.btnBox,
+.mc_ti_3>.title>.btnBox {
+    margin-left: auto;
+    display: flex;
+}
+
+.mc_ti_1>.title>.btnBox .open,
+.mc_ti_2>.title>.btnBox .open {
+    display: block;
+    background-image: url('../../../../../assets/icon/new/u_arrow.png');
+    background-size: 100% 100%;
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    transition: all .5s;
+    transform: rotate(-90deg);
+}
+
+.mc_ti_1>.title>.btnBox .delete,
+.mc_ti_2>.title>.btnBox .delete,
+.mc_ti_3>.title>.btnBox .delete {
+    display: block;
+    background-image: url('../../../../../assets/icon/new/delete_u.png');
+    background-size: 100% 100%;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+.mc_ti_1>.title>.btnBox .isopen,
+.mc_ti_2>.title>.btnBox .isopen {
+    transform: rotate(0deg);
+}
+
+.mc_ti_1.active,
+.mc_ti_2.active,
+.mc_ti_3.active {
+    border: 1px solid #0062ff;
+}
+
+.e_btn{
+    width: 100%;
+    margin-top: auto;
+    display: flex;
+    justify-content: flex-end;
 }
-</style>
+</style>