<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>
			</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" @scroll="handleScroll"
				scroll-y="true" style="height: 100%;">
				<!-- 轮播 -->
				<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="illustration_area" >
					<view class="text-img">
						<view class="text-img1">
							<image src="@/assets/img/home/home1.png" mode="widthFix" style="width: 640rpx;"></image>
						</view>
					</view>
					<view class="title" style="margin-top: 40rpx;text-align: center;">{{$t("homeNewText.bb4")}}</view>
					<view class="title" style="text-align: center;font-size: 28rpx;color: #B6B6B6;">{{$t("homeNewText.bb5")}}</view>
					<view v-if="!isLogin" class="jump_btn_one" @click="goReg">
						{{ $t("homeNewText.bb6") }}
					</view>
					<view v-else class="jump_btn_one" @click="goExchange">
						{{ $t("homeNewText.aa4") }}
					</view>
				</view>
				
				<view>
					<view class="index_partners__3BIDL" style="color: #fff;background-color: #A595FC;font-weight: bold;">
						<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;" v-for="(item,iindex) in parentItem.collect? collect : parentItem.marketInfoList" :key="iindex">
											<div class="d-flex" style="font-size: 32rpx;">
												<div class="symbol" style="margin-right: 10rpx">{{ item.pair_name }}</div>
												<div class="d-flex">
													<span :class="item.increase >= 0 ? 'increace' : 'decreace'">
														({{ item.increaseStr }})
													</span>
												</div>
											</div>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 市场趋势 -->
				<view style="margin-top: 200rpx;">
					<view style="font-size: 60rpx;color: #fff;padding: 0px 40rpx;font-weight: bold;">
						{{ $t("homeNewText.bb7") }} <text class="color_purple">{{ $t("homeNewText.bb8") }}</text>
					</view>
					<view 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 link-active d-flex justify-between align-center p-y-xs box-size p-x-xs" style="color: #fff;">
									<view class="fn-left w-5/12" style="font-size: 32rpx;">{{ $t("homeNewText.aa7") }}</view>
									<view class="fn-right w-4/12" style="font-size: 32rpx;">{{ $t("homeNewText.bb1") }}</view>
									<view class="fn-right w-3/12 positions" style="font-size: 32rpx;">{{ $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 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" style="font-size: 32rpx;">{{ 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" style="font-size: 32rpx;">
										{{ item.close }}
									</view>
									<view class="fn-right w-3/12">
										<span class="fn-bold rounded-xs fn-16" style="font-size: 32rpx;" :class="item.increase * 1 > 0 ? 'buys' : 'red'">{{ item.increaseStr }}</span>
									</view>
								</v-link>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 探索无限可能 -->
				<view class="title" style="margin-top: 200rpx;text-align: center;">
					{{ $t("homeNewText.bb9") }} <text class="color_purple">{{ $t("homeNewText.bb10") }}</text>
				</view>
				<view style="font-size: 28rpx;padding: 0px 40rpx;text-align: center;color: #fff;">{{$t("homeNewText.bb11")}}</view>
				<view class="reserve-box">
					<view class="Infinite_box">
						<view class="Infinite_box1">
							<view class="text-center"><image src="@/assets/img/home/home2.png" mode="widthFix" style="width: 308rpx;"></image></view>
							<view class="Infinite_box2">{{$t("homeNewText.bb12")}}</view>
							<view class="Infinite_box3">{{$t("homeNewText.bb13")}}</view>
						</view>
					</view>
					<view class="Infinite_box">
						<view class="Infinite_box1">
							<view class="text-center"><image src="@/assets/img/home/home3.png" style="width: 360rpx;height: 258rpx;"></image></view>
							<view class="Infinite_box2">{{$t("homeNewText.bb14")}}</view>
							<view class="Infinite_box3">{{$t("homeNewText.bb15")}}</view>
						</view>
					</view>
					<view class="Infinite_box">
						<view class="Infinite_box1">
							<view class="text-center"><image src="@/assets/img/home/home4.png" mode="widthFix" style="width: 194rpx;"></image></view>
							<view class="Infinite_box2">{{$t("homeNewText.bb16")}}</view>
							<view class="Infinite_box3">{{$t("homeNewText.bb17")}}</view>
						</view>
					</view>
					<view class="Infinite_box">
						<view class="Infinite_box1">
							<view class="text-center"><image src="@/assets/img/home/home5.png" mode="widthFix" style="width: 232rpx;"></image></view>
							<view class="Infinite_box2">{{$t("homeNewText.bb18")}}</view>
							<view class="Infinite_box3">{{$t("homeNewText.bb37")}}</view>
						</view>
					</view>
				</view>
				
				<view class="reserve-box" style="background-color: #191919;margin: 200rpx 0px 0px;padding: 100rpx 40rpx;">
					<view class="title" style="text-align: center;padding: 0px;">
						{{$t("homeNewText.bb19")}}<span class="color_purple">{{$t("homeNewText.bb20")}}</span>
					</view>
					<view class="text-center" style="color: #fff;font-size: 32rpx;">{{$t("homeNewText.bb21")}}</view>
					<view style="margin-top: 20px;">
						<view class="d-flex jc_mb">
							<view class="reserve-box1">
								<image src="@/assets/img/home/img2.png" mode="widthFix" style="width: 280rpx;"></image>
							</view>
							<view class="reserve-box1">
								<image src="@/assets/img/home/img3.png" mode="widthFix" style="width: 280rpx;"></image>
							</view>
						</view>
						<view class="d-flex jc_mb">
							<view class="reserve-box1">
								<image src="@/assets/img/home/img4.png" mode="widthFix" style="width: 280rpx;"></image>
							</view>
							<view class="reserve-box1">
								<image src="@/assets/img/home/img5.png" mode="widthFix" style="width: 280rpx;"></image>
							</view>
						</view>
						<view class="d-flex jc_mb">
							<view class="reserve-box1">
								<image src="@/assets/img/home/img6.png" mode="widthFix" style="width: 280rpx;"></image>
							</view>
							<view class="reserve-box1">
								<image src="@/assets/img/home/img11.png" mode="widthFix" style="width: 280rpx;"></image>
							</view>
						</view>
						<view class="d-flex jc_mb">
							<view class="reserve-box1">
								<image src="@/assets/img/home/img7.png" mode="widthFix" style="width: 280rpx;"></image>
							</view>
							<view class="reserve-box1">
								<image src="@/assets/img/home/img9.png" mode="widthFix" style="width: 280rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 新手指南 -->
				<view class="reserve-box" style="margin-top: 200rpx;">
					<view class="title text-center color_purple" style="padding: 0px;">{{ $t("homeNewText.bb22") }}</view>
					<view class="STEP_text">
						<view class="STEP_text1">
							<view class="STEP_text1_box">1</view>
						</view>
						<view class="STEP_text2">{{ $t("homeNewText.bb23",{name:'Moabcoin'}) }}</view>
						<view class="STEP_text3">{{ $t("homeNewText.bb24") }}</view>
						<view v-if="!isLogin" class="jump_btn1" @click="goReg" style="margin-top: 60rpx;">
							{{ $t("homeNewText.bb25") }}
						</view>
						<view v-else class="jump_btn1" @click="goMine" style="margin-top: 60rpx;">
							{{ $t("homeNewText.bb25") }}
						</view>
					</view>
					<view class="STEP_text">
						<view class="STEP_text1">
							<view class="STEP_text1_box">2</view>
						</view>
						<view class="STEP_text2">{{ $t("homeNewText.bb26") }}</view>
						<view class="STEP_text3">{{ $t("homeNewText.bb27") }}</view>
						<view v-if="!isLogin" class="jump_btn1" @click="goReg" style="margin-top: 60rpx;">
							{{ $t("homeNewText.bb28") }}
						</view>
						<view v-else class="jump_btn1" @click="goMine" style="margin-top: 60rpx;">
							{{ $t("homeNewText.bb28") }}
						</view>
					</view>
					<view class="STEP_text">
						<view class="STEP_text1">
							<view class="STEP_text1_box">3</view>
						</view>
						<view class="STEP_text2">{{ $t("homeNewText.bb29") }}</view>
						<view class="STEP_text3">{{ $t("homeNewText.bb30") }}</view>
						<view v-if="!isLogin" class="jump_btn1" @click="goReg" style="margin-top: 60rpx;">
							{{ $t("homeNewText.bb31") }}
						</view>
						<view v-else class="jump_btn1" @click="goExchange" style="margin-top: 60rpx;">
							{{ $t("homeNewText.bb31") }}
						</view>
					</view>
				</view>
				
				<!-- 轻松玩赚数字货币. -->
				<view class="title text-center" style="margin-top: 200rpx;color: #A595FC;">{{$t("homeNewText.bb32")}}</view>
				<view style="padding: 0px 40rpx;">
					<view class="positionBox_box2">
						<view class="positionBox_box3">
							<img src="@/assets/img/home/home10.png" alt="" style="width: 670rpx;height: 400rpx;" />
						</view>
					</view>
					<a style="display: block;width: 100%;text-decoration: none;">
						<view class="store_view">
							<image src="@/assets/img/home/antFill-apple@2x.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
							<view style="color: #908F94;margin-left: 20rpx;font-size: 32rpx;">APP Store</view>
						</view>
					</a>
					<a style="display: block;width: 100%;text-decoration: none;">
						<view class="store_view">
							<image src="@/assets/img/home/md-android@2x.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
							<view style="color: #908F94;margin-left: 20rpx;font-size: 32rpx;">Android</view>
						</view>
					</a>
				</view>
				
				<!-- 立即開始您的加密之旅! -->
				<view class="Journey_box">
					<view class="starrysky_box">
						<view class="starrysky"></view>
					</view>
					<view class="Journey_text">
						<view class="Journey_text1">{{ $t("homeNewText.bb34") }}</view>
						<view class="Journey_text2">{{ $t("homeNewText.bb35") }}</view>
						<view style="text-align: center;margin-top: 40rpx;">
							<view v-if="!isLogin" class="jump_btn2" @click="goReg" style="margin-top: 60rpx;">
								{{ $t("homeNewText.bb36") }}
							</view>
							<view v-else class="jump_btn2" @click="goExchange" style="margin-top: 60rpx;">
								{{ $t("homeNewText.bb39") }}
							</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;font-size: 32rpx;">
								Moabcoin
							</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" style="font-size: 36rpx;" />
				</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:[],//公告数据
				imgList:[
					require('../../assets/img/home/img1.png'),
					require('../../assets/img/home/img2.png'),
					require('../../assets/img/home/img3.png'),
					require('../../assets/img/home/img4.png'),
					require('../../assets/img/home/img5.png'),
					require('../../assets/img/home/img6.png'),
					require('../../assets/img/home/img7.png'),
					require('../../assets/img/home/img8.png'),
					require('../../assets/img/home/img9.png'),
					require('../../assets/img/home/img10.png'),
					require('../../assets/img/home/img11.png'),
					require('../../assets/img/home/img12.png'),
					require('../../assets/img/home/img1.png'),
					require('../../assets/img/home/img2.png'),
					require('../../assets/img/home/img3.png'),
					require('../../assets/img/home/img4.png'),
					require('../../assets/img/home/img5.png'),
					require('../../assets/img/home/img6.png'),
					require('../../assets/img/home/img7.png'),
					require('../../assets/img/home/img8.png'),
					require('../../assets/img/home/img9.png'),
					require('../../assets/img/home/img10.png'),
					require('../../assets/img/home/img11.png'),
					require('../../assets/img/home/img12.png')
				]
			};
		},
		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: {
			handleScroll(e){
				this.scrollPosition = e.detail.scrollTop;
				// console.log(e.detail);
			},
			goMine() {
				this.show = false
				this.tabChange('mine')
			},
			goExchange() {
				this.show = false;
				this.tabChange('exchange-operation')
			},
			goContract() {
				this.show = false;
				this.tabChange('contract')
			},
			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();
							})
							.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();
			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;
		font-size: 32rpx;
	}
	
	.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: #000;
		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: 60rpx;
		}
		
		.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)}/* 下浮高度 */
		}
		
		.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;
		// }
	}
	
	.title {
		font-size: 56rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		padding: 0px 40rpx;
		color: #fff;
		// background-image: linear-gradient(90deg, #1fa2ff, #12d8fa, #a6ffcb, #a6ffcb, #12d8fa, #1fa2ff);
		// background-clip: text;
		// background-size: 200%;
		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
		// -webkit-animation: masked-animation 3s linear infinite;
	}
	@-webkit-keyframes masked-animation {
		0%{ background-position: 0;}
		100% { background-position: -200% ;}
	}
	
	.Feature{
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		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);
			font-size: 32rpx;
			img{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	
	.username{
		font-size: 36rpx;
		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;
	}
	
	.reserve-box {
		background-color: #000;
		color: white;
		margin: 0px 40rpx;
		
		.reserve-box1{
			padding: 15px 10px;
			border-radius: 10px;
			background-color: #B8B8B8;
		}
	}
	
	.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_btn1{
		// margin-top: 20rpx;
		display: inline-block;
		min-width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #000;
		background-color: #A595FC;
		border-radius: 10px;
		font-size: 30rpx;
		padding: 0px 40rpx;
		box-sizing: border-box;
		// font-weight: bold;
	}

	.jump_btn_one {
		color: #fff;
		height: 88rpx;
		font-size: 32rpx;
		margin: 0 auto 0;
		min-width: 386rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #A595FC;
	}

	.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;
		.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%);
				}
			}
		}
	}
	
	.Infinite_box{
		width: 670rpx;
		// height: 168px;
		min-height: 115px;
		background-color: #1D1D1F;
		margin-top: 40rpx;
		border-radius: 20rpx;
		// padding:60rpx 0px 60rpx;
		// display: flex;
		// flex-direction: column;
		// justify-content: space-between;
		
		.Infinite_box1{
			height: 100%;
			padding: 44rpx 36rpx;
			// display: flex;
			// align-items: center;
			
			.Infinite_box2{
				font-size: 40rpx;
				margin-top: 30rpx;
			}
			
			.Infinite_box3{
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #838383;
			}
		}
	}
	.store_view{
		display: flex;
		width: 100%;
		border:1px solid #a9a9a9;
		height: 100rpx;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		border-radius: 60rpx;
	}
	
	.positionBox_box2{
		width: 670rpx;
		height: 514rpx;
		text-align: center;
		// margin-top: 100rpx;
		position: relative;
		
		.positionBox_box3{
			position: absolute;
			bottom: 40px;
			animation: boxImg 1.3s ease-in-out infinite alternate;
		}
		@keyframes boxImg{
			from {transform:translate(0,0px) }
			to {transform:translate(0,20px)}/* 下浮高度 */
		}
	}
	
	.guide_box1{
		margin-top: 40rpx;
	}
	
	.guide_box2{
		font-size: 44rpx;
		margin-top: 60rpx;
	}
	
	.guide_box3{
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
	.STEP_text{
		text-align: center;
		.STEP_text1{
			font-size: 48rpx;
			margin-top: 100rpx;
			color: #000;
			display: flex;
			justify-content: center;
			text-align: center;
			
			.STEP_text1_box{
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				background-image: url('../../assets/img/home/home7.png');
				background-size: cover;
				background-repeat: no-repeat;
			}
		}
		.STEP_text2{
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			font-size: 36rpx;
			color: white;
		}
		.STEP_text3{
			font-size: 24rpx;
			color: white;
		}
	}
	
	.text-center{
		text-align: center;
	}
	
	.jc_mb{
		margin-bottom: 16px;
		justify-content: space-between;
	}
	
	.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;
	}
	.buys {
		color: #59AF9D;
	}
	
	.red {
		color: #D1705E;
	}
	.color_purple{
		color: #A595FC;
	}
	.Journey_box{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 200rpx;
		background-image: url("../../assets/img/home/home9.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
	.starrysky_box{
		width: 750rpx;
		height: 732rpx;
		margin: auto;
		overflow: hidden;
		/*设置元素被查看位置的视图*/
		perspective: 340px;
		position: relative;
	}
	
	.starrysky {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2px;
		height: 2px;
		z-index: 1;
		box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fafafa,
			145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
			212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
			308px 26px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
			671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
			1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
			311px -475px #fcfcfc, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
			-790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
			-1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
			-732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
			-1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
			36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
			1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
			624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
			410px 455px #ebebeb, 497px -29px #cccccc, 416px -370px whitesmoke,
			977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
			-1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
			-437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
			-925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede,
			993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
			-170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
			-1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
			1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
			1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
			1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
			-997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
			-468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
			823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
			94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
			1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
			1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
			205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
			649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
			-1405px 397px #cfcfcf, 30px -81px #e6e6e6;
		animation: fly 3s linear infinite;
		transform-style: preserve-3d;
	}
	
	.starrysky:before,
	.starrysky:after {
		content: "";
		position: absolute;
		width: inherit;
		height: inherit;
		box-shadow: inherit;
	}
	
	.starrysky:before {
		transform: translateZ(-300px);
	}
	
	.starrysky:after {
		transform: translateZ(-600px);
	}
	
	@keyframes fly {
		from {
			transform: translateZ(0px);
		}
	
		to {
			transform: translateZ(-300px);
		}
	}
	.Journey_text{
		width: 580rpx;
		margin: auto;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		
		.Journey_text1{
			text-align: center;
			color: #A595FC;
			font-size: 56rpx;
			font-weight: bold;
		}
		
		.Journey_text2{
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			margin-top: 60rpx;
		}
	}
</style>