diff --git a/src/api/judgment.ts b/src/api/judgment.ts
index 1d5131a..b6e8c8c 100644
--- a/src/api/judgment.ts
+++ b/src/api/judgment.ts
@@ -5,3 +5,4 @@ export const getProcess = async (): Promise<any> => (await axios.post('/judgment
 export const getProcessInformationBasedOnRoles = async (id: number): Promise<any> =>
   (await axios.post(`/judgment/judgment/stRecord/getProcessInformationBasedOnRoles?systemId=19&parentId=${id}`)).data;
 export const addOperation = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/product/bank/operation/addOperation', data)).data;
+export const checkPointList = async (projectId: number): Promise<any> => (await axios.post(`/judgment/judgment/stRecord/checkPointList?projectId=${projectId}`)).data;
diff --git a/src/assets/images/level/1.png b/src/assets/images/level/1.png
new file mode 100644
index 0000000..d103f0d
Binary files /dev/null and b/src/assets/images/level/1.png differ
diff --git a/src/assets/images/level/10.png b/src/assets/images/level/10.png
new file mode 100644
index 0000000..0228622
Binary files /dev/null and b/src/assets/images/level/10.png differ
diff --git a/src/assets/images/level/11.png b/src/assets/images/level/11.png
new file mode 100644
index 0000000..090c9f8
Binary files /dev/null and b/src/assets/images/level/11.png differ
diff --git a/src/assets/images/level/2.png b/src/assets/images/level/2.png
new file mode 100644
index 0000000..87e1954
Binary files /dev/null and b/src/assets/images/level/2.png differ
diff --git a/src/assets/images/level/3.png b/src/assets/images/level/3.png
new file mode 100644
index 0000000..36bac3d
Binary files /dev/null and b/src/assets/images/level/3.png differ
diff --git a/src/assets/images/level/4.png b/src/assets/images/level/4.png
new file mode 100644
index 0000000..a84a480
Binary files /dev/null and b/src/assets/images/level/4.png differ
diff --git a/src/assets/images/level/5.png b/src/assets/images/level/5.png
new file mode 100644
index 0000000..7786e53
Binary files /dev/null and b/src/assets/images/level/5.png differ
diff --git a/src/assets/images/level/6.png b/src/assets/images/level/6.png
new file mode 100644
index 0000000..d28e9af
Binary files /dev/null and b/src/assets/images/level/6.png differ
diff --git a/src/assets/images/level/7.png b/src/assets/images/level/7.png
new file mode 100644
index 0000000..51fc38d
Binary files /dev/null and b/src/assets/images/level/7.png differ
diff --git a/src/assets/images/level/8.png b/src/assets/images/level/8.png
new file mode 100644
index 0000000..43c2f24
Binary files /dev/null and b/src/assets/images/level/8.png differ
diff --git a/src/assets/images/level/9.png b/src/assets/images/level/9.png
new file mode 100644
index 0000000..cce22b9
Binary files /dev/null and b/src/assets/images/level/9.png differ
diff --git a/src/assets/images/level/arrow-down.png b/src/assets/images/level/arrow-down.png
new file mode 100644
index 0000000..b8e31c5
Binary files /dev/null and b/src/assets/images/level/arrow-down.png differ
diff --git a/src/assets/images/level/arrow-left.png b/src/assets/images/level/arrow-left.png
new file mode 100644
index 0000000..c613c75
Binary files /dev/null and b/src/assets/images/level/arrow-left.png differ
diff --git a/src/assets/images/level/arrow-right.png b/src/assets/images/level/arrow-right.png
new file mode 100644
index 0000000..64910cf
Binary files /dev/null and b/src/assets/images/level/arrow-right.png differ
diff --git a/src/assets/images/level/arrow-up.png b/src/assets/images/level/arrow-up.png
new file mode 100644
index 0000000..3a5d316
Binary files /dev/null and b/src/assets/images/level/arrow-up.png differ
diff --git a/src/assets/images/level/line1.png b/src/assets/images/level/line1.png
new file mode 100644
index 0000000..84ea9a2
Binary files /dev/null and b/src/assets/images/level/line1.png differ
diff --git a/src/assets/images/level/line2.png b/src/assets/images/level/line2.png
new file mode 100644
index 0000000..4f24454
Binary files /dev/null and b/src/assets/images/level/line2.png differ
diff --git a/src/assets/images/level/star1.png b/src/assets/images/level/star1.png
new file mode 100644
index 0000000..4623501
Binary files /dev/null and b/src/assets/images/level/star1.png differ
diff --git a/src/assets/images/level/star2.png b/src/assets/images/level/star2.png
new file mode 100644
index 0000000..6754877
Binary files /dev/null and b/src/assets/images/level/star2.png differ
diff --git a/src/assets/images/level/submit-hover.png b/src/assets/images/level/submit-hover.png
new file mode 100644
index 0000000..359596b
Binary files /dev/null and b/src/assets/images/level/submit-hover.png differ
diff --git a/src/assets/images/level/submit.png b/src/assets/images/level/submit.png
new file mode 100644
index 0000000..72fc5ae
Binary files /dev/null and b/src/assets/images/level/submit.png differ
diff --git a/src/components/Panel/index.vue b/src/components/Panel/index.vue
new file mode 100644
index 0000000..b2872b8
--- /dev/null
+++ b/src/components/Panel/index.vue
@@ -0,0 +1,1282 @@
+<template>
+  <div>
+    <!-- <transition name="slide-fade" enter-active-class="animate__animated animate__bounceInLeft" leave-active-class=" animate__animated animate__bounceOutLeft"> -->
+
+    <el-container v-show="showIt">
+      <el-header>
+        <div class="flex a-center j-between">
+          <div class="flex a-center"
+               style="width: 28%">
+            <p>实训项目</p>
+            <el-select v-model.trim="projectId"
+                       placeholder="请选择"
+                       class="select"
+                       :disabled="projectPermissions != 0"
+                       @change="selectProject">
+              <el-option v-for="item in topicList"
+                         :key="item.projectId"
+                         :label="item.projectName"
+                         :value="item.projectId"></el-option>
+            </el-select>
+          </div>
+          <div class="countDownBox">
+            <div style="margin-left: -40px;">
+              <div :sendSync="sendSync"
+                   :autoStart="autoStart"
+                   :defaultVal="defaultVal">
+                实训{{text}}时间
+                <span class="timeSpan">{{day}}</span>天
+                <span class="timeSpan">{{hour}}</span>小时
+                <span class="timeSpan">{{minutes}}</span>分
+                <span class="timeSpan">{{seconds}}</span>秒
+              </div>
+            </div>
+          </div>
+          <div class="countDownBox">
+            <div>
+              总得分：
+              <span class="gradeSpan">{{grade}}</span>
+            </div>
+          </div>
+          <div>
+            <el-button @click="toReport"
+                       v-if="popContainer">查看实验报告</el-button>
+            <el-button style="background: #202020;color: #d0d0d0;font-size:16px;"
+                       v-show="projectPermissions == 0"
+                       @click="reload"
+                       :disabled="popContainer && (assessmentId!='' && assessmentId!='null' && assessmentId!=null)">
+              重新开始
+            </el-button>
+            <el-button class="submit-btn"
+                       style="margin-right:7px"
+                       @click="Submit()"
+                       :disabled="popContainer || requires.length == 0">提交</el-button>
+          </div>
+        </div>
+      </el-header>
+
+      <el-container>
+        <el-aside width="30%"
+                  class="flex flex-col">
+          <div class="aside-header">
+            <div class="header_h flex a-center">
+              <i class="el-icon-s-order"></i>
+              <p>实验目标</p>
+            </div>
+            <div class="font_css">
+              <div class="experimentalGoal">
+                <div class="break-all"
+                     v-html="projectManage.experimentTarget"
+                     style="font-size: 0.875rem;">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="aside-footer flex-grow">
+            <div class="header_h flex a-center">
+              <i class="el-icon-s-management"></i>
+              <p>实验任务</p>
+            </div>
+            <div>
+              <el-row>
+                <el-col :span="24">
+                  <el-card shadow="hover">
+                    <el-table :data="requires"
+                              height="43.5vh"
+                              v-loading="loading"
+                              ref='testTable'>
+                      <el-table-column type="index"></el-table-column>
+                      <el-table-column prop="name"
+                                       label="判分点"
+                                       align="left">
+                      </el-table-column>
+                      <el-table-column prop="score"
+                                       label="分值"
+                                       width="60"
+                                       align="center">
+                      </el-table-column>
+                      <el-table-column prop="right"
+                                       label="完成结果"
+                                       width="80"
+                                       align="center">
+                        <template slot-scope="scope">
+                          <i v-if="scope.row.right==true"
+                             class="el-icon-check"
+                             style="color:green;"></i>
+                          <i v-else-if="scope.row.right==false"
+                             class="el-icon-close"
+                             style="color:red;"></i>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="scores"
+                                       label="得分"
+                                       width="60"
+                                       align="center"></el-table-column>
+                    </el-table>
+                  </el-card>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-aside>
+        <el-main>
+          <el-tabs v-model.trim="activeName"
+                   type="card">
+            <el-tab-pane label="案例"
+                         name="first">
+              <div class="break-all"
+                   v-html="projectManage.experimentDescription"></div>
+            </el-tab-pane>
+            <el-tab-pane label="实验要求"
+                         name="second">
+              <el-collapse :value="activeNames"
+                           accordion>
+                <el-collapse-item v-for="(item,index) in requires"
+                                  :key="index"
+                                  :name="item.id">
+                  <template slot="title"
+                            style='line-height: 0px;'>
+                    <i class='el-icon-s-ticket'></i>
+                    <span style="margin: 0px 10px;font-size: 1rem;">{{ item.name }}</span>
+                  </template>
+                  <div class="break-all"
+                       v-html="item.experimentalRequirements"></div>
+                </el-collapse-item>
+                <!-- <p ref="scrollTag" style="font-size:16px;"></p> -->
+              </el-collapse>
+            </el-tab-pane>
+            <el-tab-pane label="实验提示"
+                         name="fifth"
+                         v-if="hintOpen == 0">
+              <div class="break-all"
+                   v-html="projectManage.experimentHint"></div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-main>
+      </el-container>
+    </el-container>
+    <!-- </transition> -->
+    <!-- </div> -->
+    <div class="panel"
+         :class="{active: showIt}">
+      <div @click="toggleCase">
+        <img src="../../assets/img/case/left.png"
+             alt
+             v-if="showIt" />
+        <img src="../../assets/img/case/right.png"
+             alt
+             v-else />
+      </div>
+    </div>
+
+    <div class='popContainer'
+         v-if='popContainer'></div>
+
+    <!-- 遮罩层 -->
+    <div class="absolute z-50 h-screen bg-transparent inset-0"
+         v-show="showIt"></div>
+
+    <el-dialog title="提示"
+               :visible.sync="closePaneJudge"
+               width="30%"
+               center>
+      <h4 class="antialiased text-center text-2xl">请选择你将进行的操作</h4>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="closePane()">再试一次</el-button>
+        <!-- <el-button type="primary" @click="closePane(true)">其他业务</el-button> -->
+      </span>
+    </el-dialog>
+
+  </div>
+
+</template>
+
+<script>
+import Cookie from 'js-cookie'
+import util from '@/libs/util'
+import Setting from '@/setting'
+// 引入封装好的接口
+import { getProjectBySystemId, getProjectDetail, submit, getQueryCache, deleteCache, checkTest, checkTest2 } from "@/api/http.js";
+import { mapMutations } from 'vuex'
+import { async } from 'q';
+import Bus from '@/libs/bus'
+export default {
+  props: {
+    sendSync: {
+      type: Boolean,
+      default: false
+    },
+    autoStart: {
+      type: Boolean,
+      default: false
+    },
+    defaultVal: {
+      type: Number,
+      default: null
+    },
+    showIt: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data () {
+    return {
+      closePaneJudge: false,
+      lockIt: false,
+      intervalJudge: {},
+      systemId: Setting.systemId,
+      workbench: [],
+      test: [],
+      caseVisible: true,
+      grade: "00",
+      exampleData: "",
+      codeid: "",
+      judgmentPointsIds: [],
+      text: "",
+      isStart: false,
+      globalTimer: null, //获取setInterval对象值
+      millisecond: 0,
+      countVal: this.defaultVal, //获取初始值
+      pauseTime: 0,
+      day: '00',
+      seconds: '00',
+      minutes: '00',
+      hour: '00',
+      createTime: "", //开始时间
+      actEndTime: "", //倒计时结束时间
+      projectId: "" || sessionStorage.getItem('projectId'), //选中后绑定的对象
+      value: [
+        { projectName: '项目1', projectId: 1 }
+      ],
+      experimentalGoal: "", //实验目标
+      caseDescription: "", //案例描述
+      experimentSuggests: "", //实验提示
+      judgmentPointsName: "", //	判分点名称
+      points: [],
+      // activeNames: [],
+      tableData: [],
+      activeName: "first",
+      schoolId: '',
+      studentId: "",
+      courseId: "",
+      assessmentId: "",
+      classId: '',
+      projectPermissions: 0, //项目权限(0、练习 1、考核 2、竞赛)
+      competitionId: '',
+      stageId: '',
+      teamId: '',
+      isSubmit: false,
+      entryTime: util.formatDate('yyyy-MM-dd hh:mm:ss'),
+      startTime: '',
+      stopTime: '',
+      isSelected: false,
+      userId: '',
+      hintOpen: 0,
+      topicList: [],
+      projectManage: {},
+      requires: [],
+      projectName: '',
+      loading: false,
+      sss: 1,
+      popContainer: false,
+      timestamp: '',
+      curSystemId: '',
+      reportId: '',
+      submitType: false
+    }
+  },
+  created () {
+    let assessmentId = this.getQueryVariable('assessmentId')
+    sessionStorage.setItem('assessmentId', assessmentId)
+    this.assessmentId = assessmentId
+    if (assessmentId == '' || assessmentId == null || assessmentId == 'null') {
+
+    } else {
+      this.intervalJudge = setInterval(() => {
+        const data = {
+          id: parseInt(sessionStorage.getItem('assessmentId')),
+        }
+        checkTest(data).then(data => {
+          const { data: { data: { status } } } = data
+          if (status !== 1) {
+            this.popContainer = true
+            clearInterval(this.intervalJudge)
+            this.$alert('考试已结束，已自动为您提交。', '提示', {
+              confirmButtonText: '确定',
+              type: 'warning',
+              center: true
+            });
+            // 提交
+            this.sureSubmit(true)
+          } else {
+          }
+        })
+      }, 4000)
+    }
+    Bus.$on('setSubmited', data => {
+      this.popContainer = data
+    })
+  },
+  watch: {
+    countVal: {
+      deep: true,
+      handler: function (val, oldVal) {
+        let vm = this;
+        if (vm.needSendSunc) {
+          vm.passToParent(val);
+        }
+      }
+    },
+    needSendSunc: {
+      deep: true,
+      handler: function (val) {
+        let vm = this;
+        if (val) {
+          vm.passToParent(vm.countString);
+        }
+      }
+    },
+    // caseVisible(newVal) {
+    //   if(!newVal) {
+    //     console.log(this.$refs.scrollTag)
+    //   }
+    // }
+  },
+
+  computed: {
+    needSendSunc: function () {
+      return this.sendSync;
+    },
+    // 倒计时
+    second: function () {
+      return this.num(this.seconds);
+    },
+    minute: function () {
+      return this.num(this.minutes);
+    },
+    activeNames () {
+      // 默认展开所有
+      return this.requires.map(item => item.id)
+    },
+  },
+  mounted () {
+    let token = sessionStorage.getItem('token') || this.getQueryVariable('token')
+    let cid = sessionStorage.getItem('cid') || this.getQueryVariable('cid')
+    let systemId = sessionStorage.getItem('systemId') || this.getQueryVariable('systemId')
+    let projectId = this.getQueryVariable('projectId')
+    if (sessionStorage.getItem('projectId')) {
+      projectId = sessionStorage.getItem('projectId')
+    }
+    console.log('mounted', projectId)
+    let assessmentId = sessionStorage.getItem('assessmentId') || this.getQueryVariable('assessmentId')
+    let competitionId = sessionStorage.getItem('competitionId') || this.getQueryVariable('competitionId')
+    let stageId = sessionStorage.getItem('stageId') || this.getQueryVariable('stageId')
+    let teamId = sessionStorage.getItem('teamId') || this.getQueryVariable('teamId')
+    let classId = sessionStorage.getItem('classId') || this.getQueryVariable('classId')
+    let stopTime = sessionStorage.getItem('stopTime') || this.getQueryVariable('stopTime')
+    let mallId = sessionStorage.getItem('mallId') || this.getQueryVariable('mallId')
+    let timestamp = +stopTime;
+    if (timestamp != null) {
+    } else {
+      sessionStorage.setItem('timestamp', null)
+    }
+    if (token != null) {
+      sessionStorage.setItem('token', token)
+      sessionStorage.setItem('cid', cid)
+      sessionStorage.setItem('systemId', systemId)
+      sessionStorage.setItem('timestamp', timestamp)
+      sessionStorage.setItem('projectId', projectId)
+      sessionStorage.setItem('assessmentId', assessmentId)
+      sessionStorage.setItem('competitionId', competitionId)
+      sessionStorage.setItem('stageId', stageId)
+      sessionStorage.setItem('teamId', teamId)
+      sessionStorage.setItem('classId', classId)
+      this.assessmentId = assessmentId
+      this.competitionId = JSON.parse(competitionId)
+      this.stageId = stageId
+      this.teamId = teamId
+      this.classId = classId
+      this.mallId = mallId
+    }
+    let tokens = sessionStorage.getItem('token')
+    if (tokens || token) {
+      this.projectPermissions = this.assessmentId ?
+        1 :
+        this.competitionId ?
+          2 :
+          0
+      this.assessmentId && this.projectId && this.checkVer()
+      if (JSON.parse(assessmentId != null && assessmentId != '' && assessmentId != 'null' || this.competitionId)) {
+        this.selectProjects({
+          projectId
+        })
+      } else {
+        this.getData()
+      }
+    }
+    console.log(2222, this.showIt)
+  },
+  methods: {
+    ...mapMutations({
+      setBusinessKey: 'system/setBusinessKey',
+      initState: 'system/initState',
+      setShowBusiness: 'system/setShowBusiness',
+    }),
+    clearStore () {
+      // // 清空缓存
+      let token = sessionStorage.getItem('token')
+      let cid = sessionStorage.getItem('cid')
+      let systemId = sessionStorage.getItem('systemId')
+      let projectId = sessionStorage.getItem('projectId')
+      let assessmentId = sessionStorage.getItem('assessmentId')
+      let classId = sessionStorage.getItem('classId')
+      let timestamp = sessionStorage.getItem('timestamp')
+      let startTime = sessionStorage.getItem('startTime')
+
+      const storeProjectId = sessionStorage.getItem('storeProjectId')
+      sessionStorage.clear()
+      sessionStorage.setItem('token', token)
+      sessionStorage.setItem('cid', cid)
+      sessionStorage.setItem('systemId', systemId)
+      sessionStorage.setItem('projectId', projectId)
+      sessionStorage.setItem('firstLoad2', true)
+      if (assessmentId) {
+        sessionStorage.setItem('assessmentId', assessmentId)
+      }
+      if (classId) {
+        sessionStorage.setItem('classId', classId)
+      }
+      if (timestamp) {
+        sessionStorage.setItem('timestamp', timestamp)
+      }
+      if (startTime) {
+        sessionStorage.setItem('startTime', startTime)
+      }
+      if (storeProjectId) {
+        sessionStorage.setItem('storeProjectId', storeProjectId)
+      }
+
+
+      // 初始化vuex中的state
+      this.initState();
+    },
+    closePane (judge = false) {
+      this.closePaneJudge = false
+      // this.lockIt = false
+      this.reload()
+      if (judge) {
+        this.toggleCase()
+      }
+    },
+    getQueryVariable (name) {
+      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
+      if (window.location.href.split('?')[1]) {
+        var r = window.location.href.split('?')[1].match(reg)
+        if (r != null) {
+          return (r[2])
+        } else {
+          return null
+        }
+      }
+      // if(sessionStorage.getItem(name)) {
+      //   return sessionStorage.getItem(name)
+      // }else {
+      //   var reg = new RegExp('(^|&)'+name+'=([^&]*)(&|$)')
+      //   if(window.location.href.split('?')[1]){
+      //       var r = window.location.href.split('?')[1].match(reg)
+      //       if (r != null){
+      //           return (r[2])
+      //       }else{
+      //           return null
+      //       }
+      //   }
+      // }
+
+    },
+    //获取项目列表
+    getData () {
+      let params = {
+        "systemId": sessionStorage.getItem('systemId'),
+        "cId": sessionStorage.getItem('cid'),
+        "permissions": 0,
+        mallId: this.mallId
+      }
+      getProjectBySystemId(params).then((data) => {
+        if (data.status == 200) {
+          // this.getQueryCaches()
+          //获取当前时间
+          this.getBeginTime()
+          this.topicList = []
+
+          for (var i = 0; i < data.data.projects.length; i++) {
+            if (data.data.projects[i].projectId) {
+              this.topicList.push(data.data.projects[i])
+
+            }
+
+          }
+          console.log('---this.topicList')
+          console.log(this.topicList)
+          if (this.topicList.length > 0) {
+            const storeProjectId = sessionStorage.getItem('storeProjectId') || this.$route.query.projectId
+            if (storeProjectId) {
+              this.selectProjects({
+                projectId: storeProjectId
+              })
+            } else {
+              this.selectProjects({
+                projectId: this.topicList[0].projectId
+              })
+            }
+            this.gotuQueryVariable()
+            // 加的
+          }
+          this.getQueryCaches()
+        }
+      }).catch((error) => {
+      })
+    },
+    getBeginTime () {
+      let dates = new Date().getTime();
+      let date = new Date(dates)
+      let y = date.getFullYear();
+      let MM = date.getMonth() + 1;
+      MM = MM < 10 ? ('0' + MM) : MM;
+      let d = date.getDate();
+      d = d < 10 ? ('0' + d) : d;
+      let h = date.getHours();
+      h = h < 10 ? ('0' + h) : h;
+      let m = date.getMinutes();
+      m = m < 10 ? ('0' + m) : m;
+      let s = date.getSeconds();
+      s = s < 10 ? ('0' + s) : s;
+      this.startTime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
+      sessionStorage.setItem('startTime', this.startTime)
+    },
+    getQueryCaches () {
+      getQueryCache(params).then((data) => {
+        if (data.data.status == 200) {
+          this.$confirm('有项目未做完,是否回到未做完的项目?', '提示', {
+            center: true,
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.$message({
+              type: 'success',
+              message: '切换成功!'
+            });
+            this.projectId = data.data.projectId
+            let params = {
+              "projectId": data.data.projectId,
+            }
+            sessionStorage.setItem('projectId', data.data.projectId)
+            this.selectProjects(params)
+          }).catch(() => {
+            deleteCache().then((data) => {
+              this.$message({
+                type: 'info',
+                message: '已取消'
+              });
+            }).catch(() => {
+            })
+            this.gotuQueryVariable()
+          });
+        } else {
+          this.gotuQueryVariable()
+        }
+      }).catch((error) => {
+        this.gotuQueryVariable()
+      })
+    },
+    gotuQueryVariable () {
+      let projectId = sessionStorage.getItem('projectId') || this.getQueryVariable('projectId')
+      if (projectId) {
+        this.projectId = projectId
+      } else {
+        const storeProjectId = sessionStorage.getItem('storeProjectId')
+        if (storeProjectId) {
+          this.projectId = storeProjectId;
+        } else {
+          this.projectId = this.topicList[0].projectId;
+        }
+      }
+      sessionStorage.setItem('projectId', this.projectId)
+      let params = {
+        "projectId": this.projectId,
+      }
+      this.selectProjects(params)
+    },
+    selectProjects (params) {
+      getProjectDetail(params).then((data) => {
+        if (data.status == 200) {
+          this.globalTimer = "";
+          let stopTime = sessionStorage.getItem('timestamp')
+          let timestamp = +stopTime;
+          this.countVal = timestamp;
+          this.sss = 1;
+          this.hintOpen = data.data.projectManage.hintOpen;
+          this.countDown(timestamp);
+          this.curSystemId = data.data.projectManage.systemId
+          let assessmentId = this.getQueryVariable('assessmentId')
+          if (assessmentId != null && assessmentId != '' && assessmentId != 'null') {
+            //获取当前时间
+            this.getBeginTime()
+            this.topicList = [data.data.projectManage];
+            this.projectId = +params.projectId
+            this.projectName = data.data.projectManage.projectName
+            this.projectId = data.data.projectManage.projectId;
+            this.projectManage = data.data.projectManage;
+            this.requires = data.data.projectJudgmentVos;
+          } else {
+            this.projectName = data.data.projectManage.projectName
+            this.projectId = data.data.projectManage.projectId;
+            this.projectManage = data.data.projectManage;
+            this.requires = data.data.projectJudgmentVos;
+          }
+        }
+      }).catch((error) => {
+      })
+    },
+    //选择好题目
+    selectProject () {
+      this.lockIt = false
+      this.submitType = false
+      this.$router.push('/index/list')
+
+      this.$nextTick(() => {
+        this.clearStore()
+      })
+
+      let params = {
+        "projectId": this.projectId,
+      }
+      sessionStorage.setItem('storeProjectId', this.projectId)
+      let formList = []
+      sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
+      sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
+      sessionStorage.setItem('accountPasswordAll', '')
+      sessionStorage.setItem('projectId', this.projectId)
+      sessionStorage.setItem('submited', 0)
+      sessionStorage.setItem('firstLoad2', true)
+      getProjectDetail(params).then((data) => {
+        if (data.status == 200) {
+          const { systemId, projectId } = data.data.projectManage
+          // systemId=11 为银行项目，为其他值则是python项目，直接跳python
+          if (systemId === 11) {
+            this.popContainer = false;
+            this.hintOpen = data.data.projectManage.hintOpen;
+            this.projectName = data.data.projectManage.projectName;
+            this.projectId = data.data.projectManage.projectId;
+            this.projectManage = data.data.projectManage;
+            this.requires = data.data.projectJudgmentVos;
+            this.$router.push('/index/list')
+          } else {
+            const { cid, curriculumName, token, systemId } = this.$route.query
+            Cookie.set('admin-assessmentId', '', -1)
+            Cookie.set('admin-startTime', '', -1)
+            Cookie.set('admin-stopTime', '', -1)
+            Cookie.set('admin-projectId', projectId)
+            Cookie.set('admin-token', token)
+            Cookie.set('admin-courseId', cid)
+            Cookie.set('admin-curriculumName', escape(curriculumName))
+            Cookie.set('admin-systemId', systemId)
+            // 8个python子系统都跳这个地址，子系统会通过cookie里的systemId识别展示哪套系统
+            location.href = process.env.NODE_ENV === 'development' ?
+              `http://${location.hostname}:8085/#/` :
+              location.href.includes('occupationlab.com') ?
+                'https://www.occupationlab.com/pyTrials' :
+                `${location.origin}/pyTrials`
+          }
+        }
+      }).catch((error) => {
+      })
+      //获取当前时间
+      this.getBeginTime()
+      this.globalTimer = "";
+      this.countVal = "";
+      this.day = "00";
+      this.seconds = "00";
+      this.minutes = "00";
+      this.hour = "00";
+      this.sss = 1
+      this.startCountFn();
+    },
+    // 查看实验报告
+    toReport () {
+      this.popContainer = false
+      // this.setShowBusiness(false)
+      this.$emit('update:showIt', !this.showIt)
+      this.$router.push(`/index/report?reportId=${this.reportId}`)
+    },
+    //提交
+    Submit () {
+      this.$confirm('此操作将视为结束考试, 是否继续?', '提示', {
+        center: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(res => {
+        this.sureSubmit(true)
+      }).catch(() => {
+        this.$message({
+          type: "info",
+          message: "已取消提交"
+        });
+      });
+    },
+    async sureSubmit (judge) {
+      // 初始化vuex中的state
+      // this.initState();
+      this.actEndTime = new Date().getTime();
+      let ruleReqs = sessionStorage.getItem('ruleReqs')
+      let startTime = sessionStorage.getItem('startTime')
+      let ruleReqsList = JSON.parse(ruleReqs);
+      let lcld = []
+      for (var i = 0; i < this.requires.length; i++) {
+        lcld.push(this.requires[i].judgmentId)
+      }
+      let cid = sessionStorage.getItem('cid')
+      let params = {
+        "assessmentId": this.assessmentId,
+        "classId": this.classId,
+        "curriculumId": +cid,
+        "endTime": this.actEndTime,
+        "lcId": lcld,
+        "projectId": this.projectId,
+        "projectName": this.projectName,
+        "purpose": this.projectManage.experimentTarget,
+        "ruleReqs": ruleReqsList,
+        "startTime": startTime,
+        "submitTime": this.actEndTime,
+        "systemId": this.curSystemId,
+        competitionId: this.competitionId,
+        stageId: this.stageId,
+        teamId: this.teamId,
+        mallId: this.mallId
+      }
+      this.loading = true;
+      submit(params).then((data) => {
+        console.log(4, data)
+        if (data.status == 200) {
+          sessionStorage.setItem('firstLoad2', true)
+          // this.clearStore()
+          const { retMap } = data.data
+          this.reportId = retMap.reportId
+          let firstLoad = null
+          let firstLoad2 = null
+          if (sessionStorage.getItem('firstLoad')) {
+            firstLoad = sessionStorage.getItem('firstLoad')
+          }
+          if (sessionStorage.getItem('firstLoad2')) {
+            firstLoad2 = sessionStorage.getItem('firstLoad2')
+          }
+
+          this.lockIt = true
+          if (this.assessmentId) {
+            this.submitType = true
+          }
+          if (firstLoad) {
+            sessionStorage.setItem('firstLoad', firstLoad)
+          }
+          if (firstLoad2) {
+            sessionStorage.setItem('firstLoad2', firstLoad2)
+          }
+
+
+          let datas = retMap.scoreInfo;
+          let formList = []
+          sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
+          sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
+          sessionStorage.setItem('accountPasswordAll', '')
+          sessionStorage.setItem('submited', 1)
+          let list = this.requires
+          this.grade = retMap.totalScore
+          for (var j = 0; j < list.length; j++) {
+            for (var i = 0; i < datas.length; i++) {
+              if (datas[i].lcId == list[j].judgmentId) {
+                list[j].flag = datas[i].flag
+                list[j].scores = datas[i].questionScore
+                list[j].right = datas[i].calculate
+              }
+            }
+          }
+          this.sss = 0;
+          this.popContainer = true;
+          if (judge) {
+            this.$message({
+              type: 'success',
+              message: '提交成功'
+            });
+          }
+          this.requires.splice(0, this.requires.length, ...list)
+        }
+        this.loading = false
+      }).catch((error) => {
+        this.loading = false
+      })
+    },
+    //开始计时
+    startCountFn () {
+      if (!this.isStart) {
+        // this.countVal = this.countVal ? this.countVal : 0;
+        this.globalTimer = setInterval(() => {
+          if (this.sss == 0) {
+            this.globalTimer = null;
+            clearInterval(this.globalTimer);
+          } else if (this.timestamp) {
+            this.counterFn(this.countVal--);
+          } else {
+            this.counterFn(this.countVal++);
+          }
+        }, 1000);
+        this.isStart = true;
+      }
+    },
+    //倒计时
+    countDown (timestamp) {
+      this.timestamp = timestamp
+      this.sss = 1;
+      this.globalTimer = null;
+      clearInterval(this.globalTimer);
+      this.startCountFn()
+    },
+    counterFn (counterTime) {
+      if (this.timestamp) {
+        let countDown = (new Date(counterTime).getTime() - new Date().getTime()) / 1000
+        if (countDown > 0) {
+          let d = Math.floor(countDown / (60 * 60 * 24));
+          let h = Math.floor(countDown / (60 * 60));
+          let m = Math.floor(countDown % (60 * 60) / 60);
+          let s = Math.floor(countDown % (60 * 60) % 60);
+          this.day = `${d > 9 ? d : `0${d}`}`;
+          this.hour = `${h > 9 ? h : `0${h}`}`;
+          this.minutes = `${m > 9 ? m : `0${m}`}`;
+          this.seconds = `${s > 9 ? s : `0${s}`}`;
+        } else {
+          this.$confirm('此操作将视为结束考试, 是否继续?', '提示', {
+            center: true,
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.sureSubmit(true)
+
+          }).catch(() => {
+            // this.$message({
+            //   type: "info",
+            //   message: "已取消提交"
+            // });
+          });
+          // this.$alert('考试已结束，已自动为您提交。', '提示', {
+          //         confirmButtonText: '确定',
+          //         type: 'warning',
+          //         center: true
+          //     });
+          this.sss = 0
+          this.sureSubmit(true)
+          this.day = '00';
+          this.hour = '00';
+          this.minutes = '00';
+          this.seconds = '00';
+        }
+      } else {
+        let leave1 = counterTime % (24 * 3600 * 1); //计算天数后剩余的毫秒数
+        let leave2 = leave1 % (3600 * 1); //计算小时数后剩余的毫秒数
+        let leave3 = leave2 % (60 * 1); //计算分钟数后剩余的毫秒数
+        let day = Math.floor(counterTime / (24 * 3600 * 1)); //计算相差天数
+        let hour = Math.floor(leave1 / (3600 * 1)); //计算相差小时
+        let minutes = Math.floor(leave2 / (60 * 1)); //计算相差分钟
+        let seconds = Math.round(leave3 / 1); //计算相差秒
+        day = day >= 10 ? day : "0" + day;
+        hour = hour >= 10 ? hour : "0" + hour;
+        minutes = minutes >= 10 ? minutes : "0" + minutes;
+        seconds = seconds >= 10 ? seconds : "0" + seconds;
+        this.day = day;
+        this.hour = hour;
+        this.minutes = minutes;
+        this.seconds = seconds;
+      }
+    },
+    reload () {
+      this.submitType = false
+      this.lockIt = false
+      this.clearStore()
+      let token = sessionStorage.getItem('token')
+      let cid = sessionStorage.getItem('cid')
+      let systemId = sessionStorage.getItem('systemId')
+      let projectId = sessionStorage.getItem('projectId')
+      let formList = []
+      sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
+      sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
+      sessionStorage.setItem('accountPasswordAll', '')
+      this.setBusinessKey('')
+      let params = {
+        "projectId": projectId,
+      }
+      this.selectProjects(params)
+      this.popContainer = false
+      this.sss = 1
+      this.startCountFn();
+      deleteCache().then((data) => {
+
+      }).catch(() => {
+
+      })
+      this.globalTimer = "";
+      this.countVal = "";
+      this.day = "00";
+      this.seconds = "00";
+      this.minutes = "00";
+      this.hour = "00";
+      this.grade = '00'
+      this.$router.push('/index/list')
+      this.getBeginTime()
+    },
+
+    checkVer () {
+      let data = {
+        userId: this.userId,
+        id: this.assessmentId
+      }
+      this.$get(this.api.qualifications, data).then(res => {
+        if (res.message == 'false') {
+          this.isSubmit = true;
+        }
+      });
+    },
+    // 倒计时
+    timeFormat (param) {
+      return param < 10 ? "0" + param : param;
+    },
+    toggleCase () {
+      if (this.submitType) return
+      // if (!this.lockIt) {
+      this.$emit('update:showIt', !this.showIt)
+      // } else {
+      // this.closePaneJudge = true
+      // }
+
+      // this.caseVisible = !this.caseVisible
+    },
+    collapse () {
+
+    },
+    passToParent (data) {
+      this.$emit("getDataFromChild", data);
+    },
+    getCookie (cookie_name) {
+      //获取cookie中指定key的value
+      var allcookies = document.cookie; //索引长度，开始索引的位置
+      var cookie_pos = allcookies.indexOf(cookie_name); //如果找到了索引，就代表cookie存在,否则不存在
+      if (cookie_pos != -1) {
+        //把cookie_pos放在值的开始，只要给值加1即可
+        //计算取cookie值得开始索引，加的1为“=”
+        cookie_pos = cookie_pos + cookie_name.length + 1; //计算取cookie值得结束索引
+        var cookie_end = allcookies.indexOf(";", cookie_pos);
+        if (cookie_end == -1) {
+          cookie_end = allcookies.length;
+        } //得到想要的cookie的值
+        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
+      }
+      return value;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+$togetherFontSize: 16px;
+
+/deep/ .el-tab-pane {
+    font-size: 1rem !important;
+}
+
+.scrollbar {
+    z-index: 100000000;
+}
+
+.popContainer {
+    position: absolute;
+    width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
+    height: 100%;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+}
+/deep/.el-container {
+    height: 80%;
+    &.is-vertical {
+        position: fixed;
+        top: 200px;
+        bottom: 20px;
+        left: 0;
+        width: 85%;
+        height: 70%;
+        background-color: #f5f5f5;
+        z-index: 1001;
+    }
+    .el-header {
+        color: #333;
+        padding: 0 12px 0 20px;
+
+        .el-button {
+            background-color: $main-color;
+            color: #fff;
+            border: none;
+            margin: 5px 0px 5px 5px;
+            font-size: 16px;
+        }
+
+        .submit-btn {
+            padding-left: 30px;
+            padding-right: 30px;
+            background: $main-color url(../../assets/img/case/btn.png) 0 0/100% 100% no-repeat;
+        }
+    }
+    .el-aside {
+        font-size: $togetherFontSize;
+        color: #333;
+        [class*=' el-icon-'],
+        [class^='el-icon-'] {
+            line-height: 40px;
+            font-size: 16px;
+            font-size: $togetherFontSize;
+        }
+    }
+    .el-main {
+        width: 60%;
+        background-color: #fff;
+        color: #333;
+        padding: 0;
+        font-size: $togetherFontSize;
+        margin: 0px 20px 10px 10px;
+        white-space: pre-wrap;
+        background: #fff url(../../assets/img/case/bg.png) top right no-repeat;
+        // overflow: visible;
+    }
+    .aside-header {
+        margin: 0px 10px 10px 10px;
+        background-color: #fff;
+        font-size: 0.875rem;
+    }
+    .aside-footer {
+        margin: 0px 10px 10px 10px;
+        background-color: #fff;
+    }
+    .header_h {
+        height: 40px;
+        background: url(../../assets/img/case/header.png) 0 0/100% 100% no-repeat;
+        justify-content: center;
+        i {
+            color: #fff;
+        }
+        p {
+            line-height: 40px;
+            font-size: 16px;
+            color: #fff;
+            padding-left: 10px;
+        }
+    }
+    .el-card {
+        border: 0;
+        border-radius: 0;
+        .el-card__body {
+            padding: 0;
+        }
+    }
+    .select {
+        flex: 1;
+        input::-webkit-input-placeholder {
+            color: #333;
+        }
+        .el-input__icon {
+            line-height: 60px;
+        }
+        .el-select__caret:before {
+            content: '\e78f';
+            font-size: 16px;
+            padding: 3px;
+            background-color: $main-color;
+            border-radius: 50%;
+            color: #ffffff;
+        }
+        .el-input--suffix .el-input__inner {
+            color: #333;
+            font-size: $togetherFontSize;
+            border-radius: 30px;
+            border: none;
+            background-color: #fff;
+            margin-left: 15px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .el-input {
+            padding: 10px 0;
+        }
+    }
+
+    .font_css {
+        margin: 0 10px;
+        text-indent: 2em;
+        font-size: $togetherFontSize;
+        padding: 10px 0;
+    }
+
+    .countDownBox {
+        font-size: $togetherFontSize;
+        margin: 0 10px;
+        padding: 20px 0;
+    }
+    .timeSpan {
+        color: #333333;
+        padding: 5px 15px;
+        font-size: $togetherFontSize;
+        background: #ffffff;
+        border-radius: 18px;
+        margin: 0 5px;
+        text-align: center;
+    }
+    .gradeSpan {
+        color: #878787;
+        padding: 10px;
+        font-size: $togetherFontSize;
+        background: #e0e0e0;
+        border-radius: 6px;
+        text-align: center;
+    }
+    .el-header /deep/.el-button:hover,
+    .el-button:focus,
+    .el-button:active {
+        background-color: $main-color;
+        color: #fff;
+    }
+
+    /deep/.el-table {
+        font-size: 12px;
+        thead {
+            color: #fff;
+        }
+        .el-table__cell {
+            padding: 12px 0;
+        }
+        .cell {
+            font-weight: 100;
+            font-size: 12px;
+        }
+        td,
+        th.is-leaf {
+            border-bottom: 0 !important;
+        }
+    }
+
+    .el-table__header-wrapper {
+        thead {
+            color: #ffffff;
+            font-size: 12px;
+            th {
+                font-weight: 100;
+            }
+        }
+        th,
+        tr {
+            background-color: #badfff;
+        }
+    }
+    .el-table__row--striped {
+        td {
+            background-color: #badfff !important;
+        }
+    }
+    /deep/ .el-collapse {
+        font-size: 0.875rem;
+    }
+    .el-collapse-item__content {
+        padding-left: 10px;
+        padding-right: 10px;
+        font-size: $togetherFontSize;
+    }
+    .el-collapse-item__wrap {
+        border-bottom: none;
+    }
+    /deep/.el-collapse-item__header {
+        font-size: 1rem;
+
+        border-bottom: none;
+    }
+    .el-tabs__content {
+        margin: 0 20px;
+    }
+    .el-icon-s-ticket:before {
+        font-size: togetherFontSize;
+        //padding: 5px;
+        color: $main-color;
+    }
+    .el-collapse-item__arrow {
+        margin: 0 5px 0 0;
+    }
+    .el-icon-arrow-right:before {
+        font-size: 12px;
+        font-size: $togetherFontSize;
+        //padding: 1px;
+        //margin-left: 10px;
+        background-color: $main-color;
+        border-radius: 50%;
+        color: #ffffff;
+    }
+    .el-tabs__item {
+        font-size: 16px;
+    }
+    .el-tabs--card > .el-tabs__header .el-tabs__nav {
+        border: none;
+    }
+    .el-tabs--card > .el-tabs__header .el-tabs__item {
+        border-left: none;
+    }
+    .el-tabs--card > .el-tabs__header {
+        border-bottom: none;
+    }
+    .el-collapse {
+        border-bottom: none;
+        border-top: none;
+        height: calc(100vh - 422px);
+        overflow: hidden;
+        overflow-y: auto;
+    }
+    /deep/.el-collapse-item {
+        font-size: $togetherFontSize;
+        background-color: red;
+        color: red;
+    }
+    .el-tabs__item.is-active {
+        color: #fff;
+        background-color: $main-color;
+    }
+    .el-tabs__header {
+        padding: 5px 20px;
+    }
+}
+.break-all {
+    font-size: 16px;
+    word-break: break-all;
+}
+.panel {
+    position: fixed;
+    z-index: 10010000;
+    top: 50%;
+    &.active {
+        //z-index: 10;
+        left: 85%;
+        z-index: 1001;
+    }
+    img {
+        height: 175px;
+        cursor: pointer;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 25a379b..3290d25 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,14 +1,11 @@
 <template>
-  <div class="expand body min-h-full bg-gray-100">
-    <!--遮罩层。当手机模式且左边栏打开时，显示遮罩层-->
-    <div v-if="showMask"
-         class="h-full mt-1 w-full absolute z-30 bg-black opacity-30 md:hidden"
-         @click="closeSidebar" />
-    <app-header />
-    <app-sidebar v-if="!hideNav"
-                 class="sidebar fixed h-full px-5 overflow-hidden transition-width duration-300 z-40" />
-    <div class="main h-[calc(100vh-85px)] transition-margin duration-300 overflow-auto"
-         :class="{ 'md:ml-sidebar': !hideNav }">
+  <div class="min-h-full"
+       :class="isIndex ? 'index' : 'body'">
+    <app-header v-if="!isIndex" />
+    <app-sidebar v-if="!hideNav && !isIndex"
+                 class="sidebar fixed w-sidebar h-full px-5 overflow-hidden transition-width duration-300 z-40" />
+    <div class="main min-h-[calc(100vh-85px)] transition-margin duration-300 overflow-auto"
+         :class="{ 'md:ml-sidebar': !hideNav && !isIndex }">
       <app-main />
     </div>
   </div>
@@ -17,7 +14,6 @@
 <script lang="ts">
 import { ref, defineComponent, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { appState, closeSidebar } from '@/store/useAppState';
 import Setting from '@/settings';
 import { AppSidebar, AppHeader, AppMain } from './components';
 import useResizeHandler from './composables/useResizeHandler';
@@ -27,25 +23,18 @@ export default defineComponent({
   components: { AppSidebar, AppHeader, AppMain },
   setup() {
     const route = useRoute();
-    const hideNav = ref<boolean>(false);
-    watch(
-      () => route.path,
-      (val: any) => {
-        hideNav.value = Setting.hideNavPath.includes(val);
-      },
-      {
-        immediate: true,
-      },
-    );
+    // 是否是选择关卡页面
+    const isIndex = computed(() => {
+      return route.path === '/';
+    });
+    // 是否隐藏左侧导航
+    const hideNav = computed(() => {
+      return Setting.hideNavPath.includes(route.path);
+    });
 
     useResizeHandler();
     return {
-      closeSidebar,
-      showMask: computed(() => appState.sidebar),
-      classObj: computed(() => ({
-        expand: appState.sidebar,
-        collapse: !appState.sidebar,
-      })),
+      isIndex,
       hideNav,
     };
   },
@@ -53,19 +42,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.expand .sidebar {
-  @apply w-sidebar;
-}
-.expand .main {
-  // @apply ml-0 md:ml-sidebar;
-}
-.collapse .sidebar {
-  @apply w-0 md:w-sidebar-collapse;
-}
-.collapse .main {
-  @apply ml-0 md:ml-sidebar-collapse;
-}
 .body {
   background: url(../assets/images/1.png) 0 0/100% auto no-repeat;
+  @apply bg-gray-100;
 }
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 059f78d..5a5bfdc 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,7 +19,7 @@ export const routes: Array<RouteRecordRaw> = [
     path: '',
     component: Layout,
     meta: { hidden: true },
-    children: [{ path: '', component: () => import('@/views/Home.vue'), meta: { title: 'menu.home' } }],
+    children: [{ path: '', component: () => import('@/views/Home.vue'), meta: { title: '选择关卡' } }],
   },
   {
     path: '/product',
diff --git a/src/styles/index.scss b/src/styles/index.scss
index bed0d18..7740dc6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,31 @@
 @import './transition.scss';
 
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin mul-ellipsis($num) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ellipsis {
+  @include ellipsis();
+}
+
+.mul-ellipsis2 {
+  @include mul-ellipsis(2);
+}
+
+.mul-ellipsis3 {
+  @include mul-ellipsis(3);
+}
+
 html {
   height: 100%;
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3c97442..7af7358 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,29 +1,148 @@
 <template>
-  <div>
-    <div class="block p-3 flex">
-      <div>
-        <el-avatar :size="76"
-                   class="flex justify-center items-center">
-          <el-icon class="text-5xl">
-            <avatar />
-          </el-icon>
-        </el-avatar>
+  <div class="m-[-0.75rem]">
+    <div class="flex justify-between items-center h-[64px] px-5 bg-white">
+      <h1>金融产品设计及数字化营销沙盘系统</h1>
+      <div class="inline-flex items-center">
+        <img class="mr-3 cursor-pointer"
+             src="@/assets/images/level/1.png"
+             alt="" />
+        <img class="mr-3 cursor-pointer"
+             src="@/assets/images/level/2.png"
+             alt="" />
+        <img class="cursor-pointer"
+             src="@/assets/images/level/3.png"
+             alt="" />
       </div>
-      <div class="ml-3 space-y-1 text-gray-regular text-sm">
-        <p class="text-base font-bold">{{ currentUser.username }}</p>
-        <p>
-          {{ $t('user.loginDate') }}: <span class="ml-1">{{ dayjs(currentUser.loginDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
-        </p>
-        <p>
-          {{ $t('user.loginIp') }}: <span class="ml-1">{{ currentUser.loginIp }}</span>
-        </p>
+    </div>
+    <div class="relative min-h-[calc(100vh-64px)] pt-5 pl-5 bg-[url('@/assets/images/level/4.png')] bg-[length:100%_100%] bg-no-repeat">
+      <div class="relative">
+        <img src="@/assets/images/level/5.png"
+             alt="" />
+        <div class="absolute top-5 left-40 flex items-center cursor-pointer"
+             @click="collected = !collected">
+          <img v-if="collected"
+               src="@/assets/images/level/7.png"
+               alt="" />
+          <img v-else
+               src="@/assets/images/level/6.png"
+               alt="" />
+          <span class="ml-2 text-sm text-[#999]">仅显示已收藏的项目</span>
+        </div>
+      </div>
+      <div class="relative mt-5">
+        <div v-for="(item, i) in levels"
+             :key="i"
+             class="item">
+          <span class="num">LV.{{ i + 1 }}</span>
+          <div class="texts">
+            <h6>第一关</h6>
+            <p class="des mul-ellipsis2">{{ item.name }}</p>
+            <img class="icon"
+                 src="@/assets/images/level/star1.png"
+                 alt="" />
+          </div>
+        </div>
       </div>
+
+      <img class="arrow top-0 left-[50%] translate-x-[-50%]"
+           src="@/assets/images/level/arrow-up.png"
+           alt="" />
+      <img class="arrow right-0 top-[50%] translate-y-[-50%]"
+           src="@/assets/images/level/arrow-right.png"
+           alt="" />
+      <img class="arrow bottom-0 left-[50%] translate-x-[-50%]"
+           src="@/assets/images/level/arrow-down.png"
+           alt="" />
+      <img class="arrow left-0 top-[50%] translate-y-[-50%]"
+           src="@/assets/images/level/arrow-left.png"
+           alt="" />
+      <div class="absolute bottom-2 right-1 w-[262px] h-[74px] bg-[url('@/assets/images/level/submit.png')] bg-[length:100%_100%] bg-no-repeat cursor-pointer hover:bg-[url('@/assets/images/level/submit-hover.png')]"></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Avatar } from '@element-plus/icons-vue';
-import dayjs from 'dayjs';
-import { currentUser } from '@/store/useCurrentUser';
+import { ref, onMounted } from 'vue';
+import { checkPointList } from '@/api/judgment';
+
+const collected = ref<boolean>(false);
+const levels = ref<Record<string, any>[]>([]);
+// 关卡列表
+const getLevel = async () => {
+  const { data } = await checkPointList(1);
+  levels.value = data;
+};
+onMounted(() => {
+  getLevel();
+});
 </script>
+
+<style lang="scss" scoped>
+.item {
+  --w: 300px;
+  --line2: 160px;
+  --line3: 360px;
+  --line4: 520px;
+  @apply absolute w-[218px] h-[120px] text-white bg-[url('@/assets/images/level/8.png')] bg-[length:100%_100%] bg-no-repeat cursor-pointer;
+  .num {
+    @apply absolute bottom-[35px] left-[28px] font-['DIN-BlackItalic'];
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  }
+  .texts {
+    @apply pl-[90px] pt-[10px] pr-[13px];
+  }
+  h6 {
+    @apply text-[#FFB627] text-lg font-['AlibabaPuHuiTi_2_105_Heavy'] rounded-[24px];
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+    background: linear-gradient(180deg, #fffcf0 0%, #ffc868 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .des {
+    @apply text-sm leading-[20px];
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  }
+  .icon {
+    @apply absolute top-[13px] right-[11px];
+  }
+  &:hover {
+    @apply opacity-80;
+  }
+  &:nth-child(2) {
+    @apply top-[var(--line2)] left-[150px];
+  }
+  &:nth-child(3) {
+    @apply left-[var(--w)];
+  }
+  &:nth-child(4) {
+    @apply top-[var(--line2)] left-[450px];
+  }
+  &:nth-child(5) {
+    @apply left-[calc(var(--w)*2)];
+  }
+  &:nth-child(6) {
+    @apply top-[var(--line2)] left-[750px];
+  }
+  &:nth-child(7) {
+    @apply left-[calc(var(--w)*3)];
+  }
+  &:nth-child(8) {
+    @apply top-[var(--line2)] left-[1050px];
+  }
+  &:nth-child(9) {
+    @apply left-[calc(var(--w)*4)];
+  }
+  &:nth-child(10) {
+    @apply top-[var(--line2)] left-[1350px];
+  }
+  &:nth-child(11) {
+    @apply top-[var(--line3)] left-[1350px];
+  }
+  &:nth-child(12) {
+    @apply top-[var(--line4)] left-[1200px];
+  }
+}
+.arrow {
+  @apply absolute cursor-pointer;
+}
+</style>