修改样式,新增答题错误自动打开技巧讲解

src/components/m-exercise/index.vue

@@ -203,9 +203,9 @@
 </template>
 
 <script lang="ts" setup>
-	import { ref, defineProps } from 'vue';
-	import { useTopicMode, useAudioSet, useSubjectShowLogic } from '@/hooks/exercise';
-	import { RouterBus } from '@/hooks';
+	import { ref, defineProps } from "vue";
+	import { useTopicMode, useAudioSet, useSubjectShowLogic } from "@/hooks/exercise";
+	import { RouterBus } from "@/hooks";
 	const {
 		router: { back },
 		route: { query },
@@ -218,9 +218,6 @@
 	//答题模式选择逻辑
 	const { answerTypeList, currentType, typeParams } = useTopicMode();
 
-	const skillsShow = ref(false); //显示技巧讲解
-	const officialShow = ref(false); //显示官方解释
-
 	//设置操作栏
 	/**显示设置栏 */
 	const setShow = ref(false);
@@ -228,7 +225,7 @@
 	const isSoundEffect = ref(true);
 
 	//题目展示逻辑
-	const { currentSubject, currentSubjectIndex, subjectTotal, nextSubject, lastSubject, trueNum, falseNum, isJumpNext, userAnswerChange, addCurrentQuestion } = useSubjectShowLogic(props.listType);
+	const { currentSubject, currentSubjectIndex, subjectTotal, nextSubject, lastSubject, trueNum, falseNum, isJumpNext, userAnswerChange, addCurrentQuestion, skillsShow, officialShow } = useSubjectShowLogic(props.listType);
 
 	//音频模块
 	const { aotuPlayFlag, subjectAudioPlay, aotuPlaySet } = useAudioSet(currentSubject);

src/hooks/exercise/index.ts

@@ -1,8 +1,8 @@
-import { ref } from 'vue';
-export { useTopicMode } from './mode';
-export { useAudioSet } from './audio';
-import { useSubjectList } from './list';
-import { useSubjectCheck } from './wrong';
+import { ref } from "vue";
+export { useTopicMode } from "./mode";
+export { useAudioSet } from "./audio";
+import { useSubjectList } from "./list";
+import { useSubjectCheck } from "./wrong";
 
 export const useSubjectShowLogic = (type: ExerciseType.ListType) => {
 	const { subjectList, subjectTotal, loadNewSubject, currentSubject, currentSubjectIndex } = useSubjectList(type); //获取题目列表
@@ -31,7 +31,7 @@ export const useSubjectShowLogic = (type: ExerciseType.ListType) => {
 		currentSubjectIndex.value > 0 && currentSubjectIndex.value--;
 	};
 
-	const { trueNum, falseNum, isJumpNext, userAnswerChange, addCurrentQuestion } = useSubjectCheck(currentSubject, nextSubject);
+	const { trueNum, falseNum, isJumpNext, userAnswerChange, addCurrentQuestion, skillsShow, officialShow } = useSubjectCheck(currentSubject, nextSubject);
 
 	return {
 		currentSubject,
@@ -44,5 +44,7 @@ export const useSubjectShowLogic = (type: ExerciseType.ListType) => {
 		isJumpNext,
 		userAnswerChange,
 		addCurrentQuestion,
+		skillsShow,
+		officialShow,
 	};
 };

src/hooks/exercise/wrong.ts

@@ -1,92 +1,97 @@
-import { ref, watch, onBeforeMount, Ref, computed, nextTick, ComputedRef } from 'vue';
-import { CollectionModel } from '@/dataModel/collection';
-import { RouterBus } from '@/hooks';
-import { Notify } from 'vant';
+import { ref, watch, onBeforeMount, Ref, computed, nextTick, ComputedRef } from "vue";
+import { CollectionModel } from "@/dataModel/collection";
+import { RouterBus } from "@/hooks";
+import { Notify } from "vant";
 
 /**错题与收藏 */
 export const useSubjectCheck = (currentSubject: ComputedRef<any>, nextSubject: () => Promise<void>) => {
-    const trueNum = ref(0); //正确数量
-    const falseNum = ref(0); //错误数量
-    const isJumpNext = ref(false); //答对跳转下一题
-    const wrongModel = new CollectionModel('wrong');
-    const collectionModel = new CollectionModel('collection');
-    const {
-        route: { query },
-    } = new RouterBus();
+	const trueNum = ref(0); //正确数量
+	const falseNum = ref(0); //错误数量
+	const skillsShow = ref(false); //显示技巧讲解
+	const officialShow = ref(false); //显示官方解释
+	const isJumpNext = ref(false); //答对跳转下一题
+	const wrongModel = new CollectionModel("wrong");
+	const collectionModel = new CollectionModel("collection");
+	const {
+		route: { query },
+	} = new RouterBus();
 
-    /** 批量新增收藏 */
-    const addsCullection = async (ids: number[]) => {
-        const questionList = ids.map((id) => {
-            return {
-                carType: query.vehicle as CollectionAndWrongType.CarType,
-                km: query.name as CollectionAndWrongType.Km,
-                questionId: id,
-            };
-        });
-        collectionModel.adds(questionList);
-    };
+	/** 批量新增收藏 */
+	const addsCullection = async (ids: number[]) => {
+		const questionList = ids.map((id) => {
+			return {
+				carType: query.vehicle as CollectionAndWrongType.CarType,
+				km: query.name as CollectionAndWrongType.Km,
+				questionId: id,
+			};
+		});
+		collectionModel.adds(questionList);
+	};
 
-    /** 收藏当前题目 */
-    const addCurrentQuestion = async () => {
-        const res = await collectionModel.adds([
-            {
-                carType: query.vehicle as CollectionAndWrongType.CarType,
-                km: query.name as CollectionAndWrongType.Km,
-                questionId: currentSubject.value.id,
-            },
-        ]);
-        if (res.data == 1) {
-            currentSubject.value.isCollection = true;
-            Notify({ type: 'success', message: '收藏成功' });
-        } else {
-            currentSubject.value.isCollection = true;
-            Notify({ type: 'primary', message: res.msg });
-        }
-    };
-    /**
-     * 选择答案后进行校验
-     */
-    const userAnswerChange = () => {
-        currentSubject.value.optsBack = currentSubject.value.opts.map((val: String) => {
-            let status;
-            if (currentSubject.value.answer.includes(val)) {
-                status = 1;
-            } else {
-                status = 0;
-            }
-            if (currentSubject.value.userAnswer.includes(val)) {
-                status += 2;
-            }
-            return { opt: val, status };
-        });
-        if (JSON.stringify(currentSubject.value.answer) == JSON.stringify(currentSubject.value.userAnswer)) {
-            //答案正确
-            currentSubject.value.isTrue = true;
-            trueNum.value++;
-            if (isJumpNext.value) {
-                nextTick(() => {
-                    nextSubject();
-                });
-            }
-        } else {
-            //答案错误
-            wrongModel.adds([
-                {
-                    carType: query.vehicle as CollectionAndWrongType.CarType,
-                    km: query.name as CollectionAndWrongType.Km,
-                    questionId: currentSubject.value.id,
-                },
-            ]);
-            currentSubject.value.isTrue = false;
-            falseNum.value++;
-        }
-    };
+	/** 收藏当前题目 */
+	const addCurrentQuestion = async () => {
+		const res = await collectionModel.adds([
+			{
+				carType: query.vehicle as CollectionAndWrongType.CarType,
+				km: query.name as CollectionAndWrongType.Km,
+				questionId: currentSubject.value.id,
+			},
+		]);
+		if (res.data == 1) {
+			currentSubject.value.isCollection = true;
+			Notify({ type: "success", message: "收藏成功" });
+		} else {
+			currentSubject.value.isCollection = true;
+			Notify({ type: "primary", message: res.msg });
+		}
+	};
+	/**
+	 * 选择答案后进行校验
+	 */
+	const userAnswerChange = () => {
+		currentSubject.value.optsBack = currentSubject.value.opts.map((val: String) => {
+			let status;
+			if (currentSubject.value.answer.includes(val)) {
+				status = 1;
+			} else {
+				status = 0;
+			}
+			if (currentSubject.value.userAnswer.includes(val)) {
+				status += 2;
+			}
+			return { opt: val, status };
+		});
+		if (JSON.stringify(currentSubject.value.answer) == JSON.stringify(currentSubject.value.userAnswer)) {
+			//答案正确
+			currentSubject.value.isTrue = true;
+			trueNum.value++;
+			if (isJumpNext.value) {
+				nextTick(() => {
+					nextSubject();
+				});
+			}
+		} else {
+			//答案错误
+			wrongModel.adds([
+				{
+					carType: query.vehicle as CollectionAndWrongType.CarType,
+					km: query.name as CollectionAndWrongType.Km,
+					questionId: currentSubject.value.id,
+				},
+			]);
+			currentSubject.value.isTrue = false;
+			skillsShow.value = true;
+			falseNum.value++;
+		}
+	};
 
-    return {
-        trueNum,
-        falseNum,
-        isJumpNext,
-        userAnswerChange,
-        addCurrentQuestion,
-    };
+	return {
+		trueNum,
+		skillsShow,
+		officialShow,
+		falseNum,
+		isJumpNext,
+		userAnswerChange,
+		addCurrentQuestion,
+	};
 };

src/views/home/children/test/components/sujectOne.vue

@@ -21,7 +21,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="divide"></div>
+			<!-- <div class="divide"></div> -->
 		</div>
 	</div>
 </template>

src/views/home/children/test/index.vue

@@ -1,213 +1,196 @@
 <template>
-  <!-- 用户信息展示 -->
-  <userData />
-  <!-- 轮播图 -->
-  <!-- <swiper /> -->
-  <!-- 用户做题预选界面 -->
-  <van-tabs
-    class="car-type"
-    line-width="0"
-    animated
-    ref="carTypeRef"
-    @click="carTypeChange"
-  >
-    <van-tab
-      v-for="(carTypeItem, index) in carTypeList"
-      :key="index"
-      :name="carTypeItem.name"
-    >
-      <template #title>
-        <div class="car-choose">
-          <m-icon :type="carTypeItem.icon" class="img" />
-          <span>{{ carTypeItem.cert }}</span>
-          <span>{{ carTypeItem.name }}</span>
-        </div>
-      </template>
-      <van-tabs class="test-type" animated>
-        <van-tab
-          :title="sujectItem.name"
-          v-for="(sujectItem, index) in carTypeItem.sujectList"
-          :key="index"
-          :name="sujectItem.name"
-        >
-          <component
-            :is="sujectOne"
-            :query="{ ...carTypeItem.query, ...sujectItem.query }"
-          ></component>
-        </van-tab>
-      </van-tabs>
-    </van-tab>
-  </van-tabs>
+	<!-- 用户信息展示 -->
+	<userData />
+	<!-- 轮播图 -->
+	<swiper />
+	<!-- 用户做题预选界面 -->
+	<van-tabs class="car-type" line-width="0" animated ref="carTypeRef" @click="carTypeChange">
+		<van-tab v-for="(carTypeItem, index) in carTypeList" :key="index" :name="carTypeItem.name">
+			<template #title>
+				<div class="car-choose">
+					<m-icon :type="carTypeItem.icon" class="img" />
+					<span>{{ carTypeItem.cert }}</span>
+					<span>{{ carTypeItem.name }}</span>
+				</div>
+			</template>
+			<van-tabs class="test-type" animated>
+				<van-tab :title="sujectItem.name" v-for="(sujectItem, index) in carTypeItem.sujectList" :key="index" :name="sujectItem.name">
+					<component :is="sujectOne" :query="{ ...carTypeItem.query, ...sujectItem.query }"></component>
+				</van-tab>
+			</van-tabs>
+		</van-tab>
+	</van-tabs>
 </template>
 
 <script lang="ts" setup>
-import sujectOne from "./components/sujectOne.vue";
-import userData from "./components/userData.vue";
-import { ref, nextTick, onBeforeMount } from "vue";
-import { useStore } from "vuex";
-const store = useStore();
+	import sujectOne from "./components/sujectOne.vue";
+	import userData from "./components/userData.vue";
+	import swiper from "./components/swiper.vue";
+	import { ref, nextTick, onBeforeMount } from "vue";
+	import { useStore } from "vuex";
+	const store = useStore();
 
-const carTypeRef = ref<any>(null);
-nextTick(() => {
-  carTypeRef.value.scrollTo(store.state.carType);
-});
+	const carTypeRef = ref<any>(null);
+	nextTick(() => {
+		carTypeRef.value.scrollTo(store.state.carType);
+	});
 
-const carTypeChange = (e: string) => {
-  store.commit("setCatType", e);
-};
+	const carTypeChange = (e: string) => {
+		store.commit("setCatType", e);
+	};
 
-const carTypeList = ref([
-  {
-    name: "轿车",
-    cert: "C1/C2/C3",
-    icon: "jiaoche",
-    query: { liceCar: 1 },
-    sujectList: [
-      {
-        name: "科目一",
-        query: {
-          name: "科目一",
-          cert: "C1/C2/C3",
-          vehicle: "小车",
-          subject: 1,
-        },
-      },
-      {
-        name: "科目四",
-        query: {
-          name: "科目四",
-          cert: "C1/C2/C3",
-          vehicle: "小车",
-          subject: 4,
-        },
-      },
-    ],
-  },
-  {
-    name: "客车",
-    cert: "A1/A3/B1",
-    icon: "keche",
-    query: { liceBus: 1 },
-    sujectList: [
-      {
-        name: "科目一",
-        query: {
-          name: "科目一",
-          cert: "A1/A3/B1",
-          vehicle: "客车",
-          subject: 1,
-        },
-      },
-      {
-        name: "科目四",
-        query: {
-          name: "科目四",
-          cert: "A1/A3/B1",
-          vehicle: "客车",
-          subject: 4,
-        },
-      },
-    ],
-  },
-  {
-    name: "货车",
-    cert: "A2/B2",
-    icon: "huoche",
-    query: { liceTruck: 1 },
-    sujectList: [
-      {
-        name: "科目一",
-        query: {
-          name: "科目一",
-          cert: "A2/B2",
-          vehicle: "货车",
-          subject: 1,
-        },
-      },
-      {
-        name: "科目四",
-        query: {
-          name: "科目四",
-          cert: "A2/B2",
-          vehicle: "货车",
-          subject: 4,
-        },
-      },
-    ],
-  },
-  {
-    name: "摩托车",
-    cert: "D/E/F",
-    icon: "motuoche",
-    query: { liceMoto: 1 },
-    sujectList: [
-      {
-        name: "科目一",
-        query: {
-          name: "科目一",
-          cert: "D/E/F",
-          vehicle: "摩托车",
-          subject: 1,
-        },
-      },
-      {
-        name: "科目四",
-        query: {
-          name: "科目四",
-          cert: "D/E/F",
-          vehicle: "摩托车",
-          subject: 4,
-        },
-      },
-    ],
-  },
-]);
+	const carTypeList = ref([
+		{
+			name: "轿车",
+			cert: "C1/C2/C3",
+			icon: "jiaoche",
+			query: { liceCar: 1 },
+			sujectList: [
+				{
+					name: "科目一",
+					query: {
+						name: "科目一",
+						cert: "C1/C2/C3",
+						vehicle: "小车",
+						subject: 1,
+					},
+				},
+				{
+					name: "科目四",
+					query: {
+						name: "科目四",
+						cert: "C1/C2/C3",
+						vehicle: "小车",
+						subject: 4,
+					},
+				},
+			],
+		},
+		{
+			name: "客车",
+			cert: "A1/A3/B1",
+			icon: "keche",
+			query: { liceBus: 1 },
+			sujectList: [
+				{
+					name: "科目一",
+					query: {
+						name: "科目一",
+						cert: "A1/A3/B1",
+						vehicle: "客车",
+						subject: 1,
+					},
+				},
+				{
+					name: "科目四",
+					query: {
+						name: "科目四",
+						cert: "A1/A3/B1",
+						vehicle: "客车",
+						subject: 4,
+					},
+				},
+			],
+		},
+		{
+			name: "货车",
+			cert: "A2/B2",
+			icon: "huoche",
+			query: { liceTruck: 1 },
+			sujectList: [
+				{
+					name: "科目一",
+					query: {
+						name: "科目一",
+						cert: "A2/B2",
+						vehicle: "货车",
+						subject: 1,
+					},
+				},
+				{
+					name: "科目四",
+					query: {
+						name: "科目四",
+						cert: "A2/B2",
+						vehicle: "货车",
+						subject: 4,
+					},
+				},
+			],
+		},
+		{
+			name: "摩托车",
+			cert: "D/E/F",
+			icon: "motuoche",
+			query: { liceMoto: 1 },
+			sujectList: [
+				{
+					name: "科目一",
+					query: {
+						name: "科目一",
+						cert: "D/E/F",
+						vehicle: "摩托车",
+						subject: 1,
+					},
+				},
+				{
+					name: "科目四",
+					query: {
+						name: "科目四",
+						cert: "D/E/F",
+						vehicle: "摩托车",
+						subject: 4,
+					},
+				},
+			],
+		},
+	]);
 </script>
 
 <style lang="scss">
-.car-type {
-  margin: 21px 15px;
-  --van-tabs-line-height: 88px;
-  .van-tab--active {
-    .car-choose {
-      &::after {
-        content: "";
-        width: 100%;
-        height: 78px;
-        background-color: royalblue;
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0.2;
-      }
-      &::before {
-        content: "";
-        width: 0px;
-        height: 0px;
-        border: 10px solid #000;
-        border-top-color: royalblue;
-        border-bottom-color: transparent;
-        border-left-color: transparent;
-        border-right-color: transparent;
-        position: absolute;
-        bottom: 0;
-        transform: translateY(50%);
-        opacity: 0.2;
-      }
-    }
-  }
-  .test-type {
-    --van-tabs-line-height: 44px;
-  }
-  .car-choose {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    .img {
-      width: 66px;
-      height: 22px;
-    }
-  }
-}
+	.car-type {
+		margin: 21px 15px;
+		--van-tabs-line-height: 88px;
+		.van-tab--active {
+			.car-choose {
+				&::after {
+					content: "";
+					width: 100%;
+					height: 78px;
+					background-color: royalblue;
+					position: absolute;
+					top: 0;
+					left: 0;
+					opacity: 0.2;
+				}
+				&::before {
+					content: "";
+					width: 0px;
+					height: 0px;
+					border: 10px solid #000;
+					border-top-color: royalblue;
+					border-bottom-color: transparent;
+					border-left-color: transparent;
+					border-right-color: transparent;
+					position: absolute;
+					bottom: 0;
+					transform: translateY(50%);
+					opacity: 0.2;
+				}
+			}
+		}
+		.test-type {
+			--van-tabs-line-height: 44px;
+		}
+		.car-choose {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+			.img {
+				width: 66px;
+				height: 22px;
+			}
+		}
+	}
 </style>

src/views/home/children/user/index.vue

@@ -1,96 +1,79 @@
 <template>
-  <div class="user">
-    <van-cell label="未绑定手机号" is-link center @click="showVConsole">
-      <template #icon>
-        <m-user-avatar class="user-avatar" />
-      </template>
-      <template #title>
-        <m-user-name />
-      </template>
-    </van-cell>
-    <van-cell-group class="group">
-      <van-cell title="我要提现" value="" is-link center @click="goCashOut">
-        <template #icon>
-          <m-icon type="hyyxq" class="cell-icon" />
-        </template>
-      </van-cell>
-      <van-cell title="我的下级" value="" is-link center @click="goMyBranch">
-        <template #icon>
-          <m-icon type="hyyxq" class="cell-icon" />
-        </template>
-      </van-cell>
-      <van-cell
-        title="会员有效期"
-        :value="expireTime ? expireTime : '开通会员'"
-        is-link
-        center
-        @click="goBuyVip"
-      >
-        <template #icon>
-          <m-icon type="huiyuan" class="cell-icon" />
-        </template>
-      </van-cell>
-    </van-cell-group>
-    <van-cell-group class="group">
-      <van-cell
-        title="0.01捐款（内部专用）"
-        is-link
-        center
-        @click="loopPrepareOrder"
-        v-if="isZhangbing"
-      >
-        <template #icon>
-          <m-icon type="bbgx" class="cell-icon" />
-        </template>
-      </van-cell>
-      <van-cell
-        title="反馈帮助"
-        is-link
-        center
-        url="https://support.qq.com/product/359609"
-      >
-        <template #icon>
-          <m-icon type="fkbz" class="cell-icon" />
-        </template>
-      </van-cell>
-    </van-cell-group>
-  </div>
+	<div class="user">
+		<van-cell label="未绑定手机号" is-link center @click="showVConsole">
+			<template #icon>
+				<m-user-avatar class="user-avatar" />
+			</template>
+			<template #title>
+				<m-user-name />
+			</template>
+		</van-cell>
+		<van-cell-group class="group">
+			<van-cell title="我要提现" value="" is-link center @click="goCashOut">
+				<template #icon>
+					<m-icon type="hyyxq" class="cell-icon" />
+				</template>
+			</van-cell>
+			<van-cell title="我的下级" value="" is-link center @click="goMyBranch">
+				<template #icon>
+					<m-icon type="hyyxq" class="cell-icon" />
+				</template>
+			</van-cell>
+			<van-cell title="会员有效期" :value="expireTime ? expireTime : '开通会员'" is-link center @click="goBuyVip">
+				<template #icon>
+					<m-icon type="huiyuan" class="cell-icon" />
+				</template>
+			</van-cell>
+		</van-cell-group>
+		<van-cell-group class="group">
+			<van-cell title="0.01捐款（内部专用）" is-link center @click="loopPrepareOrder" v-if="isZhangbing">
+				<template #icon>
+					<m-icon type="bbgx" class="cell-icon" />
+				</template>
+			</van-cell>
+			<van-cell title="反馈帮助" is-link center url="https://support.qq.com/product/359609">
+				<template #icon>
+					<m-icon type="fkbz" class="cell-icon" />
+				</template>
+			</van-cell>
+		</van-cell-group>
+	</div>
 </template>
 
 <script lang="ts">
-import { useExpireTime, RouterBus, useOpenIdIsZhangbing } from "@/hooks";
-import VConsole from "vconsole";
+	import { useExpireTime, RouterBus, useOpenIdIsZhangbing } from "@/hooks";
+	import VConsole from "vconsole";
 </script>
 
 <script lang="ts" setup>
-import { loopPrepareOrder } from "@/api";
-const { expireTime } = useExpireTime();
-const { goBuyVip, goCashOut, goMyBranch } = new RouterBus();
-let doubleClickNumber = 0;
-const showVConsole = () => {
-  if (doubleClickNumber !== 9) {
-    doubleClickNumber = (doubleClickNumber + 1) % 10;
-  } else {
-    let vconsole = new VConsole();
-  }
-};
-const { isZhangbing } = useOpenIdIsZhangbing();
+	import { loopPrepareOrder } from "@/api";
+	const { expireTime } = useExpireTime();
+	const { goBuyVip, goCashOut, goMyBranch } = new RouterBus();
+	let doubleClickNumber = 0;
+	const showVConsole = () => {
+		if (doubleClickNumber !== 9) {
+			doubleClickNumber = (doubleClickNumber + 1) % 10;
+		} else {
+			let vconsole = new VConsole();
+		}
+	};
+	const { isZhangbing } = useOpenIdIsZhangbing();
 </script>
 
 <style scoped lang="scss">
-.user {
-  background-color: #f2f3f5;
-  height: 100vh;
-  .group {
-    margin: 10px 0;
-  }
-  .user-avatar {
-    width: 46px;
-    height: 46px;
-    margin-right: 10px;
-  }
-}
-.cell-icon {
-  margin-right: 5px;
-}
+	.user {
+		background-color: #f2f3f5;
+		/* height: 100vh; */
+		.group {
+			margin: 10px 0;
+		}
+		.user-avatar {
+			width: 46px;
+			height: 46px;
+			margin-right: 10px;
+		}
+	}
+	.cell-icon {
+		margin-right: 5px;
+	}
 </style>

src/views/home/index.vue

@@ -1,31 +1,33 @@
 <template>
-  <router-view></router-view>
-  <van-tabbar fixed :safe-area-inset-bottom="true" route>
-    <van-tabbar-item to="/home/test" icon="home-o"
-      >驾考
-      <template #icon="props">
-        <m-icon :type="props.active ? 'jiakao' : 'jiakaohui'" />
-      </template>
-    </van-tabbar-item>
-    <van-tabbar-item to="/home/user" icon="friends-o"
-      >我的
-      <template #icon="props">
-        <m-icon :type="props.active ? 'wode' : 'wodehui'" />
-      </template>
-    </van-tabbar-item>
-  </van-tabbar>
+	<div class="home">
+		<router-view></router-view>
+		<van-tabbar fixed :safe-area-inset-bottom="true" route placeholder>
+			<van-tabbar-item to="/home/test" icon="home-o"
+				>驾考
+				<template #icon="props">
+					<m-icon :type="props.active ? 'jiakao' : 'jiakaohui'" />
+				</template>
+			</van-tabbar-item>
+			<van-tabbar-item to="/home/user" icon="friends-o"
+				>我的
+				<template #icon="props">
+					<m-icon :type="props.active ? 'wode' : 'wodehui'" />
+				</template>
+			</van-tabbar-item>
+		</van-tabbar>
+	</div>
 </template>
 
 <script lang="ts" setup></script>
 
 <style scoped lang="scss">
-.my-swipe {
-  background-color: red;
-  width: 345px;
-  height: 100px;
-  margin: auto;
-}
-.iconActive {
-  fill: #ffffff;
-}
+	.my-swipe {
+		background-color: red;
+		width: 345px;
+		height: 100px;
+		margin: auto;
+	}
+	.iconActive {
+		fill: #ffffff;
+	}
 </style>