wanglin
/
CrowdFunding
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

合并

dev
donghaolin 5 months ago
parent
6c2dff5cc6 454614893d
commit
ac0ce2be25
1 changed files with 172 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 205
      src/views/FrontView.vue

205
src/views/FrontView.vue
View File

@ -1,9 +1,131 @@
<script setup> <script setup>
//众筹参与者
const participants = ref([]);
//众筹活动
const activity = ref();
const percent = ref();
function loadParticipants() {
// participants.value = [
// {
// id: 1,
// jwcode: "498498",
// },
// {
// id: 2,
// jwcode: "498498",
// },
// {
// id: 3,
// jwcode: "498498",
// },
// {
// id: 4,
// jwcode: "498498",
// },
// {
// id: 5,
// jwcode: "498498",
// },
// {
// id: 5,
// jwcode: "498498",
// },
// {
// id: 5,
// jwcode: "498498",
// },
// {
// id: 5,
// jwcode: "498498",
// },
// {
// id: 5,
// jwcode: "498498",
// },
// {
// id: 5,
// jwcode: "498498",
// },
// {
// id: 5,
// jwcode: "498498",
// },
// {
// id: 5,
// jwcode: "498498",
// },
// {
// id: 5,
// jwcode: "498498",
// }
// ]
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);
});
}
loadParticipants();
</script> </script>
<template> <template>
hhh
<div class="container">
<!-- 标题 -->
<div class="header">
<div class="title" :title="activity.title">
关于{{ activity.title }}众筹
</div>
<div class="minge" :target="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-else>已完成</span>
</div>
<!-- 进度 -->
<div class="jindu">
<!-- 当前进度 -->
<span class="current" :current="activity.nowNumber">
当前进度:{{ activity.nowNumber }}人
</span>
<!-- 目标 -->
<span class="goal" :goal="activity.targetNumber">
目标：{{ activity.targetNumber }}人
</span>
</div>
<!-- 目标 -->
</div>
<!-- 进度条 -->
<div class="progress-bar">
<!-- 进度条背景 -->
<div class="progress-bg">
<!-- 进度条 -->
<div class="progress-bottem">
<div class="progress">
<el-progress
:text-inside="true"
:stroke-width="40"
:percentage="percent"
status="exception"
/>
</div>
</div>
</div>
</div>
<!-- 参与众筹人员展示 -->
<div class="list">
<div class="list-item" v-for="participant in activity.participantList">
<div class="display-item" :jwcode="participant.jwcode">
恭喜{{ participant.jwcode }}参与了本次众筹
</div>
</div>
</div>
</div>
</template> </template>
<style scoped> <style scoped>
@ -14,27 +136,26 @@ hhh
} }
.title { .title {
color: #FFC48D;
color: #ffc48d;
text-shadow: 20px 0 7px rgba(96, 0, 0, 0.35); text-shadow: 20px 0 7px rgba(96, 0, 0, 0.35);
font-weight: 700; font-weight: 700;
width: auto;
height: auto;
width: auto;
height: auto;
font-size: 150px; font-size: 150px;
margin: auto; margin: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-top: 100px; padding-top: 100px;
font-family: Alibaba PuHuiTi 3.0;
font-family: Alibaba PuHuiTi 3;
} }
.minge { .minge {
font-weight: 700; font-weight: 700;
color: #FFC48D;
color: #ffc48d;
font-weight: 115 Black; font-weight: 115 Black;
width: auto; width: auto;
height: auto;
height: auto;
font-size: 110px; font-size: 110px;
text-align: center; text-align: center;
text-shadow: 0 20px 7px 0 #61000059; text-shadow: 0 20px 7px 0 #61000059;
@ -48,20 +169,20 @@ hhh
.state { .state {
margin: auto; margin: auto;
margin-top: 40px; margin-top: 40px;
background-color: #E0BA77;
border: 1px solid #BE6F2D;
background-color: #e0ba77;
border: 1px solid #be6f2d;
border-radius: 29.18px 29.18px 29.18px 29.18px; border-radius: 29.18px 29.18px 29.18px 29.18px;
width: 355.09px; width: 355.09px;
height: 58.38px; height: 58.38px;
} }
.doing { .doing {
color: #AE0000;
color: #ae0000;
display: inline-block; display: inline-block;
font-weight: 800; font-weight: 800;
font-size: 30.41px; font-size: 30.41px;
text-align: center; text-align: center;
color: #AE0000 100%;
color: #ae0000 100%;
text-align: center; text-align: center;
padding-left: 20px; padding-left: 20px;
padding-top: 5px; padding-top: 5px;
@ -75,7 +196,7 @@ hhh
height: 45.62px; height: 45.62px;
border-radius: 22.81px 22.81px 22.81px 22.81px; border-radius: 22.81px 22.81px 22.81px 22.81px;
background: #ffffff; background: #ffffff;
color: #AE0000;
color: #ae0000;
font-weight: 800; font-weight: 800;
font-size: 30.41px; font-size: 30.41px;
text-align: center; text-align: center;
@ -120,6 +241,7 @@ hhh
.progress-bar { .progress-bar {
margin-top: 30px; margin-top: 30px;
position: relative;
} }
.progress-bg { .progress-bg {
@ -148,10 +270,18 @@ hhh
/* padding-top: 80px; */ /* padding-top: 80px; */
width: 90%; width: 90%;
} }
/* .sidai1{
position: absolute;
left: 1vw;
top: -3vh;
} */
.el-progress__text { .el-progress__text {
font-size: 16px; /* 调整字体大小 */
color: #333; /* 调整字体颜色 */
font-size: 16px;
/* 调整字体大小 */
color: #333;
/* 调整字体颜色 */
} }
.list { .list {
margin: auto; margin: auto;
display: flex; display: flex;
@ -166,18 +296,19 @@ hhh
max-height: 300px; max-height: 300px;
border-radius: 0 0px 48px 48px; border-radius: 0 0px 48px 48px;
background: linear-gradient(-90deg, #e51b1b, #990505); background: linear-gradient(-90deg, #e51b1b, #990505);
/* padding: 0 200px; */ /* padding: 0 200px; */
padding-left: 50px; padding-left: 50px;
/* margin-top: 10px; */ /* margin-top: 10px; */
padding-top: 20px; padding-top: 20px;
padding-bottom: 50px; padding-bottom: 50px;
border: #EDD88E solid 4px;
overflow-y:scroll /*只是y方向*/
border: #edd88e solid 4px;
overflow-y: scroll;
/*只是y方向*/
} }
.list-item { .list-item {
flex: 0 0 calc(50% - 20px);
flex: 0 0 calc(50% - 20px);
/* 占据一半宽度减去间隔 */ /* 占据一半宽度减去间隔 */
margin-bottom: 5px; margin-bottom: 5px;
/* 子元素之间的垂直间隔 */ /* 子元素之间的垂直间隔 */
@ -186,34 +317,42 @@ hhh
/* 垂直内边距 */ /* 垂直内边距 */
display: inline-block; display: inline-block;
width: 60%;
box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度 */
padding: 15px 0;
width: 60%;
box-sizing: border-box;
/* 确保 padding 和 border 不会增加元素的总宽度 */
padding: 15px 0;
} }
/* 为奇数项添加左边距，使得两列并排显示 */ /* 为奇数项添加左边距，使得两列并排显示 */
.list-item:nth-child(odd) { .list-item:nth-child(odd) {
margin-left: 0; margin-left: 0;
margin-right: 10px; /* 添加右边距，确保两列之间有间隔 */
margin-right: 10px;
/* 添加右边距，确保两列之间有间隔 */
text-align: center; text-align: center;
} }
.list-item:nth-child(even) { .list-item:nth-child(even) {
margin-left: 10px; /* 为偶数项添加左边距，确保两列之间有间隔 */
margin-left: 10px;
/* 为偶数项添加左边距，确保两列之间有间隔 */
margin-right: 10px; margin-right: 10px;
text-align: center; text-align: center;
} }
.display-item { .display-item {
font-size: 1.7vw; font-size: 1.7vw;
font-weight: 200; font-weight: 200;
font-family: Source Han Serif SC; font-family: Source Han Serif SC;
border-bottom: 1px solid white; 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>
</style>
Write Preview
Loading…
Cancel
Save