样式修改结束

src/views/BuyView.vue

@@ -24,19 +24,19 @@ export default{
 </script>
 <style scoped>
     .home{
-        width: 100%;
-        height: 100%;
-        background-image: url('@/assets/buy.jpg');
-        color: white;
-        padding: 20px;
-    }
-    .enter{
+        width: 100vw;
+        height: 100vh;
         position: relative;
-        top: 45px;
-        left: 360px;
+        background-image: url('@/assets/buy.jpg');
+        background-size: cover;
+        background-position: center;
     }
     .img1{
-        width: 70px;
-        height: 60px;
+        position: absolute;
+        top: 5vh;
+        left: 36vh;
+        width: 8%;
+        height: 8%;
+        object-fit: contain;
     }
 </style>

src/views/HomeView.vue

@@ -56,6 +56,8 @@ export default {
 }
 
 .home {
+  width:100vw;
+  height:100vh;
   position: relative;
   min-height: 100vh;
   display: flex;
@@ -65,13 +67,12 @@ export default {
 }
 
 .image {
+  width:10.4vw;
   position: absolute;
-  width: 200px;
-  min-height: 160px;
-  max-height: 160px;
   object-fit: contain;
   bottom: 70px;
-  left: 682px;
+  left: 35.5%;
+  top: 82.6%;
   /* left: 35.5%; */
 }
 

src/views/ProblemView.vue

@@ -120,7 +120,7 @@ export default {
             <div class="popup-content">
                 <h3>确认提示</h3>
                 <p>确定返回报告吗？</p>
-                <div class="popup-buttons">
+                <div>
                     <button class="cancel-btn" @click="closeDialog">取消</button>
                     <button class="confirm-btn" @click="confirmExit">确定</button>
                 </div>
@@ -190,9 +190,8 @@ export default {
 }
 .home{
     min-height: 100vh;
-    width: 100%;
+    width: 98vw;
     background-color: #24293c;
-    overflow:auto;
     padding: 10px;
 }
 .top{
@@ -201,6 +200,7 @@ export default {
     padding: 30px;
     margin-bottom: 10px;
     position: relative;
+    height: 15vh;
 }
 .img-top{
     float: left;
@@ -215,51 +215,42 @@ export default {
 }
 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;
+    background: rgba(0, 0, 0, 0.5); 
+    height: 100vh;
+    width:98vw;
+    backdrop-filter: blur(5px);
 }
 .popup-background{
-    position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 125%;
+    height: 100vh;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(5px);
 }
 .popup-content{
     background-color: #f1f5f9;
-    padding: 30px;
+    padding: 30px 0;
     border-radius: 15px;
     box-shadow: 0 20px 40px rgba(0,0,0,0.3);
-    width: 90%;
     text-align: center;
 }
-.popup-buttons{
-    margin-top: 20px;
-    justify-content: center;
-}
 .cancel-btn,.confirm-btn{
     border-radius: 10px;
     border: transparent 0px;
-    margin: 5px;
-    padding: 12px 30px;
+    margin: 10px;
+    height: 35px;
     font-size: 1em;
     font-weight: bold;
 }
@@ -274,7 +265,6 @@ p{
 .content {
     float: left;
     width: calc(65% - 20px);
-    min-height: 920px;
     border: #274779 solid 2px;
     border-radius: 10px;
     color: #f1f5f9;
@@ -305,10 +295,9 @@ p{
 }
 .question {
     font-size: 1.3em;
-    line-height: 1.8;
-    margin-bottom: 25px;
     color: #f1f5f9;
     font-weight: 500;
+    margin-bottom: 20px;
 }
 .options {
     display: flex;
@@ -353,9 +342,6 @@ p{
   background-color: #3b82f6;
   color: white;
   font-weight: bold;
-  display: flex;
-  align-items: center;
-  gap: 5px;
 }
 .before-btn:disabled,.next-btn:disabled {
   background-color: #4b5563;
@@ -366,8 +352,7 @@ p{
     width: calc(35% - 20px);
     border: #274779 solid 2px;
     border-radius: 30px;
-    padding: 15px 0 15px 19px ;
-    margin-bottom: 20px;
+    padding: 15px 0 15px 0;
     background-color: #2f374d;
     color: white;
 }
@@ -381,7 +366,7 @@ p{
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 10px;
-    margin: auto 30px;
+    margin-left:50px;
 }
 .question-number {
     width: 60px;
@@ -392,7 +377,6 @@ p{
     justify-content: center;
     font-weight: bold;
     cursor: pointer;
-    position: relative;
 }
 .right-question-card .question-number.red {
     background-color: #ff4757;
@@ -406,8 +390,11 @@ p{
 }
 .button-right{
     display: flex;
-    margin: 30px 180px 5px;
+    height:30px;
+    align-items: center;
+    justify-content: center;
     gap: 20px;
+    margin-top: 30px;
 }
 .right-before-btn,.right-next-btn{
     padding: 8px 15px;
@@ -426,10 +413,9 @@ p{
     border-radius: 8px;
     background-color: #3b82f6;
     color: white;
-    text-align: center;
-    line-height: 40px;
     position:relative;
-    top: 350px;
+    margin-top: 362px;
+    border:none;
 }
 
 </style>

src/views/ReportView.vue

@@ -158,7 +158,6 @@ export default{
     .content{
         border: #274779 solid 2px;
         border-radius: 50px;
-        padding: 15px;
         margin-bottom: 20px;
         background-color: #2f374d;
         padding: 30px;