diff --git a/src/views/FrontView.vue b/src/views/FrontView.vue
index d989216..5a4bbb1 100644
--- a/src/views/FrontView.vue
+++ b/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();
+
@@ -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;
@@ -295,18 +299,19 @@ loadParticipants();
max-height: 300px;
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;
border: #EDD88E solid 4px;
- overflow-y:scroll /*只是y方向*/
+ overflow-y: scroll
+ /*只是y方向*/
}
.list-item {
- flex: 0 0 calc(50% - 20px);
+ flex: 0 0 calc(50% - 20px);
/* 占据一半宽度减去间隔 */
margin-bottom: 5px;
/* 子元素之间的垂直间隔 */
@@ -315,34 +320,44 @@ loadParticipants();
/* 垂直内边距 */
display: inline-block;
-
- width: 60%;
- box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度 */
+
+ width: 60%;
+ 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;
+ /* 右边距,可以根据需要调整 */
}
\ No newline at end of file