修改样式

src/main.js

@@ -33,7 +33,8 @@ import {
   DropdownMenu,
   DropdownItem,
   Progress,
-  Skeleton
+  Skeleton,
+  Tag
 } from "vant";
 
 window.$_http = axios;
@@ -63,6 +64,7 @@ Vue.component("VanDropdownItem", DropdownItem);
 Vue.component("VanProgress", Progress);
 Vue.component("VanCellGroup", CellGroup);
 Vue.component("VanSkeleton", Skeleton);
+Vue.component("VanTag", Tag);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

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

@@ -11,6 +11,13 @@
             <div class="exam-question-head-left-txt">
               {{ examQuestionList[answerIndex].typeTxt || "undefind" }}
             </div>
+            <van-tag
+              plain
+              type="primary"
+              color="red"
+              v-if="answerRecruitId === 'daily-questions'"
+              >今日必答</van-tag
+            >
             <!-- <span class="exam-question-head-left-txt"
               >{{ examQuestionList[answerIndex].grade || 1 }} 分</span
             > -->
@@ -27,7 +34,7 @@
         <div class="exam-question-describe">
           {{
             examQuestionList[answerIndex].questionContent ||
-              examQuestionList[answerIndex].content
+            examQuestionList[answerIndex].content
           }}
         </div>
         <!-- 答题列表 -->
@@ -35,9 +42,8 @@
         <div
           v-if="
             examQuestionList[answerIndex].type === questionType.TrueOrFalse ||
-              examQuestionList[answerIndex].type ===
-                questionType.singleChoice ||
-              examQuestionList[answerIndex].type === questionType.multipleChoice
+            examQuestionList[answerIndex].type === questionType.singleChoice ||
+            examQuestionList[answerIndex].type === questionType.multipleChoice
           "
           class="exam-question-options"
         >
@@ -48,7 +54,7 @@
               'exam-question-options-item': true,
               'exam-question-options-item-checked': answerValue.includes(item),
               'exam-question-options-false':
-                answerValue.includes(item) && answerStatus === 2
+                answerValue.includes(item) && answerStatus === 2,
             }"
             @click="handleExamQuestionOptionsItemFun(item)"
           >
@@ -73,23 +79,62 @@
             @change="handleExamQuestionOptionsItemFun(inputValue, index)"
           />
         </div>
-        <div class="exam-question-button-box">
-          <van-button
-            v-show="answerStatus === 0"
-            class="exam-question-button"
-            type="primary"
-            color="#0088e9"
-            @click="handleSureFun"
-            >确定</van-button
-          >
-          <van-button
-            v-show="answerStatus === 2"
-            class="exam-question-button"
-            type="primary"
-            color="#0088e9"
-            @click="handleNextFun"
-            >下一题</van-button
-          >
+        <div
+          v-if="answerRecruitId === 'daily-questions'"
+          class="exam-question-button-box"
+        >
+          <div class="exam-question-single-button-box">
+            <van-button
+              v-if="this.answerIndex !== 0"
+              class="exam-question-button"
+              type="primary"
+              color="#0088e9"
+              @click="handleLastFun"
+              >上一题</van-button
+            >
+          </div>
+          <div class="exam-question-single-button-box">
+            <van-button
+              class="exam-question-button"
+              type="primary"
+              color="#0088e9"
+              @click="handleSureFun"
+              >确定</van-button
+            >
+          </div>
+          <div class="exam-question-single-button-box">
+            <van-button
+              v-if="this.answerIndex < this.examQuestionList.length - 1"
+              class="exam-question-button"
+              type="primary"
+              color="#0088e9"
+              @click="handleNextFun"
+              >下一题</van-button
+            >
+          </div>
+        </div>
+        <div v-else class="exam-question-button-box">
+          <div class="exam-question-single-button-box"></div>
+          <div class="exam-question-single-button-box">
+            <van-button
+              v-show="answerStatus === 0"
+              class="exam-question-button"
+              type="primary"
+              color="#0088e9"
+              @click="handleSureFun"
+              >确定</van-button
+            >
+          </div>
+          <div class="exam-question-single-button-box">
+            <van-button
+              v-show="answerStatus === 2"
+              class="exam-question-button"
+              type="primary"
+              color="#0088e9"
+              @click="handleNextFun"
+              >下一题</van-button
+            >
+          </div>
         </div>
       </div>
       <div v-else class="exam-question-card">
@@ -426,6 +471,18 @@ export default {
         nextIndex
       );
     },
+    // 操作：上一题
+    handleLastFun() {
+      let nextIndex = this.answerIndex - 1;
+      if (nextIndex >= this.examQuestionList.length) {
+        this.examsEndFun(); // 结束考试
+        return;
+      }
+      this.handleExamQuestionItemFun(
+        this.examQuestionList[nextIndex],
+        nextIndex
+      );
+    },
     // 方法：结束考试
     examsEndFun() {
       let curTime = new Date();
@@ -528,6 +585,7 @@ export default {
           }
           .exam-question-head-left-txt {
             margin-left: 0.25rem;
+            margin-right: 0.25rem;
             font-weight: bold;
           }
         }
