ting
6 months ago
15 changed files with 679 additions and 127 deletions
-
291package-lock.json
-
4package.json
-
1src/App.vue
-
86src/assets/base.css
-
BINsrc/assets/bg.png
-
38src/assets/main.css
-
BINsrc/assets/圆角矩形 2.png
-
BINsrc/assets/圆角矩形 3.png
-
BINsrc/assets/底座.png
-
BINsrc/assets/进度条底.png
-
10src/axios/ShowApi.js
-
14src/axios/index.js
-
5src/main.js
-
343src/views/FrontView.vue
-
14vite.config.js
@ -1,86 +0,0 @@ |
|||
/* color palette from <https://github.com/vuejs/theme> */ |
|||
:root { |
|||
--vt-c-white: #ffffff; |
|||
--vt-c-white-soft: #f8f8f8; |
|||
--vt-c-white-mute: #f2f2f2; |
|||
|
|||
--vt-c-black: #181818; |
|||
--vt-c-black-soft: #222222; |
|||
--vt-c-black-mute: #282828; |
|||
|
|||
--vt-c-indigo: #2c3e50; |
|||
|
|||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29); |
|||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12); |
|||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); |
|||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); |
|||
|
|||
--vt-c-text-light-1: var(--vt-c-indigo); |
|||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66); |
|||
--vt-c-text-dark-1: var(--vt-c-white); |
|||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64); |
|||
} |
|||
|
|||
/* semantic color variables for this project */ |
|||
:root { |
|||
--color-background: var(--vt-c-white); |
|||
--color-background-soft: var(--vt-c-white-soft); |
|||
--color-background-mute: var(--vt-c-white-mute); |
|||
|
|||
--color-border: var(--vt-c-divider-light-2); |
|||
--color-border-hover: var(--vt-c-divider-light-1); |
|||
|
|||
--color-heading: var(--vt-c-text-light-1); |
|||
--color-text: var(--vt-c-text-light-1); |
|||
|
|||
--section-gap: 160px; |
|||
} |
|||
|
|||
@media (prefers-color-scheme: dark) { |
|||
:root { |
|||
--color-background: var(--vt-c-black); |
|||
--color-background-soft: var(--vt-c-black-soft); |
|||
--color-background-mute: var(--vt-c-black-mute); |
|||
|
|||
--color-border: var(--vt-c-divider-dark-2); |
|||
--color-border-hover: var(--vt-c-divider-dark-1); |
|||
|
|||
--color-heading: var(--vt-c-text-dark-1); |
|||
--color-text: var(--vt-c-text-dark-2); |
|||
} |
|||
} |
|||
|
|||
*, |
|||
*::before, |
|||
*::after { |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
color: var(--color-text); |
|||
background: var(--color-background); |
|||
transition: |
|||
color 0.5s, |
|||
background-color 0.5s; |
|||
line-height: 1.6; |
|||
font-family: |
|||
Inter, |
|||
-apple-system, |
|||
BlinkMacSystemFont, |
|||
'Segoe UI', |
|||
Roboto, |
|||
Oxygen, |
|||
Ubuntu, |
|||
Cantarell, |
|||
'Fira Sans', |
|||
'Droid Sans', |
|||
'Helvetica Neue', |
|||
sans-serif; |
|||
font-size: 15px; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
After Width: 1920 | Height: 1080 | Size: 795 KiB |
@ -1,35 +1,3 @@ |
|||
@import './base.css'; |
|||
|
|||
#app { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
a, |
|||
.green { |
|||
text-decoration: none; |
|||
color: hsla(160, 100%, 37%, 1); |
|||
transition: 0.4s; |
|||
padding: 3px; |
|||
} |
|||
|
|||
@media (hover: hover) { |
|||
a:hover { |
|||
background-color: hsla(160, 100%, 37%, 0.2); |
|||
} |
|||
} |
|||
|
|||
@media (min-width: 1024px) { |
|||
body { |
|||
display: flex; |
|||
place-items: center; |
|||
} |
|||
|
|||
#app { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
padding: 0 2rem; |
|||
} |
|||
} |
|||
*{ |
|||
margin: 0; |
|||
} |
|||
|
After Width: 317 | Height: 53 | Size: 2.0 KiB |
|
After Width: 267 | Height: 53 | Size: 2.0 KiB |
|
After Width: 1920 | Height: 255 | Size: 60 KiB |
|
After Width: 1224 | Height: 78 | Size: 27 KiB |
@ -0,0 +1,10 @@ |
|||
import service from "."; |
|||
|
|||
const ShowApi = { |
|||
//获取众筹信息
|
|||
showPage(){ |
|||
return service.get('/page'); |
|||
} |
|||
} |
|||
|
|||
export default ShowApi; |
|||
@ -0,0 +1,14 @@ |
|||
import axios from "axios"; |
|||
|
|||
const service = axios.create({ |
|||
baseURL: '/api', |
|||
}); |
|||
|
|||
|
|||
//Axios的响应拦截器..
|
|||
service.interceptors.response.use(resp => { |
|||
return resp.data; |
|||
}, error => { |
|||
return Promise.reject(error); |
|||
}); |
|||
export default service; |
|||
@ -1,7 +1,348 @@ |
|||
<script setup> |
|||
import ShowApi from '@/axios/ShowApi'; |
|||
import { ref } from 'vue'; |
|||
|
|||
|
|||
|
|||
//众筹参与者 |
|||
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> |
|||
|
|||
<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> |
|||
|
|||
<style scoped> |
|||
.container { |
|||
background-image: url("../assets/bg.png"); |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
|
|||
.title { |
|||
color: #FFC48D; |
|||
text-shadow: 20px 0 7px rgba(96, 0, 0, 0.35); |
|||
font-weight: 700; |
|||
width: auto; |
|||
height: auto; |
|||
font-size: 150px; |
|||
margin: auto; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding-top: 100px; |
|||
font-family: Alibaba PuHuiTi 3.0; |
|||
|
|||
} |
|||
|
|||
.minge { |
|||
font-weight: 700; |
|||
color: #FFC48D; |
|||
font-weight: 115 Black; |
|||
width: auto; |
|||
height: auto; |
|||
font-size: 110px; |
|||
text-align: center; |
|||
text-shadow: 0 20px 7px 0 #61000059; |
|||
margin: auto; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 50px; |
|||
} |
|||
|
|||
.state { |
|||
margin: auto; |
|||
margin-top: 40px; |
|||
background-color: #E0BA77; |
|||
border: 1px solid #BE6F2D; |
|||
border-radius: 29.18px 29.18px 29.18px 29.18px; |
|||
width: 355.09px; |
|||
height: 58.38px; |
|||
} |
|||
|
|||
.doing { |
|||
color: #AE0000; |
|||
display: inline-block; |
|||
font-weight: 800; |
|||
font-size: 30.41px; |
|||
text-align: center; |
|||
color: #AE0000 100%; |
|||
text-align: center; |
|||
padding-left: 20px; |
|||
padding-top: 5px; |
|||
} |
|||
|
|||
.finished { |
|||
margin-left: 19px; |
|||
margin-top: 7px; |
|||
display: inline-block; |
|||
width: 187.56px; |
|||
height: 45.62px; |
|||
border-radius: 22.81px 22.81px 22.81px 22.81px; |
|||
background: #ffffff; |
|||
color: #AE0000; |
|||
font-weight: 800; |
|||
font-size: 30.41px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.jindu { |
|||
margin-top: 25px; |
|||
display: flex; |
|||
/* 启用 Flexbox 布局 */ |
|||
justify-content: center; |
|||
} |
|||
|
|||
.current { |
|||
display: inline-block; |
|||
background-image: url("../assets/圆角矩形 2.png"); |
|||
width: 316.13px; |
|||
height: 52px; |
|||
margin-right: 20vw; |
|||
/* 文字 */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #bb0404; |
|||
font-size: 32px; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.goal { |
|||
display: inline-block; |
|||
background-image: url("../assets/圆角矩形 3.png"); |
|||
width: 266.13px; |
|||
height: 52px; |
|||
/* margin-left: 60vw; */ |
|||
/* 文字 */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #bb0404; |
|||
font-size: 32px; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.progress-bar { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.progress-bg { |
|||
background-image: url("../assets/底座.png"); |
|||
/* width: 1920px; */ |
|||
height: 200px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.progress-bottem { |
|||
/* padding-top: 100px; */ |
|||
background-image: url("../assets/进度条底.png"); |
|||
background-repeat: no-repeat; |
|||
display: grid; |
|||
place-items: center; |
|||
width: 1224px; |
|||
height: 78px; |
|||
margin-top: auto; |
|||
margin-bottom: auto; |
|||
} |
|||
|
|||
.progress { |
|||
margin: auto; |
|||
/* padding-top: 80px; */ |
|||
width: 90%; |
|||
} |
|||
.el-progress__text { |
|||
font-size: 16px; /* 调整字体大小 */ |
|||
color: #333; /* 调整字体颜色 */ |
|||
} |
|||
.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; |
|||
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方向*/ |
|||
} |
|||
|
|||
.list-item { |
|||
flex: 0 0 calc(50% - 20px); |
|||
/* 占据一半宽度减去间隔 */ |
|||
margin-bottom: 5px; |
|||
/* 子元素之间的垂直间隔 */ |
|||
color: white; |
|||
/* 文字颜色 */ |
|||
|
|||
/* 垂直内边距 */ |
|||
display: inline-block; |
|||
|
|||
width: 60%; |
|||
box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度 */ |
|||
padding: 15px 0; |
|||
|
|||
|
|||
} |
|||
/* 为奇数项添加左边距，使得两列并排显示 */ |
|||
.list-item:nth-child(odd) { |
|||
margin-left: 0; |
|||
margin-right: 10px; /* 添加右边距，确保两列之间有间隔 */ |
|||
text-align: center; |
|||
} |
|||
|
|||
.list-item:nth-child(even) { |
|||
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; /* 右边距，可以根据需要调整 */ |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue