<template>
  <div class="projectdetails">
<!--    <ReturnHead-->
<!--      text="项目详情"-->
<!--      :showfile="true"-->
<!--      :courseId="projectId || courseId"-->
<!--      :type="1"-->
<!--      :gohome="type == 1 ? true : false"-->
<!--    ></ReturnHead>-->
    <div class="main">
      <div class="up">
        <!-- <div class="notice">
          <span class="text"
            >请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
          >
          <span class="close"></span>
        </div> -->
        <div class="content">
          <div class="title">{{ data?.name }}</div>
          <div class="text2">
            {{ data?.remark ? data?.remark : "-" }}
          </div>
        </div>
      </div>
      <div class="down">
        <div class="project_title">项目内容</div>
        <div
          class="project_second"
          v-for="(item, key) in data?.stageProcessList"
          :key="key"
        >
          <div v-if="item.id == '0' && item.taskProcessList?.length == 0"></div>
          <div
            v-else
            style="
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
            "
          >
            <div class="course1_first">
              <div class="text8">{{ item.stageName }}</div>

              <!-- 当前任务已结束的时候显示下面 -->
              <div class="course1_right" :style="{ display: 'flex' }">
                <div
                  style="
                    width: 8px;
                    height: 8px;
                    border-radius: 8px;
                    border: 2px solid #999;
                  "
                  :style="
                    item.statusName === '已完成' || item.statusName === '进行中'
                      ? 'border: 2px solid #0060ff'
                      : 'border: 1px solid #999;'
                  "
                ></div>
                <div
                  class="text9"
                  :style="
                    item.statusName === '已完成' || item.statusName === '进行中'
                      ? 'color:#0060ff'
                      : 'color:#999'
                  "
                >
                  {{
                    item.statusName ||
                    (data.unlockMode === 1 ? "未开始" : "未解锁")
                  }}
                </div>
              </div>
            </div>
            <div class="secondcontent">
              <div
                class="question"
                v-for="(el, index) in item.taskProcessList
                  .sort((a, b) => {
                    return a.id - b.id;
                  })
                  .filter((e) => !whiteTypes(e.type))"
                :key="index"
                :style="{ height: el.type === 1 ? '90px' : '72px' }"
              >
                <div style="width: calc(100% - 80px)">
                  <div class="issue" :title="el.name">
                    {{ el.name }}
                  </div>
                  <div v-if="el.type === 1" class="progressBox">
                    <!-- <div>当前进度</div> -->
                    <div
                      class="progress"
                      style="
                        display: flex;
                        align-items: center;
                        margin-bottom: 3px;
                      "
                    >
                      <div style="width: 200px">
                        <el-progress
                          :percentage="parseInt(el.currentRatio)"
                          :show-text="false"
                          :stroke-width="8"
                          :color="
                            {
                              0: 'rgba(238, 112, 108, 1)',
                              1: 'rgba(255, 151, 38, 1)',
                              2: 'rgba(39, 122, 255, 1)',
                              3: 'rgba(59, 94, 251, 1)',
                              4: 'rgba(57, 219, 183, 1)',
                              5: 'rgba(57, 219, 183, 1)',
                            }[parseInt(parseInt(el.currentRatio) / 20)]
                          "
                        />
                      </div>
                      <div
                        style="
                          font-size: 12px;
                          font-weight: 500;
                          color: #277aff;
                          margin-left: 10px;
                        "
                        :style="{
                          color: {
                            0: 'rgba(238, 112, 108, 1)',
                            1: 'rgba(255, 151, 38, 1)',
                            2: 'rgba(39, 122, 255, 1)',
                            3: 'rgba(59, 94, 251, 1)',
                            4: 'rgba(57, 219, 183, 1)',
                            5: 'rgba(57, 219, 183, 1)',
                          }[parseInt(parseInt(el.currentRatio) / 20)],
                        }"
                      >
                        {{ parseInt(el.currentRatio) }}%
                      </div>
                    </div>
                  </div>
                  <div class="coursetag">
                    <div
                      class="tag1"
                      style="margin-right: 11px; margin-top: 3px"
                      v-if="el.flag"
                    >
                      必修
                    </div>
                    <div
                      class="tag2"
                      style="margin-right: 11px; margin-top: 3px"
                      v-if="!el.flag"
                    >
                      选修
                    </div>
                    <div
                      class="tag3"
                      style="margin-right: 11px; margin-top: 3px"
                    >
                      {{ TASK_TYPES.typeName[el.type] || "" }}
                    </div>
                  </div>
                </div>

                <el-dropdown trigger="click">
                  <!-- <div class="goclass" @click="toFinish(el, item.stageName, item.id)" :style="{ background: el.statusName !== '已结束' &&(el.statusName || data.unlockMode === 1) ? '#2478ff' : '#999' }">
                    {{el.statusName || (data.unlockMode === 1 ? TASK_TYPES.toName[el.type] : "未解锁")}}
                  </div> -->
                  <div v-if="data.unlockMode === 1" class="goclass" @click="toFinish(el, item.stageName, item.id, item.studyModel)" :style="{ background: (el.statusName !== '已结束' && (el.statusName || item.studyModel==0)) ? '#2478ff' : '#999' }">
                    {{ el.statusName || (item.studyModel==0 ? TASK_TYPES.toName[el.type] : '未解锁')}}
                  </div>
                  <div v-else class="goclass" @click="toFinish(el, item.stageName, item.id, item.studyModel)" :style="{ background: (el.statusName !== '已结束' && el.statusName) ? '#2478ff' : '#999' }">
                    {{ el.statusName ||  '未解锁' }}
                  </div>
                  <!-- <template #dropdown v-if="el.type===2 && el.targetId?.split(',')?.length > 1">
                    <el-dropdown-menu>
                      <el-dropdown-item v-for="(name,key) in el.targetName?.split(',')" :key="key" @click="toOffcoursePlanPage(el.targetId?.split(',')[key])">{{ name }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </template> -->
                </el-dropdown>


              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="last">
        <div class="project_title">数据排行</div>
        <div class="ranking">
          <div class="rankingbox">
            <div class="ranknumber">
              <div class="describe">积分</div>
              <div class="number">12</div>
              <div class="describe_part">名</div>
            </div>
            <div class="ranknumber">
              <div class="describe">完成度</div>
              <div class="number">21</div>
              <div class="describe_part">名</div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <!-- 开课列表弹框 -->
    <el-dialog title="" top="120px" v-model="openCourseVisible" :show-close="false"
               style="display:flex;justify-content:center;align-items:center;min-height: 320px;padding:0;border-radius: 4px;"
               width="80%">
      <div style="display: flex;justify-content:space-between;align-items:center;margin-bottom: 22px;width: 100%;">
        <div style="width:88px;color:#333333;font-size: 16px;font-weight: 600;">开课列表</div>
        <div
          @click="openCourseVisible = false"
          style="font-size: 12px;cursor:pointer;">X</div>
      </div>
      <div style="width: 100%;min-height:210px;margin-top: 12px;">
        <div 
          v-for="item,key in openCourseList"
          style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 12px;background: rgb(247, 251, 253);height: 40px;padding: 5px;border-radius: 5px;">
          <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 200px;">{{ item }}</div>
          <div 
            @click="toOffcoursePlanPage(openCourseIdList[key])"
            style="width:60px;height:30px;text-align:center;line-height:30px;background:#0078fc;border-radius:5px;color:#fff;cursor: pointer;">去上课</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, reactive, ref, watch, onMounted } from "vue";
