<template>
|
<div class="welcome">
|
<div class="welcome-content">
|
<div class="title-1">{{ $t('message.home["歡迎來到 MT10"]') }}</div>
|
<div class="title-2">
|
{{ $t('message.home["即刻開啟您的數字貨幣之旅。"]') }}
|
</div>
|
<div class="action-btns" v-if="userStore.userInfo.token">
|
<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>
|
<el-button
|
v-if="!userStore.userInfo.token"
|
class="register-btn"
|
type="primary"
|
@click="$router.push('/login')"
|
>
|
<img
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAMAAADyQNAxAAAAAXNSR0IArs4c6QAAAGxQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////Pk/gVgAAACN0Uk5TAAgQGCAoMDc4QEhPWF9gZ2hveICHj5efp6+3v8fP3t/n7/fpv/78AAAA20lEQVQYGcXB4U6DMBgF0EspuA7mLKUgY7h93Pd/RxMzmzJbfhk9B/9OHa1z50Zhz4u/CnlfvEGeufBhNsipZwZzhYyRkQFpWhgRjaSWGy2SOm50SOq40SGp5UaLJC2MiEbawMiIjGpmMNfIMTMfLgZ5xi93Uq7+gD2qOTtnjwp/pyi1Lgvs0Y3th3EcettUyKjtuAi/yPJuaySo0ySMyGQVnpX9jU/EldhSfuUP4hU23MqE1RWIGGGSHBGZmHEpEFTCjLVC8MasVwSeWR5Bf3v28c0hOJyyavyyT6RgPCG9KV4nAAAAAElFTkSuQmCC"
|
/>
|
{{ $t('message.home["透過電子郵件/手機號碼註冊"]') }}
|
</el-button>
|
<div v-if="!userStore.userInfo.token" class="or"><span>or</span></div>
|
<div v-if="!userStore.userInfo.token" class="btns">
|
<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">Google Play</div>
|
<div class="mask">
|
<div class="mask-title">Scan to download</div>
|
<img src="https://MT10.com/er-code.png" class="icon" />
|
<button>More</button>
|
</div>
|
</a>
|
<a class="apple-store">
|
<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">App Store</div>
|
<div class="mask">
|
<div class="mask-title">Scan to download</div>
|
<img src="https://MT10.com/er-code.png" class="icon" />
|
<button>More</button>
|
</div>
|
</a>
|
</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="jq">
|
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
viewBox="0 0 1000 1000"
|
width="1000"
|
height="1000"
|
preserveAspectRatio="xMidYMid meet"
|
style="
|
width: 100%;
|
height: 100%;
|
transform: translate3d(0px, 0px, 0px);
|
content-visibility: visible;
|
"
|
>
|
<defs>
|
<clipPath id="__lottie_element_48">
|
<rect width="1000" height="1000" x="0" y="0"></rect>
|
</clipPath>
|
<image xlink:href="@/assets/images/img_0.png"></image>
|
<image xlink:href="@/assets/images/img_1.png"></image>
|
<image xlink:href="@/assets/images/img_2.png"></image>
|
<image xlink:href="@/assets/images/img_3.png"></image>
|
<image xlink:href="@/assets/images/img_4.png"></image>
|
<image xlink:href="@/assets/images/img_5.png"></image>
|
<image xlink:href="@/assets/images/img_6.png"></image>
|
</defs>
|
<g clip-path="url(#__lottie_element_48)">
|
<g
|
class="png"
|
style="display: block"
|
transform="matrix(1,0,0,1,270,662.5)"
|
opacity="1"
|
>
|
<image
|
width="376px"
|
height="339px"
|
preserveAspectRatio="xMidYMid slice"
|
xlink:href="@/assets/images/img_6.png"
|
></image>
|
</g>
|
<g
|
class="png"
|
style="display: block"
|
transform="matrix(1,0,0,1,520.5,110.54200744628906)"
|
opacity="1"
|
>
|
<image
|
class="img_5"
|
width="323px"
|
height="252px"
|
preserveAspectRatio="xMidYMid slice"
|
xlink:href="@/assets/images/img_5.png"
|
></image>
|
</g>
|
<g
|
class="png"
|
style="display: block"
|
transform="matrix(1,0,0,1,670.3294067382812,283.9642028808594)"
|
opacity="1"
|
>
|
<image
|
class="img_4"
|
width="355px"
|
height="365px"
|
preserveAspectRatio="xMidYMid slice"
|
xlink:href="@/assets/images/img_4.png"
|
></image>
|
</g>
|
<g
|
class="png"
|
style="display: block"
|
transform="matrix(0.9999943375587463,0.003364115720614791,-0.003364115720614791,0.9999943375587463,508.53765869140625,565.6394653320312)"
|
opacity="1"
|
>
|
<image
|
class="img_3"
|
width="376px"
|
height="319px"
|
preserveAspectRatio="xMidYMid slice"
|
xlink:href="@/assets/images/img_3.png"
|
></image>
|
</g>
|
<g
|
class="png"
|
style="display: block"
|
transform="matrix(0.9967423677444458,0.08065123856067657,-0.08065123856067657,0.9967423677444458,736.8223876953125,519.9822387695312)"
|
opacity="1"
|
>
|
<image
|
class="img_2"
|
width="247px"
|
height="246px"
|
preserveAspectRatio="xMidYMid slice"
|
xlink:href="@/assets/images/img_2.png"
|
></image>
|
</g>
|
<g
|
class="png"
|
style="display: block"
|
transform="matrix(0.14042603969573975,0.9900911450386047,-0.9900911450386047,0.14042603969573975,583.931884765625,641.3410034179688)"
|
opacity="1"
|
>
|
<image
|
class="img_1"
|
width="287px"
|
height="286px"
|
preserveAspectRatio="xMidYMid slice"
|
xlink:href="@/assets/images/img_1.png"
|
></image>
|
</g>
|
<g
|
class="png"
|
style="display: block"
|
transform="matrix(0.9967423677444458,0.08065123856067657,-0.08065123856067657,0.9967423677444458,780.9017333984375,260.44317626953125)"
|
opacity="1"
|
>
|
<image
|
class="img_0"
|
width="93px"
|
height="93px"
|
preserveAspectRatio="xMidYMid slice"
|
xlink:href="@/assets/images/img_0.png"
|
></image>
|
</g>
|
</g>
|
</svg>
|
</div>
|
<div class="suspension">
|
<div class="title">
|
{{ $t('message.home["立刻下載MT10手機 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://MT10.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://MT10.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://MT10.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>
|
import { useUserStore } from "@/store/user.js";
|
|
const userStore = useUserStore();
|
export default {
|
name: "pageDetail",
|
data() {
|
return {
|
userStore,
|
};
|
},
|
};
|
</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;
|
|
.register-btn {
|
width: 408px;
|
height: 52px;
|
font-size: 17px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #2a64fb;
|
border-radius: 6px;
|
outline: none;
|
border: none;
|
margin-top: 20px;
|
cursor: pointer;
|
|
img {
|
width: 18px;
|
height: 18px;
|
margin-right: 8px;
|
}
|
}
|
|
.or {
|
position: relative;
|
width: 408px;
|
margin-top: 17px;
|
height: 1px;
|
background: #afb1bb;
|
text-align: center;
|
|
span {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 34px;
|
height: 17px;
|
line-height: 17px;
|
font-size: 14px;
|
font-family: Noto Sans SC;
|
font-weight: 500;
|
color: #8b95a3;
|
background: #edf1ff;
|
}
|
}
|
|
.btns {
|
display: flex;
|
margin-top: 16px;
|
|
a {
|
cursor: pointer;
|
width: 196px;
|
height: 52px;
|
flex: 0 0 196px;
|
margin-left: 16px;
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
padding-left: 38px;
|
position: relative;
|
border-radius: 90px;
|
border: 1px solid #afb1bb;
|
|
&:first-child {
|
margin-left: 0;
|
}
|
|
img {
|
flex: 0 0 24px;
|
width: 24px;
|
height: 24px;
|
}
|
|
.p1 {
|
font-size: 17px;
|
font-family: Noto Sans SC;
|
font-weight: 500;
|
color: #23262f;
|
line-height: 24px;
|
margin-left: 8px;
|
}
|
|
.mask {
|
display: none;
|
position: absolute;
|
z-index: 10;
|
top: 61px;
|
left: -6px;
|
width: 182px;
|
height: 220px;
|
background: #fff;
|
border-radius: 6px;
|
box-sizing: border-box;
|
padding-top: 6px;
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
&:before {
|
content: "";
|
position: absolute;
|
top: -4px;
|
left: 45px;
|
width: 12px;
|
height: 12px;
|
border-radius: 3px;
|
transform-origin: center center;
|
transform: rotate(45deg);
|
background: #fff;
|
}
|
|
.mask-title {
|
font-size: 12px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #000;
|
line-height: 35px;
|
text-align: center;
|
}
|
|
img {
|
display: block;
|
width: 110px;
|
height: 110px;
|
margin: 0 auto;
|
margin-top: 7px;
|
}
|
|
button {
|
width: 137px;
|
height: 26px;
|
background: #2b64fb;
|
border-radius: 3px 3px 3px 3px;
|
border: none;
|
outline: none;
|
display: block;
|
margin: 0 auto;
|
margin-top: 20px;
|
font-size: 10px;
|
font-family: Noto Sans SC;
|
font-weight: 700;
|
color: #fff;
|
}
|
}
|
}
|
|
a.google-play img {
|
flex: 0 0 18px;
|
width: 18px;
|
height: 18px;
|
}
|
|
a:hover .mask {
|
display: block;
|
}
|
}
|
}
|
}
|
|
.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://MT10.com/img/right-bg-1.c9ac5e41.svg) 166px 0px
|
no-repeat;
|
.jq {
|
position: absolute;
|
top: 152px;
|
left: 149px;
|
width: 504.339px;
|
height: 510.84px;
|
}
|
}
|
|
.welcome .bg-img .suspension {
|
position: absolute;
|
left: 251px;
|
top: 262px;
|
width: 218px;
|
height: 139px;
|
border-radius: 18px;
|
background: hsla(0, 0%, 100%, 0.8);
|
animation: move-21751b44 4s linear 0s infinite;
|
}
|
|
@keyframes move-21751b44 {
|
0% {
|
transform: translateY(0);
|
}
|
|
49% {
|
transform: translateY(20px);
|
}
|
|
98% {
|
transform: translateY(0);
|
}
|
}
|
|
.img_1 {
|
transform-origin: 14.5% 14.5%;
|
animation: img_1_move 4s linear infinite;
|
}
|
.img_2 {
|
transform-origin: 12.5% 12.5%;
|
animation: img_1_move 4s linear infinite;
|
}
|
|
.img_0 {
|
transform-origin: 5% 5%;
|
animation: img_1_move 4s linear infinite;
|
}
|
|
.img_3 {
|
transform-origin: 12.5% 12.5%;
|
animation: img_3_move 4s linear infinite;
|
}
|
|
.img_4 {
|
animation: move-21751b44 4s linear 0s infinite;
|
}
|
|
.img_5 {
|
animation: move-21751b44 4s linear 0s infinite;
|
}
|
@keyframes img_3_move {
|
0% {
|
transform: rotate(0deg);
|
}
|
|
98% {
|
transform: rotate(-5deg);
|
}
|
}
|
|
@keyframes img_1_move {
|
0% {
|
transform: rotate(0deg);
|
}
|
|
/* 49% {
|
transform: rotate(180deg) translateY(10px);
|
} */
|
|
98% {
|
transform: rotate(90deg) translateX(10px);
|
}
|
}
|
|
.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, 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;
|
}
|
}
|
}
|
|
a {
|
text-decoration: none;
|
}
|
</style>
|
