diff --git a/package-lock.json b/package-lock.json
index d94eee0..e8e3624 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "evaluation-system",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.13.2",
         "core-js": "^3.8.3",
         "vue": "^2.6.14",
         "vue-router": "^3.6.5"
@@ -3201,6 +3202,12 @@
       "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3247,6 +3254,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.4.1",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz",
@@ -3579,7 +3597,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -3888,6 +3905,18 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -4657,6 +4686,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -4820,7 +4858,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -4950,7 +4987,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4959,7 +4995,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4974,7 +5009,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -4982,6 +5016,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
@@ -5838,7 +5887,6 @@
       "version": "1.15.11",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.11.tgz",
       "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -5854,6 +5902,22 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -5930,7 +5994,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5963,7 +6026,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
@@ -5987,7 +6049,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "dependencies": {
         "dunder-proto": "^1.0.1",
         "es-object-atoms": "^1.0.0"
@@ -6098,7 +6159,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -6158,7 +6218,21 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -6176,7 +6250,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -7251,7 +7324,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -7354,7 +7426,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7363,7 +7434,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8840,6 +8910,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -13661,6 +13737,11 @@
       "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
       "dev": true
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -13681,6 +13762,16 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "requires": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "babel-loader": {
       "version": "8.4.1",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz",
@@ -13922,7 +14013,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "requires": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -14149,6 +14239,14 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -14689,6 +14787,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -14814,7 +14917,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "requires": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -14919,14 +15021,12 @@
     "es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="
     },
     "es-errors": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
     },
     "es-module-lexer": {
       "version": "1.7.0",
@@ -14938,11 +15038,21 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "requires": {
         "es-errors": "^1.3.0"
       }
     },
+    "es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "requires": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      }
+    },
     "escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
@@ -15588,8 +15698,19 @@
     "follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.11.tgz",
-      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
-      "dev": true
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ=="
+    },
+    "form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      }
     },
     "forwarded": {
       "version": "0.2.0",
@@ -15643,8 +15764,7 @@
     "function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -15668,7 +15788,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "requires": {
         "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
@@ -15686,7 +15805,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "requires": {
         "dunder-proto": "^1.0.1",
         "es-object-atoms": "^1.0.0"
@@ -15764,8 +15882,7 @@
     "gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="
     },
     "graceful-fs": {
       "version": "4.2.11",
@@ -15806,8 +15923,15 @@
     "has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="
+    },
+    "has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "requires": {
+        "has-symbols": "^1.0.3"
+      }
     },
     "hash-sum": {
       "version": "2.0.0",
@@ -15819,7 +15943,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.2"
       }
