<template>
|
<div class="welcome">
|
<div class="welcome-content">
|
<div class="title-1">{{$t('message.home["歡迎來到 COLLOTI"]')}}</div>
|
<div class="title-2">{{$t('message.home["即刻開啟您的數字貨幣之旅。"]')}}</div>
|
<div class="action-btns">
|
<el-button class="jy" @click="$router.push(`coin/constract/btc?timestamp=${Date.now()}&RouterName=delivery`)"> {{$t('message.home.jiaoyi')}}</el-button>
|
<el-button class="cz" @click="$router.push('/recharge')"> {{$t('message.user.chongzhi')}}</el-button>
|
</div>
|
<div class="tip"> {{$t('message.home["揭開驚喜，解鎖獎勵 – 你的精彩之旅從這裡開始！"]')}} <img
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAMAAACOLiwjAAAAAXNSR0IArs4c6QAAADNQTFRFAAAAICAwICAwJSUwIiYuIiYuJCYwIiUuIyUuIyUvIyYvIyYuIyYvIyUvIyYvIyYvIyYvbgd1ZQAAABB0Uk5TABAgMH+AgI+Qn5+gr7/f76mIx4UAAABBSURBVBjTfc45DgAgCERR3Hfl/qe1c8ZCqf4LCUHEWTnjdUJBSaazpP213EP5Urw0VAsewYY7Udd3T26LO/gyUG8DewQfiCCoRgAAAABJRU5ErkJggg==">
|
</div>
|
</div>
|
<div class="bg-img">
|
<div class="suspension">
|
<div class="title">{{$t('message.home["立刻下載COLLOTI手機 App!"]')}}</div>
|
<div class="btns"><a class="apple-store" style="margin-right: 10px;">
|
<img
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAAXNSR0IArs4c6QAAAHhQTFRFAAAAICAwICAwICgwJSUwJCQwJCgwICctIyMtIyMwIyYwIyYuIyYwIyUtIyUwIicwIicuJCcwIiYuIiYuJCYwIiUuJCUuIiUuIyUwIyUvIyYwIyYvIyYuIyYvIyUvISUvIiUvIiYvIiYvIyYvIyYvIyYvIyYvIyYvSSHmhgAAACd0Uk5TABAgIDBAQE9QUFBfX2Bgb3Bwf4CAj4+QkJ+gr7C+v87P3t/f7u/+VHK92QAAAPpJREFUGBntwdFSgzAQBdC7hGCppVVRK6IpguH+/x+aOh2dkV0mvvccXP0l+xr/IA+RHfKVI8kW2Vxk4pFtZDIhW8OzHbIFJi/Ix+QV+Rw57JBDnEMivgDgtttKsKYJTMKtAKiOkWd9BUs58CL2x8AfTwJVGWkYoHGRJg9FoCV6KCqaamh6WjqoIi0FNCUtb1BtaGmhamhpoGpoaaFqaOmg2tASoXI0eagiLZNA09M0CBR3tE0FliRyxQ2Weq4osORpC9AEmjw0npYOumfqYgGdnKi6h8V9UtHB5md+m/lrEKwoP2bO83stQPk4MukF6/btQXDh24PHFb4AtqpwymP1xEcAAAAASUVORK5CYII="
|
class="icon">
|
<div class="p1">IOS</div>
|
<div class="p2">Download</div>
|
</a><a class="google-play"><img
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAjCAMAAABbyCHdAAAAAXNSR0IArs4c6QAAAKtQTFRFAAAAAAAAQEBAAAAAODhAAAAANTpAAAAAODxEAAAAAAAAAAAAAAAAAAAAOTtEAAAAHB4iODxEAAAAOTxDAAAAOjtDODtDAAAAAAAABQUFODxECAgJCAgKOTtDOT1DCwwNCwwODxASOTxEBwcJCgsNDg8REhMWFhcZFhcaGRodGRoeHB4iHR4iICImIyUrJCUqJykvKi0zKy0zLjE4MjQ7MjQ8MjU7NThAOTxEpF/e/AAAACN0Uk5TABAQICAwMEBAT19gb3Bwf4CAkJCfn6Cvv7+/39/f3+/v7++6JeDFAAABDElEQVQ4y7WTXVuCMBiGB2paZGRfDqJMEmdGI6vR8/9/WQeA7tngsJ3e93U979eEECKIopEYfpfr6nN3N2hEbwBgXuIBvvwCAKDKLnq5LOpGQLnsC5HmKJi+MiROAr79EAlbQJWde5wEs+cQCUeA2cWBw1nQW6sMCVfQCiiTEfOToBX1KsFCgwGYLCbeCEcMoJwThylqGwPrgDjM69bGeJ8y18puE9hPiGvFc/h5pHyteA6H1cTmbWmd8NvuQTLuhI9kSvOzGjNFfVjNef7Ut9ncBLwfHks6dvZP+Gnm3o+N8yvv/mx8G3r3aeH0zL//RA0Et++6C16Evf8rfAYA3IdDH3j8kOfpTPzP+wNccXgk9byhTQAAAABJRU5ErkJggg=="
|
class="icon">
|
<div class="p1">Android</div>
|
<div class="p2">Download</div>
|
</a></div>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="hot">-->
|
<!-- <ul>-->
|
<!-- <li>-->
|
<!-- <div class="left">-->
|
<!-- <div class="coin-info">-->
|
<!-- <div class="el-image" style="width: 24px; height: 24px;"><img-->
|
<!-- src="https://colloti.com/symbol/btc.png" class="el-image__inner"></div>-->
|
<!-- <span class="coin-title">BTC/USDT </span></div>-->
|
<!-- <div class="money">70871.11</div>-->
|
<!-- <div class="percentage percentage-add"> 2.56%</div>-->
|
<!-- </div>-->
|
<!-- <div class="right">-->
|
<!-- <div class="chart-wrap">-->
|
<!-- <div id="main" class="w-140 h-70 m-echartss"-->
|
<!-- style="width: 148px; height: 76px; -webkit-tap-highlight-color: transparent; user-select: none;">-->
|
<!-- <div-->
|
<!-- style="position: relative; width: 148px; height: 76px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </li>-->
|
<!-- <li>-->
|
<!-- <div class="left">-->
|
<!-- <div class="coin-info">-->
|
<!-- <div class="el-image" style="width: 24px; height: 24px;"><img-->
|
<!-- src="https://colloti.com/symbol/eth.png" class="el-image__inner"><!––></div>-->
|
<!-- <span class="coin-title">ETH/USDT </span></div>-->
|
<!-- <div class="money">3805.03</div>-->
|
<!-- <div class="percentage percentage-add"> 0.77%</div>-->
|
<!-- </div>-->
|
<!-- <div class="right">-->
|
<!-- <div class="chart-wrap">-->
|
<!-- <div id="main" class="w-140 h-70 m-echartss"-->
|
<!-- _echarts_instance_="ec_1717555089389"-->
|
<!-- style="width: 148px; height: 76px; -webkit-tap-highlight-color: transparent; user-select: none;">-->
|
<!-- <div-->
|
<!-- style="position: relative; width: 148px; height: 76px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </li>-->
|
<!-- <li>-->
|
<!-- <div class="left">-->
|
<!-- <div class="coin-info">-->
|
<!-- <div class="el-image" style="width: 24px; height: 24px;"><img-->
|
<!-- src="https://colloti.com/symbol/ltc.png" class="el-image__inner"><!––></div>-->
|
<!-- <span class="coin-title">LTC/USDT </span></div>-->
|
<!-- <div class="money">83.62</div>-->
|
<!-- <div class="percentage percentage-add"> 0.83%</div>-->
|
<!-- </div>-->
|
<!-- <div class="right">-->
|
<!-- <div class="chart-wrap">-->
|
<!-- <div id="main" class="w-140 h-70 m-echartss"-->
|
<!-- _echarts_instance_="ec_1717555089390"-->
|
<!-- style="width: 148px; height: 76px; -webkit-tap-highlight-color: transparent; user-select: none;">-->
|
<!-- <div-->
|
<!-- style="position: relative; width: 148px; height: 76px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </li>-->
|
<!-- </ul>-->
|
<!-- </div>-->
|
</template>
|
|
<script>
|
export default {
|
name: "pageDetail"
|
}
|
</script>
|
|
|
<style scoped lang="css">
|
|
.welcome {
|
height: 510px;
|
width: 100%;
|
background-color: #e9eeff;
|
display: flex;
|
justify-content: center;
|
|
.welcome-content {
|
width: 1200px;
|
margin-top: 122px;
|
position: relative;
|
}
|
}
|
|
.welcome .welcome-content .title-1 {
|
font-size: 40px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #2a64fb;
|
line-height: 47px;
|
}
|
|
.welcome .welcome-content .title-2 {
|
font-size: 40px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #23262f;
|
line-height: 47px;
|
margin-top: 10px;
|
}
|
|
.welcome .welcome-content .action-btns {
|
display: flex;
|
margin-top: 48px;
|
}
|
|
.welcome .welcome-content .action-btns button.jy {
|
background: #2a64fb;
|
border: 1px solid #2a64fb;
|
color: #fff;
|
}
|
|
.welcome .welcome-content .action-btns button {
|
cursor: pointer;
|
margin-left: 18px;
|
width: 200px;
|
height: 54px;
|
border-radius: 6px;
|
border: 1px solid #4c4f56;
|
background: none;
|
color: #4c4f56;
|
font-size: 20px;
|
font-family: PingFang SC;
|
font-weight: 600;
|
}
|
|
.welcome .welcome-content .tip {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
font-size: 20px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #23262f;
|
line-height: 36px;
|
display: flex;
|
align-items: center;
|
}
|
|
.welcome .welcome-content .tip img {
|
margin-left: 20px;
|
width: 5px;
|
height: 9px;
|
}
|
|
.welcome .bg-img {
|
position: absolute;
|
right: 0;
|
top: -70px;
|
width: 866px;
|
height: 640px;
|
background: url(https://colloti.com/img/right-bg-1.c9ac5e41.svg) 166px 0px no-repeat
|
}
|
|
.welcome .bg-img .suspension {
|
position: absolute;
|
left: 251px;
|
top: 262px;
|
width: 218px;
|
height: 139px;
|
border-radius: 18px;
|
background: hsla(0, 0%, 100%, .8);
|
animation: move-21751b44 4s linear 0s infinite
|
}
|
|
.welcome .bg-img .suspension .title {
|
line-height: 20px;
|
padding: 12px 0;
|
font-size: 16px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #23262f;
|
text-align: center
|
}
|
|
.welcome .bg-img .suspension .btns {
|
display: flex;
|
justify-content: center
|
}
|
|
.welcome .bg-img .suspension .btns > a {
|
cursor: pointer;
|
box-sizing: border-box;
|
width: 79px;
|
height: 70px;
|
background: #f7f9fc;
|
border-radius: 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
position: relative
|
}
|
|
.welcome .bg-img .suspension .btns > a:first-child img {
|
width: 22px;
|
height: 24px;
|
top: 8px
|
}
|
|
.welcome .bg-img .suspension .btns > a:nth-child(2) img {
|
width: 15px;
|
height: 17px
|
}
|
|
.welcome .bg-img .suspension .btns > a div {
|
font-size: 9px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #393c44;
|
line-height: 14px
|
}
|
|
.hot {
|
width: 1200px;
|
margin: 0 auto;
|
position: relative;
|
z-index: 1;
|
margin-top: 16px;
|
|
ul {
|
display: flex;
|
justify-content: space-between;
|
|
li {
|
position: relative;
|
width: 388px;
|
height: 126px;
|
background: #fff;
|
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
|
//margin-left: 18px;
|
border-radius: 8px;
|
padding: 19px 24px;
|
box-sizing: border-box;
|
display: flex;
|
|
.left {
|
width: 192px;
|
flex: 0 0 192px;
|
|
.coin-info {
|
display: flex;
|
height: 24px;
|
align-items: center;
|
|
.coin-title {
|
margin-left: 6px;
|
line-height: 20px;
|
font-size: 15px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #23262f;
|
}
|
}
|
|
.money {
|
margin-top: 11px;
|
font-size: 19px;
|
font-family: Noto Sans SC;
|
font-weight: 400;
|
color: #23262f;
|
line-height: 30px;
|
}
|
|
.percentage {
|
font-size: 13px;
|
font-family: Noto Sans SC;
|
font-weight: 400;
|
color: #03a66d;
|
line-height: 22px;
|
margin-top: 2px;
|
}
|
}
|
}
|
}
|
}
|
|
.swiper-img {
|
display: flex;
|
justify-content: center;
|
height: 160px;
|
margin: 0 auto;
|
margin-top: 69px;
|
margin-bottom: 20px;
|
|
.swiper-container {
|
width: 1200px;
|
|
.img-box {
|
display: flex;
|
}
|
}
|
}
|
|
|
.el-image {
|
position: relative;
|
display: inline-block;
|
overflow: hidden;
|
}
|
|
.el-carousel__item {
|
background-color: #ffffff;
|
}
|
|
/deep/ .el-carousel__container {
|
height: 164px;
|
}
|
|
.notice {
|
width: 1200px;
|
height: 67px;
|
display: flex;
|
align-items: center;
|
margin: 0 auto;
|
justify-content: space-between;
|
|
.icon {
|
flex: 0 0 25px;
|
height: 25px;
|
width: 25px;
|
}
|
|
.content {
|
font-size: 12px;
|
font-family: Noto Sans SC;
|
font-weight: 400;
|
color: #23262f;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
height: 67px;
|
line-height: 67px;
|
margin-right: 900px;
|
}
|
|
.more-icon {
|
flex: 0 0 60px;
|
width: 60px;
|
text-align: right;
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #23262f;
|
cursor: pointer;
|
|
img {
|
width: 16px;
|
height: 16px;
|
}
|
}
|
}
|
</style>
|