@@ -584,15 +642,23 @@ export default {
       }
       .exam-question-button-box {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         justify-content: center;
         align-items: center;
-        .exam-question-button {
-          width: 6rem;
-          height: auto;
+        .exam-question-single-button-box {
+          width: 30%;
           padding: 0.5rem 0.5rem;
-          font-size: 0.65rem;
-          margin-top: 0.75rem;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          .exam-question-button {
+            width: 6rem;
+            height: auto;
+            padding: 0.5rem 0.5rem;
+            font-size: 0.65rem;
+            margin-top: 0.75rem;
+          }
         }
       }
       .exam-question-result {

src/views/home/answer/page-answer.vue

@@ -18,6 +18,7 @@
             <div>{{ item.title[0] }}</div>
             <div>{{ item.title[1] }}</div>
           </div>
+          <div class="answer-practice-item-type-name">{{ item.type.name }}</div>
         </div>
       </div>
     </div>
@@ -65,17 +66,20 @@ export default {
         {
           id: 1,
           url: require("@/assets/image/answer/01.png"),
-          title: ["不积跬步", "无以至千里"]
+          title: ["不积跬步", "无以至千里"],
+          type: { name: "今日答题", code: "daily-questions" }
         },
         {
           id: 2,
           url: require("@/assets/image/answer/02.png"),
-          title: ["周而复始", "方得始终"]
+          title: ["周而复始", "方得始终"],
+          type: { name: "每周答题", code: "weekly-questions" }
         },
         {
           id: 3,
           url: require("@/assets/image/answer/03.png"),
-          title: ["闻道有先后", "术业有专攻"]
+          title: ["闻道有先后", "术业有专攻"],
+          type: { name: "专项答题", code: "daily-questions" }
         }
       ];
     },
@@ -96,19 +100,9 @@ export default {
     },
     // 操作：点击了答题练习中的某个
     handleClickAnswerPracticeFun(item) {
-      // switch (item.id) {
-      //   case this.answerPracticeList[0].id:
-      //     break;
-      //   case this.answerPracticeList[1].id:
-      //     break;
-      //   case this.answerPracticeList[2].id:
-      //     break;
-      //   default:
-      //     break;
-      // }
       this.$store.commit("updateAnswerItemStore", {
         field: "answerRecruitId",
-        value: "daily-questions" // item.id
+        value: item.type.code // item.id
       });
       this.$router.push({ name: "answerRecruit" });
     },
@@ -170,6 +164,11 @@ export default {
           font-size: 0.6rem;
           margin-top: 0.25rem;
         }
+        .answer-practice-item-type-name {
+          font-size: 0.7rem;
+          font-weight: bold;
+          margin: 0.3rem;
+        }
       }
     }
   }

src/views/home/person/page-person.vue

@@ -51,7 +51,7 @@
         <div
           :class="{
             'menu-card-item': true,
-            'menu-card-item-border': index !== 0 && index !== 4
+            'menu-card-item-border': index !== 0 && index !== 4,
           }"
           v-for="(item, index) in menus"
           :key="index"
@@ -88,16 +88,16 @@ export default {
       faceUrl: "",
       menus: [
         {
-          title: "考试成绩",
+          title: "学习积分",
           icon: "photo-o",
-          to: "exam-history",
-          src: require("@/assets/image/personal/testScore.png")
+          to: "user-manual",
+          src: require("@/assets/image/personal/manual.png")
         },
         {
-          title: "收藏",
+          title: "考试积分",
           icon: "photo-o",
-          to: "collection",
-          src: require("@/assets/image/personal/collect.png")
+          to: "exam-history",
+          src: require("@/assets/image/personal/testScore.png")
         },
         {
           title: "排行榜",
@@ -106,17 +106,18 @@ export default {
           src: require("@/assets/image/personal/leaderboard .png")
         },
         {
-          title: "学习积分",
-          icon: "photo-o",
-          to: "user-manual",
-          src: require("@/assets/image/personal/manual.png")
-        },
-        {
-          title: "积分兑换",
+          title: "收藏",
           icon: "photo-o",
-          to: "",
-          src: require("@/assets/image/personal/redeem.png")
+          to: "collection",
+          src: require("@/assets/image/personal/collect.png")
         }
+
+        // {
+        //   title: "积分兑换",
+        //   icon: "photo-o",
+        //   to: "",
+        //   src: require("@/assets/image/personal/redeem.png")
+        // }
         // { title: "我要编辑", icon: "photo-o", to: "", src: require("@/assets/image/personal/toEdit.png")  }
       ]
     };