|
|
@@ -0,0 +1,594 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="container">
|
|
|
+ <div class="tab">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in tabItemList"
|
|
|
+ :key="index"
|
|
|
+ class="tab-item"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ tabItemListIndex = index;
|
|
|
+ getPage(index);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :class="{
|
|
|
+ 'tab-item_select': tabItemListIndex == index,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img class="tab-img" v-if="tabItemListIndex !== index" :src="item.whiteImg" />
|
|
|
+ <img class="tab-img" v-if="tabItemListIndex === index" :src="item.blueImg" />
|
|
|
+ <span class="tabItem-title">{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="topics">
|
|
|
+ <div class="topics-title"></div>
|
|
|
+ <div class="topics-content">
|
|
|
+ {{ list[listIndex].explainJs }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="options">
|
|
|
+ <div
|
|
|
+ class="options-select"
|
|
|
+ @click="selectAnswer(list[listIndex], 1)"
|
|
|
+ v-if="list[listIndex].an1"
|
|
|
+ >
|
|
|
+ <div class="options-selectText">
|
|
|
+ <img
|
|
|
+ src="@/assets/img/okimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer == 1 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-okimg"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="@/assets/img/noimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer !== 1 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-noimg"
|
|
|
+ />
|
|
|
+ <div class="options-selectText-header">A</div>
|
|
|
+ <div
|
|
|
+ class="options-selectText-mid"
|
|
|
+ :class="{
|
|
|
+ 'options-selectText-mid_selectOk':
|
|
|
+ list[listIndex].rightAnswer == 1 && list[listIndex].isExplainJs,
|
|
|
+ 'options-selectText-mid_selectNo':
|
|
|
+ list[listIndex].rightAnswer !== 1 && list[listIndex].isExplainJs,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ list[listIndex].an1 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="options-bg"></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="options-select"
|
|
|
+ @click="selectAnswer(list[listIndex], 2)"
|
|
|
+ v-if="list[listIndex].an2"
|
|
|
+ >
|
|
|
+ <div class="options-selectText">
|
|
|
+ <img
|
|
|
+ src="@/assets/img/okimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer == 2 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-okimg"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="@/assets/img/noimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer !== 2 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-noimg"
|
|
|
+ />
|
|
|
+ <div class="options-selectText-header">B</div>
|
|
|
+ <div
|
|
|
+ class="options-selectText-mid"
|
|
|
+ :class="{
|
|
|
+ 'options-selectText-mid_selectOk':
|
|
|
+ list[listIndex].rightAnswer == 2 && list[listIndex].isExplainJs,
|
|
|
+ 'options-selectText-mid_selectNo':
|
|
|
+ list[listIndex].rightAnswer !== 2 && list[listIndex].isExplainJs,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ list[listIndex].an2 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="options-bg"></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="options-select"
|
|
|
+ @click="selectAnswer(list[listIndex], 3)"
|
|
|
+ v-if="list[listIndex].an3"
|
|
|
+ >
|
|
|
+ <div class="options-selectText">
|
|
|
+ <img
|
|
|
+ src="@/assets/img/okimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer == 3 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-okimg"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="@/assets/img/noimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer !== 3 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-noimg"
|
|
|
+ />
|
|
|
+ <div class="options-selectText-header">C</div>
|
|
|
+ <div
|
|
|
+ class="options-selectText-mid"
|
|
|
+ :class="{
|
|
|
+ 'options-selectText-mid_selectOk':
|
|
|
+ list[listIndex].rightAnswer == 3 && list[listIndex].isExplainJs,
|
|
|
+ 'options-selectText-mid_selectNo':
|
|
|
+ list[listIndex].rightAnswer !== 3 && list[listIndex].isExplainJs,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ list[listIndex].an3 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="options-bg"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="options-select"
|
|
|
+ @click="selectAnswer(list[listIndex], 4)"
|
|
|
+ v-if="list[listIndex].an4"
|
|
|
+ >
|
|
|
+ <div class="options-selectText">
|
|
|
+ <img
|
|
|
+ src="@/assets/img/okimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer == 4 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-okimg"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="@/assets/img/noimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer !== 4 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-noimg"
|
|
|
+ />
|
|
|
+ <div class="options-selectText-header">D</div>
|
|
|
+ <div
|
|
|
+ class="options-selectText-mid"
|
|
|
+ :class="{
|
|
|
+ 'options-selectText-mid_selectOk':
|
|
|
+ list[listIndex].rightAnswer == 4 && list[listIndex].isExplainJs,
|
|
|
+ 'options-selectText-mid_selectNo':
|
|
|
+ list[listIndex].rightAnswer !== 4 && list[listIndex].isExplainJs,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ list[listIndex].an4 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="options-bg"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="options-select"
|
|
|
+ @click="selectAnswer(list[listIndex], 5)"
|
|
|
+ v-if="list[listIndex].an5"
|
|
|
+ >
|
|
|
+ <div class="options-selectText">
|
|
|
+ <img
|
|
|
+ src="@/assets/img/okimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer == 5 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-okimg"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="@/assets/img/noimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer !== 5 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-noimg"
|
|
|
+ />
|
|
|
+ <div class="options-selectText-header">E</div>
|
|
|
+ <div
|
|
|
+ class="options-selectText-mid"
|
|
|
+ :class="{
|
|
|
+ 'options-selectText-mid_selectOk':
|
|
|
+ list[listIndex].rightAnswer == 5 && list[listIndex].isExplainJs,
|
|
|
+ 'options-selectText-mid_selectNo':
|
|
|
+ list[listIndex].rightAnswer !== 5 && list[listIndex].isExplainJs,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ list[listIndex].an5 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="options-bg"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="options-select"
|
|
|
+ @click="selectAnswer(list[listIndex], 6)"
|
|
|
+ v-if="list[listIndex].an6"
|
|
|
+ >
|
|
|
+ <div class="options-selectText">
|
|
|
+ <img
|
|
|
+ src="@/assets/img/okimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer == 6 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-okimg"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="@/assets/img/noimg.png"
|
|
|
+ v-if="list[listIndex].rightAnswer !== 6 && list[listIndex].isExplainJs"
|
|
|
+ class="options-selectText-noimg"
|
|
|
+ />
|
|
|
+ <div class="options-selectText-header">F</div>
|
|
|
+ <div
|
|
|
+ class="options-selectText-mid"
|
|
|
+ :class="{
|
|
|
+ 'options-selectText-mid_selectOk':
|
|
|
+ list[listIndex].rightAnswer == 6 && list[listIndex].isExplainJs,
|
|
|
+ 'options-selectText-mid_selectNo':
|
|
|
+ list[listIndex].rightAnswer !== 6 && list[listIndex].isExplainJs,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ list[listIndex].an6 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="options-bg"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explain" v-opacity="list[listIndex].isExplainJs">
|
|
|
+ <div class="explain-answer">
|
|
|
+ <div class="explain-answerText">
|
|
|
+ <span>正确答案：</span>
|
|
|
+ <span style="color: #12af85">{{ answerIndexMap[list[listIndex].rightAnswer] }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explain-header">题目解析</div>
|
|
|
+ <div class="explain-content">
|
|
|
+ 《机动车驾驶证申请和使用规定》第八十条：机动车驾驶人在实习期内发生的道路交通安全违法行为被记满12分的，注销其实习的准驾车型驾驶资格
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-container">
|
|
|
+ <img @click="backTopics" src="@/assets/img/beforeTopics.png" />
|
|
|
+ <span>
|
|
|
+ <span style="color: #ffac4d">{{ listIndex + 1 }}</span
|
|
|
+ >/{{ list.length }}
|
|
|
+ </span>
|
|
|
+ <img @click="nextTopics" src="@/assets/img/nextTopics.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { reactive, ref } from 'vue';
|
|
|
+import { Toast } from 'vant';
|
|
|
+import api from '@/api/api';
|
|
|
+import blueTabItemImg0 from '@/assets/img/blueCar.png';
|
|
|
+import blueTabItemImg1 from '@/assets/img/blueBus.png';
|
|
|
+import blueTabItemImg2 from '@/assets/img/blueTruck.png';
|
|
|
+import blueTabItemImg3 from '@/assets/img/blueMoto.png';
|
|
|
+
|
|
|
+import whiteTabItemImg0 from '@/assets/img/whiteCar.png';
|
|
|
+import whiteTabItemImg1 from '@/assets/img/whiteBus.png';
|
|
|
+import whiteTabItemImg2 from '@/assets/img/whiteTruck.png';
|
|
|
+import whiteTabItemImg3 from '@/assets/img/whiteMoto.png';
|
|
|
+const tabItemListIndex = ref(0);
|
|
|
+const answerIndexMap = ['!', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
|
|
|
+const tabItemList = [
|
|
|
+ {
|
|
|
+ blueImg: blueTabItemImg0,
|
|
|
+ whiteImg: whiteTabItemImg0,
|
|
|
+ title: '小车',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ blueImg: blueTabItemImg1,
|
|
|
+ whiteImg: whiteTabItemImg1,
|
|
|
+ title: '客车',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ blueImg: blueTabItemImg2,
|
|
|
+ whiteImg: whiteTabItemImg2,
|
|
|
+ title: '货车',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ blueImg: blueTabItemImg3,
|
|
|
+ whiteImg: whiteTabItemImg3,
|
|
|
+ title: '摩托车',
|
|
|
+ },
|
|
|
+];
|
|
|
+let list = ref<questionTwoList.row[]>([
|
|
|
+ {
|
|
|
+ an1: '正确',
|
|
|
+ an2: '错误',
|
|
|
+ an3: '',
|
|
|
+ an4: '',
|
|
|
+ an5: '',
|
|
|
+ an6: '',
|
|
|
+ an7: '',
|
|
|
+ cartype: '',
|
|
|
+ explainJs:
|
|
|
+ '《机动车驾驶证申请和使用规定》第八十条：机动车驾驶人在实习期内发生的道路交通安全违法行为被记满12分的，注销其实习的准驾车型驾驶资格',
|
|
|
+ id: 0,
|
|
|
+ image: '',
|
|
|
+ kemu: 0,
|
|
|
+ name: '',
|
|
|
+ num: 0,
|
|
|
+ rightAnswer: 0,
|
|
|
+ type: 0,
|
|
|
+ },
|
|
|
+]);
|
|
|
+let listIndex = ref(0);
|
|
|
+let list0 = ref<questionTwoList.row[]>([]);
|
|
|
+let list1 = ref<questionTwoList.row[]>([]);
|
|
|
+let list2 = ref<questionTwoList.row[]>([]);
|
|
|
+let list3 = ref<questionTwoList.row[]>([]);
|
|
|
+const query = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ cartype: '0' as '0' | '1' | '2' | '3',
|
|
|
+ kemu: 1,
|
|
|
+};
|
|
|
+let getPage = (index: number) => {
|
|
|
+ let indexStr = String(index);
|
|
|
+ query.cartype = indexStr as '0' | '1' | '2' | '3';
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ if (list0.value.length == 0) {
|
|
|
+ api.questionTwoList(query).then((res) => {
|
|
|
+ list0.value = res.data.rows;
|
|
|
+ list.value = res.data.rows;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ list.value = list0.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ if (list1.value.length == 0) {
|
|
|
+ api.questionTwoList(query).then((res) => {
|
|
|
+ list1.value = res.data.rows;
|
|
|
+ list.value = res.data.rows;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ list.value = list1.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ if (list2.value.length == 0) {
|
|
|
+ api.questionTwoList(query).then((res) => {
|
|
|
+ list2.value = res.data.rows;
|
|
|
+ list.value = res.data.rows;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ list.value = list2.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ if (list3.value.length == 0) {
|
|
|
+ api.questionTwoList(query).then((res) => {
|
|
|
+ list3.value = res.data.rows;
|
|
|
+ list.value = res.data.rows;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ list.value = list3.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ break;
|
|
|
+ }
|
|
|
+};
|
|
|
+let nextTopics = () => {
|
|
|
+ if (listIndex.value == list.value.length - 1) {
|
|
|
+ Toast('到底了');
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ listIndex.value = listIndex.value + 1;
|
|
|
+ }
|
|
|
+};
|
|
|
+let backTopics = () => {
|
|
|
+ if (listIndex.value == 0) {
|
|
|
+ Toast('到底了');
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ listIndex.value = listIndex.value - 1;
|
|
|
+ }
|
|
|
+};
|
|
|
+let selectAnswer = (item: questionTwoList.row, index: number) => {
|
|
|
+ item.isExplainJs = true;
|
|
|
+ console.log(item);
|
|
|
+};
|
|
|
+//初始获取题目
|
|
|
+getPage(0);
|
|
|
+
|
|
|
+//truck
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-image: url('./../../assets/img/aprilExam.png');
|
|
|
+ background-size: 100%;
|
|
|
+ padding-bottom: 136px;
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
+.tab {
|
|
|
+ padding: 0px 60px;
|
|
|
+ padding-top: 32px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 140px;
|
|
|
+ height: 60px;
|
|
|
+ padding: 0px 15px;
|
|
|
+ padding-left: 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #fff;
|
|
|
+ .tabItem-title {
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-item_select {
|
|
|
+ background: #fff;
|
|
|
+ border: 4px solid #2d2d2d;
|
|
|
+ border-radius: 35px;
|
|
|
+ color: #498ef5;
|
|
|
+ }
|
|
|
+ .tab-img {
|
|
|
+ width: 40px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.topics {
|
|
|
+ width: 690px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 154px;
|
|
|
+ border: 5px solid #2d2d2d;
|
|
|
+ padding: 26px 0;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ .topics-title::before {
|
|
|
+ content: '判断';
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .topics-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 26px;
|
|
|
+ width: 88px;
|
|
|
+ height: 44px;
|
|
|
+ left: -5px;
|
|
|
+ background: #01c18d;
|
|
|
+ border: 5px solid #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .topics-content {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 30px;
|
|
|
+ text-indent: 3em;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+.options {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 30px;
|
|
|
+ padding-left: 60px;
|
|
|
+ .options-select {
|
|
|
+ width: 644px;
|
|
|
+ height: 98px;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 26px;
|
|
|
+ }
|
|
|
+ .options-selectText {
|
|
|
+ border: 5px solid #2d2d2d;
|
|
|
+ height: 84px;
|
|
|
+ line-height: 84px;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 630px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .options-selectText-header {
|
|
|
+ background: #ffac4d;
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ border: 3px solid #2d2d2d;
|
|
|
+ position: relative;
|
|
|
+ left: -3px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .options-selectText-mid {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .options-selectText-mid_selectOk {
|
|
|
+ color: #12af85;
|
|
|
+ }
|
|
|
+ .options-selectText-mid_selectNo {
|
|
|
+ color: #ff4d53;
|
|
|
+ }
|
|
|
+ .options-selectText-okimg {
|
|
|
+ position: absolute;
|
|
|
+ right: 28px;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ .options-selectText-noimg {
|
|
|
+ position: absolute;
|
|
|
+ right: 28px;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ .options-bg {
|
|
|
+ width: 630px;
|
|
|
+ height: 84px;
|
|
|
+ background: #d6b352;
|
|
|
+ border: 5px solid #2d2d2d;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
+.explain {
|
|
|
+ margin-top: 60px;
|
|
|
+ width: 690px;
|
|
|
+ border: 4px solid #2d2d2d;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #fff;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ .explain-answer {
|
|
|
+ height: 86px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 700;
|
|
|
+ .explain-answerText {
|
|
|
+ width: 630px;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: left;
|
|
|
+ border-bottom: 2px solid #cccccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .explain-header {
|
|
|
+ margin-top: 32px;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 30px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .explain-content {
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: left;
|
|
|
+ padding: 8px 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.bottom {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 136px;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 60px;
|
|
|
+ .bottom-container {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-weight: 700;
|
|
|
+ img {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
