<template>
  <div
    style="
      background: #0078fc;
      height: 150px;
      width: 100%;
      position: absolute;
      top: 0;
      z-index: -9999;
    "
  ></div>
  <div class="homework" style="padding: 30px">
    <!-- 面包屑导航 -->
    <div class="crumb">
      <div>{{ pName }}</div>
      <div style="margin-left: 6px; margin-right: 6px">/</div>
      <div>{{ sName }}</div>
      <div style="margin-left: 6px; margin-right: 6px">/</div>
      <div style="font-weight: 700; font-size: 16px">作业详情</div>
      <div class="preNext">
		   <span @click="prevPage" v-if="hasPrev">
          <button class="btn btn01"></button>
          <span class="content" style="margin-left: 6px">上一个</span>
       </span>
        <span @click="nextPage" v-if="hasNext">
          <span class="content" style="margin-left: 31px">下一个</span>
          <button class="btn btn02" style="margin-left: 6px"></button>
        </span>
      </div>
      <div class="return">
        <div style="display: flex" @click="returnclick">
          <el-button style="color: #0073fb">
            <img
              class="img2"
              style="margin-right: 11px; cursor: pointer"
              src="../../assets/image/return.png"
            />返回</el-button
          >
        </div>
      </div>
    </div>
    <!-- 面包屑导航 -->
    <div class="debateTitle" style="color: #fff">
      【作业】{{ data?.workName }}
    </div>
    <!-- 详细信息 -->
    <div class="detailinfo">
      <div class="detail">
        <div class="detailT">
          <div
            style="
              margin-left: 45px;
              margin-right: 42px;
              position: relative;
              width: 100%;
            "
          >
            <div class="title">
              <img
                style="width: 20px; height: 20px"
                src="../../assets/image/yuan.png"
              />
              <div class="text">作业名称</div>
              <div class="box"></div>
            </div>
            <div class="shapan">
              <div style="flex: 1; width: 0">
                <div class="shapanexplain">
                  {{ data?.workName }}
                </div>
              </div>
            </div>
            <div v-if="projectStatus && projectEndTime">
              <div
                v-if="
                  projectStatus !== '3' &&
                  new Date(projectEndTime).getTime() > new Date().getTime()
                "
              >
                <div
                  v-if="
                    dayjs().isBefore(dayjs(data?.submitEndTime)) &&
                    dayjs(data?.submitStartTime).isBefore(dayjs())
                  "
                >
                  <UploadImg v-model:value="fileList" ref="uploadRef">
                    <button class="shangchuan" style="cursor: pointer">
                      上传
                    </button>
                  </UploadImg>
                </div>
              </div>
            </div>
            <div v-else>
              <div>
                <div
                  v-if="
                    dayjs().isBefore(dayjs(data?.submitEndTime)) &&
                    dayjs(data?.submitStartTime).isBefore(dayjs())
                  "
                >
                  <UploadImg v-model:value="fileList" ref="uploadRef">
                    <button class="shangchuan" style="cursor: pointer">
                      上传
                    </button>
                  </UploadImg>
                </div>
              </div>
            </div>
            <div
              class="uploadDetail"
              :style="{
                display:
                  showFileList && fileList && fileList.length > 0
                    ? 'block'
                    : 'none',
              }"
              @mousemove="showFileList = 1"
              @mouseout="showFileList = 0"
              style="padding-top: 60px"
            >
              <div class="triangle"></div>
              <div class="square clearfix">
                <div
                  class="squarecontent1"
                  v-for="(file, i) in fileList"
                  :key="i"
                >
                  <FileTypeImg
                    v-model="file.name"
                    :style="{ margin: '12px 15px 0 27px' }"
                  ></FileTypeImg>
                  <div class="rarDetail">
                    <span class="detail1" style="margin-right: 130px">
                      {{ file.name }}
                    </span>
                    <span class="detail2" style="margin-right: 10px"
                      >{{ file.percentage }}%</span
                    >
                    <span class="detail1">{{
                      {
                        ready: "正在上传",
                        abort: "暂停",
                        uploading: "正在上传",
                        fail: "上传失败",
                        success: "上传成功",
                      }[file.status]
                    }}</span>
                    <div class="progress">
                      <div
                        class="progressinner"
                        :style="{ width: `${(291 * file.percentage) / 100}px` }"
                      ></div>
                    </div>
                  </div>
                  <button class="btn btndetail" @click="reUpload(i)">
                    {{
                      {
                        ready: "暂停",
                        uploading: "暂停",
                        abort: "开始",
                        fail: "重传",
                      }[file.status]
                    }}
                  </button>
                  <button class="btn" @click="remove">
                    {{
                      {
                        ready: "取消",
                        abort: "取消",
                        uploading: "取消",
                        fail: "取消",
                        success: "删除",
                      }[file.status]
                    }}
                  </button>
                </div>
              </div>
            </div>

            <div class="title">
              <img
                style="width: 20px; height: 20px"
                src="../../assets/image/yuan.png"
              />
              <div class="text">作业内容</div>
              <div class="box"></div>
            </div>
            <div
              v-if="
                dayjs().isBefore(dayjs(data?.submitEndTime)) &&
                dayjs(data?.submitStartTime).isBefore(dayjs())
              "
            >
              <el-input
                v-model="sbValue.content"
                :autosize="{ minRows: 12.5, maxRows: 12.5 }"
                resize="none"
                type="textarea"
              />
            </div>
            <div v-else class="join">
              <el-input
                disabled
                v-model="sbValue.content"
                :autosize="{ minRows: 12.5, maxRows: 12.5 }"
                resize="none"
                type="textarea"
              />
            </div>
            <div v-if="projectStatus && projectEndTime">
              <div
                v-if="
                  projectStatus !== '3' &&
                  new Date(projectEndTime).getTime() > new Date().getTime()
                "
              >
                <div
                  v-if="
                    dayjs().isBefore(dayjs(data?.submitEndTime)) &&
                    dayjs(data?.submitStartTime).isBefore(dayjs())
                  "
                >
                  <div style="display: flex; justify-content: center">
                    <button class="tijiao" @click="handleClick">
                      {{
                        submitList && submitList.length > 0 ? "再次" : ""
                      }}提交
                    </button>
                  </div>
                </div>

                <div v-else>
                  <div style="display: flex; justify-content: center">
                    <button
                      disabled
                      class="tijiao"
                      style="
                        background: #999;
                        border-radius: 6px;
                        cursor: not-allowed;
                      "
                    >
                      未在有效时间范围内
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div>
                <div
                  v-if="
                    dayjs().isBefore(dayjs(data?.submitEndTime)) &&
                    dayjs(data?.submitStartTime).isBefore(dayjs())
                  "
                >
                  <div style="display: flex; justify-content: center">
                    <button class="tijiao" @click="handleClick">
                      {{
                        submitList && submitList.length > 0 ? "再次" : ""
                      }}提交
                    </button>
                  </div>
                </div>

                <div v-else>
                  <div style="display: flex; justify-content: center">
                    <button
                      disabled
                      class="tijiao"
                      style="
                        background: #999;
                        border-radius: 6px;
                        cursor: not-allowed;
                      "
                    >
                      未在有效时间范围内
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class=""></div>

            <div class="title" style="margin-top: 0px">
              <img
                style="width: 20px; height: 20px"
                src="../../assets/image/yuan.png"
              />
              <div class="text">历史记录</div>
              <div class="box"></div>
            </div>

            <div class="history">
              <div class="historytitle">
                <div class="content1">提交时间</div>
                <div class="content2">作业内容</div>
                <div class="content3">附件</div>
              </div>
              <div
                v-for="(value, index) in submitList"
                :key="index"
                class="historytitle2"
                :style="{
                  'border-bottom':
                    index === submitList.length - 1
                      ? '1px solid rgba(215, 229, 253, 0)'
                      : '1px solid rgba(215, 229, 253, 1)',
                }"
              >
                <div class="content1">{{ value.createTime }}</div>
                <div class="content2">
                  <div :title="value.workUploadContent">
                    {{ value.workUploadContent }}
                  </div>
                </div>
                <div class="content3">
                  <div>
                    <span style="margin-left: 10px">
                      <el-link
                        target="_blank"
                        type="primary"
                        :href="
                          fielPath + value.workUploadAddress?.split(',')[0] ||
                          ''
                        ">
                        {{ value.workUploadAddress?.slice(value.workUploadAddress.lastIndexOf('/')+1) }}
                      </el-link>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="righttitle">
          <img
            style="width: 20px; height: 20px"
            src="../../assets/image/yuan.png"
          />
          <div class="text">截止时间</div>
          <div class="box"></div>
        </div>
        <div class="timebox clearfix">
          <div class="innertime">
            {{
              data?.submitStartTime
            }}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{
              data?.submitEndTime
            }}
          </div>
          <div class="endtime clearfix">
            <div
              v-if="dayjs(data?.submitEndTime).isBefore(dayjs())"
              class="endtimetext"
            >
              该任务已结束
            </div>
            <div v-else class="endtimetext">
              距离结束还有&nbsp;&nbsp;<span class="te">{{
                parseInt(
                  dayjs(data?.submitEndTime).diff(dayjs(), "minute") / 60
                )
              }}</span
              >&nbsp;&nbsp; 小时&nbsp;&nbsp;
              <span class="te">{{
                dayjs(data?.submitEndTime).diff(dayjs(), "minute") % 60
              }}</span
              >&nbsp;&nbsp;分钟
            </div>
          </div>
        </div>
        <div class="righttitle">
          <img
            style="width: 20px; height: 20px"
            src="../../assets/image/yuan.png"
          />

          <div class="text">作业说明</div>
          <div class="box"></div>
        </div>
        <div class="explain clearfix">
          <!-- todo #作业任务详情 作业说明是作业要求字段么？-->
          <div
            class="explain1"
            style="margin-top: 26px"
            v-html="data?.workRequirement"
          ></div>
        </div>
      </div>
    </div>
    <!-- 详细信息 -->
  </div>

  <el-dialog
    v-model="centerDialogVisible"
    title=""
    width="20%"
    center
    :show-close="false"
    :align-center="true"
  >
    <div style="text-align: center; font-size: 16px">
      <span style="color: black"> 提交成功 </span>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          class="cancel"
          style="
            color: #387df7;
            border: 1px solid #387df7;
            padding: 8px 32px;
            border-radius: 4px;
          "
          @click="centerDialogVisible = false"
          >取消</el-button
        >
        <el-button
          class="back"
          style="
            background: #387df7;
            box-shadow: 1px 2px 15px 1px rgba(56, 125, 247, 0.34);
            border: 0px;
            padding: 8px 32px;
          "
          type="primary"
          @click="returnclick"
        >
          返回
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref, toRefs } from "vue";
import { request, useRequest } from "@/api/request";
import {
  TASK_WORK_COMMIT,
  TASK_WORK_DETAIL,
  TASK_WORK_SUBMIT_LIST,
  WhetherImportHomeWorkScore,
  WORK_HISTROY,
} from "@/api/api";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
// import store from "@/store";
import UploadImg from "@/components/img/UploadImgHomeWork.vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import { useRoute } from "vue-router/dist/vue-router";
import { ElMessage } from "element-plus";
import {useTaskPage} from "@/api/useCommon";
//import AlertSuccess from "@/components/alert/AlertSuccess.vue";

