修改模拟考试使用接口

package.json

@@ -25,6 +25,7 @@
 		"weixin-js-sdk-ts": "^1.6.1"
 	},
 	"devDependencies": {
+		"@vitejs/plugin-vue-jsx": "^1.3.7",
 		"@types/howler": "^2.2.4",
 		"@types/marked": "^3.0.1",
 		"@types/mockjs": "^1.0.4",

pnpm-lock.yaml

@@ -7,6 +7,7 @@ specifiers:
   '@types/node': ^16.11.6
   '@types/soundjs': ^0.6.28
   '@vitejs/plugin-vue': ^1.3.0
+  '@vitejs/plugin-vue-jsx': ^1.3.7
   '@vue/compiler-sfc': ^3.0.5
   axios: ^0.21.4
   axios-logger: ^2.6.0
@@ -30,6 +31,7 @@ specifiers:
   weixin-js-sdk-ts: ^1.6.1
 
 dependencies:
+  '@vitejs/plugin-vue-jsx': 1.3.7
   axios: 0.21.4
   axios-logger: 2.6.0
   dayjs: 1.10.7
@@ -62,23 +64,318 @@ devDependencies:
 
 packages:
 
+  /@ampproject/remapping/2.1.2:
+    resolution: {integrity: sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.4
+    dev: false
+
+  /@babel/code-frame/7.16.7:
+    resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.16.10
+    dev: false
+
+  /@babel/compat-data/7.17.0:
+    resolution: {integrity: sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/core/7.17.5:
+    resolution: {integrity: sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.1.2
+      '@babel/code-frame': 7.16.7
+      '@babel/generator': 7.17.3
+      '@babel/helper-compilation-targets': 7.16.7_@babel+core@7.17.5
+      '@babel/helper-module-transforms': 7.16.7
+      '@babel/helpers': 7.17.2
+      '@babel/parser': 7.17.3
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.17.3
+      '@babel/types': 7.17.0
+      convert-source-map: 1.8.0
+      debug: 4.3.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.0
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/generator/7.17.3:
+    resolution: {integrity: sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.17.0
+      jsesc: 2.5.2
+      source-map: 0.5.7
+    dev: false
+
+  /@babel/helper-annotate-as-pure/7.16.7:
+    resolution: {integrity: sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: false
+
+  /@babel/helper-compilation-targets/7.16.7_@babel+core@7.17.5:
+    resolution: {integrity: sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.17.0
+      '@babel/core': 7.17.5
+      '@babel/helper-validator-option': 7.16.7
+      browserslist: 4.19.3
+      semver: 6.3.0
+    dev: false
+
+  /@babel/helper-create-class-features-plugin/7.17.1_@babel+core@7.17.5:
+    resolution: {integrity: sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.17.5
+      '@babel/helper-annotate-as-pure': 7.16.7
+      '@babel/helper-environment-visitor': 7.16.7
+      '@babel/helper-function-name': 7.16.7
+      '@babel/helper-member-expression-to-functions': 7.16.7
+      '@babel/helper-optimise-call-expression': 7.16.7
+      '@babel/helper-replace-supers': 7.16.7
+      '@babel/helper-split-export-declaration': 7.16.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/helper-environment-visitor/7.16.7:
+    resolution: {integrity: sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: false
+
+  /@babel/helper-function-name/7.16.7:
+    resolution: {integrity: sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-get-function-arity': 7.16.7
+      '@babel/template': 7.16.7
+      '@babel/types': 7.16.8
+    dev: false
+
+  /@babel/helper-get-function-arity/7.16.7:
+    resolution: {integrity: sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: false
+
+  /@babel/helper-hoist-variables/7.16.7:
+    resolution: {integrity: sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.17.0
+    dev: false
+
+  /@babel/helper-member-expression-to-functions/7.16.7:
+    resolution: {integrity: sha512-VtJ/65tYiU/6AbMTDwyoXGPKHgTsfRarivm+YbB5uAzKUyuPjgZSgAFeG87FCigc7KNHu2Pegh1XIT3lXjvz3Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: false
+
+  /@babel/helper-module-imports/7.16.7:
+    resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.17.0
+    dev: false
+
+  /@babel/helper-module-transforms/7.16.7:
+    resolution: {integrity: sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.16.7
+      '@babel/helper-module-imports': 7.16.7
+      '@babel/helper-simple-access': 7.16.7
+      '@babel/helper-split-export-declaration': 7.16.7
+      '@babel/helper-validator-identifier': 7.16.7
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.17.3
+      '@babel/types': 7.17.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/helper-optimise-call-expression/7.16.7:
+    resolution: {integrity: sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: false
+
+  /@babel/helper-plugin-utils/7.16.7:
+    resolution: {integrity: sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helper-replace-supers/7.16.7:
+    resolution: {integrity: sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.16.7
+      '@babel/helper-member-expression-to-functions': 7.16.7
+      '@babel/helper-optimise-call-expression': 7.16.7
+      '@babel/traverse': 7.17.3
+      '@babel/types': 7.16.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/helper-simple-access/7.16.7:
+    resolution: {integrity: sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.17.0
+    dev: false
+
+  /@babel/helper-split-export-declaration/7.16.7:
+    resolution: {integrity: sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: false
+
   /@babel/helper-validator-identifier/7.16.7:
     resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==}
     engines: {node: '>=6.9.0'}
-    dev: true
+
+  /@babel/helper-validator-option/7.16.7:
+    resolution: {integrity: sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helpers/7.17.2:
+    resolution: {integrity: sha512-0Qu7RLR1dILozr/6M0xgj+DFPmi6Bnulgm9M8BVa9ZCWxDqlSnqt3cf8IDPB5m45sVXUZ0kuQAgUrdSFFH79fQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.17.3
+      '@babel/types': 7.17.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/highlight/7.16.10:
+    resolution: {integrity: sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.16.7
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: false
 
   /@babel/parser/7.16.8:
     resolution: {integrity: sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  /@babel/parser/7.17.3:
+    resolution: {integrity: sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dev: false
+
+  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.17.5:
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.17.5
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: false
+
+  /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.17.5:
+    resolution: {integrity: sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.17.5
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: false
+
+  /@babel/plugin-syntax-typescript/7.16.7_@babel+core@7.17.5:
+    resolution: {integrity: sha512-YhUIJHHGkqPgEcMYkPCKTyGUdoGKWtopIycQyjJH8OjvRgOYsXsaKehLVPScKJWAULPxMa4N1vCe6szREFlZ7A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.17.5
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: false
+
+  /@babel/plugin-transform-typescript/7.16.8_@babel+core@7.17.5:
+    resolution: {integrity: sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.17.5
+      '@babel/helper-create-class-features-plugin': 7.17.1_@babel+core@7.17.5
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-syntax-typescript': 7.16.7_@babel+core@7.17.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/template/7.16.7:
+    resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@babel/parser': 7.17.3
+      '@babel/types': 7.17.0
+    dev: false
+
+  /@babel/traverse/7.17.3:
+    resolution: {integrity: sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@babel/generator': 7.17.3
+      '@babel/helper-environment-visitor': 7.16.7
+      '@babel/helper-function-name': 7.16.7
+      '@babel/helper-hoist-variables': 7.16.7
+      '@babel/helper-split-export-declaration': 7.16.7
+      '@babel/parser': 7.17.3
+      '@babel/types': 7.17.0
+      debug: 4.3.3
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@babel/types/7.16.8:
     resolution: {integrity: sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-validator-identifier': 7.16.7
       to-fast-properties: 2.0.0
-    dev: true
+
+  /@babel/types/7.17.0:
+    resolution: {integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.16.7
+      to-fast-properties: 2.0.0
+    dev: false
 
   /@emmetio/abbreviation/2.2.2:
     resolution: {integrity: sha512-TtE/dBnkTCct8+LntkqVrwqQao6EnPAs1YN3cUgxOxTaBlesBCY37ROUAVZrRlG64GNnVShdl/b70RfAI3w5lw==}
@@ -96,10 +393,34 @@ packages:
     resolution: {integrity: sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==}
     dev: true
 
+  /@jridgewell/resolve-uri/3.0.5:
+    resolution: {integrity: sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
+  /@jridgewell/sourcemap-codec/1.4.11:
+    resolution: {integrity: sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==}
+    dev: false
+
+  /@jridgewell/trace-mapping/0.3.4:
+    resolution: {integrity: sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.0.5
+      '@jridgewell/sourcemap-codec': 1.4.11
+    dev: false
+
   /@popperjs/core/2.11.2:
     resolution: {integrity: sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==}
     dev: false
 
+  /@rollup/pluginutils/4.1.2:
+    resolution: {integrity: sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: false
+
   /@types/createjs-lib/0.0.29:
     resolution: {integrity: sha1-+uguO6hgZmOxkOeJzsfZxyj8Qdc=}
     dev: true
@@ -151,6 +472,20 @@ packages:
     resolution: {integrity: sha512-XvZkPCjcmEBhD+T3vB68thOG6P9jazld6aBTMenhbAQd4FT/x9AiKIWPJx4MvhYoSIWt7fju6K01XTJldWs1hw==}
     dev: false
 
+  /@vitejs/plugin-vue-jsx/1.3.7:
+    resolution: {integrity: sha512-UH+lI/TtBQg1YZeOTBN5yEYvSDNcL2ei8ZgE+0ESX2ULg2xV7rxzw1TB1eHZiMGXOSR8h5AWp/6F1hCcaq8VYA==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      '@babel/core': 7.17.5
+      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.17.5
+      '@babel/plugin-transform-typescript': 7.16.8_@babel+core@7.17.5
+      '@rollup/pluginutils': 4.1.2
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.17.5
+      hash-sum: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@vitejs/plugin-vue/1.10.2_vite@2.7.13:
     resolution: {integrity: sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==}
     engines: {node: '>=12.0.0'}
@@ -208,6 +543,27 @@ packages:
       vscode-uri: 2.1.2
     dev: true
 
+  /@vue/babel-helper-vue-transform-on/1.0.2:
+    resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
+    dev: false
+
+  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.17.5:
+    resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
+    dependencies:
+      '@babel/helper-module-imports': 7.16.7
+      '@babel/plugin-syntax-jsx': 7.16.7_@babel+core@7.17.5
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.17.3
+      '@babel/types': 7.16.8
+      '@vue/babel-helper-vue-transform-on': 1.0.2
+      camelcase: 6.3.0
+      html-tags: 3.1.0
+      svg-tags: 1.0.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+    dev: false
+
   /@vue/compiler-core/3.2.27:
     resolution: {integrity: sha512-JyxAglSM/pb9paG5ZNuKrf5IUpzLzQA3khjWGF9oESELCLQlt6O3YyPMR2A69wIpYWrf5mScZ8YY8TJKOI/1kQ==}
     dependencies:
@@ -294,6 +650,13 @@ packages:
     hasBin: true
     dev: true
 
+  /ansi-styles/3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: false
+
   /ansi-styles/4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -352,6 +715,18 @@ packages:
       fill-range: 7.0.1
     dev: true
 
+  /browserslist/4.19.3:
+    resolution: {integrity: sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001312
+      electron-to-chromium: 1.4.71
+      escalade: 3.1.1
+      node-releases: 2.0.2
+      picocolors: 1.0.0
+    dev: false
+
   /call-bind/1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
@@ -359,6 +734,24 @@ packages:
       get-intrinsic: 1.1.1
     dev: true
 
+  /camelcase/6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /caniuse-lite/1.0.30001312:
+    resolution: {integrity: sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==}
+    dev: false
+
+  /chalk/2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: false
+
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -388,6 +781,12 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /color-convert/1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: false
+
   /color-convert/2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -395,6 +794,10 @@ packages:
       color-name: 1.1.4
     dev: false
 
+  /color-name/1.1.3:
+    resolution: {integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=}
+    dev: false
+
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: false
@@ -411,6 +814,12 @@ packages:
       '@babel/types': 7.16.8
     dev: true
 
+  /convert-source-map/1.8.0:
+    resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: false
+
   /cookie-storage/6.1.0:
     resolution: {integrity: sha512-HeVqbVy8BjXhAAuFtL6MTG+witHoLbxfky2jgVh9FmxmyL6IKa9gSSyPNjevXCCCxPu6Tzd9J8+eXTRQzYU/cg==}
     dev: false
@@ -437,6 +846,18 @@ packages:
     resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==}
     dev: false
 
+  /debug/4.3.3:
+    resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: false
+
   /deepmerge/4.2.2:
     resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
     engines: {node: '>=0.10.0'}
@@ -473,6 +894,10 @@ packages:
       domhandler: 4.3.0
     dev: true
 
+  /electron-to-chromium/1.4.71:
+    resolution: {integrity: sha512-Hk61vXXKRb2cd3znPE9F+2pLWdIOmP7GjiTj45y6L3W/lO+hSnUSUhq+6lEaERWBdZOHbk2s3YV5c9xVl3boVw==}
+    dev: false
+
   /emmet/2.3.5:
     resolution: {integrity: sha512-LcWfTamJnXIdMfLvJEC5Ld3hY5/KHXgv1L1bp6I7eEvB0ZhacHZ1kX0BYovJ8FroEsreLcq7n7kZhRMsf6jkXQ==}
     dependencies:
@@ -644,6 +1069,16 @@ packages:
       esbuild-windows-arm64: 0.13.15
     dev: true
 
+  /escalade/3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /escape-string-regexp/1.0.5:
+    resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
+    engines: {node: '>=0.8.0'}
+    dev: false
+
   /estree-walker/2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -676,6 +1111,11 @@ packages:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
     dev: true
 
+  /gensync/1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
   /get-intrinsic/1.1.1:
     resolution: {integrity: sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==}
     dependencies:
@@ -691,6 +1131,16 @@ packages:
       is-glob: 4.0.3
     dev: true
 
+  /globals/11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /has-flag/3.0.0:
+    resolution: {integrity: sha1-tdRU3CGZriJWmfNGfloH87lVuv0=}
+    engines: {node: '>=4'}
+    dev: false
+
   /has-flag/4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -715,10 +1165,19 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /hash-sum/2.0.0:
+    resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
+    dev: false
+
   /howler/2.2.3:
     resolution: {integrity: sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==}
     dev: false
 
+  /html-tags/3.1.0:
+    resolution: {integrity: sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==}
+    engines: {node: '>=8'}
+    dev: false
+
   /htmlparser2/6.1.0:
     resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
     dependencies:
@@ -785,6 +1244,24 @@ packages:
     resolution: {integrity: sha1-Fzb939lyTyijaCrcYjCufk6Weds=}
     dev: true
 
+  /js-tokens/4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: false
+
+  /jsesc/2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: false
+
+  /json5/2.2.0:
+    resolution: {integrity: sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.5
+    dev: false
+
   /jsonc-parser/2.3.1:
     resolution: {integrity: sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==}
     dev: true
@@ -818,6 +1295,10 @@ packages:
     hasBin: true
     dev: false
 
+  /minimist/1.2.5:
+    resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
+    dev: false
+
   /mockjs/1.1.0:
     resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
     hasBin: true
@@ -825,6 +1306,10 @@ packages:
       commander: 8.3.0
     dev: false
 
+  /ms/2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: false
+
   /mutation-observer/1.0.3:
     resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
     dev: false
@@ -834,6 +1319,10 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /node-releases/2.0.2:
+    resolution: {integrity: sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==}
+    dev: false
+
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -854,7 +1343,6 @@ packages:
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /postcss-pxtorem/6.0.0:
     resolution: {integrity: sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==}
@@ -995,6 +1483,10 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /safe-buffer/5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: false
+
   /sass/1.49.0:
     resolution: {integrity: sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==}
     engines: {node: '>=8.9.0'}
@@ -1009,6 +1501,11 @@ packages:
     resolution: {integrity: sha512-vd0o+mkMC8xdESr4nxxYoNUUWWBjTi5lRTOjY9ZbPG5RFlNQPTxZmv3dtADfn7b9GT++XgtRfc1Fxf2G1K6XUQ==}
     dev: false
 
+  /semver/6.3.0:
+    resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
+    hasBin: true
+    dev: false
+
   /semver/7.3.5:
     resolution: {integrity: sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==}
     engines: {node: '>=10'}
@@ -1029,6 +1526,11 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /source-map/0.5.7:
+    resolution: {integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -1036,6 +1538,13 @@ packages:
   /sourcemap-codec/1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
 
+  /supports-color/5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: false
+
   /supports-color/7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -1048,10 +1557,13 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /svg-tags/1.0.0:
+    resolution: {integrity: sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=}
+    dev: false
+
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=}
     engines: {node: '>=4'}
-    dev: true
 
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}

src/api/modules/test.ts

@@ -9,6 +9,13 @@ class Test {
 		});
 	}
 
+	/**获取模拟考试题列表 */
+	getMockList(params: Test.listParams): AxiosPromise<Test.listRes> {
+		return request("/student/qustion/info/selectTestQuestionInfo", {
+			params,
+		});
+	}
+
 	/** 获取非VIP题目列表 */
 	normalList(params: Test.listParams): AxiosPromise<Test.listRes> {
 		return request("/student/qustion/info/normalList", {

src/api/types/test.d.ts

@@ -1,83 +1,84 @@
 declare namespace Test {
-  interface QuestionInfo {
-    answer: string;
-    answerkeyword: string;
-    answermp3: string;
-    classIssue: string;
-    classIssueName: string;
-    copyIssue: string;
-    excellIssue: string;
-    excellIssueName: string;
-    explainGif: string;
-    explainJq: string;
-    explainJs: string;
-    explainMp3: string;
-    explainjsmp3: string;
-    id: number;
-    image: string;
-    imageYdt: string;
-    issue: string;
-    issuemp3: string;
-    liceBus: string;
-    liceCar: string;
-    liceMoto: string;
-    liceTruck: string;
-    mockIssue: string;
-    number: number;
-    opts: string;
-    placeIssue: string;
-    placeIssueName: string;
-    questionType: number;
-    sequeIssue: string;
-    sequeIssueName: string;
-    skillkeyword: string;
-    subject1: string;
-    subject2: string;
-    subject3: string;
-    subject4: string;
-    titlekeyword: string;
-  }
+	interface QuestionInfo {
+		answer: string;
+		answerkeyword: string;
+		answermp3: string;
+		classIssue: string;
+		classIssueName: string;
+		copyIssue: string;
+		excellIssue: string;
+		excellIssueName: string;
+		explainGif: string;
+		explainJq: string;
+		explainJs: string;
+		explainMp3: string;
+		explainjsmp3: string;
+		id: number;
+		image: string;
+		imageYdt: string;
+		issue: string;
+		issuemp3: string;
+		liceBus: string;
+		liceCar: string;
+		liceMoto: string;
+		liceTruck: string;
+		mockIssue: string;
+		number: number;
+		opts: string;
+		placeIssue: string;
+		placeIssueName: string;
+		questionType: number;
+		sequeIssue: string;
+		sequeIssueName: string;
+		skillkeyword: string;
+		subject1: string;
+		subject2: string;
+		subject3: string;
+		subject4: string;
+		titlekeyword: string;
+	}
 
-  type listParams = Partial<QuestionInfo> & Common.Paging;
-  type listRes = QuestionInfoByIdsRes;
+	type listParams = Partial<QuestionInfo> & Common.Paging;
 
-  interface QuestionInfoByIdsParams extends Common.Paging {
-    ids: number[];
-  }
+	type listRes = QuestionInfoByIdsRes;
 
-  interface QuestionInfoByIdsRes extends Common.Res {
-    rows: QuestionInfo[];
-    count: number;
-  }
+	interface QuestionInfoByIdsParams extends Common.Paging {
+		ids: number[];
+	}
 
-  interface getTopicClassParams {
-    liceBus: string;
-    liceCar: string;
-    liceMoto: string;
-    liceTruck: string;
-    subject1: string;
-    subject2: string;
-    subject3: string;
-    subject4: string;
-  }
+	interface QuestionInfoByIdsRes extends Common.Res {
+		rows: QuestionInfo[];
+		total: number;
+	}
 
-  interface selectDfQustionInfoRes {
-    placeIssue: string;
-    placeIssueName: string;
-  }
+	interface getTopicClassParams {
+		liceBus: string;
+		liceCar: string;
+		liceMoto: string;
+		liceTruck: string;
+		subject1: string;
+		subject2: string;
+		subject3: string;
+		subject4: string;
+	}
 
-  interface selectFlQustionInfoRes {
-    classIssue: string;
-    classIssueName: string;
-  }
+	interface selectDfQustionInfoRes {
+		placeIssue: string;
+		placeIssueName: string;
+	}
 
-  interface selectJxQustionInfoRes {
-    excellIssue: string;
-    excellIssueName: string;
-  }
+	interface selectFlQustionInfoRes {
+		classIssue: string;
+		classIssueName: string;
+	}
 
-  interface selectSxQustionInfoRes {
-    sequeIssue: string;
-    sequeIssueName: string;
-  }
+	interface selectJxQustionInfoRes {
+		excellIssue: string;
+		excellIssueName: string;
+	}
+
+	interface selectSxQustionInfoRes {
+		sequeIssue: string;
+		sequeIssueName: string;
+	}
 }

src/model/test.ts

@@ -1,31 +1,100 @@
 import { test } from "@/api";
 
 class TestModel {
-  /** 根据不同类型获取分类 */
-  async getTopicClass(
-    type: "df" | "fl" | "jx" | "sx",
-    params: Partial<Test.getTopicClassParams>
-  ) {
-    switch (type) {
-      case "df": {
-        const res = await test.selectDfQustionInfo(params);
-        return res.data;
-      }
-      case "fl": {
-        const res = await test.selectFlQustionInfo(params);
-        return res.data;
-      }
-      case "jx": {
-        const res = await test.selectJxQustionInfo(params);
-        return res.data;
-      }
-      case "sx": {
-        const res = await test.selectSxQustionInfo(params);
-        return res.data;
-      }
-    }
-  }
-
-  /** 获取题目列表 */
-  async getList() {}
+	/** 根据不同类型获取分类 */
+	async getTopicClass(type: "df" | "fl" | "jx" | "sx", params: Partial<Test.getTopicClassParams>) {
+		switch (type) {
+			case "df": {
+				const res = await test.selectDfQustionInfo(params);
+				return res.data;
+			}
+			case "fl": {
+				const res = await test.selectFlQustionInfo(params);
+				return res.data;
+			}
+			case "jx": {
+				const res = await test.selectJxQustionInfo(params);
+				return res.data;
+			}
+			case "sx": {
+				const res = await test.selectSxQustionInfo(params);
+				return res.data;
+			}
+		}
+	}
+
+	/**获取用户答案初始值 */
+	private getUserAnswer = (type: string) => {
+		switch (type) {
+			case "判断题":
+				return null;
+			case "单选题":
+				return null;
+			case "多选题":
+				return [];
+		}
+	};
+
+	/**获取题目类型 */
+	private getType = (answer: Array<string>) => {
+		if (answer.length === 1) {
+			if (["√", "×"].includes(answer[0])) {
+				return "判断题";
+			} else {
+				return "单选题";
+			}
+		} else {
+			return "多选题";
+		}
+	};
+
+	/** 获取题目列表 */
+	async getList(params: Test.listParams) {
+		const res = await test.list(params);
+
+		const data = {
+			total: res.data.total,
+			list: res.data.rows.map((item: any) => {
+				return {
+					...item,
+					explain: item.issue,
+					opts: item.opts.split("-").filter((item: any) => !!item),
+					image: item.image,
+					type: this.getType(item.answer.split("-")),
+					answer: item.answer,
+					userAnswer: this.getUserAnswer(this.getType(item.answer.split("-"))),
+					isTrue: null,
+					isCollection: false,
+				};
+			}),
+		};
+
+		return data;
+	}
+
+	/**获取模拟考试题列表 */
+	async getMockList(params: Test.listParams) {
+		const res = await test.getMockList(params);
+
+		const data = {
+			total: res.data.total,
+			list: res.data.rows.map((item: any) => {
+				return {
+					...item,
+					explain: item.issue,
+					opts: item.opts.split("-").filter((item: any) => !!item),
+					image: item.image,
+					type: this.getType(item.answer.split("-")),
+					answer: item.answer,
+					userAnswer: this.getUserAnswer(this.getType(item.answer.split("-"))),
+					isTrue: null,
+					isCollection: false,
+				};
+			}),
+		};
+
+		return data;
+	}
 }
+
+export default new TestModel();

src/views/exercise/index.vue

@@ -1,7 +1,16 @@
-<template>
+<!-- <template>
 	<m-exercise listType="normal" />
-</template>
+</template> -->
 
-<script></script>
+<script lang="tsx">
+	import { defineComponent } from "vue";
+	export default defineComponent({
+		setup() {
+			return () => {
+				return <m-exercise listType="normal" />;
+			};
+		},
+	});
+</script>
 
 <style lang="scss" scoped></style>

src/views/mockTest/components/hooks.ts

@@ -1,268 +1,243 @@
-import {
-  ref,
-  watch,
-  onBeforeMount,
-  Ref,
-  computed,
-  nextTick,
-  ComputedRef,
-} from "vue";
+import { ref, watch, onBeforeMount, Ref, computed, nextTick, ComputedRef } from "vue";
 import * as API from "@/api";
 import { Howl, Howler } from "howler";
 import { useRoute } from "vue-router";
+import testModel from "@/model/test";
 
 //答题模式切换
 export function useTopicMode() {
-  const answerTypeList = ref([
-    { name: "顺序练习" },
-    { name: "随机练习" },
-    { name: "背题模式" },
-  ]);
-  const currentType = ref(0);
-  const typeParams = ref({
-    order: true, //顺序练习
-    answerShow: false, //背题模式
-  });
-  watch(currentType, (currentVal) => {
-    switch (currentVal) {
-      case 0:
-        typeParams.value.order = true;
-        typeParams.value.answerShow = false;
-        break;
-      case 1:
-        typeParams.value.order = false;
-        typeParams.value.answerShow = false;
-        break;
-      case 2:
-        typeParams.value.order = true;
-        typeParams.value.answerShow = true;
-        break;
-    }
-  });
-  return {
-    answerTypeList,
-    currentType,
-    typeParams,
-  };
+	const answerTypeList = ref([{ name: "顺序练习" }, { name: "随机练习" }, { name: "背题模式" }]);
+	const currentType = ref(0);
+	const typeParams = ref({
+		order: true, //顺序练习
+		answerShow: false, //背题模式
+	});
+	watch(currentType, (currentVal) => {
+		switch (currentVal) {
+			case 0:
+				typeParams.value.order = true;
+				typeParams.value.answerShow = false;
+				break;
+			case 1:
+				typeParams.value.order = false;
+				typeParams.value.answerShow = false;
+				break;
+			case 2:
+				typeParams.value.order = true;
+				typeParams.value.answerShow = true;
+				break;
+		}
+	});
+	return {
+		answerTypeList,
+		currentType,
+		typeParams,
+	};
 }
 
 //语音设置
 export function useAudioSet(currentSubject: ComputedRef<any>) {
-  const aotuPlayFlag = ref(false);
-
-  let sound: Howl;
-  /**
-   * 播放音频
-   * @param audioUrl
-   */
-  const audioPlay = (audioUrl: string | string[]) => {
-    audioPause();
-    sound = new Howl({
-      src: audioUrl,
-    });
-    sound.once("load", function () {
-      sound.play();
-    });
-    if (typeof audioUrl === "object") {
-      sound.once("end", () => {
-        sound = new Howl({
-          src: audioUrl[1],
-        });
-        sound.once("load", function () {
-          sound.play();
-        });
-      });
-    }
-  };
-
-  /**
-   * 读题
-   */
-  const subjectAudioPlay = (
-    type: "读题" | "读官方解释" | "读技巧解释" | "读题+答案"
-  ) => {
-    switch (type) {
-      case "读题":
-        audioPlay(currentSubject.value.issuemp3);
-        break;
-      case "读官方解释":
-        audioPlay(currentSubject.value.explainjsmp3);
-        break;
-      case "读技巧解释":
-        audioPlay(currentSubject.value.explainMp3);
-        break;
-      case "读题+答案":
-        audioPlay([
-          currentSubject.value.issuemp3,
-          currentSubject.value.answermp3,
-        ]);
-        break;
-      default:
-        break;
-    }
-  };
-
-  /**
-   * 停止播放
-   */
-  const audioPause = () => {
-    sound && sound.pause();
-  };
-
-  //音频模块end
-  const aotuPlaySet = () => {
-    aotuPlayFlag.value = !aotuPlayFlag.value;
-    aotuPlayFlag.value ? subjectAudioPlay("读题") : audioPause();
-  };
-
-  //自动读题
-  watch(currentSubject, () => {
-    if (aotuPlayFlag.value) subjectAudioPlay("读题"); //自动读题
-  });
-
-  return {
-    aotuPlayFlag,
-    aotuPlaySet,
-    subjectAudioPlay,
-  };
+	const aotuPlayFlag = ref(false);
+
+	let sound: Howl;
+	/**
+	 * 播放音频
+	 * @param audioUrl
+	 */
+	const audioPlay = (audioUrl: string | string[]) => {
+		audioPause();
+		sound = new Howl({
+			src: audioUrl,
+		});
+		sound.once("load", function () {
+			sound.play();
+		});
+		if (typeof audioUrl === "object") {
+			sound.once("end", () => {
+				sound = new Howl({
+					src: audioUrl[1],
+				});
+				sound.once("load", function () {
+					sound.play();
+				});
+			});
+		}
+	};
+
+	/**
+	 * 读题
+	 */
+	const subjectAudioPlay = (type: "读题" | "读官方解释" | "读技巧解释" | "读题+答案") => {
+		switch (type) {
+			case "读题":
+				audioPlay(currentSubject.value.issuemp3);
+				break;
+			case "读官方解释":
+				audioPlay(currentSubject.value.explainjsmp3);
+				break;
+			case "读技巧解释":
+				audioPlay(currentSubject.value.explainMp3);
+				break;
+			case "读题+答案":
+				audioPlay([currentSubject.value.issuemp3, currentSubject.value.answermp3]);
+				break;
+			default:
+				break;
+		}
+	};
+
+	/**
+	 * 停止播放
+	 */
+	const audioPause = () => {
+		sound && sound.pause();
+	};
+
+	//音频模块end
+	const aotuPlaySet = () => {
+		aotuPlayFlag.value = !aotuPlayFlag.value;
+		aotuPlayFlag.value ? subjectAudioPlay("读题") : audioPause();
+	};
+
+	//自动读题
+	watch(currentSubject, () => {
+		if (aotuPlayFlag.value) subjectAudioPlay("读题"); //自动读题
+	});
+
+	return {
+		aotuPlayFlag,
+		aotuPlaySet,
+		subjectAudioPlay,
+	};
 }
 
 const useSubjectList = () => {
-  const subjectList = ref<any[]>([]); //题目列表
-  const subjectTotal = ref(0); //题目总数
-  const pageNum = ref(1); //当前请求页码
-  const pageSize = ref(100); //当前请求每页数据
-  const query = useRoute().query; //路由query参数
-  onBeforeMount(async () => {
-    const res = await API.getTopicList({
-      ...query,
-      pageNum: pageNum.value,
-      pageSize: pageSize.value,
-      isRand: true,
-    });
-    subjectList.value = res.list;
-    subjectTotal.value = 100;
-  });
-  //加载下一页数据
-  const loadNewSubject = async () => {
-    if (subjectList.value.length == subjectTotal.value) return;
-    pageNum.value++;
-    const res = await API.getTopicList({
-      ...query,
-      pageNum: pageNum.value,
-      pageSize: pageSize.value,
-    });
-    subjectList.value = subjectList.value.concat(res.list);
-  };
-  const currentSubjectIndex = ref(0); //当前题目下标
-  //当前题目内容
-  const currentSubject = computed(() => {
-    return subjectList.value[currentSubjectIndex.value];
-  });
-  return {
-    subjectList,
-    subjectTotal,
-    loadNewSubject,
-    currentSubject,
-    currentSubjectIndex,
-  };
+	const subjectList = ref<any[]>([]); //题目列表
+	const subjectTotal = ref(0); //题目总数
+	const pageNum = ref(1); //当前请求页码
+	const pageSize = ref(100); //当前请求每页数据
+	const query = useRoute().query; //路由query参数
+	onBeforeMount(async () => {
+		const res = await testModel.getMockList({ ...query });
+		// const res = await API.getTopicList({
+		// 	...query,
+		// 	pageNum: pageNum.value,
+		// 	pageSize: pageSize.value,
+		// 	isRand: true,
+		// });
+		subjectList.value = res.list;
+		subjectTotal.value = res.total;
+	});
+	//加载下一页数据
+	const loadNewSubject = async () => {
+		if (subjectList.value.length == subjectTotal.value) return;
+		pageNum.value++;
+		const res = await API.getTopicList({
+			...query,
+			pageNum: pageNum.value,
+			pageSize: pageSize.value,
+		});
+		subjectList.value = subjectList.value.concat(res.list);
+	};
+	const currentSubjectIndex = ref(0); //当前题目下标
+	//当前题目内容
+	const currentSubject = computed(() => {
+		return subjectList.value[currentSubjectIndex.value];
+	});
+	return {
+		subjectList,
+		subjectTotal,
+		loadNewSubject,
+		currentSubject,
+		currentSubjectIndex,
+	};
 };
 
 const useSubjectCheck = (nextSubject: () => Promise<void>) => {
-  const trueNum = ref(0); //正确数量
-  const falseNum = ref(0); //错误数量
-  const isJumpNext = ref(false); //答对跳转下一题
-
-  /**
-   * 选择答案后进行校验
-   */
-  const userAnswerChange = (currentSubject: any) => {
-    try {
-      if (!currentSubject.userAnswer) return;
-
-      currentSubject.optsBack = currentSubject.opts.map((val: String) => {
-        let status;
-        if (currentSubject.answer.includes(val)) {
-          status = 1;
-        } else {
-          status = 0;
-        }
-        if (currentSubject.userAnswer.includes(val)) {
-          status += 2;
-        }
-        return { opt: val, status };
-      });
-      if (
-        JSON.stringify(currentSubject.answer) ==
-        JSON.stringify(currentSubject.userAnswer)
-      ) {
-        console.log("答案正确");
-        currentSubject.isTrue = true;
-        trueNum.value++;
-        if (isJumpNext.value) {
-          nextTick(() => {
-            nextSubject();
-          });
-        }
-      } else {
-        console.log("错误");
-        currentSubject.isTrue = false;
-        falseNum.value++;
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  return {
-    trueNum,
-    falseNum,
-    isJumpNext,
-    userAnswerChange,
-  };
+	const trueNum = ref(0); //正确数量
+	const falseNum = ref(0); //错误数量
+	const isJumpNext = ref(false); //答对跳转下一题
+
+	/**
+	 * 选择答案后进行校验
+	 */
+	const userAnswerChange = (currentSubject: any) => {
+		try {
+			if (!currentSubject.userAnswer) return;
+
+			currentSubject.optsBack = currentSubject.opts.map((val: String) => {
+				let status;
+				if (currentSubject.answer.includes(val)) {
+					status = 1;
+				} else {
+					status = 0;
+				}
+				if (currentSubject.userAnswer.includes(val)) {
+					status += 2;
+				}
+				return { opt: val, status };
+			});
+			if (JSON.stringify(currentSubject.answer) == JSON.stringify(currentSubject.userAnswer)) {
+				console.log("答案正确");
+				currentSubject.isTrue = true;
+				trueNum.value++;
+				if (isJumpNext.value) {
+					nextTick(() => {
+						nextSubject();
+					});
+				}
+			} else {
+				console.log("错误");
+				currentSubject.isTrue = false;
+				falseNum.value++;
+			}
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+	return {
+		trueNum,
+		falseNum,
+		isJumpNext,
+		userAnswerChange,
+	};
 };
 
 export const useSubjectShowLogic = () => {
-  const {
-    subjectList,
-    subjectTotal,
-    loadNewSubject,
-    currentSubject,
-    currentSubjectIndex,
-  } = useSubjectList(); //获取题目列表
-
-  const nextBtnState = ref(true); //下一题数据请求锁
-
-  /**
-   * 展示下一题
-   */
-  const nextSubject = async () => {
-    if (currentSubjectIndex.value < subjectList.value.length - 1) {
-      currentSubjectIndex.value++;
-    }
-  };
-  /**
-   * 展示上一题
-   */
-  const lastSubject = () => {
-    if (currentSubjectIndex.value > 0) {
-      currentSubjectIndex.value--;
-    }
-  };
-
-  const { trueNum, falseNum, isJumpNext, userAnswerChange } =
-    useSubjectCheck(nextSubject);
-
-  return {
-    currentSubject,
-    currentSubjectIndex,
-    subjectTotal,
-    nextSubject,
-    lastSubject,
-    trueNum,
-    falseNum,
-    isJumpNext,
-    subjectList,
-    userAnswerChange,
-  };
+	const { subjectList, subjectTotal, loadNewSubject, currentSubject, currentSubjectIndex } = useSubjectList(); //获取题目列表
+
+	const nextBtnState = ref(true); //下一题数据请求锁
+
+	/**
+	 * 展示下一题
+	 */
+	const nextSubject = async () => {
+		if (currentSubjectIndex.value < subjectList.value.length - 1) {
+			currentSubjectIndex.value++;
+		}
+	};
+	/**
+	 * 展示上一题
+	 */
+	const lastSubject = () => {
+		if (currentSubjectIndex.value > 0) {
+			currentSubjectIndex.value--;
+		}
+	};
+
+	const { trueNum, falseNum, isJumpNext, userAnswerChange } = useSubjectCheck(nextSubject);
+
+	return {
+		currentSubject,
+		currentSubjectIndex,
+		subjectTotal,
+		nextSubject,
+		lastSubject,
+		trueNum,
+		falseNum,
+		isJumpNext,
+		subjectList,
+		userAnswerChange,
+	};
 };

src/views/mockTest/components/initMockTest.vue

@@ -1,139 +1,131 @@
 <template>
-  <div class="header-back">
-    <m-nav-bar :transparent="true" title="模拟考试" />
-    <div class="user-data">
-      <m-user-avatar />
-      <m-user-name />
-    </div>
-  </div>
-  <div class="content">
-    <div class="title">考试说明</div>
-    <div class="class">
-      <span>考试科目</span>
-      <span>{{ query.name }}</span>
-    </div>
-    <div class="class">
-      <span>考试题库</span>
-      <span>{{ query.vehicle }}{{ query.cert }}</span>
-    </div>
-    <div class="class">
-      <span>考试时间</span>
-      <span>100题,45分钟</span>
-    </div>
-    <div class="class">
-      <span>合格标准</span>
-      <span>90分及格</span>
-    </div>
-    <div class="remind">
-      答题后不可修改，累计错题扣分导致分数不及格时，系统自动交卷，考试不通过。
-    </div>
-    <m-button
-      class="start"
-      width="266px"
-      height="40px"
-      text="开始考试"
-      @click="gotoNextPage"
-    />
-  </div>
+	<div class="header-back">
+		<m-nav-bar :transparent="true" title="模拟考试" />
+		<div class="user-data">
+			<m-user-avatar />
+			<m-user-name />
+		</div>
+	</div>
+	<div class="content">
+		<div class="title">考试说明</div>
+		<div class="class">
+			<span>考试科目</span>
+			<span>{{ query.name }}</span>
+		</div>
+		<div class="class">
+			<span>考试题库</span>
+			<span>{{ query.vehicle }}{{ query.cert }}</span>
+		</div>
+		<div class="class">
+			<span>考试时间</span>
+			<span>{{ query.subject == "1" ? 100 : 50 }}题,45分钟</span>
+		</div>
+		<div class="class">
+			<span>合格标准</span>
+			<span>90分及格</span>
+		</div>
+		<div class="remind">答题后不可修改，累计错题扣分导致分数不及格时，系统自动交卷，考试不通过。</div>
+		<m-button class="start" width="266px" height="40px" text="开始考试" @click="gotoNextPage" />
+	</div>
 </template>
 
 <script lang="ts">
-import { useRoute } from "vue-router";
+	import { useRoute } from "vue-router";
 </script>
 
 <script lang="ts" setup>
-import { defineEmits } from "vue";
-const emits = defineEmits(["next"]);
-const gotoNextPage = () => void emits("next");
-const { query } = useRoute();
+	import { defineEmits } from "vue";
+	const emits = defineEmits(["next"]);
+	const gotoNextPage = () => void emits("next");
+	const { query } = useRoute();
 </script>
 
 <style scoped lang="scss">
-.header-back {
-  width: 375px;
-  padding-bottom: 82px;
-  background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
-  border-radius: 0px 0px 82px 82px;
-  .header {
-    position: relative;
-    font-size: 15px;
-    padding: 15px;
-    color: #ffffff;
-    .title {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-  .user-data {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 15px;
-    justify-content: space-between;
-    height: 80px;
-    color: #ffffff;
-    font-size: 15px;
-    font-family: PingFang SC;
-    font-weight: 400;
-  }
-}
+	.header-back {
+		width: 375px;
+		padding-bottom: 82px;
+		background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
+		border-radius: 0px 0px 82px 82px;
+		.header {
+			position: relative;
+			font-size: 15px;
+			padding: 15px;
+			color: #ffffff;
+			.title {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+		.user-data {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 15px;
+			justify-content: space-between;
+			height: 80px;
+			color: #ffffff;
+			font-size: 15px;
+			font-family: PingFang SC;
+			font-weight: 400;
+		}
+	}
 
-.content {
-  width: 345px;
-  background: #ffffff;
-  box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.2);
-  border-radius: 10px;
-  position: relative;
-  left: 50%;
-  top: -52px;
-  transform: translateX(-50%);
-  padding: 38px 15px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .title {
-    font-size: 15px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    color: #0a1a33;
-    margin-bottom: 5px;
-  }
-  .class {
-    font-size: 13px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    display: flex;
-    justify-content: space-between;
-    width: 170px;
-    margin-top: 13px;
-    span {
-      &:nth-of-type(1) {
-        color: #8a9099;
-      }
-      &:nth-of-type(2) {
-        color: #5c6066;
-      }
-    }
-  }
-  .remind {
-    width: 315px;
-    background: rgba(255, 77, 83, 0.1);
-    font-size: 13px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    line-height: 19px;
-    color: #ff4d53;
-    padding: 8px 12px;
-    box-sizing: border-box;
-    margin-top: 24px;
-  }
-  .start {
-    color: #ffffff;
-    margin-top: 30px;
-    background: #498ef5;
-  }
-}
+	.content {
+		width: 345px;
+		background: #ffffff;
+		box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.2);
+		border-radius: 10px;
+		position: relative;
+		left: 50%;
+		top: -52px;
+		transform: translateX(-50%);
+		padding: 38px 15px;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		.title {
+			font-size: 15px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #0a1a33;
+			margin-bottom: 5px;
+		}
+		.class {
+			font-size: 13px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			display: flex;
+			justify-content: space-between;
+			width: 170px;
+			margin-top: 13px;
+			span {
+				&:nth-of-type(1) {
+					color: #8a9099;
+				}
+				&:nth-of-type(2) {
+					color: #5c6066;
+				}
+			}
+		}
+		.remind {
+			width: 315px;
+			background: rgba(255, 77, 83, 0.1);
+			font-size: 13px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			line-height: 19px;
+			color: #ff4d53;
+			padding: 8px 12px;
+			box-sizing: border-box;
+			margin-top: 24px;
+		}
+		.start {
+			color: #ffffff;
+			margin-top: 30px;
+			background: #498ef5;
+		}
+	}
 </style>

src/views/mockTest/components/mockTestEnd.vue

@@ -1,139 +1,140 @@
 <template>
-  <m-nav-bar title="考试结果" />
-  <div class="result-box" v-if="testResult">
-    <img class="img" src="/img/考试合格.png" />
-    <span class="text">恭喜你,测试通过~</span>
-    <div class="fraction-box">
-      <span class="fraction">{{ props.userTestData.testScores }}</span
-      >分
-    </div>
-    <span class="hint">（满分:100；合格:90）</span>
-    <span class="time">用时：{{ useTime }}</span>
-    <span class="evaluation"
-      >天赋异禀、骨骼惊奇，想来是百年难得一见的考试奇才。</span
-    >
-  </div>
-  <div class="result-box" v-else>
-    <img class="img" src="/img/考试不合格.png" />
-    <span class="text">抱歉,测试未通过~</span>
-    <div class="fraction-box">
-      <span class="fraction">{{ props.userTestData.testScores }}</span
-      >分
-    </div>
-    <span class="hint">（满分:100；合格:90）</span>
-    <span class="time">用时：{{ useTime }}</span>
-    <span class="evaluation"
-      >学车之路，任重而道远！路漫漫其修远兮，吾将上下而求索。</span
-    >
-  </div>
-  <div class="btn-box">
-    <m-button class="btn1" text="错题重做" />
-    <m-button @click="againTest" class="btn2" text="重新测试" />
-  </div>
+	<m-nav-bar title="考试结果" />
+	<div class="result-box" v-if="testResult">
+		<img class="img" src="/img/考试合格.png" />
+		<span class="text">恭喜你,测试通过~</span>
+		<div class="fraction-box">
+			<span class="fraction">{{ props.userTestData.testScores }}</span
+			>分
+		</div>
+		<span class="hint">（满分:100；合格:90）</span>
+		<span class="time">用时：{{ useTime }}</span>
+		<span class="evaluation">天赋异禀、骨骼惊奇，想来是百年难得一见的考试奇才。</span>
+	</div>
+	<div class="result-box" v-else>
+		<img class="img" src="/img/考试不合格.png" />
+		<span class="text">抱歉,测试未通过~</span>
+		<div class="fraction-box">
+			<span class="fraction">{{ props.userTestData.testScores }}</span
+			>分
+		</div>
+		<span class="hint">（满分:100；合格:90）</span>
+		<span class="time">用时：{{ useTime }}</span>
+		<span class="evaluation">学车之路，任重而道远！路漫漫其修远兮，吾将上下而求索。</span>
+	</div>
+	<div class="btn-box">
+		<m-button class="btn1" text="错题重做" />
+		<m-button @click="againTest" class="btn2" text="重新测试" />
+	</div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import dayjs from "dayjs";
-import { createTestScores } from "@/api";
-import { RouterBus } from "@/hooks";
-const props = defineProps(["userTestData"]);
-const emits = defineEmits(["next"]);
+	import { computed } from "vue";
+	import dayjs from "dayjs";
+	import { createTestScores } from "@/api";
+	import { RouterBus } from "@/hooks";
+	const props = defineProps<{
+		userTestData: {
+			testScores: number;
+			useTime: number;
+		};
+	}>();
+	const emits = defineEmits(["next"]);
 
-const {
-  route: { query },
-} = new RouterBus();
+	const {
+		route: { query },
+	} = new RouterBus();
 
-const againTest = () => void emits("next");
+	const againTest = () => void emits("next");
 
-//是否通过考试
-const testResult = computed(() => {
-  return props.userTestData.testScores >= 90;
-});
-//用时多久
-const useTime = computed(() => {
-  return dayjs(props.userTestData.useTime).format("mm分ss秒");
-});
+	//是否通过考试
+	const testResult = computed(() => {
+		return props.userTestData.testScores >= 90;
+	});
+	//用时多久
+	const useTime = computed(() => {
+		return dayjs(props.userTestData.useTime).format("mm分ss秒");
+	});
 
-//提交考试成绩
-createTestScores({
-  type: query.vehicle as string,
-  kskm: query.name as string,
-  score: props.userTestData.testScores,
-});
+	//提交考试成绩
+	createTestScores({
+		type: query.vehicle as string,
+		kskm: query.name as string,
+		score: props.userTestData.testScores,
+	});
 </script>
 
 <style lang="scss" scoped>
-.result-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 30px 15px;
-  .img {
-    width: 246px;
-    height: 216px;
-  }
-  .text {
-    margin-top: 23px;
-    font-size: 15px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    color: #5c6066;
-    line-height: 23px;
-  }
-  .fraction-box {
-    font-size: 15px;
-    font-family: PingFang SC;
-    font-weight: bold;
-    color: #8a9099;
-    line-height: 23px;
-    margin-top: 30px;
-    .fraction {
-      font-size: 60px;
-      font-family: PingFang SC;
-      font-weight: bold;
-      color: #ff4d53;
-    }
-  }
-  .hint {
-    font-size: 13px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    color: #8a9099;
-    line-height: 23px;
-  }
-  .time {
-    font-size: 13px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    color: #498ef5;
-    line-height: 23px;
-  }
-  .evaluation {
-    margin-top: 30px;
-    font-size: 15px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    color: #5c6066;
-    line-height: 23px;
-  }
-}
-.btn-box {
-  margin: 45px auto;
-  width: 230px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: #ffffff;
-  font-size: 15px;
-  font-family: PingFang SC;
-  font-weight: 400;
-  line-height: 23px;
-  .btn1 {
-    background-color: #498ef5;
-  }
-  .btn2 {
-    background-color: #01c18d;
-  }
-}
+	.result-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 30px 15px;
+		.img {
+			width: 246px;
+			height: 216px;
+		}
+		.text {
+			margin-top: 23px;
+			font-size: 15px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #5c6066;
+			line-height: 23px;
+		}
+		.fraction-box {
+			font-size: 15px;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #8a9099;
+			line-height: 23px;
+			margin-top: 30px;
+			.fraction {
+				font-size: 60px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #ff4d53;
+			}
+		}
+		.hint {
+			font-size: 13px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #8a9099;
+			line-height: 23px;
+		}
+		.time {
+			font-size: 13px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #498ef5;
+			line-height: 23px;
+		}
+		.evaluation {
+			margin-top: 30px;
+			font-size: 15px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #5c6066;
+			line-height: 23px;
+		}
+	}
+	.btn-box {
+		margin: 45px auto;
+		width: 230px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		color: #ffffff;
+		font-size: 15px;
+		font-family: PingFang SC;
+		font-weight: 400;
+		line-height: 23px;
+		.btn1 {
+			background-color: #498ef5;
+		}
+		.btn2 {
+			background-color: #01c18d;
+		}
+	}
 </style>

src/views/mockTest/components/startTest.vue

@@ -1,148 +1,96 @@
 <template>
-  <!-- 导航栏 -->
-  <van-nav-bar
-    :title="query.vehicle + '>' + query.name"
-    left-arrow
-    @click-left="back"
-    fixed
-    placeholder
-  >
-    <template #right>
-      <m-icon type="shezhi" @click="setShow = true" />
-    </template>
-  </van-nav-bar>
-  <!-- 导航栏end -->
-  <!-- 考试倒计时 -->
-  <div class="dowm-box">
-    <van-count-down
-      :time="45 * 60 * 1000"
-      format="剩余答题时间: mm分ss秒"
-      @change="useTimeChange"
-    />
-  </div>
-  <!-- 考试倒计时end -->
-  <!-- 分割线 -->
-  <div class="divider" />
-  <!-- 题目模块 -->
-  <!-- 题目预加载 -->
-  <m-empty v-if="!currentSubject" />
-  <!-- 题目预加载end -->
-  <div class="problem-box" v-else>
-    <!-- 题目内容 -->
-    <div class="problem">
-      <span class="type">{{ currentSubject.type }}</span>
-      <span class="text">{{ 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>
-    <!-- 选择内容 -->
-    <div v-if="true">
-      <!-- 单选 -->
-      <van-radio-group
-        v-model="currentSubject.userAnswer"
-        v-if="currentSubject.type != '多选题'"
-        icon-size="35px"
-      >
-        <van-radio
-          v-for="(item, index) in currentSubject.opts"
-          :key="Number(index)"
-          :name="item"
-          class="answer"
-          >{{ item }}
-          <template #icon="props">
-            <div class="choose-icon" :class="{ selected: props.checked }">
-              {{ String.fromCharCode(65 + Number(index)) }}
-            </div>
-          </template>
-        </van-radio>
-      </van-radio-group>
-      <!-- 多选 -->
-      <div v-else>
-        <van-checkbox-group
-          v-model="currentSubject.userAnswer"
-          icon-size="35px"
-        >
-          <van-checkbox
-            v-for="(item, index) in currentSubject.opts"
-            :key="Number(index)"
-            :name="item"
-            class="answer"
-            >{{ item }}
-            <template #icon="props">
-              <div class="choose-icon" :class="{ selected: props.checked }">
-                {{ String.fromCharCode(65 + Number(index)) }}
-              </div>
-            </template>
-          </van-checkbox>
-        </van-checkbox-group>
-      </div>
-    </div>
-    <!-- 展示答题后选择内容 -->
-    <div v-else-if="false">
-      <div>
-        <div
-          v-for="(item, index) in currentSubject.optsBack"
-          :key="Number(index)"
-          class="answer-box"
-        >
-          <div
-            class="choose-icon"
-            :class="{ iconTrue: item.status % 2 !== 0 }"
-            v-if="item.status < 2"
-          >
-            {{ String.fromCharCode(65 + Number(index)) }}
-          </div>
-          <m-icon
-            v-else-if="item.status == 3"
-            type="dui"
-            size="30px"
-            style="margin-left: 5px"
-          />
-          <m-icon
-            v-else-if="item.status == 2"
-            size="30px"
-            type="cuo"
-            style="margin-left: 5px"
-          />
-          <span
-            class="answer-text"
-            :class="{ true: item.status % 2 !== 0, false: item.status == 2 }"
-          >
-            {{ item.opt }}
-          </span>
-        </div>
-      </div>
-      <div class="checkbox-answer">
-        答案: {{ currentSubject.answer.toString() }}
-      </div>
-    </div>
-    <!-- 展示答题后选择内容end -->
-  </div>
-  <!-- 选择内容End -->
-  <!-- 分割线 -->
-  <van-divider />
-  <!-- 功能选择列表 -->
-  <div class="function-list">
-    <div class="function-item">
-      <m-icon type="shoucanghui" size="25px" />
-      <span>收藏</span>
-    </div>
-    <!-- <div class="function-item" @click="answerAudioPlay">
+	<!-- 导航栏 -->
+	<van-nav-bar :title="query.vehicle + '>' + query.name" left-arrow @click-left="back" fixed placeholder>
+		<template #right>
+			<m-icon type="shezhi" @click="setShow = true" />
+		</template>
+	</van-nav-bar>
+	<!-- 导航栏end -->
+	<!-- 考试倒计时 -->
+	<div class="dowm-box">
+		<van-count-down :time="45 * 60 * 1000" format="剩余答题时间: mm分ss秒" @change="useTimeChange" />
+	</div>
+	<!-- 考试倒计时end -->
+	<!-- 分割线 -->
+	<div class="divider" />
+	<!-- 题目模块 -->
+	<!-- 题目预加载 -->
+	<m-empty v-if="!currentSubject" />
+	<!-- 题目预加载end -->
+	<div class="problem-box" v-else>
+		<!-- 题目内容 -->
+		<div class="problem">
+			<span class="type">{{ currentSubject.type }}</span>
+			<span class="text">{{ 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>
+		<!-- 选择内容 -->
+		<div v-if="true">
+			<!-- 单选 -->
+			<van-radio-group v-model="currentSubject.userAnswer" v-if="currentSubject.type != '多选题'" icon-size="35px">
+				<van-radio v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
+					>{{ item }}
+					<template #icon="props">
+						<div class="choose-icon" :class="{ selected: props.checked }">
+							{{ String.fromCharCode(65 + Number(index)) }}
+						</div>
+					</template>
+				</van-radio>
+			</van-radio-group>
+			<!-- 多选 -->
+			<div v-else>
+				<van-checkbox-group v-model="currentSubject.userAnswer" icon-size="35px">
+					<van-checkbox v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
+						>{{ item }}
+						<template #icon="props">
+							<div class="choose-icon" :class="{ selected: props.checked }">
+								{{ String.fromCharCode(65 + Number(index)) }}
+							</div>
+						</template>
+					</van-checkbox>
+				</van-checkbox-group>
+			</div>
+		</div>
+		<!-- 展示答题后选择内容 -->
+		<div v-else-if="false">
+			<div>
+				<div v-for="(item, index) in currentSubject.optsBack" :key="Number(index)" class="answer-box">
+					<div class="choose-icon" :class="{ iconTrue: item.status % 2 !== 0 }" v-if="item.status < 2">
+						{{ String.fromCharCode(65 + Number(index)) }}
+					</div>
+					<m-icon v-else-if="item.status == 3" type="dui" size="30px" style="margin-left: 5px" />
+					<m-icon v-else-if="item.status == 2" size="30px" type="cuo" style="margin-left: 5px" />
+					<span class="answer-text" :class="{ true: item.status % 2 !== 0, false: item.status == 2 }">
+						{{ item.opt }}
+					</span>
+				</div>
+			</div>
+			<div class="checkbox-answer">答案: {{ currentSubject.answer.toString() }}</div>
+		</div>
+		<!-- 展示答题后选择内容end -->
+	</div>
+	<!-- 选择内容End -->
+	<!-- 分割线 -->
+	<van-divider />
+	<!-- 功能选择列表 -->
+	<div class="function-list">
+		<div class="function-item">
+			<m-icon type="shoucanghui" size="25px" />
+			<span>收藏</span>
+		</div>
+		<!-- <div class="function-item" @click="answerAudioPlay">
       <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="currentAnswerIndexBack">
+		<div class="function-item" @click="subjectAudioPlay('读题')">
+			<m-icon type="duti" size="25px" />
+			<span>读题</span>
+		</div>
+		<!-- <div class="function-item" @click="currentAnswerIndexBack">
       <m-icon type="shangyiti" size="25px" />
       <span>上一题</span>
     </div>
@@ -154,331 +102,325 @@
       <m-icon type="xiayiti" size="25px" />
       <span>下一题</span>
     </div> -->
-  </div>
-  <!-- 功能选择列表End -->
-  <!-- 题目模块end -->
-  <!-- 设置操作栏 -->
-  <van-popup v-model:show="setShow" position="bottom">
-    <van-cell center title="答题音效提示">
-      <template #right-icon>
-        <van-switch v-model="isSoundEffect" size="24" />
-      </template>
-    </van-cell>
-  </van-popup>
-  <!-- 设置操作栏end -->
-  <!-- 底部操作栏 -->
-  <!-- <div style="height: 40px"></div> -->
-  <!-- <m-button class="submitButton" text="交卷" /> -->
-  <van-tabbar placeholder route>
-    <van-tabbar-item @click="lastSubject"
-      >上一题
-      <template #icon>
-        <m-icon type="shangyiti" />
-      </template>
-    </van-tabbar-item>
-    <van-tabbar-item
-      >{{ currentSubjectIndex + 1 }}/{{ subjectTotal }}
-      <template #icon>
-        <m-icon type="zongtishu" />
-      </template>
-    </van-tabbar-item>
-    <van-tabbar-item @click="gotoTest"
-      >交卷
-      <template #icon>
-        <m-icon type="jiaojuan" />
-      </template>
-    </van-tabbar-item>
-    <van-tabbar-item @click="nextSubject"
-      >下一题
-      <template #icon>
-        <m-icon type="xiayiti" />
-      </template>
-    </van-tabbar-item>
-  </van-tabbar>
-  <!-- 底部操作栏end -->
+	</div>
+	<!-- 功能选择列表End -->
+	<!-- 题目模块end -->
+	<!-- 设置操作栏 -->
+	<van-popup v-model:show="setShow" position="bottom">
+		<van-cell center title="答题音效提示">
+			<template #right-icon>
+				<van-switch v-model="isSoundEffect" size="24" />
+			</template>
+		</van-cell>
+	</van-popup>
+	<!-- 设置操作栏end -->
+	<!-- 底部操作栏 -->
+	<!-- <div style="height: 40px"></div> -->
+	<!-- <m-button class="submitButton" text="交卷" /> -->
+	<van-tabbar placeholder route>
+		<van-tabbar-item @click="lastSubject"
+			>上一题
+			<template #icon>
+				<m-icon type="shangyiti" />
+			</template>
+		</van-tabbar-item>
+		<van-tabbar-item
+			>{{ currentSubjectIndex + 1 }}/{{ subjectTotal }}
+			<template #icon>
+				<m-icon type="zongtishu" />
+			</template>
+		</van-tabbar-item>
+		<van-tabbar-item @click="gotoTest"
+			>交卷
+			<template #icon>
+				<m-icon type="jiaojuan" />
+			</template>
+		</van-tabbar-item>
+		<van-tabbar-item @click="nextSubject"
+			>下一题
+			<template #icon>
+				<m-icon type="xiayiti" />
+			</template>
+		</van-tabbar-item>
+	</van-tabbar>
+	<!-- 底部操作栏end -->
 </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 } 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"]);
-const emits = defineEmits(["next", "update:userTestData"]);
+	//父级传参
+	const props = defineProps<{
+		userTestData: {
+			testScores: number;
+			useTime: number;
+		};
+	}>();
+	const emits = defineEmits(["next", "update:userTestData"]);
 
-const useTime = ref(0);
-const useTimeChange = (e: any) => {
-  useTime.value = 45 * 60 * 1000 - e.total;
-};
+	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,
-  });
-  emits("next");
-};
+	//计算分数
+	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: "确认交卷吗?",
-  })
-    .then(() => {
-      scoreCalc();
-    })
-    .catch(() => {});
-};
+	const gotoTest = () => {
+		Dialog.confirm({
+			message: "确认交卷吗?",
+		})
+			.then(() => {
+				scoreCalc();
+			})
+			.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 {
-  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;
-    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;
-  span {
-    border-radius: 20px;
-    padding: 3px 10px;
-    background-color: #b8c0cc;
-    color: #ffffff;
-  }
-  .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;
-    }
-    .text {
-      font-family: PingFang SC;
-      font-weight: 400;
-      color: #0a1a33;
-      letter-spacing: 0.3px;
-    }
-    .img {
-      width: 100%;
-      margin-top: 10px;
-    }
-  }
-  .answer {
-    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;
-    }
-  }
+	.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;
+			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;
+		span {
+			border-radius: 20px;
+			padding: 3px 10px;
+			background-color: #b8c0cc;
+			color: #ffffff;
+		}
+		.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;
+			}
+			.text {
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #0a1a33;
+				letter-spacing: 0.3px;
+			}
+			.img {
+				width: 100%;
+				margin-top: 10px;
+			}
+		}
+		.answer {
+			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;
+			}
+		}
 
-  .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;
-  }
-  .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;
-    }
-    .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;
-        }
-      }
-    }
-  }
-}
+		.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;
+		}
+		.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;
+			}
+			.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;
+					}
+				}
+			}
+		}
+	}
 
-.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>

vite.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
 import path from "path";
 import fs from "fs";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [vue()],
+	plugins: [vue(), vueJsx({})],
 	resolve: {
 		alias: {
 			"@": path.resolve(__dirname, "src"),