From 8fe4f256bfd9ad7df542f4977ac1d5ad88842a08 Mon Sep 17 00:00:00 2001
From: binbin_pan <max_163email@163.com>
Date: Mon, 19 Aug 2024 17:53:53 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=83=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                   |  15 +-
 pages/YNEduApp/exam/exam.vue                 |   2 +-
 pages/YNEduApp/index/index.vue               |   1 +
 pages/YNEduApp/learnProj/learnProjDetail.vue | 148 +++++---
 pages/YNEduApp/prac/prac.vue                 | 343 ++++++++++---------
 pages/YNEduApp/prac/pracDetail.vue           | 213 ++++++++++++
 static/images/练习.png                       | Bin 0 -> 903 bytes
 static/images/考试.png                       | Bin 0 -> 959 bytes
 static/images/课程.png                       | Bin 0 -> 1228 bytes
 9 files changed, 500 insertions(+), 222 deletions(-)
 create mode 100644 pages/YNEduApp/prac/pracDetail.vue
 create mode 100644 static/images/练习.png
 create mode 100644 static/images/考试.png
 create mode 100644 static/images/课程.png

diff --git a/pages.json b/pages.json
index a8946eb..a3ed179 100644
--- a/pages.json
+++ b/pages.json
@@ -7,7 +7,7 @@
 		// {
     //   "path": "pages/YNEduApp/index/index",
     //   "style": {