const fileList = ref([]);
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
const uploadRef = ref();
const {nextPage,prevPage,hasPrev, hasNext} = useTaskPage()
const centerDialogVisible = ref(false);
const sbValue = ref({
  content: "",
  attach: "",
});
const router = useRouter();
const returnclick = () => {
  router.back();
};
const {
  query: {
    courseId: workId,
    type,
    id: taskId,
    pName,
    sName,
    projectStatus,
    projectEndTime,
    infoId,
  },
} = useRoute();
const { data } =
  taskId && taskId !== "undefined"
    ? useRequest(TASK_WORK_DETAIL, { workId, taskId })
    : useRequest(TASK_WORK_DETAIL, { workId });

console.log("data==----->", data);

const { data: submitList } = useRequest(TASK_WORK_SUBMIT_LIST, {
  workerId: workId,
});
console.log("submitList==----->", submitList);
// 判断是否已经提交过成绩
const submitScore = ref(false);

request(WhetherImportHomeWorkScore,{
	"workId": workId
}).then(res=>{
  console.log('学员端是否导入过成绩查询', res)
  if(res.data){
    submitScore.value = true;
  }else{
    submitScore.value = false;
  }
}).catch(err=>{
  console.log(err)
})

const open = () => {
  centerDialogVisible.value = true;
};
const showFileList = computed(() => {
  return fileList.value.length;
});

