Browse Source

完善个人中心相关页面的样式,及主题色

yellowtaotao 4 years ago
parent
commit
7bcd6699d7

+ 5 - 5
src/styles/vant.scss

@@ -19,7 +19,7 @@
 
 // 修改导航相关样式
 .van-nav-bar {
-  background-color: #2878ff;
+  background-color: #7cc8ff;
   .van-nav-bar__left {
     .van-icon {
       color: #fff;
@@ -40,10 +40,10 @@
 .van-tabs__wrap--scrollable .van-tabs__nav {
   background-color: #f4f7ff;
   .van-tab--active {
-    color: #2878ff;
+    color: #0088e9;
   }
   .van-tabs__line {
-    background-color: #2878ff;
+    background-color: #0088e9;
     width: 40% !important; 
   }
 }
@@ -64,13 +64,13 @@
   .van-tab--active {
     .van-tab__text {
       color: #fff;
-      background-color: #2878ff;
+      background-color: #0088e9;
       flex-wrap: nowrap;
       white-space: nowrap;
     }
   }
   .van-tabs__line {
-    background-color: #2878ff;
+    background-color: #0088e9;
     width: 35% !important; 
   }
 }

+ 2 - 2
src/views/home/answer/page-answer-recruit-result.vue

@@ -10,14 +10,14 @@
         <van-button
           class="exam-item-detial-button"
           type="primary"
-          color="#2878ff"
+          color="#0088e9"
           @click="handleBackFun"
           >返回</van-button
         >
         <van-button
           class="exam-item-detial-button"
           type="primary"
-          color="#2878ff"
+          color="#0088e9"
           @click="handleGoOnFun"
           >再来一组</van-button
         >

+ 8 - 8
src/views/home/answer/page-answer-recruit.vue

@@ -76,7 +76,7 @@
             v-show="answerStatus === 0"
             class="exam-question-button"
             type="primary"
-            color="#2878ff"
+            color="#0088e9"
             @click="handleSureFun"
             >确定</van-button
           >
@@ -84,7 +84,7 @@
             v-show="answerStatus === 2"
             class="exam-question-button"
             type="primary"
-            color="#2878ff"
+            color="#0088e9"
             @click="handleNextFun"
             >下一题</van-button
           >
@@ -492,7 +492,7 @@ export default {
         justify-content: space-between;
         align-items: center;
         flex-wrap: nowrap;
-        border-bottom: 1px solid #2878ff;
+        border-bottom: 1px solid #0088e9;
         padding-bottom: 0.25rem;
         height: 1.25rem;
         font-size: 0.65rem;
@@ -503,7 +503,7 @@ export default {
           .exam-question-head-left-icon {
             width: 0.25rem;
             height: 1rem;
-            background-color: #2878ff;
+            background-color: #0088e9;
           }
           .exam-question-head-left-txt {
             margin-left: 0.25rem;
@@ -533,8 +533,8 @@ export default {
           border: 1px solid transparent;
         }
         .exam-question-options-item-checked {
-          border-color: #2878ff;
-          color: #2878ff;
+          border-color: #0088e9;
+          color: #0088e9;
         }
         .exam-question-options-false {
           border-color: red !important;
@@ -551,7 +551,7 @@ export default {
           border: 1px solid transparent;
           &:active,
           &:focus {
-            border-color: #2878ff;
+            border-color: #0088e9;
           }
         }
       }
@@ -575,7 +575,7 @@ export default {
         }
       }
       .exam-question-result {
-        border-bottom: 1px solid #2878ff;
+        border-bottom: 1px solid #0088e9;
         padding-bottom: 0.25rem;
         font-size: 0.6rem;
       }

+ 2 - 11
src/views/home/exam/page-exam-item-detail.vue

@@ -19,14 +19,14 @@
       <van-button
         class="exam-item-detial-button"
         type="primary"
-        color="#2878ff"
+        color="#0088e9"
         @click="handleStartExamFun"
         >开始考试</van-button
       >
       <van-button
         class="exam-item-detial-button"
         type="primary"
-        color="#2878ff"
+        color="#0088e9"
         @click="handleBackFun"
         >返回</van-button
       >
@@ -41,15 +41,6 @@ export default {
   components: {},
   data() {
     return {
-      userInfo: {
-        id: "testuser-ztdxxDGdNj",
-        username: "testuser-ztdxxDGdNj",
-        firstName: "string",
-        lastName: "string",
-        email: "string",
-        encodedPassword: "string",
-        userStatus: "suspended"
-      },
       examItemData: {} // 当前考试的信息
     };
   },

+ 9 - 9
src/views/home/exam/page-exam-item-doing.vue

@@ -101,7 +101,7 @@
           <van-button
             class="exam-question-button"
             type="primary"
-            color="#2878ff"
+            color="#0088e9"
             @click="handleSureFun"
             >确定</van-button
           >
@@ -109,7 +109,7 @@
             v-if="answerIndex + 1 === examQuestionList.length"
             class="exam-question-button"
             type="primary"
-            color="#2878ff"
+            color="#0088e9"
             :disabled="this.timeDiff === '00:00:00'"
             @click="handleSubmitFun"
             >交卷</van-button
@@ -642,8 +642,8 @@ export default {
       background-color: #f4f7ff;
     }
     .exam-question-item-on {
-      border-color: #2878ff;
-      color: #2878ff;
+      border-color: #0088e9;
+      color: #0088e9;
     }
   }
   .exam-question-div {
@@ -658,7 +658,7 @@ export default {
         justify-content: space-between;
         align-items: center;
         flex-wrap: nowrap;
-        border-bottom: 1px solid #2878ff;
+        border-bottom: 1px solid #0088e9;
         padding-bottom: 0.25rem;
         height: 1.25rem;
         font-size: 0.65rem;
@@ -669,7 +669,7 @@ export default {
           .exam-question-head-left-icon {
             width: 0.25rem;
             height: 1rem;
-            background-color: #2878ff;
+            background-color: #0088e9;
           }
           .exam-question-head-left-txt {
             margin-left: 0.25rem;
@@ -699,8 +699,8 @@ export default {
           border: 1px solid transparent;
         }
         .exam-question-options-item-checked {
-          border-color: #2878ff;
-          color: #2878ff;
+          border-color: #0088e9;
+          color: #0088e9;
         }
       }
       .exam-question-gapFilling {
@@ -713,7 +713,7 @@ export default {
           border: 1px solid transparent;
           &:active,
           &:focus {
-            border-color: #2878ff;
+            border-color: #0088e9;
           }
         }
       }

+ 1 - 1
src/views/home/exam/page-exam-item-result.vue

@@ -7,7 +7,7 @@
       <van-button
         class="exam-item-detial-button"
         type="primary"
-        color="#2878ff"
+        color="#0088e9"
         @click="handleBackFun"
         >返回</van-button
       >

+ 1 - 1
src/views/home/index.vue

@@ -12,7 +12,7 @@
     </transition>
     <van-tabbar
       v-model="activeTabName"
-      active-color="#2878ff"
+      active-color="#0088e9"
       inactive-color="#808080"
       @change="onChange"
     >

+ 1 - 1
src/views/home/learn/page-learn-child.vue

@@ -138,7 +138,7 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      color: #2878ff;
+      color: #0088e9;
     }
   }
 }

+ 9 - 4
src/views/home/learn/page-learn-content.vue

@@ -118,7 +118,8 @@ export default {
       defaultHeadImg: require("@/assets/image/maleAvatar.jpg"),
       isCollected: false, // 是否被收藏了
       commentList: [], // 评论列表内容
-      commentValue: "" // 即将评论的内容
+      commentValue: "", // 即将评论的内容
+      startStudyInterval: null
     };
   },
   computed: {
@@ -130,6 +131,9 @@ export default {
   mounted() {
     this.getContent();
   },
+  beforeDestroy() {
+    clearInterval(this.startStudyInterval);
+  },
   methods: {
     //   查询具体内容
     getContent() {
@@ -143,6 +147,7 @@ export default {
           this.contentObj = res.data;
           // 开始倒计时
           this.seconds = res.data.readTimeInSec;
+          console.log(res.data);
           this.caculateTime();
           // !!!需要查询该文章是否已被当前用户收藏!!!
           // TODO...
@@ -175,12 +180,12 @@ export default {
     },
     // 方法:获取阅读倒计时
     caculateTime() {
-      var interval = setInterval(() => {
+      this.startStudyInterval = setInterval(() => {
         if (this.seconds > 0) {
           this.seconds--;
         } else {
           Toast("学习完成");
-          clearInterval(interval);
+          clearInterval(this.startStudyInterval);
         }
       }, 1000);
     },
@@ -351,7 +356,7 @@ export default {
       .learn-content-comment-title-icon {
         width: 0.15rem;
         height: 100%;
-        background-color: #2878ff;
+        background-color: #0088e9;
       }
       span {
         font-size: 0.7rem;

+ 56 - 42
src/views/home/person/exam-history.vue

@@ -15,15 +15,24 @@
         <div slot="default" class="contentItemDiv">
           <div class="contentBox">
             <div>
-              <div class="contentItemTitle">{{ item.name || "期中考试" }}</div>
+              <div class="contentItemTitle">{{ item.examName }}</div>
               <div class="contentItemDescription">
-                <div>
-                  考试时间:
-                  {{ formateDateTimeFun(item.startTime) || item.startTime }}
-                </div>
+                考试时间:
+                <span>{{
+                  formateDateTimeFun(item.startTime) || item.startTime
+                }}</span>
               </div>
             </div>
-            <div class="exam-point">{{ item.points }}</div>
+            <div
+              :class="{
+                'exam-point': true,
+                'exam-point-green': item.points >= 90,
+                'exam-point-yellow': item.points >= 60 && item.points < 90,
+                'exam-point-red': item.points < 60
+              }"
+            >
+              {{ item.points }}
+            </div>
           </div>
         </div>
       </van-cell>
@@ -38,14 +47,7 @@ export default {
   components: {},
   data() {
     return {
-      examHistoryList: [
-        { name: "期中考试", time: "2021-02-10", score: "98" },
-        { name: "期中考试", time: "2021-02-10", score: "98" },
-        { name: "期中考试", time: "2021-02-10", score: "98" },
-        { name: "期中考试", time: "2021-02-10", score: "98" },
-        { name: "期中考试", time: "2021-02-10", score: "98" },
-        { name: "期中考试", time: "2021-02-10", score: "98" }
-      ],
+      examHistoryList: [],
       loading: false,
       finished: false
     };
@@ -59,49 +61,49 @@ export default {
     })
   },
   methods: {
+    // 查询:考试记录
     getExamHistory() {
+      this.$store.commit("toggleLoading", true);
       let params = {
         user: this.user.userInfo.userName
       };
       this.$_http
         .get(this.$_API.JTXT_GET_USER_EXAMS_HISTORY, { params })
         .then(res => {
-          this.examHistoryList = res.data;
-          console.log(
-            "--user-exam-history--" + JSON.stringify(this.examHistoryList)
-          );
-          this.finished = true;
+          res.data.forEach((item, index) => {
+            this.getExamDetailFun(item, index, index + 1 === res.data.length);
+          });
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
         });
     },
+    // 查询:某个考试的详情
+    getExamDetailFun(item, index, isLast) {
+      this.$_http
+        .get(
+          this.$pathParams(this.$_API.GET_JTXT_GET_EXAMS_ONE_DETAIL, {
+            examId: item.examId
+          })
+        )
+        .then(res => {
+          this.examHistoryList.push({ ...item, examName: res.data.name });
+          if (isLast) {
+            this.finished = true;
+            this.$store.commit("toggleLoading", false);
+          }
+        })
+        .catch(() => {
+          this.$store.commit("toggleLoading", false);
+        });
+    },
+    // 操作:返回
     onClickLeft() {
       this.$router.back();
     },
     onLoad() {},
     chooseExam(index) {
       console.log("---exam-index---" + index);
-    },
-    formateDateTimeFun(time) {
-      // 获取当前日期
-      let date = new Date(time);
-      // 获取当前月份
-      let nowMonth = date.getMonth() + 1;
-      // 获取当前是几号
-      let strDate = date.getDate();
-      // 添加分隔符“-”
-      let seperator = "-";
-      // 对月份进行处理,1-9月在前面添加一个“0”
-      if (nowMonth >= 1 && nowMonth <= 9) {
-        nowMonth = "0" + nowMonth;
-      }
-      // 对月份进行处理,1-9号在前面添加一个“0”
-      if (strDate >= 0 && strDate <= 9) {
-        strDate = "0" + strDate;
-      }
-      // 最后拼接字符串,得到一个格式为(yyyy-MM-dd)的日期
-      return date.getFullYear() + seperator + nowMonth + seperator + strDate;
     }
   }
 };
@@ -121,13 +123,25 @@ export default {
       font-weight: bold;
     }
     .contentItemDescription {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      margin-top: 0.25rem;
+      color: #afafaf;
+      span {
+        margin-left: 0.5rem;
+      }
     }
     .exam-point {
       font-size: 1rem;
       font-weight: bold;
+      margin-top: 0.25rem;
+    }
+    .exam-point-green {
+      color: green;
+    }
+    .exam-point-yellow {
+      color: yellow;
+    }
+    .exam-point-red {
+      color: red;
     }
   }
 }

+ 1 - 1
src/views/home/person/rank.vue

@@ -21,6 +21,7 @@
                   <van-image
                     class="userHeaderImg"
                     fit="cover"
+                    round
                     :src="maleAvatar"
                     :show-error="true"
                     :error-icon="maleAvatar"
@@ -114,7 +115,6 @@ export default {
     .userHeaderImg {
       width: 2.5rem;
       height: 2.5rem;
-      border-radius: 0.1rem;
       margin-right: 0.5rem;
     }
     .contentBox {