-    //     "navigationBarTitleText": "首页"
+    //     "navigationStyle" : "custom"
     //   }
     // },
     {
@@ -59,7 +59,7 @@
     {
       "path": "pages/YNEduApp/index/index",
       "style": {
-        "navigationBarTitleText": "首页"
+        "navigationStyle" : "custom"
       }
     },
     {
@@ -119,7 +119,7 @@
     {
       "path": "pages/YNEduApp/exam/beforeExam",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "考试详情"
       }
     },
     {
@@ -133,7 +133,7 @@
     	"path" : "pages/YNEduApp/prac/prac",
     	"style" : 
     	{
-    		"navigationBarTitleText" : "练习"
+    		"navigationStyle" : "custom"
     	}
     },
     {
@@ -184,6 +184,13 @@
     	{
     		"navigationBarTitleText" : "pdf学习"
     	}
+    },
+    {
+    	"path" : "pages/YNEduApp/prac/pracDetail",
+    	"style" : 
+    	{
+    		"navigationStyle" : "custom"
+    	}
     }
   ],
   "globalStyle": {
diff --git a/pages/YNEduApp/exam/exam.vue b/pages/YNEduApp/exam/exam.vue
index 7dfcca1..c966151 100644
--- a/pages/YNEduApp/exam/exam.vue
+++ b/pages/YNEduApp/exam/exam.vue
@@ -128,7 +128,7 @@ export default {
 .tab-wrapper {
   display: flex;
   justify-content: space-around;
-  background: #fff;
+  /* background: #fff; */
   margin-bottom: 10px;
 
   .tab-item {
diff --git a/pages/YNEduApp/index/index.vue b/pages/YNEduApp/index/index.vue
index 54a94bc..615fc8a 100644
--- a/pages/YNEduApp/index/index.vue
+++ b/pages/YNEduApp/index/index.vue
@@ -1,5 +1,6 @@
 <template>
 	<view class="page">
+    <u-navbar leftIcon="" title="首页" placeholder />
     <view class="search">
       <uni-icons
           type="scan"
diff --git a/pages/YNEduApp/learnProj/learnProjDetail.vue b/pages/YNEduApp/learnProj/learnProjDetail.vue
index ea0673d..e301bbe 100644
--- a/pages/YNEduApp/learnProj/learnProjDetail.vue
+++ b/pages/YNEduApp/learnProj/learnProjDetail.vue
@@ -37,57 +37,66 @@
       <uni-collapse>
         <uni-collapse-item title="理论学习">
           <uni-list>
-            <uni-list-item
+            <div
+              class="list-wrapper"
               v-for="(item, index) in theoryLearnList"
-              :key="item.id"
-              title="课程"
-              :note="item.title"
-              clickable
-              :show-extra-icon="true"
-              :extra-icon="learnIconObj"
-              :rightText="item.percent + '%'"
+              :key="index"
               @click="toggleTheoryLearn(item.id)"
             >
-              <!--              <template v-slot:footer>
-                <liu-progressbar
-                    :progress="item.percent"
-                    color="#000"
-                    :height="'20rpx'"
-                    bgColor="#1989FA"
-                    :textInside="false"
-                />
-              </template>-->
-            </uni-list-item>
+              <div class="left-content">
+                <div class="title">
+                  <u-icon name="/static/images/课程.png" size="15" />
+                  <div style="margin: 0 15px 0 3px">课程</div>
+                  <div>{{ item.time }}</div>
+                </div>
+                <div class="note">{{ item.title }}</div>
+              </div>
+              <div class="right-content">
+                <div class="progress">
+                  <u-line-progress :percentage="item.percent" :showText="false" activeColor="#579AF8" height="8" />
+                </div>
+                <div>{{ item.percent }}%</div>
+              </div>
+            </div>
           </uni-list>
         </uni-collapse-item>
         <uni-collapse-item title="理论练习">
           <uni-list>
-            <uni-list-item
+            <div
+              class="list-wrapper"
               v-for="(item, index) in theoryPracList"
-              :key="item.id"
-              title="练习"
-              :note="item.title"
-              :rightText="item.ifPrac ? '已练习' : '未练习'"
-              clickable
-              :show-extra-icon="true"
-              :extra-icon="pracIconObj"
+              :key="index"
               @click="toggleTheoryPrac(item.id)"
-            ></uni-list-item>
+            >
+              <div class="left-content">
+                <div class="title">
+                  <u-icon name="/static/images/练习.png" size="15" />
+                  <div style="margin: 0 15px 0 3px">练习</div>
+                </div>
+                <div class="note">{{ item.title }}</div>
+              </div>
+              <div class="right-content">{{ item.ifExam ? '已练习' : '未练习' }}</div>
+            </div>
           </uni-list>
         </uni-collapse-item>
         <uni-collapse-item title="理论模拟考试">
           <uni-list>
-            <uni-list-item
+            <div
+              class="list-wrapper"
               v-for="(item, index) in theoryExamList"
-              :key="item.id"
-              title="考试"
-              :note="item.title"
-              :rightText="item.ifExam ? '已考试' : '未考试'"
-              clickable
-              :show-extra-icon="true"
-              :extra-icon="pracIconObj"
+              :key="index"
               @click="toggleTheoryExam(item.id)"
-            ></uni-list-item>
+            >
+              <div class="left-content">
+                <div class="title">
+                  <u-icon name="/static/images/考试.png" size="15" />
+                  <div style="margin: 0 15px 0 3px">考试</div>
+                  <div>{{ item.time }}</div>
+                </div>
+                <div class="note">{{ item.title }}</div>
+              </div>
+              <div class="right-content">{{ item.ifExam ? '已完成' : '未完成' }}</div>
+            </div>
           </uni-list>
         </uni-collapse-item>
         <uni-collapse-item title="实操题目练习">
@@ -100,8 +109,18 @@
     <view class="comment-area">
       <h2 style="margin-bottom: 15rpx">最新评论 ({{ commentList.length }})</h2>
       <view class="write-cmt">
-        <uni-icons style="color: #9b9b9b; margin-right: 1vw" type="compose" size="12"></uni-icons>
-        写评论
+        <!-- <uni-icons style="color: #9b9b9b; margin-right: 1vw" type="compose" size="12"></uni-icons>
+        写评论 -->
+        <u--input
+          ref="uInput"
+          placeholder="写评论"
+          prefixIcon="edit-pen"
+          prefixIconStyle="font-size: 18px;color: #c0c4cc"
+          placeholderStyle="font-size: 13px;color: #c0c4cc"
+          border="none"
+          maxlength="999"
+          clearable
+        />
       </view>
       <view class="cmts" v-for="(item, index) in commentList" :key="index">
         <view class="cmt-up">
@@ -150,10 +169,10 @@ export default {
         { title: '远程练习', id: 144, ifPrac: false }
       ],
       theoryExamList: [
-        { title: '物理考试', id: 161, ifExam: false },
-        { title: '魔法考试', id: 162, ifExam: true },
-        { title: '近战考试', id: 163, ifExam: true },
-        { title: '远程考试', id: 164, ifExam: false }
+        { title: '物理考试', id: 161, ifExam: false, time: '00:34:21' },
+        { title: '魔法考试', id: 162, ifExam: true, time: '00:34:21' },
+        { title: '近战考试', id: 163, ifExam: true, time: '00:34:21' },
+        { title: '远程考试', id: 164, ifExam: false, time: '00:34:21' }
       ],
       commentList: [
         { username: '王二', avatar: '/static/eduImg/avatar.jpg', cont: '写的什么东西' },
@@ -167,6 +186,10 @@ export default {
       ]
     }
   },
+  onLoad(params) {
+    this.projId = params.id
+    console.log(this.projId)
+  },
   methods: {
     toggleTheoryLearn(id) {
       console.log(id)
@@ -177,17 +200,17 @@ export default {
     toggleTheoryPrac(id) {
       console.log(id)
       uni.navigateTo({
-        url: '/pages/YNEduApp/prac/prac?id=' + id
+        url: '/pages/YNEduApp/prac/pracDetail?id=' + id
       })
+
+      uni.removeStorageSync('from')
+      uni.setStorageSync('from', '/pages/YNEduApp/learnProj/learnProjDetail')
     },
     toggleTheoryExam(id) {
       console.log(id)
       uni.navigateTo({
         url: '/pages/YNEduApp/exam/beforeExam?id=' + id
       })
-
-      // uni.setStorageSync('form', '/pages/YNEduApp/learnProj/learnProjDetail')
-      // 先清空之前设置的 form 路径 在重新设置
       uni.removeStorageSync('from')
       uni.setStorageSync('from', '/pages/YNEduApp/learnProj/learnProjDetail')
     },
@@ -196,10 +219,6 @@ export default {
         url: '/pages/YNEduApp/learnProj/learnProj'
       })
     }
-  },
-  onLoad(params) {
-    this.projId = params.id
-    console.log(this.projId)
   }
 }
 </script>
@@ -282,6 +301,35 @@ export default {
       box-sizing: border-box;
       padding: 25rpx 15rpx;
     }
+
+    .list-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 10px;
+      border-bottom: 1px solid #f0f0f0;
+      font-size: 12px;
+      color: #b0b0b0;
+      .left-content {
+        .title {
+          display: flex;
+          align-items: center;
+        }
+        .note {
+          margin-top: 10px;
+          font-size: 14px;
+          color: #333;
+        }
+      }
+      .right-content {
+        display: flex;
+        align-items: center;
+        .progress {
+          width: 100px;
+          margin-right: 5px;
+        }
+      }
+    }
   }
 
   .comment-area {
diff --git a/pages/YNEduApp/prac/prac.vue b/pages/YNEduApp/prac/prac.vue
index 7fe9d47..49e42be 100644
--- a/pages/YNEduApp/prac/prac.vue
+++ b/pages/YNEduApp/prac/prac.vue
@@ -1,48 +1,40 @@
 <template>
-  <view class="wrapper">
-    <div class="top-container">
-      <u-avatar :src="avatar" size="60" />
-      <div class="name">{{ name }}</div>
-    </div>
-    <div class="title">{{ title }}</div>
-    <div class="center-container">
-      <div class="left">
-        <div class="item">
-          <u-icon name="/static/images/正确率.png" size="50" />
-          <div class="text">
-            <div>正确率</div>
-            <div>{{ correctRate }}</div>
-          </div>
-        </div>
-        <div class="item">
-          <u-icon name="/static/images/累计作答.png" size="50" />
-          <div class="text">
-            <div>累计作答</div>
-            <div>{{ totalAnswer }}</div>
-          </div>
-        </div>
-        <div class="item">
-          <u-icon name="/static/images/累计答对.png" size="50" />
-          <div class="text">
-            <div>累计答对</div>
-            <div>{{ totalCorrect }}</div>
-          </div>
-        </div>
-      </div>
-      <div class="right">
-        <div class="right-top" @click="handleExercises(1)">
-          <div class="right-text">顺序练习</div>
-          <u-icon class="top-icon" name="/static/images/顺序练习.png" width="84" height="73" />
-        </div>
-        <div class="right-bottom" @click="handleExercises(1)">
-          <div class="right-text">随机练习</div>
-          <u-icon class="bottom-icon" name="/static/images/随机练习.png" width="84" height="73" />
+  <view>
+    <u-navbar title="练习" @leftClick="leftClick" placeholder />
+    <div class="tab-wrapper">
+      <div v-for="(item, index) in tabList" :key="index" class="tab-item" @click="handleTab(item, index)">
+        <div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
+          {{ item.name }}
         </div>
+        <div :class="{ 'tab-line': activeIndex === index }"></div>
       </div>
     </div>
-    <div class="bottom">
-      <div class="bottom-text">选择题库</div>
-      <u-icon class="bottom-icon" name="/static/images/选择题库.png" width="140" height="100" />
+    <div class="content">
+      <div v-for="(item, index) in list" :key="index" class="item-wrapper">
+        <div class="title">{{ item.title }}</div>
+        <div class="name-status">
+          <div class="name">
+            {{ item.name }}
+            <div class="name-sub">指派</div>
+          </div>
+          <div class="status">{{ item.status }}</div>
+        </div>
+        <div class="time">{{ item.time }}</div>
+        <div class="count-total">
+          <div class="count">练习{{ item.count }}次</div>
+          <div class="total">总分：{{ item.total }}</div>
+        </div>
+        <div class="bt-wrapper">
+          <div class="score">得分：{{ item.score }}</div>
+          <div class="btn" @click="handleExercise(item.id)">开始练习</div>
+        </div>
+      </div>
+
+      <!-- 暂无数据 -->
+      <div class="no-data" v-if="list.length == 0">
+        <image src="/static/images/zanwuneirong.png" mode="aspectFit" />
+        <view class="no-data-text">暂无内容</view>
+      </div>
     </div>
   </view>
 </template>
@@ -51,154 +43,171 @@
 export default {
   data() {
     return {
-      // 头像
-      avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
-      // 姓名
-      name: '张三',
-      // 练习标题
-      title: '送配电线路架设(初级)',
-      // 正确率
-      correctRate: '80%',
-      // 累计作答
-      totalAnswer: 100,
-      // 累计答对
-      totalCorrect: 80
+      tabList: [{ name: '全部' }, { name: '待练习' }, { name: '已练习' }],
+      activeIndex: 0,
+      list: [],
+      // 全部列表
+      allList: [
+        {
+          id: 1,
+          // 标题
+          title: '送配电线路架设(初级)',
+          // 姓名
+          name: '张三',
+          // 状态
+          status: '待练习',
+          // 练习时间
+          time: '2020-12-12 12:00',
+          // 练习次数
+          count: 1,
+          // 总分数
+          total: '--',
+          // 得分
+          score: '暂无'
+        },
+        {
+          id: 2,
+          // 标题
+          title: '送配电线路架设(初级)',
+          // 姓名
+          name: '张三',
+          // 状态
+          status: '待练习',
+          // 练习时间
+          time: '2020-12-12 12:00',
+          // 练习次数
+          count: 1,
+          // 总分数
+          total: '--',
+          // 得分
+          score: '暂无'
+        }
+      ],
+      // 待练习列表
+      waitList: [],
+      // 已练习列表
+      alreadyList: []
     }
   },
-	methods: {
-		handleExercises(type) {
-			console.log('type', type)
-			uni.navigateTo({
-				url: `/pages/YNEduApp/prac/exercises?type=${type}`
-			})
-		}
-	}
+  mounted() {
+    this.list = this.allList
+  },
+  methods: {
+    handleTab(item, index) {
+      this.activeIndex = index
+      if (index === 0) {
+        this.list = this.allList
+      } else if (index === 1) {
+        this.list = this.waitList
+      } else if (index === 2) {
+        this.list = this.alreadyList
+      }
+    },
+    // 开始练习
+    handleExercise(id) {
+      uni.navigateTo({
+        url: '/pages/YNEduApp/prac/pracDetail?id=' + id
+      })
+      uni.removeStorageSync('from')
+      uni.setStorageSync('from', '/pages/YNEduApp/prac/prac')
+    },
+    leftClick() {
+      uni.navigateTo({
+        url: '/pages/YNEduApp/index/index'
+      })
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.wrapper {
-  height: 94vh;
-  background: url('/static/images/练习-bg.png') no-repeat;
-  background-size: 100% 100%;
-  padding: 20px;
+.tab-wrapper {
+  display: flex;
+  justify-content: space-around;
+  /* background: #fff; */
+  margin-bottom: 10px;
 
-  .top-container {
-    margin-top: 40px;
+  .tab-item {
+    width: 25%;
     display: flex;
+    flex-direction: column;
     align-items: center;
-
-    .name {
-      font-weight: 500;
-      font-size: 17px;
-      color: #ffffff;
-      margin-left: 20px;
+    padding: 10px 0;
+    .tab-line {
+      margin-top: 5px;
+      width: 30%;
+      height: 2px;
+      background-color: #409eff;
+      transition: width 0.3s;
     }
   }
-  .title {
-    margin-top: 50px;
-    margin-bottom: 30px;
-    font-weight: 800;
-    font-size: 26px;
-    color: #fff;
-    line-height: 30px;
-    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-    text-align: center;
-  }
-
-  .center-container {
-    display: flex;
-    justify-content: space-between;
-    .left {
-      width: 52%;
-      height: 209px;
-      background: #5185ed;
-      border-radius: 8px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-
-      .item {
-        padding: 0 15px;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-
-        &:first-child {
-          margin-left: -8px;
-        }
-
-        .text {
-          color: #fff;
-          font-size: 16px;
-          font-weight: 500;
-          margin-left: 10px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-      }
+}
+.content {
+  padding: 0 10px;
+  .item-wrapper {
+    background: #fff;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 10px;
     }
-
-    .right {
-      width: 43%;
+    .name-status {
       display: flex;
-      flex-direction: column;
       justify-content: space-between;
-
-      .right-top {
-        height: 98px;
-        background: #e7ac67;
-        border-radius: 8px;
-        position: relative;
-        // top-icon - 在当前位置的右下角
-        .top-icon {
-          position: absolute;
-          right: 0;
-          bottom: 0;
+      .name {
+        display: flex;
+        .name-sub {
+          margin-left: 5px;
+          color: #999;
         }
       }
-      .right-bottom {
-        height: 98px;
-        background: #73c2f7;
-        border-radius: 8px 8px 8px 8px;
-        position: relative;
-        // bottom-icon - 在当前位置的左下角
-        .bottom-icon {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-        }
+      .status {
+        color: #409eff;
       }
-
-      .right-text {
-        font-weight: 500;
-        font-size: 15px;
+    }
+    .time {
+      color: #999;
+      margin-top: 10px;
+    }
+    .count-total {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      .count {
+        color: #999;
+      }
+      .total {
+        color: #999;
+      }
+    }
+    .bt-wrapper {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      .score {
+        color: #999;
+      }
+      .btn {
+        padding: 5px 10px;
+        background: #409eff;
         color: #fff;
-        margin: 5px 0 0 10px;
+        border-radius: 5px;
       }
     }
   }
-  .bottom {
-    margin-top: 20px;
-    width: 100%;
-    height: 120px;
-    background: #226de3;
-    border-radius: 8px;
-    position: relative;
 
-    .bottom-icon {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-    }
-
-    .bottom-text {
-      font-weight: 400;
-      font-size: 30px;
-      color: #ffffff;
-			line-height: 120px;
-			margin: auto 20px;
+  .no-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 100px;
+    .no-data-text {
+      margin-top: 10px;
+      color: #999;
     }
   }
 }
diff --git a/pages/YNEduApp/prac/pracDetail.vue b/pages/YNEduApp/prac/pracDetail.vue
new file mode 100644
index 0000000..5dff407
--- /dev/null
+++ b/pages/YNEduApp/prac/pracDetail.vue
@@ -0,0 +1,213 @@
+<template>
+  <view class="wrapper">
+    <u-navbar title="学习项目" @leftClick="leftClick" placeholder />
+    <div class="top-container">
+      <u-avatar :src="avatar" size="60" />
+      <div class="name">{{ name }}</div>
+    </div>
+    <div class="title">{{ title }}</div>
+    <div class="center-container">
+      <div class="left">
+        <div class="item">
+          <u-icon name="/static/images/正确率.png" size="50" />
+          <div class="text">
+            <div>正确率</div>
+            <div>{{ correctRate }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <u-icon name="/static/images/累计作答.png" size="50" />
+          <div class="text">
+            <div>累计作答</div>
+            <div>{{ totalAnswer }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <u-icon name="/static/images/累计答对.png" size="50" />
+          <div class="text">
+            <div>累计答对</div>
+            <div>{{ totalCorrect }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="right-top" @click="handleExercises(1)">
+          <div class="right-text">顺序练习</div>
+          <u-icon class="top-icon" name="/static/images/顺序练习.png" width="84" height="73" />
+        </div>
+        <div class="right-bottom" @click="handleExercises(2)">
+          <div class="right-text">随机练习</div>
+          <u-icon class="bottom-icon" name="/static/images/随机练习.png" width="84" height="73" />
+        </div>
+      </div>
+    </div>
+    <!-- 目前不要选择题库 -->
+    <!-- <div class="bottom">
+      <div class="bottom-text">选择题库</div>
+      <u-icon class="bottom-icon" name="/static/images/选择题库.png" width="140" height="100" />
+    </div> -->
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 头像
+      avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
+      // 姓名
+      name: '张三',
+      // 练习标题
+      title: '送配电线路架设(初级)',
+      // 正确率
+      correctRate: '80%',
+      // 累计作答
+      totalAnswer: 100,
+      // 累计答对
+      totalCorrect: 80
+    }
+  },
+  methods: {
+    handleExercises(type) {
+      console.log('type', type)
+      uni.navigateTo({
+        url: `/pages/YNEduApp/prac/exercises?type=${type}`
+      })
+    },
+    leftClick() {
+      const from = uni.getStorageSync('from')
+      uni.navigateTo({
+        url: from
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  height: 94vh;
+  background: url('/static/images/练习-bg.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 20px;
+
+  .top-container {
+    margin-top: 40px;
+    display: flex;
+    align-items: center;
+
+    .name {
+      font-weight: 500;
+      font-size: 17px;
+      color: #ffffff;
+      margin-left: 20px;
+    }
+  }
+  .title {
+    margin-top: 50px;
+    margin-bottom: 30px;
+    font-weight: 800;
+    font-size: 26px;
+    color: #fff;
+    line-height: 30px;
+    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+    text-align: center;
+  }
+
+  .center-container {
+    display: flex;
+    justify-content: space-between;
+    .left {
+      width: 52%;
+      height: 209px;
+      background: #5185ed;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+
+      .item {
+        padding: 0 15px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+
+        &:first-child {
+          margin-left: -8px;
+        }
+
+        .text {
+          color: #fff;
+          font-size: 16px;
+          font-weight: 500;
+          margin-left: 10px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+      }
+    }
+
+    .right {
+      width: 43%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .right-top {
+        height: 98px;
+        background: #e7ac67;
+        border-radius: 8px;
+        position: relative;
+        // top-icon - 在当前位置的右下角
+        .top-icon {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+        }
+      }
+      .right-bottom {
+        height: 98px;
+        background: #73c2f7;
+        border-radius: 8px 8px 8px 8px;
+        position: relative;
+        // bottom-icon - 在当前位置的左下角
+        .bottom-icon {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+        }
+      }
+
+      .right-text {
+        font-weight: 500;
+        font-size: 15px;
+        color: #fff;
+        margin: 5px 0 0 10px;
+      }
+    }
+  }
+  .bottom {
+    margin-top: 20px;
+    width: 100%;
+    height: 120px;
+    background: #226de3;
+    border-radius: 8px;
+    position: relative;
+
+    .bottom-icon {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+
+    .bottom-text {
+      font-weight: 400;
+      font-size: 30px;
+      color: #ffffff;
+      line-height: 120px;
+      margin: auto 20px;
+    }
+  }
+}
+</style>
diff --git a/static/images/练习.png b/static/images/练习.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b7d3df22eb39e73b1afd636e11342818f380f2f
GIT binary patch
literal 903
zcmV;219<$2P)<h;3K|Lk000e1NJLTq0018V001Be1^@s6>Vl&|00001b5ch_0Itp)
z=>Px&K}keGR9HvdmQ6?$VHn5%&&(ohbTG0Vzlxym)Lk>m4q>QNpoGwvVBIQ$I(YLG
zbVw)&I(P_*uHnJlkq8RQ(ulyof_BXc`cRA2-M;8ca%bm#Vzyn_*4>$LR}h->^FF`#
z|2+Tqze`xckCu>){{vprTfRQ#(z}Rx6B7o7jEiF}k+9Wd7e%>GE8EB%y9;1V3T(vf
z*7rYd`tm*71@eZ+!7xU^yaGT3#5cfn6o3q1WX@HfzG`_N%5;Ie;8lI4n@KY6fU(*H
z8wS-sZ<`sf)RYd1(VYN3a=Z1WOcTf%zP;bGPG=fQfPWeW)tca>La$cb3Fh<334AJ$
z8$$;|v#Arv37$=H`e@T8a4w*RPv-^Srj_{wVz-!4YK}S@rP`P6GZWcN<@0;4Fz5sW
zqd_&iBWL(ubHxUeI~FW8kF`#ZW&>Aft9H9s8em`<m@fxfBPVl$$9F8~0f4epb7cd2
z{UtR-Vt^S%049D#<+?ZRq4x`hS863&B#41@S36Nmz+@ECo)_x$WO}`=;SvFIKcRTS
zFsM1z)#(kreq|RCZpIZe-a-6s477cFx8Qf49v}<bF{X5q>M|)#UL>pX>b~*~g7m>e
zWJc`33B~^SD_~49p+2aF-!3@YtNV-B3dYl9WG0i#$&LZM)gd)lDYjJZ)k=E6qTQLR
zm0cj*2BQ$bBm)h0iml;(<rx4kgS&!i<cy_aNc~B3MRjVh3LIOvZ|z;R+$Bq20k|00
z8&t#Q-sgShI|hk+am5aIYzy~YFWtwIF<=%(X}0L)!5^Q~55<!!MX^p&y^|f=!mIl{
zor36sx$l4)Rx*MUk!ckmRxZ!FbFZdc1>-n?o`4!YVis=fU0LRq<((j^1#m1GnG7^K
zHJ781@o7qc8C6UeCP08u3BdEuVYUyD+?4x0mjF67|1d`ZJOOA}%yIYFVe3DKIl)c0
z%P#3GfC>nnkO)ubNDRe36i&YGcs=K&snZ(U9~P&La;eJ*H*;DtXmc(NGo3LA;ozZ}
z+qO^5EbwZ|3>fpCSw5GE2~jtG=;OoG9vPKa`ITz~H0J|LJ<Gr=VaRRI+d@;e@Wq1K
d^;uHG{Q-lOr7-Wne`x>!002ovPDHLkV1mr~p?3fP

literal 0
HcmV?d00001

diff --git a/static/images/考试.png b/static/images/考试.png
new file mode 100644
index 0000000000000000000000000000000000000000..9918342cd8f2dcc62c5ba91b694c0b7e41f21777
GIT binary patch
literal 959
zcmV;w13>(VP)<h;3K|Lk000e1NJLTq0018V0018d1^@s6AFdWT00001b5ch_0Itp)
z=>Px&c}YY;R9HvtmTicXRTRg6=b2qw-CeUcp^c>a6c#}&y}9j6Y9@kNV3I+wQEXHe
zYdbTox!J4|xy@u-TS#I_wF=>v#9|=@r)T^kVNuYR43QvugIX<j#(jDI?K3;GJWeyZ
zvk?aE`F8I;=lt$H_uO-?aRJ3HAe;Xtd`X8EjvCztZzmIWu$%}j3#&RK?!#fF6QVP@
z)lL+%FM0B&s9r;~=Zubd9$S{yvO5+tuhd3bHt2ed@q}P4;)<-E=yDVG(zM_L&%ntV
z8{eAf`YdjH^Uhjgs__1#31g!{gW#gvS_Y^>#N32+PY*6OnehY0i--j>wxnLMO)F!X
zb83jEBwB%mdFO(Uad^|j@@(Y(2^`VsCai~;oaQu-+ZhIuy>_BGs?8EF<e<L+yV8*O
zJZ?YvbCcIL6?jubF9V})+_DY>#uM-YX^v=@pjE~PLxVhebcc-uRSMxPF;#h|v(d}s
zuVFIbnj#XAapN|-95~SK#_jdO&HWADu6bT1zmMw=j_Y4CkwQ6{fzO0}s@Xo1aR1Iz
zGmd*>yjojJ|3J)6<stbZQyBI;HtMR%VIIbK8c~-ouPx=g^Tx1Nnb8Maoht}uJmY;E
zWxKo0zAS_{u2-{DL7R-#h*=X2jqfGa98TDgvf#e)J<sdP^ayt&Ixud^pL)D|9guN3
z;%5Kk&Is>$mHe3PViR%z=%3}V?_iIe^e3hSUtCRfv7WuCL$`!NJd4K)Gv)^FI9pyD
zBkD$6I&8dgByPtFb6{Cm^E1ZJ=PIwh%@>Zb2eCVu>riJkjIgf7VGZI*U;*%;8@CUO
z^=p6b)(yI>YJ><54<N291@8i$fyp0;aM&x4JxglXUo0ATJ*OKE_1HIsU`f{8$y)Px
zM6fil{tIJlcDLDEXEhdoaBoz#gQKiah*pE;lSamO5(5g+dw8oIFLlaAVcl3^tOM=`
z=I8X%z#$L%(kF3`?y#Xi?i6>`uugTM*{nBMEx0DHB}kgFv&!S6PZM^!zD;v#=JJ?~
zhk)Ax-u!!iR~g<(_1Uk*DChk;*SD#%W*&D+gn`9@jP`#lU*~`q=bqLdj`4}c*zP7s
zVdno4O3HcRLCc1y>Kw7kAWASA;;WFuPKN1E_S)dNfWfu0-~}7GJtXQSQmKUb5hz=x
h4KJHi#Nhu6{|lIahCbV?Hyr=~002ovPDHLkV1mh8&#nLf

literal 0
HcmV?d00001

diff --git a/static/images/课程.png b/static/images/课程.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e3f46a131377ab74f54fd0e0fca734bec51a305
GIT binary patch
literal 1228
zcmV;-1T*`IP)<h;3K|Lk000e1NJLTq0018V000*V1^@s7g!-hy00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91AD{yO1ONa40RR917XSbN06_PiHvj+xHc3Q5R7ef2R()(!RTO{sy?$(C
zEsNMM+HD<7vl#q{n=$)CZKC+cBI*poZVU`&tcZa){!lTCybuY*FOnr&wmLx4KxAYh
zj6XDPp$Q*}VKtfvkutY2OY64k7M8Bv>wEWl@7vzvwSDc%!cCfU?m55TIp>~tKME*3
zs(XgDMCLbui$$6_TL2Jvz*Cc?D(gQzqU6%biL6)FA2=*e(iF|&907CVX^VCts)Yt~
z5JJv5>DxX<e89B(Mls;V?$Iy-)5zjftVV4i!>!dk002>rrf&|YF-^OM5V5CJUHN9a
zix?fvy(2`Du~Z~QnRX4LX6wsLr{yIS>e&dS2r^*0`xU^797?QfQN^n;w_Fft$cgzR
zBaz7hGec8r3?kaz*j<}kWxq-b2|)?Urt`WICfc)6tY0hv0OnQWzt=w>Id|~mY$T;!
zs-M{8H7EgV+2NvOWF|%nalUBgkKO3WMqey^YhE9}QycPmeo<mG0@!x+%~1nh%XGkd
zzZw0X5Kc<Vr67s`_^aU&IkCkcIrEWX7Ud?*hh&IUi^=>f;Kcw4AyDHDD5}XFMmz}^
zB9hHJFD7U{&g7;nd1;2$aI<Y8-@6^6#oYR%>K0cE_LQrBgMHiapNUVkn`$J<1_eRp
z$cp5Yq;vCOR?>-dzIE{E+BZHcRoYa^4tLk3h2n~R)|MZVEQ{#!hOY)VLq%iweEZ)y
z$@Zr1Ujd-(k#F5b{Y=o^85!gSonc-0<Tk64Nc5D?<8&W&LV=?u&g^}hIPdg-*pCJI
z3K=Jk_*2N^-?fcn+q1->7^+0#S6#D$n4v<5<l_wNTaN`3#`TZkyG}M{Fq8&B1IQEs
zZ7ehbNH_hs0_hS~;<D*vf4e9O-ampEX=^^|p&90VNP*Sah%2$<Bpk!X&vLfs4o!af
zbWDmNH{8C}yPqqv9x_Z_IZ-xy*&_iSh741V*Z!;8ajxK>z%w{rofK0}4iL}*yd!7;
zru}|DF99Bg-0;Hdqol<MP$^I91Mil6ifQOW47r+@!#+@Q^3ayLJAYd9o*!CU&M#DK
zKC+$Mg;J8rJ-7Ac4PTt{4-N9vc<`>Xj?Flg5|&80?Mh?1?r6JKh^B51aWGN~HHG1l
zzb=#`qiIuYbycrr=fJTtcSk#-wRN-H*o(RXbEq&nyndp8|7d!g^m)$Y)vZ0+$r$t7
zLVW%SJraVtsX*!7?>`DH1?j@Ft8B~Ho00{V;|w=DqC-(r*!NB}JxR8C&g22FCt2}!
zM^l1}jfPHp=G1~r^z9qKc9WWKIa|);ggka;@9)b6S*c%4?qV-#Zr{48Mfgd?KiebE
z?=hN-Val;sX@Z2H6`<x`6}g?s?smF9C|PAHnZI$C<p9}CRP@hYNb74z0t_MrE!z=-
q&3^!Vl_G8tj{yEtcb$5)s^x!)5^m1TU?al-0000<MNUMnLSTYFr7yPt

literal 0
HcmV?d00001