样式优化

common/uni.css

@@ -3,6 +3,7 @@
 	font-weight: normal;
 	font-style: normal;
 	src: url('~@/static/uni.ttf') format('truetype');
+	src: url('~@/static/fonts/SourceHanSansSC-VF.ttf') format('truetype');
 }
 
 /* #ifdef H5 */

pages/YNEduApp/index/index.vue

@@ -7,15 +7,10 @@
         suffixIcon="search"
         v-model="keyword"
         placeholder="请输入搜索关键词"
-        @iconClick="toggleSearch"
+        @blur="toggleSearch"
       ></uni-easyinput>
     </view>
-    <view class="opt-grids">
+    
-      <view v-for="(part, index) in opts" :key="index" @click="jumpUrl(part.url)">
-        <image :src="part.src" mode="" style="width: 58px; height: 58px;"></image>
-        <span>{{ part.name }}</span>
-      </view>
-    </view>
     <view class="swipe-area">
       <swiper class="swiper-box" autoplay interval="3000" indicator-dots="true">
         <swiper-item v-for="(item, index) in imgList" :key="index">
@@ -23,6 +18,13 @@
         </swiper-item>
       </swiper>
     </view>
+
+    <view class="opt-grids">
+      <view v-for="(part, index) in opts" :key="index" @click="jumpUrl(part.url)">
+        <image :src="part.src" mode="" style="width: 58px; height: 58px;"></image>
+        <span>{{ part.name }}</span>
+      </view>
+    </view>
     <uni-notice-bar
       show-icon
       scrollable
