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.
2420 lines
68 KiB
2420 lines
68 KiB
<template>
|
|
<view class="d-flex flex-col" style="background-color: #F9F9F9;">
|
|
<!-- 头部 -->
|
|
<v-header class="nav_bar" :left-text="$t('base.a1')" :left-arrow="false" :left-click="personalCenter"
|
|
style="padding: 6px 0px;">
|
|
<template #left>
|
|
<!-- <van-icon name="user-circle-o" class="fn-25 color-theme-1" style="color: #EABB71;" /> -->
|
|
<img src="@/static/img/user-bar2.png" alt="" width="18px" height="18px">
|
|
<view class="d-flex align-center justify-center">
|
|
<!-- <text class="p-l-md fn-18 color-light">{{ app.appName }} -->
|
|
<!-- <span class="fn-16 m-l-xs">{{$t('first.a2')}}</span> -->
|
|
</text>
|
|
</view>
|
|
</template>
|
|
<template #title>
|
|
<view style="color: #000;">Btcooc</view>
|
|
</template>
|
|
<template #right>
|
|
<!-- <v-link to="/pages/list/list?isSearch=1" class="d-flex align-center">
|
|
<van-icon class="fn-20" name="search" />
|
|
</v-link> -->
|
|
<view class="per-bot p-y-md p-x-sm d-flex align-center">
|
|
<!-- <img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" /> -->
|
|
<span style="color: #000;" >
|
|
<v-lang @change="
|
|
marketList = [];
|
|
indexData();
|
|
getCollegeLinks();
|
|
"></v-lang>
|
|
<i class="iconfont m-l-xs fn-sm"></i>
|
|
</span>
|
|
</view>
|
|
</template>
|
|
</v-header>
|
|
<view class="layout-main" style="background-color: #fff;">
|
|
<scroll-view @refresherrefresh="onRefresh" :refresher-enabled="refresherEnabled&&scrollTop<50"
|
|
:refresher-triggered="refreshing" refresher-background="transparent" :refresher-threshold="50">
|
|
<!-- 轮播 -->
|
|
<!-- <swiper
|
|
class="my-swipe m-x-md p-b-xs"
|
|
:autoplay="true"
|
|
indicator-dots
|
|
indicator-color="white"
|
|
>
|
|
<swiper-item
|
|
class="my_swipe_item"
|
|
v-for="(item, idx) in home"
|
|
:key="idx"
|
|
>
|
|
<img width="100%" height="100%" class="rounded-sm" fit="cover" :src="item.imgurl" />
|
|
</swiper-item>
|
|
</swiper> -->
|
|
<!-- 公告 -->
|
|
<v-notice-bar v-if="notice.length" class="m-t-md m-x-md bg-panel-1 box-shadow rounded-sm">
|
|
<template #left-icon>
|
|
<van-icon class="m-r-sm fn-16" @click="() => _router.push({ path: '/pages/notice/index' })"
|
|
name="volume-o" />
|
|
</template>
|
|
<v-link class="fn-13 eps-1"
|
|
:to="{ path: '/pages/notice/detail', query: { id: notice[0].id } }">{{ notice[0].title }}</v-link>
|
|
<template #right-icon>
|
|
<view class="m-l-xs" @click="_router.push({ path: '/pages/notice/index' })">
|
|
<van-icon name="wap-nav" />
|
|
</view>
|
|
</template>
|
|
</v-notice-bar>
|
|
<!-- 次一级导航 -->
|
|
<!-- <view class="nav2 p-x-md m-t-ms d-flex justify-around fn-center">
|
|
<v-link tag="div" to="/pages/assets/recharge" class="item">
|
|
<view class="icon">
|
|
<img :class="theme == 'light' ? 'bg-box-per' : ''" class="h-33" src="static/img/13.png" />
|
|
</view>
|
|
<view class="fn-13 m-t-xxs">{{ $t("base.b5") }}</view>
|
|
</v-link>
|
|
<v-link tag="div" to="/pages/assets/draw" class="item">
|
|
<view class="icon">
|
|
<img :class="theme == 'light' ? 'bg-box-blue' : ''" class="h-33 " src="static/img/5.png" />
|
|
</view>
|
|
<view class="fn-13 m-t-xxs">{{ $t("base.b6") }}</view>
|
|
</v-link>
|
|
<v-link tag="div" to="/pages/service/index" class="item">
|
|
<view class="icon">
|
|
<img :class="theme == 'light' ? 'bg-box-red' : ''" class="h-33 " src="static/img/ke.png" />
|
|
</view>
|
|
<view class="fn-13 m-t-xxs">{{ $t("common.service") }}</view>
|
|
</v-link>
|
|
<v-link tag="div" to="/pages/invite/index" class="item" >
|
|
<view class="icon">
|
|
<img :class="theme == 'light' ? 'bg-box-yellow' : ''" class="h-33 " src="static/img/4.png" />
|
|
</view>
|
|
<view class="fn-13 m-t-xxs">{{ $t("base.b7") }}</view>
|
|
</v-link>
|
|
</view> -->
|
|
<!-- 指数 -->
|
|
<view class="stock-swipe d-flex p-x-md m-t-ms" v-if="0">
|
|
<view class="swipe_right flex-fill lists" v-for="(parentItem,index) in marketList" v-if="index==1"
|
|
:key="parentItem.coin_name">
|
|
<view v-for="(item,iindex) in parentItem.collect
|
|
? collect
|
|
: parentItem.marketInfoList" :key="iindex"
|
|
class="stock-index item flex-fill p-y-ms rounded-xs box-size lists-1"
|
|
v-if="item.pair_name=='BTC/USDT'||item.pair_name=='ETH/USDT'||item.pair_name=='ETC/USDT'">
|
|
<v-link :to="{
|
|
path: '/pages/exchange/index',
|
|
query: { code: item.pair_name },
|
|
}">
|
|
<view class="stock-index-img fn-12 color-gray-6 m-b-xs fn-center">
|
|
<view class="color-light">{{ item.pair_name }}<text class="stock-item-3"
|
|
:class="item.increase * 1 < 0 ? 'color-sell' : 'color-buy'">{{ item.increaseStr }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="fn-18 color-light fn-center m-b-xs"
|
|
:class="item.increase * 1 < 0 ? 'color-sell' : 'color-buy'">{{ item.close }}</view>
|
|
<view class="d-flex flex-col align-center fn-sm justify-center">
|
|
|
|
<!-- <view class="color-theme-6">≈ ￥{{omitTo(item.close*price_cny,2)}}</view> -->
|
|
</view>
|
|
</v-link>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加密货币之门 -->
|
|
<view class="illustration_area">
|
|
<image src="@/assets/img/home/home1.png" mode="widthFix" class="image_img"></image>
|
|
<view>
|
|
<view class="title" style="word-wrap:break-word;">{{ $t("homeNewText.hh0") }}</view>
|
|
<view class="illustration_text">{{ $t("homeNewText.hh1") }}</view>
|
|
</view>
|
|
|
|
<view v-if="!isLogin" class="jump_btn_one" @click="goReg">
|
|
{{ $t("homeNewText.hh2") }}
|
|
</view>
|
|
<view v-else class="jump_btn" @click="goMine">
|
|
{{ $t("homeNewText.aa4") }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="marketbox">
|
|
<view class="marketbox1">{{ $t("homeNewText.hh3") }}</view>
|
|
<view>
|
|
<view v-if="parentItem.coin_name=='USDT'" v-for="parentItem in marketList" :key="parentItem.coin_name">
|
|
<view class="w-12/12 m-t-xs">
|
|
<view class="marketbox2">
|
|
<v-link :to="{path: '/pages/exchange/index', query: { code: item.pair_name },}" class="marketbox3"
|
|
v-for="item in parentItem.collect? collect.slice(0,6) : parentItem.marketInfoList.slice(0,6)" :key="item.pair_name">
|
|
<view class="market_img">
|
|
<image :src="item.coin_icon" mode="" class="market_image"></image>
|
|
</view>
|
|
<view class="market_text">
|
|
<text>{{ item.coin_name }}</text>
|
|
</view>
|
|
<view class="market_text1">{{ item.pair_name }}</view>
|
|
<view class="market_text2">
|
|
<view>${{ item.close }}</view>
|
|
</view>
|
|
<view style="text-align: center;">
|
|
<span style="font-size: 32rpx;font-weight: bold;" :class="item.increase * 1 > 0 ? 'color-buy' : 'color-sell'">
|
|
{{ item.increaseStr }}
|
|
</span>
|
|
</view>
|
|
</v-link>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="text-align: center;margin-top: 30px;color: #5248D0;" @click="goExchange">{{ $t("homeNewText.hh4") }} 》</view>
|
|
</view>
|
|
|
|
<view style="padding: 0px 40rpx;">
|
|
<view style="margin-top: 50px;font-size: 62rpx;color: #5248D0;text-align: center;font-weight: bold;">{{ $t("homeNewText.hh5",{name:'Btcooc'}) }}</view>
|
|
<view style="margin-top: 60rpx;display: flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 100rpx;">
|
|
<view style="width: 50%;">
|
|
<view style="color: #5248D0;font-size: 56rpx;margin-bottom: 5px;">Top 10</view>
|
|
<view>{{ $t("homeNewText.hh6") }}</view>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<view style="color: #5248D0;font-size: 56rpx;margin-bottom: 5px;">5 million+</view>
|
|
<view>{{ $t("homeNewText.hh7") }}</view>
|
|
</view>
|
|
<view style="width: 50%;margin-top: 40rpx;">
|
|
<view style="color: #5248D0;font-size: 56rpx;margin-bottom: 5px;">< 0.10%</view>
|
|
<view>{{ $t("homeNewText.hh8") }}</view>
|
|
</view>
|
|
<view style="width: 50%;margin-top: 40rpx;">
|
|
<view style="color: #5248D0;font-size: 56rpx;margin-bottom: 5px;">200+</view>
|
|
<view>{{ $t("homeNewText.hh9") }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="marketbox">
|
|
<view class="marketbox1" style="margin-bottom: 0px;">{{ $t("homeNewText.hh10") }}</view>
|
|
<view class="Howtogetstarted">
|
|
<view class="Howtogetstarted_box">
|
|
<span class="" style="font-size: 20px;">1</span>
|
|
</view>
|
|
<view class="Howtogetstarted_box1">{{ $t("homeNewText.hh11") }}</view>
|
|
<view class="Howtogetstarted_box2">{{ $t("homeNewText.hh12",{name:"Btcooc"}) }}</view>
|
|
<view style="display: flex;justify-content: center;">
|
|
<view class="Howtogetstarted_box3">{{ $t("homeNewText.hh13") }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="Howtogetstarted">
|
|
<view class="Howtogetstarted_box">
|
|
<span class="" style="font-size: 20px;">2</span>
|
|
</view>
|
|
<view class="Howtogetstarted_box1">{{ $t("homeNewText.hh14") }}</view>
|
|
<view class="Howtogetstarted_box2">{{ $t("homeNewText.hh15") }}</view>
|
|
<view style="display: flex;justify-content: center;">
|
|
<view class="Howtogetstarted_box3">{{ $t("homeNewText.hh16") }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="Howtogetstarted">
|
|
<view class="Howtogetstarted_box">
|
|
<span class="" style="font-size: 20px;">3</span>
|
|
</view>
|
|
<view class="Howtogetstarted_box1">{{ $t("homeNewText.hh17") }}</view>
|
|
<view class="Howtogetstarted_box2">{{ $t("homeNewText.hh18",{name:"Btcooc"}) }}</view>
|
|
<view style="display: flex;justify-content: center;">
|
|
<view class="Howtogetstarted_box3">{{ $t("homeNewText.hh19") }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="Howtogetstarted">
|
|
<view class="Howtogetstarted_box">
|
|
<span class="" style="font-size: 20px;">4</span>
|
|
</view>
|
|
<view class="Howtogetstarted_box1">{{ $t("homeNewText.hh20") }}</view>
|
|
<view class="Howtogetstarted_box2">{{ $t("homeNewText.hh21",{name:"Btcooc"}) }}</view>
|
|
<view style="display: flex;justify-content: center;">
|
|
<view class="Howtogetstarted_box3">{{ $t("homeNewText.hh22") }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="marketbox" style="padding: 0px;">
|
|
<view class="marketbox1" style="padding: 0rpx 25rpx;">{{ $t("homeNewText.hh23") }}</view>
|
|
|
|
<view style="margin-top: 40rpx;">
|
|
<view class="index_partners__3BIDL" style="">
|
|
<view class="rfm-marquee-container">
|
|
<view class="rfm-marquee">
|
|
<view class="rfm-initial-child-container">
|
|
<view class="rfm-child d-flex" v-for="(parentItem,index) in marketList" :key="parentItem.coin_name">
|
|
<view style="width: 230rpx;" v-for="(item,iindex) in parentItem.marketInfoList.slice(0,6)" :key="iindex+'img'">
|
|
<view class="price-info d-flex">
|
|
<img :src="item.coin_icon" style="width: 28px;height: 28px;margin-right: 5px;"></img>
|
|
<view class="d-flex">{{ item.coin_name }}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 230rpx;" v-for="(item,imgIndex) in parentItem.marketInfoList.slice(0,6)" :key="imgIndex">
|
|
<view class="price-info d-flex">
|
|
<img :src="item.coin_icon" style="width: 28px;height: 28px;margin-right: 5px;"></img>
|
|
<view class="d-flex">{{ item.coin_name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="index_partners__3BIDL" style="">
|
|
<view class="rfm-marquee-container">
|
|
<view class="rfm-marquee">
|
|
<view class="rfm-initial-child-container">
|
|
<view class="rfm-child d-flex" v-for="(parentItem,index) in marketList" :key="parentItem.coin_name">
|
|
<view style="width: 230rpx;" v-for="(item,iindex) in parentItem.marketInfoList.slice(3,10)" :key="iindex+'img'">
|
|
<view class="price-info d-flex">
|
|
<img :src="item.coin_icon" style="width: 28px;height: 28px;margin-right: 5px;"></img>
|
|
<view class="d-flex">{{ item.coin_name }}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 230rpx;" v-for="(item,imgIndex) in parentItem.marketInfoList.slice(3,10)" :key="imgIndex">
|
|
<view class="price-info d-flex">
|
|
<img :src="item.coin_icon" style="width: 28px;height: 28px;margin-right: 5px;"></img>
|
|
<view class="d-flex">{{ item.coin_name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="index_partners__3BIDL" style="">
|
|
<view class="rfm-marquee-container">
|
|
<view class="rfm-marquee">
|
|
<view class="rfm-initial-child-container">
|
|
<view class="rfm-child d-flex" v-for="(parentItem,index) in marketList" :key="parentItem.coin_name">
|
|
<view style="width: 230rpx;" v-for="(item,iindex) in parentItem.marketInfoList.slice(6,13)" :key="iindex+'img'">
|
|
<view class="price-info d-flex">
|
|
<img :src="item.coin_icon" style="width: 28px;height: 28px;margin-right: 5px;"
|
|
v-if="item.coin_name !== 'TRX'" />
|
|
<img src="https://occadm.btcooc.com/storage/images/trx.png" style="width: 28px;height: 28px;margin-right: 5px;"
|
|
v-else />
|
|
<view class="d-flex">{{ item.coin_name }}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 230rpx;" v-for="(item,imgIndex) in parentItem.marketInfoList.slice(6,13)" :key="imgIndex">
|
|
<view class="price-info d-flex">
|
|
<img :src="item.coin_icon" style="width: 28px;height: 28px;margin-right: 5px;"
|
|
v-if="item.coin_name !== 'TRX'" />
|
|
<img src="https://occadm.btcooc.com/storage/images/trx.png" style="width: 28px;height: 28px;margin-right: 5px;"
|
|
v-else />
|
|
<view class="d-flex">{{ item.coin_name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="index_partners__3BIDL" style="">
|
|
<view class="rfm-marquee-container">
|
|
<view class="rfm-marquee">
|
|
<view class="rfm-initial-child-container">
|
|
<view class="rfm-child d-flex" v-for="(parentItem,index) in marketList" :key="parentItem.coin_name">
|
|
<view style="width: 230rpx;" v-for="(item,iindex) in parentItem.marketInfoList.slice(7,16)" :key="iindex+'img'">
|
|
<view class="price-info d-flex">
|
|
<img :src="item.coin_icon" style="width: 28px;height: 28px;margin-right: 5px;"
|
|
v-if="item.coin_name !== 'TRX'" />
|
|
<img src="https://occadm.btcooc.com/storage/images/trx.png" style="width: 28px;height: 28px;margin-right: 5px;"
|
|
v-else />
|
|
<view class="d-flex">{{ item.coin_name }}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 230rpx;" v-for="(item,imgIndex) in parentItem.marketInfoList.slice(7,16)" :key="imgIndex">
|
|
<view class="price-info d-flex">
|
|
<img :src="item.coin_icon" style="width: 28px;height: 28px;margin-right: 5px;"
|
|
v-if="item.coin_name !== 'TRX'" />
|
|
<img src="https://occadm.btcooc.com/storage/images/trx.png" style="width: 28px;height: 28px;margin-right: 5px;"
|
|
v-else />
|
|
<view class="d-flex">{{ item.coin_name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="Carousel">
|
|
<view v-if="!isLogin" class="Carousel1" @click="goReg">{{ $t("homeNewText.hh24") }}</view>
|
|
<view v-else class="Carousel1" @click="goExchange">{{ $t("homeNewText.hh24") }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="Whotrusts">
|
|
{{ $t("homeNewText.hh25",{name:'Btcooc'}) }}
|
|
</view>
|
|
<view class="Whotrusts_box">
|
|
<view class="Whotrusts_box1">
|
|
<view class="Whotrusts_box1_text">{{ $t("homeNewText.hh26") }}</view>
|
|
<view class="Whotrusts_box1_text1">{{ $t("homeNewText.hh27") }}</view>
|
|
<view class="Whotrusts_box1_text2">
|
|
<img src="@/assets/img/home/home8.png" width="93" height="46">
|
|
<img src="@/assets/img/home/home9.png" width="73" height="45">
|
|
<img src="@/assets/img/home/home10.png" width="95" height="45">
|
|
</view>
|
|
</view>
|
|
<view class="Whotrusts_box1">
|
|
<view class="Whotrusts_box1_text">{{ $t("homeNewText.hh28") }}</view>
|
|
<view class="Whotrusts_box1_text1">{{ $t("homeNewText.hh29") }}</view>
|
|
<view style="margin-top: 84rpx;">
|
|
<img src="@/assets/img/home/home11.png" width="84" height="45">
|
|
<img src="@/assets/img/home/home12.png" width="123" height="45" style="margin-left: 40rpx;">
|
|
</view>
|
|
</view>
|
|
<view class="Whotrusts_box1">
|
|
<view class="Whotrusts_box1_text">{{ $t("homeNewText.hh30") }}</view>
|
|
<view class="Whotrusts_box1_text1">{{ $t("homeNewText.hh31") }}</view>
|
|
<view style="margin-top: 84rpx;">
|
|
<img src="@/assets/img/home/home13.png" width="259" height="51">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="Trading">
|
|
<view class="Trading_box">{{ $t("homeNewText.hh34") }}</view>
|
|
<view class="Trading_box1">{{ $t("homeNewText.hh35") }}</view>
|
|
<!-- <a class="Trading_a">
|
|
href="https://app.ewmcoin.com/download/Btcooc.html"
|
|
<view class="Trading_a_box">
|
|
<view style="margin-right: 10rpx;"><image src="@/assets/img/home/Google.png" style="width: 48rpx;height: 48rpx;"></image></view>
|
|
<view>Google Play</view>
|
|
</view>
|
|
</a>
|
|
<a class="Trading_a" style="margin-top: 40rpx;">
|
|
href="https://app.ewmcoin.com/download/Btcooc.html"
|
|
<view class="Trading_a_box">
|
|
<view style="margin-right: 10rpx;"><image src="@/assets/img/home/IOS1.png" style="width: 48rpx;height: 48rpx;"></image></view>
|
|
<view>App Store</view>
|
|
</view>
|
|
</a> -->
|
|
</view>
|
|
|
|
<!-- 科创板 -->
|
|
<!-- <view class="head_info m-y-xl">
|
|
<view class=" d-flex justify-between align-center p-x-xs p-t-lg bor5 p-b-xs">
|
|
<view class="d-flex">
|
|
<text class="m-x-xs fn-center" @click="active=0" :class="active==0?'fn-bold fn-15 p-b-xs bor5-active color-light':''">合約指數</text>
|
|
<text class="m-x-xs fn-center" @click="active=1" :class="active==1?'fn-bold fn-15 p-b-xs bor5-active color-light':''">現貨指數</text>
|
|
</view>
|
|
</view>
|
|
<template v-if="active==0" v-for="parentItem in (marketList)">
|
|
<view class="m-xs" :key="parentItem.coin_name" v-if="parentItem.coin_name=='USDT'">
|
|
<view v-for="item in parentItem.marketInfoList" :key="item.pair_name" class="bg-panel-3m-t-xs">
|
|
<view class="w-12/12">
|
|
<view class="fn-center w-max">
|
|
<v-link
|
|
:to="{
|
|
path: '/pages/exchange/index',
|
|
query: { code: item.pair_name },
|
|
}"
|
|
class="m-b-md m-x-xs rounded-sm bg-panel-3 box-shadow link-active d-flex justify-between align-center p-r-md p-y-md box-size p-x-xs"
|
|
v-for="item in parentItem.collect
|
|
? collect
|
|
: parentItem.marketInfoList"
|
|
:key="item.pair_name"
|
|
>
|
|
<view class="fn-left w-6/12">
|
|
<view class="d-flex align-center">
|
|
<text class="fn-bold fn-16 color-light">{{ item.pair_name }}</text>
|
|
<text class="color-default fn-14 m-l-xs">永续</text>
|
|
</view>
|
|
<view class="d-flex align-center fn-12 m-t-xs">
|
|
24H量 {{ omitTo(item.vol,0) }}
|
|
</view>
|
|
</view>
|
|
<view class="fn-left align-end w-3/12">
|
|
<view class="d-flex align-end fn-bold fn-16" :class="item.increase * 1 >0?'color-buy':'color-sell'">{{ item.close }}</view>
|
|
<view class="m-t-xs">
|
|
￥{{ omitTo(item.close*price_cny,2) }}
|
|
</view>
|
|
</view>
|
|
<view class="fn-right w-3/12">
|
|
<span
|
|
class="rounded-xs"
|
|
:class="
|
|
item.increase * 1 > 0 ? 'color-buy' : 'color-sell'
|
|
"
|
|
>{{ item.increaseStr }}</span
|
|
>
|
|
</view>
|
|
</v-link>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view> -->
|
|
<!-- $toast($t('first.b9')) -->
|
|
<!-- <view @click="_router.push('/pages/currency/index')" class="otc m-md bg-panel-3 m-t-md box-shadow rounded-lg d-flex justify-between align-center p-r-lg">
|
|
<view class="d-flex align-center">
|
|
<img width="43px" height="43px" src="static/img/b.png"/>
|
|
<view class="color-theme-2 fn-15 m-l-md d-flex align-center">{{ $t("first.b7") }}<span class="color-light fn-12 m-l-xs">{{ $t("first.b6") }}</span></view>
|
|
</view>
|
|
<van-icon name="arrow" class="color-theme-2"/>
|
|
</view> -->
|
|
|
|
<!-- <view class="m-x-md ">
|
|
<text @click="infoActive=0" class="m-r-lg" :class="infoActive==0?'fn-bold fn-16 bor5 color-light':''">{{ $t("first.b5") }}</text>
|
|
<text @click="infoActive=1" class="m-l-lg" :class="infoActive==1?'fn-bold fn-16 bor5 color-light':''">{{ $t("first.b4") }}</text>
|
|
</view> -->
|
|
|
|
<view class="head_info" style="background-color: #fff;padding-top: 25px;" v-if="0">
|
|
<van-tabs v-if="marketList.length" :active="infoActive" background="transparent" :border="false"
|
|
animated>
|
|
<van-tab>
|
|
<view class="w-12/12 m-t-xs">
|
|
<view class="fn-center w-max">
|
|
<v-link :to="{
|
|
path: '/pages/exchange/index',
|
|
query: { code: item.pair_name,contract:1 },
|
|
}" class="m-b-md m-x-md rounded-xs bg-panel-3 box-shadow link-active d-flex justify-between align-center p-x-md p-y-xs box-size p-x-xs"
|
|
v-for="(item,index) in marketListHe" :key="index">
|
|
<view class="fn-left w-6/12">
|
|
<view class="d-flex align-center">
|
|
<text class="fn-bold fn-14 color-light">{{ item.pair_name }}</text>
|
|
<text class="color-default fn-12 m-l-xs">{{ $t("first.b8") }}</text>
|
|
</view>
|
|
<view class="d-flex align-center fn-12 m-t-xs">
|
|
24H{{ $t("first.b3") }} {{ omitTo(item.vol,0) }}
|
|
</view>
|
|
</view>
|
|
<!-- <view class="fn-left align-end w-3/12">
|
|
<view class="d-flex align-end fn-bold fn-16" :class="item.increase * 1 >0?'color-buy':'color-sell'">{{ item.close }}</view>
|
|
<view class="m-t-xs">
|
|
￥{{ omitTo(item.close*price_cny,2) }}
|
|
</view>
|
|
</view> -->
|
|
<view class="fn-right w-3/12 positions">
|
|
<span class="rounded-xs posi fn-12" :class="
|
|
item.increase * 1 > 0 ? 'color-buy' : 'color-sell'
|
|
">{{ item.increaseStr }}</span>
|
|
<span class="d-flex align-end fn-bold fn-16"
|
|
:class="item.increase * 1 >0?'color-buy':'color-sell'">{{ item.close }}</span>
|
|
<!-- <view class="charts-box m-t-xs">
|
|
<qiun-data-charts
|
|
type="tarea"
|
|
:chartData="item.kline"
|
|
background="none"
|
|
:tapLegend="false"
|
|
:range="item.increase*1>0?true:false"
|
|
/>
|
|
</view> -->
|
|
</view>
|
|
</v-link>
|
|
</view>
|
|
</view>
|
|
</van-tab>
|
|
<van-tab v-for="parentItem in marketList" :key="parentItem.coin_name"
|
|
v-if="parentItem.coin_name=='USDT'">
|
|
<view class="w-12/12 m-t-xs">
|
|
<view class="m-x-md p-x-md fn-bold fn-18 fn-center" style="color: #111;">
|
|
{{$t("homeNewText.aa5")}}
|
|
</view>
|
|
<view class="m-x-md p-x-md m-b-md m-t-xs fn-12 fn-center">
|
|
{{$t("homeNewText.aa6")}}
|
|
</view>
|
|
<view class="fn-center w-max">
|
|
<v-link :to="{
|
|
path: '/pages/exchange/index',
|
|
query: { code: item.pair_name },
|
|
}" class="m-b-md rounded-xs bg-panel-3 link-active d-flex justify-between align-center p-x-md p-y-xs box-size p-x-xs"
|
|
v-for="item in parentItem.collect
|
|
? collect
|
|
: parentItem.marketInfoList.slice(0,5)" :key="item.pair_name">
|
|
<view class="fn-left w-2/12">
|
|
<view class="d-flex">
|
|
<image class="coin_icon" :src="item.coin_icon" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="fn-left w-6/12">
|
|
<view class="d-flex align-center">
|
|
<text class="fn-bold fn-14 color-light">{{ item.pair_name }}</text>
|
|
</view>
|
|
<view class="d-flex align-center fn-12 m-t-xs">
|
|
24H{{ $t("first.b3") }} {{ omitTo(item.vol,0) }}
|
|
</view>
|
|
</view>
|
|
<!-- <view class="fn-left align-end w-3/12">
|
|
<view class="d-flex align-end fn-bold fn-16" :class="item.increase * 1 >0?'color-buy':'color-sell'">{{ item.close }}</view>
|
|
<view class="m-t-xs">
|
|
￥{{ omitTo(item.close*price_cny,2) }}
|
|
</view>
|
|
</view> -->
|
|
<view class="fn-right w-6/12 positions">
|
|
<view class="rounded-xs fn-bold fn-16" :class="
|
|
item.increase * 1 > 0 ? 'color-buy' : 'color-sell'
|
|
">{{ item.increaseStr }}</view>
|
|
<view class="fn-12">${{ item.close }}</view>
|
|
<!-- <view class="charts-box m-t-xs">
|
|
<qiun-data-charts
|
|
type="tarea"
|
|
:chartData="item.kline"
|
|
background="none"
|
|
:tapLegend="false"
|
|
:range="item.increase*1>0?true:false"
|
|
/>
|
|
</view> -->
|
|
</view>
|
|
</v-link>
|
|
</view>
|
|
</view>
|
|
</van-tab>
|
|
</van-tabs>
|
|
</view>
|
|
|
|
<!-- 适合所有人的加密货币交易所 -->
|
|
<view style="margin-top: 100rpx;" v-if="0">
|
|
<view class="fn-20 fn-bold m-y-md" style="text-align: center; color: #000;">
|
|
{{ $t("homeNewText.bb4") }}
|
|
</view>
|
|
<view class="fn-12" style="text-align: center;">{{ $t("homeNewText.bb5") }}</view>
|
|
<view class="card_area m-y-md">
|
|
<view class="card_item" style="background-color: #FEF6E7;">
|
|
<view class="fn-18 fn-bold" style="color: #101010;margin-bottom:10px;">
|
|
<img src="../../assets/img/home/6.png" />{{ $t("homeNewText.bb6") }}</view>
|
|
<view style="font-size: 14px;color: #595558;">{{ $t("homeNewText.bb7") }}</view>
|
|
</view>
|
|
<view class="card_item" style="background-color: #E0EFFF;">
|
|
<view class="fn-18 fn-bold" style="color: #101010;margin-bottom:10px;">
|
|
<img src="../../assets/img/home/7.png" />{{ $t("homeNewText.cc1") }}</view>
|
|
<view style="font-size: 14px;color: #595558;">{{ $t("homeNewText.cc2") }}</view>
|
|
</view>
|
|
<view class="card_item" style="background-color: #F0E7FF;">
|
|
<view class="fn-18 fn-bold" style="color: #101010;margin-bottom:10px;">
|
|
<img src="../../assets/img/home/8.png" />{{ $t("homeNewText.cc3") }}</view>
|
|
<view style="font-size: 14px;color: #595558;">{{ $t("homeNewText.cc4") }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="introduce_area" v-if="0">
|
|
<view class="zhanshi"></view>
|
|
<view class="item">
|
|
<image src="../../assets/img/home/图片 9@3x.png" mode=""></image>
|
|
<view class="" style="flex: 1;">
|
|
<view class="fn-18 fn-bold m-b-sm" style="color: #101010;">{{ $t("homeNewText.dd1") }}
|
|
</view>
|
|
<view class="">{{ $t("homeNewText.dd2") }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../assets/img/home/图片 7@3x.png" mode=""></image>
|
|
<view class="" style="flex: 1;">
|
|
<view class="fn-18 fn-bold m-b-sm" style="color: #101010;">{{ $t("homeNewText.dd3") }}
|
|
</view>
|
|
<view class="">{{ $t("homeNewText.dd4") }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../assets/img/home/图片 6@3x.png" mode=""></image>
|
|
<view class="" style="flex: 1;">
|
|
<view class="fn-18 fn-bold m-b-sm" style="color: #101010;">{{ $t("homeNewText.dd5") }}
|
|
</view>
|
|
<view class="">{{ $t("homeNewText.dd6") }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 多终端支持 交易，随时随地 -->
|
|
<view class="download_area" v-if="0">
|
|
<view class="fn-20 fn-bold" style="color: #101010;text-align: center;">{{ $t("homeNewText.ee1") }}
|
|
</view>
|
|
<view class="fn-12" style="text-align: center;color: #999;margin-top: 10px;">
|
|
{{ $t("homeNewText.ee2") }}
|
|
</view>
|
|
<view class="fn-12" style="text-align: center;color: #999;margin-top: 10px;">
|
|
{{ $t("homeNewText.ee3") }}
|
|
</view>
|
|
<view class="zhanshi"></view>
|
|
<view class="btn" @click="toLink('apple')">
|
|
<image src="../../assets/img/home/antFill-apple@3x.png" mode=""></image>App Store
|
|
</view>
|
|
<view class="btn" @click="toLink('android')">
|
|
<image src="../../assets/img/home/md-android@3x.png" mode=""></image>Android
|
|
</view>
|
|
<!--<view class="btn"><image src="../../assets/img/home/riFill-google-play-fill@3x.png" mode="">Google Play</image></view>-->
|
|
</view>
|
|
|
|
<!-- 新手指引 -->
|
|
<view v-if="0">
|
|
<view class="section-h-3" v-if="articleList.length>0">
|
|
<view class="title1 fn-center">{{ $t("cxiNewText.a71") }}</view>
|
|
<view class="title2 fn-center">{{ $t("homeNewText.ee4") }}</view>
|
|
<view class="">
|
|
<!-- <v-link class="" v-for="(articleItem, articleIndex) in articleList" :key="articleIndex" :to="'/pages/help/detail?id='+articleItem.id">
|
|
<view class="list-box m-b-md m-t-lg" :style="{backgroundImage: bgUrl(articleItem.full_cover)}"></view>
|
|
<view class="">{{ articleItem.title }}</view>
|
|
</v-link> -->
|
|
<v-link class="" :to="'/pages/help/detail?id='+articleList[0].id">
|
|
<view class="list-box m-b-md m-t-lg"
|
|
style="background-image: url('../../assets/img/home/11.png');">
|
|
<image src="../../assets/img/home/11.png" mode="" style="width: 100%;height: 100%;">
|
|
</image>
|
|
</view>
|
|
</v-link>
|
|
<v-link class="" :to="'/pages/help/detail?id='+articleList[1].id">
|
|
<view class="list-box m-b-md m-t-lg">
|
|
<image src="../../assets/img/home/10.png" mode="" style="width: 100%;height: 100%;">
|
|
</image>
|
|
</view>
|
|
</v-link>
|
|
<v-link class="" :to="'/pages/help/detail?id='+articleList[2].id">
|
|
<view class="list-box m-b-md m-t-lg">
|
|
<image src="../../assets/img/home/9.png" mode="" style="width: 100%;height: 100%;">
|
|
</image>
|
|
</view>
|
|
</v-link>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 点击前往 -->
|
|
<view class="section-h-1" v-if="0">
|
|
<view class="justify-center" style="display: flex;">
|
|
<image src="../../assets/img/home/coin.png"
|
|
style="width: 112rpx;height: 112rpx;margin-right: 20rpx;" mode=""></image>
|
|
<view style="text-align: left;">
|
|
<view class="fn-18 fn-bold m-b-sm" style="color: #444;">{{ $t("homeNewText.ee5") }}</view>
|
|
<view class="fn-12 fn-bold m-b-sm" style="color: #999;">{{ $t("cxiNewText.a21") }}</view>
|
|
</view>
|
|
</view>
|
|
<navigator class="homeBtn" url="/pages/login/index" v-if="!isLogin">{{ $t("cxiNewText.a57") }}
|
|
</navigator>
|
|
<view class="homeBtn" @click="tabChange('mine')" v-else>{{ $t("cxiNewText.a57") }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 个人主页弹出层 -->
|
|
<van-popup class="personalCenter-main colbg bg-panel-4" :show="show" @close="show = false" position="left"
|
|
custom-style="width:100%;height:100%">
|
|
<view style="height: var(--status-bar-height)"></view>
|
|
<view class="personalCenter-top">
|
|
<view class="theme-switch m-x-md d-flex justify-between">
|
|
<van-icon name="arrow-left" @click="show = false" class="fn-22" />
|
|
<!-- <view class="v-switch border rounded-xs d-flex" @click="changtTheme">
|
|
<view
|
|
class="icon border"
|
|
:class="theme == 'light' ? 'bg-gradient-green active' : 'bg-gradient-green'"
|
|
>
|
|
<view class="left color-light">{{ $t("common.light") }}</view>
|
|
<view class="right color-light">{{ $t("common.dark") }}</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- <img width="25px" height="25px" @click="changtTheme" :src="theme == 'light' ? 'static/img/moon.png' : 'static/img/sun.png'" /> -->
|
|
</view>
|
|
<view class="information p-l-md m-t-xl">
|
|
<!-- <img :src="logoMap.login_logo" class="h-50 w-50 d-block m-r-xs rounded-max flex-shrink" /> -->
|
|
<view class="inf-rig flex-fill">
|
|
<!-- <span class="fn-lg color-light" v-if="isLogin">{{
|
|
user.account
|
|
}}</span> -->
|
|
<!-- @click="toAccountSettings" -->
|
|
|
|
<!-- <span v-if="isLogin" class="inf-rig-cent fn-20 color-light">UID：{{ isLogin ? user.user_id : "-" }}
|
|
#ifdef H5
|
|
<i class="iconfont m-l-lg" @click="copy(user.user_id)"></i>
|
|
#endif
|
|
#ifndef H5
|
|
<i class="iconfont m-l-lg" @click="$copy(user.user_id+'')"></i>
|
|
#endif
|
|
</span> -->
|
|
|
|
<!-- v-else -->
|
|
<view v-if="!isLogin" class="color-light" @click.stop>
|
|
<view class="fn-bold fn-16">
|
|
{{ $t("first.b2") }}
|
|
</view>
|
|
<v-link to="/pages/login/index" class="color-theme-1 goLogin rounded m-t-xs fn-xs" style="color: #54B58F;">
|
|
{{ $t("first.b1") }}
|
|
</v-link>
|
|
</view>
|
|
</view>
|
|
<v-link v-if="false" to="/pages/invite/level" style="padding:3px 4px 6px"
|
|
class="bg-panel-4 border border-r-0 rounded-tl-lg rounded-bl-lg border-buy" @click.native.stop>
|
|
<span class="fn-xs color-buy">{{ $t("base.e6") }}</span>
|
|
</v-link>
|
|
</view>
|
|
</view>
|
|
<v-link to="/pages/auth/index" tag="div"
|
|
class="bg-form-panel-3 p-xs m-xs color-theme-1 d-flex justify-between align-center">
|
|
<view class=" d-flex align-center">
|
|
<van-icon name="manager" class="fn-18" color="#54B58F" />
|
|
<text class="p-l-md fn-14" style="color: #54B58F;">{{$t('auth.a1')}}</text>
|
|
</view>
|
|
<text class="bg-theme-1 color-white p-x-xs p-y-xxs rounded" style="background-color: #54B58F;" v-if="detail.status!=2">{{$t('first.a0')}}</text>
|
|
<text class="bg-theme-1 color-white p-x-xs p-y-xxs rounded" style="background-color: #54B58F;" v-else>{{$t('auth.a3')}}</text>
|
|
</v-link>
|
|
<!-- <view class="personalCenter-center border-b border-gray-5">
|
|
<view class="d-flex justify-around">
|
|
<v-link
|
|
to="/pages/assets/recharge"
|
|
tag="div"
|
|
class="d-flex flex-col align-center"
|
|
>
|
|
<img src="static/img/13.png" alt="" class=" h-44" />
|
|
<span class="fn-md color-light p-y-xs">{{ $t("base.b5") }}</span>
|
|
</v-link>
|
|
<v-link
|
|
to="/pages/assets/draw"
|
|
tag="div"
|
|
class="d-flex flex-col align-center"
|
|
>
|
|
<img src="static/img/5.png" alt="" class="h-44" />
|
|
<span class="fn-md color-light p-y-xs">{{ $t("base.b6") }}</span>
|
|
</v-link>
|
|
<v-link
|
|
to="/pages/purchase/index"
|
|
tag="div"
|
|
class="d-flex flex-col align-center"
|
|
>
|
|
<img src="static/img/8.png" alt="" class="h-44" />
|
|
<span class="fn-md color-light p-y-xs">{{ $t("base.b7") }}</span>
|
|
</v-link>
|
|
</view>
|
|
</view> -->
|
|
<view class="personalCenter-bottom m-t-md">
|
|
|
|
<!-- <v-link
|
|
to="/pages/commission/index"
|
|
tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between"
|
|
> -->
|
|
<view class="per-bot p-y-md p-x-sm d-flex align-center justify-between" @click="goMine()">
|
|
<view class="d-flex align-center">
|
|
<img :src="$localImgUrl('icon1.png')" alt="" class="m-r-xs h-20">
|
|
<span class="color-light">{{ $t("base.c1") }}</span>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</view>
|
|
|
|
<!-- </v-link> -->
|
|
|
|
<!-- <v-link
|
|
to="/pages/otc/pays"
|
|
tag="div"
|
|
class="per-bot p-y-sm p-l-sm border-b d-flex align-center"
|
|
>
|
|
<img :src="$localImgUrl('Page9.png')" alt="" class="h-20 m-r-xs">
|
|
<span class="color-light">{{$t('otc.j6')}}</span>
|
|
</v-link> -->
|
|
<!-- <v-link
|
|
to="/pages/auth/index"
|
|
tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between"
|
|
>
|
|
<view class="d-flex align-center">
|
|
<img :src="$localImgUrl('Page2.png')" alt="" class="h-20 m-r-xs" />
|
|
<span class="color-light">{{ $t("base.c2") }}</span>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</v-link> -->
|
|
<v-link to="/pages/safe/index" tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
|
|
<view class="d-flex align-center">
|
|
<img :src="$localImgUrl('icon2.png')" alt="" class="h-20 m-r-xs" />
|
|
<span class="color-light">{{ $t("base.c3") }}</span>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</v-link>
|
|
<v-link to="/pages/notice/index" tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
|
|
<view class="d-flex align-center">
|
|
<img :src="$localImgUrl('icon3.png')" alt="" class="h-20 m-r-xs" />
|
|
<span class="color-light">{{ $t("base.c4") }}</span>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</v-link>
|
|
<v-link to="/pages/assets/address-list" tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
|
|
<view class="d-flex align-center">
|
|
<img :src="$localImgUrl('icon4.png')" alt="" class="h-20 m-r-xs" />
|
|
<span class="color-light">{{ $t("base.c5") }}</span>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</v-link>
|
|
<!-- <v-link
|
|
to="/pages/purchase/index"
|
|
tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between"
|
|
>
|
|
<view class="d-flex align-center">
|
|
<img :src="$localImgUrl('fill5.png')" alt="" class="h-20 m-r-xs" />
|
|
<span class="color-light">{{ $t("exchange.a1") }}</span>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</v-link> -->
|
|
<v-link :to="'/pages/service/service?id=33&type=0'" tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
|
|
<view class="d-flex align-center">
|
|
<img :src="$localImgUrl('icon7.png')" alt="" class="h-20 m-r-xs" />
|
|
<span class="color-light">{{$t('first.contactUs')}}</span>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</v-link>
|
|
<v-link to="/pages/accountSettings/accountSettings" tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
|
|
<view class="d-flex align-center">
|
|
<img :src="$localImgUrl('icon6.png')" alt="" class="h-20 m-r-xs" />
|
|
<span class="color-light">{{ $t("base.c6") }}</span>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</v-link>
|
|
<v-link :to="isLogin?'/pages/oncs/onservice':'/pages/login/index'" tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between" style="position: relative;">
|
|
<view class="d-flex align-center">
|
|
<img src="@/static/img/cs_w.png" alt="" class="h-20 m-r-xs" />
|
|
<span class="circle-pulse1" v-if="newscount!==0">{{newscount>=100?'99+':newscount}}</span>
|
|
<view class="color-light">{{$t('common.service')}}</view>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</v-link>
|
|
<!-- <v-link :to="`/pages/help/detail?id=${167}`" tag="div"
|
|
class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
|
|
<view class="d-flex align-center">
|
|
<img :src="$localImgUrl('icon5.png')" alt="" class="h-20 m-r-xs" />
|
|
<span class="color-light">{{$t('first.a1')}}</span>
|
|
</view>
|
|
<van-icon name="arrow" class="fn-18" />
|
|
</v-link> -->
|
|
<!-- <view class="per-bot p-y-md p-x-sm d-flex align-center">
|
|
<img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" />
|
|
<span class="color-light">
|
|
<v-lang
|
|
@change="
|
|
marketList = [];
|
|
indexData();
|
|
"
|
|
></v-lang>
|
|
<i class="iconfont m-l-xs fn-sm"></i>
|
|
</span>
|
|
</view> -->
|
|
<view class="h-100"></view>
|
|
<view v-if="isLogin" class="logout w-max bg-form-panel-4 fn-center color-light p-y-xs rounded-xs"
|
|
@click="loginOut" style="background-color: #54B58F;color: white;">
|
|
<text class="w-max rounded-lg border-0">{{ $t("accountSettings.a9") }}</text>
|
|
</view>
|
|
</view>
|
|
</van-popup>
|
|
<van-toast id="van-toast" />
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Home from "@/api/home";
|
|
import Wallet from "@/api/wallet";
|
|
import Exchange from "@/api/exchange";
|
|
import math from "@/utils/class/math.js";
|
|
import Member from "@/api/member";
|
|
import app from "@/app";
|
|
import Profile from "@/api/profile";
|
|
import College from "@/api/college";
|
|
import {
|
|
mapState,
|
|
mapActions
|
|
} from "vuex";
|
|
import {
|
|
handleClipboard
|
|
} from '../../utils/class/copy.js'
|
|
import qs from "qs";
|
|
export default {
|
|
name: "home",
|
|
props: {
|
|
isShow: {
|
|
default: true,
|
|
type: Boolean,
|
|
required: false,
|
|
},
|
|
refresherEnabled: {
|
|
default: true,
|
|
required: false,
|
|
type: Boolean
|
|
},
|
|
tabChange: {
|
|
type: Function,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
infoActive: 1, // 详情选中
|
|
marketList: [],
|
|
marketListHe: [],
|
|
home: {},
|
|
notice: [],
|
|
wap: "",
|
|
indexList: [],
|
|
createList: [],
|
|
list: [],
|
|
page: 1,
|
|
tab: "kcb",
|
|
show: false,
|
|
checked: false,
|
|
collect: [],
|
|
app,
|
|
first: true,
|
|
active: 0,
|
|
chartDatas: {
|
|
"series": [{
|
|
// "showAllSymbol":true,
|
|
"data": [10, 20, 24, 24, 68, 42],
|
|
"color": "#ff0000"
|
|
},
|
|
// {
|
|
// "data": [15,2,7,30,51,20],
|
|
// "color":"#00ff00"
|
|
// }
|
|
]
|
|
},
|
|
heyue: [],
|
|
price_cny: 0,
|
|
detail: {},
|
|
num: 0,
|
|
scrollTop: 0,
|
|
refreshing: false,
|
|
guideList: [], //课程列表
|
|
guideId: '', // 当前显示课程分类的ID
|
|
articleList: [],
|
|
helpList: [],
|
|
newscount:0,
|
|
chatcount:null,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
ws: "ws",
|
|
ws1: "ws1",
|
|
user: "user",
|
|
wsState: "wsState",
|
|
logoMap: "logoMap",
|
|
theme: "theme",
|
|
}),
|
|
isLogin() {
|
|
return Boolean(uni.getStorageSync("token"));
|
|
},
|
|
},
|
|
watch: {
|
|
isShow(n) {
|
|
if(n&&this.isLogin){
|
|
this.chatcount = setInterval(()=>{
|
|
this.chat()
|
|
},2000)
|
|
} else if(!n){
|
|
clearInterval(this.chatcount);
|
|
}
|
|
if (n) {
|
|
this.indexData()
|
|
this.ws.send({
|
|
cmd: "sub",
|
|
msg: "indexMarketList",
|
|
});
|
|
this.ws1.send({
|
|
cmd: "sub",
|
|
msg: 'swapMarketList',
|
|
});
|
|
} else {
|
|
this.ws.send({
|
|
cmd: "unsub",
|
|
msg: "indexMarketList",
|
|
});
|
|
this.ws1.send({
|
|
cmd: "unsub",
|
|
msg: 'swapMarketList',
|
|
});
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
goMine() {
|
|
this.show = false
|
|
this.tabChange('mine')
|
|
},
|
|
goExchange() {
|
|
this.show = false;
|
|
this.tabChange('exchange-operation')
|
|
},
|
|
goReg() {
|
|
uni.navigateTo({
|
|
url: '/pages/reg/index'
|
|
})
|
|
},
|
|
toNotice(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/notice/detail?id=' + item.id
|
|
})
|
|
},
|
|
...mapActions({
|
|
setTheme: "setTheme",
|
|
}),
|
|
setQuery: qs.stringify,
|
|
omitTo: math.omitTo,
|
|
onRefresh() {
|
|
this.indexData()
|
|
if (this.refreshing) return;
|
|
this.refreshing = true;
|
|
setTimeout(() => {
|
|
this.refreshing = false;
|
|
}, 1000)
|
|
},
|
|
scroll(event) {
|
|
this.scrollTop = event.detail.scrollTop
|
|
},
|
|
getHelpList() {
|
|
College.getArticleList({
|
|
id: 18
|
|
}).then((res) => {
|
|
this.helpList = res.data.splice(0, 4);
|
|
});
|
|
},
|
|
// 获取汇率
|
|
getCurrencyExCny() {
|
|
Exchange.getCurrencyExCny({
|
|
coin_name: 'USDT',
|
|
}).then((res) => {
|
|
this.price_cny = res.data.price_cny;
|
|
});
|
|
},
|
|
changtTheme() {
|
|
if (this.theme == "light") {
|
|
this.setTheme("dark");
|
|
} else {
|
|
this.setTheme("light");
|
|
}
|
|
},
|
|
// 获取涨跌之前的价格
|
|
getOldPrice(price, rate) {
|
|
return math.multiple(math.division(price, 1 + rate * 1), rate, 2);
|
|
},
|
|
toAccountSettings() {
|
|
this._router.push({
|
|
path: "/pages/accountSettings/accountSettings"
|
|
});
|
|
},
|
|
personalCenter() {
|
|
this.show = true;
|
|
},
|
|
|
|
indexData() {
|
|
let data = {};
|
|
let ajax = Home.indexList(data, {
|
|
loading: true
|
|
});
|
|
ajax
|
|
.then((res) => {
|
|
this.home = res.data.bannerList;
|
|
this.notice = res.data.noticeList;
|
|
this.indexList = res.data.brokenLine;
|
|
this.marketList = res.data.marketList;
|
|
// this.infoActive = 1;
|
|
this.dunshift();
|
|
this.getCollect();
|
|
setTimeout(() => {
|
|
this.first = false;
|
|
}, 600);
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
dunshift() {
|
|
if (this.marketList.filter((item) => item.collect).length) return;
|
|
this.marketList.unshift({
|
|
coin_name: this.$t("base.c7"),
|
|
collect: true,
|
|
marketInfoList: [],
|
|
});
|
|
},
|
|
// 获取自选交易列表
|
|
getCollect(call) {
|
|
if (!this.isLogin) return;
|
|
Home.getCollect()
|
|
.then((res) => {
|
|
this.collect = res.data || [];
|
|
call && call();
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
// 是否为自选
|
|
isCoolect(i) {
|
|
return this.collect.map((item) => item.pair_name).includes(i.pair_name);
|
|
},
|
|
// 替换自选数据
|
|
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);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
// 添加自选
|
|
option(item) {
|
|
let data = {
|
|
pair_name: item.pair_name,
|
|
};
|
|
Home.option(data)
|
|
.then((res) => {
|
|
this.getCollect();
|
|
if (res.data) {
|
|
this.$toast(this.$t("base.c8"));
|
|
} else {
|
|
this.$toast(this.$t("base.c9"));
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
// 链接socket
|
|
indexMarketList() {
|
|
this.marketList = []
|
|
this.ws.send({
|
|
cmd: "sub",
|
|
msg: "indexMarketList",
|
|
});
|
|
this.ws.on("message", (res) => {
|
|
let {
|
|
data,
|
|
sub
|
|
} = res;
|
|
if (sub == "indexMarketList") {
|
|
this.marketList = data;
|
|
this.marketList.forEach((item, index) => {
|
|
item.marketInfoList.forEach((iitem, iindex) => {
|
|
iitem.kline = {
|
|
series: iitem.series
|
|
}
|
|
|
|
})
|
|
})
|
|
this.dunshift();
|
|
this.replaceOptional();
|
|
}
|
|
});
|
|
let msg = "swapMarketList";
|
|
this.ws1.send({
|
|
cmd: "sub",
|
|
msg: msg,
|
|
});
|
|
this.ws1.on("message", (res) => {
|
|
if (!this.isShow) return;
|
|
let {
|
|
data,
|
|
sub
|
|
} = res;
|
|
if (sub == msg) {
|
|
this.marketListHe = data[0].marketInfoList
|
|
this.marketListHe.forEach((item, index) => {
|
|
// item.kline=item.series
|
|
// chartDatas:{
|
|
// "series": [
|
|
// {
|
|
// // "showAllSymbol":true,
|
|
// "data": [10,20,24,24,68,42],
|
|
// "color":"#ff0000"
|
|
// },
|
|
// // {
|
|
// // "data": [15,2,7,30,51,20],
|
|
// // "color":"#00ff00"
|
|
// // }
|
|
// ]
|
|
// },
|
|
this.marketListHe[index].kline = {
|
|
series: item.series
|
|
}
|
|
// console.log(this.marketListHe)
|
|
// let a=[]
|
|
// item.kline.forEach((arr)=>{
|
|
// let max=0
|
|
// arr.data.forEach((arrs)=>{
|
|
// if(arrs>max){
|
|
// max=arrs
|
|
// }
|
|
// })
|
|
// let x;
|
|
// arr.data.forEach((arrs)=>{
|
|
// if(max>100){
|
|
// x=max/100
|
|
// a=this.omitTo(a.push(arrs / x),0)
|
|
// // console.log(arrs / x)
|
|
// }else{
|
|
// x=100/max
|
|
// a=this.omitTo(a.push(arrs * x),0)
|
|
// // console.log(arrs * x)
|
|
// }
|
|
// })
|
|
// })
|
|
// console.log(this.marketListHe[0].kline)
|
|
})
|
|
}
|
|
});
|
|
},
|
|
// 创建充币地址
|
|
createWalletAddress() {
|
|
Wallet.createWalletAddress()
|
|
.then(() => {})
|
|
.catch(() => {});
|
|
},
|
|
// 退出登录
|
|
loginOut() {
|
|
this.$dialog
|
|
.confirm({
|
|
// title: '',
|
|
message: this.$t("first.b0"),
|
|
cancelButtonText: this.$t("common.cancel"),
|
|
confirmButtonText: this.$t("common.confirm")
|
|
})
|
|
.then(() => {
|
|
let data = {
|
|
lang: uni.getStorageSync('language') || 'zh-CN'
|
|
};
|
|
Member.logout(data, {
|
|
toast: true
|
|
})
|
|
.then(() => {
|
|
this.outLogin();
|
|
clearInterval(this.chatcount);
|
|
})
|
|
.catch(() => {});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
// 切换用户
|
|
outLogin() {
|
|
uni.removeStorageSync("token");
|
|
this._router.replace({
|
|
path: "/pages/login/index",
|
|
query: {
|
|
notLogin: 1,
|
|
from: '/pages/accountSettings/accountSettings',
|
|
},
|
|
});
|
|
},
|
|
copy(data) {
|
|
handleClipboard(data, event, () => {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: this.$t('common.a1')
|
|
})
|
|
}, () => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: this.$t('common.a2')
|
|
})
|
|
})
|
|
},
|
|
getAuthInfo() {
|
|
Profile.getAuthInfo().then(res => {
|
|
this.detail = res.data
|
|
})
|
|
},
|
|
/**
|
|
* 获取课程分类和列表
|
|
*/
|
|
getCollegeLinks() {
|
|
College.getCategoryList().then(res => {
|
|
// console.log(res, 11111);
|
|
let list = res.data;
|
|
list.forEach(item => {
|
|
if (this.guideId === '') {
|
|
this.guideId = item.id;
|
|
}
|
|
this.guideList.push({
|
|
url: `/college/list/${item.id}`,
|
|
label: item.name,
|
|
value: item.name,
|
|
id: item.id
|
|
})
|
|
})
|
|
this.getArticleList();
|
|
})
|
|
},
|
|
getArticleList() {
|
|
College.getArticleList({
|
|
id: this.guideId
|
|
}).then(res => {
|
|
let data = res.data;
|
|
this.articleList = data.splice(0, 3);
|
|
// console.log(this.articleList, 222222);
|
|
// setTimeout(() => {
|
|
// this.skroll();
|
|
// }, 100);
|
|
})
|
|
},
|
|
bgUrl(url) {
|
|
return "url('" + url + "')";
|
|
},
|
|
verifyRealName() {
|
|
if (this.detail.primary_status != 1) {
|
|
uni.navigateTo({
|
|
url: '/pages/auth/index'
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/assets/recharge'
|
|
})
|
|
}
|
|
},
|
|
toLink(type) {
|
|
if (type === 'apple') {
|
|
// #ifdef APP-PLUS
|
|
plus.runtime.openURL("https://app.cxisux.com/download/ ")
|
|
// #endif
|
|
// #ifdef H5
|
|
window.open("https://app.cxisux.com/download/ ", '_blank')
|
|
// #endif
|
|
} else if (type === 'android') {
|
|
// #ifdef APP-PLUS
|
|
plus.runtime.openURL("https://app.cxisux.com/download/ ")
|
|
// #endif
|
|
// #ifdef H5
|
|
window.open("https://app.cxisux.com/download/ ", '_blank')
|
|
// #endif
|
|
}
|
|
},
|
|
chat(){
|
|
Home.chat().then(res => {
|
|
if(res.code==200){
|
|
this.newscount = res.data.count;
|
|
}else{
|
|
console.log('1111');
|
|
clearInterval(this.chatcount);
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.indexData();
|
|
this.indexMarketList();
|
|
this.getCurrencyExCny();
|
|
this.getCollegeLinks();
|
|
this.getHelpList();
|
|
if (this.isLogin) {
|
|
this.chatcount = setInterval(()=>{
|
|
this.chat()
|
|
},5000)
|
|
this.createWalletAddress();
|
|
this.getAuthInfo()
|
|
}
|
|
},
|
|
destroyed() {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.circle-pulse1 {
|
|
background: red;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: 25%;
|
|
top: -10px;
|
|
color: #fff;
|
|
}
|
|
// .colbg {
|
|
// background-color: $bg;
|
|
// }
|
|
.my-swipe {
|
|
height: 150px;
|
|
|
|
.van-image {
|
|
padding: 0 18px;
|
|
box-sizing: border-box;
|
|
|
|
::v-deep img.van-image__img {
|
|
border-radius: 9px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notice-swipe {
|
|
height: 24px;
|
|
}
|
|
|
|
// #ff4d5c
|
|
.nav2 {
|
|
.color-gray-6 {
|
|
color: #f8a12e;
|
|
}
|
|
}
|
|
|
|
.stock-swipe {
|
|
.stock-index {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.stock-item-3 {
|
|
padding: 3px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.personalCenter-main {
|
|
.personalCenter-top {
|
|
box-sizing: border-box;
|
|
|
|
.theme-switch {
|
|
padding: 5% 0;
|
|
|
|
.v-switch {
|
|
$width: 50px;
|
|
$icon-width: 20px;
|
|
display: block;
|
|
position: relative;
|
|
height: 20px;
|
|
width: $width;
|
|
background: rgba($green, 0.2);
|
|
overflow: hidden;
|
|
|
|
.icon {
|
|
position: absolute;
|
|
top: 0;
|
|
width: $icon-width;
|
|
height: 20px;
|
|
border-radius: inherit;
|
|
transition: left 0.3s;
|
|
|
|
.left,
|
|
.right {
|
|
position: absolute;
|
|
width: $width;
|
|
height: 100%;
|
|
top: 0;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
|
|
&.left {
|
|
right: 0;
|
|
padding-right: $icon-width;
|
|
}
|
|
|
|
&.right {
|
|
padding-left: $icon-width;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
left: 0;
|
|
}
|
|
|
|
.active.icon {
|
|
left: $width - $icon-width;
|
|
}
|
|
}
|
|
}
|
|
|
|
.information {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.inf-head-img {
|
|
border-radius: 50%;
|
|
margin-right: 4%;
|
|
}
|
|
|
|
.inf-rig {
|
|
display: flex;
|
|
flex-direction: column;
|
|
letter-spacing: 1px;
|
|
flex: 1;
|
|
|
|
span:first-child {
|
|
font-weight: 600;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.inf-rig-cent {
|
|
padding: 0 0 4px;
|
|
}
|
|
|
|
.vip-grade {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.progress-bar {
|
|
width: 50%;
|
|
}
|
|
|
|
.progress-img {
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.personalCenter-center {
|
|
padding: 20px 10px 10px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.personalCenter-bom {
|
|
padding-top: 30px;
|
|
|
|
.available-money {
|
|
margin: 10px 0 0;
|
|
height: 60%;
|
|
background: rgba(100, 101, 102, 0.2);
|
|
border-radius: 0 7px 7px 7px;
|
|
align-items: center;
|
|
padding: 6px 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-icon {
|
|
font-size: 50px;
|
|
}
|
|
|
|
.epss-1 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.lists {
|
|
display: flex;
|
|
|
|
.lists-1 {
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
|
|
.logout {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
|
|
::v-deep .van-button--default {
|
|
border: none;
|
|
background-color: $panel-3;
|
|
}
|
|
}
|
|
|
|
.goLogin {
|
|
padding: 5px 15px;
|
|
border: 1px solid #54B58F;
|
|
}
|
|
|
|
.p-y-xxs {
|
|
padding: 3px 0;
|
|
}
|
|
|
|
.m-t-xxs {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.bg-box-per {
|
|
box-shadow: 0 5px 10px #c6c0dc;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.bg-box-blue {
|
|
box-shadow: 0 5px 10px #aed6e2;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.bg-box-red {
|
|
box-shadow: 0 5px 10px #d7aec0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.bg-box-yellow {
|
|
box-shadow: 0 5px 10px #e1d2a3;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.color-white {
|
|
color: white;
|
|
}
|
|
|
|
.bor5-active {
|
|
border-bottom: 5px solid $theme-2;
|
|
}
|
|
|
|
.w-40 {
|
|
width: 40%;
|
|
}
|
|
|
|
::v-deep .van-tabs__line {
|
|
display: none;
|
|
}
|
|
|
|
::v-deep .custom-class.van-sticky {
|
|
display: none;
|
|
}
|
|
|
|
.bor5 {
|
|
position: relative;
|
|
}
|
|
|
|
.bor5:before {
|
|
position: absolute;
|
|
content: "";
|
|
bottom: -10px;
|
|
left: 20%;
|
|
width: 60%;
|
|
height: 2px;
|
|
border-radius: 10px;
|
|
background-color: $theme-2;
|
|
// border-bottom: 5px solid $border-color;
|
|
}
|
|
|
|
/deep/ .uni-swiper-dot {
|
|
width: 15px !important;
|
|
height: 3px !important;
|
|
border-radius: 5px;
|
|
background: $light !important;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
/deep/ .uni-swiper-dots {
|
|
bottom: -12px !important;
|
|
}
|
|
|
|
/deep/ uni-swiper .uni-swiper-slides {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/deep/ uni-swiper .uni-swiper-wrapper {
|
|
overflow: inherit;
|
|
}
|
|
|
|
/deep/ .uni-swiper-dot-active {
|
|
background: #f0c947 !important;
|
|
width: 30px !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 50px;
|
|
}
|
|
|
|
/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
|
|
.chartsview {
|
|
height: 100%;
|
|
}
|
|
|
|
.positions {
|
|
position: relative;
|
|
}
|
|
|
|
.posi {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 6px;
|
|
}
|
|
|
|
.posil {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0px;
|
|
}
|
|
|
|
.scale {
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.fn-9 {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.section-h-1 {
|
|
width: 700rpx;
|
|
margin: 0px auto;
|
|
background-color: #f5f5f5;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
padding: 60rpx 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
image {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.btn {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.d-flex {
|
|
width: 96%;
|
|
text-align: left;
|
|
flex-wrap: wrap;
|
|
margin-top: 40rpx;
|
|
justify-content: space-around;
|
|
|
|
.text1 {
|
|
color: #444;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.text2 {
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.homeBtn {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 10rpx;
|
|
color: #fff;
|
|
background-color: #EABB71;
|
|
min-width: 460rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.coin_icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.section-h-3 {
|
|
width: 750rpx;
|
|
background-color: #fff;
|
|
padding: 30rpx 30rpx 50rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title1 {
|
|
font-size: 18px;
|
|
color: #101010;
|
|
font-weight: bold;
|
|
line-height: 26px;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.title2 {
|
|
font-size: 14px;
|
|
color: #999;
|
|
line-height: 22px;
|
|
}
|
|
|
|
|
|
.list-box {
|
|
width: 700rpx;
|
|
height: 326rpx;
|
|
border-radius: 10px;
|
|
// background-color: #FAFAFA;
|
|
// background-size: contain;
|
|
// background-position: center;
|
|
// background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
}
|
|
|
|
.illustration_area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// padding-top: 30rpx;
|
|
padding-bottom: 60rpx;
|
|
|
|
background-color: #fff;
|
|
.title {
|
|
font-size: 56rpx;
|
|
font-weight: bold;
|
|
// margin-bottom: 40rpx;
|
|
color: #000;
|
|
text-align: center;
|
|
// padding: 0px 60rpx;
|
|
width: 506rpx;
|
|
}
|
|
.illustration_text{
|
|
width: 506rpx;
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.card_area {
|
|
|
|
.card_item {
|
|
width: 700rpx;
|
|
min-height: 280rpx;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
padding: 70rpx;
|
|
margin: 0px auto 40rpx;
|
|
}
|
|
|
|
img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 20rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.introduce_area {
|
|
width: 700rpx;
|
|
margin: 0px auto;
|
|
|
|
.zhanshi {
|
|
width: 700rpx;
|
|
height: 700rpx;
|
|
background-image: url("../../assets/img/home/stt.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.item {
|
|
width: 700rpx;
|
|
min-height: 220rpx;
|
|
font-size: 14px;
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.download_area {
|
|
width: 750rpx;
|
|
margin: 160rpx auto 120rpx;
|
|
|
|
.zhanshi {
|
|
width: 750rpx;
|
|
height: 550rpx;
|
|
background-image: url("../../assets/img/home/styy.png");
|
|
background-size: cover;
|
|
margin: 40rpx 0px 60rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 700rpx;
|
|
height: 88rpx;
|
|
color: #101010;
|
|
background-color: #EABB71;
|
|
border-radius: 50px;
|
|
font-size: 16px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0px 25rpx 40rpx;
|
|
|
|
image {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.num1 {
|
|
color: #000;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.jump_btn_one {
|
|
font-weight: bold;
|
|
min-width: 660rpx;
|
|
height: 100rpx;
|
|
background-color: #5248D0;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto 0;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.jump_btn_one1{
|
|
font-weight: bold;
|
|
width: 500rpx;
|
|
height: 100rpx;
|
|
background-color: #fff;
|
|
color: #000;
|
|
border-radius: 60rpx;
|
|
margin: 0 auto 0;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.jump_btn {
|
|
font-weight: bold;
|
|
min-width: 660rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
margin: 0px auto 0px;
|
|
background-color: #5248D0;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.buys {
|
|
color: #59AF9D;
|
|
}
|
|
|
|
.red {
|
|
color: #D1705E;
|
|
}
|
|
.product {
|
|
width: 670rpx;
|
|
// border: 2px solid #F0F0F0;
|
|
// min-height: 600rpx;
|
|
margin-bottom: 45px;
|
|
padding: 15px 0px;
|
|
border-radius: 10px;
|
|
// box-shadow: 0px 0px 10px 0px #ccc;
|
|
background-color: #fff;
|
|
|
|
.product_text1 {
|
|
color: #000;
|
|
margin-left: 60rpx;
|
|
margin-top: 60rpx;
|
|
font-weight: bold;
|
|
font-size: 23px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.product_text2 {
|
|
margin-left: 30px;
|
|
width: 263px;
|
|
font-size: 28rpx;
|
|
color: #C4C4C4;
|
|
}
|
|
|
|
.product_text3{
|
|
margin: 60rpx 0px;
|
|
margin-left: 130rpx;
|
|
}
|
|
}
|
|
.text_size {
|
|
color: #000;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.text_width {
|
|
// width: 165px;
|
|
// margin-left: 40px;
|
|
margin-top: 10px;
|
|
color: #A5A5A5;
|
|
}
|
|
.went_text{
|
|
display: flex;
|
|
width: 644rpx;
|
|
justify-content: space-between;
|
|
border: 1px solid #3b3b3b;
|
|
height: 50px;
|
|
align-items: center;
|
|
padding: 0px 15px;
|
|
border-radius: 10px;
|
|
margin-top: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.quickopening_box{
|
|
background-color: rgba(248, 252, 251, 1);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(187, 187, 187, 1);
|
|
// padding: 0px 0px;
|
|
// height: 300rpx;
|
|
text-align: center;
|
|
|
|
.quickopening_register{
|
|
width: 250px;
|
|
height: 50px;
|
|
background-color: rgba(29, 29, 29, 1);
|
|
border-radius: 30px;
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.image_img{
|
|
width: 670rpx;
|
|
height: 670rpx;
|
|
// position: relative;
|
|
margin: 50rpx 0rpx;
|
|
}
|
|
.image_text{
|
|
margin-top: 20rpx;
|
|
margin-bottom: 60rpx;
|
|
font-size: 14px;
|
|
width: 506rpx;
|
|
}
|
|
.text_hh3{
|
|
font-size: 60rpx;
|
|
color: #000;
|
|
padding: 0px 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
.text_hh4{
|
|
padding: 0px 40rpx;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
.box_APP{
|
|
margin-top: 140rpx;
|
|
padding: 0px 20px;
|
|
margin-bottom: 60rpx;
|
|
.box_hh30{
|
|
font-size: 60rpx;
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
.box_hh31{
|
|
margin-top: 20rpx;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
.box_Stoer{
|
|
text-align: center;
|
|
color: #fff;
|
|
margin-top: 40rpx;
|
|
font-weight: bold;
|
|
background-color: #54B58F;
|
|
border-radius: 10px;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
}
|
|
}
|
|
|
|
.text_1{
|
|
padding: 50rpx 20rpx 50rpx 50rpx;
|
|
border-radius: 10px;
|
|
width: 560rpx;
|
|
margin-top: 50rpx;
|
|
background-color: white;
|
|
.text_2{
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
margin-top: 60rpx;
|
|
}
|
|
}
|
|
|
|
.jump_btn1{
|
|
margin-top: 60rpx;
|
|
display: inline-block;
|
|
min-width: 240rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #3377FF;
|
|
border-radius: 10px;
|
|
font-size: 30rpx;
|
|
padding: 0px 40rpx;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.store_view1{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background-color: #3377FF;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 40rpx;
|
|
border-radius: 10px;
|
|
color: white;
|
|
}
|
|
|
|
.index_partners__3BIDL{
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
// padding: 16px 0;
|
|
padding: 5px 0;
|
|
// margin-bottom: 10px;
|
|
background: #F9F9F9;
|
|
.rfm-marquee-container{
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: relative;
|
|
width: 100%;
|
|
transform: none;
|
|
.rfm-marquee{
|
|
flex: 0 0 auto;
|
|
min-width: 100%;
|
|
// z-index: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
animation: scroll 40s linear 0s infinite;
|
|
animation-play-state: running;
|
|
animation-delay: 0s;
|
|
animation-direction: normal;
|
|
.rfm-initial-child-container{
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
min-width: auto;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.rfm-child{
|
|
transform: none;
|
|
.ant-image{
|
|
position: relative;
|
|
display: inline-block;
|
|
.ant-image-img{
|
|
width: 100px;
|
|
height: 20px;
|
|
margin-left: 16px;
|
|
padding-top: 5px
|
|
}
|
|
}
|
|
.price-info{
|
|
align-items: center;
|
|
background-color: #fff;
|
|
justify-content: center;
|
|
margin-right: 20px;
|
|
height: 50px;
|
|
border-radius: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
100% {
|
|
transform: translateX(-75%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.marketbox{
|
|
color: #000;
|
|
padding: 100rpx 40rpx;
|
|
background-color: #F8F8F8;
|
|
|
|
.marketbox1{
|
|
font-size: 56rpx;
|
|
text-align: center;
|
|
color: #5248D0;
|
|
margin-bottom: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.marketbox2{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.marketbox3{
|
|
width: 280rpx;
|
|
height: 320rpx;
|
|
padding: 66rpx 20rpx;
|
|
margin: 20rpx 0px 0px 0px;
|
|
border-radius: 40rpx;
|
|
background-color: #fff;
|
|
|
|
.market_img{
|
|
color: #000;
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
font-weight: bold;
|
|
|
|
.market_image{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
|
|
.market_text{
|
|
color: #000;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.market_text1{
|
|
color: #000;
|
|
text-align: center;
|
|
margin-bottom: 23px;
|
|
font-weight: bold;
|
|
color: #727A89;
|
|
}
|
|
|
|
.market_text2{
|
|
color: #000;
|
|
margin-top: 10rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.Howtogetstarted{
|
|
width: 540rpx;
|
|
min-height: 420rpx;
|
|
background-color: #5248D0;
|
|
border-radius: 10px;
|
|
padding: 60rpx;
|
|
margin-top: 40rpx;
|
|
|
|
.Howtogetstarted_box{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background-color: #fff;
|
|
border-radius: 50px;
|
|
text-align: center;
|
|
line-height: 120rpx;
|
|
margin: auto;
|
|
color: #999999;
|
|
}
|
|
.Howtogetstarted_box1{
|
|
margin-top: 16px;
|
|
margin-bottom: 7px;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
.Howtogetstarted_box2{
|
|
color: #fff;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
padding-bottom: 40px;
|
|
}
|
|
.Howtogetstarted_box3{
|
|
color: #fff;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
background-color: #ee8267;
|
|
// max-width: 150px;
|
|
padding: 10px 10px;
|
|
margin: auto;
|
|
border-radius: 20px;
|
|
}
|
|
}
|
|
.Carousel{
|
|
padding-top: 30px;
|
|
text-align: center;
|
|
padding-bottom:100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.Carousel1{
|
|
height: 88rpx;
|
|
padding: 0px 10px;
|
|
// width: 350rpx;
|
|
background-color: #E0876E;
|
|
margin: auto;
|
|
line-height: 88rpx;
|
|
color: #fff;
|
|
border-radius: 20px;
|
|
}
|
|
}
|
|
.choice_text{
|
|
text-align: center;
|
|
font-size: 60rpx;
|
|
color: #4D47D0;
|
|
margin: 40rpx 0px;
|
|
}
|
|
.choice_text1{
|
|
font-size: 16px;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
.Trading{
|
|
margin-top: 200rpx;
|
|
margin-bottom: 100rpx;
|
|
padding: 0px 40rpx;
|
|
|
|
.Trading_box{
|
|
font-size: 28px;
|
|
color: #4D47D0;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.Trading_box1{
|
|
text-align: center;
|
|
margin-top: 40rpx;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.Trading_a{
|
|
background-color: #000;
|
|
width: 540rpx;
|
|
height: 88rpx;
|
|
display: block;
|
|
margin: auto;
|
|
font-weight: bold;
|
|
border-radius: 20px;
|
|
text-decoration: none;
|
|
|
|
.Trading_a_box{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
justify-content: center;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.Whotrusts{
|
|
font-size: 56rpx;
|
|
padding: 0px 40rpx;
|
|
font-weight: bold;
|
|
margin-top: 100px;
|
|
color: #5248d0;
|
|
text-align: center;
|
|
}
|
|
.Whotrusts_box{
|
|
display: flex;
|
|
justify-content: center;
|
|
color: #000;
|
|
flex-wrap: wrap;
|
|
|
|
.Whotrusts_box1{
|
|
width: 614rpx;
|
|
// height: 330rpx;
|
|
background-color: #F9F9F9;
|
|
padding: 74rpx 28rpx 74rpx 28rpx;
|
|
margin-top: 60rpx;
|
|
|
|
.Whotrusts_box1_text{
|
|
font-size: 56rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.Whotrusts_box1_text1{
|
|
font-size: 36rpx;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.Whotrusts_box1_text2{
|
|
margin-top: 84rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
</style>
|