import { ElLoading } from "element-plus";
import { useRequest, request } from "@/api/request";
import {
  PROJECT_PROCESS,
  STUDY_RECORD,
  PROJECT_DETAIL,
  SubmitExternalExam,
  UPDATE_CURRENT_TASK,
  checkStudentExist,
  EvaluationToLearn,
  QueryEvaluationTaskStatusOne
} from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import store from "@/store";
import { ElMessage } from "element-plus";
import ReturnHead from "@/components/ReturnHead.vue";
import { PROJECT, TASK_TYPES } from "@/api/CONST";
import dayjs from "dayjs";
import { useStore } from "vuex";
import { changeTime } from "@/api/method";
const {
  query: { courseId, projectId, type, infoId, chapterOrStageId, id },
} = useRoute();
const router = useRouter();
const { commit, dispatch, state } = useStore();
const data = computed(() => state.projectInfo);
useRequest(PROJECT_PROCESS, { projectId: projectId, type }, (e) => {
  useRequest(
    checkStudentExist,
    {
      targetId: type == 1 ? projectId : infoId,
      type: type,
      chapterId: chapterOrStageId,
      courseId: id,
    },
    (res) => {
      console.log("判断任务是否删除", res);
      if (res.code === 7) {
        router.push({
          path: "/loseefficacy",
        });
      } else {
        if (res.code === 6) {
          router.push({
            path: "/notpath",
          });
        }
      }
    }
  );
});
watch(data, () => {
  if (data.value.code === 6) {
    router.push({
      path: "/notpath",
    });
  }
});
onMounted(() => {
  dispatch("getProjectInfo", { projectId, type });
});
watch(
  () => data.value.stageProcessList,
  () => {
    if (data.value.stageProcessList) {
      data.value.stageProcessList.forEach((t) => {
        t.stageStatusName = getTaskStatus(t);
      });
      console.log("改变data", data);
    }
  },
  { deep: true }
);
// watch(data, () => {
//   console.log("data.value.projectId", data.value);
//   if (data && data.value && !data.value.projectId) {
//     ElMessage.warning("您不是此项目的学员");
//     console.log("您不是此项目的学员");
//     // window.open(
//     //   import.meta.env.VITE_BOE_BASE_URL + "/mobile/pages/index/index",
//     //   "_self"
//     // );
//   }
// });

