jiaoyisuo_2/repo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: IEO新币申购系统 — 申购/配售/历史+前端API对接

Browse Source
This commit is contained in:
testadmin
2026-04-28 17:18:00 +08:00
parent 5fb916b9c8
commit 406715b41d
2 changed files with 2710 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/startup.vue
+890
View File
@@ -0,0 +1,890 @@
<template>
<div>
<indexHeader></indexHeader>
<div class="startup-list-container">
<div class="startup-list-banner">
<div class="d-flex flex-column jc-between startup-list-banner-text">
<div>
<div class="banner-title1">{{$t("startup.banner_title_1")}}</div>
<div class="banner-title-desc dark-gray-font">{{$t("startup.banner_title_desc_1")}}</div>
</div>
<div class="startup-header-data">
<div class="header-data-title"> {{$t("startup.banner_title_2")}} </div>
<div class="header-data-content d-flex jc-between">
<div class="header-data-item d-flex flex-column">
<span class="header-data-number"> 8833.8% </span>
<span class="header-data-name"> PixeVerse(PIXEL) </span>
</div>
<div class="header-data-item d-flex flex-column">
<span class="header-data-number"> 8600.0% </span>
<span class="header-data-name"> Defi Land(DEFILAND) </span>
</div>
<div class="header-data-item d-flex flex-column">
<span class="header-data-number"> 8250.0% </span>
<span class="header-data-name"> ArtWallet(1ART) </span>
</div>
</div>
</div>
</div>
</div>
<div class="startup-banner-data d-flex jc-between">
<div class="banner-data-item d-flex flex-column jc-between align-center">
<span class="banner-data-item-num">591</span>
<span class="banner-data-item-name gray-font"> {{$t("startup.banner_data_item_1")}} </span>
</div>
<div class="banner-data-item d-flex flex-column jc-between align-center">
<span class="banner-data-item-num">$83,305,485</span>
<span class="banner-data-item-name gray-font"> {{$t("startup.banner_data_item_2")}} </span>
</div>
<div class="banner-data-item d-flex flex-column jc-between align-center">
<span class="banner-data-item-num">9,144,480</span>
<span class="banner-data-item-name gray-font"> {{$t("startup.banner_data_item_3")}} </span>
</div>
</div>
<div class="startup-list-content">
<!-- 待发行 Coming Soon -->
<div class="startup-list-inProgress" v-if="comingList.length">
<div class="startup-inProgress-title startup-list-common-title">
{{ $t("startup.coming_soon") || '待发行' }}
<input readonly="readonly" :value="comingList.length" class="total-su-underway" style="color: white;">
</div>
<div class="startup-inProgress-item gray-font d-flex startup-project-item" v-for="(item,index) in comingList" :key="'c'+index">
<div class="startup-project-img startup-inProgress-img">
<img :src="item.logo" class="item-img">
</div>
<div class="startup-inProgress-introduction d-flex justify-between">
<div class="startup-inProgress-introduction-box d-flex flex-column jc-between">
<div class="startup-inProgress-introduction-base">
<div class="startup-introduction-title startup-item-title d-flex flex-wrap">
<span class="startup-inProgress-name startup-project-introduction-name">{{item.title}}</span>
</div>
<div class="startup-introduction-desc not-prime-introduction-desc"> {{item.summary}} </div>
</div>
<div class="startup-inProgress-introduction-advanced d-flex align-end">
<div style="color:#f5a623;font-size:14px;">
{{ $t("startup.start_time") || '开始时间' }}: {{ item.start_time || '--' }}
</div>
</div>
</div>
<div class="startup-inProgress-more d-flex flex-column align-center jc-end">
<div class="startup-project-status-label startup-project-preheat startup-project-underway-label d-inline-flex align-center" style="background:#ff8c19;">
{{ $t("startup.coming_soon") || '待发行' }}
</div>
</div>
</div>
</div>
</div>
<!-- 发行中 In Progress -->
<div class="startup-list-inProgress">
<div class="startup-inProgress-title startup-list-common-title d-flex justify-between">
<div>
{{$t("startup.be_in_progress")}}
<input readonly="readonly" :value="list.length" class="total-su-underway" style="color: white;">
</div>
<router-link :to="{ name: 'UOrder',params: {active: 4}}" class="jump_uorder" style="font-size: 18px;"> {{$t("startup.my_subscription")}} </router-link>
</div>
<router-link :to="{ name: 'startupDetail',params: {project_id: item.id}}" class="startup-inProgress-item gray-font d-flex startup-project-item" v-for="(item,index) in list" :key="index">
<div class="startup-project-img startup-inProgress-img">
<img :src="item.logo" class="item-img">
</div>
<div class="startup-inProgress-introduction d-flex justify-between">
<div class="startup-inProgress-introduction-box d-flex flex-column jc-between">
<div class="startup-inProgress-introduction-base">
<div class="startup-introduction-title startup-item-title d-flex flex-wrap">
<span class="startup-inProgress-name startup-project-introduction-name">{{item.title}}</span>
</div>
<div class="startup-introduction-desc not-prime-introduction-desc"> {{item.summary}} </div>
</div>
<div class="startup-inProgress-introduction-advanced d-flex jc-between align-end">
<div class="startup-inProgress-progress">
<div class="p-bar-con d-flex align-center jc-between">
<ul class="su-dtl">
<li>
<span class="progress-rate">
<span class="p-num">{{item.total_sell}}</span>
/{{item.amout}} {{item.currency_name}}
</span>
</li>
</ul>
<div class="p-num startup-progress-curr-percent">
<span class="barPercent">{{$t("startup.surplus")}}{{parseFloat(item.percentage)}}%</span>
</div>
</div>
<div class="p-bar">
<div class="p-bar-in" :style="'width:'+ parseFloat(item.percentage)+'%'"></div>
</div>
</div>
</div>
</div>
<div class="startup-inProgress-more d-flex flex-column align-center jc-end">
<div class="startup-project-status-label startup-project-underway startup-project-underway-label d-inline-flex align-center">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.99935 12.8337C10.221 12.8337 12.8327 10.222 12.8327 7.00033C12.8327 3.77866 10.221 1.16699 6.99935 1.16699C3.77769 1.16699 1.16602 3.77866 1.16602 7.00033C1.16602 10.222 3.77769 12.8337 6.99935 12.8337Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 3.5V7L9.33333 8.16667" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
{{$t("startup.svg_be_in_progress")}}
</div>
<div class="startup-inProgress-btn startup-details-btn"> {{$t("startup.subscribe")}} </div>
</div>
</div>
</router-link>
</div>
<div class="startup-list-finish">
<div class="startup-list-finish-title-container">
<div class="startup-finish-title-box d-flex align-center jc-between">
<div class="startup-finish-title startup-list-common-title"> {{$t("startup.have_come_to_an_end")}} </div>
<span class="close-startup-finish-lists">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33203 3.33301L7.9987 7.99967M7.9987 7.99967L12.6654 3.33301M7.9987 7.99967L3.33203 12.6663M7.9987 7.99967L12.6654 12.6663" stroke="#04091A" stroke-width="2" stroke-linecap="square"></path>
</svg>
</span>
</div>
</div>
<div class="startup-finish-container d-flex flex-wrap">
<div class="startup-finish-item d-flex flex-column" v-for="(item,index) in overList" :key="index">
<div class="finish-item-img d-flex align-center jc-center">
<img :src="item.logo" class="item-img">
</div>
<div class="finish-item-content">
<div class="finish-item-title">{{item.title}}</div>
<div class="startup-introduction-base">
<div class="d-flex align-center jc-between">
<span class="introduction-base-name light-gray-font">{{$t("startup.purchased")}}</span>
<span class="introduction-base-num">{{parseFloat(item.total_sell) + " " + item.currency_name}}</span>
</div>
<div class="d-flex align-center jc-between">
<span class="introduction-base-name light-gray-font">{{$t("startup.have_reached")}}</span>
<span class="introduction-base-num">{{$t("startup.surplus2")+parseFloat(item.percentage) + "%"}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<indexFooter></indexFooter>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader';
import indexFooter from "@/view/indexFooter";
export default {
name: 'startup',
data() {
return {
list: [],
overList: [],
comingList: []
}
},
components: {
indexHeader,
indexFooter
},
mounted(){
this.getList()
},
methods:{
getList() {
var e = this;
this.$http({
url: "/api/ieo/list",
method: "GET",
headers: {
Authorization: localStorage.getItem("token") || ""
}
}).then(t=>{
if(t.data.type === 'ok'){
const list = t.data.message || []
list.forEach(function(item){
item.title = item.name
item.logo = item.thumb_image || ''
item.summary = item.description || ''
item.currency_name = item.symbol
item.amout = item.total_supply
item.total_sell = item.real_sold || 0
item.percentage = item.progress || 0
})
e.comingList = list.filter(it => it.status == 0)
e.list = list.filter(it => it.status == 1)
e.overList = list.filter(it => it.status == 2)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.startup-list-container {
min-width: 1440px;
color: #04091a;
font-size: 16px;
font-weight: 400;
font-family: Gate_Sans;
background: #151926!important;
color: #fff
}
.startup-list-banner {
min-height: 492px;
height: 492px;
background-image: url("../assets/images/startup_list_banner_dark.png");
background-repeat: no-repeat;
background-size: cover;
margin-top: -64px;
box-sizing: border-box;
padding: 64px 0;
width: 100%
}
@media screen and (min-width: 1800px) {
.startup-banner-data,.startup-con-main-container,.startup-crumbs-box,.startup-list-banner-text,.startup-list-content,.startup-list-finish-all .startup-finish-container,.startup-list-finish-all .startup-finish-title-box {
width:1200px
}
}
@media screen and (min-width: 1540px) {
.startup-banner-data,.startup-con-main-container,.startup-crumbs-box,.startup-list-banner-text,.startup-list-content,.startup-list-finish-all .startup-finish-container,.startup-list-finish-all .startup-finish-title-box {
padding-left:0;
padding-right: 0
}
}
@media screen and (max-width: 1440px) {
body {
overflow-x:scroll
}
.startup-banner-data,.startup-con-main-container,.startup-crumbs-box,.startup-list-banner-text,.startup-list-content,.startup-list-finish-all .startup-finish-container,.startup-list-finish-all .startup-finish-title-box {
width: 1200px
}
.startup-inProgress-introduction {
max-width: calc(100% - 160px)
}
.startup-prime-img {
min-width: 370px;
width: 370px;
height: 208px
}
.startup-inProgress-img {
width: 246px;
min-width: 246px;
height: 140px
}
.prime-details-btn,.startup-inProgress-btn {
min-width: 260px;
width: 260px
}
.startup-inProgress-progress {
width: 90%;
margin-right: unset
}
.startup-inProgress-introduction-base {
width: 90%
}
.finish-item-img {
width: 100%;
height: 168px
}
.startup-project-info-left {
width: calc(100% - 424px);
min-width: 648px;
min-height: 365px;
margin-right: 24px;
height: 21vw
}
.startup-project-info-img img {
width: 100%
}
.right_mcontent.su-contentdetail {
width: calc(100% - 530px);
margin-right: 48px
}
.startup-list-banner-text>div:not(.startup-header-data) {
width: calc(100% - 617px)
}
.cn-body .startup-header-data {
width: 536px
}
.cn-body .banner-title {
font-size: 48px;
line-height: 100%;
white-space: normal
}
}
@media screen and (max-width: 1280px) {
.startup-list-finish.startup-list-finish-all {
overflow-x:auto
}
.footer-container {
width: 100%
}
}
.startup-banner-data,.startup-list-banner-text {
width: 75%;
margin: 0 auto;
height: 100%
}
.flex-column {
flex-direction: column
}
.d-flex {
display: flex
}
.jc-between {
justify-content: space-between
}
.startup-list-banner-text {
display: flex;
flex-direction: unset;
align-items: center;
justify-content: space-between
}
.startup-list-banner-text>div:not(.startup-header-data) {
width: calc(100% - 673px)
}
.banner-title1 {
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 44px;
line-height: 130%;
margin-bottom: 24px
}
.cn-body .banner-title1 {
font-size: 52px;
line-height: 52px;
white-space: nowrap
}
.banner-title-desc {
font-size: 20px;
line-height: 20px
}
.dark-gray-font {
color: #989fb3
}
.cn-body .banner-title-desc {
font-size: 24px;
line-height: 24px
}
.startup-header-data {
width: 569px;
box-sizing: border-box;
background: linear-gradient(308.17deg,hsla(0,0%,100%,.03) -3.78%,rgba(68,163,250,.1) 94.85%),hsla(0,0%,100%,.9);
box-shadow: 0 4px 40px rgba(23,56,153,.12);
border-radius: 8px;
padding: 24px
}
.header-data-title {
margin-bottom: 24px;
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 16px;
line-height: 16px
}
.header-data-number {
color: #11ad7a;
margin-bottom: 10px;
font-size: 36px;
line-height: 36px;
font-weight: 700;
font-family: Gate_Sans Bold
}
.header-data-name {
font-size: 14px;
line-height: 14px;
color: #606880
}
.startup-banner-data {
height: 128px;
display: flex;
margin-top: -64px;
align-items: center;
justify-content: space-around;
background: linear-gradient(310.85deg,hsla(0,0%,100%,.03) .26%,rgba(68,163,250,.1) 95.41%),hsla(0,0%,100%,.9);
box-shadow: 0 4px 40px rgba(23,56,153,.12);
border-radius: 8px
}
.startup-banner-data,.startup-header-data {
background: linear-gradient(308.17deg,hsla(0,0%,100%,.03) -3.78%,rgba(68,163,250,.1) 94.85%),rgba(28,28,28,.9);
box-shadow: 0 4px 40px rgba(23,56,153,.12)
}
.banner-data-item-num {
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 32px;
line-height: 32px;
margin-bottom: 16px
}
.banner-data-item-name {
line-height: 14px
}
.align-center {
align-items: center
}
.startup-list-content {
padding: 72px 0 140px;
width: 75%;
margin: 0 auto;
background: #151926!important;
width: 1200px
}
.startup-list-finish,.startup-list-inProgress {
margin-bottom: 140px
}
.startup-list-common-title {
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 40px;
line-height: 40px;
margin-bottom: 48px
}
.ti-right .base-info-con .su-tip,input.total-su-underway {
background: transparent
}
.total-su-underway {
display: inline-block;
border: none;
margin-left: 8px;
font-size: 24px;
font-weight: 700;
font-family: Gate_Sans Bold
}
.right-section.su-dtl-condition-item,.startup-help-share-item,.startup-list-content .startup-inProgress-item,.startup-project-info-con-box {
background: #1f2433
}
.banner-title-desc,.gray-font {
color: #989fb3
}
.startup-project-item {
width: 100%;
box-sizing: border-box;
border-radius: 16px;
margin-bottom: 24px
}
.startup-list-content .startup-inProgress-item {
padding: 24px;
box-shadow: 0 4px 16px rgba(23,56,153,.06);
border-radius: 8px;
justify-content: space-between;
min-height: 200px
}
.startup-inProgress-img {
width: 328px;
min-width: 328px;
height: 184px
}
.startup-project-img {
position: relative;
border-radius: 8px;
margin-right: 24px;
-o-object-fit: cover;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden
}
.startup-project-img .item-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
img {
vertical-align: middle;
border-style: none
}
.startup-inProgress-introduction {
max-width: calc(100% - 360px)
}
.startup-inProgress-introduction-box,.startup-inProgress-introduction {
width: 100%
}
.justify-between {
justify-content: space-between
}
.startup-introduction-title {
position: relative
}
.startup-inProgress-name {
color: #fff
}
.startup-project-introduction-name {
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 24px;
line-height: 24px;
margin-right: 24px;
margin-bottom: 12px;
display: inline-block
}
.finish-item-content .startup-type-label.title-tip-INITIAL,.title-tip-INITIAL {
color: #11ad7a;
background: #eef8f5
}
.startup-project-introduction-name.startup-inProgress-name {
margin-bottom: 4px
}
.startup-type-label {
background: #36f
}
.freeBoxInfo,.startup-type-label {
background: rgba(51,102,255,.08);
color: #36f
}
.finish-item-content .startup-type-label.title-tip-INITIAL,.title-tip-INITIAL {
background: rgba(19,191,134,.08);
color: #13bf86
}
.startup-introduction-desc {
margin-top: 12px;
line-height: 150%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: #606880
}
.startup-inProgress-progress {
box-sizing: border-box;
width: 90%
}
.progress-rate {
font-size: 20px;
line-height: 20px;
font-weight: 500;
font-family: Gate_Sans Medium;
color: #606880
}
.progress-rate .p-num {
color: #fff
}
.startup-progress-curr-percent {
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 20px;
line-height: 20px;
color: #36f
}
.p-bar {
height: 8px;
margin-top: 12px;
background: #eef1fa
}
.startup-inProgress-progress .p-bar,.startup-list-finish.startup-list-finish-all {
background: #292f40
}
.startup-inProgress-item:not(.startup-project-preheat) .p-bar-in:not(.p-bar-in-progress-0) {
background: linear-gradient(90deg,#39f,#2354e6);
box-shadow: 2px 0 2px rgba(7,255,210,.44)
}
.p-bar-in {
height: 100%;
max-width: 100%;
overflow: hidden;
position: relative
}
.startup-inProgress-item:not(.startup-project-preheat) .p-bar-in:not(.p-bar-in-progress-0):after {
content: "";
position: absolute;
height: 8px;
right: 0;
top: 0;
width: 27px;
background: linear-gradient(90deg,rgba(36,86,231,0),#34b6ff);
box-shadow: 2px 0 2px rgba(7,255,210,.44)
}
.startup-inProgress-more {
position: relative
}
.startup-project-con.zt1 .startup-project-status-label,.startup-project-underway {
background: #13bf86
}
.startup-project-underway-label {
position: absolute;
top: 0;
right: 0;
min-width: 83px;
height: 30px;
box-sizing: border-box;
padding: 8px;
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 12px;
line-height: 12px;
color: #fff;
border-radius: 4px
}
.startup-project-status-label>svg {
width: 14px;
height: 14px;
min-width: 14px;
margin-right: 8px
}
.d-inline-flex {
display: inline-flex
}
.light-gray-font,.startup-inProgress-timing .item-state,.su-progress-info .startup-progress-curr-percent {
color: #474f66
}
.startup-inProgress-timing .item-state {
text-align: right;
font-size: 20px;
font-weight: 500;
font-family: Gate_Sans Medium
}
.startup-inProgress-timing .item-state .timer-box {
color: #36f;
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 20px;
line-height: 20px;
margin-left: 4px
}
.timer-box {
margin-top: 22px
}
.jc-end {
justify-content: flex-end
}
.startup-details-btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
border-radius: 8px;
padding: 16px;
box-sizing: border-box;
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 20px;
line-height: 20px
}
.startup-inProgress-btn {
height: 52px;
width: 296px;
margin-top: 22px;
background: #36f;
border-radius: 8px;
color: #fff
}
.startup-project-con.zt2 .startup-project-status-label,.startup-project-status-label.startup-project-preheat {
background: #ff8c19
}
.startup-finish-item {
width: calc(25% - 24px);
min-height: 372px;
box-shadow: 0 4px 16px rgba(23,56,153,.06);
border-radius: 8px;
margin-bottom: 24px;
margin-right: 24px;
overflow: hidden
}
.startup-finish-item,.startup-project-info-con {
box-shadow: 0 4px 16px rgba(23,56,153,.06);
background: #1f2433
}
.finish-item-img {
width: 100%;
height: 192px;
border-radius: 8px;
overflow: hidden;
-o-object-fit: cover;
object-fit: cover
}
.finish-item-img .item-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.finish-item-content {
box-sizing: border-box;
width: 100%;
padding: 24px;
font-weight: 500;
font-family: Gate_Sans Medium;
color: #fff
}
.finish-item-content .startup-type-label,.startup-type-label-not-prime.startup-label-free {
background: rgba(51,102,255,.08);
color: #36f
}
.startup-type-label {
background: var(--brandColor);
color: #fff;
border-radius: 4px;
padding: 5px 12px;
text-align: center;
font-size: 12px;
line-height: 150%;
margin-right: 8px;
font-weight: 500;
font-family: Gate_Sans Medium
}
.startup-type-label-not-prime {
margin-right: 12px;
padding: 0 8px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(35,84,230,.08);
color: #2354e6
}
.finish-item-title {
margin: 24px 0;
font-weight: 500;
font-family: Gate_Sans Medium
}
.startup-introduction-base>div {
margin-bottom: 12px;
font-size: 14px;
line-height: 14px
}
.light-gray-font {
color: #474f66
}
.close-startup-finish-lists {
display: none;
width: 16px;
min-width: 16px;
height: 16px
}
.flex-wrap {
flex-wrap: wrap
}
.startup-finish-more {
margin-top: 24px
}
.jc-center {
justify-content: center
}
.startup-finish-more .startup-finish-show-more {
font-weight: 700;
font-family: Gate_Sans Bold;
font-size: 20px;
line-height: 20px;
color: #36f;
cursor: pointer
}
.startup-list-finish.startup-list-finish-all {
background: #292f40
}
.startup-banner-data {
width: 1200px
}
.jump_uorder:hover {
color: #36f
}
</style>
src/view/startupDetail.vue
+1820
View File
File diff suppressed because it is too large Load Diff