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.
 
 
 

2249 lines
64 KiB

<template>
<view class="d-flex flex-col" style="background-color: #000;">
<!-- 头部 -->
<v-header class="nav-tab" :left-arrow="false" style="background-color: #000;" :left-click="personalCenter">
<template #left>
<!-- <van-icon name="user-circle-o" class="fn-25 color-theme-1" style="color: #D0712F;" /> -->
<image src="@/assets/img/home/top.png" mode="aspectFit" style="width: 36rpx;height: 36rpx;"></image>
</template>
<template #title>
<view style="color: #ffffff; font-size: 30rpx;">{{$t("base.d0")}}</view>
</template>
<template #right>
<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();getHelpList();"></v-lang>
<i class="iconfont m-l-xs fn-sm">&#xe6e9;</i>
</span>
</view>
</template>
</v-header>
<view class="layout-main">
<scroll-view @refresherrefresh="onRefresh" :refresher-enabled="refresherEnabled&&scrollTop<50"
:refresher-triggered="refreshing" refresher-background="transparent" :refresher-threshold="50">
<!-- 轮播 -->
<swiper v-if="false" 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&&false" 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="false">
<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>
<view class="illustration_area">
<image src="@/assets/img/home/home6.png" mode="aspectFit" style="width: 680rpx;height: 854rpx;">
</image>
<view style="font-size: 60rpx;color: white;margin-bottom: 16rpx;">
{{$t("homeNewText.a1")}}
</view>
<view style="margin: 0px 20px;color: white;margin-bottom: 25px;font-size: 28rpx;">
{{$t("homeNewText.a2")}}
</view>
<!-- <view class="titleButborder"></view> -->
<view v-if="!isLogin" class="jump_btn_one" @click="goReg">
{{ $t("homeNewText.a28") }}
</view>
<view v-else class="jump_btn_one" @click="goExchange">
{{ $t("homeNewText.aa4") }}
</view>
</view>
<!-- 市场趋势 -->
<view class="" style="margin-top: 80rpx;">
<view class="swipe_right flex-fill lists" style="justify-content: space-around;"
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 p-y-ms box-size lists-1"
v-if="item.pair_name=='BTC/USDT'||item.pair_name=='ETH/USDT'">
<v-link :to="{path: '/pages/exchange/index',query: { code: item.pair_name }}"
:class="{'bord_box': iindex !== parentItem.marketInfoList.length - 16}">
<view class="stock-index-img fn-12 color-gray-6"
style="display: flex;align-items: center;">
<view style="margin-right: 20rpx;">
<img :src="item.coin_icon" alt="" width="24" height="24">
</view>
<view class="color-light">
{{ item.pair_name }}
</view>
</view>
<view class="fn-18 color-light m-b-xs">
{{ item.close }}
</view>
<view class="d-flex flex-col fn-sm justify-center">
<view class="color-theme-6">≈ ¥{{omitTo(item.close*price_cny,2)}}</view>
</view>
<view style="margin-top: 3px;" :class="item.increase * 1 < 0 ? 'color-sell' : 'color-buy'">
{{ item.increaseStr }}
</view>
</v-link>
</view>
</view>
</view>
<!-- 市场趋势 -->
<view style="margin-top: 40px;">
<view class="currency" style="text-align: center;">{{$t("homeNewText.a3")}}</view>
<view class="" style="text-align: center;margin-top: 10px;margin-bottom: 10px;">{{$t("homeNewText.a4")}}</view>
<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>
<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="fn-center w-max">
<view
class="m-b-md m-x-md rounded-xs box-shadow link-active d-flex justify-between align-center p-y-xs box-size p-x-xs">
<view class="fn-left w-5/12">{{ $t("homeNewText.aa7") }}</view>
<view class="fn-right w-4/12">{{ $t("homeNewText.bb1") }}</view>
<view class="fn-right w-3/12 positions">{{ $t("homeNewText.bb2") }}</view>
</view>
<v-link :to="{
path: '/pages/exchange/index',
query: { code: item.pair_name },
}" class="m-b-md m-x-md rounded-xs box-shadow link-active d-flex justify-between align-center p-y-xs box-size p-x-xs"
v-for="item in parentItem.collect
? collect.slice(0,5)
: parentItem.marketInfoList.slice(0,5)" :key="item.pair_name">
<view class="fn-left w-5/12">
<view class="d-flex align-center">
<image :src="item.coin_icon" mode=""
style="width: 60rpx;height: 60rpx;margin-right: 12rpx;"></image>
<text
class="fn-bold fn-14 color-light col-fff">{{ item.coin_name }}</text>
<!-- <text class="fn-bold fn-14 color-light">{{ item.pair_name }}</text> -->
</view>
<view class="d-flex align-center fn-12 m-t-xs" v-if="0">
24H{{ $t("first.b3") }} {{ omitTo(item.vol, 0) }}
</view>
</view>
<view class="fn-right w-4/12 color-light usd-close">{{ item.close }}</view>
<view class="fn-right w-3/12">
<span class="fn-bold rounded-xs fn-16" :class="
item.increase * 1 > 0 ? 'color-buys' : 'color-red'">{{ item.increaseStr }}</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-tabs>
</view>
<!-- 新手指引1 -->
<view style="margin-top: 80px;">
<view class="currency" style="text-align: center;font-size: 30px;">{{$t("homeNewText.a5")}}</view>
<view style="display: flex;flex-wrap: wrap;justify-content: center;">
<view class="text_1">
<view class=""><img src="@/assets/img/user.svg" alt="" style="width: 120rpx;height: 120rpx;"></view>
<view class="text_2">{{ $t("homeNewText.a6") }}</view>
<view style="color: #5e6155;margin-top: 20rpx;font-size: 28rpx;">{{ $t("homeNewText.a7") }}</view>
<view v-if="!isLogin" class="jump_btn1" @click="goReg">
{{ $t("homeNewText.a12") }}
</view>
<view v-else class="jump_btn1" @click="goMine">
{{ $t("homeNewText.a12") }}
</view>
</view>
<view class="text_1">
<view class=""><img src="@/assets/img/account.svg" alt="" style="width: 120rpx;height: 120rpx;"></view>
<view class="text_2">{{ $t("homeNewText.a8") }}</view>
<view style="color: #5e6155;margin-top: 20rpx;font-size: 28rpx;">{{ $t("homeNewText.a9") }}</view>
<view v-if="!isLogin" class="jump_btn1" @click="goReg">
{{ $t("homeNewText.a13") }}
</view>
<view v-else class="jump_btn1" @click="goMine">
{{ $t("homeNewText.a13") }}
</view>
</view>
<view class="text_1">
<view class=""><img src="@/assets/img/transaction.svg" alt="" style="width: 120rpx;height: 120rpx;"></view>
<view class="text_2">{{ $t("homeNewText.a10") }}</view>
<view style="color: #5e6155;margin-top: 20rpx;font-size: 28rpx;">{{ $t("homeNewText.a11") }}</view>
<view v-if="!isLogin" class="jump_btn1" @click="goReg">
{{ $t("homeNewText.a13") }}
</view>
<view v-else class="jump_btn1" @click="goMine">
{{ $t("homeNewText.a13") }}
</view>
</view>
</view>
</view>
<!-- 新手指引2 -->
<view style="margin-top: 160rpx;margin-bottom: 200rpx;">
<view class="currency" style="text-align: center;font-size: 60rpx;">{{$t("homeNewText.a5")}}</view>
<view class="currency" style="text-align: center;font-size: 26rpx;margin-top: 10px;">{{$t("homeNewText.a31")}}</view>
<view style="display: flex;flex-wrap: wrap;justify-content: center;">
<view class="text_1">
<view style="display: flex;width: 100%;justify-content: center;"><img src="@/assets/img/home/home1.png" alt="" style="width: 314rpx;height: 314rpx;"></view>
<view class="text_2" style="text-align: center;">{{ $t("homeNewText.a16") }}</view>
<view class="text_3" style="width: 480rpx;margin-left: 30rpx;">{{ $t("homeNewText.a17") }}</view>
</view>
<view class="text_1">
<view style="display: flex;width: 100%;justify-content: center;"><img src="@/assets/img/home/home2.png" alt="" style="width: 314rpx;height: 314rpx;"></view>
<view class="text_2" style="text-align: center;">{{ $t("homeNewText.a29") }}</view>
<view class="text_3" style="width: 400rpx;margin-left: 76rpx;">{{ $t("homeNewText.a18") }}</view>
</view>
<view class="text_1">
<view style="display: flex;width: 100%;justify-content: center;"><img src="@/assets/img/home/home3.png" alt="" style="width: 314rpx;height: 314rpx;"></view>
<view class="text_2" style="text-align: center;">{{ $t("homeNewText.a30") }}</view>
<view class="text_3" style="width: 540rpx;">{{ $t("homeNewText.a19") }}</view>
</view>
</view>
</view>
<!-- 交易就要随时随地 -->
<view style="margin: 0px 20px;">
<view class="currency" style="text-align: center;font-size: 60rpx;">{{$t("homeNewText.a20")}}</view>
<view class="currency" style="text-align: center;font-size: 26rpx;margin-top: 10px;">{{$t("homeNewText.a21")}}</view>
<view style="display: flex;width: 100%;justify-content: center;margin-top: 40px;">
<image src="@/assets/img/home/home4.png" mode="aspectFit" style="width: 670rpx;height: 400rpx;"></image>
</view>
<a href="#" style="display: block;width: 100%;text-decoration: none;">
<view class="store_view">
<image src="@/assets/img/home/antFill-apple.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
<view style="color: #7E7D81;margin-left: 20rpx;">APP Store</view>
</view>
</a>
<a href="#" style="display: block;width: 100%;text-decoration: none;">
<view class="store_view1" style="">
<image src="@/assets/img/home/md-android.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
<view style="color: #7E7D81;margin-left: 20rpx;">Android</view>
</view>
</a>
</view>
<!-- 走进 -->
<view style="margin: 200rpx 20px 0px 20px;">
<view class="currency" style="text-align: center;font-size: 60rpx;">{{$t("homeNewText.a23")}}</view>
<view class="currency" style="text-align: center;font-size: 28rpx;margin-top: 10px;">{{$t("homeNewText.a24")}}</view>
<view class="walkinto_view">
<v-link :to="`/pages/help/detail?id=${item.id}`" class="item" tag="div" v-for="(item,index) in MarketList" :key="index">
<div class="banner">
<image :src="item.full_cover" mode="" class="walkinto_img"></image>
</div>
<div class="txt" style="margin-bottom: 50px;">
{{item.title}}
</div>
<!-- <div class="txt2" v-html="item.body"></div>
<div class="txt2">{{item.updated_at}}</div> -->
</v-link>
<!-- <image src="@/assets/img/home/home5.png" mode="aspectFit" style="width: 668rpx;height: 354rpx;margin-bottom: 30px;"></image>
<image src="@/assets/img/home/home5.png" mode="aspectFit" style="width: 668rpx;height: 354rpx;margin-bottom: 30px;"></image>
<image src="@/assets/img/home/home5.png" mode="aspectFit" style="width: 668rpx;height: 354rpx;margin-bottom: 30px;"></image> -->
</view>
</view>
<!-- 无忧启航 -->
<view style="margin-top: 80rpx;width: 100%;background-color: #2E58DE;padding: 80px 0px;">
<view style="padding: 0px 20px;">
<view class="currency" style="text-align: center;font-size: 50rpx;">{{$t("homeNewText.a25")}}</view>
<view class="currency" style="text-align: center;font-size: 28rpx;margin-top: 10px;">{{$t("homeNewText.a26")}}</view>
<view class="d-flex" style="margin-top: 30px;justify-content: center;flex-wrap: wrap;text-align: center;">
<view style="width: 300rpx;">
<view class="num1">Top 10</view>
<view class="titl">{{ $t("homeNewText.ee1") }}</view>
</view>
<view style="width: 300rpx;">
<view class="num1">5 million+</view>
<view class="titl">{{ $t("homeNewText.ee2") }}</view>
</view>
<view style="width: 300rpx;margin-top: 20px;">
<view class="num1">{{ '<0.10%' }}</view>
<view class="titl">{{ $t("homeNewText.ee3") }}</view>
</view>
<view style="width: 300rpx;margin-top: 20px;">
<view class="num1">200+</view>
<view class="titl">{{ $t("homeNewText.ee4") }}</view>
</view>
</view>
<div style="text-align: center;min-width: 220px;margin-top: 30px;">
<view v-if="!isLogin" class="jump_btn2" @click="goReg" style="border: 3px solid #fff;">
{{ $t("homeNewText.a27") }}
</view>
<view v-else class="jump_btn2" @click="goExchange" style="border: 3px solid #fff;">
{{ $t("homeNewText.aa4") }}
</view>
</div>
</view>
</view>
<!-- <view class="reserve-box">
<view>
<view style="font-size: 24rpx;color:rgba(155, 155, 155, 1);">{{$t('base.f7')}}</view>
<view class="content-bottom">{{$t('base.f8')}}</view>
</view>
<img style="width: 176rpx;height: 112rpx;" src="@/assets/img/home/monyeImg.png" alt="">
</view>
<view class="Bitcoin">
<view class="Bitcoin-box">
<view class="btc-one mg-b10">
<view class="col-fff btc-in-box"><image src="@/assets/img/home/bitebi.png" mode="widthFix" style="width: 25rpx;"></image></view>
<view style="margin-left: 10rpx;color: #929292;">{{$t('base.f9')}}</view>
</view>
<view class="btc-two mg-b10 col-fff">{{$t('base.g0')}}</view>
<view class="btc-three mg-b10 col-fff">2018/10/01 - 2023/11/02</view>
</view>
</view>
<view class="bottom_tag">
<view class="bottom_box">
<view class="">
<view class="col-fff app-box">JEDcoin APP</view>
<view class="col-fff content-box">{{$t('base.g1')}}</view>
</view>
<view class="col-fff btn" @click="goLogin">
{{$t('base.g2')}}
</view>
</view>
<image src="@/assets/img/home/bottomImg.png" mode="aspectFit" style="width: 284rpx;height: 284rpx;"></image>
</view> -->
</view>
<!-- 资产 -->
<view class="top-tiel" v-if="0">
<view style="border-bottom: 1px solid #000;">
<view style="margin: 20px 10px 10px; 10px">
<view class="d-flex p-t-md w-max">
<text class="fn-16 color-default d-block col-fff">{{ $t("base.d6") }}(BTC)</text>
<view class="fn-18 m-l-md d-flex" @click="setHide(!hideMoney)">
<van-icon v-if="!hideMoney" name="eye-o" />
<van-icon v-else name="closed-eye" />
</view>
</view>
<view class="text_figure col-fff">{{filterMoney(account.total_assets_btc, true)}}</view>
<view style="color: #6FB58A;">≈{{ filterMoney(account.total_assets_usd, false) }} USDT
</view>
<view style="display: flex;justify-content: space-around;">
<v-link tag="view" to="/pages/assets/recharge">
<view class="button_Goldcoin">
<image src="@/assets/img/home/Goldcoin.png" mode="widthFix"
style="width: 40rpx;"></image>{{$t("base.b5")}}
</view>
</v-link>
<v-link tag="view">
<view class="button_Goldcoin" @click="goExchange">
<image src="@/assets/img/home/Lendmoney.png" mode="widthFix"
style="width: 40rpx;"></image>{{$t("base.f1")}}
</view>
</v-link>
</view>
</view>
</view>
<view class="view_currency">
<view style="margin: 0px 10px 10px; 10px">
<view class="view_once">
<view>{{$t("base.f0")}}</view>
<view @click="goMine">{{$t("base.f2")}}
<image src="@/assets/img/home/arrow-right.png" mode="widthFix"></image>
</view>
</view>
</view>
<image src="@/assets/img/home/Copy.png" mode="aspectFit"></image>
</view>
</view>
<view class="head_info m-y-md " v-if="0">
<view class="currency">{{$t("base.f3")}}</view>
<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>
<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="fn-center w-max">
<view
class="m-b-md m-x-md rounded-xs box-shadow link-active d-flex justify-between align-center p-y-xs box-size p-x-xs">
<view class="fn-left w-5/12">{{ $t("homeNewText.aa7") }}</view>
<view class="fn-right w-4/12">{{ $t("homeNewText.bb1") }}</view>
<view class="fn-right w-3/12 positions">{{ $t("homeNewText.bb2") }}</view>
</view>
<v-link :to="{
path: '/pages/exchange/index',
query: { code: item.pair_name },
}" class="m-b-md m-x-md rounded-xs box-shadow link-active d-flex justify-between align-center p-y-xs box-size p-x-xs"
v-for="item in parentItem.collect
? collect.slice(0,5)
: parentItem.marketInfoList.slice(0,5)" :key="item.pair_name">
<view class="fn-left w-5/12">
<view class="d-flex align-center">
<image :src="item.coin_icon" mode=""
style="width: 60rpx;height: 60rpx;margin-right: 12rpx;"></image>
<text
class="fn-bold fn-14 color-light col-fff">{{ item.coin_name }}</text>
<!-- <text class="fn-bold fn-14 color-light">{{ item.pair_name }}</text> -->
</view>
<view class="d-flex align-center fn-12 m-t-xs" v-if="0">
24H{{ $t("first.b3") }} {{ omitTo(item.vol, 0) }}
</view>
</view>
<view class="fn-right w-4/12 color-light usd-close">{{ item.close }}</view>
<view class="fn-right w-3/12">
<span class="fn-bold rounded-xs fn-16" :class="
item.increase * 1 > 0 ? 'color-buys' : 'color-red'">{{ item.increaseStr }}</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 class="announcement">
<view class="text">{{$t("notice.a2")}}</view>
<v-link v-for="(item,index) in articleList" :key="item.id"
:to="{ path: '/pages/notice/detail', query: { id: item.id } }">
<view class="notification">
<view class="notification_text">{{item.title}}</view>
<view class="notification_time">{{item.created_at}}</view>
</view>
</v-link>
</view>
</view>
</van-tab>
</van-tabs>
</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="background-color: #121212;height: 100vh;">
<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 style="color: white;margin-left: 20px;">
BTCoinmt
</view>
<view>
<span class="color-light">
<v-lang @change="marketList = [];
indexData();getHelpList();"></v-lang>
<i class="iconfont m-l-xs fn-sm">&#xe6e9;</i>
</span>
</view>
</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)">&#xe706;</i>
#endif
#ifndef H5
<i class="iconfont m-l-lg" @click="$copy(user.user_id+'')">&#xe706;</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">
{{ $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="detail.status!=2?'/pages/auth/index':''" tag="div" v-if="false"
class="p-xs m-xs color-theme-1 d-flex justify-between align-center"
style="background-color: #212121;">
<view class="d-flex align-center">
<van-icon name="manager" class="col-fff" />
<text class="p-l-md col-fff">{{$t('auth.a1')}}</text>
</view>
<text class="bg-theme color-white p-x-xs p-y-xxs rounded"
v-if="detail.status!=2">{{$t('first.a0')}}</text>
<text class="bg-theme-1 color-white p-x-xs p-y-xxs rounded" v-else>{{$t('auth.a3')}}</text>
</v-link>
<v-link class=" p-xs m-xs d-flex justify-between align-center"
:to="detail.status!=2?'/pages/auth/index':''" v-if="isLogin">
<view style="display: flex;">
<image src="@/assets/img/home/login.png" mode="aspectFit" class="logine"></image>
<image src="@/assets/img/home/Havelogged.png" mode="aspectFit" class="havelogg"></image>
<view style="margin-left: 26rpx;">
<view class="color-light username">{{username}}</view>
<view class="border_authentication" v-if="detail.status===2">
{{$t('auth.a4')}},{{$t('auth.a3')}}
</view>
<view class="border_authentication" v-else-if="detail.primary_status===1">
{{$t("base.f6")}}<!-- {{detail.primary_status_text}} -->
</view>
<view class="border_authentication" v-else>
{{$t('first.a0')}}
</view>
</view>
</view>
<van-icon name="arrow" class="fn-18" />
</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('Page1.png')" alt="" class="m-r-xs h-17">
<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('Page3.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('Page4.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('Page5.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('Page10.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> -->
<!-- <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('Page7.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> -->
<!-- <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">&#xe6e9;</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">
<text class="w-max rounded-lg border-0">{{ $t("accountSettings.a9") }}</text>
</view> -->
</view>
<view class="Feature">
{{$t("base.f5")}}
</view>
<view class="manage">
<view class="manage_text" @click="goMine()">
<img src="@/static/img/pages1.png">
<!-- $localImgUrl('pages1.png') -->
<view class="color-light">{{ $t("base.c1") }}</view>
</view>
<v-link :to="isLogin?'/pages/safe/index':'/pages/login/index'" tag="div" class="manage_text">
<img src="@/static/img/pages2.png">
<view class="color-light">{{ $t("base.c3") }}</view>
</v-link>
<v-link :to="isLogin?'/pages/notice/index':'/pages/login/index'" tag="div" class="manage_text">
<img src="@/static/img/pages3.png">
<view class="color-light">{{ $t("base.c4") }}</view>
</v-link>
<v-link :to="isLogin?'/pages/assets/address-list':'/pages/login/index'" tag="div"
class="manage_text">
<img src="@/static/img/pages4.png">
<view class="color-light">{{ $t("base.c5") }}</view>
</v-link>
<v-link :to="'/pages/service/service?id=33&type=0'" tag="div" class="manage_text">
<img src="@/static/img/pages5.png">
<view class="color-light">{{ $t("first.a1") }}</view>
</v-link>
<v-link :to="isLogin?'/pages/accountSettings/accountSettings':'/pages/login/index'" tag="div"
class="manage_text">
<img src="@/static/img/pages6.png">
<view class="color-light">{{ $t("base.c6") }}</view>
</v-link>
</view>
<view class="h-100"></view>
<view v-if="isLogin" class="Logout_color logout w-max fn-center color-light rounded-xs"
@click="loginOut">
<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 College from "@/api/college";
import app from "@/app";
import Profile from "@/api/profile";
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,
helpList: [],
account: {},
articleList: [], //公告数据
MarketList: []
};
},
computed: {
...mapState({
ws: "ws",
ws1: "ws1",
user: "user",
wsState: "wsState",
logoMap: "logoMap",
theme: "theme",
hideMoney: "hideMoney",
}),
isLogin() {
return Boolean(uni.getStorageSync("token"));
},
// 获取用户登录后的名字
username() {
const name = uni.getStorageSync("_user_login")
const username = name.data.user.username
return username
}
},
watch: {
isShow(n) {
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')
},
goLogin() {
uni.navigateTo({
url: '/pages/login/index'
})
},
goReg() {
uni.navigateTo({
url: '/pages/reg/index'
})
},
toNotice(item) {
uni.navigateTo({
url: '/pages/notice/detail?id=' + item.id
})
},
...mapActions({
setTheme: "setTheme",
setHide: "hideMoney"
}),
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);
});
},
getMarketList() {
College.getArticleList({id: 32}).then((res) => {
// console.log(res,'00000000000000000');
this.MarketList = res.data;
}).catch();
},
// 获取汇率
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;
},
Goatonce() {
this._router.push({
path: "pages/base/index.vue"
})
// uni.navigateTo({
// url:"pages/base/index.vue"
// })
},
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.articleList = res.data.articleList
// 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)
})
}
});
},
// 获取用户资产
personalAssets() {
Wallet.personalAssets().then((res) => {
this.account = res.data;
}).catch(() => {});
},
filterMoney(val, type) {
if (this.hideMoney) return "******";
if (type) {
return this.omitTo(val, 8);
} else {
return this.omitTo(val, 2);
}
},
// 创建充币地址
createWalletAddress() {
Wallet.createWalletAddress()
.then((res) => {})
.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();
})
.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
})
},
toDwon() {
// #ifdef APP
// plus.
// #endif
// #ifdef H5
window.open('https://app.ajcoins.com/download/index.html', '_blank') // 打开一个新标签
// #endif
}
},
mounted() {
this.onRefresh();
this.indexData();
this.indexMarketList();
this.getCurrencyExCny();
this.getHelpList();
this.getMarketList()
if (this.isLogin) {
this.createWalletAddress();
this.getAuthInfo()
this.personalAssets();
}
},
destroyed() {},
};
</script>
<style lang="scss" scoped>
// .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;
}
}
.bg-theme {
background-color: #26A24F;
}
.Logout_color {
background-color: #212121;
height: 80rpx;
line-height: 80rpx;
}
.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;
}
}
}
}
.currency {
color: white;
font-size: 36rpx;
// font-weight: bold;
// margin-left: 14px;
}
.usd-close {
color: white;
font-weight: bold;
}
.user-icon {
font-size: 50px;
}
.epss-1 {
overflow: hidden;
text-overflow: ellipsis;
}
.lists {
display: flex;
.lists-1 {
margin: 0 5px;
}
}
.bord_box {
border-right: 1px solid #373737;
padding-right: 120rpx;
}
.bord_box :last-child {
border-right: 0px;
}
.logout {
width: 80%;
margin: 0 auto;
::v-deep .van-button--default {
border: none;
background-color: $panel-3;
}
}
.goLogin {
padding: 5px 15px;
// border: 1px solid $theme-1;
color: #fff;
border: 1px solid #fff;
}
.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;
}
.color-buys {
color: white;
font-weight: inherit;
font-size: 25rpx;
background-color: #31BF66;
width: 120rpx;
text-align: center;
line-height: 52rpx;
height: 52rpx;
display: inline-block;
}
.color-red {
color: white;
font-weight: inherit;
font-size: 25rpx;
background-color: #CF6A57;
width: 120rpx;
text-align: center;
line-height: 52rpx;
height: 52rpx;
display: inline-block;
}
.illustration_area {
background-color: #0d0d0d;
padding-bottom: 60rpx;
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid #000000;
.title {
font-size: 23px;
font-weight: bold;
margin-bottom: 40rpx;
color: #fff;
position: relative;
padding: 0px 60rpx;
}
.border-b2 {
position: absolute;
background-color: #B6FF34;
width: 151px;
height: 6px;
right: 60rpx;
bottom: -5px;
}
// .titleButborder {
// position: absolute;
// left: 425rpx;
// top: 750rpx;
// width: 140px;
// height: 6px;
// line-height: 20px;
// background-color: rgba(182, 255, 52, 1);
// text-align: center;
// }
}
.Feature {
color: rgba(255, 255, 255, 1);
font-size: 16px;
padding-top: 30px;
border-top: 1px solid #000000;
padding-left: 28rpx;
margin-bottom: 30px;
font-weight: bold;
}
.manage {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
.manage_text {
text-align: center;
height: 170rpx;
width: calc(33.33% - 10px);
img {
width: 50rpx;
height: 50rpx;
}
}
}
.username {
font-size: 18px;
font-weight: bold;
margin-bottom: 3px;
}
.border_authentication {
border: 1px solid #26A24F;
text-align: center;
font-size: 25rpx;
min-width: 200rpx;
border-radius: 5px;
color: #26A24F;
padding: 0px 5px;
}
.logine {
// background: url('@/assets/img/home/Havelogged.png');
width: 96rpx;
height: 96rpx;
}
.havelogg {
position: relative;
left: -35rpx;
top: 60rpx;
border: 1px solid #000000;
background-color: #000000;
border-radius: 50%;
width: 28rpx;
height: 29rpx;
}
.top-tiel {
// margin: 60rpx 20rpx 20rpx 20rpx;
.topBTC {
position: relative;
image {
position: absolute;
top: 2px;
}
}
.text_figure {
margin: 5px 0px;
font-size: 50rpx;
font-weight: bold;
}
.button_Goldcoin {
margin: 10px 0px 20px 0px;
width: 340rpx;
border-radius: 25px;
background-color: #242424;
color: white;
font-weight: bold;
font-size: 25rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
image {
position: relative;
top: 10rpx;
margin-right: 10px;
}
}
.view_currency {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
padding-bottom: 10px;
border-bottom: 5px solid #000000;
image {
width: 164rpx;
height: 164rpx;
margin-right: 10px;
}
.view_once {
line-height: 40px;
color: white;
font-weight: bold;
font-size: 28rpx;
image {
margin-left: 5px;
width: 35rpx;
position: relative;
top: 8rpx;
}
}
}
}
.reserve-box {
background-color: #0D0D0D;
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 28rpx;
border-bottom: 3px solid #000000;
.content-bottom {
color: #ffffff;
font-size: 28rpx;
font-weight: bold;
margin: 10rpx 40rpx 0 0;
line-height: 55rpx;
}
}
.Bitcoin {
background-color: #0D0D0D;
border-bottom: 3px solid #000000;
.Bitcoin-box {
height: 480rpx;
margin-top: 88rpx;
padding-left: 28rpx;
// margin: 43rpx 28rpx 0 28rpx;
background: url('@/assets/img/home/uEchartsImg.png') no-repeat 0px 70px;
background-size: 750rpx;
.btc-one {
display: flex;
align-items: center;
}
.mg-b10 {
margin-bottom: 10rpx;
}
.btc-two {
font-size: 38rpx;
font-weight: bold;
}
.btc-in-box {
background-color: #EB9738;
padding: 5rpx 10rpx;
border-radius: 50%;
position: relative;
}
.btc-three {
font-size: 24rpx;
}
}
}
.col-fff {
color: #ffffff;
}
.bottom_tag {
display: flex;
justify-content: space-between;
padding: 28rpx 22rpx 28rpx 30rpx;
.bottom_box {
display: flex;
flex-direction: column;
justify-content: space-between;
.btn {
border: 1px solid white;
line-height: 68rpx;
text-align: center;
min-width: 232rpx;
height: 68rpx;
border-radius: 60rpx;
}
}
.app-box {
font-size: 48rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.content-box {
font-size: 48rpx;
font-weight: bold;
}
}
.announcement {
border-top: 5px solid #000000;
padding-top: 50rpx;
.text {
font-weight: bold;
color: white;
padding-left: 14px;
padding-bottom: 20px;
font-size: 18px;
border-bottom: 1px solid #000000;
}
.notification {
margin: 20px;
line-height: 25px;
.notification_text {
font-size: 24rpx;
color: white;
font-weight: bold;
font-size: 30rpx;
}
.notification_time {
font-size: 24rpx;
color: rgba(146, 146, 146, 1);
}
}
}
.jump_btn {
min-width: 300rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
margin: 0px auto 0px;
background-color: #D0712F;
border-radius: 10px;
font-size: 14px;
color: #fff;
}
.jump_btn_one {
min-width: 660rpx;
height: 100rpx;
background-color: #2d58de;
color: #fff;
border-radius: 20rpx;
margin: 0 auto 0;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
}
.now_area {
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx 0px 100rpx;
text-align: center;
color: #fff;
font-size: 24px;
font-weight: bold;
}
.card_area {
.card_item {
width: 640rpx;
min-height: 642rpx;
border-radius: 10px;
box-sizing: border-box;
padding: 40rpx 70rpx;
margin: 0px auto 40rpx;
background-color: #1B1B1B;
}
img {
width: 360rpx;
height: 360rpx;
margin: 0px 70rpx 50rpx;
}
}
.download_area {
width: 750rpx;
height: 1400rpx;
margin: -160rpx auto -30rpx;
padding: 200rpx 0px 0px;
box-sizing: border-box;
background-image: url("../../assets/img/home/radial_bg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 30%;
.zhanshi {
width: 700rpx;
height: 470rpx;
background-image: url("../../assets/img/home/aj.png");
background-size: cover;
margin: 40rpx auto;
}
.btn {
width: 700rpx;
height: 88rpx;
color: #fff;
background-color: #D0712F;
border-radius: 5px;
font-size: 16px;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0px 25rpx 40rpx;
image {
width: 56rpx;
height: 56rpx;
margin-right: 20rpx;
}
}
}
.five_million {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: #0D0D0D;
padding: 60rpx 24rpx;
.f_item {
width: 45%;
margin: 40rpx 30rpx 0px 0px;
.txt1 {
font-size: 28px;
font-weight: bold;
color: #fff;
}
.txt2 {
font-size: 14px;
color: #999;
margin-top: 16rpx;
}
}
}
.introduce_area {
width: 700rpx;
margin: 0px auto;
.zhanshi {
width: 384rpx;
height: 498rpx;
background-image: url("../../assets/img/home/stt.png");
background-size: 100% 100%;
margin: 0px auto;
}
.item {
width: 700rpx;
min-height: 220rpx;
font-size: 12px;
display: inline-flex;
justify-content: space-between;
// align-items: center;
margin-top: 40rpx;
color: #707275;
.img {
width: 80rpx;
height: 80rpx;
background-image: url("../../assets/img/home/7.png");
background-size: contain;
margin-right: 20rpx;
}
image {
width: 40rpx;
height: 40rpx;
margin: 20rpx;
}
}
}
.help_area {
width: 700rpx;
background-color: #312B3B;
border-radius: 10px;
padding: 20rpx 30rpx;
box-sizing: border-box;
.help_item {
height: 128rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #282828;
color: #fff;
font-size: 16px;
}
.help_item:nth-last-child(1) {
border-bottom: none;
}
.arrow {
width: 24px;
height: 24px;
background-image: url("../../assets/img/home/fas fa-angle-right@3x.png");
background-size: cover;
}
}
.text_1{
border: 1px solid #393939;padding: 50rpx 20rpx 50rpx 50rpx;border-radius: 10px;width: 560rpx;
margin-top: 50rpx;
.text_2{
font-weight: bold;font-size: 40rpx;margin-top: 40rpx;color: white;
}
.text_3{
color: #fff;margin-top: 20rpx;font-size: 26rpx;text-align: center;
}
}
.jump_btn1{
margin-top: 40rpx;
display: inline-block;
min-width: 240rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
color: #fff;
background-color: #2d58de;
border-radius: 10px;
font-size: 30rpx;
padding: 0px 40rpx;
box-sizing: border-box;
}
.num1 {
color: white;
font-size: 35rpx;
font-weight: bold;
}
.jump_btn2{
display: inline-block;
min-width: 300rpx;
height: 50px;
line-height: 45px;
text-align: center;
color: #fff;
background-color: #000;
border-radius: 35px;
font-size: 20px;
padding: 0px 20px;
box-sizing: border-box;
}
.titl{
margin-top: 5px;
font-size: 25rpx;
}
.item .banner{
// width: 310px;
height: 354rpx;
margin-bottom: 35px;
// overflow: hidden;
}
.item .txt{
padding: 0px 0px 0px 0px;
font-size: 22px;
color: #fff;
margin-bottom: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
// height: 66px;
}
.item .txt2{
padding: 0px 0px 0px 0px;
font-size: 16px;
color: #929292;
margin-bottom: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.store_view{
display: flex;width: 100%;border:1px solid #a9a9a9;height: 100rpx;
align-items: center;justify-content: center;margin-top: 40rpx;border-radius: 30px;
}
.store_view1{
display: flex;width: 100%;border:1px solid #a9a9a9;height: 100rpx;
align-items: center;justify-content: center;margin-top: 40rpx;border-radius: 30px;
}
.walkinto_view{
margin-top: 40px;display: flex;flex-wrap: wrap;justify-content: center;
.walkinto_img{
width: 668rpx;height: 354rpx;margin-bottom: 30px;justify-content: center;border-radius: 20rpx;
}
}
</style>