|
|
|
@ -2,22 +2,32 @@ |
|
|
|
<div id="dowebok" ref="dowebok"> |
|
|
|
<div class="section"> |
|
|
|
<div class="banner-block col-xs-8"> |
|
|
|
<el-carousel :interval="6000" height="490px"> |
|
|
|
<!-- <el-carousel :interval="6000" height="490px"> |
|
|
|
<el-carousel-item v-for="item in pcBannerList" :key="item.id"> |
|
|
|
<img :src="item.imgurl" width="100%" height="100%" /> |
|
|
|
</el-carousel-item> |
|
|
|
</el-carousel> |
|
|
|
</el-carousel> --> |
|
|
|
<img src="../../assets/img/index_banner.png" alt="" class="index_banner"> |
|
|
|
<div class="banner_right"> |
|
|
|
<p class="banner_right_p">买币上Coinbebop</p> |
|
|
|
<input type="text" placeholder="输入您的邮箱" class="banner_right_input"> |
|
|
|
<div class="banner_right_code"> |
|
|
|
<input type="text" placeholder="输入您的邮箱验证码" class="banner_right_input"> |
|
|
|
<button>发送验证码</button> |
|
|
|
</div> |
|
|
|
<button class="banner_right_sign">立即注册</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 公告 --> |
|
|
|
<div class="notice container d-flex align-items-center"> |
|
|
|
<!-- <div class="notice container d-flex align-items-center"> |
|
|
|
<div class="item d-flex" @click="$router.push(`/notice/${item.id}`)" v-for="(item) in noticeList" :key="item.id"> |
|
|
|
<div class="title text-truncate">{{item.title}}</div> |
|
|
|
<div class="time">{{getNoticeDate(item.created_at)}}</div> |
|
|
|
</div> |
|
|
|
<router-link to="/notice" class="text-warning">{{$t('home.more')}}</router-link> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<!-- 走马灯 --> |
|
|
|
<div class="marquee"> |
|
|
|
<!-- <div class="marquee"> |
|
|
|
<div class="marquee-pargress d-flex"> |
|
|
|
<ul class="marquee-list d-flex" v-for="box in 4" :key="box"> |
|
|
|
<li |
|
|
|
@ -37,7 +47,7 @@ |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="section markets"> |
|
|
|
@ -48,10 +58,12 @@ |
|
|
|
<ul class="nav nav-tabs ticker-nav" role="tablist"> |
|
|
|
<li class="nav-item"> |
|
|
|
<div class="markets__title"> |
|
|
|
{{ $t("home.marketCenter") }} |
|
|
|
<!-- {{ $t("home.marketCenter") }} --> |
|
|
|
市场趋势 |
|
|
|
<span class="markets__title_span">/ 24小时货币最新动态</span> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li class="nav-item"> |
|
|
|
<!-- <li class="nav-item"> |
|
|
|
<a |
|
|
|
class="nav-link" |
|
|
|
href="javascript:void(0);" |
|
|
|
@ -74,7 +86,7 @@ |
|
|
|
href="javascript:void(0);" |
|
|
|
>{{ item.coin_name }}</a |
|
|
|
> |
|
|
|
</li> |
|
|
|
</li> --> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="market-ticker-block"> |
|
|
|
@ -157,18 +169,23 @@ |
|
|
|
<table class="table coin-list table-hover"> |
|
|
|
<thead> |
|
|
|
<tr> |
|
|
|
<th></th> |
|
|
|
<th scope="col">{{ $t("home.coinType") }}</th> |
|
|
|
<th scope="col">{{ $t("home.latestPrice") }}</th> |
|
|
|
<th scope="col"> |
|
|
|
{{ $t("home.upAndDown") }} |
|
|
|
<!-- <th></th> --> |
|
|
|
<!-- <th scope="col" class="table_th">{{ $t("home.coinType") }}</th> --> |
|
|
|
<th scope="col" class="table_th">币种</th> |
|
|
|
<th scope="col" class="table_th">{{ $t("home.low") }}</th> |
|
|
|
<!-- <th scope="col" class="table_th">{{ $t("home.latestPrice") }}</th> --> |
|
|
|
<th scope="col" class="table_th"> |
|
|
|
<!-- {{ $t("home.upAndDown") }} --> |
|
|
|
24小时涨停 |
|
|
|
<span class="ti-arrow-down"></span> |
|
|
|
</th> |
|
|
|
<th scope="col">{{ $t("home.heigh") }}</th> |
|
|
|
<th scope="col">{{ $t("home.low") }}</th> |
|
|
|
<th scope="col"> |
|
|
|
<th scope="col" class="table_th">行情</th> |
|
|
|
<th scope="col" class="table_th">交易</th> |
|
|
|
<!-- <th scope="col" class="table_th">{{ $t("home.heigh") }}</th> --> |
|
|
|
|
|
|
|
<!-- <th scope="col" class="table_th"> |
|
|
|
<div class="text-center">{{ $t("home.vol") }}</div> |
|
|
|
</th> |
|
|
|
</th> --> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
@ -180,27 +197,29 @@ |
|
|
|
v-show="isShow(item.pair_name)" |
|
|
|
:key="item.pair_name" |
|
|
|
> |
|
|
|
<td> |
|
|
|
<!-- <td> |
|
|
|
<i |
|
|
|
href="javascript:void(0);" |
|
|
|
@click="option(item)" |
|
|
|
:class="{ active: isCoolect(item) }" |
|
|
|
class="el-icon-star-on star-icon fn-22" |
|
|
|
></i> |
|
|
|
</td> |
|
|
|
</td> --> |
|
|
|
<td> |
|
|
|
<router-link :to="`/exchange/${item.symbol}`">{{ |
|
|
|
item.pair_name |
|
|
|
}}</router-link> |
|
|
|
<router-link :to="`/exchange/${item.symbol}`"> |
|
|
|
<img :src="item.coin_icon" alt="" class="coin_icon"> |
|
|
|
{{item.pair_name}} |
|
|
|
</router-link> |
|
|
|
</td> |
|
|
|
<td> |
|
|
|
<!-- <td> |
|
|
|
<span |
|
|
|
:class=" |
|
|
|
item.increase * 1 >= 0 ? 'increace' : 'decreace' |
|
|
|
" |
|
|
|
>{{ item.close }}</span |
|
|
|
> |
|
|
|
</td> |
|
|
|
</td> --> |
|
|
|
<td>{{ item.low }}</td> |
|
|
|
<td> |
|
|
|
<span |
|
|
|
:class=" |
|
|
|
@ -209,9 +228,24 @@ |
|
|
|
>{{ item.increaseStr }}</span |
|
|
|
> |
|
|
|
</td> |
|
|
|
<td>{{ item.high }}</td> |
|
|
|
<td>{{ item.low }}</td> |
|
|
|
<td class="text-center">{{ item.vol }}</td> |
|
|
|
<td> |
|
|
|
<!-- <span |
|
|
|
:class=" |
|
|
|
item.increase * 1 >= 0 ? 'increace' : 'decreace' |
|
|
|
" |
|
|
|
>{{ item.increaseStr }}</span |
|
|
|
> --> |
|
|
|
<img src="../../assets/img/increace.png" class="td_img" alt="" v-show="item.increase * 1 >= 0"> |
|
|
|
<img src="../../assets/img/decreace.png" class="td_img" alt="" v-show="item.increase * 1 < 0"> |
|
|
|
</td> |
|
|
|
<td> |
|
|
|
<router-link :to="`/exchange/${item.symbol}`"> |
|
|
|
<button class="td_button">购买</button> |
|
|
|
</router-link> |
|
|
|
</td> |
|
|
|
<!-- <td>{{ item.high }}</td> --> |
|
|
|
|
|
|
|
<!-- <td class="text-center">{{ item.vol }}</td> --> |
|
|
|
</tr> |
|
|
|
</template> |
|
|
|
</tbody> |
|
|
|
@ -224,107 +258,27 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
|
<!-- tag="button" |
|
|
|
type="button" --> |
|
|
|
<router-link |
|
|
|
to="/market" |
|
|
|
tag="button" |
|
|
|
type="button" |
|
|
|
|
|
|
|
class="view-more btn btn-outline-light" |
|
|
|
> |
|
|
|
{{ $t("home.more") }} |
|
|
|
<!-- {{ $t("home.more") }} --> |
|
|
|
查看更多 |
|
|
|
</router-link> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="section features"> |
|
|
|
<!-- new-ticker-block --> |
|
|
|
|
|
|
|
<header> |
|
|
|
<h3>{{ $t("home.features") }}</h3> |
|
|
|
</header> |
|
|
|
|
|
|
|
<aside class="activity-box"> |
|
|
|
<div class="swiper-container"> |
|
|
|
<ul class="swiper-wrapper"> |
|
|
|
<li |
|
|
|
:class="[`swiper-slide`, { zoom: item.zoom }]" |
|
|
|
v-for="(item, index) in featuresList" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<!-- 鼠标移上去效果 --> |
|
|
|
<section class="active"> |
|
|
|
<div> |
|
|
|
<img :src="item.thumb" width="80" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 标题内容 --> |
|
|
|
<h3>{{ item.title }}</h3> |
|
|
|
|
|
|
|
<!-- 固定内容的盒子 --> |
|
|
|
<section>{{ item.content }}</section> |
|
|
|
</section> |
|
|
|
|
|
|
|
<!-- 静止状态样式 --> |
|
|
|
<section class="default"> |
|
|
|
<!--固定背景的盒子--> |
|
|
|
<div> |
|
|
|
<img :src="item.picture" width="130" /> |
|
|
|
</div> |
|
|
|
<!-- 标题内容 --> |
|
|
|
<h3>{{ item.title }}</h3> |
|
|
|
</section> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<!-- Add Arrows --> |
|
|
|
<!-- |
|
|
|
<div class="swiper-button-next"></div> |
|
|
|
<div class="swiper-button-prev"></div> |
|
|
|
--> |
|
|
|
<!-- Add Pagination --> |
|
|
|
<div class="swiper-pagination"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="turning"> |
|
|
|
<!-- Add Arrows --> |
|
|
|
<a href="javascript:void 0" class="prevBtn"></a> |
|
|
|
<a href="javascript:void 0" class="nextBtn"></a> |
|
|
|
</div> |
|
|
|
</aside> |
|
|
|
</div> |
|
|
|
<div class="section"> |
|
|
|
<!-- 多平台下载 --> |
|
|
|
<div class="multi-platform" ref="platform"> |
|
|
|
<div class="d-flex container align-items-center"> |
|
|
|
<div class="left text-center d-flex align-items-center"> |
|
|
|
<div class="d-flex flex-column align-items-center"> |
|
|
|
<div class="h2">{{ $t("home.download") }}</div> |
|
|
|
<div class="tip1">{{ $t("home.easy") }}</div> |
|
|
|
<div class="qr-code-box"> |
|
|
|
<vue-qr :text="downloadLink" :margin="0" :size="200" /> |
|
|
|
<div class="label"> |
|
|
|
<img |
|
|
|
class="scan-icon" |
|
|
|
src="../../assets/img/homescan.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
{{ $t("home.skan") }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<img |
|
|
|
class="" |
|
|
|
src="../../assets/img/home_bgb.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="banner-block col-xs-8 banner2" > |
|
|
|
<p class="banner_right_p">顶级加密风控管理</p> |
|
|
|
<p class="banner_right_p1">为您的财产安全保驾护航</p> |
|
|
|
<button>由Coinbebop实验中心提供</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="section news"> |
|
|
|
<!-- wallets-section --> |
|
|
|
<div class="lattest-news-section"> |
|
|
|
@ -363,6 +317,62 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="banner-block col-xs-8 banner3" > |
|
|
|
<p class="banner3_p"> |
|
|
|
<span>立刻开始货币交易/</span> |
|
|
|
<span class="banner3_p_span">扫描下方二维码下载</span> |
|
|
|
</p> |
|
|
|
<div class="banner3_content"> |
|
|
|
<div class="banner3_content_item"> |
|
|
|
<img src="../../assets/img/homescan.png" alt="" class="banner3_content_item_code"> |
|
|
|
<div class="introduce"> |
|
|
|
<!-- <span class="glyphicon glyphicon-phone"></span> --> |
|
|
|
<span>Android扫码下载</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="banner3_content_item"> |
|
|
|
<img src="../../assets/img/homescan.png" alt="" class="banner3_content_item_code"> |
|
|
|
<div class="introduce"> |
|
|
|
<!-- <ion-icon name="phone-portrait"></ion-icon> --> |
|
|
|
<span>IOS扫码下载</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="section"> |
|
|
|
多平台下载 |
|
|
|
<div class="multi-platform" ref="platform"> |
|
|
|
<div class="d-flex container align-items-center"> |
|
|
|
<div class="left text-center d-flex align-items-center"> |
|
|
|
<div class="d-flex flex-column align-items-center"> |
|
|
|
<div class="h2">{{ $t("home.download") }}</div> |
|
|
|
<div class="tip1">{{ $t("home.easy") }}</div> |
|
|
|
<div class="qr-code-box"> |
|
|
|
<vue-qr :text="downloadLink" :margin="0" :size="200" /> |
|
|
|
<div class="label"> |
|
|
|
<img |
|
|
|
class="scan-icon" |
|
|
|
src="../../assets/img/homescan.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
{{ $t("home.skan") }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<img |
|
|
|
class="" |
|
|
|
src="../../assets/img/home_bgb.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- lattest-news-section --> |
|
|
|
<div class="colto-section"> |
|
|
|
<div class="container"> |
|
|
|
@ -370,14 +380,15 @@ |
|
|
|
class="colto-content-wrap d-flex flex-column align-items-center justify-content-center" |
|
|
|
> |
|
|
|
<div class="colto-content"> |
|
|
|
<div class="title">{{ $t("common.start-trade") }}</div> |
|
|
|
<!-- <div class="title">{{ $t("common.start-trade") }}</div> --> |
|
|
|
<div class="title">现在使用Coinbebop</div> |
|
|
|
</div> |
|
|
|
<div class="colto-btn-group" v-if="!isLogin"> |
|
|
|
<router-link tag="button" to="/sign-in" class="btn btn-success rounded-pill callto-btn">{{ |
|
|
|
<router-link tag="button" to="/sign-in" class="btn btn-success rounded-pill callto-btn container_button">{{ |
|
|
|
$t("common.login") |
|
|
|
}}</router-link> |
|
|
|
<span>or</span> |
|
|
|
<router-link tag="button" to="/sign-up" class="btn btn-primary rounded-pill callto-btn">{{ |
|
|
|
<router-link tag="button" to="/sign-up" class="btn btn-primary rounded-pill callto-btn container_button1">{{ |
|
|
|
$t("common.register") |
|
|
|
}}</router-link> |
|
|
|
</div> |
|
|
|
@ -1077,4 +1088,188 @@ export default { |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
.banner-block{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding-left: 136px; |
|
|
|
.index_banner{ |
|
|
|
width: 758px; |
|
|
|
height: 463px; |
|
|
|
} |
|
|
|
.banner_right{ |
|
|
|
width: 440px; |
|
|
|
margin-left: 353px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.banner_right_p{ |
|
|
|
color: white; |
|
|
|
font-size: 48px; |
|
|
|
font-weight: bold; |
|
|
|
margin-bottom: 30px; |
|
|
|
} |
|
|
|
.banner_right_input{ |
|
|
|
background-color: rgba(23, 38, 54, 100); |
|
|
|
color: white; |
|
|
|
font-size: 15px; |
|
|
|
height: 44px; |
|
|
|
border: none; |
|
|
|
padding-left: 10px; |
|
|
|
} |
|
|
|
.banner_right_code{ |
|
|
|
margin-top: 20px; |
|
|
|
margin-bottom: 30px; |
|
|
|
input{ |
|
|
|
width: 310px; |
|
|
|
|
|
|
|
} |
|
|
|
button{ |
|
|
|
width: 125px; |
|
|
|
height: 44px; |
|
|
|
border: none; |
|
|
|
background-color: rgba(49, 65, 132, 100); |
|
|
|
color: rgba(255, 255, 255, 100); |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
.banner_right_sign{ |
|
|
|
height: 44px; |
|
|
|
border: none; |
|
|
|
background-color: rgba(49, 65, 132, 100); |
|
|
|
color: rgba(255, 255, 255, 100); |
|
|
|
width: 100%; |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.markets__title_span{ |
|
|
|
font-size: 16px; |
|
|
|
color: #A1A7AE; |
|
|
|
display: inline-block; |
|
|
|
margin-left: 22px; |
|
|
|
} |
|
|
|
.table_th{ |
|
|
|
background-color: #222E3E; |
|
|
|
text-align: center; |
|
|
|
color: #9B9B9B; |
|
|
|
} |
|
|
|
.coin-list tbody tr{ |
|
|
|
background: transparent; |
|
|
|
text-align: center; |
|
|
|
td{ |
|
|
|
min-width: 150px; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.td_img{ |
|
|
|
width: 109px; |
|
|
|
height: 39px; |
|
|
|
} |
|
|
|
.td_button{ |
|
|
|
width: 140px; |
|
|
|
height: 34px; |
|
|
|
color: #2CB8FF ; |
|
|
|
font-size: 14px; |
|
|
|
border: 1px solid #4B5763; |
|
|
|
background: transparent; |
|
|
|
} |
|
|
|
.btn-outline-light{ |
|
|
|
border: none; |
|
|
|
} |
|
|
|
.coin_icon{ |
|
|
|
width: 34px; |
|
|
|
height: 34px; |
|
|
|
margin-right:20px ; |
|
|
|
} |
|
|
|
.banner2{ |
|
|
|
background: url('../../assets/img/banner2.png') 100% 100% no-repeat; |
|
|
|
padding-left: 233px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
flex-direction: column; |
|
|
|
align-items:flex-start; |
|
|
|
|
|
|
|
.banner_right_p{ |
|
|
|
color: white; |
|
|
|
font-size: 48px; |
|
|
|
font-weight: bold; |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
.banner_right_p1{ |
|
|
|
color: #A0A7AD; |
|
|
|
font-size: 36px; |
|
|
|
margin-bottom: 51px; |
|
|
|
} |
|
|
|
button{ |
|
|
|
width: 398px; |
|
|
|
height: 52px; |
|
|
|
background: #3553D2; |
|
|
|
color: white; |
|
|
|
font-size: 20px; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
} |
|
|
|
.banner3{ |
|
|
|
background: url('../../assets/img/banner3.png') no-repeat; |
|
|
|
background-color: #162636; |
|
|
|
padding-right: 230px; |
|
|
|
padding-top: 129px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: flex-end; |
|
|
|
|
|
|
|
.banner3_p{ |
|
|
|
font-size: 16px; |
|
|
|
color: #9AA1A8; |
|
|
|
margin-bottom: 65px; |
|
|
|
|
|
|
|
.banner3_p_span{ |
|
|
|
font-size: 28px; |
|
|
|
color: white; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
.banner3_content{ |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.banner3_content_item{ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
margin-left: 90px; |
|
|
|
|
|
|
|
.banner3_content_item_code{ |
|
|
|
width: 160px; |
|
|
|
height: 160px; |
|
|
|
margin-bottom: 50px; |
|
|
|
} |
|
|
|
|
|
|
|
.introduce{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
color: white; |
|
|
|
font-size: 14px; |
|
|
|
width: 160px; |
|
|
|
justify-content: center; |
|
|
|
img{ |
|
|
|
width: 23px; |
|
|
|
height: 23px; |
|
|
|
margin-right: 9px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.banner3_content_item:first-child{ |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.colto-section{ |
|
|
|
background: #222E3E; |
|
|
|
} |
|
|
|
.container_button{ |
|
|
|
background: #3553D2 ; |
|
|
|
} |
|
|
|
.container_button1{ |
|
|
|
background: #6C7EE4 ; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