@@ -16625,8 +16748,7 @@
     "math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="
     },
     "mdn-data": {
       "version": "2.0.14",
@@ -16701,14 +16823,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -17743,6 +17863,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
diff --git a/package.json b/package.json
index 9bc76b9..d44482b 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.13.2",
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
     "vue-router": "^3.6.5"
diff --git a/src/assets/buy.jpg b/src/assets/buy.jpg
new file mode 100644
index 0000000..b59b351
Binary files /dev/null and b/src/assets/buy.jpg differ
diff --git a/src/assets/false.jpg b/src/assets/false.jpg
new file mode 100644
index 0000000..592b919
Binary files /dev/null and b/src/assets/false.jpg differ
diff --git a/src/assets/huiche.png b/src/assets/huiche.png
new file mode 100644
index 0000000..0da1591
Binary files /dev/null and b/src/assets/huiche.png differ
diff --git a/src/assets/result.jpg b/src/assets/result.jpg
new file mode 100644
index 0000000..7f7b514
Binary files /dev/null and b/src/assets/result.jpg differ
diff --git a/src/assets/square.jpg b/src/assets/square.jpg
new file mode 100644
index 0000000..282aeb9
Binary files /dev/null and b/src/assets/square.jpg differ
diff --git a/src/assets/true.jpg b/src/assets/true.jpg
new file mode 100644
index 0000000..69e9b99
Binary files /dev/null and b/src/assets/true.jpg differ
diff --git a/src/main.js b/src/main.js
index cb7f765..0f92d7c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,13 @@ import Vue from 'vue'
 import App from './App.vue'
 // import router from '../src/router/index'
 import router from './router/index'
+import axios from 'axios'
+
+// 配置 axios
+Vue.prototype.$axios = axios
+
+// 可选：配置默认 baseURL
+axios.defaults.baseURL = 'http://192.168.40.41:8000'
 
 Vue.config.productionTip = false
 
diff --git a/src/router/index.js b/src/router/index.js
index d1b1d4d..a4609e2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,7 @@ import ProblemView from '@/views/ProblemView.vue'
 import ResultView from '@/views/ResultView.vue'
 // import { component } from 'vue/types/umd'
 import HomeView from '@/views/HomeView.vue'
+import BuyView from '@/views/BuyView.vue'
 
 Vue.use(VueRouter)
 
@@ -37,6 +38,11 @@ const routes = [
     component: ReportView
   },
   {
+    path: '/buy',
+    name: 'BuyView',
+    component: BuyView
+  },
+  {
     path: '/problem',
     name: 'ProblemView',
     component: ProblemView
diff --git a/src/views/BuyView.vue b/src/views/BuyView.vue
new file mode 100644
index 0000000..731a0c6
--- /dev/null
+++ b/src/views/BuyView.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="home">
+        <div class="enter" @click="enter">
+            <img src="../assets/huiche.png" alt="返回上一页" class="img1">
+        </div>
+    </div>
+</template>
+<script>
+export default{
+    name:'BuyView',
+    data(){
+        return{
+
+        };
+    },
+    methods:{
+        enter(){
+            this.$router.push({
+                name:'ReportView'
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+    .home{
+        width: 100%;
+        height: 100%;
+        background-image: url('@/assets/buy.jpg');
+        color: white;
+        padding: 20px;
+    }
+    .enter{
+        position: relative;
+        top: 45px;
+        left: 360px;
+    }
+    .img1{
+        width: 70px;
+        height: 60px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b86ee27..62ea300 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,18 +1,45 @@
 <template>
   <div>
-    <router-link to="/text" class="center">
+    <div class="center" @click="jumpPage">
       <img src="../assets/enter.jpg" alt="进入测试" class="image">
-    </router-link>
+    </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios';
 export default {
   name: 'App',
   data() {
     return {
       activeTab: 'question'
     }
+  },
+  methods:{
+    async jumpPage(){
+      const submissionData={
+        // jwcode:90098890,
+        jwcode:90098888
+      };
+      localStorage.setItem('submissionData', JSON.stringify(submissionData));
+      console.log('存储的数据:', localStorage.getItem('submissionData'));
+      try{
+        const res = await axios.post('http://192.168.40.41:8000/api/knowledge/scores',submissionData);
+        this.score = res.data.data[0].score;
+        console.log(this.score);
+        if(this.score==null){
+          this.$router.push('/text');
+        }
+        else{
+          this.$router.push('/report');
+        }
+      }catch(err){
+          this.$router.push('/text');
+      }
+    }
+  },
+  async mounted(){
+    localStorage.removeItem('submissionData');
   }
 }
 </script>
@@ -25,7 +52,6 @@ export default {
 }
 
 div {
-  position: relative;
   min-height: 100vh;
   display: flex;
   justify-content: center;
@@ -38,14 +64,12 @@ div {
 
 .image {
   position: absolute;
-  /* 方法1：使用具体像素值定位 */
-  bottom: 80px;  /* 距离底部100px */
+  bottom: 80px;
   right: 54%;
-  width: 200px; /* 初始大小 */
+  width: 200px;
   height: 160px;
   object-fit: contain;
   transition: all 0.3s ease;
-  border-radius: 10px;
 }
 
 .center:hover .image {
diff --git a/src/views/ProblemView.vue b/src/views/ProblemView.vue
index e69de29..d96e63b 100644
--- a/src/views/ProblemView.vue
+++ b/src/views/ProblemView.vue
@@ -0,0 +1,175 @@
+<template>
+    <div class="home">
+        <div class="top">
+            <div class="img-top" @click="jump">
+                <img src="../assets/return.jpg" alt="返回" class="img1">
+            </div>
+            <span>
+                <h1>📈股票知识评测系统</h1>
+            </span>
+            <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
+        </div>
+        <div class="popup-all" v-if="showDialog">
+            <div class="popup-top" @click="closeDialog"></div>
+            <div class="popup-content">
+                <h3>确认提示</h3>
+                <p>确定返回报告吗？</p>
+                <div class="popup-buttons">
+                    <button class="cancel-btn" @click="closeDialog">取消</button>
+                    <button class="confirm-btn" @click="confirmExit">确定</button>
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <div class="question-all">
+                <div v-for="problem in currentProblem" :key="problem.id" class="question-card">
+                    <div class="question">
+                        <span class="text">{{problem.id}}、</span>{{ problem.stem }}
+                    </div>
+                </div>
+                <div class="options">
+                    <lable class="option">
+                        <input type="radio">
+                    </lable>
+                    <lable class="option">
+                        <input type="radio">
+                    </lable>
+                    <lable class="option">
+                        <input type="radio">
+                    </lable>
+                    <lable class="option">
+                        <input type="radio">
+                    </lable>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            showDialog: false
+        }
+    },
+    methods: {
+        jump() {
+            this.showDialog = true;
+        },
+        closeDialog() {
+            this.showDialog = false;
+        },
+        confirmExit() {
+            this.showDialog = false;
+            this.$router.push({ name: 'ReportView' });
+        }
+    }
+}
+</script>
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+.home{
+    min-height: 100vh;
+    width: 100%;
+    background-color: #24293c;
+    overflow:auto;
+    padding: 10px;
+}
+.top{
+    background:#0c4a6e;
+    color: white;
+    padding: 30px;
+    margin-bottom: 10px;
+    position: relative;
+}
+.img-top{
+    float: left;
+}
+.img-top:hover{
+    transform: scale(1.1);
+}
+.img1{
+  width: 30px;
+  height: 50px;
+  float: left;
+}
+h1{
+    margin-bottom: 10px;
+    background: none;
+    font-size: 2.2em;
+}
+p{
+    font-size: 1.2em;
+    margin-bottom: 10px;
+    background: none;
+}
+.popup-all{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.popup-top{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+}
+.popup-content{
+    background-color: #f1f5f9;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.3);
+}
+.popup-buttons{
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+}
+.cancel-btn{
+    background-color: #f1f5f9;
+    color: #24293c;
+    border-radius: 10px;
+    border: transparent 0px ;
+    margin: 5px;
+    padding: 5px 10px;
+}
+.confirm-btn{
+    background-color: #22608b;
+    color: #f1f5f9;
+    border-radius: 10px;
+    border: transparent 0px ;
+    margin: 5px;
+    padding: 5px 10px;
+}
+.content {
+  float: left;
+  width: calc(65% - 20px);
+  min-height: 920px;
+  border: #274779 solid 2px;
+  border-radius: 10px;
+  color: #f1f5f9;
+  padding: 20px 40px 50px;
+  margin-right: 20px;
+  background-color: #2a3147;
+}
+.question-all{
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ReportView.vue b/src/views/ReportView.vue
index e69de29..cf54d55 100644
--- a/src/views/ReportView.vue
+++ b/src/views/ReportView.vue
@@ -0,0 +1,348 @@
+<template>
+    <div class="home">
+        <div class="top">
+            <div @click="showConfirmDialog" class="ret-top">
+                <img src="../assets/return.jpg" alt="返回" class="ret">
+            </div>
+            <h1>📈股票知识评测系统</h1>
+            <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
+        </div>
+        <div class="popup-block" v-if="showDialog">
+            <div class="popup-top" @click="closeDialog"></div>
+            <div class="popup-content">
+                <h3>确认提示</h3>
+                <p>确定要退出吗？</p>
+                <div class="popup-buttons">
+                    <button class="cancel-btn" @click="closeDialog">取消</button>
+                    <button class="confirm-btn" @click="confirmExit">确定</button>
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <h1>系统分析报告</h1>
+            
+            <div class="right">
+                <div class="right-top">
+                    <img src="../assets/square.jpg" alt="柱状图展示....." class="img3">
+                    <div class="right-top-left">
+                        <div v-show="score!=100" >
+                            <img src="../assets/false.jpg" alt="继续努力....." class="img1">
+                        </div>
+                        <div v-show="score==100" >
+                            <img src="../assets/true.jpg" alt="你真棒....." class="img2">
+                        </div>
+                        <div>
+                            <p style="font-size: 2.2em;text-align: center;">您的分数是：{{this.score}}分</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="left">
+                    <p>最好的投资是投资自己，而最好的课程是，是适合你的课程</p><br>
+                    <p>人无法赚到认知以外的钱，请根据测试结果，聚焦你的核心短板进行强化，扩大你的认知边界</p>
+                </div>
+                <div class="right-down">
+                    <div v-show="score==100">
+                        <p>恭喜您全部回答正确</p>
+                        <p>接下还需巩固知识</p>
+                        <p>推荐课程是：量能擒牛</p>
+                    </div>
+                    <div v-show="score!=100">
+                        <p>接下还需巩固知识</p>
+                        <p>推荐课程是：量能擒牛</p>
+                    </div>
+                </div>
+            </div>
+            <div class="content-button">
+                <button class="check-btn" @click="goCheck">查看错题</button>
+                <button class="buy-btn" @click="goBuy">前往购买</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script scoped>
+import axios from 'axios';
+export default{
+        name: 'ReportView',
+        data() {
+            return {
+                showDialog:false,
+                score:0,
+                give: null
+            };
+        },
+        methods:{
+            async getScore(){
+                const submissionData = JSON.parse(localStorage.getItem('submissionData'));
+                console.log('第一个'+submissionData);
+                try{
+                    const res = await axios.post('http://192.168.40.41:8000/api/knowledge/scores',submissionData);
+                    this.score = res.data.data[0].score;
+                    console.log('第二个'+this.score);
+                }catch(err){
+                    console.log(err);
+                }
+            }, 
+            showConfirmDialog() {
+                this.showDialog = true;
+            },
+            closeDialog() {
+                this.showDialog = false;
+            },
+            confirmExit() {
+                this.showDialog = false;
+                this.$router.push('/');
+            },
+            goBuy() {
+                this.$router.push('/buy');
+            },
+            goCheck() {
+                this.$router.push('/problem');
+            },
+        },
+        async mounted(){
+            await this.getScore();
+        }
+    }
+</script>
+
+<style>
+    .ret{
+        width: 30px;
+        height: 50px;
+        float: left;
+    }
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+    .top {
+        background: linear-gradient(135deg, #0c4a6e 100%);
+        color: white;
+        padding: 30px;
+        margin-bottom: 30px;
+        border-radius: 10px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        position: relative;
+        overflow: hidden;
+    }
+    .top h1 {
+        font-size: 2.2em;
+        margin-bottom: 10px;
+        background: none;
+    }
+    .top p {
+        font-size: 1.1em;
+        opacity: 0.9;
+        background: none;
+    }
+    .home {
+        min-height: 100vh;
+        width: 100%;
+        background-color: #24293c;
+        overflow: auto;
+        padding: 20px;
+    }
+    .ret-top  {
+        float: left;
+        cursor: pointer;
+        transition: transform 0.3s ease;
+    }
+
+    .ret-top:hover {
+        transform: scale(1.1);
+    }
+    .content{
+        border: #274779 solid 2px;
+        border-radius: 50px;
+        padding: 15px;
+        margin-bottom: 20px;
+        background-color: #2f374d;
+        padding: 30px;
+        color: white;
+    }
+    .left{
+        border: #274779 solid 2px;
+        border-radius: 50px;
+        padding: 15px;
+        margin-bottom: 20px;
+        background-color: #2f374d;
+        width: 30%;
+        top: 200px;
+        float: right;
+        margin: 10px 0;
+        padding: 20px;
+        color: #65befc;
+    }
+    
+    .right-top{
+        border: #274779 solid 2px;
+        border-radius: 50px;
+        padding: 15px;
+        margin-bottom: 20px;
+        background-color: #2f374d;
+        width: 65%;
+        margin: 10px;
+        padding: 30px 40px;
+        float: left;
+    }
+    .img3{
+        width: 600px;
+        height: 400px;
+        float: left;
+        margin: auto;
+    }
+    .right-top-left{
+        float: right;
+        margin-right: 50px;
+        margin-top: 30px;
+    }
+    .right-down{
+        border: #274779 solid 2px;
+        border-radius: 50px;
+        padding: 15px;
+        margin-bottom: 20px;
+        background-color: #2f374d;
+        width: 65%;
+        height: 300px;
+        float: left; 
+        margin: 10px;
+        padding-top: 40px;
+        padding-left: 60px;
+        clear: right;
+    }
+    .content::after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+    
+    .ret-top {
+        float: left;
+        cursor: pointer;
+        transition: transform 0.3s ease;
+    }
+
+    .ret-top:hover {
+        transform: scale(1.1);
+    }
+    .popup-block {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+    }
+
+    .popup-top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(5px);
+    }
+
+    .popup-content {
+        position: relative;
+        background: white;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        max-width: 400px;
+        width: 90%;
+        text-align: center;
+        z-index: 1001;
+        animation: dialogSlideIn 0.3s ease-out;
+    }
+
+    .popup-content h3 {
+        color: #333;
+        margin-bottom: 15px;
+        font-size: 1.4em;
+    }
+
+    .popup-content p {
+        color: #666;
+        margin-bottom: 25px;
+        font-size: 2.2em;
+        line-height: 1.5;
+    }
+
+    .popup-buttons {
+        display: flex;
+        gap: 15px;
+        justify-content: center;
+    }
+
+    .cancel-btn, .confirm-btn {
+        padding: 12px 30px;
+        border: none;
+        border-radius: 8px;
+        font-size: 1em;
+        font-weight: bold;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        min-width: 100px;
+    }
+
+    .cancel-btn {
+        background: #f1f1f1;
+        color: #666;
+    }
+
+    .cancel-btn:hover {
+        background: #e0e0e0;
+    }
+
+    .confirm-btn {
+        background: #ff4757;
+        color: white;
+    }
+
+    .confirm-btn:hover {
+        background: #ff3742;
+        transform: translateY(-2px);
+    }
+    .img1,.img2{
+        width: 270px;
+        height: 180px;
+        float: left;
+        margin: auto;
+    }
+    .right-down p{
+        font-size: 2.2em;
+        line-height: 1.5;
+        color: #65befc;
+    }
+    .left p{
+        font-size: 2.2em;
+        line-height: 1.5;
+    }
+    .content-button{
+        margin-top: 30px;
+        text-align: center;
+    }
+    .buy-btn,.check-btn{
+        position: relative;
+        top:200px;
+        padding: 12px 30px;
+        border: none;
+        border-radius: 8px;
+        font-size: 2em;
+        font-weight: bold;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        min-width: 100px;
+        background-color: #22608b;
+        color: white;
+        margin:40px;
+        float: right;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index 1b5736f..dd0ee3d 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -1,41 +1,81 @@
 <template>
     <div class="home">
         <div class="top">
-            <router-link to="/"><img src="../assets/return.jpg" alt="返回" class="ret"></router-link>
+            <div @click="showConfirmDialog" class="ret-top">
+                <img src="../assets/return.jpg" alt="返回" class="ret">
+            </div>
             <h1>📈股票知识评测系统</h1>
             <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
         </div>
-        <div class="content">
-            <p class="p1">恭喜您完成测评</p>
-            <!-- <el-icon-circle-check></el-icon-circle-check> -->
+        <div class="popup-block" v-if="showDialog">
+            <div class="popup-top" @click="closeDialog"></div>
+            <div class="popup-content">
+                <h3>确认提示</h3>
+                <p>还未查看分析报告，确定要退出吗？</p>
+                <div class="popup-buttons">
+                    <button class="cancel-btn" @click="closeDialog">取消</button>
+                    <button class="confirm-btn" @click="confirmExit">确定</button>
+                </div>
+            </div>
         </div>
-        <div class="p2">
-            <router-link to="/report">查看分析报告</router-link>
+        <div class="content">
+            <div class="block">
+                <div class="section">
+                    <p class="p1">恭喜您完成测评</p>
+                    <img src="../assets/result.jpg" alt="完成测评" class="result">
+                    <div class="p2" @click="show">
+                        <p>查看分析报告</p>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
-
 </template>
 <script>
     export default{
         name: 'ResultView',
         data() {
             return {
-
+                showDialog:false
             };
         },
         methods:{
             show(){
-                this.$router.path('/report');
-            }
+                this.$router.push('/report');
+            },
+            // 显示确认弹框
+            showConfirmDialog() {
+                this.showDialog = true;
+            },
+            // 关闭弹框
+            closeDialog() {
+            this.showDialog = false;
+            },
+            
+            // 确认退出
+            confirmExit() {
+            this.showDialog = false;
+            // 跳转到首页
+            this.$router.push('/');
+            },
         }
     }
 </script>
-<style>
+<style scoped>
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }
+    
+    .home {
+        min-height: 100vh;
+        width: 100%;
+        background-color: #24293c;
+        overflow: auto;
+        padding: 20px;
+    }
+    
     .top {
         background: linear-gradient(135deg, #0c4a6e 100%);
         color: white;
@@ -45,49 +85,190 @@
         box-shadow: 0 10px 30px rgba(0,0,0,0.3);
         position: relative;
         overflow: hidden;
-        /* text-align: center; */
     }
+    
     .top h1 {
         font-size: 2.2em;
         margin-bottom: 10px;
         background: none;
     }
+    
     .top p {
         font-size: 1.1em;
         opacity: 0.9;
         background: none;
     }
-    .ret{
+    
+    .ret {
         width: 30px;
         height: 50px;
         float: left;
     }
-    .home {
-        min-height: 100vh;
-        width: 100%;
-        background-color: #24293c;
-        overflow: auto;
-        padding: 20px;
-    }
+    
     .content {
-        float: left;
-        width:100%;
-        height: 720px;
-        border: #183954 solid 2px;
+        height: 750px;
+        width: 100%;
+        min-height: 600px;
+        border: #274779 solid 2px;
         border-radius: 10px;
         color: #f1f5f9;
-        padding: 20px 40px 50px;
-        margin-right: 20px;
+        padding: 40px 20px;
         background-color: #2a3147;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .block {
+        width: 100%;
+        max-width: 800px;
+    }
+
+    .section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 30px;
+        text-align: center;
+    }
+    
+    .p1 {
+        font-size: clamp(2rem, 5vw, 3.5rem);
+        font-weight: bold;
+        color: #f1f5f9;
+        text-align: center;
+        margin: 0;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    }
+    
+    .result {
+        width: min(210px, 30vw);
+        height: auto;
+        max-width: 100%;
+        display: block;
+        margin: 0 auto;
+    }
+    
+    .p2 {
+        width: min(280px, 80vw);
+        height: 60px;
+        background: linear-gradient(135deg, #22608b, #2c7cb0);
+        color: white;
+        text-align: center;
+        border-radius: 12px;
+        font-size: 1.2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 2px solid rgba(255,255,255,0.1);
+        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    }
+    
+    .p2:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        background: linear-gradient(135deg, #2c7cb0, #3498db);
+    }
+    
+    .p2 p {
+        margin: 0;
+        font-weight: bold;
+        font-size: clamp(1rem, 3vw, 1.3rem);
+    }
+    .ret-top {
+        float: left;
+        cursor: pointer;
+        transition: transform 0.3s ease;
+    }
+
+    .ret-top:hover {
+        transform: scale(1.1);
     }
-    .p1{
-        font-size: 40px;
+    .popup-block {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+    }
+
+    .popup-top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(5px);
+    }
+
+    .popup-content {
+        position: relative;
+        background: white;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        max-width: 400px;
+        width: 90%;
         text-align: center;
+        z-index: 1001;
+        animation: dialogSlideIn 0.3s ease-out;
     }
-    .home .p2{
-        height: 100px;
-        width: 200px;
-        background-color: #22608b;
+
+    .popup-content h3 {
+        color: #333;
+        margin-bottom: 15px;
+        font-size: 1.4em;
+    }
+
+    .popup-content p {
+        color: #666;
+        margin-bottom: 25px;
+        font-size: 1.1em;
+        line-height: 1.5;
+    }
+
+    .popup-buttons {
+        display: flex;
+        gap: 15px;
+        justify-content: center;
+    }
+
+    .cancel-btn, .confirm-btn {
+        padding: 12px 30px;
+        border: none;
+        border-radius: 8px;
+        font-size: 1em;
+        font-weight: bold;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        min-width: 100px;
+    }
+
+    .cancel-btn {
+        background: #f1f1f1;
+        color: #666;
+    }
+
+    .cancel-btn:hover {
+        background: #e0e0e0;
+    }
+
+    .confirm-btn {
+        background: #ff4757;
         color: white;
     }
+
+    .confirm-btn:hover {
+        background: #ff3742;
+        transform: translateY(-2px);
+    }
 </style>
\ No newline at end of file
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 4b5e8da..d8b51cb 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,14 +1,28 @@
 <template>
     <div class="home">
         <div class="top">
+            <div class="img-top" @click="jump">
+                <img src="../assets/return.jpg" alt="返回" class="img1">
+            </div>
             <span>
                 <h1>📈股票知识评测系统</h1>
             </span>
             <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
         </div>
+        <div class="popup-all" v-if="showDialog">
+            <div class="popup-top" @click="closeDialog"></div>
+            <div class="popup-content">
+                <h3>确认提示</h3>
+                <p>您还未提交，确定要退出吗？</p>
+                <div class="popup-buttons">
+                    <button class="cancel-btn" @click="closeDialog">取消</button>
+                    <button class="confirm-btn" @click="confirmExit">确定</button>
+                </div>
+            </div>
+        </div>
         <div class="content">
             <div class="block">
-                <div class="schedule"></div>
+                <div class="schedule" :style="{ width: progress + '%' }"></div>
             </div>
             <div class="text">
                 <div class="question">1、以下哪项不是股票的基本特征？</div>
@@ -70,33 +84,115 @@
     </div>
 </template>
 <script>
-
+export default {
+    data() {
+        return {
+            showDialog: false
+        }
+    },
+    methods: {
+        jump() {
+            this.showDialog = true;
+        },
+        closeDialog() {
+            this.showDialog = false;
+        },
+        confirmExit() {
+            this.showDialog = false;
+            this.$router.push({ name: 'HomeView' });
+        }
+    }
+}
 </script>
 <style scoped>
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    /* background-color: #24293c; */
 }
 .home{
     min-height: 100vh;
     width: 100%;
     background-color: #24293c;
     overflow:auto;
+    padding: 10px;
 }
 .top{
-    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
+    background:#0c4a6e;
     color: white;
     padding: 30px;
-    margin-bottom: 30px;
-    /* box-shadow: 0 10px 30px rgba(0,0,0,0.3); */
+    margin-bottom: 10px;
     position: relative;
-    overflow: hidden;
 }
-h1,p{
-    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
+.img-top{
+    float: left;
+}
+.img-top:hover{
+    transform: scale(1.1);
+}
+.img1{
+  width: 30px;
+  height: 50px;
+  float: left;
+}
+h1{
+    margin-bottom: 10px;
+    background: none;
+    font-size: 2.2em;
+}
+p{
+    font-size: 1.2em;
+    margin-bottom: 10px;
+    background: none;
+}
+.popup-all{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.popup-top{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
 }
+.popup-content{
+    background-color: #f1f5f9;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.3);
+}
+.popup-buttons{
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+}
+.cancel-btn{
+    background-color: #f1f5f9;
+    color: #24293c;
+    border-radius: 10px;
+    border: transparent 0px ;
+    margin: 5px;
+    padding: 5px 10px;
+}
+.confirm-btn{
+    background-color: #22608b;
+    color: #f1f5f9;
+    border-radius: 10px;
+    border: transparent 0px ;
+    margin: 5px;
+    padding: 5px 10px;
+}
+
 .block {
     background: rgba(139, 141, 145, 0.7);
     width: 90%;
diff --git a/src/views/TextView.vue b/src/views/TextView.vue
index 76cd251..20199b8 100644
--- a/src/views/TextView.vue
+++ b/src/views/TextView.vue
@@ -1,64 +1,110 @@
 <template>
   <div class="home">
     <div class="top">
-      <router-link to="/"><img src="../assets/return.jpg" alt="返回" class="ret"></router-link>
+      <div @click="showConfirmDialog" class="ret-container">
+        <img src="../assets/return.jpg" alt="返回" class="ret">
+      </div>
       <h1>📈股票知识评测系统</h1>
       <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
     </div>
+    
+    <div class="confirm-dialog" v-if="showDialog">
+      <div class="dialog-overlay" @click="closeDialog"></div>
+      <div class="dialog-content">
+        <h3>确认提示</h3>
+        <p>您还未提交，确定要退出吗？</p>
+        <div class="dialog-buttons">
+          <button class="cancel-btn" @click="closeDialog">取消</button>
+          <button class="confirm-btn" @click="confirmExit">确定</button>
+        </div>
+      </div>
+    </div>
+    
     <div class="clearfix">
       <div class="content">
         <div class="block">
-            <div class="schedule" :style="{ width: progress + '%' }"></div>
+          <div class="schedule" :style="{ width: progress + '%' }"></div>
         </div>
+        
         <div class="questions-container">
-          <div class="question-block" v-if="currentQuestions[0]">
-            <div class="question">
-              <span class="text-lg font-bold mr-2">{{ currentQuestions[0].id }}、</span>
-              {{ currentQuestions[0].question }}
+          <div v-for="question in currentQuestions" :key="question.id" class="question-card">
+            <div class="question-header">
+              <!-- <span class="question-number">第 {{ getQuestionIndex(question.id) }} 题</span> -->
+              <div class="question">
+                <span class="text-lg font-bold mr-2">{{ question.id }}、</span>
+                {{ question.stem }}
+              </div>
             </div>
             <div class="options">
               <label 
                 class="option" 
-                :class="{ 'selected': getAnswer(currentQuestions[0].id) === option.value }" 
-                v-for="option in currentQuestions[0].options" 
-                :key="option.value"
+                :class="{ 'selected': getAnswer(question.id) === 'A' }" 
+                @click="setAnswer(question.id, 'A')"
               >
                 <input 
                   type="radio" 
-                  :name="'answer' + currentQuestions[0].id" 
-                  :value="option.value" 
-                  :checked="getAnswer(currentQuestions[0].id) === option.value"
-                  @change="setAnswer(currentQuestions[0].id, option.value)"
+                  :name="'answer' + question.id" 
+                  value="A" 
+                  :checked="getAnswer(question.id) === 'A'"
+                  @change="setAnswer(question.id, 'A')"
                 >
-                <span class="label">{{ option.label }}</span>
+                <span class="label">A. {{ question.A }}</span>
+              </label>
+              <label 
+                class="option" 
+                :class="{ 'selected': getAnswer(question.id) === 'B' }" 
+                @click="setAnswer(question.id, 'B')"
+              >
+                <input 
+                  type="radio" 
+                  :name="'answer' + question.id" 
+                  value="B" 
+                  :checked="getAnswer(question.id) === 'B'"
+                  @change="setAnswer(question.id, 'B')"
+                >
+                <span class="label">B. {{ question.B }}</span>
+              </label>
+              <label 
+                class="option" 
+                :class="{ 'selected': getAnswer(question.id) === 'C' }" 
+                @click="setAnswer(question.id, 'C')"
+              >
+                <input 
+                  type="radio" 
+                  :name="'answer' + question.id" 
+                  value="C" 
+                  :checked="getAnswer(question.id) === 'C'"
+                  @change="setAnswer(question.id, 'C')"
+                >
+                <span class="label">C. {{ question.C }}</span>
               </label>
-            </div>
-          </div>
-          <div class="question-block" v-if="currentQuestions[1]">
-            <div class="question">
-              <span class="text-lg font-bold mr-2">{{ currentQuestions[1].id }}、</span>
-              {{ currentQuestions[1].question }}
-            </div>
-            <div class="options">
               <label 
                 class="option" 
-                :class="{ 'selected': getAnswer(currentQuestions[1].id) === option.value }" 
-                v-for="option in currentQuestions[1].options" 
-                :key="option.value"
+                :class="{ 'selected': getAnswer(question.id) === 'D' }" 
+                @click="setAnswer(question.id, 'D')"
               >
                 <input 
                   type="radio" 
-                  :name="'answer' + currentQuestions[1].id" 
-                  :value="option.value" 
-                  :checked="getAnswer(currentQuestions[1].id) === option.value"
-                  @change="setAnswer(currentQuestions[1].id, option.value)"
+                  :name="'answer' + question.id" 
+                  value="D" 
+                  :checked="getAnswer(question.id) === 'D'"
+                  @change="setAnswer(question.id, 'D')"
                 >
-                <span class="label">{{ option.label }}</span>
+                <span class="label">D. {{ question.D }}</span>
               </label>
             </div>
           </div>
         </div>
-        
+        <div class="team-prompt" v-if="showTeam">
+          <div class="prompt-title" @click="closeTeamPrompt">提示</div>
+            <div class="prompt-content">
+              <h3>确认提示</h3>
+              <p>您还未做题</p>
+            </div>
+          <div class="prompt-buttons">
+            <button class="confirm-btn" @click="closeDialog">确定</button>
+          </div>
+        </div>
         <div class="nav-buttons">
           <button 
             class="nav-btn prev" 
@@ -85,7 +131,6 @@
         
         <div class="question-nav">
           <h3>📝 题目导航</h3>
-          <!-- 第一页导航 1-25 -->
           <div class="question-grid" v-show="page === 1">
             <div 
               class="question-number" 
@@ -97,8 +142,6 @@
               <span class="question-text">{{ i }}</span>
             </div>
           </div>
-          
-          <!-- 第二页导航 26-50 -->
           <div class="question-grid" v-show="page === 2">
             <div 
               class="question-number" 
@@ -137,27 +180,21 @@
           </div>
         </div>
         
-        <!-- <button 
-          class="submit-btn" 
-          @click="submitTest" 
-          :disabled="answeredCount === 0"
-        >
-          🚀 提交试卷
-        </button> -->
-        <router-link to="/result" class="submit-btn" >🚀 提交试卷</router-link>
+        <button class="submit-btn" @click="submitAnswers">🚀 提交试卷</button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios';
 export default {
   name: 'TextView',
   data() {
     return {
       questions: [], // 从后端获取的题目
       currentPage: 1,
-      page:1,
+      page: 1,
       questionsPerPage: 2, // 每页显示2个题目
       answers: {},
       startTime: new Date(),
@@ -166,7 +203,9 @@ export default {
       timer: null,
       isSubmitted: false,
       totalQuestions: 50, // 后端固定50题
-      questionStates: {}
+      questionStates: {},
+      showDialog: false,
+      showTeam: false,
     };
   },
   computed: {
@@ -199,573 +238,62 @@ export default {
     // 从后端获取题目
     async fetchQuestions() {
       try {
-        // 这里调用后端接口获取题目
-        const response = await this.$axios.get('/api/questions');
-        this.questions = response.data;
+        const response = await axios.post('http://192.168.40.41:8000/api/knowledge/questions');
+        this.questions = response.data.data.list;
       } catch (error) {
         console.error('获取题目失败:', error);
-        // 如果接口失败，使用默认题目（前50题）
-        this.questions = this.getDefaultQuestions().slice(0, 50);
+        // 如果接口失败，使用默认题目
+        this.questions = this.getDefaultQuestions();
       }
     },
     
-    // 默认题目数据（备用）
+    // 默认题目数据（备用）- 生成50个题目
     getDefaultQuestions() {
-      return [
-        // 50个股票知识题目
-        {
-          id: 1,
-          question: "股票市场中，通常所说的'A股'指的是在我国境内上市、以哪种货币计价交易的股票？",
-          options: [
-            { value: "A", label: "A. 美元" },
-            { value: "B", label: "B. 欧元" },
-            { value: "C", label: "C. 人民币" },
-            { value: "D", label: "D. 港币" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 2,
-          question: "以下哪项属于股票投资基本面分析的核心指标？",
-          options: [
-            { value: "A", label: "A. K线形态" },
-            { value: "B", label: "B. 市盈率（PE）" },
-            { value: "C", label: "C. 成交量" },
-            { value: "D", label: "D. 均线走势" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 3,
-          question: "股票交易中，'T+1'交易制度指的是当天买入的股票需要在什么时候才能卖出？",
-          options: [
-            { value: "A", label: "A. 当天即可卖出" },
-            { value: "B", label: "B. 下一个交易日" },
-            { value: "C", label: "C. 第三个交易日" },
-            { value: "D", label: "D. 一周后" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 4,
-          question: "以下哪个指数最能反映上海证券市场的整体表现？",
-          options: [
-            { value: "A", label: "A. 深证成指" },
-            { value: "B", label: "B. 沪深300指数" },
-            { value: "C", label: "C. 上证综指" },
-            { value: "D", label: "D. 创业板指" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 5,
-          question: "股票投资中，'止损'操作的主要目的是？",
-          options: [
-            { value: "A", label: "A. 锁定盈利" },
-            { value: "B", label: "B. 减少亏损幅度" },
-            { value: "C", label: "C. 增加交易频率" },
-            { value: "D", label: "D. 跟随主力动向" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 6,
-          question: "上市公司向股东分配利润的主要方式不包括以下哪种？",
-          options: [
-            { value: "A", label: "A. 现金分红" },
-            { value: "B", label: "B. 股票分红" },
-            { value: "C", label: "C. 债券分红" },
-            { value: "D", label: "D. 公积金转增股本" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 7,
-          question: "以下哪种情况通常会导致股票价格上涨？",
-          options: [
-            { value: "A", label: "A. 公司业绩大幅亏损" },
-            { value: "B", label: "B. 行业政策利好" },
-            { value: "C", label: "C. 市场利率大幅上升" },
-            { value: "D", label: "D. 大量股东减持" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 8,
-          question: "股票市场中的'主力资金'主要指的是哪类投资者的资金？",
-          options: [
-            { value: "A", label: "A. 散户投资者" },
-            { value: "B", label: "B. 机构投资者" },
-            { value: "C", label: "C. 上市公司员工" },
-            { value: "D", label: "D. 海外个人投资者" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 9,
-          question: "市盈率（PE）的计算公式是？",
-          options: [
-            { value: "A", label: "A. 股价÷每股收益" },
-            { value: "B", label: "B. 每股收益÷股价" },
-            { value: "C", label: "C. 股价÷每股净资产" },
-            { value: "D", label: "D. 每股净资产÷股价" }
-          ],
-          answer: "A"
-        },
-        {
-          id: 10,
-          question: "以下哪个市场属于我国股票市场的'创业板'定位？",
-          options: [
-            { value: "A", label: "A. 服务大型成熟企业" },
-            { value: "B", label: "B. 服务中小型创新企业" },
-            { value: "C", label: "C. 服务海外上市企业" },
-            { value: "D", label: "D. 服务金融类企业" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 11,
-          question: "股票交易中，'涨停板'指的是股票当日上涨幅度达到交易所规定的上限，A股主板的涨停幅度通常是多少？",
-          options: [
-            { value: "A", label: "A. 5%" },
-            { value: "B", label: "B. 10%" },
-            { value: "C", label: "C. 15%" },
-            { value: "D", label: "D. 20%" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 12,
-          question: "以下哪项不属于技术分析的常用工具？",
-          options: [
-            { value: "A", label: "A. 财务报表" },
-            { value: "B", label: "B. K线图" },
-            { value: "C", label: "C. 成交量柱状图" },
-            { value: "D", label: "D. MACD指标" }
-          ],
-          answer: "A"
-        },
-        {
-          id: 13,
-          question: "上市公司发布的'年报'主要包含哪些核心内容？",
-          options: [
-            { value: "A", label: "A. 公司一年的经营状况和财务数据" },
-            { value: "B", label: "B. 短期股价预测" },
-            { value: "C", label: "C. 主力资金流向" },
-            { value: "D", label: "D. 市场情绪分析" }
-          ],
-          answer: "A"
-        },
-        {
-          id: 14,
-          question: "股票投资中，'价值洼地'通常指的是哪种股票？",
-          options: [
-            { value: "A", label: "A. 股价持续下跌的股票" },
-            { value: "B", label: "B. 估值偏低且有上涨潜力的股票" },
-            { value: "C", label: "C. 成交量极低的股票" },
-            { value: "D", label: "D. 刚上市的新股" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 15,
-          question: "以下哪种因素属于影响股票价格的宏观经济因素？",
-          options: [
-            { value: "A", label: "A. 公司管理层变动" },
-            { value: "B", label: "B. 行业竞争格局" },
-            { value: "C", label: "C. 国内生产总值（GDP）增速" },
-            { value: "D", label: "D. 公司产品质量问题" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 16,
-          question: "股票交易中，'跌停板'的作用是？",
-          options: [
-            { value: "A", label: "A. 限制股票当日最大涨幅" },
-            { value: "B", label: "B. 限制股票当日最大跌幅" },
-            { value: "C", label: "C. 停止股票交易" },
-            { value: "D", label: "D. 强制股票退市" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 17,
-          question: "市净率（PB）指标主要用于评估公司的什么价值？",
-          options: [
-            { value: "A", label: "A. 盈利能力" },
-            { value: "B", label: "B. 资产价值" },
-            { value: "C", label: "C. 成长能力" },
-            { value: "D", label: "D. 偿债能力" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 18,
-          question: "以下哪个板块的股票风险相对较高、成长潜力也相对较大？",
-          options: [
-            { value: "A", label: "A. 银行板块" },
-            { value: "B", label: "B. 钢铁板块" },
-            { value: "C", label: "C. 新能源板块" },
-            { value: "D", label: "D. 公用事业板块" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 19,
-          question: "股票投资中，'仓位'指的是？",
-          options: [
-            { value: "A", label: "A. 股票的交易数量" },
-            { value: "B", label: "B. 投资资金占总资金的比例" },
-            { value: "C", label: "C. 股票的持仓时间" },
-            { value: "D", label: "D. 股票的买入价格" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 20,
-          question: "上市公司进行'配股'操作，对股东来说意味着什么？",
-          options: [
-            { value: "A", label: "A. 必须强制卖出股票" },
-            { value: "B", label: "B. 可按约定价格优先认购新股" },
-            { value: "C", label: "C. 直接获得现金分红" },
-            { value: "D", label: "D. 股票自动退市" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 21,
-          question: "以下哪项指标可以反映上市公司的盈利能力？",
-          options: [
-            { value: "A", label: "A. 资产负债率" },
-            { value: "B", label: "B. 净利润率" },
-            { value: "C", label: "C. 换手率" },
-            { value: "D", label: "D. 振幅" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 22,
-          question: "股票市场中的'熊市'指的是哪种市场状态？",
-          options: [
-            { value: "A", label: "A. 股价持续上涨、市场情绪乐观" },
-            { value: "B", label: "B. 股价持续下跌、市场情绪悲观" },
-            { value: "C", label: "C. 股价横盘整理、波动极小" },
-            { value: "D", label: "D. 股价忽涨忽跌、波动剧烈" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 23,
-          question: "技术分析中，'均线'指标的作用是？",
-          options: [
-            { value: "A", label: "A. 预测公司盈利" },
-            { value: "B", label: "B. 平滑股价波动，显示趋势方向" },
-            { value: "C", label: "C. 计算公司估值" },
-            { value: "D", label: "D. 反映资金流向" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 24,
-          question: "以下哪种行为属于股票市场中的'内幕交易'？",
-          options: [
-            { value: "A", label: "A. 基于公开信息分析买卖股票" },
-            { value: "B", label: "B. 利用未公开的重大信息买卖股票" },
-            { value: "C", label: "C. 长期持有优质股票" },
-            { value: "D", label: "D. 分散投资多只股票" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 25,
-          question: "股票投资中，'分散投资'的主要目的是？",
-          options: [
-            { value: "A", label: "A. 提高投资收益" },
-            { value: "B", label: "B. 降低单一股票的风险" },
-            { value: "C", label: "C. 增加交易频率" },
-            { value: "D", label: "D. 简化投资操作" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 26,
-          question: "上市公司的'总股本'指的是？",
-          options: [
-            { value: "A", label: "A. 公司总资产" },
-            { value: "B", label: "B. 公司总负债" },
-            { value: "C", label: "C. 发行在外的全部股票数量" },
-            { value: "D", label: "D. 公司净利润" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 27,
-          question: "以下哪个指数是反映深圳证券市场中小盘股票表现的核心指数？",
-          options: [
-            { value: "A", label: "A. 上证50指数" },
-            { value: "B", label: "B. 深证综指" },
-            { value: "C", label: "C. 创业板指" },
-            { value: "D", label: "D. 中证500指数" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 28,
-          question: "股票交易中，'集合竞价'时间主要分为开盘集合竞价和收盘集合竞价，A股开盘集合竞价的时间是？",
-          options: [
-            { value: "A", label: "A. 9:15-9:25" },
-            { value: "B", label: "B. 9:30-11:30" },
-            { value: "C", label: "C. 13:00-14:57" },
-            { value: "D", label: "D. 14:57-15:00" }
-          ],
-          answer: "A"
-        },
-        {
-          id: 29,
-          question: "以下哪项不属于上市公司的重大利空消息？",
-          options: [
-            { value: "A", label: "A. 公司业绩大幅下滑" },
-            { value: "B", label: "B. 公司面临重大诉讼败诉" },
-            { value: "C", label: "C. 公司获得重大技术突破" },
-            { value: "D", label: "D. 公司被监管机构处罚" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 30,
-          question: "股票投资中，'换手率'指标反映的是？",
-          options: [
-            { value: "A", label: "A. 公司盈利变化速度" },
-            { value: "B", label: "B. 股票交易活跃程度" },
-            { value: "C", label: "C. 公司资产周转速度" },
-            { value: "D", label: "D. 股价波动幅度" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 31,
-          question: "以下哪种股票属于'蓝筹股'？",
-          options: [
-            { value: "A", label: "A. 规模大、业绩稳定的大型企业股票" },
-            { value: "B", label: "B. 刚上市的小型创新企业股票" },
-            { value: "C", label: "C. 股价波动极大的题材股" },
-            { value: "D", label: "D. 即将退市的问题股票" }
-          ],
-          answer: "A"
-        },
-        {
-          id: 32,
-          question: "上市公司发布的'季报'通常包含几个月的经营数据？",
-          options: [
-            { value: "A", label: "A. 1个月" },
-            { value: "B", label: "B. 3个月" },
-            { value: "C", label: "C. 6个月" },
-            { value: "D", label: "D. 12个月" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 33,
-          question: "技术分析中，'MACD'指标主要用于判断股票的什么趋势？",
-          options: [
-            { value: "A", label: "A. 估值趋势" },
-            { value: "B", label: "B. 盈利趋势" },
-            { value: "C", label: "C. 涨跌趋势" },
-            { value: "D", label: "D. 资金趋势" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 34,
-          question: "股票市场中的'牛市'到来时，通常会出现以下哪种现象？",
-          options: [
-            { value: "A", label: "A. 投资者纷纷卖出股票" },
-            { value: "B", label: "B. 新股发行减少" },
-            { value: "C", label: "C. 成交量大幅放大" },
-            { value: "D", label: "D. 市盈率普遍偏低" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 35,
-          question: "以下哪项指标可以反映上市公司的偿债能力？",
-          options: [
-            { value: "A", label: "A. 市盈率" },
-            { value: "B", label: "B. 资产负债率" },
-            { value: "C", label: "C. 营业收入增长率" },
-            { value: "D", label: "D. 每股收益" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 36,
-          question: "股票交易中，'委托单'按照价格优先、时间优先的原则成交，以下哪种委托单价格最高？",
-          options: [
-            { value: "A", label: "A. 买入市价单" },
-            { value: "B", label: "B. 买入限价单（高于当前股价）" },
-            { value: "C", label: "C. 卖出限价单（低于当前股价）" },
-            { value: "D", label: "D. 卖出市价单" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 37,
-          question: "上市公司进行'资产重组'，通常会对其股票价格产生什么影响？",
-          options: [
-            { value: "A", label: "A. 必然下跌" },
-            { value: "B", label: "B. 无影响" },
-            { value: "C", label: "C. 可能上涨（若重组利好）" },
-            { value: "D", label: "D. 直接退市" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 38,
-          question: "股票投资中，'长期投资'通常指的是持仓时间在多久以上？",
-          options: [
-            { value: "A", label: "A. 1个月" },
-            { value: "B", label: "B. 6个月" },
-            { value: "C", label: "C. 1年" },
-            { value: "D", label: "D. 5年" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 39,
-          question: "以下哪个市场是我国的港股市场？",
-          options: [
-            { value: "A", label: "A. 上海证券交易所" },
-            { value: "B", label: "B. 深圳证券交易所" },
-            { value: "C", label: "C. 香港联合交易所" },
-            { value: "D", label: "D. 北京证券交易所" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 40,
-          question: "技术分析中，'K线图'的实体部分表示的是股票当日的什么价格区间？",
-          options: [
-            { value: "A", label: "A. 最高价与最低价" },
-            { value: "B", label: "B. 开盘价与收盘价" },
-            { value: "C", label: "C. 买入价与卖出价" },
-            { value: "D", label: "D. 昨日收盘价与今日收盘价" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 41,
-          question: "上市公司的'每股净资产'反映的是？",
-          options: [
-            { value: "A", label: "A. 每股股票的盈利水平" },
-            { value: "B", label: "B. 每股股票对应的公司净资产份额" },
-            { value: "C", label: "C. 每股股票的交易价格" },
-            { value: "D", label: "D. 每股股票的分红金额" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 42,
-          question: "以下哪种因素属于影响股票价格的行业因素？",
-          options: [
-            { value: "A", label: "A. 通货膨胀率" },
-            { value: "B", label: "B. 行业政策调整" },
-            { value: "C", label: "C. 汇率变动" },
-            { value: "D", label: "D. 国债利率" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 43,
-          question: "股票交易中，'撤单'操作指的是？",
-          options: [
-            { value: "A", label: "A. 卖出持有的股票" },
-            { value: "B", label: "B. 买入新的股票" },
-            { value: "C", label: "C. 取消尚未成交的委托单" },
-            { value: "D", label: "D. 修改已成交的订单" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 44,
-          question: "以下哪项不属于股票投资的风险？",
-          options: [
-            { value: "A", label: "A. 市场风险" },
-            { value: "B", label: "B. 流动性风险" },
-            { value: "C", label: "C. 收益风险" },
-            { value: "D", label: "D. 信用风险" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 45,
-          question: "技术分析中，'成交量'指标与股价的关系通常是？",
-          options: [
-            { value: "A", label: "A. 股价上涨时成交量一定减少" },
-            { value: "B", label: "B. 股价下跌时成交量一定增加" },
-            { value: "C", label: "C. 量价配合（上涨放量、下跌缩量）通常是良性信号" },
-            { value: "D", label: "D. 量价无关" }
-          ],
-          answer: "C"
-        },
-        {
-          id: 46,
-          question: "上市公司的'营业收入增长率'反映的是公司的什么能力？",
-          options: [
-            { value: "A", label: "A. 偿债能力" },
-            { value: "B", label: "B. 成长能力" },
-            { value: "C", label: "C. 盈利能力" },
-            { value: "D", label: "D. 运营能力" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 47,
-          question: "股票市场中的'中小板'主要服务于哪种类型的企业？",
-          options: [
-            { value: "A", label: "A. 大型国有企业" },
-            { value: "B", label: "B. 中小型成熟企业" },
-            { value: "C", label: "C. 初创科技企业" },
-            { value: "D", label: "D. 海外企业" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 48,
-          question: "以下哪项操作属于股票投资的'波段操作'？",
-          options: [
-            { value: "A", label: "A. 长期持有一只股票不卖出" },
-            { value: "B", label: "B. 利用股价的短期波动低买高卖" },
-            { value: "C", label: "C. 只在牛市中投资股票" },
-            { value: "D", label: "D. 只投资一只股票" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 49,
-          question: "上市公司发布的'临时公告'主要用于披露什么内容？",
-          options: [
-            { value: "A", label: "A. 定期财务数据" },
-            { value: "B", label: "B. 突发重大事项" },
-            { value: "C", label: "C. 年度分红方案" },
-            { value: "D", label: "D. 行业研究报告" }
-          ],
-          answer: "B"
-        },
-        {
-          id: 50,
-          question: "股票投资中，'基本面分析'与'技术分析'的核心区别是？",
-          options: [
-            { value: "A", label: "A. 基本面分析关注股价走势，技术分析关注公司价值" },
-            { value: "B", label: "B. 基本面分析关注公司价值，技术分析关注股价走势" },
-            { value: "C", label: "C. 基本面分析只看短期，技术分析只看长期" },
-            { value: "D", label: "D. 基本面分析靠经验，技术分析靠数据" }
-          ],
-          answer: "B"
-        }
-      ];
+      // 这里创建一个示例数组，您可以根据实际需要替换为真实数据
+      const defaultQuestions = [];
+      
+      for (let i = 1; i <= 50; i++) {
+        defaultQuestions.push({
+          id: i,
+          stem: `这是第${i}个股票知识测试题目`,
+          A: `选项A - 第${i}题`,
+          B: `选项B - 第${i}题`,
+          C: `选项C - 第${i}题`,
+          D: `选项D - 第${i}题`
+        });
+      }
+      
+      return defaultQuestions;
     },
-
+    
+    // 获取题目在当前试卷中的序号
+    getQuestionIndex(questionId) {
+      // 查找题目在questions数组中的位置并返回序号
+      const index = this.questions.findIndex(q => q.id === questionId);
+      return index !== -1 ? index + 1 : questionId;
+    },
+    
+    // 显示确认弹框
+    showConfirmDialog() {
+      this.showDialog = true;
+    },
+    
+    // 关闭弹框
+    closeDialog() {
+      this.showDialog = false;
+    },
+    
+    // 确认退出
+    confirmExit() {
+      this.showDialog = false;
+      // 跳转到首页
+      this.$router.push('/');
+    },
+    //显示警告弹框
+    closeTeamPrompt() {
+      this.showTeam = true;
+    },
+    
     // 获取题目的答案
     getAnswer(questionId) {
       return this.answers[questionId] || '';
@@ -789,14 +317,12 @@ export default {
         return 'normal';
       }
     },
-    // 检查是否是当前题目
-    isCurrentQuestion(questionNumber) {
-      return this.currentQuestionIds.includes(questionNumber);
-    },
+    
     // 修改导航页面切换方法
     changeNavPage(newPage) {
       this.page = newPage;
     },
+    
     // 修改题目页面切换方法
     changePage(newPage) {
       if (newPage >= 1 && newPage <= this.totalPages) {
@@ -816,7 +342,7 @@ export default {
       // 自动切换到对应的导航页
       this.page = Math.ceil(questionNumber / 25);
     },
-
+    
     // 上一页
     prevPage() {
       if (this.currentPage > 1) {
@@ -830,7 +356,7 @@ export default {
         this.currentPage++;
       }
     },
-
+    
     // 更新倒计时
     updateCountdown() {
       const now = new Date();
@@ -848,53 +374,48 @@ export default {
         this.autoSubmitTest();
       }
     },
-    
     // 自动提交试卷
     async autoSubmitTest() {
       alert('考试时间已结束，系统将自动提交试卷！');
       await this.submitAnswers();
     },
-    
-    // 提交试卷
-    // async submitTest() {
-    //   // if (this.isSubmitted) return;
-    //   // if (confirm('您确定要提交吗？')) {
-    //   //   this.isSubmitted = true;
-    //     // await this.submitAnswers();
-    //     this.$router.path('/result')
-    //   // }
-    // },
-    
-    // // 提交答案到后端
-    // async submitAnswers() {
-    //   try {
-    //     const submissionData = {
-    //       answers: this.answers,
-    //       timeUsed: this.getTimeUsed(),
-    //       totalQuestions: this.totalQuestions
-          
-    //     };
-        
-    //     // 调用后端提交接口
-    //     const response = await this.$axios.post('/api/submit', submissionData);
-        
-    //     // 跳转到结果页面
-    //     this.$router.push({
-    //       name: 'ResultPage',
-    //       query: {
-    //         score: response.data.score,
-    //         total: this.totalQuestions,
-    //         correct: response.data.correctCount,
-    //         timeUsed: this.getTimeUsed()
-    //       }
-    //     });
-        
-    //   } catch (error) {
-    //     console.error('提交试卷失败:', error);
-    //     alert('提交失败，请重试');
-    //     this.isSubmitted = false;
-    //   }
-    // },
+    // 提交答案到后端
+    async submitAnswers() {
+      try {
+        if (Object.keys(this.answers).length === 0) {
+          this.showTeam=false;
+          return;
+        }
+        // 将答案格式转换为要求的格式
+        const formattedAnswers = Object.keys(this.answers).map(questionId => ({
+          questionId: parseInt(questionId),
+          userAnswer: this.answers[questionId]
+        }));
+        const savedData = JSON.parse(localStorage.getItem('submissionData'));
+        console.log('第一个，存储的数据:', localStorage.getItem('submissionData'));
+        const submission = {
+          jwcode: savedData.jwcode,
+          answers: formattedAnswers
+        };
+        console.log(submission);
+        // 调用后端提交接口
+        const response = await axios.post('http://192.168.40.41:8000/api/knowledge/submit', submission);
+        console.log(submission);
+        // 跳转到结果页面
+        this.$router.push({
+          name: 'ResultView',
+          query: {
+            score: response.data.data.score || 80, 
+            total: this.totalQuestions,
+            timeUsed: this.getTimeUsed()
+          }
+        });
+      } catch (error) {
+        console.error('提交试卷失败:', error);
+        alert('提交失败，请重试');
+        this.isSubmitted = false;
+      }
+    },
     
     // 获取已用时间
     getTimeUsed() {
@@ -937,13 +458,11 @@ export default {
   padding: 0 20px;
 }
 
-/* 题目导航样式 */
 .question-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
-  margin-top: 15px;
-  margin-bottom: 1px;
+  margin: auto;
 }
 
 .question-number {
@@ -982,34 +501,15 @@ export default {
   transform: scale(1.05);
 }
 
-.current-indicator {
-  position: absolute;
-  color: white;
-  font-weight: bold;
-  font-size: 1.2em;
-}
-
 .question-text {
   z-index: 1;
 }
 
-/* 添加导航按钮激活样式 */
 .pagination-btn.active {
   background-color: #2563eb;
   transform: scale(1.05);
 }
 
-.current-indicator {
-  position: absolute;
-  color: white;
-  font-weight: bold;
-  font-size: 1.2em;
-}
-
-.question-text {
-  z-index: 1;
-}
-
 * {
   margin: 0;
   padding: 0;
@@ -1035,7 +535,6 @@ body {
   box-shadow: 0 10px 30px rgba(0,0,0,0.3);
   position: relative;
   overflow: hidden;
-  /* text-align: center; */
 }
 .top h1 {
   font-size: 2.2em;
@@ -1067,19 +566,23 @@ body {
 .content {
   float: left;
   width: calc(65% - 20px);
-  border: #183954 solid 2px;
+  min-height: 920px;
+  border: #274779 solid 2px;
   border-radius: 10px;
   color: #f1f5f9;
   padding: 20px 40px 50px;
   margin-right: 20px;
   background-color: #2a3147;
 }
-.question-block {
-  border: #183954 solid 2px;
+.question-card {
+  border: #274779 solid 2px;
   border-radius: 10px;
   padding: 20px 40px;
   background-color: #2f374d;
 }
+.question-header {
+  margin-bottom: 20px;
+}
 .question {
   font-size: 1.3em;
   line-height: 1.8;
@@ -1127,14 +630,14 @@ body {
   padding: 20px;
 }
 .time-module {
-  border: #183954 solid 2px;
+  border: #274779 solid 2px;
   border-radius: 50px;
   padding: 15px;
   margin-bottom: 20px;
   background-color: #2f374d;
 }
 .question-nav {
-  border: #183954 solid 2px;
+  border: #274779 solid 2px;
   border-radius: 50px;
   padding: 15px;
   margin-bottom: 20px;
@@ -1142,7 +645,7 @@ body {
 }
 .statistics {
   height: 150px;
-  border: #183954 solid 2px;
+  border: #274779 solid 2px;
   border-radius: 50px;
   padding: 15px;
   margin-bottom: 20px;
@@ -1244,6 +747,9 @@ body {
   cursor: pointer;
   transition: all 0.3s ease;
   margin-top: 20px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
 }
 .submit-btn:hover {
   background-color: #059669;
@@ -1253,34 +759,107 @@ body {
   clear: both;
   display: table;
 }
-@media (max-width: 1200px) {
-  .content, .right {
-    float: none;
-    width: 100%;
-    margin-right: 0;
-    margin-bottom: 20px;
-  }
+
+.ret-container {
+  float: left;
+  cursor: pointer;
+  transition: transform 0.3s ease;
 }
-@media (max-width: 768px) {
-  .content {
-    padding: 15px 20px 30px;
-  }
-  .question-block {
-    padding: 15px 20px;
-  }
-  .question {
-    font-size: 1.1em;
-  }
-  .option .label {
-    font-size: 1em;
-  }
-  .question-grid {
-    grid-template-columns: repeat(5, 1fr);
-  }
-  .question-number {
-    width: 35px;
-    height: 35px;
-    font-size: 0.9em;
-  }
+
+.ret-container:hover {
+  transform: scale(1.1);
+}
+.confirm-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.dialog-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
+}
+
+.dialog-content {
+  position: relative;
+  background: white;
+  padding: 30px;
+  border-radius: 15px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  max-width: 400px;
+  width: 90%;
+  text-align: center;
+  z-index: 1001;
+}
+.team-prompt {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.dialog-content h3 {
+  color: #333;
+  margin-bottom: 15px;
+  font-size: 1.4em;
+}
+
+.dialog-content p {
+  color: #666;
+  margin-bottom: 25px;
+  font-size: 1.1em;
+  line-height: 1.5;
+}
+
+.dialog-buttons {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}
+
+.cancel-btn, .confirm-btn {
+  padding: 12px 30px;
+  border: none;
+  border-radius: 8px;
+  font-size: 1em;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-width: 100px;
+}
+
+.cancel-btn {
+  background: #f1f1f1;
+  color: #666;
+}
+
+.cancel-btn:hover {
+  background: #e0e0e0;
+}
+
+.confirm-btn {
+  background: #ff4757;
+  color: white;
+}
+
+.confirm-btn:hover {
+  background: #ff3742;
+  transform: translateY(-2px);
 }
 </style>
\ No newline at end of file