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.
 
 
 

2575 lines
66 KiB

<template>
<view class="d-flex flex-col">
<!-- 头部 -->
<v-header class="nav_bar p-y-xs" :left-text="$t('base.a1')" :left-arrow="false" :left-click="personalCenter">
<template #left>
<!-- <van-icon name="user-circle-o" class="fn-25 color-theme-1" /> -->
<view class="nav-left d-flex align-center justify-center">
<!-- <div class="nav-menu">
<img src="../../assets/img/icon/menu-unfold.svg" alt="" />
</div> -->
<view class="d-flex align-center">
<!-- <van-icon class="fn-20" name="manager" color="white" @click="show=true" /> -->
<van-icon name="user-circle-o" class="fn-25 color-theme-1" @click="show = true" />
</view>
<!-- <div class="nav-logo">
<img src="../../assets/img/nav-logo.png" alt="" />
</div> -->
<!-- <text class="p-l-md fn-18 color-light"
>{{ app.appName }}
<span class="fn-16 m-l-xs">{{ $t("first.a2") }}</span>
</text> -->
</view>
</template>
<!-- <template #title>
</template> -->
<template #right>
<!-- <v-link to="/pages/login/index" class="d-flex align-center">
<van-icon class="fn-20" name="manager" color="white" />
</v-link> -->
<!-- <view class="nav_lang 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 d-flex" style="color: #fff; font-size: 16px;">
<v-lang class="lang_text" style="font-size: 16px;"></v-lang>
<i class="iconfont m-l-xs ">&#xe6e9;</i>
</span>
</view> -->
<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>
</template>
</v-header>
<view class="layout-main" style="padding-bottom: 30px !important;">
<!-- <scroll-view
@refresherrefresh="onRefresh"
:refresher-enabled="refresherEnabled&&scrollTop<50"
:refresher-triggered="refreshing"
refresher-background="transparent"
:refresher-threshold="50"
> -->
<!-- 轮播 -->
<!-- <swiper
class="my-swipe m-x-md p-b-xs"
:autoplay="true"
indicator-dots
indicator-color="white"
>
<swiper-item
class="my_swipe_item"
v-for="(item, idx) in home"
:key="idx"
>
<img width="100%" height="100%" class="rounded-sm" fit="cover" :src="item.imgurl"/>
</swiper-item>
</swiper> -->
<!-- 立即注册 -->
<div class="swiper-imgbox" style="text-align: center;background-color: #0d0e12;" v-if="!isLogin">
<img style="display: block;width: 195px;height: 177px;margin: 0 auto;"
src="../../assets/img/bg/weidengl.png" alt="" />
<div style="color:#fff;font-size: 18px;margin-top: 1rem;">
{{ $t("shou.a4") }}
</div>
<div style="margin: 0.4rem 0;color: #c3c3c3;font-size: 14px;">
{{ $t("shou.a5") }}
</div>
<div @click="sign_up()" class="btn3">
{{ $t("shou.a6") }}
</div>
</div>
<!-- 立即充值 -->
<div class="swiper-imgbox" style="text-align: center;background-color: #0d0e12;" v-if="isLogin">
<img style="display: block;width: 166px;height: 177px;margin: 0 auto;"
src="../../assets/img/bg/home_recharge.png" alt="" />
<div style="color:#fff;font-size: 18px;margin-top: 1rem;">
{{ $t("shou.a0") }}
</div>
<div style="margin: 0.4rem 0;color: #c3c3c3;font-size: 14px;">
{{ $t("shou.a1") }}
</div>
<div @click="toRecharge" class="btn3">
{{ $t("shou.a3") }}
</div>
</div>
<!-- 五百万 -->
<div style="font-size: 28px;font-weight: bold;padding: 0px 20px;color: #fff;margin-bottom: 30px;">{{ $t("shou.a42") }}</div>
<div class="scqs-list-bottom"
style="display: flex;justify-content: space-around;margin-left: 1rem;flex-wrap: wrap;">
<div class="scqs-list-bottom-box">
<div class="scqs-list-bottom-box-t">
{{ $t("shou.a13") }}
</div>
<div class="scqs-list-bottom-box-b">
{{ $t("shou.a17") }}
</div>
<div></div>
</div>
<div class="scqs-list-bottom-box">
<div class="scqs-list-bottom-box-t">
{{ $t("shou.a14") }}
</div>
<div class="scqs-list-bottom-box-b">
{{ $t("shou.a18") }}
</div>
<div></div>
</div>
<div class="scqs-list-bottom-box">
<div class="scqs-list-bottom-box-t">
{{ $t("shou.a15") }}
</div>
<div class="scqs-list-bottom-box-b">
{{ $t("shou.a19") }}
</div>
<div></div>
</div>
<div class="scqs-list-bottom-box">
<div class="scqs-list-bottom-box-t">
{{ $t("shou.a16") }}
</div>
<div class="scqs-list-bottom-box-b">
{{ $t("shou.a20") }}
</div>
<div></div>
</div>
</div>
<!-- num count -->
<div class="num-count">
<div class="num-top">
<div class="num-left">
<scroll-view @refresherrefresh="onRefresh" :refresher-enabled="refresherEnabled && scrollTop < 50"
:refresher-triggered="refreshing" refresher-background="transparent" :refresher-threshold="50">
<!-- 轮播 -->
<swiper class="my-swipe2 m-x-md p-b-xs" indicator-dots indicator-color="white">
<swiper-item style="padding-left: 1.8rem;border-right: 1px solid gray;" class="my_swipe_item2" v-for="(item, idx) in homeList" :key="idx">
<div class="num">
<img :src="item.coin_icon"
style="width: 24px;height: 24px;margin-right: 6px;vertical-align: bottom;"
alt="">
<!-- BTC/USDT -->
{{ item.pair || item.pair_name }}
</div>
<div class="num num2">{{ item.price }}</div>
<!-- <div class="num num2">{{ item.pair || item.pair_name }}</div> -->
<!-- <div class="title title2">0.032935 USD</div> -->
<div class="title title3" :class="item.increase>0?'increase_t':item.increase<0?'decrease_t':''">{{ item.increaseStr }}</div>
<!-- <div class="num-center" style="border-left: 1px solid gray;"></div> -->
</swiper-item>
</swiper>
</scroll-view>
<!-- <div class="num">{{$t("common.user")}}</div> -->
<!-- <div class="num">
<img src="../../assets/img/bg/USDT(2) Copy@2x.png"
style="width: 24px;height: 24px;margin-right: 6px;vertical-align: bottom;" alt="">
{{ item.pair }}
</div>
<div class="num num2">{{ item.pair }}</div>
<div class="title title2">0.032935 USD</div>
<div class="title title3">{{ item.increaseStr }}</div> -->
<!-- <div class="title">{{$t("common.user")}}</div>
<div class="num">5 {{$t("common.million")}}+</div> -->
</div>
<!-- <div class="num-right">
<div class="num">92,115,351</div>
<div class="title">{{$t("common.trading")}}</div>
<div class="title">{{$t("common.transactions")}}</div>
</div> -->
<!-- <div class="num-center" style="border-left: 1px solid gray;"></div> -->
<!-- <div class="num-right">
<div class="num">
<img src="../../assets/img/bg/USDT(2) Copy@2x.png"
style="width: 24px;height: 24px;margin-right: 6px;vertical-align: bottom;" alt="">
BTC/USDT
</div>
<div class="num num2">0.032935</div>
<div class="title title2">0.032935 USD</div>
<div class="title title3">+0.12%</div>
</div> -->
</div>
<!-- <div class="num-bottom d-flex">
<div class="num-left">
<div class="num">12,689,199</div>
<div class="title">{{$t("common.payments")}}</div>
<div class="title">{{$t("common.currency")}}</div>
</div>
<div class="num-right">
<div class="num">8,464,594</div>
<div class="title">{{$t("common.using")}}</div>
<div class="title">{{$t("common.crypto")}}</div>
</div>
</div> -->
</div>
<!-- 公告轮播 -->
<!-- <div>
<scroll-view scroll-x="true" class="scor-box">
<v-link class="scor-item" v-for="(item, idx) in notice" :key="idx"
:to="'/pages/help/detail?id='+item.id">
<view class="scor-item-title">{{item.title}}</view>
</v-link>
</scroll-view>
</div> -->
<!-- 市场趋势 -->
<div class="scqs-list" style="width: 90vw;margin: 2rem auto 0px;">
<div class="dzdzc-bottom-list-top">
<div class="dzdzc-bottom-list-title" style="font-size: 24px;">
{{ $t("shou.a8") }}
</div>
<div class="dzdzc-bottom-list-text" style="font-size: 16px;color: gray;">
{{ $t("shou.a7") }}
</div>
</div>
<div class="scqs-list-li" style="margin-top: 1rem;">
<div class="scqs-list-li-top"
style="display: flex;justify-content: space-between;color: gray;margin-bottom: 1rem;">
<div style="width: 40%;">{{ $t("shou.a9") }}</div>
<div style="width: 32%;text-align: right;">{{ $t("shou.a10") }}</div>
<div style="width: 25%;text-align: center;">{{ $t("shou.a11") }}</div>
</div>
<div class="scqs-list-li-content" v-for="item in homeList2" :key="item.id"
style="display: flex;justify-content: space-between;margin-bottom: 1.5rem;">
<div style="width: 40%;">
<img style="width: 25px;height: 25px;vertical-align: middle;margin-right: 0.4rem;"
:src="item.coin_icon" alt="">
{{ item.coin_name }}
</div>
<div style="width: 25%;text-align: right;">{{ item.close }}</div>
<div style="width: 25%;text-align: center;" :class="item.increase>0?'increase_t':item.increase<0?'decrease_t':''">{{ item.increaseStr }}</div>
</div>
</div>
</div>
<!-- 多终端支持 -->
<div class="dzdzc-img">
<div class="dzdzc-img-top">
<div class="dzdzc-img-top-title">
{{ $t("shou.a21") }}
</div>
<div class="dzdzc-img-top-text">
{{ $t("shou.a22") }}
</div>
</div>
<img class="middle-img" src="../../assets/img/bg/app.png" alt="">
<div class="dzdzc-img-bottom">
<div class="dzdzc-img-bottom-title">
{{ $t("shou.a23") }}
</div>
<div class="dzdzc-img-bottom-btn">
<div class="btn" v-on:click="gotodown()">
<!-- APP Store -->
<a href="./download/"></a>
</div>
<div class="btn btn2" v-on:click="gotodown()">
<!-- Android APK -->
<!-- <a href="https://itunes.apple.com/cn/app/id477927812"></a> -->
</div>
</div>
</div>
</div>
<!-- 为何选择xuscoin.com? -->
<div class="dzdzc-bottom-list">
<div class="dzdzc-bottom-list-top">
<div class="dzdzc-bottom-list-title">
{{ $t("shou.a28") }}
</div>
<div class="dzdzc-bottom-list-text">
{{ $t("shou.a29") }}
</div>
</div>
<div class="dzdzc-bottom-lists dzdzc-bottom-lists1">
<div class="dzdzc-bottom-lists-text">
<div class="dzdzc-bottom-lists-text-title">
{{ $t("shou.a30") }}
</div>
<div class="dzdzc-bottom-lists-text-t">
{{ $t("shou.a31") }}
</div>
</div>
<img class="rightImg" src="../../assets/img/bg/1-1.png" alt="">
</div>
<div class="dzdzc-bottom-lists dzdzc-bottom-lists2">
<div class="dzdzc-bottom-lists-text">
<div class="dzdzc-bottom-lists-text-title">
{{ $t("shou.a32") }}
</div>
<div class="dzdzc-bottom-lists-text-t">
{{ $t("shou.a33") }}
</div>
</div>
<img class="rightImg" src="../../assets/img/bg/2-1.png" alt="">
</div>
<div class="dzdzc-bottom-lists dzdzc-bottom-lists3">
<div class="dzdzc-bottom-lists-text">
<div class="dzdzc-bottom-lists-text-title">
{{ $t("shou.a34") }}
</div>
<div class="dzdzc-bottom-lists-text-t">
{{ $t("shou.a35") }}
</div>
</div>
<img class="rightImg" src="../../assets/img/bg/3-1.png" alt="">
</div>
<div class="dzdzc-bottom-lists dzdzc-bottom-lists4">
<div class="dzdzc-bottom-lists-text">
<div class="dzdzc-bottom-lists-text-title">
{{ $t("shou.a36") }}
</div>
<div class="dzdzc-bottom-lists-text-t">
{{ $t("shou.a37") }}
</div>
</div>
<img class="rightImg" src="../../assets/img/bg/4-1.png" alt="">
</div>
</div>
<!-- 新手指引 -->
<div class="dzdzc-bottom-list">
<div class="dzdzc-bottom-list-top">
<div class="dzdzc-bottom-list-title">
{{ $t("shou.a38") }}
</div>
<div class="dzdzc-bottom-list-text">
{{ $t("shou.a39") }}
</div>
</div>
<v-link class="dzdzc-bottom-lists dzdzc-bottom-lists5" v-for="(articleItem, articleIndex) in articleList" :key="articleIndex"
:to="'/pages/help/detail?id='+articleItem.id">
<!-- <view class="list-box m-b-md m-t-lg" :style="{backgroundImage: bgUrl(articleItem.full_cover)}"></view> -->
<!-- <view class="list-box m-b-md m-t-lg" :style="{backgroundImage: `url('${articleItem.full_cover} ');`}"></view> -->
<!-- <view class="">{{ articleItem.title }}</view> -->
</v-link>
</div>
<div class="ljzqsy-box">
<div class="ljzqsy-box-content">
<div class="d-flex justify-center">
<img src="../../assets/img/bg/coin_1.png" alt="" style="width: 63px;height: 63px;margin-right: 10px;">
<div style="text-align: left;width: 60%;word-break: break-all;">
<div class="ljzqsy-box-content-title">
{{ $t("shou.a43") }}
</div>
<div style="font-size: 18px;color: #a1a1a1;margin-top: 5px;">
{{ $t("shou.a40") }}
</div>
</div>
</div>
<div @click="login_in()" class="ljzqsy-box-content-btn" v-if="!isLogin">
{{ $t("shou.a41") }}
</div>
<div @click="toTrad()" class="ljzqsy-box-content-btn" v-else>
{{ $t("shou.a41") }}
</div>
</div>
</div>
<!-- why you choose -->
<!-- <div class="choose" style="width: 100%; height: 560px; margin-top: 80px">
<div class="section-choose">
<div class="section-choose-title">
<div class="text">{{$t("common.Why")}}</div>
<div class="text">{{$t("common.digital")}}</div>
</div>
<div class="dot-box d-flex">
<div class="dotblue" v-for="item in 5"></div>
</div>
<div class="section-choose-img">
<img src="../../assets/img/bg/bg2.png" alt="" />
</div>
<div class="section-choose-text">
{{$t("common.believe")}}.
</div>
</div>
</div> -->
<!-- section help -->
<!-- <div class="section-help">
<div class="section-help-name">
<div class="section-help-name_icon">
<img src="../../assets/img/icon/eyes.svg" alt="" />
</div>
<div class="section-help-name_title">{{$t("common.Clarity")}}</div>
</div>
文字部分
<div class="section-help-text">
{{$t("common.help")}}.
</div>
<div class="section-help-name">
<div class="section-help-name_icon">
<img src="../../assets/img/icon/dunpai.svg" alt="" />
</div>
<div class="section-help-name_title">{{$t("common.safety")}}</div>
</div>
文字部分
<div class="section-help-text">
{{$t("common.double")}}.
</div>
<div class="section-help-name">
<div class="section-help-name_icon">
<img src="../../assets/img/icon/flash.svg" alt="" />
</div>
<div class="section-help-name_title">{{$t("common.convenient")}}</div>
</div>
文字部分
<div class="section-help-text">
{{$t("common.key")}}
</div>
</div> -->
<!-- our technology -->
<!-- <div class="technology" style="width: 100%; height: 732px; margin-top: 50px">
<div class="section-choose">
<div class="section-choose-title">{{$t("common.technology")}}</div>
<div class="dot-box d-flex">
<div class="dotblue" v-for="item in 5"></div>
</div>
<div class="section-choose-img">
<img src="../../assets/img/bg/bg3.png" alt="" />
</div>
<div class="section-choose-text technology-text">
{{$t("common.YBGCOINS")}}.
</div>
</div>
</div> -->
<!-- beginner's guide -->
<!-- <div class="beginner" style="width: 100%; height: 980px">
<div class="section-choose">
<div class="section-choose-title">{{$t("common.guide")}}</div>
<div class="dot-box d-flex">
<div class="dotblue" v-for="item in 5"></div>
</div>
<div class="section-choose-img">
<img src="../../assets/img/bg/bg4.png" alt="" />
</div>
</div>
beginner下半部分
<div class="section-help">
<div class="section-help-name">
<div class="section-help-name_icon">
<img src="../../assets/img/icon/1.png" alt="" />
</div>
<div class="section-help-name_title beginner-title">
{{$t("common.Wear")}}
</div>
</div>
文字部分
<div class="section-help-text">{{$t("common.Get")}}</div>
<div class="section-help-name">
<div class="section-help-name_icon">
<img src="../../assets/img/icon/2.png" alt="" />
</div>
<div class="section-help-name_title">{{$t("common.deposit")}}</div>
</div>
文字部分
<div class="section-help-text">
{{$t("common.Invest")}}
</div>
<div class="section-help-name">
<div class="section-help-name_icon">
<img src="../../assets/img/icon/3.png" alt="" />
</div>
<div class="section-help-name_title">
{{$t("common.Complete")}}
</div>
</div>
文字部分
<div class="section-help-text">
{{$t("common.become")}}
</div>
<div class="section-help-name">
<div class="section-help-name_icon">
<img src="../../assets/img/icon/4.png" alt="" />
</div>
<div class="section-help-name_title beginner-title">
{{$t("common.Start")}}
</div>
</div>
文字部分
<div class="section-help-text">
{{$t("common.Sell")}}
</div>
</div>
</div> -->
<!-- log in and register -->
<!-- <div class="log-group d-flex">
<div class="log-in log_type">{{$t('login.a4')}}</div>
<div class="register log_type">{{$t('reg.b9')}}</div>
</div> -->
<!-- app download -->
<!-- <div class="download" style="width: 100%; height: 540px; margin-top: 50px">
<div class="section-choose">
<div class="section-choose-title">YBGCOINS APP</div>
<div class="dot-box d-flex">
<div class="dotblue" v-for="item in 5"></div>
</div>
<div class="download-content d-flex">
<div class="section-choose-img">
<img src="../../assets/img/phonemodule.png" alt="" />
</div>
<div class="section-choose-text">
{{$t('common.Create')}}.
</div>
</div>
</div> -->
<!-- download btn -->
<!-- <div class="log-group download-group d-flex">
<div class="log_type Android-download download_type">
{{ $t("common.Android") }}
</div>
<div class="log_type ios-download download_type">{{ $t("common.ios") }}</div>
</div>
</div> -->
<!-- 公告 -->
<!-- <v-notice-bar
v-if="notice.length"
class="m-t-md m-x-md bg-panel-1 box-shadow rounded-sm"
>
<template #left-icon>
<van-icon
class="m-r-sm fn-16"
@click="() => _router.push({ path: '/pages/notice/index' })"
name="volume-o"
/>
</template>
<v-link
class="fn-13 eps-1"
:to="{ path: '/pages/notice/detail', query: { id: notice[0].id } }"
>{{ notice[0].title }}
</v-link
>
<template #right-icon>
<view class="m-l-xs" @click="_router.push({ path: '/pages/notice/index' })">
<van-icon name="wap-nav"/>
</view>
</template>
</v-notice-bar> -->
<!-- 次一级导航 -->
<!-- <view class="nav2 p-x-md m-t-ms d-flex justify-around fn-center">
<v-link tag="div" to="/pages/assets/recharge" class="item">
<view class="icon">
<img :class="theme == 'light' ? 'bg-box-per' : ''" class="h-33" src="static/img/13.png" />
</view>
<view class="fn-13 m-t-xxs">{{ $t("base.b5") }}</view>
</v-link>
<v-link tag="div" to="/pages/assets/draw" class="item">
<view class="icon">
<img :class="theme == 'light' ? 'bg-box-blue' : ''" class="h-33 " src="static/img/5.png" />
</view>
<view class="fn-13 m-t-xxs">{{ $t("base.b6") }}</view>
</v-link>
<v-link tag="div" to="/pages/service/index" class="item">
<view class="icon">
<img :class="theme == 'light' ? 'bg-box-red' : ''" class="h-33 " src="static/img/ke.png" />
</view>
<view class="fn-13 m-t-xxs">{{ $t("common.service") }}</view>
</v-link>
<v-link tag="div" to="/pages/invite/index" class="item" >
<view class="icon">
<img :class="theme == 'light' ? 'bg-box-yellow' : ''" class="h-33 " src="static/img/4.png" />
</view>
<view class="fn-13 m-t-xxs">{{ $t("base.b7") }}</view>
</v-link>
</view> -->
<!-- 指数 -->
<!-- <view class="stock-swipe d-flex p-x-md m-t-ms">
<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="head_info m-y-xl">
<view class=" d-flex justify-between align-center p-x-xs p-t-lg bor5 p-b-xs">
<view class="d-flex">
<text class="m-x-xs fn-center" @click="active=0" :class="active==0?'fn-bold fn-15 p-b-xs bor5-active color-light':''">合約指數</text>
<text class="m-x-xs fn-center" @click="active=1" :class="active==1?'fn-bold fn-15 p-b-xs bor5-active color-light':''">現貨指數</text>
</view>
</view>
<template v-if="active==0" v-for="parentItem in (marketList)">
<view class="m-xs" :key="parentItem.coin_name" v-if="parentItem.coin_name=='USDT'">
<view v-for="item in parentItem.marketInfoList" :key="item.pair_name" class="bg-panel-3m-t-xs">
<view class="w-12/12">
<view class="fn-center w-max">
<v-link
:to="{
path: '/pages/exchange/index',
query: { code: item.pair_name },
}"
class="m-b-md m-x-xs rounded-sm bg-panel-3 box-shadow link-active d-flex justify-between align-center p-r-md p-y-md box-size p-x-xs"
v-for="item in parentItem.collect
? collect
: parentItem.marketInfoList"
:key="item.pair_name"
>
<view class="fn-left w-6/12">
<view class="d-flex align-center">
<text class="fn-bold fn-16 color-light">{{ item.pair_name }}</text>
<text class="color-default fn-14 m-l-xs">永续</text>
</view>
<view class="d-flex align-center fn-12 m-t-xs">
24H量 {{ omitTo(item.vol,0) }}
</view>
</view>
<view class="fn-left align-end w-3/12">
<view class="d-flex align-end fn-bold fn-16" :class="item.increase * 1 >0?'color-buy':'color-sell'">{{ item.close }}</view>
<view class="m-t-xs">
¥{{ omitTo(item.close*price_cny,2) }}
</view>
</view>
<view class="fn-right w-3/12">
<span
class="rounded-xs"
:class="
item.increase * 1 > 0 ? 'color-buy' : 'color-sell'
"
>{{ item.increaseStr }}</span
>
</view>
</v-link>
</view>
</view>
</view>
</view>
</template>
</view> -->
<!-- $toast($t('first.b9')) -->
<!-- <view @click="_router.push('/pages/currency/index')" class="otc m-md bg-panel-3 m-t-md box-shadow rounded-lg d-flex justify-between align-center p-r-lg">
<view class="d-flex align-center">
<img width="43px" height="43px" src="static/img/b.png"/>
<view class="color-theme-2 fn-15 m-l-md d-flex align-center">{{ $t("first.b7") }}<span class="color-light fn-12 m-l-xs">{{ $t("first.b6") }}</span></view>
</view>
<van-icon name="arrow" class="color-theme-2"/>
</view> -->
<!-- <view class="m-x-md ">
<text @click="infoActive=0" class="m-r-lg" :class="infoActive==0?'fn-bold fn-16 bor5 color-light':''">{{ $t("first.b5") }}</text>
<text @click="infoActive=1" class="m-l-lg" :class="infoActive==1?'fn-bold fn-16 bor5 color-light':''">{{ $t("first.b4") }}</text>
</view> -->
<!-- head_info -->
<!-- </scroll-view> -->
<!-- bottom section -->
<!-- <div class="footer"> -->
<!-- <div class="footer-info-logo">
<img src="../../assets/img/banner-logo.png" alt="" />
</div> -->
<!-- <div class="footer-info-list d-flex"> -->
<!-- service -->
<!-- <div class="footer-info-service">
<h4>{{ $t("common.service") }}</h4>
<ul> -->
<!-- <li v-for="item in college" :key="item.id">
<router-link :to="item.url">{{
item.name
}}</router-link>
</li> -->
<!-- <li>
<v-link to="/pages/list/list?isSearch=1" class="">{{$t("common.User protocol")}}
</v-link>
</li>
<li>
<v-link to="/pages/list/list?isSearch=1" class="">{{$t("common.Privacy policy")}}
</v-link>
</li>
<li>
<v-link to="/pages/list/list?isSearch=1" class="">{{$t("common.Legal declaration")}}
</v-link>
</li>
<li>
<v-link to="/pages/list/list?isSearch=1" class="">{{$t("common.About us")}}
</v-link>
</li>
</ul>
</div> -->
<!-- <div class="footer-info-college">
<h4>{{ $t("base.a7") }}</h4>
<ul>
<li v-for="item in college" :key="item.id"> -->
<!-- <router-link :to="item.url">{{
item.name
}}</router-link> -->
<!-- <v-link to="item.url" class="">{{$t(`common.${item.name}`)}}
</v-link>
</li> -->
<!-- <li>
<v-link
to="/pages/list/list?isSearch=1"
class=""
>Beginner's course
</v-link>
</li>
<li>
<v-link
to="/pages/list/list?isSearch=1"
class=""
>Trading strategy
</v-link>
</li>
<li>
<v-link
to="/pages/list/list?isSearch=1"
class=""
>Industry research
</v-link>
</li>
<li>
<v-link
to="/pages/list/list?isSearch=1"
class=""
>Market dynamics
</v-link>
</li> -->
<!-- </ul>
</div>
</div> -->
<!-- lang change -->
<!-- <div class="footer-lang d-flex">
<div class="footer-lang-type">English</div>
<div class="footer-lang-btn">
<img src="../../assets/img/icon/langdown.svg" alt="" />
</div>
</div> -->
<!-- <view class="footer-lang per-bot p-y-md p-x-sm d-flex align-center" style="color: #fff;"> -->
<!-- <img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" /> -->
<!-- <span class="color-light">
<v-lang></v-lang>
<i class="iconfont m-l-xs fn-sm">&#xe6e9;</i>
</span>
</view> -->
<!-- 版权 -->
<!-- <div class="footer_rights" >
{{$t("common.Rights")}}.
</div> -->
<!-- </div> -->
</view>
<!-- 个人主页弹出层 -->
<van-popup class="personalCenter-main colbg bg-panel-4" :show="show" @close="show = false" position="left"
custom-style="width:100%;height:100%">
<view style="height: var(--status-bar-height)"></view>
<view class="personalCenter-top">
<view class="theme-switch m-x-md d-flex justify-between">
<van-icon name="arrow-left" @click="show = false" class="fn-22" />
<!-- <view class="v-switch border rounded-xs d-flex" @click="changtTheme">
<view class="icon border"
:class="theme == 'light' ? 'bg-gradient-green active' : 'bg-gradient-green'">
<view class="left color-light">{{ $t("common.light") }}</view>
<view class="right color-light">{{ $t("common.dark") }}</view>
</view>
</view>
<img width="25px" height="25px" @click="changtTheme"
:src="theme == 'light' ? 'static/img/moon.png' : 'static/img/sun.png'" /> -->
</view>
<view class="information p-l-md m-t-xl">
<!-- <img :src="logoMap.login_logo" class="h-50 w-50 d-block m-r-xs rounded-max flex-shrink" /> -->
<view class="inf-rig flex-fill">
<!-- <span class="fn-lg color-light" v-if="isLogin">{{
user.account
}}</span>
@click="toAccountSettings"
<span v-if="isLogin"
class="inf-rig-cent fn-20 color-light">UID:{{ isLogin ? user.user_id : "-" }}
#ifdef H5
<i class="iconfont m-l-lg" @click="copy(user.user_id)">&#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-md m-y-md fn-center">
{{ $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-link :to="detail.status != 2 ? '/pages/auth/index' : '/pages/auth/index'" tag="div"
class="bg-form-panel-3 p-xs m-xs color-theme-1 d-flex justify-between align-center">
<view class=" d-flex align-center">
<van-icon name="manager" class="fn-18" />
<text class="p-l-md fn-14">{{ $t('auth.a1') }}</text>
</view>
<!-- <text class="bg-theme-1 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>
<!-- <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/commission/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('Page1.png')" alt="" class="h-20 m-r-xs" />
<span class="color-light">{{ $t("base.c1") }}</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>
</van-popup>
<van-toast id="van-toast" />
</view>
</template>
<script>
import College from "@/api/college"
import Home from "@/api/home"
import Wallet from "@/api/wallet"
import Exchange from "@/api/exchange"
import math from "@/utils/class/math.js"
import Member from "@/api/member"
import app from "@/app"
import Profile from "@/api/profile"
import {
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 {
college: [],
infoActive: 1, // 详情选中
marketList: [],
marketListHe: [],
homeList: [],
homeList2: [],
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,
guideId: '',// 当前显示课程分类的ID
guideList: [],//课程列表
articleList: []
}
},
computed: {
...mapState({
ws: "ws",
ws1: "ws1",
user: "user",
wsState: "wsState",
logoMap: "logoMap",
theme: "theme",
}),
isLogin() {
return Boolean(uni.getStorageSync("token"))
},
},
watch: {
isShow(n) {
if (n) {
this.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: {
//获取学院分类列表
getCollegeList() {
College.getCategoryList().then(res => {
let college = res.data;
// console.log(res.data);
college.forEach(item => {
if (this.guideId === '') {
this.guideId = item.id;
}
this.guideList.push({
url : `/college/list/${item.id}`,
label : item.name,
value : item.name,
id : item.id
})
})
this.getArticleList();
})
},
getArticleList() {
College.getArticleList({
id:this.guideId
}).then(res => {
let data = res.data;
this.articleList = data.slice(0,3);
// console.log(this.articleList, 222222);
setTimeout(() => {
// this.skroll();
}, 100);
})
},
goMine() {
this.show = false
this.tabChange("mine")
},
...mapActions({
setTheme: "setTheme",
}),
setQuery: qs.stringify,
omitTo: math.omitTo,
onRefresh() {
this.indexData()
if (this.refreshing) return
this.refreshing = true
setTimeout(() => {
this.refreshing = false
}, 1000)
},
scroll(event) {
this.scrollTop = event.detail.scrollTop
},
// 获取汇率
getCurrencyExCny() {
Exchange.getCurrencyExCny({
coin_name: "USDT",
}).then((res) => {
this.price_cny = res.data.price_cny
})
},
changtTheme() {
if (this.theme == "dark") {
this.setTheme("dark")
} else {
this.setTheme("light")
}
},
// 获取涨跌之前的价格
getOldPrice(price, rate) {
return math.multiple(math.division(price, 1 + rate * 1), rate, 2)
},
toAccountSettings() {
this._router.push({
path: "/pages/accountSettings/accountSettings",
})
},
personalCenter() {
this.show = true
},
indexData() {
let data = {}
let ajax = Home.indexList(data, {
loading: true
})
// console.log(ajax);
ajax.then((res) => {
this.home = res.data.bannerList
// this.notice = res.data.noticeList
this.indexList = res.data.brokenLine
// this.homeList = res.data.homeList;
this.homeList2 = res.data.marketList[0].marketInfoList.slice(0,5);
this.marketList = res.data.marketList
// this.infoActive = 1;
this.dunshift()
this.getCollect()
setTimeout(() => {
this.first = false
}, 600)
}).catch(() => { })
},
getNotice(){
Member.article({type:'notice'}).then((res)=>{
// console.log(res.data.data, 1111222);
let arr = res.data.data;
arr.map(item=>{
if(item.id == 163 || item.id == 157 || item.id == 158){
this.notice.push(item)
}
})
// this.notice = res.data.data.slice(0,3);
}).catch((err) => { })
},
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()
this.homeList2 = data[1].marketInfoList.slice(0,5);
// console.log(this.homeList2, this.homeList2.length, '----------市场趋势获取动态');
this.homeList = data[1].marketInfoList;// 公告上面的数据获取动态
// console.log(data, '----------市场趋势获取源');
}
})
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) {
if (sub == "swapMarketList") {
// 公告上面的数据获取动态
// this.homeList = data[0].marketInfoList;
// console.log(this.homeList, this.homeList.length, '----------公告上面的数据获取动态');
}
this.marketListHe = data[0].marketInfoList
this.marketListHe.forEach((item, index) => {
// item.kline=item.series
// chartDatas:{
// "series": [
// {
// // "showAllSymbol":true,
// "data": [10,20,24,24,68,42],
// "color":"#ff0000"
// },
// // {
// // "data": [15,2,7,30,51,20],
// // "color":"#00ff00"
// // }
// ]
// },
this.marketListHe[index].kline = {
series: item.series,
}
// console.log(this.marketListHe)
// let a=[]
// item.kline.forEach((arr)=>{
// let max=0
// arr.data.forEach((arrs)=>{
// if(arrs>max){
// max=arrs
// }
// })
// let x;
// arr.data.forEach((arrs)=>{
// if(max>100){
// x=max/100
// a=this.omitTo(a.push(arrs / x),0)
// // console.log(arrs / x)
// }else{
// x=100/max
// a=this.omitTo(a.push(arrs * x),0)
// // console.log(arrs * x)
// }
// })
// })
// console.log(this.marketListHe[0].kline)
})
}
})
},
// 创建充币地址
createWalletAddress() {
Wallet.createWalletAddress()
.then(() => { })
.catch(() => { })
},
// 退出登录
loginOut() {
this.$dialog
.confirm({
// title: '',
message: this.$t("first.b0"),
cancelButtonText: this.$t("common.cancel"),
confirmButtonText: this.$t("common.confirm"),
})
.then(() => {
let data = {
lang: uni.getStorageSync("language") || "zh-CN",
}
Member.logout(data, {
toast: true
})
.then(() => {
this.outLogin()
})
.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
})
},
sign_up() {
this.$router.push({ path: '/pages/reg/index' })
},
login_in() {
this.$router.push({ path: '/pages/login/index' })
},
// goto down app
gotodown(){
// this.$router.push({ path: '/download/XUScoin.mobileconfig' })
window.open("https://app.bigtwallet.com/download/BIGTcoins.html","_self");
},
toTrad(){
// this.$router.push({ path: '/pages/login/index' })
this.tabChange("exchange-operation")
},
toRecharge(){
if(this.detail.primary_status){
this.$router.push({ path: '/pages/assets/recharge' })
}else{
this.$router.push({ path: '/pages/auth/primary' })
}
}
},
// created() {
// this.indexList();
// },
mounted() {
this.getNotice();
this.getCollegeList()
this.onRefresh()
this.indexData()
this.indexMarketList()
this.getCurrencyExCny()
if (this.isLogin) {
this.createWalletAddress()
this.getAuthInfo()
}
},
destroyed() { },
}
</script>
<style lang="scss" scoped>
// .colbg {
// background-color: $bg;
// }
* {
box-sizing: border-box;
}
.nav_bar {
width: 100%;
height: 50px;
background-color: #000;
.nav-left {
width: 210px;
height: 40px;
align-items: center;
justify-content: space-between;
.nav-menu {
width: 24px;
height: 24px;
margin-right: 10px;
img {
width: 100%;
height: 100%;
}
}
.nav-logo {
width: 120px;
height: 30px;
img {
width: 100%;
height: 100%;
}
}
.nav_manager {}
}
.nav_lang {
span {
color: #fff;
.lang_text {
font-size: 16px;
}
}
}
}
.layout-main {
background-color: #121318;
width: 100%;
.swiper-imgbox {
// width: 100%;
// height: 350px;
/* 450px -> 60vw */
img {
width: 100%;
height: 450px;
}
}
// num-count
.num-count {
width: 100%;
height: 100px;
/* 400px -> 10.6667rem */
;
padding: 1.6667rem
/* 100px -> 2.6667rem */
0;
box-sizing: content-box;
.num-top {
// justify-content: space-around;
}
.num-bottom {
justify-content: space-around;
padding-top: 2.1333rem
/* 80px -> 2.1333rem */
;
}
.num-left {}
.num-top,
.num-bottom {
.num {
font-size: 18px;
// color: rgba(50, 105, 235, 1);
color: white;
margin-bottom: 10px;
}
.num2 {
font-size: 20px;
// color: rgba(50, 105, 235, 1);
color: white;
margin-bottom: 10px;
}
.title {
color: #fff;
font-size: 14px;
}
.title2 {
color: gray;
font-size: 14px;
}
.title3 {
font-size: 14px;
}
}
}
.increase_t{
color: #4EAA97 !important;
}
.decrease_t{
color: #CF6A57 !important;
}
.scqs-list-bottom-box {
width: 45%;
margin-top: 1rem;
.scqs-list-bottom-box-t {
font-size: 28px;
color: #fff;
}
.scqs-list-bottom-box-b {
font-size: 16px;
color: gray;
margin-top: 1rem;
}
}
.dzdzc-img {
margin-top: 40px;
width: 100%;
height: 577px;
// background-image: url('../../assets/img/bg/app.png');
// background-size: 100% 100%;
// background-position: 100% 100%;
// background-repeat: no-repeat;
background-color: #0B0FCC;
display: flex;
flex-direction: column;
justify-content: space-between;
.dzdzc-img-top {
padding: 2rem 0 0 1rem;
color: #fff;
.dzdzc-img-top-title {
font-size: 24px;
font-weight: bold;
}
.dzdzc-img-top-text {
font-size: 16px;
margin-top: 0.5rem;
}
}
.middle-img{
width: 375px;
height: 310px;
margin: 0px auto;
}
.dzdzc-img-bottom {
width: 100%;
padding: 0.5rem 1rem 1rem;
.dzdzc-img-bottom-title {
color: #fff;
font-size: 16px;
font-weight: bold;
}
.dzdzc-img-bottom-btn {
display: flex;
justify-content: space-between;
margin-top: 1.2rem;
color: #fff;
.btn {
width: 10rem;
height: 3.1rem;
padding: 0.5rem 1.3rem;
// border: 1px solid #fff;
border-radius: 20px;
background-image: url('../../assets/img/bg/mac.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.btn2 {
background-image: url('../../assets/img/bg/and.png');
}
}
}
}
.dzdzc-bottom-list {
padding: 2rem 1rem;
.dzdzc-bottom-list-top {
.dzdzc-bottom-list-title {
font-size: 28px;
font-weight: bold;
color: #fff;
}
.dzdzc-bottom-list-text {
margin-top: 0.6rem;
}
}
.dzdzc-bottom-lists {
width: 100%;
min-height: 130px;
margin-top: 1rem;
display: flex;
align-items: center;
.dzdzc-bottom-lists-text {
width: 66%;
padding: 0.9rem 0px;
.dzdzc-bottom-lists-text-title {
font-size: 18px;
color: #fff;
}
.dzdzc-bottom-lists-text-t {
font-size: 12px;
color: gray;
margin-top: 0.5rem;
}
}
}
.dzdzc-bottom-lists1 {
// background-image: url('../../assets/img/bg/1.png');
// background-size: 100% 100%;
// background-repeat: no-repeat;
img.rightImg{
width: 260upx;
height: 170upx;
}
}
.dzdzc-bottom-lists2 {
// background-image: url('../../assets/img/bg/2.png');
// background-size: 100% 100%;
// background-repeat: no-repeat;
.dzdzc-bottom-lists-text {
width: 78%;
}
img.rightImg{
width: 250upx;
height: 250upx;
}
}
.dzdzc-bottom-lists3 {
// background-image: url('../../assets/img/bg/3.png');
// background-size: 100% 100%;
// background-repeat: no-repeat;
.dzdzc-bottom-lists-text{
width: 70%;
}
img.rightImg{
width: 180upx;
height: 180upx;
}
}
.dzdzc-bottom-lists4 {
// background-image: url('../../assets/img/bg/2.png');
// background-size: 100% 100%;
// background-repeat: no-repeat;
img.rightImg{
width: 220upx;
height: 220upx;
}
}
.dzdzc-bottom-lists5:nth-of-type(1) {
width: 100%;
height: 170px;
margin-top: 1rem;
background-image: url('../../assets/img/bg/图片\ 7@1x.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.dzdzc-bottom-lists5:nth-of-type(2) {
width: 100%;
height: 170px;
margin-top: 1rem;
background-image: url('../../assets/img/bg/图片\ 9@1x.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.dzdzc-bottom-lists5:nth-of-type(3) {
width: 100%;
height: 170px;
margin-top: 1rem;
background-image: url('../../assets/img/bg/图片\ 10@1x.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
.ljzqsy-box {
width: 350px;margin: 0px auto;
padding: 35px 0px;
text-align: center;
background-color: #242424;
border-radius: 10px;
.ljzqsy-box-content {
.ljzqsy-box-content-title {
font-size: 28px;
font-weight: bold;
color: #fff;
}
.ljzqsy-box-content-btn {
display: inline-block;
min-width: 7rem;
height: 3rem;
line-height: 3rem;
padding: 0px 10px;
background-color: #0B0FCC;
margin: 0 auto;
margin-top: 1rem;
border-radius: 8px;
color: #fff;
// text-align: center;
}
}
}
//section-choose
.section-choose {
margin: 0 auto;
height: 360px;
.section-choose-title {
font-size: 24px;
color: #fff;
line-height: 2.1333rem
/* 80px -> 2.1333rem */
;
text-align: center;
}
.section-choose-img {
margin: 0 auto;
width: 300px;
height: 300px
/* 300px -> 8rem */
;
img {
width: 100%;
}
}
.section-choose-text {
width: 360px;
height: 127px;
margin: 20px 0;
line-height: 28px;
font-size: 20px;
color: #fff;
text-align: left;
padding: 0 3px 0 12px;
}
}
//section-help
.section-help {
height: 274px;
color: rgba(255, 255, 255, 1);
padding: 0 1.3333rem
/* 50px -> 1.3333rem */
;
.section-help-name {
display: flex;
align-items: center;
.section-help-name_icon {
width: 24px;
height: 24px;
margin-right: 0.48rem
/* 18px -> .48rem */
;
img {
width: 100%;
height: 100%;
}
}
.section-help-name_title {
font-size: 18px;
}
}
.section-help-text {
width: 100%;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
margin: 0.8rem
/* 30px -> .8rem */
0;
line-height: 2.1333rem
/* 80px -> 2.1333rem */
;
}
}
//technology
.technology {
.section-choose {
.section-choose-img {
width: 329px;
height: 280px;
img {
width: 100%;
height: 100%;
}
}
.technology-text {
width: 356px;
height: 358px;
line-height: 28px;
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
}
}
}
// beginner-guide
.beginner {
margin-bottom: 80px;
.section-choose {
.section-choose-img {
width: 350px;
height: 303px;
img {
width: 100%;
height: 100%;
}
}
}
.section-help {
margin-top: 50px;
.section-help-name {
.section-help-name_icon {
width: 60px;
height: 60px;
}
.section-help-name_title {
font-size: 20px;
}
}
.section-help-text {
font-size: 18px;
}
}
}
//login and register
.log-group {
width: 100%;
height: 114px;
margin: 20px auto 0;
justify-content: space-around;
align-items: center;
.log_type {
width: 160px;
height: 44px;
border-radius: 9999px;
color: rgba(255, 255, 255, 1);
font-size: 18px;
text-align: center;
line-height: 44px;
}
.log-in {
background-color: rgba(84, 164, 80, 1);
}
.register {
background-color: rgba(50, 105, 235, 1);
}
}
//app download
.download {
background: url(../../assets/img/bg/5.png) no-repeat;
background-size: 100% 100%;
.section-choose {
width: 339px;
height: 352px;
text-align: center;
.section-choose-img {
width: 141px;
height: 291px;
margin-right: 13px;
img {
width: 141px;
height: 291px;
}
}
.download-content {
margin-top: 40px;
justify-content: space-around;
padding: 0 12px;
.section-choose-text {
font-size: 20px;
line-height: 28px;
}
}
}
.download-group {
margin: 50px 0;
.download_type {
background-color: #fff;
color: rgba(16, 16, 16, 1);
}
}
}
.footer {
width: 100%;
border-top: 1px solid rgba(33, 33, 33, 1);
.footer-info-logo {
margin: 40px auto;
width: 203px;
height: 50px;
img {
width: 100%;
height: 100%;
}
}
.footer-info-list {
padding: 0 14px;
justify-content: center;
align-items: center;
.footer-info-service {
margin-right: 100px;
}
.footer-info-service,
.footer-info-college {
line-height: 36px;
color: rgba(156, 163, 192, 1);
h4 {
font-size: 20px;
color: #fff;
}
}
}
.footer-lang {
margin: 20px auto;
width: 231px;
height: 44px;
border-radius: 10px;
background-color: rgba(18, 19, 24, 1);
align-items: center;
justify-content: center;
.footer-lang-type {
color: rgba(255, 255, 255, 1);
font-size: 16px;
}
.footer-lang-btn {
width: 14px;
height: 14px;
margin-left: 21px;
img {
width: 100%;
height: 100%;
}
}
}
.footer_rights {
width: 100%;
height: 54px;
line-height: 54px;
text-align: center;
color: #fff;
font-size: 14px;
background-color: #000;
border-top: 1px solid rgba(33, 33, 33, 1);
}
}
// 五个小蓝点
.dot-box {
width: 106px;
height: 10px;
margin: 10px auto;
}
.dotblue {
width: 10px;
height: 10px;
margin-right: 14px;
background-color: rgba(50, 105, 235, 1);
}
}
.my-swipe2 {
.my_swipe_item2 {
display: inline !important;
width: 52% !important;
height: 70% !important;
// height: 90% !important;
}
}
.my-swipe {
width: 100vw;
height: 170px;
.my_swipe_item {
display: inline !important;
// width: 60% !important;
// height: 90% !important;
}
.van-image {
padding: 0 18px;
box-sizing: border-box;
::v-deep img.van-image__img {
border-radius: 9px !important;
}
}
}
.btn3{
display: inline-block;
min-width: 10rem;
height: 2.5rem;
line-height: 2.5rem;
padding: 0px 10px;
margin-top: 1rem;
border-radius: 20px;
color:#fff;
background-color: #0B0FCC;
}
// 公告轮播
.scor-box{
width: 100vw;
height: 120px;
white-space: nowrap;
padding: 0px 15px;
::-webkit-scrollbar { display:none !important; }
.scor-item{
width: 414upx !important;
height: 220upx !important;
margin-right: 15px;
display: inline-block;
}
.scor-item:nth-of-type(1){
background-image: url("../../assets/img/bg/图片 7@1x.png");
background-size: 100% 100%;
}
.scor-item:nth-of-type(2){
background-image: url("../../assets/img/bg/图片 9@1x.png");
background-size: 100% 100%;
}
.scor-item:nth-last-child(1){
margin-right: 0px;
background-image: url("../../assets/img/bg/图片 10@1x.png");
background-size: 100% 100%;
}
.scor-item-title{
font-size: 12px;
display: -webkit-box;//将盒子转换为弹性盒子
-webkit-box-orient: vertical;//文本显示方式,默认水平
-webkit-line-clamp: 1;//设置显示多少行
word-wrap: break-word;
word-break:break-all;// 英文换行
overflow: hidden;
padding: 20px;
}
}
// 轮播
.swiper-imgbox {
width: 375px;
height: auto;
padding: 2rem 25px;
margin: 0 auto 2rem;
img {
width: 100%;
height: 100%;
}
}
.notice-swipe {
height: 24px;
}
// #ff4d5c
.nav2 {
.color-gray-6 {
color: #f8a12e;
}
}
.stock-swipe {
.stock-index {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.stock-item-3 {
padding: 3px 0;
}
}
}
.personalCenter-main {
.personalCenter-top {
box-sizing: border-box;
.theme-switch {
padding: 5% 0;
.v-switch {
$width: 50px;
$icon-width: 20px;
display: block;
position: relative;
height: 20px;
width: $width;
background: rgba($green, 0.2);
overflow: hidden;
.icon {
position: absolute;
top: 0;
width: $icon-width;
height: 20px;
border-radius: inherit;
transition: left 0.3s;
.left,
.right {
position: absolute;
width: $width;
height: 100%;
top: 0;
box-sizing: border-box;
text-align: center;
&.left {
right: 0;
padding-right: $icon-width;
}
&.right {
padding-left: $icon-width;
left: 0;
}
}
}
.icon {
left: 0;
}
.active.icon {
left: $width - $icon-width;
}
}
}
.information {
display: flex;
align-items: flex-start;
.inf-head-img {
border-radius: 50%;
margin-right: 4%;
}
.inf-rig {
display: flex;
flex-direction: column;
letter-spacing: 1px;
flex: 1;
span:first-child {
font-weight: 600;
margin-bottom: 2px;
}
.inf-rig-cent {
padding: 0 0 4px;
}
.vip-grade {
display: flex;
align-items: center;
justify-content: flex-end;
.progress-bar {
width: 50%;
}
.progress-img {
padding: 0 5px;
}
}
}
}
}
.personalCenter-center {
padding: 20px 10px 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.personalCenter-bom {
padding-top: 30px;
.available-money {
margin: 10px 0 0;
height: 60%;
background: rgba(100, 101, 102, 0.2);
border-radius: 0 7px 7px 7px;
align-items: center;
padding: 6px 5px;
}
}
}
}
.user-icon {
font-size: 50px;
}
.epss-1 {
overflow: hidden;
text-overflow: ellipsis;
}
.lists {
display: flex;
.lists-1 {
margin: 0 5px;
}
}
.logout {
width: 80%;
margin: 0 auto;
::v-deep .van-button--default {
border: none;
background-color: $panel-3;
}
}
.goLogin {
padding: 5px 0;
border: 1px solid $theme-1;
width: 180px;
}
.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;
}
</style>