|
@@ -11,6 +11,7 @@
|
|
|
import useRouter from '@/hooks/useRouter'
|
|
import useRouter from '@/hooks/useRouter'
|
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
import companyLogo from '@/static/images/logo4.png'
|
|
import companyLogo from '@/static/images/logo4.png'
|
|
|
|
|
+ import LoginHeaderGroup from './components/LoginHeaderGroup.vue'
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
|
const { t } = useI18n()
|
|
const { t } = useI18n()
|
|
@@ -162,116 +163,135 @@
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<view class="login-page" :isHeaderFixed="true" :isLoginPage="true">
|
|
<view class="login-page" :isHeaderFixed="true" :isLoginPage="true">
|
|
|
- <uni-row class="demo-uni-row">
|
|
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <view class="main-content">
|
|
|
<cwg-match-media :min-width="991">
|
|
<cwg-match-media :min-width="991">
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="14" :xl="16">
|
|
|
|
|
- <view class="left-bg">
|
|
|
|
|
- <view class="left-box">
|
|
|
|
|
- <view class="inner">
|
|
|
|
|
- <view class="section-title">
|
|
|
|
|
- <text class="bg-secondary-opacity subtitle w-40" v-t="'newLoop.item11'"></text>
|
|
|
|
|
|
|
+ <view class="global-header-bar pc-header">
|
|
|
|
|
+ <view class="header-inner">
|
|
|
|
|
+ <view class="logo-placeholder"></view> <!-- 左侧可预留放logo或留空 -->
|
|
|
|
|
+ <LoginHeaderGroup text-color="#fff" icon-color="#fff" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </cwg-match-media>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 移动端顶部栏:悬浮在上方,深色文字 -->
|
|
|
|
|
+ <cwg-match-media :max-width="991">
|
|
|
|
|
+ <view class="mobile-header-bar">
|
|
|
|
|
+ <LoginHeaderGroup text-color="#141d22" icon-color="#141d22" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </cwg-match-media>
|
|
|
|
|
+
|
|
|
|
|
+ <uni-row class="demo-uni-row">
|
|
|
|
|
+ <cwg-match-media :min-width="991">
|
|
|
|
|
+ <uni-col :xs="24" :sm="24" :md="12" :lg="14" :xl="16">
|
|
|
|
|
+ <view class="left-bg">
|
|
|
|
|
+ <view class="left-box">
|
|
|
|
|
+ <view class="inner">
|
|
|
|
|
+ <view class="section-title">
|
|
|
|
|
+ <text class="bg-secondary-opacity subtitle w-40" v-t="'newLoop.item11'"></text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="title w-700">
|
|
|
|
|
+ {{`${t('newLoop.item12')} `}}
|
|
|
|
|
+ <text class="color-white" v-t="'newLoop.item13'"></text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="text-white" v-t="'newLoop.item14'"></view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="title w-700">
|
|
|
|
|
- <text v-t="'newLoop.item12'"></text>
|
|
|
|
|
- <text> </text>
|
|
|
|
|
- <text class="color-white" v-t="'newLoop.item13'"></text>
|
|
|
|
|
|
|
+ <image src="/static/images/trust-pilot.png" class="img-fluid mt--10" mode="widthFix"></image>
|
|
|
|
|
+ <view class="left-content">
|
|
|
|
|
+ <view class="des text-white">
|
|
|
|
|
+ <text v-html="t('newSignin.item12')"></text>
|
|
|
|
|
+ <br />
|
|
|
|
|
+ <text v-html="t('newSignin.item12_1')"></text>
|
|
|
|
|
+ <br />
|
|
|
|
|
+ <text v-html="t('newSignin.item10')"></text>
|
|
|
|
|
+ <br />
|
|
|
|
|
+ <text v-html="t('newSignin.item11')"></text>
|
|
|
|
|
+ <br />
|
|
|
|
|
+ <text v-t="'newSignin.item13'"></text>
|
|
|
|
|
+ <a
|
|
|
|
|
+ :href="`https://www.${ho}.com/doc/Risk-Disclosures-and-Acknowledgements-2020-08.pdf`"
|
|
|
|
|
+ target="_blank"
|
|
|
|
|
+ v-t="'newSignin.item13_1'"
|
|
|
|
|
+ class="doc-link"
|
|
|
|
|
+ ></a>
|
|
|
|
|
+ <text v-t="'newSignin.item13_2'"></text>
|
|
|
|
|
+ <!-- <view v-t="'newSignin.item13_3'"></view>
|
|
|
|
|
+ <text v-t="'newSignin.item13_4'"></text> -->
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="text-white" v-t="'newLoop.item14'"></view>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
- <image src="/static/images/trust-pilot.png" class="img-fluid mt--10" mode="widthFix"></image>
|
|
|
|
|
- <view class="left-content">
|
|
|
|
|
- <view class="des text-white">
|
|
|
|
|
- <text v-html="t('newSignin.item12')"></text>
|
|
|
|
|
- <br />
|
|
|
|
|
- <text v-html="t('newSignin.item12_1')"></text>
|
|
|
|
|
- <br />
|
|
|
|
|
- <text v-html="t('newSignin.item10')"></text>
|
|
|
|
|
- <br />
|
|
|
|
|
- <text v-html="t('newSignin.item11')"></text>
|
|
|
|
|
- <br />
|
|
|
|
|
- <text v-t="'newSignin.item13'"></text>
|
|
|
|
|
- <a
|
|
|
|
|
- :href="`https://www.${ho}.com/doc/Risk-Disclosures-and-Acknowledgements-2020-08.pdf`"
|
|
|
|
|
- target="_blank"
|
|
|
|
|
- v-t="'newSignin.item13_1'"
|
|
|
|
|
- class="doc-link"
|
|
|
|
|
- ></a>
|
|
|
|
|
- <text v-t="'newSignin.item13_2'"></text>
|
|
|
|
|
- <!-- <view v-t="'newSignin.item13_3'"></view>
|
|
|
|
|
- <text v-t="'newSignin.item13_4'"></text> -->
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </uni-col>
|
|
|
|
|
+ </cwg-match-media>
|
|
|
|
|
+ <uni-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8" class="right-f">
|
|
|
|
|
+ <view class="account">
|
|
|
|
|
+ <cwg-match-media :max-width="991">
|
|
|
|
|
+ <view class="company u-flex-y u-flex-y-center">
|
|
|
|
|
+ <image src="/static/images/logo.png" class="company-icon" mode="widthFix"></image>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ </cwg-match-media>
|
|
|
|
|
+ <view class="title">
|
|
|
|
|
+ <view class="tit1">{{ t('newSignin.item1') }}</view>
|
|
|
|
|
+ <view class="tit2">{{ t('newSignin.item2') }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- </uni-col>
|
|
|
|
|
- </cwg-match-media>
|
|
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8" class="right-f">
|
|
|
|
|
- <view class="account">
|
|
|
|
|
- <cwg-match-media :max-width="991">
|
|
|
|
|
- <view class="company u-flex-y u-flex-y-center">
|
|
|
|
|
- <image src="/static/images/logo.png" class="company-icon" mode="widthFix"></image>
|
|
|
|
|
|
|
+ <view>
|
|
|
|
|
+ <up-form :model="form" ref="uFormRef">
|
|
|
|
|
+ <up-form-item label="" prop="loginName">
|
|
|
|
|
+ <up-input :customStyle="customStyle" v-model="form.loginName" border="none"
|
|
|
|
|
+ :placeholder="t('signin.form.email')">
|
|
|
|
|
+ <template #prefix>
|
|
|
|
|
+ <cwg-icon name="email-outline" :size="20" color="#000" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </up-input>
|
|
|
|
|
+ </up-form-item>
|
|
|
|
|
+
|
|
|
|
|
+ <up-form-item label="" prop="password">
|
|
|
|
|
+ <up-input :customStyle="customStyle" v-model="form.password" :type="inputType" border="none"
|
|
|
|
|
+ :placeholder="t('signin.form.password')">
|
|
|
|
|
+ <template #prefix>
|
|
|
|
|
+ <cwg-icon name="lock-outline" :size="20" color="#000" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </up-input>
|
|
|
|
|
+ </up-form-item>
|
|
|
|
|
+ </up-form>
|
|
|
</view>
|
|
</view>
|
|
|
- </cwg-match-media>
|
|
|
|
|
- <view class="title">
|
|
|
|
|
- <view class="tit1">{{ t('newSignin.item1') }}</view>
|
|
|
|
|
- <view class="tit2">{{ t('newSignin.item2') }}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view>
|
|
|
|
|
- <up-form :model="form" ref="uFormRef">
|
|
|
|
|
- <up-form-item label="" prop="loginName">
|
|
|
|
|
- <up-input :customStyle="customStyle" v-model="form.loginName" border="none"
|
|
|
|
|
- :placeholder="t('signin.form.email')">
|
|
|
|
|
- <template #prefix>
|
|
|
|
|
- <cwg-icon name="email-outline" :size="20" color="#000" />
|
|
|
|
|
- </template>
|
|
|
|
|
- </up-input>
|
|
|
|
|
- </up-form-item>
|
|
|
|
|
-
|
|
|
|
|
- <up-form-item label="" prop="password">
|
|
|
|
|
- <up-input :customStyle="customStyle" v-model="form.password" :type="inputType" border="none"
|
|
|
|
|
- :placeholder="t('signin.form.password')">
|
|
|
|
|
- <template #prefix>
|
|
|
|
|
- <cwg-icon name="lock-outline" :size="20" color="#000" />
|
|
|
|
|
- </template>
|
|
|
|
|
- </up-input>
|
|
|
|
|
- </up-form-item>
|
|
|
|
|
- </up-form>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="u-flex u-flex-between u-flex-y-center mb1">
|
|
|
|
|
- <view class="check-box">
|
|
|
|
|
- <up-checkbox-group v-model="remenber" @change="checkboxChange">
|
|
|
|
|
- <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a"
|
|
|
|
|
- :label="t('newSignin.item5')" name="记住我" class="wcg-checkbox"></up-checkbox>
|
|
|
|
|
- </up-checkbox-group>
|
|
|
|
|
|
|
+ <view class="u-flex u-flex-between u-flex-y-center mb1">
|
|
|
|
|
+ <view class="check-box">
|
|
|
|
|
+ <up-checkbox-group v-model="remenber" @change="checkboxChange">
|
|
|
|
|
+ <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a"
|
|
|
|
|
+ :label="t('newSignin.item5')" name="记住我" class="wcg-checkbox"></up-checkbox>
|
|
|
|
|
+ </up-checkbox-group>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <navigator url="/pages/login/reset" class="account-tip">
|
|
|
|
|
+ <text>{{ t('signin.forget') }}</text>
|
|
|
|
|
+ </navigator>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="cwg-button">
|
|
|
|
|
+ <u-button type="primary" class="" @click="submit">
|
|
|
|
|
+ {{ t('signin.login') }}
|
|
|
|
|
+ </u-button>
|
|
|
</view>
|
|
</view>
|
|
|
- <navigator url="/pages/login/reset" class="account-tip">
|
|
|
|
|
- <text>{{ t('signin.forget') }}</text>
|
|
|
|
|
|
|
+ <navigator url="/pages/login/regist" class="account-tip">
|
|
|
|
|
+ {{ t('signin.words') }}
|
|
|
|
|
+ <text>{{ t('signin.signup') }}</text>
|
|
|
</navigator>
|
|
</navigator>
|
|
|
- </view>
|
|
|
|
|
- <view class="cwg-button">
|
|
|
|
|
- <u-button type="primary" class="" @click="submit">
|
|
|
|
|
- {{ t('signin.login') }}
|
|
|
|
|
- </u-button>
|
|
|
|
|
- </view>
|
|
|
|
|
- <navigator url="/pages/login/regist" class="account-tip">
|
|
|
|
|
- {{ t('signin.words') }}
|
|
|
|
|
- <text>{{ t('signin.signup') }}</text>
|
|
|
|
|
- </navigator>
|
|
|
|
|
- <cwg-match-media :min-width="791">
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- <view class="qr-container">
|
|
|
|
|
- <view class="qr-title">
|
|
|
|
|
- <view class="line"></view>
|
|
|
|
|
- <view class="qr-tit2">{{ t('newSignin.item2') }}</view>
|
|
|
|
|
- <view class="line"></view>
|
|
|
|
|
|
|
+ <cwg-match-media :min-width="791">
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <view class="qr-container">
|
|
|
|
|
+ <view class="qr-title">
|
|
|
|
|
+ <view class="line"></view>
|
|
|
|
|
+ <view class="qr-tit2">{{ t('newSignin.item2') }}</view>
|
|
|
|
|
+ <view class="line"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <QrCode width="200" height="200" text="cardGuide" :logo="logoImage"></QrCode>
|
|
|
</view>
|
|
</view>
|
|
|
- <QrCode width="200" height="200" text="cardGuide" :logo="logoImage"></QrCode>
|
|
|
|
|
- </view>
|
|
|
|
|
- </cwg-match-media>
|
|
|
|
|
- </view>
|
|
|
|
|
- </uni-col>
|
|
|
|
|
- </uni-row>
|
|
|
|
|
|
|
+ </cwg-match-media>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </uni-col>
|
|
|
|
|
+ </uni-row>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -286,18 +306,56 @@
|
|
|
height: 100vh;
|
|
height: 100vh;
|
|
|
border: none;
|
|
border: none;
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .global-header-bar {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: px2rpx(60);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ z-index: 100;
|
|
|
|
|
+
|
|
|
|
|
+ &.pc-header {
|
|
|
|
|
+ background-color: transparent;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header-inner {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 0 5%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between; /* 两端对齐,可放logo和组件 */
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .mobile-header-bar {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: px2rpx(20);
|
|
|
|
|
+ right: px2rpx(20);
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .main-content {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ background-image: url(/static/images/login-bg.gif);
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ background-size: cover;
|
|
|
|
|
+ background-position: center center;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.demo-uni-row {
|
|
.demo-uni-row {
|
|
|
|
|
+ height: 100%;
|
|
|
margin: 0 !important;
|
|
margin: 0 !important;
|
|
|
|
|
|
|
|
.left-bg {
|
|
.left-bg {
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
- min-height: 100vh;
|
|
|
|
|
- background-image: url(/static/images/login-bg.gif);
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
- background-size: cover;
|
|
|
|
|
- background-position: center center;
|
|
|
|
|
|
|
+ min-height: calc(100vh - 120px);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -308,7 +366,7 @@
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: flex-start;
|
|
align-items: flex-start;
|
|
|
width: 60%;
|
|
width: 60%;
|
|
|
- margin-top: px2rpx(20);
|
|
|
|
|
|
|
+ //margin-top: px2rpx(20);
|
|
|
|
|
|
|
|
.inner {
|
|
.inner {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -316,14 +374,14 @@
|
|
|
margin-bottom: px2rpx(20);
|
|
margin-bottom: px2rpx(20);
|
|
|
|
|
|
|
|
.section-title {
|
|
.section-title {
|
|
|
- margin-top: px2rpx(30);
|
|
|
|
|
|
|
+ margin-top: px2rpx(10);
|
|
|
margin-bottom: px2rpx(10);
|
|
margin-bottom: px2rpx(10);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
.title {
|
|
|
- font-size: px2rpx(60);
|
|
|
|
|
- line-height: 1.3;
|
|
|
|
|
|
|
+ font-size: px2rpx(50);
|
|
|
|
|
+ line-height: 1;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
}
|
|
}
|
|
@@ -362,7 +420,7 @@
|
|
|
|
|
|
|
|
.img-fluid {
|
|
.img-fluid {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- max-width: px2rpx(240);
|
|
|
|
|
|
|
+ max-width: px2rpx(200);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.mt--10 {
|
|
.mt--10 {
|
|
@@ -421,12 +479,13 @@
|
|
|
.right-f {
|
|
.right-f {
|
|
|
background-color: var(--color-white);
|
|
background-color: var(--color-white);
|
|
|
padding: 0 px2rpx(24);
|
|
padding: 0 px2rpx(24);
|
|
|
|
|
+ height: 100%;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
.account {
|
|
.account {
|
|
|
background-color: var(--color-white);
|
|
background-color: var(--color-white);
|
|
|
position: relative;
|
|
position: relative;
|
|
|
- height: calc(100vh - 60px);
|
|
|
|
|
|
|
+ height: calc(100vh - 120px);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
justify-content: center;
|