const handleClick = () => {
  console.log(fileList.value, uploadRef.value);
  // 判断当前学员作业成绩是否已经导入，如果已经导入成绩，则不允许其再次上传作业
  if(submitScore.value){
    ElMessage.warning("您的作业成绩已出，不能重复上传");
    return 
  }

  if (!sbValue.value.content) {
    if (fileList.value.length === 0) {
      return ElMessage.warning("请输入作业内容");
    }
  }
  request(TASK_WORK_COMMIT, {
    projectOrRouterLogo: type,
    workUploadContent: sbValue.value.content,
    workUploadAddress: fileList.value.map((e) => e.url).join(",") || "",
    workId,
    type,
    taskId: taskId || infoId,
  }).then((res) => {
    console.log(res);
    submitList.value.unshift(res.data);
    open();
    sbValue.value.content = "";
    fileList.value = [];
    remove(0);
    clearFiles();
  });
};

function clearFiles() {
  uploadRef.value.clearFiles();
}

function remove(i) {
  uploadRef.value.remove(i);
}

function reUpload(i) {
  uploadRef.value.reUpload(i);
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.homework {
  .crumb {
    color: #fff;
    display: flex;
    font-size: 14px;
    line-height: 24px;
    position: relative;
  }

  .return {
    position: absolute;
    right: 10%;

    .text {
      text-align: center;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }

  .preNext {
    position: absolute;
    right: 0px;

    .content {
      font-size: 14px;
      color: #fff;
      width: 43px;
      height: 14px;
      display: inline-block;
      position: relative;
      top: -6px;
      cursor: pointer;
    }

    .btn {
      width: 23px;
      height: 23px;
      border-radius: 50%;
      border: 0;
      cursor: pointer;
    }

    .btn01 {
      background-image: url("../../assets/image/prev.png");
    }

    .btn02 {
      background-image: url("../../assets/image/next.png");
    }
  }

  .debateTitle {
    margin-top: 15px;
    font-size: 20px;
    line-height: 24px;
    height: 24px;
    font-weight: 600;
    margin-left: -10px;
  }

  .detailinfo {
    width: 100%;
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;

    .detail {
      flex: 1;

      .detailT {
        // height: 1000px;

        color: rgba(51, 51, 51, 1);
        display: flex;
        padding-bottom: 30px;
        width: 100%;

        .shapan {
          width: 100%;
          height: 58px;
          margin-top: 30px;
          background-image: url("../../assets/image/shapan.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;

          .shapanexplain {
            margin-left: 34px;
            margin-right: 10px;
            font-size: 20px;
            font-weight: 800;
            color: #4a9cf8;
            line-height: 24px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .shangchuan {
          z-index: 999;
          font-size: 16px;
          font-weight: 800;
          color: #ffffff;
          line-height: 24px;
          position: absolute;
          right: -6px;
          top: 162px;
          border: 0;
          background-color: #fff;
          width: 162px;
          height: 62px;
          background-image: url("../../assets/image/shangchuan.png");
        }

        .uploadDetail {
          position: absolute;
          //top: 235px;
          right: 3px;
          z-index: 100;

          .triangle {
            top: -10px;
            right: 60px;
            width: 0;
            height: 0;
            position: absolute;
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
            border-bottom: 10px solid #fff;
            // box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
          }

          .square {
            padding-bottom: 40px;
            width: 600px;
            background: #ffffff;
            box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
            border-radius: 8px;

            .squarecontent1 {
              padding-top: 40px;
              display: flex;

              .rar {
                margin: 12px 15px 0 27px;
                width: 22px;
                height: 26px;
                background-image: url("../../assets/image/rar.png");
              }

              .rarDetail {
                .detail1 {
                  // height: 14px;
                  font-size: 12px;
                  line-height: 30px;
                  font-weight: 500;
                  color: #677d86;
                }

                .detail2 {
                  // height: 11px;
                  font-size: 12px;
                  font-weight: 500;
                  color: #277aff;
                }

                .progress {
                  width: 291px;
                  height: 8px;
                  background: #e8f1fe;
                  border-radius: 4px;

                  .progressinner {
                    height: 8px;
                    background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%);
                    border-radius: 4px;
                  }
                }
              }

              .btn {
                border: 0;
                background-color: #fff;
                color: #277aff;
                margin-top: 20px;
                cursor: pointer;
              }

              .btndetail {
                margin-left: 25px;
              }
            }

            .squarecontent2 {
              margin-top: 25px;
              display: flex;

              .rar {
                margin: 12px 15px 0 27px;
                width: 22px;
                height: 26px;
                background-image: url("../../assets/image/rar.png");
              }

              .rarDetail {
                .detail1 {
                  // height: 14px;
                  font-size: 12px;
                  line-height: 30px;
                  font-weight: 500;
                  color: #677d86;
                }

                .detail2 {
                  // height: 11px;
                  font-size: 12px;
                  font-weight: 500;
                  color: #277aff;
                }

                .progress {
                  width: 291px;
                  height: 8px;
                  background: #e8f1fe;
                  border-radius: 4px;

                  .progressinner {
                    width: 231px;
                    height: 8px;
                    background: linear-gradient(0deg, #ee625e 0%, #eea4a1 100%);
                    border-radius: 4px;
                  }
                }
              }

              .btn {
                border: 0;
                background-color: #fff;
                color: #277aff;
                margin-top: 20px;
                cursor: pointer;
              }

              .btndetail {
                margin-left: 25px;
              }
            }

            .squarecontent3 {
              margin-top: 25px;
              display: flex;

              .rar {
                margin: 12px 15px 0 27px;
                width: 22px;
                height: 26px;
                background-image: url("../../assets/image/rar.png");
              }

              .rarDetail {
                .detail1 {
                  // height: 14px;
                  font-size: 12px;
                  line-height: 30px;
                  font-weight: 500;
                  color: #677d86;
                }

                .detail2 {
                  // height: 11px;
                  font-size: 12px;
                  font-weight: 500;
                  color: #277aff;
                }

                .progress {
                  width: 291px;
                  height: 8px;
                  background: #e8f1fe;
                  border-radius: 4px;

                  .progressinner {
                    width: 291px;
                    height: 8px;
                    background: linear-gradient(0deg, #36d1ae 0%, #3be5bf 100%);
                    border-radius: 4px;
                  }
                }
              }

              .btn {
                border: 0;
                background-color: #fff;
                color: #277aff;
                margin-top: 20px;
                cursor: pointer;
              }

              .btndetail {
                margin-left: 25px;
              }
            }
          }
        }

        .tijiao {
          z-index: 999;
          cursor: pointer;
          margin-top: 22px;
          // margin-left: 480px;
          width: 33px;
          height: 16px;
          font-size: 16px;
          font-weight: 800;
          color: #ffffff;
          line-height: 24px;
          border: 0;
          background-color: #fff;
          width: 162px;
          height: 62px;
          background-image: url("../../assets/image/tijiao.png");
        }

        .history {
          position: relative;
          margin-top: 32px;
          width: 100%;
          border: 1px solid #d7e5fd;
          border-radius: 8px;

          .fenge {
            width: 100%;
            border-top: 1px solid #d7e5fd;
          }

          .tongyi {
            display: flex;
          }

          .content1 {
            margin-top: 14px;
            margin-left: 20px;
            width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .content2 {
            margin-top: 14px;
            margin-left: 20px;
            width: 460px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .content3 {
            margin-top: 14px;
            margin-left: 20px;
            // width: 230px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .historycontent {
            height: 14px;
            font-size: 14px;
            font-weight: 400;
            color: #333330;
            line-height: 38px;
          }

          .historytitle {
            width: 100%;
            height: 50px;
            background: #f2f5f7;
            border-radius: 8px 8px 0px 0px;
            display: flex;
          }

          .historytitle2 {
            width: 100%;
            height: 48px;
            // background: #fff;
            display: flex;
          }
        }

        .title {
          display: flex;
          align-items: center;
          padding-top: 39px;
          position: relative;
        }

        .title .text {
          margin-left: 8px;
          font-size: 16px;
          color: rgba(51, 51, 51, 1);
          font-weight: 800;
        }

        .title .box {
          width: 75px;
          height: 10px;
          background-color: rgba(36, 120, 255, 0.15);
          position: absolute;
          left: 23px;
          top: 53px;
        }

        .all {
          display: flex;
          justify-content: space-between;
          width: 1280px;
          margin-top: 43px;

          .allbox1 {
            background: linear-gradient(
              0deg,
              rgba(160, 193, 230, 0) 0%,
              rgba(161, 195, 231, 0.2) 100%
            );
          }

          .allbox2 {
            background: linear-gradient(
              0deg,
              rgba(177, 219, 229, 0) 0%,
              rgba(172, 216, 227, 0.2) 100%
            );
          }

          .allbox3 {
            background: linear-gradient(
              0deg,
              rgba(195, 209, 234, 0) 0%,
              rgba(191, 206, 231, 0.2) 100%
            );
          }

          .item {
            width: 410px;
            height: 149px;
            text-align: center;
            border-radius: 4px;

            .item1 {
              color: #089dff;
              font-size: 24px;
              font-weight: bold;
              margin-top: 36px;
            }

            .item2 {
              color: #333330;
              font-size: 14px;
              margin-top: 29px;
            }
          }
        }

        .join {
          width: 100%;
          margin-top: 32px;

          .el-textarea__inner {
            border-radius: 8px;
            background-color: rgba(245, 246, 247, 1);
          }
        }
      }
    }

    .right {
      margin-right: 45px;

      .righttitle {
        display: flex;
        padding-top: 39px;
        position: relative;

        .text {
          margin-left: 8px;
          font-size: 16px;
          color: rgba(51, 51, 51, 1);
          font-weight: 800;
        }

        .box {
          width: 75px;
          height: 10px;
          background-color: rgba(36, 120, 255, 0.15);
          position: absolute;
          left: 23px;
          top: 53px;
        }
      }

      .timebox {
        width: 417px;
        height: 149px;
        background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
        border-radius: 4px;
        margin-top: 52px;
      }

      .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
        clear: both;
      }

      .innertime {
        margin-top: 17px;
        margin-left: 55px;
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
      }

      .endtime {
        margin-left: 10px;
        margin-top: 16px;
        width: 397px;
        height: 81px;
        background: #f2f5f7;
        border-radius: 0px 8px 0px 8px;

        .endtimetext {
          margin-top: 25px;
          margin-left: 46px;

          .te {
            font-size: 28px;
            font-weight: 800;
            color: #4a9cf8;
            line-height: 24px;
          }
        }
      }

      .explain {
        margin-top: 30px;
        width: 416px;
        // height: 158px;
        background: #f2f5f7;
        border-radius: 8px;
        padding-bottom: 25px;

        .explain1 {
          margin-left: 23px;
          width: 360px;
          // height: 38px;
          font-size: 14px;
          font-weight: 500;
          color: #333330;
          line-height: 24px;
        }
      }
    }
  }

  .el-dialog {
    color: black;
    text-align: center;
    font-size: 16px;

    .title {
      text-align: center;
    }

    .dialog-footer {
      .back {
        background: #387df7;
        box-shadow: 1px 2px 15px 1px rgba(56, 125, 247, 0.34);
        border: 0px;
        padding: 8px 32px;
        border-radius: 4px;
      }

      .cancel {
        background: #387df7;
        border: 0px;
        padding: 8px 32px;
        border: 1px solid #387df7;
        border-radius: 4px;
      }
    }
  }
}
</style>
