|
|
@@ -9,6 +9,45 @@
|
|
|
<div class="content" :class="{content2: item.role == 2}">{{ item.text }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="ai_body_select">
|
|
|
+ <div class="checkBox" v-if="checkBool">
|
|
|
+ <div class="task">
|
|
|
+ <div class="title">选择需要优化的任务：</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="span" @click="addAllTask()">
|
|
|
+ <div class="check">
|
|
|
+ <img :src="checkImg" alt="" v-if="checkArray.length !== course.length">
|
|
|
+ <img :src="checkIsImg" alt="" v-else>
|
|
|
+ </div>
|
|
|
+ <span>全选</span>
|
|
|
+ </div>
|
|
|
+ <div class="span" v-for="(item, index) in course" :key="index" @click="addTask(index)">
|
|
|
+ <div class="check">
|
|
|
+ <img :src="checkImg" alt="" v-if="checkArray.indexOf(index) === -1">
|
|
|
+ <img :src="checkIsImg" alt="" v-else>
|
|
|
+ </div>
|
|
|
+ <span>任务{{ index+1 }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="part">
|
|
|
+ <div class="title">选择优化的部分：</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="span" v-for="(item, index) in partArray" :key="index" :class="{active:part==item.name}" @click="checkPart(item.name)">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span class="check" :class="{isCheck: checkBool}" v-if="!checkArray.length && !part" @click="checkBool = !checkBool">选择优化内容</span>
|
|
|
+ <span class="check" :class="{isCheck: checkBool}" @click="checkBool = !checkBool" v-else>
|
|
|
+ <el-tooltip :content="taskName" placement="top" effect="dark">
|
|
|
+ <!-- content to trigger tooltip here -->
|
|
|
+ <span>{{ taskName }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
<div class="ai_body_input">
|
|
|
<textarea rows="5" class="binfo_input binfo_textarea" cols v-model="courseText" placeholder="在此输入您想了解的内容"
|
|
|
style="padding-right: 86px;"></textarea>
|
|
|
@@ -18,6 +57,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import checkImg from '../../../assets/icon/sourceFile/check.png'
|
|
|
+import checkIsImg from '../../../assets/icon/sourceFile/check_is.png'
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -26,6 +68,17 @@ export default {
|
|
|
|
|
|
],
|
|
|
courseText: '',
|
|
|
+ checkImg: checkImg,
|
|
|
+ checkIsImg: checkIsImg,
|
|
|
+ checkArray: [],
|
|
|
+ course: [
|
|
|
+ {title:'任务1'},
|
|
|
+ {title:'任务2'},
|
|
|
+ {title:'任务3'}
|
|
|
+ ],
|
|
|
+ partArray: [{name: '全部内容'},{name:'任务设计'},{name:'评价设计'}],
|
|
|
+ part:'',
|
|
|
+ checkBool:false,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -35,6 +88,45 @@ export default {
|
|
|
this.array.push({text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', role: 1})
|
|
|
this.courseText = ''
|
|
|
}
|
|
|
+ },
|
|
|
+ addTask(index){
|
|
|
+ if(this.checkArray.indexOf(index) !== -1){
|
|
|
+ this.checkArray.splice(this.checkArray.indexOf(index),1)
|
|
|
+ }else{
|
|
|
+ this.checkArray.push(index)
|
|
|
+ }
|
|
|
+ console.log(index);
|
|
|
+ },
|
|
|
+ addAllTask(){
|
|
|
+ if(this.checkArray.length === this.course.length){
|
|
|
+ this.checkArray = []
|
|
|
+ }else{
|
|
|
+ this.checkArray = []
|
|
|
+ this.course.forEach((item,index)=>{
|
|
|
+ this.checkArray.push(index)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkPart(name){
|
|
|
+ this.part = name
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ courseTextLength() {
|
|
|
+ return this.courseText.length
|
|
|
+ },
|
|
|
+ taskName() {
|
|
|
+ let task = ''
|
|
|
+ if(this.checkArray.length){
|
|
|
+ task = '任务'
|
|
|
+ this.checkArray = this.checkArray.sort((a,b) => a-b)
|
|
|
+ let a = JSON.parse(JSON.stringify(this.checkArray))
|
|
|
+ for (let index = 0; index < a.length; index++) {
|
|
|
+ a[index]++;
|
|
|
+ }
|
|
|
+ task += a.join('/')
|
|
|
+ }
|
|
|
+ return task + ' ' + this.part
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
@@ -112,7 +204,7 @@ export default {
|
|
|
.ai_body_dialog{
|
|
|
padding: 10px 0;
|
|
|
box-sizing: border-box;
|
|
|
- height: calc(100% - 140px);
|
|
|
+ height: calc(100% - 180px);
|
|
|
overflow: auto;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
@@ -163,4 +255,160 @@ export default {
|
|
|
background: #3681fc;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+.ai_body_select{
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .check{
|
|
|
+ background: #e7e7e7;
|
|
|
+ display: flex;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 21px;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #0061FF;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .check::before{
|
|
|
+ content: '';
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ background-image: url('../../../assets/icon/course/aiPart.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .check::after{
|
|
|
+ content: '';
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ background-image: url('../../../assets/icon/course/aiPart_arrow.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .isCheck{
|
|
|
+ background: #0061FF;
|
|
|
+ display: flex;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 21px;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ max-width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .isCheck > span{
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .isCheck::before{
|
|
|
+ content: '';
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ background-image: url('../../../assets/icon/course/aiPart_active.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .isCheck::after{
|
|
|
+ content: '';
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ background-image: url('../../../assets/icon/course/aiPart_arrow_active.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.ai_body_select > .checkBox{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 40px;
|
|
|
+ border: 1px solid #E0EAFB;
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task > .title,
|
|
|
+.ai_body_select > .checkBox > .part > .title{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task{
|
|
|
+ height: calc(100% - 60px);
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .part{}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task > .content{
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task > .content > .span + .span{
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+.ai_body_select > .checkBox > .task > .content > .span{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.ai_body_select > .checkBox > .task > .content > .span > .check{
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.ai_body_select > .checkBox > .task > .content > .span > .check > img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .part > .content{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.ai_body_select > .checkBox > .part > .content > .span{
|
|
|
+ padding: 3px 6px;
|
|
|
+ border: 1px solid #E0EAFB;
|
|
|
+ border-radius: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.ai_body_select > .checkBox > .part > .content > .span.active{
|
|
|
+ color: #0061ff;
|
|
|
+ border-color: #0061ff;
|
|
|
+}
|
|
|
</style>
|