function getTaskStatus(d) {
  if (data.value.status !== 3) {
    return "已结束";
  }
  if (
    dayjs().isBefore(dayjs(d.beginTime)) ||
    !d.taskProcessList?.filter((t) => t.status === 1)?.length
  ) {
    return "未开始";
  }
  if (dayjs().isAfter(dayjs(data.value.endTime))) {
    return "已结束";
  }
  if (
    d.taskProcessList?.filter((t) => t.status === 1)?.length ===
    d.taskProcessList?.length
  ) {
    return "已完成";
  }
  return "进行中";
}
console.log("datadata", data);
const openCourseVisible = ref(false);
const openCourseList = ref([]);
const openCourseIdList = ref([]);

const userInfo = computed(() => store.state.userInfo);
const activeName = ref("first");
const handleClick = (tab, event) => {
  console.log(tab, event);
};
const path = { 1: "path" };
const types = ref({
  typeName: {
    1: "在线",
    2: "面授",
    3: "案例",
    4: "作业",
    5: "考试",
    6: "直播",
    7: "外链",
    8: "讨论",
    9: "活动",
    10: "测评",
    11: "评估",
    12: "投票",
    13: "项目",
  },
  toName: {
    1: "去上课",
    2: "去上课",
    3: "去阅读",
    4: "去完成",
    5: "去完成",
    6: "去观看",
    7: "去查看",
    8: "去讨论",
    9: "去签到",
    10: "去完成",
    11: "去完成",
    12: "去投票",
    13: "去完成",
  },
  path: {
    1: window.location.protocol + import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
    2: ({ targetId }) => window.open(`${location.protocol}//${location.host}${import.meta.env.VITE_BASE_API}/stu/project/redirectDetail?courseId=${targetId}`, "_top"),
    3: window.location.protocol + import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
    4: "/homeworkpage",
    5: window.location.protocol + import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
    // 5: "/externalexam",
    6: "/livebroadcast",
    7: "/outerchain", //外联
    8: "/discusspage",
    9: "/moreactive",
    // 10: ({ evaType, targetId }) =>
    //   window.open(
    //     evaType == 0
    //       ? import.meta.env.VITE_BOE_TEST_DETAIL_URL + targetId
    //       : import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL +
    //           targetId +
    //           `&quizTaskKid=${projectId}&channelCode=project`,
    //     "_top"
    //   ), //测评
    10: "/evaluation", //测评
    11: "/investigatpage",
    12: "/ballotpage",
    13: "/projectdetails",
  },
});

