You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3304 lines
91 KiB
3304 lines
91 KiB
<template>
|
|
<div id="dowebok" ref="dowebok">
|
|
<div class="section" v-if="0">
|
|
<div class="banner-block col-xs-8">
|
|
<!-- <el-carousel :interval="6000" height="490px" style="width: 100%">
|
|
<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
|
|
class="el_carousel"
|
|
:interval="3000"
|
|
arrow="never"
|
|
height="660px"
|
|
>
|
|
<el-carousel-item class="el_carousel_item">
|
|
<img src="../../assets/img/banner/yb4.jpg" />
|
|
</el-carousel-item>
|
|
<el-carousel-item class="el_carousel_item">
|
|
<img src="../../assets/img/banner/yb2.jpg" />
|
|
</el-carousel-item>
|
|
<el-carousel-item class="el_carousel_item">
|
|
<img src="../../assets/img/banner/yb3.jpg" />
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
|
|
<!-- <img src="../../assets/img/index_banner_2.png" alt="" class="index_banner">-->
|
|
<!-- <div class="banner_right">-->
|
|
<!-- <p class="banner_right_p">The world's top security risk control system</p>-->
|
|
<!-- <input type="text" :placeholder="$t('login.pleaseEmail')" class="banner_right_input">-->
|
|
<!-- <div class="banner_right_code">-->
|
|
<!-- <input type="text" :placeholder="$t('setting.enterCode')" class="banner_right_input">-->
|
|
<!-- <button>{{ $t("login.verCode") }}</button>-->
|
|
<!-- </div>-->
|
|
<!-- <button class="banner_right_sign">{{$t('common.sign_up')}}</button>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
|
|
<!-- 走马灯 -->
|
|
</div>
|
|
<div class="section" style="width: 100%;height:600px;background-color: #0D0E12;" v-if="0">
|
|
<!-- 全球数字资产交易平台 -->
|
|
<div class="section-block section-block-1" v-if="!isLogin">
|
|
<div>
|
|
<h1 style="font-size: 42px;">{{ $t("home.a4") }}</h1>
|
|
<h2 style="margin-bottom: 20px;">{{ $t("home.a5") }}</h2>
|
|
<router-link :to="`/sign-up`" class="btn3">{{ $t("home.a6") }}</router-link>
|
|
</div>
|
|
<img
|
|
src="../../../static/images/home_bg_1.png"
|
|
width="469px"
|
|
height="425px"
|
|
/>
|
|
</div>
|
|
<!-- 向賬戶充值 -->
|
|
<div class="section-block section-block-1" v-if="isLogin">
|
|
<div>
|
|
<h1>{{ $t("home.a0") }}</h1>
|
|
<h2 style="margin-bottom: 20px;">
|
|
{{ $t("home.a1") }}
|
|
<br />{{ $t("home.a2") }}
|
|
</h2>
|
|
<router-link to="/wallet/assets/exchange?buy=1" class="btn3">{{ $t("home.a3") }}</router-link>
|
|
</div>
|
|
<img
|
|
src="../../../static/images/home_bg_2.png"
|
|
width="454px"
|
|
height="482px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="marquee" v-if="marketList[0]&&0">
|
|
<div class="marquee-pargress d-flex">
|
|
<ul class="marquee-list d-flex" v-for="box in 4" :key="box+'box'">
|
|
<li class="item" v-for="item in marketList[0].marketInfoList" :key="item.coin_name + '' + box">
|
|
<div class="price-info d-flex">
|
|
<div class="symbol" style="margin-right: 5px">{{ item.pair_name }}</div>
|
|
<div class="d-flex">
|
|
<span>${{ item.price||item.close }}</span>
|
|
<span :class="item.increase >= 0 ? 'path_increace1' : 'path_decreace1'">({{ item.increaseStr }})</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- number count 五百万 -->
|
|
<div style="text-align: center;font-size: 32px;font-weight: bold;margin-top: 60px;" v-if="0">{{ $t("home.a42") }}</div>
|
|
<div class="num-info d-flex" v-if="0">
|
|
<div class="num-info-count">
|
|
<div class="num">{{ $t("home.a13") }}</div>
|
|
<div class="title">{{ $t("home.a17") }}</div>
|
|
</div>
|
|
<div class="num-info-count">
|
|
<div class="num">{{ $t("home.a14") }}</div>
|
|
<div class="title">{{ $t("home.a18") }}</div>
|
|
</div>
|
|
<div class="num-info-count">
|
|
<div class="num">{{ $t("home.a15") }}</div>
|
|
<div class="title">{{ $t("home.a19") }}</div>
|
|
</div>
|
|
<div class="num-info-count">
|
|
<div class="num">{{ $t("home.a16") }}</div>
|
|
<div class="title">{{ $t("home.a20") }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- 市场价行情价 -->
|
|
<div class="section-block" v-if="0">
|
|
<div class="col-xs-8 banner-block-2">
|
|
<div class="flex-item-2" v-for="(item) in homeList2">
|
|
<div class="price-info d-flex">
|
|
<img :src="item.coin_icon" alt="">
|
|
<div class="symbol" style="margin: 0px 20px 0px 6px;font-weight: bold;font-size: 16px;">
|
|
{{ item.pair_name }}
|
|
</div>
|
|
<div class="d-flex">
|
|
<span :class="item.increase >= 0 ? 'c_increase' : 'c_decreace'">
|
|
{{ item.increaseStr }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div style="font-weight: bold;font-size: 20px;">{{ item.close }}</div>
|
|
<!-- <div style="color: #999;">{{ "≈ "+item.count+" USDT" }}</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 系统公告 -->
|
|
<div class="section-block section-block-4" v-if="0">
|
|
<div class="d-flex justify-content-between">
|
|
<router-link class="post-link img-box notice-bg" v-for="(item, index) in noticeList" :key="index" :to="`/college/detail/${item.category_id}/${item.id}`">
|
|
<!-- <div>{{ item.title }}</div> -->
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<!-- 市场趋势 -->
|
|
<div class="section-block section-block-2" v-if="0">
|
|
<div class="d-flex justify-content-between" style="align-items: center;">
|
|
<h1>{{ $t("home.a8") }}</h1>
|
|
<!-- <span>
|
|
<router-link to="/exchange" style="color:#999;">{{ $t("home.a13") }}</router-link>
|
|
<img src="../../../static/images/icon/right.png" alt="" width="10" height="10" />
|
|
</span> -->
|
|
</div>
|
|
<div style="color: #999;">{{ $t("home.a7") }}</div>
|
|
<div class="d-flex justify-content-between mb-4">
|
|
<div style="width:25%;">
|
|
<div class="th">{{ $t("home.a9") }}</div>
|
|
<div class="td" v-for="(item, index) in brokenLine" :key="index">
|
|
<img :src="item.coin_icon" style="width:30px;height:30px;" />
|
|
<span>{{item.coin_name}}</span>
|
|
</div>
|
|
</div>
|
|
<div style="width:25%;">
|
|
<div class="th">{{ $t("home.a10") }}</div>
|
|
<div class="td" v-for="(item, index) in brokenLine" :key="index">{{item.close}}</div>
|
|
</div>
|
|
<div style="width:25%;">
|
|
<div class="th">{{ $t("home.a11") }}</div>
|
|
<div class="td" v-for="(item, index) in brokenLine" :key="index"
|
|
:class="item.increase < 0 ? 'td c_decreace' : 'td c_increase'">{{item.increaseStr}}
|
|
</div>
|
|
</div>
|
|
<div style="">
|
|
<div class="th">{{ $t("home.a12") }}</div>
|
|
<div class="td" v-for="(item, index) in brokenLine" :key="index">{{item.vol}}</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div v-if="!isLogin">
|
|
<div style="font-weight: bold;font-size: 22px;">{{ $t("home.a14") }}</div>
|
|
<div class="btn3 mt-3"><router-link to="/sign-in" class="target-a">{{ $t("home.a15") }}</router-link></div>
|
|
</div> -->
|
|
</div>
|
|
<!-- <div class="marquee">
|
|
<div class="marquee-pargress d-flex">
|
|
<ul class="marquee-list d-flex" v-for="box in 4" :key="box">
|
|
<li class="item" v-for="item in homeList" :key="item.pair + '' + box">
|
|
<div class="price-info d-flex">
|
|
<div class="symbol" style="margin-right: 5px">
|
|
{{ item.pair }}
|
|
</div>
|
|
<div class="d-flex">
|
|
<span>{{ item.price }}</span>
|
|
<span :class="item.increase >= 0 ? 'increace' : 'decreace'">
|
|
{{ item.increaseStr }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- 公告 -->
|
|
<!-- <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 class="section1 markets">
|
|
<div class="new-ticker-block new-ticker-block-section">
|
|
<div class="container">
|
|
<div class="markets__container new-ticker-block-wrap shadow"> -->
|
|
<!-- <div class="ticker-head">
|
|
<ul class="nav nav-tabs ticker-nav" role="tablist">
|
|
<li class="nav-item">
|
|
<div class="markets__title">
|
|
{{ $t("home.marketCenter") }}
|
|
{{ $t('addinfo.MarketTrend') }}
|
|
<span class="markets__title_span"
|
|
>/ 24{{ $t("addinfo.HourlyCurrencyUpdates") }}</span
|
|
>
|
|
</div>
|
|
</li> -->
|
|
<!-- <li class="nav-item">-->
|
|
<!-- <a-->
|
|
<!-- class="nav-link"-->
|
|
<!-- href="javascript:void(0);"-->
|
|
<!-- @click="tab = 'Optional'"-->
|
|
<!-- :class="{ active: tab == 'Optional' }"-->
|
|
<!-- >-->
|
|
<!-- {{ $t("home.optional") }}-->
|
|
<!-- <i class="fa fa-stroopwafel"></i>-->
|
|
<!-- </a>-->
|
|
<!-- </li>-->
|
|
<!-- <li-->
|
|
<!-- class="nav-item"-->
|
|
<!-- @click="tab = item.coin_name"-->
|
|
<!-- v-for="item in marketList"-->
|
|
<!-- :key="item.coin_name"-->
|
|
<!-- >-->
|
|
<!-- <a-->
|
|
<!-- class="nav-link"-->
|
|
<!-- :class="{ active: tab == item.coin_name }"-->
|
|
<!-- href="javascript:void(0);"-->
|
|
<!-- >{{ item.coin_name }}</a-->
|
|
<!-- >-->
|
|
<!-- </li>-->
|
|
<!-- </ul>
|
|
</div> -->
|
|
<!-- <div class="market-ticker-block"> -->
|
|
<!-- Tab panes -->
|
|
<!-- <div class="tab-content">
|
|
<div
|
|
class="tab-pane fade in show"
|
|
:class="{ active: 'Optional' == tab }"
|
|
>
|
|
<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") }}
|
|
<span class="ti-arrow-down"></span>
|
|
</th>
|
|
<th scope="col">{{ $t("home.heigh") }}</th>
|
|
<th scope="col">{{ $t("home.low") }}</th>
|
|
<th scope="col">
|
|
<div class="text-center">{{ $t("home.vol") }}</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="item in collect"
|
|
v-show="isShow(item.pair_name)"
|
|
:key="item.pair_name"
|
|
>
|
|
<td>
|
|
<i
|
|
href="javascript:void(0);"
|
|
@click="option(item)"
|
|
:class="{ active: isCoolect(item) }"
|
|
class="el-icon-star-on fn-22"
|
|
></i>
|
|
</td>
|
|
<td>
|
|
<router-link :to="`/exchange/${item.symbol}`"
|
|
>{{ item.pair_name }}
|
|
</router-link>
|
|
</td>
|
|
<td>
|
|
<span
|
|
:class="
|
|
item.increase * 1 >= 0 ? 'increace' : 'decreace'
|
|
"
|
|
>{{ item.close }}</span
|
|
>
|
|
</td>
|
|
<td>
|
|
<span
|
|
:class="
|
|
item.increase * 1 >= 0 ? 'increace' : 'decreace'
|
|
"
|
|
>{{ item.increaseStr }}</span
|
|
>
|
|
</td>
|
|
<td>{{ item.high }}</td>
|
|
<td>{{ item.low }}</td>
|
|
<td class="text-center">{{ item.vol }}</td>
|
|
</tr>
|
|
<tr v-if="!collect.length">
|
|
<td colspan="7">
|
|
<no-record />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div
|
|
class="tab-pane fade in show"
|
|
:class="{ active: parentItem.coin_name == tab }"
|
|
v-for="parentItem in marketList"
|
|
:key="parentItem.coin_name"
|
|
>
|
|
<table class="table coin-list table-hover">
|
|
<thead>
|
|
<tr> -->
|
|
<!-- <th></th> -->
|
|
<!-- <th scope="col" class="table_th">{{ $t("home.coinType") }}</th> -->
|
|
<!-- <th scope="col" class="table_th">
|
|
{{ $t("option.coinType") }}
|
|
</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" class="table_th">
|
|
{{ $t("common.markets") }}
|
|
</th>
|
|
<th scope="col" class="table_th">
|
|
{{ $t("wallet.transaction") }}
|
|
</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> -->
|
|
<!-- </tr>
|
|
</thead>
|
|
<tbody>
|
|
<template
|
|
v-for="(item, idx) in parentItem.marketInfoList"
|
|
>
|
|
<tr
|
|
v-if="idx < 8"
|
|
v-show="isShow(item.pair_name)"
|
|
:key="item.pair_name"
|
|
> -->
|
|
<!-- <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>
|
|
<router-link :to="`/exchange/${item.symbol}`">
|
|
<img
|
|
:src="item.coin_icon"
|
|
alt=""
|
|
class="coin_icon"
|
|
/>
|
|
{{ item.pair_name }}
|
|
</router-link>
|
|
</td>
|
|
<td>
|
|
<span
|
|
:class="
|
|
item.increase * 1 >= 0 ? 'increace' : 'decreace'
|
|
"
|
|
>{{ item.close }}</span
|
|
>
|
|
</td> -->
|
|
<!-- <td>{{ item.low }}</td> -->
|
|
<!-- <td>
|
|
<span
|
|
:class="
|
|
item.increase * 1 >= 0 ? 'increace' : 'decreace'
|
|
"
|
|
>{{ item.increaseStr }}</span
|
|
>
|
|
</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"> -->
|
|
<!-- <svg width="109" height="39">
|
|
<g style="transform: translate(0, 10px)">
|
|
<path :d="item.line" :class="item.increase *1 <0 ?'path_decreace':'path_increace'"/>
|
|
</g>
|
|
</svg> -->
|
|
<!-- <price-line
|
|
:line="item.prices"
|
|
:increase="item.increase"
|
|
class="td_img"
|
|
/>
|
|
</td>
|
|
<td> -->
|
|
<!--<router-link :to="`/exchange/${item.symbol}`">-->
|
|
<!-- <router-link :to="`/exchange`">
|
|
<button class="td_button">
|
|
{{ $t("otc.b7") }}
|
|
</button>
|
|
</router-link>
|
|
</td> -->
|
|
<!-- <td>{{ item.high }}</td> -->
|
|
|
|
<!-- <td class="text-center">{{ item.vol }}</td> -->
|
|
<!-- </tr>
|
|
</template>
|
|
</tbody>
|
|
</table> -->
|
|
<!-- coin-list table -->
|
|
<!-- </div> -->
|
|
<!-- market-ticker-block -->
|
|
<!-- </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center"> -->
|
|
<!-- tag="button"
|
|
type="button" -->
|
|
<!-- <router-link to="/contract" class="view-more btn btn-outline-light">
|
|
{{ $t("home.more") }} -->
|
|
<!-- 查看更多-->
|
|
<!-- </router-link> -->
|
|
<!-- </div> -->
|
|
<!-- </div>
|
|
</div>
|
|
</div> -->
|
|
<!-- <div class="banner-block col-xs-8 banner2">-->
|
|
<!-- <p class="banner_right_p">{{ $t("addinfo.TopEncryptionRiskManagement") }}</p>-->
|
|
<!-- <p class="banner_right_p1">{{ $t("addinfo.EscortYourPropertySafety") }}</p>-->
|
|
<!-- <div class="banner_right_button">{{ $t("addinfo.ProvidedByTheExperimentalCenter") }}</div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="banner-block col-xs-8 banner3">-->
|
|
<!-- <p class="banner3_p">-->
|
|
<!-- <span>{{ $t("addinfo.ProvidedByTheExperimentalCenter") }}</span><br/>-->
|
|
<!-- <span class="banner3_p_span">{{ $t("addinfo.ScanTheQRCodeBelowToDownload") }}</span>-->
|
|
<!-- </p>-->
|
|
<!-- <div class="banner3_content">-->
|
|
<!-- <div class="banner3_content_item">-->
|
|
<!-- <!– <img src="../../assets/img/homescaniso.png" alt="" class="banner3_content_item_code"> –>-->
|
|
<!-- <img src="../../assets/img/download.png" alt="" class="banner3_content_item_code">-->
|
|
<!-- section <img src="../../assets/img/Android.png" alt="" class="banner3_content_item_code1">-->
|
|
<!-- <div class="introduce">-->
|
|
<!-- <!– <span class="glyphicon glyphicon-phone"></span> –>-->
|
|
<!-- <span>{{ $t("addinfo.AndroidScanCodeDownload") }}</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="banner3_content_item">-->
|
|
<!-- <!– <img src="../../assets/img/homescaniso.png" alt="" class="banner3_content_item_code"> –>-->
|
|
<!-- <img src="../../assets/img/download.png" alt="" class="banner3_content_item_code">-->
|
|
<!-- <!– <img src="../../assets/img/IOS.png" alt="" class="banner3_content_item_code1"> –>-->
|
|
<!-- <img src="../../assets/img/IOS.png" alt="" class="banner3_content_item_code1">-->
|
|
<!-- <div class="introduce">-->
|
|
<!-- <!– <ion-icon name="phone-portrait"></ion-icon> –>-->
|
|
<!-- <span>{{ $t("addinfo.IOSScanCodeDownload") }}</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!--中间显示4个图标-->
|
|
|
|
|
|
<div class="boximg">
|
|
<div class="section2 illustration_area">
|
|
<!-- <div class="left">
|
|
<div class="title">{{ $t("homeNewText.hh0") }}</div>
|
|
<div style="margin-top: 30px;font-size: 20px;">{{ $t("homeNewText.hh34") }}</div>
|
|
|
|
<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 100px;">
|
|
{{ $t("homeNewText.hh35") }}
|
|
</router-link>
|
|
<router-link v-else class="jump_btn" :to="{name:'exchange-assets'}" style="margin-top: 100px;">
|
|
{{ $t("homeNewText.aa4") }}
|
|
</router-link>
|
|
</div>
|
|
<div class="right" style="overflow: visible;">
|
|
<div class="right_box">
|
|
<div class="right_color">{{ $t("home.a26") }}</div>
|
|
<div class="right_img"><img src="@/assets/img/home/qrcode.png" alt="" /></div>
|
|
<div class="right_Android">IOS & Android</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="left">
|
|
<div class="title">{{$t("homeNewText.dd12")}}</div>
|
|
<div class="title">{{$t("homeNewText.dd13",{name:"Coinprx"})}}</div>
|
|
<div style="margin-top: 30px;font-size: 20px;color: rgba(29, 29, 29, 0.4);font-weight: bold;">{{$t("homeNewText.dd14")}}</div>
|
|
<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 50px;">
|
|
{{ $t("homeNewText.hh33") }} <img src="@/assets/img/home/right-line.png" alt="" width="24" height="24">
|
|
</router-link>
|
|
<router-link v-else class="jump_btn" :to="{name:'exchange-assets'}" style="margin-top: 50px;">
|
|
{{ $t("homeNewText.aa4") }}
|
|
</router-link>
|
|
</div>
|
|
<div class="right" style="overflow: visible;">
|
|
<img src="@/assets/img/home/img0.png" width="469px" height="425px"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="radial_bg">
|
|
<div class="num-info d-flex">
|
|
<div class="num-info-count">
|
|
<div class="num">200+</div>
|
|
<div class="title">{{ $t("homeNewText.dd8") }}</div>
|
|
</div>
|
|
<div class="num-info-count">
|
|
<div class="num">30M</div>
|
|
<div class="title">{{ $t("homeNewText.dd9") }}</div>
|
|
</div>
|
|
<div class="num-info-count">
|
|
<div class="num">50+</div>
|
|
<div class="title">{{ $t("homeNewText.dd10") }}</div>
|
|
</div>
|
|
<div class="num-info-count">
|
|
<div class="num">$1.17 B</div>
|
|
<div class="title">{{ $t("homeNewText.dd11") }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 寻找交易良机 -->
|
|
<div class="market_table" v-if="marketList[0]">
|
|
<div class="market_table_box">
|
|
{{ $t("homeNewText.hh1") }}
|
|
</div>
|
|
<div style="color: #999;line-height: 60px;font-size: 18px;">{{ $t("homeNewText.hh2") }}</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<div class="market_box">
|
|
<div class="title">
|
|
<div class="strip"></div>
|
|
<div class="name">{{ $t("homeNewText.dd15") }}</div>
|
|
</div>
|
|
<div v-for="(item, index) in marketList[0].marketInfoList.slice(0,5)" :key="index" class="market_tr">
|
|
<div class="d-flex align-items-center">
|
|
<img class="icon" :src="item.coin_icon" alt="">
|
|
<div>
|
|
<div style="font-weight: bold;">{{ item.coin_name }}</div>
|
|
<div style="color: #707a8a;font-size: 13px;">{{ item.pair_name }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="text-align: right;">{{ item.count }}</div>
|
|
<div style="text-align: right;" :class="item.increase >= 0 ? 'increace' : 'decreace'">{{ item.increaseStr }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="market_box">
|
|
<div class="title">
|
|
<div class="strip"></div>
|
|
<div class="name">{{ $t("homeNewText.dd16") }}</div>
|
|
</div>
|
|
<div v-for="(item, index) in sortedNegativeItems1.slice(0,5)" :key="index" class="market_tr">
|
|
<div class="d-flex align-items-center">
|
|
<img class="icon" :src="item.coin_icon" alt="">
|
|
<div>
|
|
<div style="font-weight: bold;">{{ item.coin_name }}</div>
|
|
<div style="color: #707a8a;font-size: 13px;">{{ item.pair_name }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="text-align: right;">{{ item.count }}</div>
|
|
<div style="text-align: right;" :class="item.increase >= 0 ? 'increace' : 'decreace'">{{ item.increaseStr }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="market_box">
|
|
<div class="title">
|
|
<div class="strip"></div>
|
|
<div class="name">{{ $t("homeNewText.dd17") }}</div>
|
|
</div>
|
|
<div v-for="(item, index) in sortedNegativeItems.slice(0,5)" :key="index" class="market_tr">
|
|
<div class="d-flex align-items-center">
|
|
<img class="icon" :src="item.coin_icon" alt="">
|
|
<div>
|
|
<div style="font-weight: bold;">{{ item.coin_name }}</div>
|
|
<div style="color: #707a8a;font-size: 13px;">{{ item.pair_name }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="text-align: right;">{{ item.count }}</div>
|
|
<div style="text-align: right;" :class="item.increase >= 0 ? 'increace' : 'decreace'">{{ item.increaseStr }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="market_tr" style="color: #999;line-height: 60px;">
|
|
<div>{{ $t("homeNewText.aa7") }}</div>
|
|
<div>{{ $t("homeNewText.bb1") }}</div>
|
|
<div>{{ $t("homeNewText.bb2") }}</div>
|
|
<div style="width: 25%;text-align: right;">{{ $t("homeNewText.bb3") }}</div>
|
|
</div>
|
|
<div v-for="(item, index) in marketList[0].marketInfoList.slice(0,5)" :key="index" class="market_tr"
|
|
style="font-weight: bold;">
|
|
<div>
|
|
<img class="icon" :src="item.coin_icon" alt="">
|
|
{{ item.coin_name }}
|
|
</div>
|
|
<div>{{ item.price }}</div>
|
|
<div :class="item.increase >= 0 ? 'increace' : 'decreace'">{{ item.increaseStr }}</div>
|
|
<div style="margin-left: 17%;width: 8%;text-align: right;">{{ item.count }}</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<!-- 立即尝试我们的加密货币交易所 -->
|
|
<div class="box1">
|
|
<div><img src="@/assets/img/home/img2.png" alt="" width="288" height="366"></div>
|
|
<div class="box1_text">
|
|
<div style="font-size: 42px;font-weight: bold;">{{ $t("homeNewText.hh3") }}</div>
|
|
<div class="quickopening">{{ $t("homeNewText.hh4") }}</div>
|
|
<div class="quickopening_box">
|
|
<div style="font-size: 36px;" v-if="!isLogin">{{ $t("homeNewText.hh5",{name:'Coinprx'}) }}</div>
|
|
<div style="font-size: 36px;" v-else>{{ $t("homeNewText.aa4") }}</div>
|
|
<!-- <div class="quickopening_register">
|
|
{{ $t("homeNewText.hh6") }} <img src="@/assets/img/home/right-line.png" alt="" width="24" height="24">
|
|
</div> -->
|
|
<router-link v-if="!isLogin" class="quickopening_register" :to="{name:'signUp'}">
|
|
{{ $t("homeNewText.hh6") }} <img src="@/assets/img/home/right-line.png" alt="" width="24" height="24">
|
|
</router-link>
|
|
<router-link v-else class="quickopening_register" :to="{name:'exchange-assets'}">
|
|
{{ $t("home.a41") }} <img src="@/assets/img/home/right-line.png" alt="" width="24" height="24">
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 了解我们的产品 -->
|
|
<div class="ProductsandServices">
|
|
<div class="title3" style="padding-top: 90px;">{{ $t("homeNewText.hh7") }}</div>
|
|
<div class="title3" style="font-size: 15px;color: #999999;margin-top: 10px;">{{ $t("homeNewText.hh8") }}</div>
|
|
<div class="web_area">
|
|
<div style="width: 48%;">
|
|
<div class="product">
|
|
<div>
|
|
<div class="product_text1">{{ $t("homeNewText.hh9") }}</div>
|
|
<div class="product_text2">{{ $t("homeNewText.hh10") }}</div>
|
|
</div>
|
|
<img src="@/assets/img/home/img3.png" alt="">
|
|
</div>
|
|
<div class="product">
|
|
<div>
|
|
<div class="product_text1">{{ $t("homeNewText.hh11") }}</div>
|
|
<div class="product_text2">{{ $t("homeNewText.hh12") }}</div>
|
|
</div>
|
|
<img src="@/assets/img/home/img5.png" alt="">
|
|
</div>
|
|
<div class="product">
|
|
<div>
|
|
<div class="product_text1">{{ $t("homeNewText.hh13") }}</div>
|
|
<div class="product_text2">{{ $t("homeNewText.hh14") }}</div>
|
|
</div>
|
|
<img src="@/assets/img/home/img7.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div style="width: 48%;">
|
|
<div class="product">
|
|
<div>
|
|
<div class="product_text1">{{ $t("homeNewText.hh15") }}</div>
|
|
<div class="product_text2">{{ $t("homeNewText.hh16") }}</div>
|
|
</div>
|
|
<img src="@/assets/img/home/img4.png" alt="">
|
|
</div>
|
|
<div class="product">
|
|
<div>
|
|
<div class="product_text1">{{ $t("homeNewText.hh17",{name:'Coinprx'}) }}</div>
|
|
<div class="product_text2">{{ $t("homeNewText.hh18") }}</div>
|
|
</div>
|
|
<img src="@/assets/img/home/img6.png" alt="">
|
|
</div>
|
|
<div class="product">
|
|
<div>
|
|
<div class="product_text1">{{ $t("homeNewText.hh19") }}</div>
|
|
<div class="product_text2">{{ $t("homeNewText.hh20") }}</div>
|
|
</div>
|
|
<img src="@/assets/img/home/img8.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 您可信且又安全的加密貨幣交易所 -->
|
|
<div class="title3" style="padding-top: 100px;font-weight: bold;">{{ $t("homeNewText.hh21") }}</div>
|
|
<div class="web_area" style="height: 480px;width: 1300px;">
|
|
<div style="width: 289px;">
|
|
<div style="text-align: center;">
|
|
<img src="@/assets/img/home/img9.png" width="134" height="134">
|
|
</div>
|
|
<div class="text_size">{{ $t("homeNewText.hh22") }}</div>
|
|
<div class="text_width">{{ $t("homeNewText.hh23") }}</div>
|
|
</div>
|
|
<div style="width: 289px;">
|
|
<div style="text-align: center;">
|
|
<img src="@/assets/img/home/img10.png" width="134" height="134">
|
|
</div>
|
|
<div class="text_size">{{ $t("homeNewText.hh24") }}</div>
|
|
<div class="text_width">{{ $t("homeNewText.hh25") }}</div>
|
|
</div>
|
|
<div style="width: 289px;">
|
|
<div style="text-align: center;">
|
|
<img src="@/assets/img/home/img11.png" width="134" height="134">
|
|
</div>
|
|
<div class="text_size">{{ $t("homeNewText.hh26") }}</div>
|
|
<div class="text_width" style="width: 289px;">{{ $t("homeNewText.hh27") }}</div>
|
|
</div>
|
|
<div style="width: 289px;">
|
|
<div style="text-align: center;">
|
|
<img src="@/assets/img/home/img12.png" width="134" height="134">
|
|
</div>
|
|
<div class="text_size">{{ $t("homeNewText.hh28") }}</div>
|
|
<div class="text_width">{{ $t("homeNewText.hh29",{name:'Coinprx'}) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Tradinganytime">
|
|
<div style="width: 854px;"><img src="@/assets/img/home/img13.png" style="width: 854px;height: 750px;"></div>
|
|
<div style="margin-left: 105px;">
|
|
<div style="font-size: 42px;font-weight: bold;">{{ $t("homeNewText.hh30") }}</div>
|
|
<div class="Tradinganytime_app">{{ $t("homeNewText.hh31") }}</div>
|
|
<div class="Tradinganytime_flex">
|
|
<div>
|
|
<div class="Tradinganytime_Android">
|
|
<img v-if="theme == 'dark'" src="@/assets/img/home/IOS1.png" width="20" height="20">
|
|
<img v-if="theme == 'light'" src="@/assets/img/home/IOS2.png" width="20" height="20">
|
|
<div style="height: 30px;">App Store</div>
|
|
</div>
|
|
<div class="Tradinganytime_Google">
|
|
<img v-if="theme == 'dark'" src="@/assets/img/home/Google1.png" width="20" height="20">
|
|
<img v-if="theme == 'light'" src="@/assets/img/home/Google2.png" width="20" height="20">
|
|
<div style="height: 30px;">Google Play</div>
|
|
</div>
|
|
<div class="Tradinganytime_IOS">
|
|
<img v-if="theme == 'dark'" src="@/assets/img/home/Android1.png" width="20" height="20">
|
|
<img v-if="theme == 'light'" src="@/assets/img/home/Android2.png" width="20" height="20">
|
|
<div style="height: 28px;">Android APK</div>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="line"></div>
|
|
<div class="line"></div>
|
|
<div class="line"></div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="Tradinganytime_img"><img src="../../assets/img/xus_qr.png" width="202" height="202"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="title1">{{ $t("homeNewText.hh36",{name:'Coinprx'}) }}</div>
|
|
<div class="Serve_bot">
|
|
<div class="Serve_bot_box1">
|
|
<div style="font-size: 28px;font-weight: 700;">{{$t("homeNewText.hh37")}}</div>
|
|
<div style="color: #707a8a;font-size: 16px;">{{ $t("homeNewText.hh38",{name:'Coinprx'}) }}</div>
|
|
</div>
|
|
<div class="Serve_bot_box2">
|
|
<div class="Serve_bot_box2_text">{{$t("homeNewText.hh39")}}</div>
|
|
<div style="color: #707a8a;">
|
|
<div class="Serve_bot_box2_text1">
|
|
{{ $t("homeNewText.hh40",{name:'Coinprx'}) }}
|
|
</div>
|
|
<div style="margin: 20px 0 20px;">{{$t("homeNewText.hh41")}}</div>
|
|
<div style="margin-bottom: 40px;">
|
|
<img src="@/assets/img/home/img14.svg" style="width: 40px;margin-right: 10px;" />
|
|
<img src="@/assets/img/home/img15.svg" style="width: 40px;margin-right: 10px;" />
|
|
<img src="@/assets/img/home/img16.svg" style="width: 40px;margin-right: 10px;" />
|
|
<img src="@/assets/img/home/img17.svg" style="width: 40px;margin-right: 10px;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="home-box6">
|
|
<img src="@/assets/img/home/img19.svg" style="width: 100%;" />
|
|
<div class="box6">
|
|
<div>
|
|
<div class="box6_txt">{{ $t("homeNewText.hh32") }}</div>
|
|
<div style="text-align: center;margin-top: 30px;">
|
|
<router-link v-if="!isLogin" class="jump_btn1" :to="{name:'signUp'}">
|
|
{{ $t("homeNewText.hh33") }}
|
|
</router-link>
|
|
<router-link v-else class="jump_btn1" :to="{name:'exchange-assets'}">
|
|
{{ $t("homeNewText.aa4") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- build --><!-- 多终端支持 -->
|
|
<div class="build-box" v-if="0">
|
|
<div class="build-bg"></div>
|
|
<div class="build-bottom d-flex">
|
|
<div class="build-left">
|
|
<!-- applogo -->
|
|
<div class="service-title">
|
|
<div class="build-left-text-appname"
|
|
style="font-size: 32px;font-weight: bold;"
|
|
>
|
|
{{ $t("home.a21") }}
|
|
</div>
|
|
<div style="font-size: 16px">
|
|
{{ $t("home.a22") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="build-left-text" style="font-size: 20px;margin-top: 30px;">
|
|
{{ $t("home.a23") }}
|
|
</div>
|
|
|
|
<div class="build-left-download d-flex">
|
|
<!-- ios -->
|
|
<div class="download">
|
|
<img src="../../../static/images/icon/antFill-apple@3x.png" alt="" />
|
|
<div class="download-ios-name">{{ $t("home.a24") }}</div>
|
|
</div>
|
|
<!-- android -->
|
|
<div class="download">
|
|
<img src="../../../static/images/icon/fab fa-android@3x.png" alt="" />
|
|
<div class="download-android-name">{{ $t("home.a25") }}</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- qrcode -->
|
|
<div class="d-flex" style="align-items: center;">
|
|
<div class="qrcode">
|
|
<img src="../../assets/img/xus_qr.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<span style="font-size: 20px;font-weight: bold;">{{ $t("home.a26") }}</span>
|
|
<br />
|
|
<span>{{ $t("home.a27") }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="build-right">
|
|
<div class="build-right-phone">
|
|
<img src="../../../static/images/a.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 在NVRcoin，交易安全稳定 -->
|
|
<div class="section-block section-block-3" v-if="0">
|
|
<h1>{{ $t("home.a28") }}</h1>
|
|
<div style="color: #6A6E74;">{{ $t("home.a29") }}</div>
|
|
<div class="d-flex justify-content-between" style="flex-wrap: wrap;">
|
|
<div class="box box1">
|
|
<div>
|
|
<div class="txt_1">{{ $t("home.a30") }}</div>
|
|
<div class="txt_2">{{ $t("home.a31") }}</div>
|
|
</div>
|
|
<img src="../../../static/images/1.png" alt="">
|
|
</div>
|
|
<div class="box box2">
|
|
<div>
|
|
<div class="txt_1">{{ $t("home.a32") }}</div>
|
|
<div class="txt_2">{{ $t("home.a33") }}</div>
|
|
</div>
|
|
<img src="../../../static/images/2.png" alt="">
|
|
</div>
|
|
<div class="box box3">
|
|
<div>
|
|
<div class="txt_1">{{ $t("home.a34") }}</div>
|
|
<div class="txt_2">{{ $t("home.a35") }}</div>
|
|
</div>
|
|
<img src="../../../static/images/3.png" alt="">
|
|
</div>
|
|
<div class="box box4">
|
|
<div>
|
|
<div class="txt_1">{{ $t("home.a36") }}</div>
|
|
<div class="txt_2">{{ $t("home.a37") }}</div>
|
|
</div>
|
|
<img src="../../../static/images/4.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- why you choose -->
|
|
<div class="lattest-news-section" v-if="0">
|
|
<div class="section_choose service">
|
|
<!-- 标题 -->
|
|
<div class="service-title">
|
|
<div class="text service-title-text1">
|
|
{{ $t("common.Why") }}
|
|
</div>
|
|
<div class="dotfive d-flex">
|
|
<div class="dotblue" v-for="item in 5" :key="item"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div class="service-content d-flex">
|
|
<div
|
|
class="service-img"
|
|
style="width: 600px; height: 600px; margin-right: 66px"
|
|
>
|
|
<img
|
|
src="../../assets/img/network.svg"
|
|
style="width: 100%; height: 100%; object-fit: contain"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<!-- 文字部分 -->
|
|
|
|
<div class="service-content-r">
|
|
<div class="service-content-r_title">
|
|
{{ $t("common.believe") }}
|
|
</div>
|
|
|
|
<div class="service-content-text">
|
|
<div class="service-content-text-img">
|
|
<div class="content_img">
|
|
<img src="../../assets/img/icon/eyes.svg" alt="" />
|
|
</div>
|
|
<div class="service-content-text1-title">
|
|
{{ $t("common.Clarity") }}
|
|
</div>
|
|
</div>
|
|
<div class="text-box">
|
|
<div class="service-content-text1-info1 info">
|
|
{{ $t("common.help") }}
|
|
</div>
|
|
<div class="service-content-text1-info2 info">
|
|
{{ $t("common.helpp") }}.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="service-content-text">
|
|
<div class="service-content-text-img">
|
|
<div class="content_img">
|
|
<img src="../../assets/img/icon/dunpai.svg" alt="" />
|
|
</div>
|
|
<div class="service-content-text1-title">
|
|
{{ $t("common.safety") }}
|
|
</div>
|
|
</div>
|
|
<div class="text-box">
|
|
<div class="service-content-text1-info1 info">
|
|
{{ $t("common.double") }}
|
|
</div>
|
|
<div class="service-content-text1-info2 info">
|
|
{{ $t("common.double2") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="service-content-text">
|
|
<div class="service-content-text-img">
|
|
<div class="content_img">
|
|
<img src="../../assets/img/icon/shanguang.svg" alt="" />
|
|
</div>
|
|
<div class="service-content-text1-title">
|
|
{{ $t("common.convenient") }}
|
|
</div>
|
|
</div>
|
|
<div class="text-box">
|
|
<div class="service-content-text1-info info">
|
|
{{ $t("common.key") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="container">
|
|
<header>
|
|
<h3 class="news-title">{{ $t("common.noviceTutorial") }}</h3>
|
|
<div class="tips">{{$t('home.core_advantages')}}</div>
|
|
</header>
|
|
<div class="row content">
|
|
<template v-for="(item, idx) in articleList">
|
|
<div class="item rounded">
|
|
<router-link tag="div" :to="{name:'college-detail',params:{cid:item.category_id,aid:item.id}}" class="item rounded" :key="idx">
|
|
<figure>
|
|
<img :src="item.full_cover" alt="" />
|
|
<figcaption>
|
|
<h5 class="mt-4">{{ truncate(item.title, 26) }}</h5>
|
|
</figcaption>
|
|
<div class="eps-2" v-html="item.excerpt"></div>
|
|
</figure>
|
|
<article class="post-style-one" v-if="false">
|
|
<span class="post-metat-date">{{ item.updated_at }}</span>
|
|
<p class="post-entry" v-html="item.excerpt"></p>
|
|
|
|
<router-link
|
|
class="post-link"
|
|
:to="`/college/detail/${item.category_id}/${item.id}`"
|
|
>{{ $t("home.detail") }}</router-link
|
|
>
|
|
</article>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
</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>-->
|
|
|
|
<!-- our technology -->
|
|
<div class="lattest-news-section" v-if="0">
|
|
<div class="section_technology service">
|
|
<!-- 标题 -->
|
|
<div class="service-title">
|
|
<div class="text service-title-text1">
|
|
{{ $t("common.technology") }}
|
|
</div>
|
|
<div class="dotfive d-flex">
|
|
<div class="dotblue" v-for="item in 5" :key="item"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div class="service-content d-flex">
|
|
<!-- 文字部分 -->
|
|
<div
|
|
class="service-content-r"
|
|
style="margin-right: 80px; margin-left: 0"
|
|
>
|
|
<div
|
|
class="service-content-text"
|
|
style="
|
|
font-size: 24px;
|
|
width: 568px;
|
|
height: 323px;
|
|
line-height: 50px;
|
|
"
|
|
>
|
|
{{ $t("common.XUScoin") }}.
|
|
</div>
|
|
</div>
|
|
<!-- 右边图片 -->
|
|
<div class="service-img">
|
|
<img
|
|
src="../../assets/img/team.png"
|
|
style="width: 565px; height: 481px"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- beginner's guide -->
|
|
<div class="lattest-news-section" v-if="0">
|
|
<div class="beginner service">
|
|
<!-- 标题 -->
|
|
<div class="service-title">
|
|
<div
|
|
class="text service-title-text1"
|
|
style="font-size: 40px; font-weight: 700; line-height: 71px"
|
|
>
|
|
{{ $t("common.guide") }}
|
|
</div>
|
|
<div class="dotfive d-flex">
|
|
<div class="dotblue" v-for="item in 5" :key="item"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div class="beginner_content service-content d-flex">
|
|
<!-- 文字部分 -->
|
|
<div
|
|
class="beginner_content_r"
|
|
style="margin-left: 0; margin-right: 80px"
|
|
>
|
|
<div class="service-content-text beginner-text">
|
|
<div class="service-content-text-img text-img">
|
|
<div class="content_img">
|
|
<img src="../../assets/img/features/1@2x.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="text-box">
|
|
<div class="service-content-text1-title">
|
|
{{ $t("common.Wear") }}
|
|
</div>
|
|
<div class="service-content-text1-info1 info">
|
|
{{ $t("common.Get") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="service-content-text beginner-text">
|
|
<div class="service-content-text-img text-img">
|
|
<div class="content_img">
|
|
<img src="../../assets/img/features/2@2x.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="text-box">
|
|
<div class="service-content-text1-title">
|
|
{{ $t("common.deposit") }}
|
|
</div>
|
|
<div class="service-content-text1-info1 info">
|
|
{{ $t("common.Invest") }}
|
|
</div>
|
|
<div class="service-content-text1-info1 info">
|
|
{{ $t("common.Invest2") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="service-content-text beginner-text">
|
|
<div class="service-content-text-img text-img">
|
|
<div class="content_img">
|
|
<img src="../../assets/img/features/3@2x.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="text-box">
|
|
<div class="service-content-text1-title">
|
|
{{ $t("common.Complete") }}
|
|
</div>
|
|
<div class="service-content-text1-info2 info">
|
|
{{ $t("common.become") }}
|
|
</div>
|
|
<div class="service-content-text1-info3 info">
|
|
{{ $t("common.become2") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="service-content-text beginner-text">
|
|
<div class="service-content-text-img text-img">
|
|
<div class="content_img">
|
|
<img src="../../assets/img/features/4@2x.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="text-box">
|
|
<div class="service-content-text1-title">
|
|
{{ $t("common.Start") }}
|
|
</div>
|
|
<div class="service-content-text1-info1 info">
|
|
{{ $t("common.Sell") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图片 -->
|
|
<div class="service-img">
|
|
<img
|
|
src="../../assets/img/beginner.svg"
|
|
style="width: 555px; height: 481px"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- colto-btn-group -->
|
|
<div
|
|
class="colto-btn-group"
|
|
style="justify-content: center"
|
|
v-if="!isLogin"
|
|
>
|
|
<router-link
|
|
tag="button"
|
|
to="/sign-in"
|
|
class="btn btn-success rounded-pill callto-btn container_button"
|
|
style="background-color: rgb(84, 164, 80); margin-right: 50px"
|
|
>{{ $t("common.login") }}
|
|
</router-link>
|
|
<router-link
|
|
tag="button"
|
|
to="/sign-up"
|
|
class="btn btn-primary rounded-pill callto-btn container_button1"
|
|
style="background-color: rgb(50, 105, 235)"
|
|
>{{ $t("common.register") }}
|
|
</router-link>
|
|
</div>
|
|
<div v-else class="colto-btn-group">
|
|
<router-link
|
|
tag="button"
|
|
to="/exchange"
|
|
class="btn btn-primary rounded-pill callto-btn"
|
|
>{{ $t("common.trading") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 新手指引 -->
|
|
<div class="section-block section-block-4" style="margin-top: 50px;" v-if="0">
|
|
<h1>{{ $t("home.a38") }}</h1>
|
|
<div style="color: #6A6E74;margin-bottom: 30px;">{{ $t("home.a39") }}</div>
|
|
<div class="d-flex justify-content-between">
|
|
<div class="img-box-2" v-for="(item, index) in articleList" :key="index">
|
|
<router-link class="post-link" :to="`/college/detail/${item.category_id}/${item.id}`">
|
|
<!-- <img :src="item.full_cover" alt="" > -->
|
|
<div class="img"></div>
|
|
</router-link>
|
|
<!-- <div>{{ item.title }}</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 立即赚取收益 -->
|
|
<div class="section-block section-block-5" v-if="0">
|
|
<img src="../../../static/images/coin_1.png" alt="" style="width: 80px;height: 80px;margin-right: 10px;">
|
|
<div style="flex: 1;text-align: left;">
|
|
<h1 style="font-size: 40px;margin-bottom: 10px;">{{ $t("home.a43") }}</h1>
|
|
<div style="font-size: 18px;">{{ $t("home.a40") }}</div>
|
|
</div>
|
|
<router-link :to="`/exchange`" class="btn4" v-if="isLogin">{{ $t("home.a41") }}</router-link>
|
|
<router-link :to="`/sign-in`" class="btn4" v-if="!isLogin">{{ $t("home.a41") }}</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from "vue";
|
|
// import VueAwesomeSwiper from "vue-awesome-swiper";
|
|
import vueQr from "vue-qr";
|
|
import Home from "@/api/home";
|
|
// import "swiper/swiper-bundle.css";
|
|
import Socket from "@/api/server/Socket.js";
|
|
import College from "@/api/college";
|
|
import Member from "@/api/member";
|
|
import * as d3 from "d3";
|
|
import priceLine from "../market/price-line";
|
|
// Vue.use(VueAwesomeSwiper);
|
|
export default {
|
|
components: {
|
|
vueQr,
|
|
priceLine,
|
|
},
|
|
|
|
computed: {
|
|
isLogin() {
|
|
return Boolean(localStorage.token);
|
|
},
|
|
downloadLink() {
|
|
return "https://seee.coinprx.com/download";
|
|
},
|
|
// 特色卡片列表
|
|
featuresList() {
|
|
return [
|
|
{
|
|
zoom: false,
|
|
bgclr: "rgba(76, 48, 115, 1)",
|
|
picture: require("@/assets/img/features/trade.png"),
|
|
thumb: require("@/assets/img/features/trade-thumb.png"),
|
|
title: this.$t("home.stablecoin_title"),
|
|
content: this.$t("home.stablecoin_cont"),
|
|
},
|
|
{
|
|
zoom: false,
|
|
bgclr: "rgba(60, 52, 125, 1)",
|
|
picture: require("@/assets/img/features/safe.png"),
|
|
thumb: require("@/assets/img/features/safe-thumb.png"),
|
|
title: this.$t("home.security_title"),
|
|
content: this.$t("home.security_cont"),
|
|
},
|
|
{
|
|
zoom: false,
|
|
bgclr: "rgba(93, 46, 93, 1)", // 背景色
|
|
picture: require("@/assets/img/features/server.png"),
|
|
thumb: require("@/assets/img/features/server-thumb.png"),
|
|
title: this.$t("home.service_title"),
|
|
content: this.$t("home.service_cont"),
|
|
},
|
|
{
|
|
zoom: false,
|
|
bgclr: "rgba(60, 52, 125, 1)",
|
|
picture: require("@/assets/img/features/analysis.png"),
|
|
thumb: require("@/assets/img/features/analysis-thumb.png"),
|
|
title: this.$t("home.analy_title"),
|
|
content: this.$t("home.analy_cont"),
|
|
},
|
|
{
|
|
zoom: false,
|
|
bgclr: "rgba(76, 48, 115, 1)",
|
|
picture: require("@/assets/img/features/tech.png"),
|
|
thumb: require("@/assets/img/features/tech-thumb.png"),
|
|
title: this.$t("home.technology_title"),
|
|
content: this.$t("home.technology_cont"),
|
|
},
|
|
{
|
|
zoom: false,
|
|
bgclr: "rgba(93, 46, 93, 1)",
|
|
picture: require("@/assets/img/features/flow.png"),
|
|
thumb: require("@/assets/img/features/flow-thumb.png"),
|
|
title: this.$t("home.liquidity_title"),
|
|
content: this.$t("home.liquidity_cont"),
|
|
},
|
|
];
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
swiperOptions: {
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
},
|
|
},
|
|
phonetype: ["Android", "ios"],
|
|
bannerList: [],
|
|
articleList: [],
|
|
homeList: [],
|
|
homeList2: [],
|
|
brokenLine: [],
|
|
iconList: [],
|
|
marketList: [],
|
|
tab: "Optional",
|
|
searchTxt: "",
|
|
skro: new Skroll(),
|
|
collect: [{ symbol: "" }],
|
|
ws: null,
|
|
pcBannerList: [],
|
|
noticeList: [],
|
|
data: [99, 71, 78, 25, 36, 92],
|
|
line: "",
|
|
helpList: [],
|
|
sortedNegativeItems:[],
|
|
sortedNegativeItems1:[],
|
|
theme:localStorage.getItem("theme"),
|
|
};
|
|
},
|
|
methods: {
|
|
getScales(data) {
|
|
const x = d3.scaleTime().range([0, 100]);
|
|
const y = d3.scaleLinear().range([39, 0]);
|
|
d3.axisLeft().scale(x);
|
|
d3.axisBottom().scale(y);
|
|
x.domain(d3.extent(data, (d, i) => i));
|
|
y.domain([0, d3.max(data, (d) => d)]);
|
|
return { x, y };
|
|
},
|
|
calculatePath() {
|
|
this.marketList[0].marketInfoList.map((item) => {
|
|
const scale = this.getScales(item.prices);
|
|
const path = d3
|
|
.line()
|
|
.x((d, i) => scale.x(i))
|
|
.y((d) => scale.y(d));
|
|
// this.calculatePath(item.prices)
|
|
item.line = path(item.prices);
|
|
});
|
|
// console.info(this.marketList[0].marketInfoList);
|
|
},
|
|
truncate(str, length) {
|
|
return _.truncate(str, { length });
|
|
},
|
|
isShow(str) {
|
|
let reg = new RegExp(this.searchTxt, "ig");
|
|
return reg.test(str);
|
|
},
|
|
filterCode: function (str) {
|
|
return str.replace(/<[^<>]+>/g, "").replace(/ /gi, "");
|
|
},
|
|
swiperPrev() {
|
|
let $swiper = this.$refs.swiper.$swiper;
|
|
$swiper.slidePrev();
|
|
},
|
|
swiperNext() {
|
|
let $swiper = this.$refs.swiper.$swiper;
|
|
$swiper.slideNext();
|
|
},
|
|
indexList() {
|
|
Home.indexList()
|
|
.then((res) => {
|
|
//console.info(res)
|
|
this.bannerList = res.bannerList;
|
|
|
|
this.homeList = res.homeList;
|
|
this.homeList2 = res.homeList.slice(0,4);
|
|
this.sortedNegativeItems = res.data.marketList;
|
|
this.sortedNegativeItems1 = res.data.marketList;
|
|
// console.log(res.homeList);
|
|
this.marketList = res.marketList;
|
|
// this.calculatePath()
|
|
this.iconList = res.iconList;
|
|
// this.pcBannerList = res.pcBannerList;
|
|
this.tab = this.marketList[0].coin_name;
|
|
// this.tab = "USDT";
|
|
// console.log(this.tab);
|
|
setTimeout(() => {
|
|
this.skroll();
|
|
}, 100);
|
|
})
|
|
.catch((res) => {});
|
|
},
|
|
skroll() {
|
|
// let skro = this.skro;
|
|
|
|
// skro
|
|
// .add(".marquee-list .item", {
|
|
// animation: "fadeInLeft",
|
|
// delay: 80,
|
|
// duration: 1000,
|
|
// })
|
|
// .add(".new-ticker-block", {
|
|
// animation: "fadeInRight",
|
|
// delay: 80,
|
|
// duration: 800,
|
|
// })
|
|
// .add(".shlitu", {
|
|
// animation: "fadeInLeft",
|
|
// delay: 80,
|
|
// duration: 800,
|
|
// })
|
|
// .add(".activity-box", {
|
|
// animation: "zoomIn",
|
|
// delay: 80,
|
|
// duration: 800,
|
|
// })
|
|
// .add(".lattest-news-section .item", {
|
|
// animation: "zoomIn",
|
|
// wait: 150,
|
|
// delay: 80,
|
|
// duration: 800,
|
|
// })
|
|
// .init();
|
|
},
|
|
|
|
// 是否为自选
|
|
isCoolect(i) {
|
|
return this.collect.map((item) => item.pair_name).includes(i.pair_name);
|
|
},
|
|
|
|
// 获取自选交易列表
|
|
getCollect() {
|
|
Home.getCollect()
|
|
.then((res) => {
|
|
this.collect = res || [];
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
|
|
// 添加自选
|
|
option(item) {
|
|
let data = {
|
|
pair_name: item.pair_name,
|
|
};
|
|
Home.option(data)
|
|
.then((res) => {
|
|
this.getCollect();
|
|
if (res) {
|
|
this.$message.success(this.$t("home.add"));
|
|
} else {
|
|
this.$message.success(this.$t("home.cancel"));
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
|
|
// 替换自选数据
|
|
replaceOptional() {
|
|
let collect = this.collect.map((item) => item.pair_name);
|
|
this.marketList.forEach((parentItem) => {
|
|
parentItem.marketInfoList.forEach((item) => {
|
|
let idx = collect.indexOf(item.pair_name);
|
|
if (idx != -1) {
|
|
this.collect.splice(idx, 1, item);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
// 链接socket
|
|
indexMarketList() {
|
|
const ws = new Socket(this.Globals.Server.Path.WS);
|
|
ws.on("open", () => {
|
|
this.ws = ws;
|
|
ws.send({
|
|
cmd: "sub",
|
|
msg: "indexMarketList",
|
|
});
|
|
});
|
|
ws.on("message", (res) => {
|
|
//console.info(res)
|
|
let { data, msg, code, sub, type, status } = res;
|
|
if (sub == "indexMarketList") {
|
|
this.marketList = data;
|
|
this.brokenLine = data[0].marketInfoList.slice(0,5);
|
|
this.homeList2 = data[0].marketInfoList.slice(0,4);
|
|
|
|
let allNegativeIncreaseItems = []
|
|
this.sortedNegativeItems = []
|
|
const excludedCoins = ["CQF", "HZL", "NKA", "PMK", "GCUL", "DFU", "ACK"];
|
|
data.forEach((item) => {
|
|
if (item.marketInfoList) {
|
|
const negativeItems = item.marketInfoList.filter((info) => {
|
|
// 条件1：increaseStr 以 "-" 开头（负增长）
|
|
// 条件2：coin_name 不在 excludedCoins 列表中
|
|
return (
|
|
info.increaseStr &&
|
|
info.increaseStr.startsWith("-") &&
|
|
!excludedCoins.includes(info.coin_name)
|
|
);
|
|
});
|
|
allNegativeIncreaseItems.push(...negativeItems); // 合并到总数组
|
|
}
|
|
});
|
|
this.sortedNegativeItems = [...allNegativeIncreaseItems].sort((a, b) => {
|
|
const numA = parseFloat(a.increaseStr);
|
|
const numB = parseFloat(b.increaseStr);
|
|
return numA - numB; // 升序排列（小的在前）
|
|
});
|
|
|
|
let allPositiveIncreaseItems = []; // 存储 "+" 开头的项
|
|
this.sortedNegativeItems1 = []; // 存储排序后的结果
|
|
|
|
data.forEach((item) => {
|
|
if (item.marketInfoList) {
|
|
const positiveItems = item.marketInfoList.filter((info) => {
|
|
return (
|
|
info.increaseStr &&
|
|
info.increaseStr.startsWith("+")&&
|
|
!excludedCoins.includes(info.coin_name)
|
|
)
|
|
});
|
|
allPositiveIncreaseItems.push(...positiveItems); // 合并到总数组
|
|
}
|
|
});
|
|
|
|
// 按数值降序排列（大的在前）
|
|
this.sortedNegativeItems1 = [...allPositiveIncreaseItems].sort((a, b) => {
|
|
const numA = parseFloat(a.increaseStr);
|
|
const numB = parseFloat(b.increaseStr);
|
|
return numB - numA; // 降序（大的在前）
|
|
});
|
|
|
|
// console.log(this.sortedNegativeItems,'123');
|
|
|
|
this.replaceOptional();
|
|
// this.calculatePath()
|
|
} else if (type == "ping") {
|
|
ws.send({
|
|
cmd: "pong",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 鼠标移入卡片的样式
|
|
addZoom(idx) {
|
|
// 放大图片
|
|
this.featuresList.forEach((item, key, arr) => {
|
|
if (idx == key) {
|
|
arr[key].zoom = true;
|
|
} else {
|
|
arr[key].zoom = false;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 鼠标移出卡片的样式
|
|
removeZoom(idx) {
|
|
this.featuresList[idx].zoom = false;
|
|
},
|
|
// 新手教程
|
|
getArticleList() {
|
|
College.getArticleList(18)
|
|
.then((data) => {
|
|
this.articleList = data.slice(0, 3);
|
|
setTimeout(() => {
|
|
this.skroll();
|
|
}, 100);
|
|
})
|
|
.catch();
|
|
},
|
|
// 獲取公告列表
|
|
article() {
|
|
Member.article({ type: "notice" }).then((res) => {
|
|
let arr = res.data;
|
|
arr.map(item=>{
|
|
if(item.id == 163 || item.id == 157 || item.id == 158){
|
|
this.noticeList.push(item)
|
|
}
|
|
})
|
|
// this.noticeList = res.data.slice(0, 3);
|
|
});
|
|
},
|
|
getNoticeDate(str) {
|
|
let _time = new Date(str);
|
|
return _time.getMonth() + 1 + "-" + _time.getDate();
|
|
},
|
|
getHelpList() {
|
|
College.getArticleList(18).then((res) => {
|
|
// console.log(res, 'collllll')
|
|
this.helpList = res.splice(0, 4);
|
|
});
|
|
},
|
|
},
|
|
created() {
|
|
this.indexList();
|
|
this.theme = localStorage.getItem("theme")||'light';
|
|
},
|
|
mounted() {
|
|
this.article();
|
|
this.getHelpList();
|
|
if (this.isLogin) {
|
|
this.getCollect();
|
|
}
|
|
this.indexMarketList();
|
|
this.getArticleList();
|
|
/*
|
|
* swiper 轮播图效果
|
|
*/
|
|
// features 卡片轮播
|
|
const mySwiper = new Swiper(".swiper-container", {
|
|
slidesPerGroup: 1,
|
|
loop: true,
|
|
loopFillGroupWithBlank: true,
|
|
slidesPerView: 3, // 每个视口显示个数
|
|
spaceBetween: 30, // 盒子之间的距离 由于异形slide初始化缩小了 因此不再设置距离
|
|
freeMode: false,
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
on: {
|
|
transitionEnd: function () {
|
|
$(".features aside ul").css("margin-left", `calc(50% - 640px)`);
|
|
},
|
|
},
|
|
});
|
|
|
|
$(".prevBtn").click(function () {
|
|
if (mySwiper.activeIndex <= 0) {
|
|
console.log(1);
|
|
$(this).addClass("my-button-disabled");
|
|
} else {
|
|
// 1+
|
|
mySwiper.slidePrev();
|
|
}
|
|
});
|
|
|
|
$(".nextBtn").click(function () {
|
|
// console.dir(mySwiper)
|
|
// if (mySwiper.realIndex == )
|
|
mySwiper.slideNext();
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#dowebok {
|
|
background: #121318 !important;
|
|
// padding-bottom: 100px;
|
|
.el_carousel {
|
|
width: 100%;
|
|
.el_carousel_item {
|
|
width: 100%;
|
|
height: 660px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
path {
|
|
// stroke: #76BF8A;
|
|
fill: none;
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
.path_decreace {
|
|
stroke: #ff231f;
|
|
}
|
|
|
|
.path_increace {
|
|
stroke: #6caf7e;
|
|
}
|
|
|
|
.path_decreace1 {
|
|
color: #ff231f;
|
|
}
|
|
|
|
.path_increace1 {
|
|
color: #6caf7e;
|
|
}
|
|
|
|
// .view-more {
|
|
// background: #fd5b2c !important;
|
|
// }
|
|
.notice {
|
|
white-space: nowrap;
|
|
|
|
.item {
|
|
white-space: nowrap;
|
|
padding: 15px 0;
|
|
width: 24%;
|
|
box-sizing: border-box;
|
|
padding-right: 20px;
|
|
cursor: pointer;
|
|
|
|
.title {
|
|
width: 80%;
|
|
}
|
|
|
|
.time {
|
|
margin-left: 5px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.section {
|
|
//background-image:url(../../assets/img/index_banner_2.png);
|
|
width: 100%;
|
|
height: 660px;
|
|
background-size: 100% 100%;
|
|
overflow-x: hidden;
|
|
background-color: transparent;
|
|
.banner-block {
|
|
width: 100%;
|
|
height: 660px;
|
|
.banner-block img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.news {
|
|
// height: 720px;
|
|
background-color: #ffffff;
|
|
color: #172636;
|
|
padding: 80px 0 0;
|
|
|
|
header {
|
|
height: 38px;
|
|
text-align: center;
|
|
|
|
h3 {
|
|
// border : 1px solid red;
|
|
margin-bottom: 0 !important; // 去除mb-4效果
|
|
@include font(Overpass, 30, 38, bold);
|
|
position: relative;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
left: 50%;
|
|
bottom: -10px;
|
|
transform: translateX(-50%);
|
|
height: 3px;
|
|
width: 50px;
|
|
background: #4681fb;
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
margin-top: 20px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin: 50px auto;
|
|
// border: 1px solid yellow;
|
|
@include flexible(row, space-between, flex-start, wrap);
|
|
|
|
.item {
|
|
border-radius: 2px;
|
|
width: 230px;
|
|
padding: 10px;
|
|
//margin-bottom: 20px;
|
|
@include flexible(row, flex-start, center);
|
|
// border: 1px solid red;
|
|
figure {
|
|
width: 100%;
|
|
padding: 5px;
|
|
flex-shrink: 0;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 200px;
|
|
}
|
|
|
|
figcaption {
|
|
@include font(Overpass, 15, 50);
|
|
}
|
|
|
|
// border: 1px solid red;
|
|
}
|
|
|
|
article {
|
|
border: none !important;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
margin-bottom: 41px;
|
|
}
|
|
|
|
.eps-2 {
|
|
font-size: 12px;
|
|
//color: #8a8a98;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ticker-nav .nav-item {
|
|
color: #888894;
|
|
}
|
|
|
|
.ticker-nav .nav-item a {
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.ticker-nav .nav-item a.active {
|
|
@include font(Overpass, 15, null, white, 800);
|
|
@include flexible(row, center, center);
|
|
|
|
&::after {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.start-trade {
|
|
background: #fd5b2c !important;
|
|
padding: 0 !important;
|
|
border: none;
|
|
width: 196px;
|
|
height: 58px;
|
|
border-radius: 29px;
|
|
text-align: center;
|
|
@include font(Overpass, 18, 58, #fff);
|
|
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.marquee {
|
|
width: 100%;
|
|
height: 60px;
|
|
// background-color: #0F4DF5;
|
|
background-size: 100% 100%;
|
|
.marquee-pargress {
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 60px;
|
|
// background: ("../../assets/img/bg/5.png") no-repeat !important;
|
|
// background-size: 100% 100%;
|
|
}
|
|
// .marquee-list{
|
|
// background: transparent;
|
|
// }
|
|
|
|
li.item {
|
|
font-size: 24px;
|
|
color: white;
|
|
flex: 1;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin: 0 100px;
|
|
|
|
padding: 10px 18px !important;
|
|
.price-info {
|
|
justify-content: space-around;
|
|
}
|
|
.justify-content-between {
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.section1 .new-ticker-block-section {
|
|
background-color: rgb(23, 30, 43);
|
|
}
|
|
.container {
|
|
width: 1200px;
|
|
height: 787px;
|
|
// background: url(../../assets/img/bg/juxing.png) no-repeat;
|
|
border: 3px solid white;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
}
|
|
.markets {
|
|
// border: 1px solid red;
|
|
.markets__title {
|
|
line-height: 55px;
|
|
// color: white;
|
|
color: #172636;
|
|
font-size: 24px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.markets__container {
|
|
// border : 1px solid blue;
|
|
margin: 50px auto 50px; // 居中
|
|
}
|
|
}
|
|
// .news[data-v-5954443c],
|
|
// .colto-section[data-v-5954443c] {
|
|
// background-color: rgb(23, 30, 43);
|
|
// }
|
|
.colto-content-wrap {
|
|
background-color: rgb(35, 40, 54);
|
|
}
|
|
// num count
|
|
.num-info {
|
|
width: 1200px;
|
|
height: 110px;
|
|
justify-content: space-between;
|
|
margin: 50px auto 0px;
|
|
.num-info-count {
|
|
.num {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
.title {
|
|
color: #999;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
//service模块
|
|
|
|
.service-title {
|
|
.service-title-text1 {
|
|
font-size: 40px;
|
|
}
|
|
.dotfive {
|
|
width: 106px;
|
|
height: 10px;
|
|
margin: 4px auto;
|
|
.dotblue {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 14px;
|
|
background-color: rgba(50, 105, 235, 1);
|
|
}
|
|
}
|
|
}
|
|
.lattest-news-section {
|
|
margin: 80px auto;
|
|
width: 1200px;
|
|
color: white;
|
|
text-align: center;
|
|
.service-content {
|
|
margin-top: 60px;
|
|
|
|
.service-content-r {
|
|
text-align: left;
|
|
.service-content-text {
|
|
.service-content-text-img {
|
|
.content_img {
|
|
width: 42px;
|
|
height: 42px;
|
|
margin: 20px 20px 20px 0;
|
|
}
|
|
text-align: left;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
margin-right: 10px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.service-content-text1-title {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
.text-box {
|
|
.service-content-text1-title {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// beginner guide
|
|
.beginner {
|
|
.beginner_content {
|
|
.beginner_content_r {
|
|
.beginner-text {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
.content_img {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-right: 20px;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.text-box {
|
|
text-align: left;
|
|
.service-content-text1-title {
|
|
font-size: 24px;
|
|
}
|
|
.service-content-text1-info1 {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// section-choose
|
|
.section_choose {
|
|
.service-content-r {
|
|
.service-content-text-img {
|
|
margin: 20px 0;
|
|
}
|
|
.service-content-r_title {
|
|
width: 534px;
|
|
height: 231px;
|
|
font-size: 36px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
.section-choose {
|
|
margin: 50px auto;
|
|
width: 100%;
|
|
height: 500px;
|
|
background-color: #000;
|
|
color: white;
|
|
text-align: center;
|
|
.section-choose-top {
|
|
.section-choose-boder {
|
|
margin: 10px auto;
|
|
width: 60px;
|
|
height: 10px;
|
|
background-color: rgb(50, 105, 235);
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
|
|
.section-choose-info {
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 50px;
|
|
.section-choose-info-text {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.choose-btn {
|
|
text-align: center;
|
|
line-height: 60px;
|
|
margin: 50px auto;
|
|
width: 245px;
|
|
height: 60px;
|
|
border-radius: 100px;
|
|
border: 1px solid rgb(50, 105, 235);
|
|
color: rgb(50, 105, 235);
|
|
}
|
|
}
|
|
|
|
//builed
|
|
.build-box {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: white;
|
|
padding: 50px 0px;
|
|
height: 725px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.build-bg{
|
|
width: 1830px;
|
|
height: 725px;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
z-index: 1;
|
|
border-radius: 0px 400px 400px 0px;
|
|
background-color: #0B0FCC;
|
|
}
|
|
.build-bottom {
|
|
width: 1200px;
|
|
margin: 0px auto;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
.text-start {
|
|
text-align: start;
|
|
}
|
|
.build-left {
|
|
text-align: left;
|
|
.service-title {
|
|
.dotfive {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
.build-left-download {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 220px;
|
|
height: 130px;
|
|
font-size: 14px;
|
|
border-radius: 9999px;
|
|
margin: 28px 0;
|
|
|
|
.download {
|
|
width: 100px;
|
|
text-align: center;
|
|
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
|
|
img{
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
.download:nth-of-type(1){
|
|
width: 80px;
|
|
}
|
|
.checked {
|
|
border-radius: 9999px;
|
|
border: 1px solid rgba(187, 187, 187, 1);
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: #000;
|
|
}
|
|
}
|
|
.qrcode {
|
|
width: 110px;
|
|
height: 110px;
|
|
padding: 10px;
|
|
border: 2px solid #fff;
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
margin-right: 15px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.build-right {
|
|
width: 800px;
|
|
height: 578px;
|
|
img {
|
|
width: 800px;
|
|
height: 578px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//banner-bottom
|
|
.banner-bottom {
|
|
margin: 0 auto;
|
|
height: 160px;
|
|
color: white;
|
|
// background: url(../../assets/img/bg/3.jpg) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
padding: 30px 0;
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
//colto-section
|
|
.colto-section {
|
|
.colto-btn-group {
|
|
}
|
|
}
|
|
|
|
.features {
|
|
width: 100%;
|
|
// 固定高度 宽度自适应
|
|
height: 700px;
|
|
padding: 70px 0 0;
|
|
// 图片默认底部对齐 水平居中
|
|
background: #2c2c38;
|
|
// background: #fff;
|
|
// 只设置宽度100% 高度自适应
|
|
// 超出的部分被裁剪
|
|
background-size: auto 100%;
|
|
color: white;
|
|
}
|
|
|
|
.features header {
|
|
width: 1280px;
|
|
margin: 0 auto;
|
|
height: 38px;
|
|
@include flexible(row, center, center);
|
|
|
|
h3 {
|
|
@include font(Overpass, 30, 38, bold);
|
|
}
|
|
}
|
|
|
|
.features aside {
|
|
width: 1350px;
|
|
margin: 35px auto 0px; // 居中
|
|
padding: 0 85px;
|
|
position: relative;
|
|
}
|
|
|
|
.features aside ul {
|
|
height: 500px;
|
|
|
|
li.swiper-slide {
|
|
// 原始尺寸
|
|
// width : 330px !important;
|
|
// height : 400px !important;
|
|
transition: transform 500ms ease 100ms;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
// 放大尺寸
|
|
width: 363px !important;
|
|
height: 440px !important;
|
|
margin: 0 15px;
|
|
transform: scale(0.9); // 初始化收缩
|
|
|
|
box-shadow: 0 0.5em 1rem rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
section {
|
|
padding: 80px 0 0 0;
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
h3 {
|
|
@include font(Overpass, 22, 30);
|
|
padding: 50px;
|
|
// height: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
.default {
|
|
display: block;
|
|
background: #383847;
|
|
}
|
|
|
|
.active {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
li:hover {
|
|
.default {
|
|
display: none;
|
|
}
|
|
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
// 异形切换 还原大小
|
|
transform: scale(1);
|
|
background: #383847;
|
|
border: 1px solid #383847;
|
|
color: white;
|
|
|
|
div {
|
|
height: 120px;
|
|
padding: 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
h3 {
|
|
padding: 20px;
|
|
// height: 80px;
|
|
text-align: left;
|
|
}
|
|
|
|
section {
|
|
padding: 0 20px;
|
|
height: 100%;
|
|
// display: none; // 初始化隐藏
|
|
@include font(Overpass, 14, 24, white);
|
|
// text-indent: 20px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my-button-disabled {
|
|
opacity: 0.2;
|
|
cursor: default;
|
|
}
|
|
|
|
.features aside .turning {
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
left: 0;
|
|
top: calc(50% - 40px);
|
|
|
|
@include flexible(row, space-between, center);
|
|
|
|
// border: 1px solid blue;
|
|
a {
|
|
width: 50px;
|
|
height: 50px;
|
|
|
|
@include flexible(row, center, center);
|
|
color: white;
|
|
|
|
&:first-child {
|
|
background: url("../../assets/img/arrow-left.svg") center center;
|
|
background-size: 100%;
|
|
}
|
|
|
|
&:last-child {
|
|
background: url("../../assets/img/arrow-right.svg") center center;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.disabled {
|
|
color: #666;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.swiper-container {
|
|
.swiper-pagination-bullet {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 0 5px #eee;
|
|
border: 1px solid #fff;
|
|
margin: 0 8px !important;
|
|
}
|
|
|
|
// 箭头颜色
|
|
--swiper-theme-color: #fff;
|
|
|
|
// 分页选中的底色
|
|
--swiper-pagination-color: rgba(0, 0, 0, 0.5);
|
|
|
|
/* 两种都可以 */
|
|
.swiper-slide {
|
|
}
|
|
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: url("../../assets/img/circle@2x.png") center center;
|
|
background-size: 100%;
|
|
|
|
// border: 1px solid pink;
|
|
&::after {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
|
|
.swiper-button-next {
|
|
right: 0;
|
|
}
|
|
|
|
.swiper-button-prev {
|
|
left: 0;
|
|
}
|
|
|
|
.swiper-slide-active,
|
|
.swiper-slide-duplicate-active {
|
|
// transition: all 1s;
|
|
// // 异形切换
|
|
// transform: scale(1);
|
|
// //
|
|
// opacity: 1;
|
|
// //
|
|
// margin-right: 30px;
|
|
// section {
|
|
// background: none!important;
|
|
|
|
// div {
|
|
// // display : block;
|
|
// color: rgba(255, 255, 255, 1);
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
|
|
.banner-block {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.index_banner {
|
|
width: 758px;
|
|
height: 463px;
|
|
}
|
|
|
|
.banner_right {
|
|
width: 440px;
|
|
margin-left: 353px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.banner_right_p {
|
|
color: #0a1015;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.banner-block-2{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 30px 0px;
|
|
|
|
.flex-item-2{
|
|
width: 336px;
|
|
height: 85px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.price-info{
|
|
align-items: center;
|
|
img{
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
}
|
|
.flex-item-2:nth-of-type(1),
|
|
.flex-item-2:nth-of-type(2),
|
|
.flex-item-2:nth-of-type(3){
|
|
border-right: 1px solid #5e5e5e;
|
|
}
|
|
.flex-item-2:nth-of-type(2),
|
|
.flex-item-2:nth-of-type(3){
|
|
padding: 0px 75px;
|
|
flex-shrink: 0;
|
|
}
|
|
.flex-item-2:nth-of-type(1){
|
|
flex-shrink: 1;
|
|
}
|
|
.flex-item-2:nth-of-type(4){
|
|
padding-left: 80px;
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
.c_decreace {
|
|
color: #CF6A57;
|
|
}
|
|
|
|
.c_increase {
|
|
color: #4EAA97;
|
|
}
|
|
.section-block{
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
|
|
h1{
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
}
|
|
h2{
|
|
font-size: 28px;
|
|
font-weight: normal;
|
|
}
|
|
h3{
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
}
|
|
.btn3{
|
|
display: inline-block;
|
|
width: auto;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
background: #0B0FCC;
|
|
border-radius: 30px;
|
|
min-width: 200px;
|
|
color: #FFF;
|
|
|
|
a{
|
|
color: #FFF;
|
|
}
|
|
}
|
|
.btn4{
|
|
display: inline-block;
|
|
width: auto;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
background: #0B0FCC;
|
|
border-radius: 5px;
|
|
min-width: 340px;
|
|
color: #FFF;
|
|
font-size: 20px;
|
|
line-height: 40px;
|
|
|
|
a{
|
|
color: #FFF;
|
|
}
|
|
}
|
|
}
|
|
.section-block-1{
|
|
height: 600px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.section-block-2{
|
|
padding: 40px 0px 0px;
|
|
margin-bottom: 60px;
|
|
.th{
|
|
color:#898F9B;
|
|
}
|
|
.th, .td{
|
|
line-height: 50px;
|
|
}
|
|
.td span{
|
|
color:#898F9B;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
.section-block-3{
|
|
margin-top: 80px;
|
|
|
|
.box{
|
|
width: 570px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img{
|
|
width: 277px;
|
|
height: 277px;
|
|
}
|
|
}
|
|
.box1{
|
|
}
|
|
.box2{
|
|
}
|
|
.box3{
|
|
|
|
}
|
|
.box4{
|
|
}
|
|
.txt_1{
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
.txt_2{
|
|
color: #999
|
|
}
|
|
}
|
|
.section-block-4{
|
|
|
|
.label-1{
|
|
background: #F5F5F6;
|
|
padding: 10px 20px;
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
}
|
|
.img-box{
|
|
width: 32%;
|
|
img{
|
|
width: 100%;
|
|
height: 220px;
|
|
background: #000;
|
|
border-radius: 10px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
.notice-bg{
|
|
height: 200px;
|
|
background-image: url("../../../static/images/7.png");
|
|
background-size: 100% 100%;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.img-box-2{
|
|
width: 386px;
|
|
|
|
a, a div{
|
|
width: 386px;
|
|
height: 180px;
|
|
}
|
|
}
|
|
.img-box-2:nth-of-type(1) .img{
|
|
background-image: url("../../../static/images/7.png");
|
|
}
|
|
.img-box-2:nth-of-type(2) .img{
|
|
background-image: url("../../../static/images/8.png");
|
|
}
|
|
.img-box-2:nth-of-type(3) .img{
|
|
background-image: url("../../../static/images/9.png");
|
|
}
|
|
.de{
|
|
color: #fff;
|
|
background: #326AEB;
|
|
}
|
|
.in{
|
|
background: #F5F5F6;
|
|
}
|
|
}
|
|
.section-block-5{
|
|
height: 150px;
|
|
margin-top: 100px;
|
|
border-radius: 10px;
|
|
background-color: #242424;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0px 100px 0px 45px;
|
|
|
|
}
|
|
.markets__title_span {
|
|
font-size: 16px;
|
|
color: #a1a7ae;
|
|
display: inline-block;
|
|
margin-left: 22px;
|
|
}
|
|
|
|
.table_th {
|
|
background-color: white;
|
|
text-align: center;
|
|
color: #9b9b9b;
|
|
}
|
|
|
|
.coin-list tbody tr {
|
|
background: transparent;
|
|
text-align: center;
|
|
|
|
td {
|
|
min-width: 150px;
|
|
}
|
|
}
|
|
|
|
.td_img {
|
|
width: 109px;
|
|
height: 39px !important;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.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;
|
|
width: 100%;
|
|
|
|
.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;
|
|
}
|
|
|
|
.banner_right_button {
|
|
width: 420px;
|
|
height: 52px;
|
|
line-height: 52px;
|
|
text-align: center;
|
|
background: #3553d2;
|
|
color: white;
|
|
font-size: 20px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.banner3 {
|
|
background: url("../../assets/img/banner3.jpg") no-repeat;
|
|
background-color: #ffffff;
|
|
padding-right: 230px;
|
|
padding-top: 129px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
|
|
.banner3_p {
|
|
font-size: 16px;
|
|
color: #000000;
|
|
margin-bottom: 25px;
|
|
|
|
.banner3_p_span {
|
|
font-size: 28px;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.banner3_content {
|
|
display: flex;
|
|
|
|
.banner3_content_item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 90px;
|
|
align-items: center;
|
|
|
|
.banner3_content_item_code {
|
|
width: 160px;
|
|
height: 160px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.banner3_content_item_code1 {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.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: white;
|
|
}
|
|
|
|
.container_button {
|
|
background: #3553d2;
|
|
}
|
|
|
|
.container_button1 {
|
|
background: #6c7ee4;
|
|
}
|
|
|
|
|
|
// 新布局
|
|
.section2 {
|
|
// background-image:url(../../assets/img/index_banner_2.png);
|
|
background-color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
.market_table {
|
|
width: 1200px;
|
|
font-size: 16px;
|
|
margin: 100px auto;
|
|
.market_table_box{
|
|
color: #fff;
|
|
font-size: 42px;
|
|
font-weight: bold;
|
|
}
|
|
.icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-right: 17px;
|
|
}
|
|
.market_tr {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 0px;
|
|
// line-height: 60px;
|
|
// div {
|
|
// width: 10%;
|
|
// }
|
|
}
|
|
.market_box{
|
|
width: 30%;
|
|
padding: 40px;
|
|
border-radius: 15px;
|
|
border: 1px solid #fff;
|
|
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
.strip{
|
|
background-color: rgb(1, 188, 141);
|
|
width: 5px;
|
|
height: 20px;
|
|
}
|
|
.name{
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
.increace {
|
|
color: #4EAA97;
|
|
}
|
|
.decreace {
|
|
color: #CF6A57;
|
|
}
|
|
}
|
|
.illustration_area {
|
|
display: flex;
|
|
width: 1200px;
|
|
margin: 0px auto;
|
|
align-items: center;
|
|
// padding-top: 100px;
|
|
// padding-bottom: 100px;
|
|
background-color: #ffffff;
|
|
// background-color: #0D0E12;
|
|
justify-content: space-between;
|
|
.left {
|
|
color: #000;
|
|
max-width: 650px;
|
|
.title {
|
|
font-size: 45px;
|
|
font-weight: bold;
|
|
}
|
|
.btn {
|
|
min-width: 511px;
|
|
height: 48px;
|
|
background-color: #EABB71;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.boximg{
|
|
width: 100%;
|
|
// height: 690px;
|
|
background-color: #ffffff;
|
|
// background-color: #0D0E12;
|
|
// margin: auto;
|
|
// background: url('../../assets/img/home/img1.png');
|
|
// background-size: 1917px;
|
|
// background-repeat: no-repeat;
|
|
// background-position: center;
|
|
}
|
|
.jump_btn {
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
min-width: 240px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #000000;
|
|
// background-color: #54B58F;
|
|
border-radius: 10px;
|
|
font-size: 20px;
|
|
padding: 0px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.jump_btn1 {
|
|
display: inline-block;
|
|
min-width: 240px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #000;
|
|
border-radius: 30px;
|
|
font-size: 20px;
|
|
padding: 0px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.box1{
|
|
width: 1200px;
|
|
margin: auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
|
|
.box1_text{
|
|
width: 809px;
|
|
|
|
.quickopening{
|
|
font-size: 15px;
|
|
color: #999999;
|
|
margin-top: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.quickopening_box{
|
|
background-color: rgba(1, 188, 141, .04);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(29, 29, 29, .12);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0px 48px;
|
|
width: 809px;
|
|
height: 175px;
|
|
align-items: center;
|
|
|
|
.quickopening_register{
|
|
min-width: 180px;
|
|
height: 50px;
|
|
background-color: rgba(29, 29, 29, 1);
|
|
border-radius: 30px;
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ProductsandServices{
|
|
width: 100%;
|
|
background-color: #121318;
|
|
}
|
|
|
|
.title3{
|
|
width: 1200px;
|
|
text-align: center;
|
|
margin: auto;
|
|
font-size: 42px;
|
|
}
|
|
|
|
.web_area {
|
|
width: 1200px;
|
|
height: 840px;
|
|
margin: 0px auto 0px;
|
|
padding-top: 50px;
|
|
color: #000;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.product {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: 0 2px 8px 0 rgba(0,0,0,.99);
|
|
height: 200px;
|
|
margin-bottom: 45px;
|
|
padding: 15px 25px;
|
|
border-radius: 10px;
|
|
|
|
img{
|
|
width: 161px;
|
|
height: 120px;
|
|
}
|
|
.product_text1 {
|
|
font-weight: bold;
|
|
font-size: 23px;
|
|
margin-bottom: 10px;
|
|
color: #fff;
|
|
}
|
|
.product_text2 {
|
|
width: 320px;
|
|
font-size: 17px;
|
|
color: #808080;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text_size {
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-top: 20px;
|
|
color: #fff;
|
|
}
|
|
|
|
.text_width {
|
|
font-size: 18px;
|
|
text-align: center;
|
|
width: 271px;
|
|
color: #A5A5A5;
|
|
padding-top: 25px;
|
|
margin: auto;
|
|
}
|
|
|
|
.right_box{
|
|
width: 279px;
|
|
height: 318px;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 80px;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-radius: 20px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
.right_color{
|
|
width: 100%;
|
|
color: rgba(255, 255, 255, 1);
|
|
text-align: center;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.right_img{
|
|
// background-color: rgba(255, 255, 255, 1);
|
|
img{
|
|
width: 206px;
|
|
height: 208px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
.right_Android{
|
|
width: 100%;
|
|
color: rgba(85, 185, 144, 1);
|
|
text-align: center;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.title1 {
|
|
color: #fff;
|
|
width: 1200px;
|
|
font-size: 48px;
|
|
margin: 0px auto;
|
|
font-weight: bold;
|
|
margin-top: 100px;
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.Serve_bot{
|
|
margin: auto;
|
|
width: 1200px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.Serve_bot_box1{
|
|
width: 48%;
|
|
padding: 30px;
|
|
display: flex;
|
|
border-radius: 20px;
|
|
flex-direction: column;
|
|
background-color: #262727;
|
|
}
|
|
|
|
.Serve_bot_box2{
|
|
width: 48%;
|
|
padding: 30px;
|
|
display: flex;
|
|
border-radius: 20px;
|
|
flex-direction: column;
|
|
background-color: #effaf2;
|
|
|
|
.Serve_bot_box2_text{
|
|
color: #000;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.Serve_bot_box2_text1{
|
|
font-size: 16px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
}
|
|
|
|
.Tradinganytime{
|
|
width: 100%;
|
|
height: 750px;
|
|
margin: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.Tradinganytime_app{
|
|
font-size: 18px;
|
|
color: #999999;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.Tradinganytime_flex{
|
|
display: flex;
|
|
// height: 202px;
|
|
// align-items: center;
|
|
margin-top: 40px;
|
|
|
|
.Tradinganytime_Android{
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 55px;
|
|
}
|
|
.Tradinganytime_Google{
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 55px;
|
|
}
|
|
.Tradinganytime_IOS{
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.Tradinganytime_img{
|
|
width: 202px;
|
|
height: 202px;
|
|
// background-color: #808080;
|
|
}
|
|
|
|
.center{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 120px;
|
|
margin: 13px 30px;
|
|
}
|
|
.line{
|
|
width: 50%;
|
|
}
|
|
.line:first-child{
|
|
border-top: 1px solid #707a8a;
|
|
border-right: 1px solid #707a8a;
|
|
border-bottom: 1px solid #707a8a;
|
|
border-top-right-radius: 20px;
|
|
}
|
|
.line:nth-child(2){
|
|
border-bottom: 1px solid #707a8a
|
|
}
|
|
.line:nth-child(3){
|
|
border-bottom: 1px solid #707a8a;
|
|
border-right: 1px solid #707a8a;
|
|
border-bottom-right-radius: 20px
|
|
}
|
|
}
|
|
}
|
|
|
|
.text_mai{
|
|
color: #fff;
|
|
height: 93px;
|
|
display: flex;
|
|
font-size: 24px;
|
|
margin-top: 30px;
|
|
padding: 0px 30px;
|
|
border-radius: 20px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// background-color: #F9F9F9;
|
|
box-shadow: 0 2px 8px 0 rgba(0,0,0,.99);
|
|
}
|
|
.home-box6{
|
|
width: 100%;
|
|
margin-top: 100px;
|
|
position: relative;
|
|
|
|
.box6{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.box6_txt{
|
|
color: #fff;
|
|
font-size: 50px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|