拆分练习组件,改用jsx

src/api/modules/auth.ts

@@ -1,4 +1,5 @@
 import request from "../request";
+import { AxiosPromise } from "axios";
 import { LocationQueryValue } from "vue-router";
 
 interface loginRes {
@@ -13,6 +14,24 @@ interface loginRes {
 	};
 }
 
+class Auth {
+	/**微信code登陆 */
+	login(code: string): AxiosPromise<loginRes> {
+		return request({
+			url: "/login/code",
+			method: "post",
+			headers: {
+				isToken: false,
+			},
+			params: {
+				authorizationCode: code,
+			},
+		});
+	}
+}
+
+export const auth = new Auth();
+
 /**
  *
  * @param code 微信code

src/components/m-exercise/components/bottomBar.vue

@@ -0,0 +1,91 @@
+<script lang="tsx">
+	import { defineComponent } from "vue";
+	export default defineComponent({
+		props: {
+			currentSubjectIndex: {
+				type: Number,
+				default: 0,
+			},
+			subjectTotal: {
+				type: Number,
+				default: 0,
+			},
+			trueNum: {
+				type: Number,
+				default: 0,
+			},
+			falseNum: {
+				type: Number,
+				default: 0,
+			},
+			officialShow: Boolean,
+			showSubjectChangePopup: Boolean,
+		},
+		emits: {
+			"update:officialShow": (value: boolean) => {
+				return value;
+			},
+			"update:showSubjectChangePopup": (value: boolean) => {
+				return value;
+			},
+			nextSubject: () => {},
+			lastSubject: () => {},
+		},
+		setup(props, { emit }) {
+			return () => {
+				return (
+					<van-tabbar placeholder route>
+						<van-tabbar-item
+							onClick={() => {
+								emit("lastSubject");
+							}}
+							v-slots={{
+								icon: () => <m-icon type="shangyiti" />,
+							}}>
+							上一题
+						</van-tabbar-item>
+						<van-tabbar-item
+							v-slots={{
+								icon: () => <m-icon type="dui" />,
+							}}>
+							{props.trueNum}
+						</van-tabbar-item>
+						<van-tabbar-item
+							v-slots={{
+								icon: () => <m-icon type="cuo" />,
+							}}>
+							{props.falseNum}
+						</van-tabbar-item>
+						<van-tabbar-item
+							onClick={() => {
+								emit("update:showSubjectChangePopup", true);
+							}}
+							v-slots={{
+								icon: () => <m-icon type="zongtishu" />,
+							}}>
+							{props.currentSubjectIndex + 1}/{props.subjectTotal}
+						</van-tabbar-item>
+						<van-tabbar-item
+							onClick={() => {
+								emit("update:officialShow", true);
+							}}
+							v-slots={{
+								icon: () => <m-icon type="gfjs" />,
+							}}>
+							官方解释
+						</van-tabbar-item>
+						<van-tabbar-item
+							onClick={() => {
+								emit("nextSubject");
+							}}
+							v-slots={{
+								icon: () => <m-icon type="xiayiti" />,
+							}}>
+							下一题
+						</van-tabbar-item>
+					</van-tabbar>
+				);
+			};
+		},
+	});
+</script>

src/components/m-exercise/components/explainJq.vue

@@ -0,0 +1,123 @@
+<script lang="tsx">
+	import { defineComponent } from "vue";
+	export default defineComponent({
+		props: {
+			currentSubject: Object as any,
+			skillsShow: Boolean,
+		},
+		emits: {
+			subjectAudioPlay: (type: "读题" | "读官方解释" | "读技巧解释" | "读题+答案") => {
+				return undefined;
+			},
+			"update:skillsShow": (value: boolean) => {
+				return value;
+			},
+		},
+		setup(props, { emit }) {
+			return () => {
+				return (
+					<van-overlay show={props.skillsShow} z-index="10">
+						<div class="skills-box">
+							<div class="skills">
+								<div class="title">技巧讲解</div>
+								{!!props.currentSubject.explainGif && <img src={props.currentSubject.explainGif} class="img" />}
+								<van-divider class="divider">本题速记口诀</van-divider>
+								<div class="text">{props.currentSubject.explainJq}</div>
+								<div class="btn">
+									<span
+										onClick={() => {
+											emit("update:skillsShow", false);
+										}}>
+										关闭
+									</span>
+									<span
+										onClick={() => {
+											emit("subjectAudioPlay", "读技巧解释");
+										}}>
+										语音重播
+									</span>
+								</div>
+							</div>
+						</div>
+					</van-overlay>
+				);
+			};
+		},
+	});
+</script>
+
+<style lang="scss">
+	.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;
+			}
+			.text {
+				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;
+					}
+				}
+			}
+		}
+	}
+</style>

src/components/m-exercise/components/explainJs.vue

@@ -0,0 +1,121 @@
+<script lang="tsx">
+	import { defineComponent } from "vue";
+	export default defineComponent({
+		props: {
+			currentSubject: Object as any,
+			officialShow: Boolean,
+		},
+		emits: {
+			subjectAudioPlay: (type: "读题" | "读官方解释" | "读技巧解释" | "读题+答案") => {
+				return undefined;
+			},
+			"update:officialShow": (value: boolean) => {
+				return value;
+			},
+		},
+		setup(props, { emit }) {
+			return () => {
+				return (
+					<van-overlay show={props.officialShow} z-index="10">
+						<div class="skills-box">
+							<div class="skills">
+								<div class="title">官方解释</div>
+								<div class="text">{props.currentSubject.explainJs}</div>
+								<div class="btn">
+									<span
+										onClick={() => {
+											emit("update:officialShow", false);
+										}}>
+										关闭
+									</span>
+									<span
+										onClick={() => {
+											emit("subjectAudioPlay", "读官方解释");
+										}}>
+										语音重播
+									</span>
+								</div>
+							</div>
+						</div>
+					</van-overlay>
+				);
+			};
+		},
+	});
+</script>
+
+<style lang="scss">
+	.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;
+			}
+			.text {
+				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;
+					}
+				}
+			}
+		}
+	}
+</style>

src/components/m-exercise/components/functionList.vue

@@ -0,0 +1,83 @@
+<script lang="tsx">
+	import { defineComponent } from "vue";
+	export default defineComponent({
+		props: {
+			currentSubject: Object as any,
+			skillsShow: Boolean,
+		},
+		emits: {
+			subjectAudioPlay: (type: "读题" | "读官方解释" | "读技巧解释" | "读题+答案") => {
+				return undefined;
+			},
+			addCurrentQuestion: () => {
+				return undefined;
+			},
+			"update:skillsShow": (value: boolean) => {
+				return value;
+			},
+		},
+		setup(props, { emit }) {
+			return () => {
+				return (
+					<div class="function-list">
+						<div
+							class="function-item"
+							onClick={() => {
+								emit("addCurrentQuestion");
+							}}>
+							<m-icon type={props.currentSubject?.isCollection ? "shoucanghuang" : "shoucanghui"} size="25px" />
+							<span>收藏</span>
+						</div>
+						<div
+							class="function-item"
+							onClick={() => {
+								emit("subjectAudioPlay", "读题+答案");
+							}}>
+							<m-icon type="a-dtda" size="25px" />
+							<span>读题+答案</span>
+						</div>
+						<div
+							class="function-item"
+							onClick={() => {
+								emit("subjectAudioPlay", "读题");
+							}}>
+							<m-icon type="duti" size="25px" />
+							<span>读题</span>
+						</div>
+						<div
+							class="function-item"
+							onClick={() => {
+								emit("subjectAudioPlay", "读技巧解释");
+								emit("update:skillsShow", true);
+							}}>
+							<m-icon type="jqjj" size="25px" />
+							<span>技巧讲解</span>
+						</div>
+					</div>
+				);
+			};
+		},
+	});
+</script>
+
+<style lang="scss">
+	.function-list {
+		width: 100%;
+		font-size: 13px;
+		display: flex;
+		justify-content: space-around;
+		padding: 15px;
+		box-sizing: border-box;
+		.function-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			font-size: 13px;
+			font-weight: 400;
+			color: #8a9099;
+			span {
+				margin-top: 5px;
+			}
+		}
+	}
+</style>

src/components/m-exercise/components/modeSelection.vue

@@ -0,0 +1,26 @@
+<script lang="tsx">
+	import { Image, Loading } from "vant";
+	import { defineComponent } from "vue";
+
+	export default defineComponent({
+		props: {
+			currentSubject: Object as any,
+		},
+		setup(props) {
+			return () => {
+				return (
+					<div class="answerType">
+						<span v-for="(answerType, index) in answerTypeList" key={index} class={{ selected: currentType == index }} onClick={(currentType = index)}>
+							{answerType.name}
+						</span>
+						<span class={{ selected: aotuPlayFlag }} onClick={aotuPlaySet}>
+							自动读题
+						</span>
+					</div>
+				);
+			};
+		},
+	});
+</script>
+
+<style lang="scss" scoped></style>

src/components/m-exercise/components/reciteMode.vue

@@ -0,0 +1,63 @@
+<script lang="tsx">
+	import { defineComponent } from "vue";
+	export default defineComponent({
+		props: {
+			currentSubject: Object as any,
+		},
+		setup(props) {
+			return () => {
+				return (
+					<>
+						<div>
+							{props.currentSubject.opts.map((item: any, index: number) => (
+								<div class="answer-box" key={Number(index)}>
+									<div class="choose-icon">{String.fromCharCode(65 + Number(index))}</div>
+									<span class={{ "answer-text": true, true: props.currentSubject.answer.includes(item) }}>{item}</span>
+								</div>
+							))}
+						</div>
+						<div class="checkbox-answer">答案: {props.currentSubject.answer.toString()}</div>
+					</>
+				);
+			};
+		},
+	});
+</script>
+
+<style lang="scss">
+	.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;
+	}
+	.checkbox-answer {
+		padding: 8px 10px;
+		background-color: #f2f3f5;
+		margin-top: 25px;
+	}
+	.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;
+		}
+	}
+</style>

src/components/m-exercise/components/subjectContext.vue

@@ -0,0 +1,53 @@
+<script lang="tsx">
+	import { Image, Loading } from "vant";
+	import { defineComponent } from "vue";
+
+	export default defineComponent({
+		props: {
+			currentSubject: Object as any,
+			currentSubjectIndex: { require: true, type: Number, default: 0 },
+		},
+		setup(props) {
+			const slots = {
+				loading: () => <Loading type="spinner" size="20" />,
+				error: () => <span>加载失败</span>,
+			};
+
+			return () => {
+				return (
+					<div class="problem">
+						<span class="type">{props.currentSubject.type}</span>
+						<span class="text">
+							{props.currentSubjectIndex + 1}、{props.currentSubject.explain}
+						</span>
+						{props.currentSubject.image && <Image src={props.currentSubject.image} class="img" v-slots={slots} />}
+					</div>
+				);
+			};
+		},
+	});
+</script>
+
+<style lang="scss" scoped>
+	.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;
+		}
+	}
+</style>

src/components/m-exercise/index.vue

@@ -20,28 +20,10 @@
 	<!-- 题目预加载end -->
 	<div class="problem-box" v-else>
 		<!-- 题目内容 -->
-		<div class="problem">
-			<span class="type">{{ currentSubject.type }}</span>
-			<span class="text">{{ currentSubjectIndex + 1 }}、{{ currentSubject.explain }}</span>
-			<van-image v-if="currentSubject.image" :src="currentSubject.image" class="img">
-				<template v-slot:loading>
-					<van-loading type="spinner" size="20" />
-				</template>
-			</van-image>
-		</div>
+		<subjectContext :currentSubject="currentSubject" :currentSubjectIndex="currentSubjectIndex" />
 		<!-- 背题模式展示 -->
 		<div v-if="typeParams.answerShow">
-			<div>
-				<div class="answer-box" v-for="(item, index) in currentSubject.opts" :key="Number(index)">
-					<div class="choose-icon">
-						{{ String.fromCharCode(65 + Number(index)) }}
-					</div>
-					<span class="answer-text" :class="{ true: currentSubject.answer.includes(item) }">
-						{{ item }}
-					</span>
-				</div>
-			</div>
-			<div class="checkbox-answer">答案: {{ currentSubject.answer.toString() }}</div>
+			<reciteMode :currentSubject="currentSubject" />
 		</div>
 		<!-- 背题模式展示end -->
 		<!-- 选择内容 -->
@@ -94,65 +76,11 @@
 	<!-- 分割线 -->
 	<van-divider />
 	<!-- 功能选择列表 -->
-	<div class="function-list">
-		<div class="function-item" @click="addCurrentQuestion">
-			<m-icon :type="currentSubject?.isCollection ? 'shoucanghuang' : 'shoucanghui'" size="25px" />
-			<span>收藏</span>
-		</div>
-		<div class="function-item" @click="subjectAudioPlay('读题+答案')">
-			<m-icon type="a-dtda" size="25px" />
-			<span>读题+答案</span>
-		</div>
-		<div class="function-item" @click="subjectAudioPlay('读题')">
-			<m-icon type="duti" size="25px" />
-			<span>读题</span>
-		</div>
-		<div
-			class="function-item"
-			@click="
-				() => {
-					subjectAudioPlay('读技巧解释');
-					skillsShow = true;
-				}
-			">
-			<m-icon type="jqjj" size="25px" />
-			<span>技巧讲解</span>
-		</div>
-	</div>
-	<!-- 功能选择列表End -->
+	<functionList :currentSubject="currentSubject" @subjectAudioPlay="subjectAudioPlay" @addCurrentQuestion="addCurrentQuestion" v-model:skillsShow="skillsShow" />
 	<!-- 技巧讲解 -->
-	<van-overlay :show="skillsShow" z-index="10">
-		<div class="skills-box">
-			<div class="skills">
-				<div class="title">技巧讲解</div>
-				<img v-if="!!currentSubject.explainGif" :src="currentSubject.explainGif" class="img" />
-				<van-divider class="divider">本题速记口诀</van-divider>
-				<div class="text">{{ currentSubject.explainJq }}</div>
-				<div class="btn">
-					<span @click="skillsShow = false">关闭</span>
-					<span @click="subjectAudioPlay('读技巧解释')">语音重播</span>
-				</div>
-			</div>
-		</div>
-	</van-overlay>
-	<!-- 技巧讲解end -->
+	<explainJq :currentSubject="currentSubject" v-model:skillsShow="skillsShow" @subjectAudioPlay="subjectAudioPlay" />
 	<!-- 官方解释 -->
-	<van-overlay :show="officialShow" z-index="10">
-		<div class="skills-box">
-			<div class="skills">
-				<div class="title">官方解释</div>
-				<div class="text">
-					{{ currentSubject.explainJs }}
-				</div>
-				<div class="btn">
-					<span @click="officialShow = false">关闭</span>
-					<span @click="subjectAudioPlay('读官方解释')">语音重播</span>
-				</div>
-			</div>
-		</div>
-	</van-overlay>
-	<!-- 官方解释end -->
-	<!-- 题目模块end -->
+	<explainJs :currentSubject="currentSubject" v-model:officialShow="officialShow" @subjectAudioPlay="subjectAudioPlay" />
 	<!-- 设置操作栏 -->
 	<van-popup v-model:show="setShow" position="bottom">
 		<van-cell center title="答对跳转下一题">
@@ -172,45 +100,7 @@
 		<subjectChangePopup :trueNum="trueNum" :falseNum="falseNum" v-model:currentSubjectIndex="currentSubjectIndex" :subjectList="subjectList" />
 	</van-popup>
 	<!-- 底部操作栏 -->
-	<van-tabbar placeholder route>
-		<van-tabbar-item @click="lastSubject"
-			>上一题
-			<template #icon>
-				<m-icon type="shangyiti" />
-			</template>
-		</van-tabbar-item>
-		<van-tabbar-item
-			>{{ trueNum }}
-			<template #icon>
-				<m-icon type="dui" />
-			</template>
-		</van-tabbar-item>
-		<van-tabbar-item
-			>{{ falseNum }}
-			<template #icon>
-				<m-icon type="cuo" />
-			</template>
-		</van-tabbar-item>
-		<van-tabbar-item @click="showSubjectChangePopup = true"
-			>{{ currentSubjectIndex + 1 }}/{{ subjectTotal }}
-			<template #icon>
-				<m-icon type="zongtishu" />
-			</template>
-		</van-tabbar-item>
-		<van-tabbar-item @click="officialShow = true"
-			>官方解释
-			<template #icon>
-				<m-icon type="gfjs" />
-			</template>
-		</van-tabbar-item>
-		<van-tabbar-item @click="nextSubject"
-			>下一题
-			<template #icon>
-				<m-icon type="xiayiti" />
-			</template>
-		</van-tabbar-item>
-	</van-tabbar>
-	<!-- 底部操作栏end -->
+	<bottomBar :currentSubjectIndex="currentSubjectIndex" :subjectTotal="subjectTotal" :trueNum="trueNum" :falseNum="falseNum" v-model:showSubjectChangePopup="showSubjectChangePopup" v-model:officialShow="officialShow" @lastSubject="lastSubject" @nextSubject="nextSubject" />
 </template>
 
 <script lang="ts" setup>
@@ -218,6 +108,12 @@
 	import subjectChangePopup from "./components/subjectChangePopup.vue";
 	import { useTopicMode, useAudioSet, useSubjectShowLogic } from "@/hooks/exercise";
 	import { RouterBus } from "@/hooks";
+	import subjectContext from "./components/subjectContext.vue";
+	import functionList from "./components/functionList.vue";
+	import explainJq from "./components/explainJq.vue";
+	import explainJs from "./components/explainJs.vue";
+	import reciteMode from "./components/reciteMode.vue";
+	import bottomBar from "./components/bottomBar.vue";
 	const {
 		router: { back },
 		route: { query },
@@ -250,25 +146,6 @@
 		width: 100%;
 		margin-top: 10px;
 	}
-	.function-list {
-		width: 100%;
-		font-size: 13px;
-		display: flex;
-		justify-content: space-around;
-		padding: 15px;
-		box-sizing: border-box;
-		.function-item {
-			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;
@@ -294,27 +171,6 @@
 	.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;
-			}
-		}
 		.answer {
 			margin-top: 25px;
 		}
@@ -366,77 +222,4 @@
 			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;
-			}
-			.text {
-				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;
-					}
-				}
-			}
-		}
-	}
 </style>