|
|
@@ -0,0 +1,1304 @@
|
|
|
+<template>
|
|
|
+ <div class="page">
|
|
|
+ <header class="header flex">
|
|
|
+ <div class="left">
|
|
|
+ <div class="logo-box flex">
|
|
|
+ <img class="logo" src="/img/landing/logo1.png" alt="JDNX">
|
|
|
+ <div>
|
|
|
+ <!-- 极度证券 -->
|
|
|
+ {{ $t('common.l63') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 美股、A股、港股首选交易平台 -->
|
|
|
+ {{ $t('landing.l') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right flex">
|
|
|
+ <van-popover
|
|
|
+ v-model="showPopover"
|
|
|
+ placement="bottom"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
+ <div class="popover-body">
|
|
|
+ <div class="item" :class="{active: language == 'zh-CN'}" @click="selectLang('zh-CN')">
|
|
|
+ 简体中文
|
|
|
+ </div>
|
|
|
+ <div class="item" :class="{active: language == 'zh-TW'}" @click="selectLang('zh-TW')">
|
|
|
+ 繁体中文
|
|
|
+ </div>
|
|
|
+ <div class="item" :class="{active: language == 'en'}" @click="selectLang('en')">
|
|
|
+ English
|
|
|
+ </div>
|
|
|
+ <div class="item" :class="{active: language == 'th'}" @click="selectLang('th')">
|
|
|
+ แบบไทย
|
|
|
+ </div>
|
|
|
+ <div class="item" :class="{active: language == 'vi'}" @click="selectLang('vi')">
|
|
|
+ Tiếng Việt
|
|
|
+ </div>
|
|
|
+ <div class="item" :class="{active: language == 'ru'}" @click="selectLang('ru')">
|
|
|
+ Русский
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #reference>
|
|
|
+ <div class="lan-box flex">
|
|
|
+ <img class="icon" src="/img/icon/language.png" alt="JDNX">
|
|
|
+ <div>
|
|
|
+ {{ languageText[language] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-popover>
|
|
|
+ <div class="href">
|
|
|
+ <!-- 下载 -->
|
|
|
+ {{ $t('home.l1') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <section class="top">
|
|
|
+ <div class="title">
|
|
|
+ <!-- 注册开户送大礼包 -->
|
|
|
+ {{ $t('landing.l1') }}
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="number">
|
|
|
+ 1800
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ USD
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <!-- 火热股市 极速开户 -->
|
|
|
+ {{ $t('landing.l2') }}
|
|
|
+ </div>
|
|
|
+ <div class="box1">
|
|
|
+ <div class="left flex">
|
|
|
+ <div>
|
|
|
+ <!-- A股 -->
|
|
|
+ {{ $t('common.l61') }}
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div>
|
|
|
+ <!-- 美股 -->
|
|
|
+ {{ $t('common.l41') }}
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div>
|
|
|
+ <!-- 港股 -->
|
|
|
+ {{ $t('common.l42') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 多空双开，最高 <span class="span">20</span> 倍杠杆 -->
|
|
|
+ <div class="right" v-html="$t('landing.l3')">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="section">
|
|
|
+ <div class="tabs flex">
|
|
|
+ <div class="tab" :class="{'active': type == 1}" @click="type = 1">
|
|
|
+ <!-- 手机号 -->
|
|
|
+ {{ $t('login.l21') }}
|
|
|
+ </div>
|
|
|
+ <div class="tab" :class="{'active': type == 2}" @click="type = 2">
|
|
|
+ <!-- 邮箱 -->
|
|
|
+ {{ $t('setting.l11') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form autocomplete="off" class="login-land" :rules="rules" :model="form" ref="form">
|
|
|
+ <el-form-item prop="account" v-if="type == 1" :class="{focus: accountFocus}">
|
|
|
+ <!-- 请输入手机号码 -->
|
|
|
+ <el-input autocomplete="off" ref="accout" @focus="accountFocus = true" @blur="accountFocus = false" :placeholder="$t('setting.l37')" type="number" v-model="form.account">
|
|
|
+ <template slot="prepend">
|
|
|
+ <div class="area-box flex" @click="countryShow">
|
|
|
+ <div>+{{ phoneCountry.area_code }}</div>
|
|
|
+ <van-icon color="#616161" name="arrow-down" size="12px" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div slot="suffix" class="suffix">
|
|
|
+ <van-icon name="clear" @click="form.account = ''" v-if="form.account" />
|
|
|
+ </div>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 请输入邮箱地址 -->
|
|
|
+ <el-autocomplete
|
|
|
+ popper-class="email-autocomplete"
|
|
|
+ :class="{focus: accountFocus}"
|
|
|
+ @focus="accountFocus = true"
|
|
|
+ @blur="accountFocus = false"
|
|
|
+ autocomplete="off"
|
|
|
+ :debounce="0"
|
|
|
+ ref="email"
|
|
|
+ v-if="type == 2"
|
|
|
+ v-model="form.account"
|
|
|
+ :fetch-suggestions="querySearch"
|
|
|
+ :placeholder="$t('login.l2')">
|
|
|
+ <template slot-scope="{ item }">
|
|
|
+ <div class="email-li flex" @click.stop="handleSelect(item)">
|
|
|
+ <div class="query">{{ getAccoutName() }}</div>
|
|
|
+ <div>@</div>
|
|
|
+ <div>{{ item }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div slot="suffix" class="suffix">
|
|
|
+ <van-icon name="clear" @click="clearEmail" v-if="form.account" />
|
|
|
+ </div>
|
|
|
+ </el-autocomplete>
|
|
|
+ <el-form-item prop="verifyCode" :class="{focus: codeFocus}">
|
|
|
+ <div class="code-box flex">
|
|
|
+ <!-- 请输入手机验证码 请输入邮箱验证码 -->
|
|
|
+ <el-input autocomplete="off" type="number" @focus="codeFocus = true" @blur="codeFocus = false" :placeholder="type == 1 ? $t('register.l') : $t('register.l1')" v-model="form.verifyCode">
|
|
|
+ </el-input>
|
|
|
+ <div class="send" @click="getVerifyCode">{{ sendText }}{{ isNaN(Number(sendText)) ? '' : 's' }}</div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 请设置密码 -->
|
|
|
+ <el-autocomplete
|
|
|
+ popper-class="password-autocomplete"
|
|
|
+ :readonly="readonly"
|
|
|
+ :class="{focus: passwordFocus}"
|
|
|
+ @focus="passwordFocus = true"
|
|
|
+ @blur="passwordFocus = false"
|
|
|
+ autocomplete="off"
|
|
|
+ placement="top-start"
|
|
|
+ :debounce="0"
|
|
|
+ :type="showPassword"
|
|
|
+ ref="password"
|
|
|
+ v-model="form.password"
|
|
|
+ :fetch-suggestions="querySearch1"
|
|
|
+ :placeholder="$t('login.l3')">
|
|
|
+ <template>
|
|
|
+ <div class="rule-box" @click.stop="">
|
|
|
+ <div class="rule flex" :class="{active: rule1}">
|
|
|
+ <img class="check" v-show="!rule1" src="/img/login/check.png" alt="极度证券">
|
|
|
+ <img class="check" v-show="rule1" src="/img/login/checked.png" alt="极度证券">
|
|
|
+ <div>
|
|
|
+ <!-- 8-20个字符 -->
|
|
|
+ {{ $t('register.l17') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rule flex" :class="{active: rule2}">
|
|
|
+ <img class="check" v-show="!rule2" src="/img/login/check.png" alt="极度证券">
|
|
|
+ <img class="check" v-show="rule2" src="/img/login/checked.png" alt="极度证券">
|
|
|
+ <div>
|
|
|
+ <!-- 至少1个数字 -->
|
|
|
+ {{ $t('register.l18') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rule flex" :class="{active: rule3}">
|
|
|
+ <img class="check" v-show="!rule3" src="/img/login/check.png" alt="极度证券">
|
|
|
+ <img class="check" v-show="rule3" src="/img/login/checked.png" alt="极度证券">
|
|
|
+ <div>
|
|
|
+ <!-- 至少1个字母 -->
|
|
|
+ {{ $t('register.l19') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div slot="suffix" class="suffix">
|
|
|
+ <img class="eye" @click="showPassword = 'text'" v-show="showPassword == 'password'" src="/img/icon/eye.png?1" alt="极度证券">
|
|
|
+ <img class="eye" @click="showPassword = 'password'" v-show="showPassword == 'text'" src="/img/icon/eye_no.png?1" alt="极度证券">
|
|
|
+ </div>
|
|
|
+ </el-autocomplete>
|
|
|
+ <div class="href1" @click="checked = !checked">
|
|
|
+ <img v-show="!checked" class="check" src="/img/icon/check.png?1" alt="极度证券">
|
|
|
+ <img v-show="checked" class="check" src="/img/icon/check1.png?1" alt="极度证券">
|
|
|
+ <div>
|
|
|
+ <!-- 我已阅读并同意极度证券<span class="active" @click="$router.push('/statement/user')">用户协议</span>与<span class="active" @click="$router.push('/statement/privacy')">个人隐私条款</span> -->
|
|
|
+ {{ $t('landing.l4') }}<span class="active" @click.stop="$router.push('/statement/user')">{{ $t('auth.l28') }}</span>{{ $t('landing.l5') }}<span class="active" @click.stop="$router.push('/statement/privacy')">{{ $t('landing.l6') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn-box flex" @click="submit">
|
|
|
+ <div>
|
|
|
+ <!-- 立即领取1800USD大礼包 -->
|
|
|
+ {{ $t('landing.l7') }}
|
|
|
+ </div>
|
|
|
+ <img class="icon" src="/img/landing/icon.png" alt="JDNX">
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </section>
|
|
|
+ <section class="section1">
|
|
|
+ <div class="title">
|
|
|
+ <!-- 注册即享现金福利 拒绝活动套路 -->
|
|
|
+ {{ $t('landing.l8') }}
|
|
|
+ </div>
|
|
|
+ <div class="tip">
|
|
|
+ <!-- 特惠福利 1800USD 大礼包 -->
|
|
|
+ {{ $t('landing.l9') }}
|
|
|
+ </div>
|
|
|
+ <div class="cell">
|
|
|
+ <div class="left flex">
|
|
|
+ <img class="icon" src="/img/landing/icon1.png" alt="JDNX">
|
|
|
+ <div>
|
|
|
+ <!-- 注册 -->
|
|
|
+ {{ $t('login.l9') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="flex">
|
|
|
+ <!-- 送 <span class="span">100USD</span> 抵扣券 -->
|
|
|
+ <div class="text" v-html="$t('landing.l10')">
|
|
|
+ </div>
|
|
|
+ <img class="icon" src="/img/landing/icon4.png" alt="JDNX">
|
|
|
+ </div>
|
|
|
+ <!-- A股、美股、港股的交易手续费、资金利息均<br/>可部分抵扣 -->
|
|
|
+ <div v-html="$t('landing.l11')">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cell">
|
|
|
+ <div class="left flex">
|
|
|
+ <img class="icon" src="/img/landing/icon2.png" alt="JDNX">
|
|
|
+ <div>
|
|
|
+ <!-- 认证 -->
|
|
|
+ {{ $t('landing.l12') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="flex">
|
|
|
+ <!-- 送 <span class="span">200USD</span> 赠金 -->
|
|
|
+ <div class="text" v-html="$t('landing.l13')">
|
|
|
+ </div>
|
|
|
+ <img class="icon" src="/img/landing/icon5.png" alt="JDNX">
|
|
|
+ </div>
|
|
|
+ <!-- 完成身份认证获得，等同现金可直接用于交易，<br/>赚到的收益可直接取款 -->
|
|
|
+ <div v-html="$t('landing.l14')">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cell">
|
|
|
+ <div class="left flex">
|
|
|
+ <img class="icon" src="/img/landing/icon3.png" alt="JDNX">
|
|
|
+ <div>
|
|
|
+ <!-- 交易 -->
|
|
|
+ {{ $t('tab.tab3') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="flex">
|
|
|
+ <!-- 送 <span class="span">600USD</span> 现金券 -->
|
|
|
+ <div class="text" v-html="$t('landing.l15')">
|
|
|
+ </div>
|
|
|
+ <img class="icon" src="/img/landing/icon4.png" alt="JDNX">
|
|
|
+ </div>
|
|
|
+ <!-- 达成指定交易额，即可获得最高600USD的现<br/>金 -->
|
|
|
+ <div v-html="$t('landing.l16')">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" @click="formFocus">
|
|
|
+ <!-- 立即注册 -->
|
|
|
+ {{ $t('download.l47') }}
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="section2">
|
|
|
+ <div class="title">
|
|
|
+ <!-- 股票交易平台千千万 为什么选择极度证券 -->
|
|
|
+ {{ $t('landing.l17') }}
|
|
|
+ </div>
|
|
|
+ <van-row type="flex" gutter="9">
|
|
|
+ <van-col span="12">
|
|
|
+ <div class="col col1">
|
|
|
+ <div class="sub">
|
|
|
+ <!-- 最高20倍杠杆 -->
|
|
|
+ {{ $t('landing.l18') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 交易门槛低，一杯咖啡的钱即可开启美股、港股、A股交易 -->
|
|
|
+ {{ $t('landing.l19') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="12">
|
|
|
+ <div class="col col2">
|
|
|
+ <div class="sub">
|
|
|
+ <!-- 双向交易 -->
|
|
|
+ {{ $t('landing.l20') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 买涨买跌皆可，A股也能实现T+0和做空 -->
|
|
|
+ {{ $t('landing.l21') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row type="flex" gutter="9">
|
|
|
+ <van-col span="12">
|
|
|
+ <div class="col col3">
|
|
|
+ <div class="sub">
|
|
|
+ <!-- 交易灵活 -->
|
|
|
+ {{ $t('landing.l22') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 电脑、手机多端交易，不错过每一次行情 -->
|
|
|
+ {{ $t('landing.l23') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="12">
|
|
|
+ <div class="col col4">
|
|
|
+ <div class="sub">
|
|
|
+ <!-- 实时的在线服务 -->
|
|
|
+ {{ $t('landing.l24') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 7*24小时在线客服，及时解决您的问题和需求 -->
|
|
|
+ {{ $t('landing.l25') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row type="flex" gutter="9">
|
|
|
+ <van-col span="12">
|
|
|
+ <div class="col col5">
|
|
|
+ <div class="sub">
|
|
|
+ <!-- 交易成本更低 -->
|
|
|
+ {{ $t('landing.l26') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 不涉及实际资产的交割，不需要支付印花税或其他交割费用 -->
|
|
|
+ {{ $t('landing.l27') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="12">
|
|
|
+ <div class="col col6">
|
|
|
+ <div class="sub">
|
|
|
+ <!-- 全面的投资产品 -->
|
|
|
+ {{ $t('landing.l28') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 除股票外，还有外汇、贵金属、加密货币等，轻松实现多样化投资 -->
|
|
|
+ {{ $t('landing.l29') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <div class="btn" @click="formFocus">
|
|
|
+ <!-- 立即注册 -->
|
|
|
+ {{ $t('download.l47') }}
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <footer class="footer">
|
|
|
+ <div class="logo-box">
|
|
|
+ <img class="logo" src="/img/landing/logo.png" alt="JDNX">
|
|
|
+ <div>
|
|
|
+ <!-- 极度证券简介 -->
|
|
|
+ {{ $t('landing.l30') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="des">
|
|
|
+ <div>
|
|
|
+ <!-- 极度证券是一家总部位于新西兰，并在马来西亚设有全球运营中心，拥有美国和新西兰双金融牌照的股票交易券商 -->
|
|
|
+ {{ $t('landing.l31') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 我们为全球客户提供美股、A股、港股在线交易服务，可多空双向交易，最高20倍杠杆 -->
|
|
|
+ {{ $t('landing.l32') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-box flex">
|
|
|
+ <a class="href" href="https://t.me/JDNXgroup" target="_blank">
|
|
|
+ <img class="app" src="/img/landing/app1.png" alt="JDNX">
|
|
|
+ </a>
|
|
|
+ <a class="href" href="https://twitter.com/jdtrader_cn" target="_blank">
|
|
|
+ <img class="app" src="/img/landing/app2.png" alt="JDNX">
|
|
|
+ </a>
|
|
|
+ <a class="href" href="https://www.tiktok.com/@jdtrader_cn" target="_blank">
|
|
|
+ <img class="app" src="/img/landing/app3.png" alt="JDNX">
|
|
|
+ </a>
|
|
|
+ <a class="href" href="https://chat.whatsapp.com/LTy0KK74YySDwHXlF30AJn" target="_blank">
|
|
|
+ <img class="app" src="/img/landing/app4.png" alt="JDNX">
|
|
|
+ </a>
|
|
|
+ <a class="href" href="https://www.facebook.com/jdtradercn/" target="_blank">
|
|
|
+ <img class="app" src="/img/landing/app5.png" alt="JDNX">
|
|
|
+ </a>
|
|
|
+ <a class="href" href="https://www.youtube.com/@jdtraderofficial" target="_blank">
|
|
|
+ <img class="app" src="/img/landing/app6.png" alt="JDNX">
|
|
|
+ </a>
|
|
|
+ <a class="href" href="https://www.linkedin.com/company/jdnx/" target="_blank">
|
|
|
+ <img class="app" src="/img/landing/app7.png" alt="JDNX">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="router-box flex">
|
|
|
+ <div class="item" @click="toStatement('1')">
|
|
|
+ <!-- AML/KYC 政策 -->
|
|
|
+ {{ $t('auth.l35') }}
|
|
|
+ </div>
|
|
|
+ <div class="item" @click="toStatement('privacy')">
|
|
|
+ <!-- 隐私政策 -->
|
|
|
+ {{ $t('about.l8') }}
|
|
|
+ </div>
|
|
|
+ <div class="item" @click="toStatement('user')">
|
|
|
+ <!-- 用户协议 -->
|
|
|
+ {{ $t('auth.l28') }}
|
|
|
+ </div>
|
|
|
+ <div class="item" @click="toStatement('tradeconfirm')">
|
|
|
+ <!-- 交易确认书 -->
|
|
|
+ {{ $t('statement.l12') }}
|
|
|
+ </div>
|
|
|
+ <div class="item" @click="toStatement('legal')">
|
|
|
+ <!-- 法律声明 -->
|
|
|
+ {{ $t('auth.l25') }}
|
|
|
+ </div>
|
|
|
+ <div class="item" @click="toStatement('risk')">
|
|
|
+ <!-- 风险披露 -->
|
|
|
+ {{ $t('auth.l26') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="bold">
|
|
|
+ <!-- 合规声明 -->
|
|
|
+ {{ $t('landing.l33') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 这个网站由 JDTRADER PRIME LIMITED, 运营，注册地址位于 Level 3, 74 Taharoto Road, Takapuna, Auckland, 0622, New Zealand, FSP Number: FSP1001348, NZBN: 9429049502770 -->
|
|
|
+ {{ $t('landing.l34') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="bold">
|
|
|
+ <!-- 限制区域 -->
|
|
|
+ {{ $t('landing.l35') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 极度证券品牌不向美国、加拿大、海地、伊朗、苏里南、朝鲜民主主义人民共和国、波多黎各、巴西、塞浦路斯占领地区、叙利亚、朝鲜和古巴的居民提供服务 -->
|
|
|
+ {{ $t('landing.l36') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="bold">
|
|
|
+ <!-- 风险声明 -->
|
|
|
+ {{ $t('landing.l37') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 融资融券等金融衍生品属于复杂交易产品，由于杠杆作用，存在高风险导致损失资金的可能性。绝大多数零售投资者在进行衍生品交易时会亏损。重要的是仔细考虑自己是否了解金融衍生品交易的运作方式，并且能够承担高风险导致资金损失的可能性。在开始投资之前，请务必仔细阅读和理解我们的风险免责声明 -->
|
|
|
+ {{ $t('landing.l38') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="bold">
|
|
|
+ <!-- 风险提醒 -->
|
|
|
+ {{ $t('landing.l39') }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 金融衍生品产品存在市场风险，杠杆商品可能不适合所有客户。请详细阅读我们的风险声明 -->
|
|
|
+ {{ $t('landing.l40') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ <selectCountry :val="phoneCountry" ref="country" @back="selectCountryBack"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { setVantLang } from "@/lang";
|
|
|
+import bus from '@/utils/bus'
|
|
|
+import { updateUserLanguage } from "@/api/user";
|
|
|
+import { emailList } from "@/utils/config";
|
|
|
+import { Register, getVerifyCode, login } from "@/api/login";
|
|
|
+import { setSession, delSession } from '@/utils/sessionStorage'
|
|
|
+import { setCookie } from "@/utils/cookie";
|
|
|
+import selectCountry from "@/components/selectCountry";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ selectCountry
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ showPopover: false,
|
|
|
+ type: 1,
|
|
|
+ form: {
|
|
|
+ account: "",
|
|
|
+ password: "",
|
|
|
+ },
|
|
|
+ checked: false,
|
|
|
+ codeShow: false,
|
|
|
+ type: '1',
|
|
|
+ showPassword: 'password',
|
|
|
+ showPassword1: 'password',
|
|
|
+ loading: false,
|
|
|
+ sendText: this.$t('register.l11'),
|
|
|
+ sendDisable: false,
|
|
|
+ timer: null,
|
|
|
+ dialogVisible: false,
|
|
|
+ readonly: true,
|
|
|
+ recommendCodeDisabled: false,
|
|
|
+ accountFocus: false,
|
|
|
+ passwordFocus: false,
|
|
|
+ codeFocus: false,
|
|
|
+ recommendFocus: false,
|
|
|
+ emailList: emailList,
|
|
|
+ phoneCountry: {
|
|
|
+ "name": "China (中国)",
|
|
|
+ "code": "cn",
|
|
|
+ "area_code": "86"
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ languageText() {
|
|
|
+ return {
|
|
|
+ 'zh-CN': '简体中文',
|
|
|
+ 'zh-TW': '繁体中文',
|
|
|
+ 'en': 'English',
|
|
|
+ 'ru': 'Русский',
|
|
|
+ 'th': 'แบบไทย',
|
|
|
+ 'vi': 'Tiếng Việt',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rule1() {
|
|
|
+ return /^.{8,20}$/.test(this.form.password.trim())
|
|
|
+ },
|
|
|
+ rule2() {
|
|
|
+ return /\d/.test(this.form.password.trim())
|
|
|
+ },
|
|
|
+ rule3() {
|
|
|
+ return /[a-zA-Z]/.test(this.form.password.trim())
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ type() {
|
|
|
+ this.form.account = ''
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.sendText = this.$t('register.l11')
|
|
|
+ this.sendDisable = false
|
|
|
+ this.readonly = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.readonly = false
|
|
|
+ }, 200)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.readonly = false
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit() {
|
|
|
+ if (this.loading) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.checked) {
|
|
|
+ // 请阅读并同意用户协议与个人隐私条款
|
|
|
+ this.$toast(this.$t('landing.l41'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var account = ''
|
|
|
+ if (this.type == 1) {
|
|
|
+ if (!this.form.account.trim()) {
|
|
|
+ // 请输入手机号码
|
|
|
+ this.$toast(this.$t('setting.l37'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ account = this.phoneCountry.area_code + this.form.account.trim()
|
|
|
+ }
|
|
|
+ if (this.type == 2) {
|
|
|
+ if (!this.form.account.trim()) {
|
|
|
+ // 请输入邮箱地址
|
|
|
+ this.$toast(this.$t('login.l2'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
|
+ if (!emailReg.test(this.form.account.trim())) {
|
|
|
+ // 邮箱格式不正确
|
|
|
+ this.$toast(this.$t('login.email-reg'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ account = this.form.account.trim()
|
|
|
+ }
|
|
|
+ if (!this.form.verifyCode.trim()) {
|
|
|
+ // 请输入验证码
|
|
|
+ this.$toast(this.$t('register.l12'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.form.password.trim()) {
|
|
|
+ // 请输入密码
|
|
|
+ this.$toast(this.$t('login.l3'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var passwordReg = /^(?=.*[a-zA-Z])(?=.*\d).{8,20}$/;
|
|
|
+ if (!passwordReg.test(this.form.password.trim())) {
|
|
|
+ // 8-20位字符, 必须包括数字和字母
|
|
|
+ this.$toast(this.$t('login.password-reg'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // if (this.form.password1.trim() !== this.form.password.trim()) {
|
|
|
+ // this.$toast('密码输入不一致');
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ this.fullscreenLoading = true
|
|
|
+ Register({
|
|
|
+ account: account,
|
|
|
+ password: this.form.password,
|
|
|
+ verifyCode: this.form.verifyCode,
|
|
|
+ area_code: this.phoneCountry.area_code
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.$notify({
|
|
|
+ // message: '注册成功',
|
|
|
+ message: this.$t('register.l13'),
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ login({
|
|
|
+ account: account,
|
|
|
+ password: this.form.password,
|
|
|
+ client: this.getClient(),
|
|
|
+ }).then((res) => {
|
|
|
+ bus.$emit('socketInit')
|
|
|
+ this.$store.commit('SET_LOGIN', true)
|
|
|
+ this.$store.commit('setToken', res.token)
|
|
|
+ setCookie("userToken", res.token)
|
|
|
+ this.$store.dispatch('getUserInfo', true)
|
|
|
+ this.$store.dispatch('getProductUserList')
|
|
|
+ this.$router.replace('/')
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$router.replace('/login')
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getVerifyCode() {
|
|
|
+ if (this.sendDisable) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var account = ''
|
|
|
+ if (this.type == 1) {
|
|
|
+ if (!this.form.account.trim()) {
|
|
|
+ // 请输入手机号码
|
|
|
+ this.$toast(this.$t('setting.l37'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ account = this.phoneCountry.area_code + this.form.account.trim()
|
|
|
+ }
|
|
|
+ if (this.type == 2) {
|
|
|
+ if (!this.form.account.trim()) {
|
|
|
+ // 请输入邮箱地址
|
|
|
+ this.$toast(this.$t('login.l2'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
|
+ if (!emailReg.test(this.form.account.trim())) {
|
|
|
+ // 邮箱格式不正确
|
|
|
+ this.$toast(this.$t('login.email-reg'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ account = this.form.account.trim()
|
|
|
+ }
|
|
|
+ this.sendDisable = true
|
|
|
+ getVerifyCode({
|
|
|
+ account,
|
|
|
+ type: this.type == 1 ? 'phone' : 'email',
|
|
|
+ action: 'Register',
|
|
|
+ language: this.language
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.timerStart()
|
|
|
+ setSession('phoneToken', res.token)
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.sendDisable = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ timerStart() {
|
|
|
+ this.sendText = 60
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.sendText <= 1) {
|
|
|
+ this.sendText = this.$t('register.l11')
|
|
|
+ this.sendDisable = false
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ } else {
|
|
|
+ this.sendText--
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ countryShow() {
|
|
|
+ this.$refs['country'].reset()
|
|
|
+ },
|
|
|
+ selectCountryBack(val) {
|
|
|
+ this.phoneCountry = val
|
|
|
+ },
|
|
|
+ getClient() {
|
|
|
+ var webLog = {}
|
|
|
+ try {
|
|
|
+ var userAgent = navigator.userAgent
|
|
|
+ // 获取微信版本
|
|
|
+ var m1 = userAgent.match(/MicroMessenger.*?(?= )/)
|
|
|
+ if (m1 && m1.length > 0) {
|
|
|
+ webLog.wechat = m1[0]
|
|
|
+ }
|
|
|
+ if (userAgent.includes('Windows')) {
|
|
|
+ webLog.device = 'Windows'
|
|
|
+ }
|
|
|
+ // 苹果手机
|
|
|
+ if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
|
|
|
+ // 获取设备名
|
|
|
+ if (userAgent.includes('iPad')) {
|
|
|
+ webLog.device = 'iPad'
|
|
|
+ } else {
|
|
|
+ webLog.device = 'iPhone'
|
|
|
+ }
|
|
|
+ // 获取操作系统版本
|
|
|
+ m1 = userAgent.match(/iPhone OS .*?(?= )/)
|
|
|
+ if (m1 && m1.length > 0) {
|
|
|
+ webLog.system = m1[0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 安卓手机
|
|
|
+ if (userAgent.includes('Android')) {
|
|
|
+ // 获取设备名
|
|
|
+ m1 = userAgent.match(/Android.*; ?(.*(?= Build))/)
|
|
|
+ if (m1 && m1.length > 1) {
|
|
|
+ webLog.device = m1[1]
|
|
|
+ }
|
|
|
+ // 获取操作系统版本
|
|
|
+ m1 = userAgent.match(/Android.*?(?=;)/)
|
|
|
+ if (m1 && m1.length > 0) {
|
|
|
+ webLog.system = m1[0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch(err) {
|
|
|
+ }
|
|
|
+ return webLog.device || 'Mobile'
|
|
|
+ },
|
|
|
+ querySearch(queryString, cb) {
|
|
|
+ if (!queryString.trim()) {
|
|
|
+ cb([])
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var restaurants = this.emailList;
|
|
|
+ var results = restaurants.filter(item => {
|
|
|
+ var str = (this.form.account.split('@')[1]) || '';
|
|
|
+ if (item.indexOf(str) !== -1 && str != item) {
|
|
|
+ return {value: item}
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ })
|
|
|
+ cb(results)
|
|
|
+ },
|
|
|
+ querySearch1(queryString, cb) {
|
|
|
+ cb([{}])
|
|
|
+ },
|
|
|
+ clearEmail() {
|
|
|
+ this.form.account = ''
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['email'].focus()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSelect(item) {
|
|
|
+ var str = (this.form.account.split('@')[0]) || '';
|
|
|
+ this.form.account = str + '@' + item
|
|
|
+ this.$refs['email'].focus()
|
|
|
+ },
|
|
|
+ getAccoutName() {
|
|
|
+ var str = (this.form.account.split('@')[0]) || '';
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ selectLang(lan) {
|
|
|
+ this.showPopover = false
|
|
|
+ if (this.language == lan) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$store.commit('setLang', lan)
|
|
|
+ bus.$emit('selectLang')
|
|
|
+ this.$i18n.locale = lan
|
|
|
+ setVantLang(lan)
|
|
|
+ this.$store.commit('CHANGE_META_INFO', {
|
|
|
+ title: this.$t('html.title'),
|
|
|
+ description: this.$t('html.description'),
|
|
|
+ keywords: this.$t('html.keywords')
|
|
|
+ })
|
|
|
+ if (this.isLogin) {
|
|
|
+ updateUserLanguage({
|
|
|
+ language: lan
|
|
|
+ }).then(res => {}).catch(() => {})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formFocus() {
|
|
|
+ this.$refs['accout'] && this.$refs['accout'].focus();
|
|
|
+ this.$refs['email'] && this.$refs['email'].focus();
|
|
|
+ },
|
|
|
+ toStatement(type) {
|
|
|
+ if (this.$route.name == 'statement') {
|
|
|
+ this.$router.replace('/statement/' + type)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$router.push('/statement/' + type)
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@r: 3.75vw;
|
|
|
+.header {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 10;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 11px 16px;
|
|
|
+ justify-content: space-between;
|
|
|
+ column-gap: 10px;
|
|
|
+ background: #202C43;
|
|
|
+ box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ column-gap: 20px;
|
|
|
+ }
|
|
|
+ .href {
|
|
|
+ cursor: pointer;
|
|
|
+ background: #FF6301;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 9px 10px;
|
|
|
+ }
|
|
|
+ .lan-box {
|
|
|
+ column-gap: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon {
|
|
|
+ width: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logo-box {
|
|
|
+ margin-bottom: 7px;
|
|
|
+ .logo {
|
|
|
+ display: block;
|
|
|
+ width: 20px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.top {
|
|
|
+ background-image: url('@/assets/img/landing/bg.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: (110/@r) (20/@r) (21/@r) (32/@r);
|
|
|
+ .title {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: (22/@r);
|
|
|
+ color: #FF5A00;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ text-shadow: 2px 2px 2px rgba(255,25,19,0.37);
|
|
|
+ text-stroke: 1px #FF5A00;
|
|
|
+ padding-bottom: (8/@r);
|
|
|
+ }
|
|
|
+ .sub {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: (16/@r);
|
|
|
+ color: #FFF2D4;
|
|
|
+ text-shadow: 2px 2px 3px rgba(255,61,3,0.5);
|
|
|
+ }
|
|
|
+}
|
|
|
+.box {
|
|
|
+ color: #0037FF;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ text-stroke: 1px #0037FF;
|
|
|
+ column-gap: 6px;
|
|
|
+ font-size: (14/@r);
|
|
|
+ padding-bottom: (38/@r);
|
|
|
+ .number {
|
|
|
+ font-size: (30/@r);
|
|
|
+ }
|
|
|
+}
|
|
|
+.box1 {
|
|
|
+ column-gap: 10px;
|
|
|
+ color: #FFF2D4;
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ row-gap: 10px;
|
|
|
+ .left {
|
|
|
+ column-gap: 10px;
|
|
|
+ .line {
|
|
|
+ width: 1px;
|
|
|
+ height: 14px;
|
|
|
+ background: linear-gradient( 180deg, rgba(238,238,238,0) 0%, #F5BE52 49%, rgba(216,216,216,0) 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.popover-body {
|
|
|
+ padding: 10px 0;
|
|
|
+ .item {
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #202C43;
|
|
|
+ padding: 10px 0;
|
|
|
+ width: 96px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.section {
|
|
|
+ padding: 30px 46px;
|
|
|
+ .tabs {
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #D8D8D8;
|
|
|
+ padding: 3px;
|
|
|
+ column-gap: 8px;
|
|
|
+ }
|
|
|
+ .tab {
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 6px;
|
|
|
+ color: #202C43;
|
|
|
+ &.active {
|
|
|
+ background: #202C43;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.login-land {
|
|
|
+ padding-top: 24px;
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .el-autocomplete {
|
|
|
+ display: block;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #D8D8D8;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ &.focus {
|
|
|
+ border-color: #888888;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.area-box {
|
|
|
+ width: 64px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1;
|
|
|
+ text-align: center;
|
|
|
+ color: #202C43;
|
|
|
+ border-right: 1px solid #202C43;
|
|
|
+ justify-content: center;
|
|
|
+ column-gap: 2px;
|
|
|
+}
|
|
|
+.code-box {
|
|
|
+ .el-input {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .send {
|
|
|
+ min-width: 96px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ background: #202C43;
|
|
|
+ border-radius: 0px 4px 4px 0px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.suffix {
|
|
|
+ height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 11px;
|
|
|
+}
|
|
|
+.van-icon {
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.eye {
|
|
|
+ display: block;
|
|
|
+ width: 20px;
|
|
|
+}
|
|
|
+.href {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.label {
|
|
|
+ color: #7D8080;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-top: 2px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ .el-icon-caret-bottom {
|
|
|
+ transition: transform 0.4s;
|
|
|
+ &.active {
|
|
|
+ transform: rotateZ(-180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.rule-box {
|
|
|
+ padding: 0 16px;
|
|
|
+ .rule {
|
|
|
+ column-gap: 6px;
|
|
|
+ &.active {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check {
|
|
|
+ width: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.btn-box {
|
|
|
+ padding: 0px 3px;
|
|
|
+ margin-top: 20px;
|
|
|
+ word-break: break-all;
|
|
|
+ height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: linear-gradient( 192deg, #2352FF 0%, #0037FF 100%);
|
|
|
+ border-radius: 4px;
|
|
|
+ justify-content: center;
|
|
|
+ column-gap: 4px;
|
|
|
+ .icon {
|
|
|
+ min-width: 14px;
|
|
|
+ max-width: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.href1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ color: #616161;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 12px;
|
|
|
+ .check {
|
|
|
+ width: 12px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #0037FF;
|
|
|
+ }
|
|
|
+}
|
|
|
+.section1 {
|
|
|
+ padding: 20px 16px;
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ text-align: center;
|
|
|
+ color: #888888;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.cell {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 4px;
|
|
|
+ &+.cell {
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ background: #FFFAEE;
|
|
|
+ min-width: 62px;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #202C43;
|
|
|
+ .icon {
|
|
|
+ width: 28px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0px;
|
|
|
+ background: #FFFAEE;
|
|
|
+ padding: 11px 9px 11px 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #202C43;
|
|
|
+ font-size: 12px;
|
|
|
+ .text {
|
|
|
+ min-width: 0px;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ height: 12px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: linear-gradient( 156deg, #FF9D2D 0%, #FF6301 100%);
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-top: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.section2 {
|
|
|
+ padding: 20px 15px;
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 33px;
|
|
|
+ }
|
|
|
+ .van-row + .van-row {
|
|
|
+ margin-top: 9px;
|
|
|
+ }
|
|
|
+ .col {
|
|
|
+ height: 100%;
|
|
|
+ padding: 16px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .col1 {
|
|
|
+ background-image: url('@/assets/img/landing/bg1.png');
|
|
|
+ }
|
|
|
+ .col2 {
|
|
|
+ background-image: url('@/assets/img/landing/bg2.png');
|
|
|
+ }
|
|
|
+ .col3 {
|
|
|
+ background-image: url('@/assets/img/landing/bg3.png');
|
|
|
+ }
|
|
|
+ .col4 {
|
|
|
+ background-image: url('@/assets/img/landing/bg4.png');
|
|
|
+ }
|
|
|
+ .col5 {
|
|
|
+ background-image: url('@/assets/img/landing/bg5.png');
|
|
|
+ }
|
|
|
+ .col6 {
|
|
|
+ background-image: url('@/assets/img/landing/bg6.png');
|
|
|
+ }
|
|
|
+ .sub {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.footer {
|
|
|
+ padding: 20px 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: linear-gradient( 156deg, #FF9D2D 0%, #FF6301 100%);
|
|
|
+ .logo-box {
|
|
|
+ justify-content: center;
|
|
|
+ column-gap: 6px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: end;
|
|
|
+ .logo {
|
|
|
+ width: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .des {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 22px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
+ }
|
|
|
+ .icon-box {
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-top: 20px;
|
|
|
+ column-gap: 12px;
|
|
|
+ .app {
|
|
|
+ width: 22px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .router-box {
|
|
|
+ justify-content: flex-end;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ white-space: nowrap;
|
|
|
+ column-gap: 7px;
|
|
|
+ row-gap: 5px;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 12px;
|
|
|
+ padding-top: 14px;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ .item {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 16px;
|
|
|
+ padding-top: 14px;
|
|
|
+ .bold {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep{
|
|
|
+ .box1 {
|
|
|
+ .span {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #2252FF;
|
|
|
+ vertical-align: baseline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cell {
|
|
|
+ .right {
|
|
|
+ .span {
|
|
|
+ color: #0037FF;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login-land {
|
|
|
+ .el-form-item__content {
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #D8D8D8;
|
|
|
+ }
|
|
|
+ .el-form-item,.el-autocomplete {
|
|
|
+ &.focus {
|
|
|
+ .el-form-item__content {
|
|
|
+ border-color: #888888;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 12px;
|
|
|
+ border: none;
|
|
|
+ padding-left: 13px;
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ .el-input-group {
|
|
|
+ .el-input__inner {
|
|
|
+ padding-left: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input-group__prepend {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.van-popover {
|
|
|
+ .van-popover__arrow {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lxf
