|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<!-- 导航栏 -->
|
|
|
- <van-nav-bar :title="query.vehicle + '>' + query.name" left-arrow @click-left="back" fixed placeholder>
|
|
|
+ <van-nav-bar :title="title" left-arrow @click-left="back" fixed placeholder>
|
|
|
<template #right>
|
|
|
<m-icon type="shezhi" @click="setShow = true" />
|
|
|
</template>
|
|
@@ -147,280 +147,284 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, defineEmits } from "vue";
|
|
|
- import { Dialog } from "vant";
|
|
|
- import { useSubjectShowLogic, useTopicMode, useAudioSet } from "./hooks";
|
|
|
- import { RouterBus } from "@/hooks";
|
|
|
- const {
|
|
|
- route: { query },
|
|
|
- router: { back },
|
|
|
- } = new RouterBus();
|
|
|
+import { ref, defineEmits, computed } from "vue";
|
|
|
+import { Dialog } from "vant";
|
|
|
+import { useSubjectShowLogic, useTopicMode, useAudioSet } from "./hooks";
|
|
|
+import { RouterBus } from "@/hooks";
|
|
|
+const {
|
|
|
+ route: { query },
|
|
|
+ router: { back },
|
|
|
+} = new RouterBus();
|
|
|
|
|
|
- //父级传参
|
|
|
- const props = defineProps<{
|
|
|
- userTestData: {
|
|
|
- testScores: number;
|
|
|
- useTime: number;
|
|
|
- };
|
|
|
- }>();
|
|
|
- const emits = defineEmits(["next", "update:userTestData"]);
|
|
|
+const title = computed(() => {
|
|
|
+ return `(${query.cert})/${query.name}/${query.title}/${query.placeIssueName || query.classIssueName || query.excellIssueName || query.sequeIssueName || ""}`;
|
|
|
+});
|
|
|
|
|
|
- const useTime = ref(0);
|
|
|
- const useTimeChange = (e: any) => {
|
|
|
- useTime.value = 45 * 60 * 1000 - e.total;
|
|
|
+//父级传参
|
|
|
+const props = defineProps<{
|
|
|
+ userTestData: {
|
|
|
+ testScores: number;
|
|
|
+ useTime: number;
|
|
|
};
|
|
|
+}>();
|
|
|
+const emits = defineEmits(["next", "update:userTestData"]);
|
|
|
|
|
|
- //计算分数
|
|
|
- const scoreCalc = () => {
|
|
|
- subjectList.value.forEach((item) => {
|
|
|
- userAnswerChange(item);
|
|
|
- });
|
|
|
- emits("update:userTestData", {
|
|
|
- useTime: useTime.value,
|
|
|
- testScores: (trueNum.value / subjectTotal.value) * 100,
|
|
|
- });
|
|
|
- emits("next");
|
|
|
- };
|
|
|
+const useTime = ref(0);
|
|
|
+const useTimeChange = (e: any) => {
|
|
|
+ useTime.value = 45 * 60 * 1000 - e.total;
|
|
|
+};
|
|
|
+
|
|
|
+//计算分数
|
|
|
+const scoreCalc = () => {
|
|
|
+ subjectList.value.forEach((item) => {
|
|
|
+ userAnswerChange(item);
|
|
|
+ });
|
|
|
+ emits("update:userTestData", {
|
|
|
+ useTime: useTime.value,
|
|
|
+ testScores: (trueNum.value / subjectTotal.value) * 100,
|
|
|
+ });
|
|
|
+ emits("next");
|
|
|
+};
|
|
|
|
|
|
- const gotoTest = () => {
|
|
|
- Dialog.confirm({
|
|
|
- message: "确认交卷吗?",
|
|
|
+const gotoTest = () => {
|
|
|
+ Dialog.confirm({
|
|
|
+ message: "确认交卷吗?",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ scoreCalc();
|
|
|
})
|
|
|
- .then(() => {
|
|
|
- scoreCalc();
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- };
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
|
|
|
- //题目展示逻辑
|
|
|
- const { currentSubject, currentSubjectIndex, subjectTotal, nextSubject, lastSubject, trueNum, falseNum, isJumpNext, subjectList, userAnswerChange } = useSubjectShowLogic();
|
|
|
+//题目展示逻辑
|
|
|
+const { currentSubject, currentSubjectIndex, subjectTotal, nextSubject, lastSubject, trueNum, falseNum, isJumpNext, subjectList, userAnswerChange } = useSubjectShowLogic();
|
|
|
|
|
|
- //设置操作栏
|
|
|
- const setShow = ref(false); //显示设置栏
|
|
|
- const isSoundEffect = ref(true); //答题音效
|
|
|
- //设置操作栏end
|
|
|
+//设置操作栏
|
|
|
+const setShow = ref(false); //显示设置栏
|
|
|
+const isSoundEffect = ref(true); //答题音效
|
|
|
+//设置操作栏end
|
|
|
|
|
|
- //音频模块
|
|
|
- const { subjectAudioPlay } = useAudioSet(currentSubject);
|
|
|
- //音频模块end
|
|
|
+//音频模块
|
|
|
+const { subjectAudioPlay } = useAudioSet(currentSubject);
|
|
|
+//音频模块end
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .dowm-box {
|
|
|
+.dowm-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 10px;
|
|
|
+ position: sticky;
|
|
|
+ top: 45px;
|
|
|
+ font-size: 30px;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.parsing-img {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.function-list {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .function-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ width: 30%;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 10px;
|
|
|
- position: sticky;
|
|
|
- top: 45px;
|
|
|
- font-size: 30px;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
- .parsing-img {
|
|
|
- width: 100%;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .function-list {
|
|
|
- width: 100%;
|
|
|
font-size: 13px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 15px;
|
|
|
- box-sizing: border-box;
|
|
|
- .function-item {
|
|
|
- margin-bottom: 20px;
|
|
|
- width: 30%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 400;
|
|
|
- color: #8a9099;
|
|
|
- span {
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .answerType {
|
|
|
- width: 100%;
|
|
|
- font-size: 13px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding: 15px;
|
|
|
- box-sizing: border-box;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #8a9099;
|
|
|
span {
|
|
|
- border-radius: 20px;
|
|
|
- padding: 3px 10px;
|
|
|
- background-color: #b8c0cc;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .selected {
|
|
|
- background-color: #498ef5;
|
|
|
+ margin-top: 5px;
|
|
|
}
|
|
|
}
|
|
|
- .divider {
|
|
|
- width: 100%;
|
|
|
- height: 10px;
|
|
|
- background-color: #f2f3f5;
|
|
|
+}
|
|
|
+.answerType {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ span {
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 3px 10px;
|
|
|
+ background-color: #b8c0cc;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
- .problem-box {
|
|
|
- font-size: 17px;
|
|
|
- padding: 15px;
|
|
|
- .problem {
|
|
|
- .type {
|
|
|
- width: 47px;
|
|
|
- height: 24px;
|
|
|
- background: #498ef5;
|
|
|
- border-radius: 10px 10px 0px 10px;
|
|
|
- font-size: 11px;
|
|
|
- padding: 2px 7px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #0a1a33;
|
|
|
- letter-spacing: 0.3px;
|
|
|
- }
|
|
|
- .img {
|
|
|
- width: 100%;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
+ .selected {
|
|
|
+ background-color: #498ef5;
|
|
|
+ }
|
|
|
+}
|
|
|
+.divider {
|
|
|
+ width: 100%;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #f2f3f5;
|
|
|
+}
|
|
|
+.problem-box {
|
|
|
+ font-size: 17px;
|
|
|
+ padding: 15px;
|
|
|
+ .problem {
|
|
|
+ .type {
|
|
|
+ width: 47px;
|
|
|
+ height: 24px;
|
|
|
+ background: #498ef5;
|
|
|
+ border-radius: 10px 10px 0px 10px;
|
|
|
+ font-size: 11px;
|
|
|
+ padding: 2px 7px;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
- .answer {
|
|
|
- margin-top: 25px;
|
|
|
+ .text {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0a1a33;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
}
|
|
|
- .answer-box {
|
|
|
- display: flex;
|
|
|
- margin-top: 25px;
|
|
|
- align-items: center;
|
|
|
- .iconTrue {
|
|
|
- background-color: #01c18d;
|
|
|
- }
|
|
|
- .answer-text {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- .true {
|
|
|
- color: #01c18d;
|
|
|
- }
|
|
|
- .false {
|
|
|
- color: #ff4d53;
|
|
|
- }
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
-
|
|
|
- .choose-icon {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 17px;
|
|
|
- box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
|
|
|
- box-sizing: border-box;
|
|
|
- margin-left: 5px;
|
|
|
- margin-top: 1px;
|
|
|
+ }
|
|
|
+ .answer {
|
|
|
+ margin-top: 25px;
|
|
|
+ }
|
|
|
+ .answer-box {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 25px;
|
|
|
+ align-items: center;
|
|
|
+ .iconTrue {
|
|
|
+ background-color: #01c18d;
|
|
|
}
|
|
|
- .selected {
|
|
|
- background-color: #498ef5;
|
|
|
+ .answer-text {
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
- .checkbox-btn {
|
|
|
- width: 266px;
|
|
|
- height: 40px;
|
|
|
- margin: auto;
|
|
|
- margin-top: 25px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
+ .true {
|
|
|
+ color: #01c18d;
|
|
|
}
|
|
|
- .checkbox-answer {
|
|
|
- padding: 8px 10px;
|
|
|
- background-color: #f2f3f5;
|
|
|
- margin-top: 25px;
|
|
|
+ .false {
|
|
|
+ color: #ff4d53;
|
|
|
}
|
|
|
}
|
|
|
- .skills-box {
|
|
|
+
|
|
|
+ .choose-icon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 50%;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
justify-content: center;
|
|
|
- height: 100%;
|
|
|
- .skills {
|
|
|
- width: 290px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 17px;
|
|
|
+ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-top: 1px;
|
|
|
+ }
|
|
|
+ .selected {
|
|
|
+ background-color: #498ef5;
|
|
|
+ }
|
|
|
+ .checkbox-btn {
|
|
|
+ width: 266px;
|
|
|
+ height: 40px;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 25px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .checkbox-answer {
|
|
|
+ padding: 8px 10px;
|
|
|
+ background-color: #f2f3f5;
|
|
|
+ margin-top: 25px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.skills-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ .skills {
|
|
|
+ width: 290px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.16);
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 21px;
|
|
|
+ color: #0a1a33;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 258px;
|
|
|
+ height: 129px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ .divider {
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #0a1a33;
|
|
|
background: #ffffff;
|
|
|
- box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.16);
|
|
|
- border-radius: 10px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 19px;
|
|
|
+ color: #5c6066;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 20px 16px;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 40px;
|
|
|
box-sizing: border-box;
|
|
|
- .title {
|
|
|
- font-size: 15px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 21px;
|
|
|
- color: #0a1a33;
|
|
|
- }
|
|
|
- .img {
|
|
|
- width: 258px;
|
|
|
- height: 129px;
|
|
|
- border: 1px solid #e8e8e8;
|
|
|
- margin-top: 16px;
|
|
|
- }
|
|
|
- .divider {
|
|
|
- margin-top: 20px;
|
|
|
- color: #0a1a33;
|
|
|
- background: #ffffff;
|
|
|
- }
|
|
|
- .text {
|
|
|
+ margin-top: 20px;
|
|
|
+ span {
|
|
|
+ width: 76px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 15px;
|
|
|
font-size: 13px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 19px;
|
|
|
- color: #5c6066;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- width: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 40px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-top: 20px;
|
|
|
- span {
|
|
|
- width: 76px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 15px;
|
|
|
- font-size: 13px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- &:active {
|
|
|
- background-color: #afaaaa;
|
|
|
- filter: brightness(50%);
|
|
|
- }
|
|
|
- &:nth-of-type(1) {
|
|
|
- border: 1px solid #707070;
|
|
|
- color: #5c6066;
|
|
|
- }
|
|
|
- &:nth-of-type(2) {
|
|
|
- background: #498ef5;
|
|
|
- border: 1px solid #498ef5;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &:active {
|
|
|
+ background-color: #afaaaa;
|
|
|
+ filter: brightness(50%);
|
|
|
+ }
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ border: 1px solid #707070;
|
|
|
+ color: #5c6066;
|
|
|
+ }
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ background: #498ef5;
|
|
|
+ border: 1px solid #498ef5;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .submitButton {
|
|
|
- background-color: #498ef5;
|
|
|
- position: fixed;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- bottom: 0;
|
|
|
- width: 80%;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+.submitButton {
|
|
|
+ background-color: #498ef5;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: 0;
|
|
|
+ width: 80%;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
</style>
|