Files
fe-manage/src/views/research/ResearchManage.vue
2023-02-27 00:42:49 +08:00

1315 lines
34 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 评估管理页面 -->
<template>
<div class="researchmanage">
<!-- 搜索框及按钮 -->
<div class="filter">
<div class="filterItems">
<div class="select">
<a-input
v-model:value="projectName"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入评估名称"
/>
</div>
<div class="select">
<a-select
v-model:value="projectStatus"
style="width: 270px"
placeholder="请选择状态"
:options="projectStateList"
@change="handleProjectState"
allowClear
></a-select>
</div>
<div class="select">
<div class="select addTimeBox">
<div class="addTime">创建时间</div>
<a-range-picker
v-model:value="projectTime"
style="width: 420px"
format="YYYY-MM-DD"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
<div style="display: flex; margin-bottom: 20px">
<div class="btn btn1" @click="handleSearch">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btnn btn2" @click="handleRest" style="width: 105px">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="btns">
<div class="btn btn3" @click="handleNew">
<div class="search"></div>
<div class="btnText">创建评估</div>
</div>
</div>
</div>
<!-- 搜索框及按钮 -->
<!-- 表格 -->
<div class="tableBox">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tableDataFunc()"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 1500 }"
@expand="expandTable"
:pagination="false"
/>
</div>
<div class="pa">
<a-pagination
:showSizeChanger="false"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
@change="handelChangePage"
/>
</div>
<!-- 表格 -->
<a-modal
v-model:visible="newNext"
:footer="null"
:closable="false"
style="margin-top: 250px"
:centered="center"
>
<div class="out">
<div class="top">
<img class="topimg" src="../../assets/images/courseManage/add1.png" />
<div class="topc">{{ !assessmentId ? "创建" : "编辑" }}评估</div>
<div
style="margin-left: 500px; cursor: pointer"
@click="handleCancel"
>
<img
style="width: 20px; height: 20px"
src="../../assets/images/basicinfo/close.png"
/>
</div>
</div>
<div class="mid clearfix">
<div class="name">
<div class="inname">评估名称</div>
<div class="in">
<!-- <a-input
v-model:value="assessmentName"
show-count
:maxlength="15"
style="border-radius: 8px"
/> -->
<NameInput
placeholder="请输入评估名称"
v-model:value="assessmentName"
v-model:validate="validate"
:maxlength="15"
show-count
:type="4"
:id="assessmentId ? assessmentId : null"
></NameInput>
</div>
</div>
<div class="btn">
<button class="samtn btn1" @click="handleCancel">取消</button>
<button class="samtn btn2" @click="handleNext">
{{ !assessmentId ? "下一步" : "确定" }}
</button>
</div>
</div>
</div></a-modal
>
<!--操作弹窗 -->
<a-modal
v-model:visible="delete_hs"
:footer="null"
:closable="closableQR"
wrapClassName="DelModal"
style="margin-top: 400px"
@cancel="handleCancelModal"
>
<div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<img src="@/assets/images/coursewareManage/QR.png" alt="" />
<span style="margin-left: 9px">提示</span>
<div class="close_exit" @click="handleCancelModal"></div>
</div>
<div class="body">
<div :style="{ display: del_hs ? 'block' : 'none' }">
<span>您确定要删除此评估吗</span>
</div>
<div :style="{ display: over_hs ? 'block' : 'none' }">
<span>您确定要结束此评估吗</span>
</div>
<div :style="{ display: copy_hs ? 'block' : 'none' }">
<span>您确定要复制此评估吗</span>
</div>
<div :style="{ display: back_hs ? 'block' : 'none' }">
<span>您确定要撤回此评估吗</span>
</div>
<div :style="{ display: pub_hs ? 'block' : 'none' }">
<span>您确定要发布此评估吗</span>
</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="handleCancelModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" v-if="!addLoading" @click="handleSure">
<div class="btnText">确定</div>
</div>
<div class="del_btn btn2" v-else>
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!--操作弹窗 -->
</div>
<!-- 加载动画 -->
<div
class="aeLoading"
style="z-index: 100"
:style="{ display: addLoading ? 'flex' : 'none' }"
>
<a-spin :spinning="addLoading" tip="" />
</div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from "vue";
// import { message } from "ant-design-vue";
import {
queryResearchDetailList,
editAssessmentName,
editReleaseStatus,
deleteResearch,
createResearch,
} from "@/api/indexResearch";
import { traverseArr } from "../../utils/utils";
import { useRouter } from "vue-router";
import { toDate } from "../../api/method.js";
import store from "@/store";
import { message } from "ant-design-vue";
import NameInput from "@/components/project/NameInput";
import { validateName } from "@/api/index1";
export default {
name: "learningPath",
components: {
NameInput,
},
setup() {
const router = useRouter();
const state = reactive({
addLoading: false,
// projectNameList: [
// {
// id: 1,
// value: "项目一",
// label: "项目一",
// },
// {
// id: 2,
// value: "项目二",
// label: "项目二",
// },
// {
// id: 3,
// value: "项目三",
// label: "项目三",
// },
// {
// id: 4,
// value: "项目四",
// label: "项目四",
// },
// ],
projectStateList: [
{
value: 1,
label: "待发布", //发布
},
{
value: 2,
label: "已发布", //撤回
},
{
value: 3,
label: "已结束",
},
],
projectName: "",
projectStatus: null,
projectTime: "",
newNext: false,
number: null,
selectTime: null,
tableData: [
// {
// key: 1,
// number: 1,
// manager: "产品经理评估",
// state: "已发布",
// creater: "管理员",
// pubtime: "2022-07-20 9:03",
// cretime: "2022-07-20 9:03",
// haspub: false,
// },
// {
// key: 2,
// number: 2,
// manager: "高级产品经理评估",
// state: "已发布",
// creater: "管理员",
// pubtime: "2022-07-20 9:03",
// cretime: "2022-07-20 9:03",
// haspub: false,
// },
// {
// key: 3,
// number: 3,
// manager: "管理者进阶腾飞班管理者进阶腾飞班评估",
// state: "待发布",
// creater: "管理员",
// pubtime: "2022-07-20 9:03",
// cretime: "2022-07-20 9:03",
// haspub: true,
// },
// {
// key: 4,
// number: 4,
// manager: "HR评估",
// state: "已结束",
// creater: "管理员",
// pubtime: "2022-07-20 9:03",
// cretime: "2022-07-20 9:03",
// haspub: true,
// },
],
currentPage: 1,
tableDataTotal: 0,
pageSize: 10,
// value1: " ",
assessmentId: "", //区分新建/编辑
assessmentName: "",
copyItem: {},
value2: ref(),
valueE: ref(" "),
valueEE: ref(" "),
valuei: ref(" "),
delete_hs: false,
del_hs: false,
over_hs: false,
copy_hs: false,
back_hs: false,
pub_hs: false,
validate: true,
});
const tableDataFunc = () => {
const columns = [
// {
// title: "序号",
// dataIndex: "number",
// // key: "number",
// width: 100,
// align: "center",
// className: "h",
// customRender: ({ index }) => {
//{ text, record, index, column }
// return index + 1;
// },
// },
{
title: "名称",
dataIndex: "manager",
key: "manager",
width: "30%",
align: "center",
ellipsis: true,
className: "h",
customRender: ({ text }) => {
return text ? text : "-";
},
},
{
title: "状态",
dataIndex: "state",
key: "state",
width: "10%",
align: "center",
className: "h",
customRender: ({ record }) => {
switch (record.releaseStatus) {
case "1":
return "待发布";
case "2":
return "已发布";
case "3":
return "已结束";
}
},
},
{
title: "创建人",
dataIndex: "createName",
key: "createName",
width: "10%",
align: "center",
className: "h",
customRender: ({ text }) => {
return text ? text : "-";
},
},
{
title: "发布时间",
dataIndex: "pubtime",
key: "pubtime",
width: "10%",
align: "center",
className: "h",
customRender: ({ text }) => {
return text ? text : "-";
},
},
{
title: "创建时间",
dataIndex: "cretime",
key: "cretime",
width: "10%",
align: "center",
className: "h",
customRender: ({ text }) => {
return text ? text : "-";
},
},
{
title: "操作",
className: "h",
dataIndex: "opacation",
key: "opacation",
width: "20%",
align: "center",
fixed: "right",
},
];
return columns;
};
const getTableDate = async () => {
// let data = state.tableData;
state.addLoading = true;
let startTime,
endTime = "";
if (state.projectTime) {
startTime = toDate(
new Date(state.projectTime[0].$d).getTime() / 1000,
"Y-M-D"
);
endTime = toDate(
new Date(state.projectTime[1].$d).getTime() / 1000,
"Y-M-D"
);
}
let res = await queryResearchDetailList({
pageNo: state.currentPage,
pageSize: state.pageSize,
releaseStatus: state.projectStatus,
assessmentName: state.projectName,
searchEndTime: endTime,
searchStartTime: startTime,
});
const { rows, total } = res.data.data;
state.tableDataTotal = total;
const data = traverseArr(
rows,
{
key: "assessmentId",
number: "assessmentId",
manager: "assessmentName",
state: "releaseStatus",
creater: "createUserName",
pubtime: "releaseTime",
cretime: "createTime",
haspub: "assessmentId",
},
true
);
state.addLoading = false;
data.map((value) => {
{
//单层项目
value.opacation = (
<div class="operation">
{value.state === "2" ? (
<div class="fb">
<div
class="jc"
onClick={() => {
handleToManagepage(value, "/managepage");
}}
>
管理
</div>
<div
class="jc"
onClick={() => {
handleCopy(value);
}}
>
复制
</div>
<div
class="jc"
onClick={() => {
handleStatuts(value, "2");
}}
>
撤回
</div>
<div
class="jc"
onClick={() => {
handleStatuts(value, "3");
}}
>
结束
</div>
</div>
) : (
<div></div>
)}
{value.state === "1" ? (
<div class="fb">
<div
class="jc"
onClick={() => {
handleStatuts(value, "1");
}}
>
发布
</div>
<div
class="jc"
onClick={() => {
handleToResearchadd(value, "/researchadd");
}}
>
基础信息
</div>
<div
class="jc"
onClick={() => {
handleCopy(value);
}}
>
复制
</div>
<div
class="jc"
onClick={() => {
handleEditName(value);
}}
>
编辑
</div>
<div
class="jc"
onClick={() => {
handleDel(value);
}}
>
删除
</div>
</div>
) : (
<div></div>
)}
{value.state === "3" ? (
<div class="fb">
<div
class="jc"
onClick={() => {
handleCopy(value);
}}
>
复制
</div>
<div
class="jc"
onClick={() => {
handleDel(value);
}}
>
删除
</div>
</div>
) : (
<div></div>
)}
</div>
);
}
});
state.tableData = data;
};
getTableDate();
const handelChangePage = (page, pageSize) => {
state.currentPage = page;
state.pageSize = pageSize;
getTableDate();
};
const handleSearch = () => {
getTableDate();
};
const handleRest = () => {
state.projectName = "";
state.projectStatus = null;
state.projectTime = "";
getTableDate();
};
const handleProjectState = (value) => {
state.projectStatus = value;
};
const handleNew = () => {
state.newNext = true;
};
const handleEditName = (item) => {
state.id = item.id;
state.assessmentName = item.assessmentName;
state.newNext = true;
};
const handleNext = async () => {
if (!state.id) {
if (!state.assessmentName) {
message.destroy();
message.error("请输入评估名称");
return false;
}
if (!state.validate) {
message.destroy();
return message.warning("该评估名称已存在");
}
const offName = await validateName({
name: state.assessmentName,
type: 4,
id: state.id,
}).then((res) => {
return res.data.data == 1;
});
if (offName) {
message.destroy();
return message.warning("课程名称重复,请重新填写");
}
store.commit("SET_assessmentName", state.assessmentName);
router.push("/researchadd");
handleCancel();
} else {
if (!state.assessmentName) {
message.destroy();
message.error("请输入评估名称");
return false;
}
editAssessmentName({
assessmentId: state.id,
assessmentName: state.assessmentName,
}).then((res) => {
if (res.data.code === 200) {
getTableDate();
handleCancel();
}
});
}
};
const handleCancel = () => {
state.id = "";
state.assessmentName = "";
// store.commit("SET_assessmentName", "");
state.newNext = false;
};
const handleStatuts = (item, status) => {
state.id = item.id;
switch (status) {
case "1":
// 发布
state.delete_hs = true;
state.pub_hs = true;
break;
case "2":
// 撤回
state.delete_hs = true;
state.back_hs = true;
break;
case "3":
// 结束
state.delete_hs = true;
state.over_hs = true;
break;
}
};
const handleDel = (item) => {
state.id = item.id;
state.delete_hs = true;
state.del_hs = true;
};
const handleCopy = (item) => {
state.id = item.id;
state.copyItem = item;
state.delete_hs = true;
state.copy_hs = true;
};
const handleSure = () => {
// 发布
if (state.pub_hs) {
editReleaseStatus({
assessmentId: state.id,
releaseStatus: "2",
}).then((res) => {
console.log(res);
handleCancelModal();
getTableDate();
});
}
// 撤回
if (state.back_hs) {
editReleaseStatus({
assessmentId: state.id,
releaseStatus: "1",
}).then((res) => {
console.log(res);
handleCancelModal();
getTableDate();
});
}
// 结束
if (state.over_hs) {
editReleaseStatus({
assessmentId: state.id,
releaseStatus: "3",
}).then((res) => {
console.log(res);
handleCancelModal();
getTableDate();
});
}
// 删除
if (state.del_hs) {
deleteResearch({
assessmentId: Number(state.id),
}).then((res) => {
console.log(res);
handleCancelModal();
getTableDate();
});
}
// 复制
if (state.copy_hs) {
state.addLoading = true;
let resultPost = restData(state.copyItem);
resultPost.assessmentName = resultPost.assessmentName + "(1)";
console.log("resultPost");
console.log(resultPost);
createResearch(resultPost).then((res) => {
state.addLoading = false;
console.log(res);
handleCancelModal();
getTableDate();
});
}
};
const handleCancelModal = () => {
state.id = "";
state.delete_hs = false;
state.del_hs = false;
state.over_hs = false;
state.copy_hs = false;
state.back_hs = false;
state.pub_hs = false;
};
const handleToManagepage = (item, path) => {
router.push({
path: path + "/" + item.id,
});
};
const handleToResearchadd = (item, path) => {
// console.log("item.id");
// console.log(item.id);
// console.log(item);
router.push({
path: path + "/" + item.id,
});
};
onMounted(() => {
// console.log("执行");
});
// 转换成后端格式
const restData = (obj) => {
const resultArr = {
assessmentName: obj.assessmentName,
assessmentMark: obj.assessmentMark,
assessmentSingleChoiceDtoList: [],
assessmentMultipleChoiceDtoList: [],
assessmentEssayQuestionDtoList: [],
assessmentScoringQuestionDtoList: [],
};
if (obj.singleStemVoList.length) {
let single = obj.singleStemVoList;
let singleArr = [];
single.forEach((item) => {
item.assessmentSingleChoiceVoList.forEach((itm) => {
singleArr.push({
singleStemName: item.singleStemName,
questionType: item.questionType,
orderNumber: item.orderNumber,
optionOrderNum: itm.optionOrderNum,
singleOptionName: itm.singleOptionName,
singleOptionPictureAddress: itm.singleOptionPictureAddress,
});
});
});
resultArr.assessmentSingleChoiceDtoList = singleArr;
}
if (obj.multipleStemVoList.length) {
let multi = obj.multipleStemVoList;
let multiArr = [];
multi.forEach((item) => {
item.multipleChoiceVoList.forEach((itm) => {
multiArr.push({
multipleStemName: item.multipleStemName,
questionType: item.questionType,
orderNumber: item.orderNumber,
optionOrderNum: itm.optionOrderNum,
multipleOptionName: itm.multipleOptionName,
multipleOptionPictureAddress: itm.multipleOptionPictureAddress,
});
});
});
resultArr.assessmentMultipleChoiceDtoList = multiArr;
}
if (obj.essayQuestionVoList.length) {
let Ques = obj.essayQuestionVoList;
let QuesArr = [];
Ques.forEach((item) => {
QuesArr.push({
questionType: item.questionType,
assessmentQaTitle: item.assessmentQaTitle,
assessmentQaDescribe: item.assessmentQaDescribe,
orderNumber: item.orderNumber,
});
});
resultArr.assessmentEssayQuestionDtoList = QuesArr;
}
if (obj.scoringQuestionVoList.length) {
let scor = obj.scoringQuestionVoList;
let scorsArr = [];
scor.forEach((item) => {
scorsArr.push({
questionType: item.questionType,
assessmentScTitle: item.assessmentScTitle,
assessmentMinScore: item.assessmentMinScore,
assessmentMaxScore: item.assessmentMaxScore,
weightScale: item.weightScale,
orderNumber: item.orderNumber,
});
});
resultArr.assessmentScoringQuestionDtoList = scorsArr;
}
console.log(111);
console.log(resultArr);
return resultArr;
};
const expandTable = (e, a) => {
// console.log("惦记了");
console.log("e", e, a);
};
const chooseImg = (id) => {
console.log(id);
};
return {
...toRefs(state),
handleProjectState,
expandTable,
tableDataFunc,
chooseImg,
getTableDate,
handleCopy,
handleSure,
handleCancelModal,
handelChangePage,
handleSearch,
handleRest,
handleCancel,
handleNext,
handleNew,
handleEditName,
handleStatuts,
handleDel,
handleToManagepage,
handleToResearchadd,
};
},
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.addTimeBox {
position: relative;
display: flex;
align-items: center;
.addTime {
position: absolute;
z-index: 10;
margin-left: 10px;
color: rgba(0, 0, 0, 0.4);
}
.ant-picker {
padding-left: 85px;
}
.ant-picker-range .ant-picker-active-bar {
margin-left: 85px;
}
}
.out {
//display: flex;
display: block;
position: absolute;
width: 680px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 30px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
margin-left: 10px;
background-color: #4ea6ff;
color: #fff;
}
}
}
}
.researchmanage {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
.filter {
margin-left: 38px;
margin-right: 38px;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.filterItems {
display: flex;
flex-wrap: wrap;
.select {
margin-right: 20px;
margin-bottom: 20px;
}
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btnn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #ffffff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
}
}
.btn1:hover {
background: rgba(64, 158, 255, 0.76);
.search {
background-image: url("../../assets/images/courseManage/search0.png");
}
.btnText {
color: #ffffff;
}
}
.btn1:active {
background: #0982ff;
}
.btn2:hover {
background: rgba(64, 158, 255, 0.1);
}
.btn2:active {
background: rgba(64, 158, 255, 0.2);
}
}
.btns {
display: flex;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
//border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn3 {
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/courseManage/add0.png");
}
}
.btn3:hover {
background: rgba(64, 158, 255, 0.76);
.search {
background-image: url("../../assets/images/courseManage/add0.png");
}
.btnText {
color: #ffffff;
}
}
.btn3:active {
background: #0982ff;
}
}
}
.tableBox {
margin: 20px 38px 30px;
display: flex;
flex: 1;
flex-direction: column;
th.ant-table-cell {
background-color: #eff4fc !important;
text-align: center;
color: #999ba3;
}
td.ant-table-cell {
text-align: center;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
}
.pa {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 20px;
.pagination {
margin-bottom: 20px;
}
.ant-pagination-item-link,
.ant-pagination-item,
.ant-select-selector,
.ant-pagination-options-quick-jumper input {
border-radius: 8px;
}
}
.unout {
display: none;
}
.operation {
display: flex;
justify-content: right;
.fb {
display: flex;
margin-right: 20px;
.jc {
color: #4ea6ff;
font-size: 14px;
margin-left: 20px;
white-space: nowrap;
cursor: pointer;
}
}
}
}
.DelModal {
.ant-modal {
.ant-modal-content {
width: 424px !important;
.ant-modal-body {
.delete {
z-index: 9999;
width: 424px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.del-icon {
width: 16px;
height: 16px;
position: relative;
margin-right: 10px;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: 100% 100%;
}
}
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
}
</style>