const dialogVisible = ref(false);
const dialogVisibleTip = ref("该任务无法学习，请联系管理员进行替换！");

// 判断当前任务已结束及时间意义上的结束 提示用户
function judgeTaskIsEnd(type, endTimes, status) {
  // type 任务类型 endTime 结束时间 status 任务状态 (状态  0 未完成 1 已完成 2 未开始 3 已结束)
  console.log("judgeTaskIsEnd", type, endTimes, status);
  let isEnd = false;
  let nowTime = new Date().getTime();
  let endTime = new Date().getTime(changeTime(endTimes));
  console.log("endTime---------", endTime);
  switch (type) {
    case 1:
      status == -1
        ? (isEnd = true)
        : nowTime > endTime
        ? (isEnd = true)
        : (isEnd = false);
      break;
    case 3:
      status == -1
        ? (isEnd = true)
        : nowTime > endTime
        ? (isEnd = true)
        : (isEnd = false);
      break;
    case 5:
      status == -1
        ? (isEnd = true)
        : nowTime > endTime
        ? (isEnd = true)
        : (isEnd = false);
      break;
    case 7:
      status == -1
        ? (isEnd = true)
        : nowTime > endTime
        ? (isEnd = true)
        : (isEnd = false);
      break;
    case 10:
      status == -1
        ? (isEnd = true)
        : nowTime > endTime
        ? (isEnd = true)
        : (isEnd = false);
      break;
  }
  return isEnd;
}

