丝带

src/views/FrontView.vue

@@ -64,12 +64,12 @@ function loadParticipants() {
   //     jwcode: "498498",
   //   }
   // ]
-  ShowApi.showPage().then(result =>{
-    console.log("后端数据：",result.data)
+  ShowApi.showPage().then(result => {
+    console.log("后端数据：", result.data)
     activity.value = result.data;
     // participants.value =  result.data.participantList;
-    percent.value = result.data.nowNumber/result.data.targetNumber*100
-    console.log("活动数据",activity.value)
+    percent.value = result.data.nowNumber / result.data.targetNumber * 100
+    console.log("活动数据", activity.value)
   })
 }
 loadParticipants();
@@ -81,26 +81,26 @@ loadParticipants();
 
     <div class="header">
       <div class="title" :title="activity.title">
-        关于{{activity.title}}众筹
+        关于{{ activity.title }}众筹
       </div>
       <div class="minge" :target="activity.targetNumber">
-        只需要{{activity.targetNumber}}个名额
+        只需要{{ activity.targetNumber }}个名额
       </div>
       <!-- 众筹状态 -->
       <div class="state">
         <span class="doing">众筹状态</span>
-        <span class="finished" v-if="activity.status==1">众筹中</span>
+        <span class="finished" v-if="activity.status == 1">众筹中</span>
         <span class="finished" v-else>已完成</span>
       </div>
       <!-- 进度 -->
       <div class="jindu">
         <!-- 当前进度 -->
         <span class="current" :current="activity.nowNumber">
-          当前进度:{{activity.nowNumber}}人
+          当前进度:{{ activity.nowNumber }}人
         </span>
         <!-- 目标 -->
         <span class="goal" :goal="activity.targetNumber">
-          目标：{{activity.targetNumber}}人
+          目标：{{ activity.targetNumber }}人
         </span>
       </div>
       <!-- 目标 -->
@@ -113,17 +113,11 @@ 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>
+
     </div>
     <!-- 参与众筹人员展示 -->
     <div class="list">
@@ -146,8 +140,8 @@ loadParticipants();
   color: #FFC48D;
   text-shadow: 20px 0 7px rgba(96, 0, 0, 0.35);
   font-weight: 700;
- width: auto;
- height: auto;
+  width: auto;
+  height: auto;
   font-size: 150px;
   margin: auto;
   display: flex;
@@ -163,7 +157,7 @@ loadParticipants();
   color: #FFC48D;
   font-weight: 115 Black;
   width: auto;
- height: auto;
+  height: auto;
   font-size: 110px;
   text-align: center;
   text-shadow: 0 20px 7px 0 #61000059;
@@ -249,6 +243,7 @@ loadParticipants();
 
 .progress-bar {
   margin-top: 30px;
+  position: relative;
 }
 
 .progress-bg {
@@ -258,6 +253,7 @@ loadParticipants();
   display: flex;
   justify-content: center;
   align-items: center;
+
 }
 
 .progress-bottem {
@@ -277,10 +273,18 @@ loadParticipants();
   /* padding-top: 80px; */
   width: 90%;
 }
+/* .sidai1{
+  position: absolute;
+  left: 1vw;
+  top: -3vh;
+} */
 .el-progress__text {
-  font-size: 16px; /* 调整字体大小 */
-  color: #333; /* 调整字体颜色 */
+  font-size: 16px;
+  /* 调整字体大小 */
+  color: #333;
+  /* 调整字体颜色 */
 }
+
 .list {
   margin: auto;
   display: flex;
@@ -302,7 +306,8 @@ loadParticipants();
   padding-top: 20px;
   padding-bottom: 50px;
   border: #EDD88E solid 4px;
-  overflow-y:scroll  /*只是y方向*/
+  overflow-y: scroll
+    /*只是y方向*/
 }
 
 .list-item {
@@ -317,32 +322,42 @@ loadParticipants();
   display: inline-block;
 
   width: 60%;
-  box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度 */
+  box-sizing: border-box;
+  /* 确保 padding 和 border 不会增加元素的总宽度 */
   padding: 15px 0;
 
 
 }
+
 /* 为奇数项添加左边距，使得两列并排显示 */
 .list-item:nth-child(odd) {
   margin-left: 0;
-  margin-right: 10px; /* 添加右边距，确保两列之间有间隔 */
+  margin-right: 10px;
+  /* 添加右边距，确保两列之间有间隔 */
   text-align: center;
 }
 
 .list-item:nth-child(even) {
-  margin-left: 10px; /* 为偶数项添加左边距，确保两列之间有间隔 */
+  margin-left: 10px;
+  /* 为偶数项添加左边距，确保两列之间有间隔 */
   margin-right: 10px;
   text-align: center;
 }
+
 .display-item {
   font-size: 1.7vw;
   font-weight: 200;
   font-family: Source Han Serif SC;
   border-bottom: 1px solid white;
-  display: inline-block; /* 使下划线与文本内容对齐 */
-  width: auto; /* 自动宽度，根据内容调整 */
-  margin: 0 auto; /* 居中显示 */
-  padding-left: 40px; /* 左边距，可以根据需要调整 */
-  padding-right: 40px; /* 右边距，可以根据需要调整 */
+  display: inline-block;
+  /* 使下划线与文本内容对齐 */
+  width: auto;
+  /* 自动宽度，根据内容调整 */
+  margin: 0 auto;
+  /* 居中显示 */
+  padding-left: 40px;
+  /* 左边距，可以根据需要调整 */
+  padding-right: 40px;
+  /* 右边距，可以根据需要调整 */
 }
 </style>