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.
 
 
 

2228 lines
58 KiB

<template>
<view class="d-flex flex-col" style="background-color: #000;">
<!-- 头部 -->
<v-header class="nav-tab" :left-arrow="false" style="background-color: #141414;" :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>
<span class="circle-pulse" v-if="newscount!==0"></span>
</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 class="overlay" v-if="visible">
<view class="modal" @click.stop>
<view class="">
<view class="close-button" @click="close1">×</view>
</view>
<view>
<text class="modal-content">
Dear user, hello!
Warmly congratulate the rapid increase in platform users. In order to better provide the best services to users in each region, we will implement a server management mechanism that is separated by region to ensure that each service can be fully implemented. To this end, we will start a new round of server transformation and upgrade projects. The transformation time will be completed within three hours, and we will provide you with a safer and more efficient service. Special reminder, during the server upgrade and transformation process, users in some regions may be affected when logging in to the platform using the original domain name, and we have activated the emergency response plan. If you have problems logging in using PC or H5, you can contact the customer service representative in time for help and complete the transaction.
We apologize for the inconvenience caused to you and thank all users for their support!</text>
</view>
</view>
</view>
<!-- 加密货币之门 -->
<view class="illustration_area" >
<view class="text-img">
<view class="text-img1">
<image src="@/assets/img/home/home1.svg" mode="widthFix" style="width: 640rpx;"></image>
</view>
</view>
<view class="title" style="margin-top: 40rpx;">{{$t("homeNewText.bb4")}}</view>
<view class="title_box">{{$t("homeNewText.bb5")}}</view>
<view v-if="!isLogin" class="jump_btn_one" @click="goReg">
{{ $t("homeNewText.bb6") }}
</view>
<view v-else class="jump_btn" @click="goExchange">
{{ $t("homeNewText.aa4") }}
</view>
</view>
<view class="" style="">
<view class="index_partners__3BIDL">
<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" v-if="index==1" :key="parentItem.coin_name">
<view style="width: 400rpx;color: #fff;font-weight: bold;"
v-for="(item,iindex) in parentItem.collect? collect : parentItem.marketInfoList" :key="iindex">
<view class="d-flex">
<view class="symbol" style="margin-right: 10rpx">{{ item.pair_name }}</view>
<view class="d-flex">
<span :class="item.increase >= 0 ? 'increace' : 'decreace'">
({{ item.increaseStr }})
</span>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 探索无限可能 -->
<view class="currency" style="margin-top: 100rpx;text-align: center;">{{$t("homeNewText.bb7")}}</view>
<view class="currency currency_text">{{$t("homeNewText.bb8",{name:'BTCMax'})}}</view>
<view class="Crossbar"></view>
<view class="reserve-box">
<view style="text-align: center;margin-top: 25px;"><image src="@/assets/img/home/home2.png" mode=""></image></view>
<view style="margin-top: 40rpx;">
<view class="d-flex reserve-box1">
<image src="@/assets/img/home/eyes.svg" mode="widthFix" style="width: 24px;">
<view style="margin-left: 5px;color: #fff;">{{$t("homeNewText.bb9")}}</view>
</view>
<view style="color: #fff;">{{$t("homeNewText.bb10")}}</view>
</view>
<view style="margin-top: 60rpx;">
<view class="d-flex reserve-box1">
<image src="@/assets/img/home/dunpai.svg" mode="widthFix" style="width: 24px;">
<view style="margin-left: 5px;color: #fff;">{{$t("homeNewText.bb11")}}</view>
</view>
<view style="color: #fff;">{{$t("homeNewText.bb12")}}</view>
</view>
<view style="margin-top: 60rpx;">
<view class="d-flex reserve-box1">
<image src="@/assets/img/home/shanguang.svg" mode="widthFix" style="width: 24px;">
<view style="margin-left: 5px;color: #fff;">{{$t("homeNewText.bb13")}}</view>
</view>
<view style="color: #fff;">{{$t("homeNewText.bb14")}}</view>
</view>
</view>
<!-- -->
<view class="reserve-box" style="margin-top: 100rpx;">
<view class="reserve-text1" style="font-size: 28px;margin-bottom: 20rpx;text-align: center;color: #fff;">{{ $t("homeNewText.bb15") }}</view>
<view class="reserve-text1" style="font-size: 28rpx;text-align: center;color: #fff;">{{ $t("homeNewText.bb16") }}</view>
<view class="Crossbar"></view>
<view class="platform_text">
<view class="platform_text1">
<image src="@/assets/img/home/home3.png" mode="widthFix" style="width: 58px;"></image>
</view>
<view class="platform_text2">{{ $t("homeNewText.bb17") }}</view>
<view class="platform_text3">{{ $t("homeNewText.bb18") }}</view>
</view>
<view class="platform_text">
<view class="platform_text1" style="margin-top: 100rpx;">
<image src="@/assets/img/home/home4.png" mode="widthFix" style="width: 58px;">
</view>
<view class="platform_text2">{{ $t("homeNewText.bb19") }}</view>
<view class="platform_text3">{{ $t("homeNewText.bb20") }}</view>
</view>
<view class="platform_text">
<view class="platform_text1" style="margin-top: 100rpx;">
<image src="@/assets/img/home/home5.png" mode="widthFix" style="width: 58px;">
</view>
<view class="platform_text2">{{ $t("homeNewText.bb21") }}</view>
<view class="platform_text3">{{ $t("homeNewText.bb22",{name:'BTCMax'}) }}</view>
</view>
</view>
<!-- <view v-if="!isLogin" class="jump_btn1" @click="goReg" style="margin-top: 60rpx;">
{{ $t("homeNewText.bb27") }}
</view>
<view v-else class="jump_btn1" @click="goExchange" style="margin-top: 60rpx;">
{{ $t("homeNewText.bb27") }}
</view> -->
<!-- 轻松玩赚数字货币. -->
<view class="currency" style="margin-top: 100rpx;text-align: center;">{{$t("homeNewText.bb23")}}</view>
<view class="currency currency_text1">{{$t("homeNewText.bb24")}}</view>
<view class="Crossbar"></view>
<view style="padding: 0px 40rpx;">
<view class="positionBox_box2">
<view class="positionBox_box3">
<img src="@/assets/img/home/home6.png" alt="" style="width: 670rpx;height: 400rpx;" />
</view>
</view>
<!-- <view class="positionBox_text">
<view style="">
<image src="@/assets/img/home/btcex.png" mode="widthFix" style="width: 150px;"></image>
</view>
</view> -->
<view class="positionBox_text1">{{$t("homeNewText.bb25",{name:'BTCMax'})}}</view>
<view class="positionBox_text2">{{$t("homeNewText.bb26")}}</view>
<!-- <view style="text-align: center;margin-top: 20rpx;">{{$t("homeNewText.bb27")}}</view> -->
<!-- <view class="d-flex justify-between">
<a href="https://app.btcaholic.com/download/BTCEX.html" style="display: block;width: 140px;text-decoration: none;">
<view class="store_view">
<image src="@/assets/img/home/antFill-apple@2x.png" mode=""
style="width: 48rpx;height: 48rpx;border: 1px solid #fff;border-radius: 40px;padding: 5px;"></image>
<view style="color: #fff;">APP Store</view>
</view>
</a>
<a href="https://app.btcaholic.com/download/BTCEX.html" style="display: block;width: 140px;text-decoration: none;">
<view class="store_view">
<image src="@/assets/img/home/md-android@2x.png" mode=""
style="width: 48rpx;height: 48rpx;border: 1px solid #fff;border-radius: 40px;padding: 5px;"></image>
<view style="color: #fff;">Android</view>
</view>
</a>
</view> -->
</view>
<view class="img_box">
<view>{{$t("homeNewText.bb33",{name:'BTCMax'})}}</view>
</view>
<!-- 立即開始您的加密之旅! -->
<view class="Journey_box">
<view class="starrysky_box">
<view style="text-align: center;font-size: 24px;color: #fff;">{{$t("homeNewText.bb34")}}</view>
<view style="display: flex;justify-content: space-between;">
<view class="starrysky_btn1" @click="goLogin" style="margin-top: 60rpx;">
{{ $t("login.a4") }}
</view>
<view class="starrysky_btn2" @click="goReg" style="margin-top: 60rpx;">
{{ $t("reg.b9") }}
</view>
</view>
</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;">
BTCMax
</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"> -->
<v-link class=" p-xs m-xs d-flex justify-between align-center" 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;display: flex;align-items: center;">
<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>
<!-- customer service -->
<v-link :to="isLogin?'/pages/oncs/onservice':'/pages/login/index'" tag="div" class="manage_text" style="position: relative;">
<img src="@/static/img/cs_w.svg">
<span class="circle-pulse1" v-if="newscount!==0">{{newscount>=100?'99+':newscount}}</span>
<view class="color-light">{{$t('common.service')}}</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 {
newscount:0,
chatcount:null,
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:[],//公告数据
visible: false
};
},
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) {
// this.visible = true;
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')
},
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);
});
},
// 获取汇率
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();
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
})
},
toDwon() {
// #ifdef APP
// plus.
// #endif
// #ifdef H5
window.open('https://app.ajcoins.com/download/index.html', '_blank') // 打开一个新标签
// #endif
},
chat(){
Home.chat().then(res => {
if(res.code==200){
this.newscount = res.data.count;
}else{
console.log('1111');
clearInterval(this.chatcount);
}
})
},
close1() {
this.visible = false;
}
},
mounted() {
this.onRefresh();
this.indexData();
this.indexMarketList();
this.getCurrencyExCny();
this.getHelpList();
// this.visible = true;
if (this.isLogin) {
this.chatcount = setInterval(()=>{
this.chat()
},2000)
this.createWalletAddress();
this.getAuthInfo()
this.personalAssets();
}
},
created() {
if(uni.getStorageSync('show')){
this.personalCenter()
uni.removeStorageSync('show');
}
},
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;
}
}
.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: 56rpx;
font-weight: bold;
margin-left: 14px;
font-weight: bold;
margin: 0px 40rpx;
text-align: left;
}
.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;
}
}
.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;
}
.color-buys1{
width: 120rpx;
color: #4EAA97;
font-size: 16px;
}
.color-red1{
width: 120rpx;
color: #CF6A57;
font-size: 16px;
}
.illustration_area {
background-color: #0d0d0d;
padding-bottom: 60rpx;
display: flex;
flex-direction: column;
align-items: center;
// border-bottom: 1px solid #000000;
.text-img{
width: 640rpx;
height: 454rpx;
position: relative;
padding-top: 40rpx;
}
.text-img1{
width: 640rpx;
height: 454rpx;
position: absolute;
bottom: 20px;
animation: movepoint 1.3s ease-in-out infinite alternate;
}
@keyframes movepoint{
from {transform:translate(0,0px)}
to {transform:translate(0,-20px)}/* 下浮高度 */
}
.title {
font-size: 46rpx;
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;
}
.title_box{
margin-bottom: 70rpx;
padding: 0px 60rpx;
color: white;
font-size: 32rpx;
}
// .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: 60rpx;
border-top: 1px solid #000000;
padding-left: 28rpx;
margin-bottom: 60rpx;
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;
}
.currency_box1{
font-size: 48rpx;
margin-top: 60rpx;
}
.currency_box2{
font-size: 28rpx;
margin-top: 20rpx;
}
.col-fff{
color: #ffffff;
}
.announcement{
border-top: 5px solid #000000;
padding-top: 50rpx;
.text{
font-weight: bold;
color:white;
padding-left: 28rpx;
padding-bottom: 40rpx;
font-size: 18px;
border-bottom: 1px solid #000000;
}
.notification{
margin: 40rpx;
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: 386rpx;
height: 88rpx;
line-height: 88rpx;
text-align: center;
margin: 0px auto 0px;
background-color: #0F4DF5;
border-radius: 20rpx;
font-size: 28rpx;
color: #fff;
}
.jump_btn1{
// margin-top: 20rpx;
display: inline-block;
min-width: 240rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
background-color: #0F4DF5;
border-radius: 10px;
font-size: 30rpx;
padding: 0px 40rpx;
box-sizing: border-box;
font-weight: bold;
}
.jump_btn_one {
min-width: 386rpx;
height: 88rpx;
background-color: #0F4DF5;
color: #fff;
border-radius: 20rpx;
margin: 0 auto 0;
line-height: 88rpx;
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: 48rpx;
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: 28rpx;
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: 24rpx;
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: 20rpx;
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: 48rpx;
height: 48rpx;
background-image: url("../../assets/img/home/fas fa-angle-right@3x.png");
background-size: cover;
}
}
.index_partners__3BIDL{
width: 100vw;
overflow: hidden;
padding: 16px 0;
margin-bottom: 10px;
// background: #fff;
background-image: url("../../assets/img/home/bg_1.png");
background-size: 100% 100%;
.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 100s 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
}
}
}
}
}
@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-75%);
}
}
}
}
.store_view{
display: flex;
width: 100%;
border:1px solid #a9a9a9;
height: 100rpx;
align-items: center;
justify-content: space-around;
margin-top: 40rpx;
border-radius: 60rpx;
background-color: #3269EB;
}
.Journey_text{
width: 580rpx;
margin: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
.Journey_text1{
text-align: center;
color: #fff;
font-size: 56rpx;
font-weight: bold;
}
.Journey_text2{
text-align: center;
color: #fff;
font-size: 28rpx;
margin-top: 60rpx;
}
}
.jump_btn2{
width: 500rpx;
height: 100rpx;
background-color: #fff;
color: #000;
font-weight: bold;
border-radius: 100rpx;
margin: 0 auto 0;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
}
.positionBox_box2{
width: 670rpx;
height: 514rpx;
text-align: center;
// margin-top: 100rpx;
position: relative;
.positionBox_box3{
position: absolute;
bottom: 10px;
animation: boxImg 1.3s ease-in-out infinite alternate;
}
@keyframes boxImg{
from {transform:translate(0,0px) }
to {transform:translate(0,20px)}/* 下浮高度 */
}
}
.positionBox_text{
margin-top: 40rpx;
display: flex;
justify-content: center;
}
.positionBox_text1{
color: #fff;
text-align: center;
font-weight: bold;
margin-top: 20rpx;
}
.positionBox_text2{
color: #fff;
text-align: center;
margin-top: 20rpx;
}
.guide_box1{
margin-top: 40rpx;
}
.guide_box2{
font-size: 44rpx;
margin-top: 60rpx;
}
.guide_box3{
font-size: 28rpx;
margin-top: 20rpx;
margin-bottom: 40rpx;
}
.jump_btn2_1{
width: 500rpx;
height: 100rpx;
background-color: #2d58de;
color: #fff;
border-radius: 100rpx;
margin: 0 auto 0;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
}
.platform_text{
text-align: center;
.platform_text1{
margin-top: 40rpx;
font-size: 48rpx;
color: #4B75F8;
font-weight: bold;
}
.platform_text2{
margin-top: 40rpx;
margin-bottom: 20rpx;
font-size: 36rpx;
color: white;
}
.platform_text3{
font-size: 24rpx;
color: white;
}
}
.reserve-box{
padding: 0px 40rpx;
.reserve-box1{
font-size: 36rpx;
align-items: center;
margin-bottom: 20rpx;
}
}
.img_box{
// width: 100%;
color: #fff;
height: 120px;
display: flex;
padding: 0px 40rpx;
margin-top: 160rpx;
text-align: center;
align-items: center;
background-image: url('../../assets/img/home/home7.png');
background-repeat: no-repeat;
background-size: cover;
}
.Journey_box{
height: 500rpx;
display: flex;
padding: 0px 40rpx;
align-items: center;
.starrysky_box{
width: 750rpx;
}
.starrysky_btn1{
display: inline-block;
min-width: 300rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
background-color: #54A450;
border-radius: 80rpx;
font-size: 30rpx;
padding: 0px 40rpx;
box-sizing: border-box;
font-weight: bold;
}
.starrysky_btn2{
display: inline-block;
min-width: 300rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
background-color: #3269EB;
border-radius: 80rpx;
font-size: 30rpx;
padding: 0px 40rpx;
box-sizing: border-box;
font-weight: bold;
}
}
.Crossbar{
height: 12rpx;
width: 120rpx;
text-align: center;
border-radius: 80rpx;
margin: 32rpx auto 0rpx;
background-color: #3269EB;
}
.currency_text{
font-size: 28rpx;
text-align: center;
margin: 20rpx 40rpx 0rpx;
}
.currency_text1{
text-align: left;
font-size: 28rpx;
text-align: center;
margin: 20rpx 40rpx 0rpx;
}
.overlay {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5); /* 透明白色背景 */
justify-content: center;
align-items: center;
z-index: 1000; /* 确保在最上层 */
}
.modal {
background-color: white; /* 白色背景 */
padding: 40rpx;
border-radius: 16rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
// text-align: center;
width: 600rpx; /* 弹出框宽度 */
}
.modal-title {
font-size: 36rpx;
font-weight: bold;
}
.modal-content {
margin: 20rpx 0;
}
.close-button {
text-align: right;
font-size: 60rpx;
// padding: 10px 15px;
// margin-top: 10px;
cursor: pointer;
}
</style>