function toFinish(d, sName, chapterOrStageId,studyModel) {
  if (studyModel != 0 && !d.statusName) {
    ElMessage.warning("当前未解锁")
    return
  }
  if(d.statusName == '未解锁'|| d.statusName == ''||!d.hasOwnProperty('statusName')){
    ElMessage.warning("当前未解锁")
    return
  }
  if (d.type === 2) {
    if(!d.targetId){
      return ElMessage.error("还未添加开课,请联系管理员！")
    }
    if(d.targetId.split(',').length>1){
      openCourseList.value = d.targetName?.split(',');
      openCourseIdList.value = d.targetId?.split(',');
      openCourseVisible.value = true;
      return
    }
  }
  if (judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)) {
    ElMessage.error("当前任务已结束");
    return;
  }
  if (d.type == 2) {
    let date1 = new Date(changeTime(d.endTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 < date2) {
      ElMessage.warning("当前面授课已结束");
      return;
      //return
    }
  }
  // 作业过期判断
  if (d.type == 4) {
    let date1 = new Date(changeTime(d.endTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 < date2) {
      ElMessage.warning("当前作业已结束");
      return;
    }
  }
  // 直播结束时间
  if (d.type == 6) {
    let date1 = new Date(changeTime(d.endTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 < date2) {
      ElMessage.warning("当前直播已结束");
      return;
    }
  }
  // 考试 停用
  if (d.type == 5) {
    if (d.taskStatus == 1 || d.taskStatus == 2) {
      // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
      ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
      return;
    }
    // 此处判断外部考试跳转
    if (d.examType == 2) {
      // 点击即更新状态 进行中 chapterOrStageId
      request(SubmitExternalExam, {
        chapterId: chapterOrStageId,
        externalId: d.courseId,
        externalName: d.name,
        targetId: data.value.projectId,
        studentNo: userInfo.value.userNo,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
      router.push({
        path: "/externalexam",
        query: {
          courseId: d.courseId,
          type: PROJECT,
        },
      });
      return;
    }
  }
  // 评估 停用
  if (d.type == 11) {
    if (d.taskStatus == 1 || d.taskStatus == 2) {
      ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
      return;
    }
  }
  // 其他活动 结束时间
  if (d.type == 9) {
    let date1 = new Date(changeTime(d.endTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 < date2) {
      ElMessage.warning("当前活动已结束");
      return;
    }
  }
  // 在线课 停用 -- 暂时没有在线课停用标记
  if (d.type == 1) {
    if (d.taskStatus == 1 || d.taskStatus == 2) {
      ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
      return;
    }
  }
  // 面授课 停用
  if (d.type == 2) {
    if (d.taskStatus == 1 || d.taskStatus == 2) {
      ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
      return;
    }
  }
  if (d.type == 10) {
    if (d.quizTaskId == null) {
      // 肯定没有完成测评
      // 调用接口 跳转页面
      request(EvaluationToLearn, {
        "businessType": "project",
        "chapterId": chapterOrStageId,
        "courseId": d.courseId,
        "quizKid": d.targetId,
        "routerOrProjectId": projectId,
        "studentId": userInfo.value.id,
        "studentName": userInfo.value.realName
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          let jumpUrl = res.data.quizUrl
          // 此处写跳转url
          window.open(jumpUrl, '_top')
        }
      }).catch(err => {
        console.log(err)
      })
      return
    } else {
      // 进行中 或者 已完成
      // 调用接口 判断当前测评状态 跳转页面
      console.log('我是查询测评跳转链接所传递得参数', {
        "quizTaskId": d.quizTaskId
      })
      request(QueryEvaluationTaskStatusOne, {
        "quizTaskId": d.quizTaskId
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          if (res.data.complete_status == 2) {
            ElMessage.error("您已完成测评")
            return
          } else {
            // 重新查询跳转
            // 调用接口 跳转页面
            request(EvaluationToLearn, {
              "businessType": "project",
              "chapterId": chapterOrStageId,
              "courseId": d.courseId,
              "quizKid": d.targetId,
              "routerOrProjectId": projectId,
              "studentId": userInfo.value.id,
              "studentName": userInfo.value.realName
            }).then(res => {
              console.log(res)
              if (res.code == 200) {
                let jumpUrl = res.data.quizUrl
                // 此处写跳转url
                window.open(jumpUrl, '_top')
              }
            }).catch(err => {
              console.log(err)
            })
            return
          }
        }
      }).catch(err => {
        console.log(err)
      })
      return
    }
  }

  if (!TASK_TYPES.path[d.type]) {
    ElMessage.error("暂时未开放");
    return;
  }
  if (d.type === 3) return ElMessage.warning("请在pc端查看");
  //更新学员当前任务
  request(UPDATE_CURRENT_TASK, {
    id: d.id,
    type: PROJECT,
    pid: projectId,
    name: d.name,
  });

  if (typeof TASK_TYPES.path[d.type] === "string") {
    console.log("TASK_TYPES.path[d.type]", TASK_TYPES.path[d.type]);
    TASK_TYPES.path[d.type] &&
      TASK_TYPES.path[d.type].startsWith("http") &&
      window.open(TASK_TYPES.path[d.type] + d.targetId, "_top");
    TASK_TYPES.path[d.type] &&
      TASK_TYPES.path[d.type].startsWith("/") &&
      router.push({
        path: TASK_TYPES.path[d.type],
        query: {
          id: d.id,
          type: PROJECT,
          infoId: data.value.projectId,
          courseId: d.courseId,
          pName: data.value.name,
          sName,
          chapterOrStageId: chapterOrStageId,
          studentId: userInfo.value.id,
          status: d.status,
          targetId: d.targetId,
          evaType: d.evaType,
          btype: 1,
          quizTaskId: d.quizTaskId,
        },
      });
  } else if (typeof TASK_TYPES.path[d.type] === "function") {
    if (d.type == 5) {

      if (isIOS()){
        // 模拟点击跳转
        const url = TASK_TYPES.path[d.type](d) + d.targetId
        const a = document.createElement("a");
        a.href = url;
        // a.target = "_blank";
        a.click();

        window.location.href = url
        return 
      }

      // 保底解决兼容问题
      window.open(url, "_top");
    } else {
      TASK_TYPES.path[d.type](d);
    }
  }
  // if (typeof types.value.path[d.type] === "string") {
  //   types.value.path[d.type] &&
  //     types.value.path[d.type].startsWith("http") &&
  //     window.open(types.value.path[d.type] + d.targetId, "_top");
  //   types.value.path[d.type] &&
  //     types.value.path[d.type].startsWith("/") &&
  //     router.push({
  //       path: types.value.path[d.type],
  //       query: {
  //         id: d.id,
  //         type: PROJECT,
  //         infoId: data.value.projectId,
  //         courseId: d.courseId,
  //         pName: data.value.name,
  //         sName,
  //         chapterOrStageId: chapterOrStageId,
  //         studentId: userInfo.value.id,
  //         status: d.status,
  //         targetId: d.targetId,
  //         evaType: d.evaType,
  //         btype: 1,
  //       },
  //     });
  // } else if (typeof types.value.path[d.type] === "function") {
  //   types.value.path[d.type](d);
  // }
}

function isIOS() {
  return [
        'iPad Simulator',
        'iPhone Simulator',
        'iPod Simulator',
        'iPad',
        'iPhone',
        'iPod'
      ].includes(navigator.platform) ||
      // iPad on iOS 13 detection
      (navigator.userAgent.includes("Mac") && "ontouchend" in document);
}

function toOffcoursePlanPage(id) {
  window.open(`${location.protocol}//${location.host}${import.meta.env.VITE_BASE_API}/stu/project/redirectDetail?courseId=${id}`, '_top')
}

function whiteTypes(type) {
  return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
}
// 查询当前阶段所有任务是否都完成
const queryAllStatus = (data) => {
  // status === 1 已完成
  console.log(data);
  for (let i = 0; i < data.length; i++) {
    if (data[i].status !== 1) {
      return false;
    }
  }
  return true;
};
</script>

<style lang="scss">
.projectdetails {
  .el-dialog__body{
    width: 80%;
  }
  .el-dialog__header{
    display: none;
  }
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    //margin-top: 10px;
    .up {
      width: 100%;
      height: 162px;
      display: flex;
      flex-direction: column;
      align-items: center;
      //justify-content: center;
      background-color: rgba(255, 255, 255, 1);
      .notice {
        background-color: rgba(255, 251, 238, 1);
        width: 100%;
        height: 25px;
        display: flex;
        justify-content: center;
        position: relative;
        .text {
          //display: flex;
          height: 25px;
          //position: absolute;
          color: rgba(255, 158, 0, 1);
          padding: 6px 41px 6.5px 15.5px;
          font-size: 12px;
          //line-height: 24px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .close {
          display: flex;
          position: absolute;
          top: 0;
          right: 0;
          width: 9.5px;
          height: 9.5px;
          background-image: url(../../assets/image/pathmap/close.png);
          margin-top: 10px;
          margin-right: 16px;
          margin-bottom: 8px;
        }
      }
      .content {
        width: 90%;
        display: flex;
        flex-direction: column;
        .title {
          margin-top: 15.5px;
          font-size: 14px;
          font-weight: 700;
          line-height: 21.6px;
          color: rgba(4, 36, 60, 1);
        }
        .text2 {
          display: flex;
          margin-top: 10px;
          margin-bottom: 22.5px;
          font-size: 13px;
          color: rgba(51, 51, 48, 1);
          line-height: 24px;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .down {
      width: 100%;
      margin-top: 11.5px;
      //height: 529px;
      display: flex;
      flex-direction: column;
      align-items: center;
      //justify-content: center;
      background-color: rgba(255, 255, 255, 1);
      .project_title {
        width: calc(100% - 36.5px);
        display: flex;
        font-size: 16px;
        font-weight: 500;
        line-height: 12px;
        color: rgba(13, 35, 58, 1);
        padding: 17px 0 17px 36.5px;
        border-bottom: 0.5px solid rgba(241, 242, 243, 1);
      }
      .project_first {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 18px;
        .course1_first {
          width: 100%;
          height: 35px;
          display: flex;
          justify-content: content;
          border-radius: 10px;
          background-color: #f9f9f9;
          .text8 {
            display: flex;
            flex: 1;
            margin-top: 11px;
            margin-left: 20px;
            margin-bottom: 10.5px;
            height: 13.5px;
            font-size: 14px;
            font-weight: 600;
            color: #333330;
          }
          .course1_right {
            display: flex;
            position: relative;
            width: 60px;
            height: 13.5px;
            margin-top: 15px;
            // margin-right: 10.5px;
            .circular {
              position: absolute;
              top: 1px;
              right: 63px;
              width: 8.5px;
              height: 8.5px;
              border-radius: 7px;
              border: 1px solid #0060ff;
            }
            .text9 {
              display: flex;
              justify-content: content;
              position: absolute;
              width: 40px;
              height: 13.5px;
              top: 0;
              //left: 20px;
              right: 18.5px;
              line-height: 13.5px;
              color: #0060ff;
              font-size: 13px;
              font-weight: 600;
            }
            .btn1 {
              width: 7px;
              height: 6px;
              position: absolute;
              top: 3px;
              right: 6px;
              background-image: url(../../assets/image/pathmap/btn.png);
            }
          }
        }
        .course_content {
          width: 90%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-top: 26.5px;
          .study1 {
            display: flex;
            //justify-content: center;
            width: 100%;
            margin-bottom: 15px;
            .firstclass {
              display: flex;
              width: 74px;
              height: 43px;
              background-image: url(../../assets/image/pathmap/firstclass.png);
            }
            .firstprogress {
              display: flex;
              flex: 1;
              position: relative;
              margin-left: 9.5px;
              .firsttext {
                position: absolute;
                //top: 6px;
                display: flex;
                font-size: 13px;
                line-height: 30.29px;
                color: rgba(110, 123, 132, 1);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .secondtext {
                position: absolute;
                //top: 6px;
                right: 0;
                font-size: 12px;
                line-height: 30.29px;
                color: rgba(39, 122, 255, 1);
              }
              .progressbox {
                width: 100%;
                position: absolute;
                display: flex;
                height: 6.4px;
                bottom: 4px;
                background-color: rgba(232, 241, 254, 1);
                border-radius: 2px;
                .progressboxpart {
                  width: 70%;
                  height: 6.4px;
                  border-radius: 2px;
                  background: linear-gradient(
                    -180deg,
                    rgba(36, 120, 255, 1),
                    rgba(80, 147, 255, 1)
                  );
                }
              }
            }
          }
          .study2 {
            display: flex;
            width: 100%;
            margin-bottom: 15px;
            .secondclass {
              width: 74px;
              height: 43px;
              background-image: url(../../assets/image/pathmap/secondclass.png);
            }
            .secondprogress {
              display: flex;
              flex: 1;
              position: relative;
              margin-left: 9.5px;
              .firsttext {
                position: absolute;
                //top: 6px;
                display: flex;
                font-size: 13px;
                line-height: 30.29px;
                color: rgba(110, 123, 132, 1);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .secondtext {
                position: absolute;
                //top: 6px;
                right: 0;
                font-size: 12px;
                line-height: 30.29px;
                color: rgba(39, 122, 255, 1);
              }
              .progressbox {
                width: 100%;
                position: absolute;
                display: flex;
                height: 6.4px;
                bottom: 4px;
                background-color: rgba(232, 241, 254, 1);
                border-radius: 2px;
                .progressboxpart {
                  width: 52%;
                  height: 6.4px;
                  border-radius: 2px;
                  background: linear-gradient(
                    -180deg,
                    rgba(36, 120, 255, 1),
                    rgba(80, 147, 255, 1)
                  );
                }
              }
            }
          }
        }
      }
      .project_second {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10.5px;
        .course1_first {
          width: 100%;
          height: 35px;
          display: flex;
          justify-content: content;
          border-radius: 10px;
          background-color: #f9f9f9;
          .text8 {
            display: flex;
            flex: 1;
            margin-top: 11px;
            margin-left: 20px;
            margin-bottom: 10.5px;
            height: 13.5px;
            font-size: 14px;
            font-weight: 600;
            color: #333330;
          }
          .course1_right {
            display: flex;
            position: relative;
            width: 80px;
            height: 13.5px;
            margin-top: 15px;
            // margin-right: 10.5px;
            .circular {
              position: absolute;
              top: 1px;
              right: 63px;
              width: 8.5px;
              height: 8.5px;
              border-radius: 7px;
              border: 1px solid #0060ff;
            }
            .text9 {
              display: flex;
              justify-content: content;
              position: absolute;
              width: 40px;
              height: 13.5px;
              top: 0;
              //left: 20px;
              right: 18.5px;
              line-height: 13.5px;
              color: #0060ff;
              font-size: 13px;
              font-weight: 600;
            }
            .btn1 {
              width: 7px;
              height: 6px;
              position: absolute;
              top: 3px;
              right: 6px;
              background-image: url(../../assets/image/pathmap/btn.png);
            }
          }
        }
        .secondcontent {
          width: 90%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-top: 10px;
          .question {
            width: 100%;
            display: flex;
            position: relative;
            height: 72px;
            border-bottom: 0.5px solid rgba(241, 242, 243, 1);

            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            .issue {
              width: 100%;
              font-size: 13px;
              line-height: 30.29px;
              color: rgba(110, 123, 132, 1);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .coursetag {
              display: flex;
              flex-wrap: wrap;
            }
            .goclass {
              width: 63px;
              height: 23px;
              background: #2478ff;
              box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
              border-radius: 4px;
              font-size: 14px;
              font-weight: 800;
              color: #ffffff;
              display: flex;
              align-items: center;
              justify-content: center;
              // margin-right: 37px;
              cursor: pointer;
            }
            // .tag1 {
            //   position: absolute;
            //   left: 0;
            //   bottom: 14.5px;
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   font-size: 13px;
            //   color: rgba(203, 128, 231, 1);
            //   border: 0.5px solid rgba(203, 128, 231, 1);
            //   line-height: 19.2px;
            //   //padding: 0 10px;
            // }
            // .tag2 {
            //   position: absolute;
            //   left: 92px;
            //   bottom: 14.5px;
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   font-size: 13px;
            //   color: rgba(136, 157, 238, 1);
            //   border: 0.5px solid rgba(136, 157, 238, 1);
            //   line-height: 19.2px;
            //   //padding: 0 10px;
            // }
            // .tag3 {
            //   position: absolute;
            //   left: 0;
            //   bottom: 14.5px;
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   font-size: 13px;
            //   color: rgba(104, 206, 234, 1);
            //   border: 0.5px solid rgba(104, 206, 234, 1);
            //   line-height: 19.2px;
            //   //padding: 0 10px;
            // }
          }
        }
      }
    }
    .last {
      width: 100%;
      margin-top: 11.5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: rgba(255, 255, 255, 1);
      .project_title {
        width: calc(100% - 36.5px);
        display: flex;
        font-size: 16px;
        font-weight: 500;
        line-height: 12px;
        color: rgba(13, 35, 58, 1);
        padding: 17px 0 17px 36.5px;
        border-bottom: 0.5px solid rgba(241, 242, 243, 1);
      }
      .ranking {
        width: 90%;
        display: flex;
        justify-content: center;
        margin-top: 14px;
        border-radius: 10px;
        background-color: rgba(242, 245, 247, 1);
        margin-bottom: 13.5px;
        .rankingbox {
          width: 90%;
          display: flex;
          flex-direction: column;
          align-items: center;
          .ranknumber {
            width: 100%;
            height: 50px;
            display: flex;
            position: relative;
            align-items: center;
            border-bottom: 0.5px solid rgba(223, 223, 223, 1);
            .describe {
              display: flex;
              position: absolute;
              font-size: 14px;
              font-weight: 500;
              line-height: 24px;
              color: rgba(51, 51, 48, 1);
            }
            .number {
              display: flex;
              position: absolute;
              right: 23.5px;
              font-size: 21px;
              font-weight: bold;
              line-height: 24px;
              color: rgba(0, 96, 255, 1);
            }
            .describe_part {
              display: flex;
              position: absolute;
              right: 0;
              font-size: 14px;
              font-weight: 500;
              line-height: 24px;
              color: rgba(51, 51, 48, 1);
            }
          }
        }
      }
    }
  }
}
</style>