@@ -245,14 +247,13 @@ export default {
 <style lang="scss">
 .page {
   width: 100vw;
-  height: 100vh;
   background-color: #f8f8f8;
   box-sizing: border-box;
   padding: 0 20px;
 
   .search {
     width: 100%;
-    margin: 10px auto 0;
+    margin: 3vh auto 0;
     display: flex;
     align-items: center;
   }
@@ -284,14 +285,14 @@ export default {
   }
 
   .swipe-area {
+    margin-top: 3vh;
     width: 100%;
-    height: 20vh;
     border-radius: 15rpx;
     overflow: hidden;
-    margin-bottom: 10rpx;
   }
 
   .my-task {
+    margin-bottom: 3vh;
     width: 100%;
     height: 40vh;
     background-color: #fff;

pages/YNEduApp/learnProj/learnProj.vue

@@ -1,6 +1,7 @@
 <template>
   <view class="page">
     <u-navbar title="学习项目" @leftClick="leftClick" placeholder />
+    <div class="wrapper">
       <div class="tab-wrapper">
         <div v-for="(item, index) in statusList" :key="index" class="tab-item" @click="chooseStatus(item, index)">
           <div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
@@ -13,10 +14,27 @@
         suffixIcon="search"
         v-model="totalStatus.keyword"
         placeholder="请输入项目名称"
-      @iconClick="toggleSearch"
+        @blur="toggleSearch"
         style="margin-bottom: 10px"
       ></uni-easyinput>
 
+      <!-- 查询 -->
+      <div class="status-secs">
+        <div class="item" @click="openPicker(1)">
+          <span>学习类型</span>
+          <u-icon name="arrow-down-fill" color="#D8D8D8" size="9"></u-icon>
+        </div>
+        <div class="item" @click="openPicker(2)">
+          <span>逾期状态</span>
+          <u-icon name="arrow-down-fill" color="#D8D8D8" size="9"></u-icon>
+        </div>
+        <div class="item" @click="openPicker(3)">
+          <span>合格状态</span>
+          <u-icon name="arrow-down-fill" color="#D8D8D8" size="9"></u-icon>
+        </div>
+      </div>
+    </div>
+
     <view class="project-cont">
       <view v-for="(item, index) in projList" :key="item.id" class="single-proj" @click="toggleDetail(item.id)">
         <h4 class="img">
@@ -51,6 +69,16 @@
       <image src="/static/images/zanwuneirong.png" mode="aspectFit" />
       <view class="no-data-text">暂无内容</view>
     </div>
+
+    <!-- 选择器 -->
+    <u-picker
+      v-if="showPicker"
+      :show="showPicker"
+      :columns="[columns]"
+      keyName="label"
+      @cancel="showPicker = false"
+      @confirm="confirmPicker"
+    ></u-picker>
   </view>
 </template>
 
@@ -61,6 +89,8 @@ import config from '@/config'
 export default {
   data() {
     return {
+      showPicker: false,
+      columns: [],
       activeIndex: 0,
       statusList: [
         // status -1: 全部 1: 已完成 0: 未完成
@@ -77,26 +107,20 @@ export default {
         qualStatus: '',
         signupStatus: ''
       },
-      // 状态选项
+      // 学习类型
       learnTypeRange: [
-        { text: '学习类型', value: '' },
+        { label: '不学', value: 1 },
-        { text: '不学', value: 1 },
+        { label: '要学', value: 2 }
-        { text: '要学', value: 2 }
       ],
+      // 逾期状态
       outDateStatusRange: [
-        { text: '逾期状态', value: '' },
+        { label: '临期', value: 1 },
-        { text: '临期', value: 1 },
+        { label: '过期', value: 2 }
-        { text: '过期', value: 2 }
       ],
+      // 合格状态
       qualStatusRange: [
-        { text: '合格状态', value: '' },
+        { label: '合格', value: 1 },
-        { text: '合格', value: 1 },
+        { label: '不及格', value: 2 }
-        { text: '不及格', value: 2 }
-      ],
-      signupStatusRange: [
-        { text: '报名状态', value: '' },
-        { text: '报了', value: 1 },
-        { text: '没报', value: 2 }
       ],
       // 项目列表
       projList: []
@@ -106,6 +130,24 @@ export default {
     this.getList()
   },
   methods: {
+    openPicker(type) {
+      console.log('🚀 ~ openPicker ~ type:', type)
+      this.columns = []
+      if (type === 1) {
+        this.columns = this.learnTypeRange
+      } else if (type === 2) {
+        this.columns = this.outDateStatusRange
+      } else if (type === 3) {
+        this.columns = this.qualStatusRange
+      } else if (type === 4) {
+        this.columns = this.signupStatusRange
+      }
+      this.showPicker = true
+    },
+    confirmPicker(e) {
+      console.log('🚀 ~ confirmPicker ~ e:', e)
+      this.showPicker = false
+    },
     async getList() {
       const params = {
         userId: uni.getStorageSync('userId'),
@@ -205,6 +247,10 @@ export default {
 </script>
 
 <style lang="scss">
+.wrapper {
+  padding: 0 10px;
+  background-color: #fff;
+}
 .tab-wrapper {
   display: flex;
   justify-content: space-around;
@@ -242,25 +288,21 @@ export default {
   height: 100vh;
   background-color: #f8f8f8;
   box-sizing: border-box;
-  padding: 0 10px;
 
   .status-secs {
-    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 800;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    .item {
       display: flex;
       align-items: center;
-    margin-bottom: 1vh;
+      span {
-
+        margin-right: 5px;
-    view {
-      box-sizing: border-box;
-      padding: 0 15rpx;
-      font-size: 18px;
-      color: #9ea2ac;
-      font-weight: bold;
       }
-
-    .active {
-      font-size: 28px;
-      color: #000;
     }
   }
 
@@ -271,8 +313,7 @@ export default {
   }
 
   .project-cont {
-    width: 100%;
+    padding: 0 10px;
-    height: 10rpx;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;

pages/YNEduApp/prac/exercises.vue

@@ -2,23 +2,34 @@
   <view class="wrapper" :style="{ fontSize: fontSize + 'px' }">
     <u-navbar leftIcon="" title="" :placeholder="true">
       <view class="u-nav-slot" slot="right">
-        <u-tag text="小" :type="fontSize == 19 ? 'primary' : 'info'" @click="changeFont(19)" style="margin-right: 8px" ></u-tag>
+        <span style="font-size: 13px; color: #ccc; margin-right: 5px">字体大小</span>
-        <u-tag text="中" :type="fontSize == 21 ? 'primary' : 'info'" @click="changeFont(21)" style="margin-right: 8px"></u-tag>
+        <u-tag
+          text="小"
+          :type="fontSize == 19 ? 'primary' : 'info'"
+          @click="changeFont(19)"
+          style="margin-right: 8px"
+        ></u-tag>
+        <u-tag
+          text="中"
+          :type="fontSize == 21 ? 'primary' : 'info'"
+          @click="changeFont(21)"
+          style="margin-right: 8px"
+        ></u-tag>
         <u-tag text="大" :type="fontSize == 23 ? 'primary' : 'info'" @click="changeFont(23)"></u-tag>
       </view>
     </u-navbar>
     <div class="top-time">已用时间 {{ usedTime }}</div>
     <div class="num-wrapper">
       <div class="correct">
-        <u-icon name="/static/images/true.png" :size="fontSize" />
+        <u-icon name="/static/images/true.png" :size="fontSize + 2" />
         <div class="num">{{ trueNum }}</div>
       </div>
       <div class="error">
-        <u-icon name="/static/images/error.png" :size="fontSize" />
+        <u-icon name="/static/images/error.png" :size="fontSize + 2" />
         <div class="num">{{ falseNum }}</div>
       </div>
       <div class="total" @click="openSelect">
-        <u-icon name="/static/images/quanbufenlei.png" :size="fontSize" />
+        <u-icon name="/static/images/quanbufenlei.png" :size="fontSize + 2" />
         <div class="num">{{ nowNum }}/{{ allNum }}</div>
       </div>
     </div>
@@ -206,12 +217,31 @@
     </u-modal>
 
     <!-- 题目选择弹框 -->
-    <u-modal :show="showModalSelect" title="题目选择" @confirm="showModalSelect = false">
+    <u-popup
-      <view class="slot-content">
+      :show="showModalSelect"
+      @close="showModalSelect = false"
+      mode="center"
+      round="10"
+      customStyle="width: 90%; height: 50%"
+    >
+      <div class="num-wrapper">
+        <div class="correct">
+          <u-icon name="/static/images/true.png" :size="fontSize + 2" />
+          <div class="num">{{ trueNum }}</div>
+        </div>
+        <div class="error">
+          <u-icon name="/static/images/error.png" :size="fontSize + 2" />
+          <div class="num">{{ falseNum }}</div>
+        </div>
+        <div class="total">
+          <u-icon name="/static/images/quanbufenlei.png" :size="fontSize + 2" />
+          <div class="num">{{ nowNum }}/{{ allNum }}</div>
+        </div>
+      </div>
+
       <div class="topic-content">
+        <div class="wrap" v-for="(item, index) in questionListSelect" :key="index">
           <div
-            v-for="(item, index) in questionListSelect"
-            :key="index"
             class="topic-wrapper"
             :class="{ correct: item.isTrue == 1, error: item.isTrue == 0 }"
             @click="handleJump('jump', item.index)"
@@ -220,8 +250,8 @@
             <div class="topic">{{ item.index }}</div>
           </div>
         </div>
-      </view>
+      </div>
-    </u-modal>
+    </u-popup>
 
     <u-loading-page :loading="isLoading"></u-loading-page>
   </view>
@@ -245,6 +275,7 @@ export default {
   data() {
     return {
       isLoading: false,
+      isAddLoading: false,
       practiceId: '', // 练习id
       recordId: '', // 记录id
       isNew: 1, // 是否新练习
@@ -279,7 +310,8 @@ export default {
       startY: 0, // 起始触摸点Y坐标
       endX: 0, // 结束触摸点X坐标
       endY: 0, // 结束触摸点Y坐标
-      fontSize: 19
+      fontSize: 19,
+      isError: false // 是否错题消除
     }
   },
   onLoad(opt) {
@@ -410,6 +442,8 @@ export default {
     // 跳题
     handleJump(item, index) {
       console.log('🚀 ~ handleJump ~ item:', item, this.recordId)
+      if (this.isAddLoading) return
+      this.isAddLoading = true
       if (item === 'prev') {
         this.nowNum--
         if (this.nowNum < 1) {
@@ -451,6 +485,7 @@ export default {
         },
         success: res => {
           console.log('🚀 ~ handleJump ~ res:', res)
+          this.isAddLoading = false
           res = res.data
           this.questionList.push(res.data)
           if (res.data.selectAnswer) {
@@ -489,6 +524,7 @@ export default {
         },
         fail: err => {
           console.log(err)
+          this.isAddLoading = false
         }
       })
     },
@@ -834,7 +870,8 @@ export default {
     },
     // 打开题目选择弹框
     openSelect() {
-      this.isLoading = true
+      if (this.isAddLoading) return
+      this.isAddLoading = true
       // const res = await this.getPracticeQuestionList()
       // console.log('🚀 ~ openSelect ~ res:', res)
       // this.questionListSelect = res.data
@@ -854,13 +891,14 @@ export default {
         },
         success: res => {
           this.showModalSelect = true
+          this.isAddLoading = false
           console.log('🚀 ~ getPracticeQuestionList ~ res:', res)
           res = res.data
           this.questionListSelect = res.data
         },
         fail: err => {
-          this.isLoading = false
           console.log(err)
+          this.isAddLoading = false
         }
       })
     },
@@ -952,31 +990,36 @@ export default {
         }
       }
     }
-
+  }
   .topic-content {
-      height: 300px;
     display: flex;
-      justify-content: flex-start;
+    /* justify-content: space-between; */
-      align-items: center;
+    align-items: flex-start;
     flex-wrap: wrap;
     overflow: auto;
 
-      .topic-wrapper {
+    .wrap {
-        width: 30px;
+      width: 20%;
-        height: 30px;
-        border: 1px solid #409eff;
-        border-radius: 5px;
       display: flex;
       justify-content: center;
       align-items: center;
-        margin: 10px;
+      .topic-wrapper {
+        width: 40px;
+        height: 40px;
+        border: 1px solid #ccc;
+        border-radius: 3px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 8px;
         .topic {
-          color: #409eff;
+          color: #ccc;
         }
         // 正确背景
         &.correct {
           background: #67d279;
           color: #fff;
+          border: none;
           .topic {
             color: #fff;
           }
@@ -985,6 +1028,7 @@ export default {
         &.error {
           background: #f0514c;
           color: #fff;
+          border: none;
           .topic {
             color: #fff;
           }
@@ -995,10 +1039,11 @@ export default {
 
   .bottom-btn {
     position: fixed;
-    bottom: 30px;
+    bottom: 16px;
     left: 0;
     display: flex;
     justify-content: space-around;
+    align-items: center;
     width: 100%;
     .btn {
       width: 100px;
@@ -1019,7 +1064,7 @@ export default {
   .question-wrapper {
     height: 64vh;
     overflow: auto;
-    padding: 30px;
+    padding: 20px;
     color: #08428d;
 
     .title {
@@ -1033,8 +1078,9 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background: #ffffff;
+      background: #f8f8f8;
       border-radius: 8px;
+      border: 1px solid #ccc;
       overflow: auto;
       .label-wrapper {
         overflow: auto;
@@ -1064,13 +1110,12 @@ export default {
   .top-time {
     text-align: center;
     color: #333;
-    padding-top: 60px;
   }
 
   .num-wrapper {
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
-    margin-top: 20px;
+    margin: 15px 6%;
 
     .correct,
     .error,

pages/YNEduApp/prac/pracDetail.vue

@@ -10,43 +10,69 @@
       <div class="left">
         <div class="item">
           <u-icon name="/static/images/accuracy.png" size="50" />
-          <div class="text">
           <div>正确率</div>
-            <div>{{ correctRate }}</div>
+          <div>{{ correctRate || '0%' }}</div>
-          </div>
         </div>
         <div class="item">
           <u-icon name="/static/images/accumulative-answer.png" size="50" />
-          <div class="text">
           <div>累计作答</div>
-            <div>{{ totalAnswer }}</div>
+          <div>{{ totalAnswer || 0 }}</div>
-          </div>
         </div>
         <div class="item">
           <u-icon name="/static/images/accumulative-total.png" size="50" />
-          <div class="text">
           <div>累计答对</div>
-            <div>{{ totalCorrect }}</div>
+          <div>{{ totalCorrect || 0 }}</div>
-          </div>
         </div>
       </div>
       <div class="right">
         <div class="right-top">
           <div class="right-text">顺序练习</div>
+          <div class="btn-wrap">
             <div class="btn" v-if="!isNew">
-            <u-button type="primary" plain shape="circle" text="继续上次练习" @click="handleExercises(1)"></u-button>
+              <u-button
+                type="primary"
+                plain
+                shape="circle"
+                text="继续上次练习"
+                style="background: #f6f6f6"
+                @click="handleExercises(1)"
+              ></u-button>
             </div>
             <div class="btn">
-            <u-button type="primary" plain shape="circle" text="开始新的练习" @click="handleExercises(2)"></u-button>
+              <u-button
+                type="primary"
+                plain
+                shape="circle"
+                text="开始新的练习"
+                style="background: #f6f6f6"
+                @click="handleExercises(2)"
+              ></u-button>
+            </div>
           </div>
         </div>
         <div class="right-bottom">
           <div class="right-text">随机练习</div>
+          <div class="btn-wrap">
             <div class="btn" v-if="!isNew">
-            <u-button type="primary" plain shape="circle" text="继续上次练习" @click="handleExercises(3)"></u-button>
+              <u-button
+                type="primary"
+                plain
+                shape="circle"
+                text="继续上次练习"
+                style="background: #f6f6f6"
+                @click="handleExercises(3)"
+              ></u-button>
             </div>
             <div class="btn">
-            <u-button type="primary" plain shape="circle" text="开始新的练习" @click="handleExercises(4)"></u-button>
+              <u-button
+                type="primary"
+                plain
+                shape="circle"
+                text="开始新的练习"
+                style="background: #f6f6f6"
+                @click="handleExercises(4)"
+              ></u-button>
+            </div>
           </div>
         </div>
       </div>
@@ -196,8 +222,7 @@ export default {
     display: flex;
     justify-content: space-between;
     .left {
-      width: 52%;
+      width: 33%;
-      /* height: 209px; */
       background: #5185ed;
       border-radius: 8px;
       display: flex;
@@ -207,62 +232,62 @@ export default {
       .item {
         padding: 0 15px;
         display: flex;
+        flex-direction: column;
         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%;
+      width: 63%;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
 
       .btn {
-        width: 80%;
+        width: 89%;
         margin: 10px auto;
       }
 
       .right-top {
         height: 158px;
         background: #e7ac67;
-        /* background: url('../../../static/images/order-exercises.png') no-repeat; */
+        /* background: url('/static/images/order-exercises.png') no-repeat; */
         background-size: 100% 98px;
         border-radius: 8px;
-        position: relative;
+        /* position: relative; */
         margin-bottom: 10px;
+        /* display: flex;
+        flex-direction: column;
+        justify-content: space-around; */
         // top-icon - 在当前位置的右下角
-        .top-icon {
+        /* .top-icon {
           position: absolute;
           right: 0;
           bottom: 0;
-        }
+        } */
       }
       .right-bottom {
         height: 158px;
         background: #73c2f7;
         border-radius: 8px 8px 8px 8px;
-        position: relative;
+        /* position: relative; */
         // bottom-icon - 在当前位置的左下角
-        .bottom-icon {
+        /* .bottom-icon {
           position: absolute;
           left: 0;
           bottom: 0;
+        } */
       }
+
+      .btn-wrap {
+        height: 95px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
       }
 
       .right-text {

pages/YNEduApp/user/user.vue

@@ -4,9 +4,9 @@
       <view class="user-avatar">
         <image src="/static/images/user.png"></image>
       </view>
-      <view class="user-info" style="height: 120px;">
+      <view class="user-info" style="height: 120px">
         <span style="font-size: 24px">{{ userName }}</span>
-        <span style="font-size: 12px; color: #8a8a8b; overflow: auto;">{{ className }}</span>
+        <span style="font-size: 12px; color: #8a8a8b; overflow: auto">{{ className }}</span>
       </view>
       <view class="edit-btn">
         <view @click="handleEdit">修改资料</view>
@@ -60,7 +60,7 @@ export default {
       secList: [
         // { id: 1, title: '切换门户', src: '/static/eduImg/changeGate.png', path: 'changeGate' },
         // { id: 2, title: '人脸识别', src: '/static/eduImg/faceScan.png', path: 'faceScan' },
-        { id: 3, title: '我的消息', src: '/static/eduImg/myMsg.png', path: 'myMsg' },
+        { id: 3, title: '我的消息', src: '/static/eduImg/myMsg.png', path: 'myMsg' }
         // { id: 4, title: '设置', src: '/static/eduImg/settings.png', path: 'settings' }
       ],
       token: uni.getStorageSync('access_token')
@@ -80,7 +80,7 @@ export default {
     },
     // 获取自学-学时-证书
     getLearnStats() {
-      console.log('🚀 ~ getLearnStats ~ this.token:',uni.getStorageSync('access_token'))
+      console.log('🚀 ~ getLearnStats ~ this.token:', uni.getStorageSync('access_token'))
       this.$verificationToken()
       uni.request({
         url: config.baseUrl + '/exam-student/personalCenter/getStudyAndCer',
@@ -207,7 +207,7 @@ export default {
     background-color: #fff;
     border-radius: 15rpx;
     box-sizing: border-box;
-    padding: 4vh 3vw;
+    padding: 10px;
     color: #727272;
 
     .single-sec {
@@ -217,7 +217,7 @@ export default {
       font-size: 14px;
       display: flex;
       align-items: center;
-      border-bottom: 1px solid #f6f6f6;
+      /* border-bottom: 1px solid #f6f6f6; */
 
       .lef-icon {
         width: 5%;