样式修改

index.html

@@ -11,3 +11,9 @@
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
+
+<style>
+  body{
+      margin: 0;
+  }
+</style>

src/assets/main.css

@@ -1,3 +1,6 @@
 *{
   margin: 0;
 }
+body{
+  margin: 0;
+}

src/views/FrontView.vue

@@ -11,11 +11,8 @@ function loadParticipants() {
     activity.value = result.data;
     // participants.value =  result.data.participantList;
     let per = (result.data.nowNumber / result.data.targetNumber) * 100;
-
     // 使用 Math.round() 进行四舍五入
     let roundedPercent = Math.round(per);
-
-// 将结果赋值给 percent.value
     percent.value = roundedPercent;
   });
 }
@@ -59,12 +56,7 @@ loadParticipants();
         <!-- 进度条 -->
         <div class="progress-bottem">
           <div class="progress">
-            <el-progress
-              :text-inside="true"
-              :stroke-width="40"
-              :percentage="percent"
-              status="exception"
-            />
+            <el-progress :text-inside="true" :stroke-width="40" :percentage="percent" status="exception" />
           </div>
         </div>
       </div>
@@ -84,78 +76,84 @@ loadParticipants();
 .container {
   background-image: url("../assets/bg.png");
   width: 100%;
-  height: auto;
+  height: 100vh;
 }
 
+/* 20vh */
 .title {
   color: #ffc48d;
   text-shadow: 20px 0 7px rgba(96, 0, 0, 0.35);
   font-weight: 700;
   width: auto;
-  height: auto;
-  font-size: 150px;
+  height: 12vh;
+  font-size: 12vh;
   margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 100px;
+  padding-top: 8vh;
   font-family: Alibaba PuHuiTi 3;
 }
 
+/* 12vh */
 .minge {
   font-weight: 700;
   color: #ffc48d;
   font-weight: 115 Black;
   width: auto;
-  height: auto;
-  font-size: 110px;
+  height: 10vh;
+  font-size: 10vh;
   text-align: center;
   text-shadow: 0 20px 7px 0 #61000059;
   margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 50px;
+  margin-top: 2vh;
 }
 
+/* 10vh */
 .state {
   margin: auto;
-  margin-top: 40px;
+  margin-top: 3vh;
   background-color: #e0ba77;
   border: 1px solid #be6f2d;
   border-radius: 29.18px 29.18px 29.18px 29.18px;
-  width: 355.09px;
-  height: 58.38px;
+  width: 29vw;
+  height: 7vh;
 }
 
 .doing {
   color: #ae0000;
   display: inline-block;
   font-weight: 800;
-  font-size: 30.41px;
+  font-size: 2vw;
   text-align: center;
   color: #ae0000 100%;
   text-align: center;
-  padding-left: 20px;
-  padding-top: 5px;
+  padding-left: 2vw;
+  padding-top: 1vh;
 }
 
 .finished {
-  margin-left: 19px;
-  margin-top: 7px;
+  margin-left: 3vw;
+  margin-top: 1vh;
   display: inline-block;
-  width: 187.56px;
-  height: 45.62px;
+  width: 15vw;
+  height: 5.5vh;
   border-radius: 22.81px 22.81px 22.81px 22.81px;
   background: #ffffff;
   color: #ae0000;
   font-weight: 800;
-  font-size: 30.41px;
+  font-size: 2vw;
   text-align: center;
 }
 
+/* 10vh */
 .jindu {
-  margin-top: 25px;
+  margin-top: 3vh;
+  height: 3vh;
+  margin-bottom: 4vh;
   display: flex;
   /* 启用 Flexbox 布局 */
   justify-content: center;
@@ -172,7 +170,7 @@ loadParticipants();
   justify-content: center;
   align-items: center;
   color: #bb0404;
-  font-size: 32px;
+  font-size: 2vw;
   font-weight: 900;
 }
 
@@ -187,19 +185,21 @@ loadParticipants();
   justify-content: center;
   align-items: center;
   color: #bb0404;
-  font-size: 32px;
+  font-size: 2vw;
   font-weight: 900;
 }
 
+/* 20vh */
 .progress-bar {
-  margin-top: 30px;
+  /* margin-top: 30px; */
+  height: 20vh;
   position: relative;
 }
 
 .progress-bg {
   background-image: url("../assets/底座.png");
   /* width: 1920px; */
-  height: 200px;
+  height: 20vh;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -222,6 +222,7 @@ loadParticipants();
   /* padding-top: 80px; */
   width: 90%;
 }
+
 /* .sidai1{
   position: absolute;
   left: 1vw;
@@ -237,26 +238,18 @@ loadParticipants();
 .list {
   margin: auto;
   display: flex;
-  /* 启用 Flexbox 布局 */
   flex-wrap: wrap;
-  /* 允许换行 */
   justify-content: flex-start;
   align-items: flex-start;
-  /* 子元素之间的间隔 */
-  /* align-items: center; */
   width: 70vw;
-  max-height: 300px;
+  height: 20vh;
   border-radius: 0 0px 48px 48px;
   background: linear-gradient(-90deg, #e51b1b, #990505);
-
-  /* padding: 0 200px;  */
-  padding-left: 50px;
-  /* margin-top: 10px; */
-  padding-top: 20px;
-  padding-bottom: 50px;
+  padding-left: 3vw;
+  padding-top: 3vh;
+  padding-bottom: 3vh;
   border: #edd88e solid 4px;
   overflow-y: scroll;
-  /*只是y方向*/
 }
 
 .list-item {