|
@@ -1,6 +1,6 @@
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref, onMounted, computed } from "vue";
|
|
import { ref, onMounted, computed } from "vue";
|
|
|
-
|
|
|
|
|
|
|
+import QrCode from "@/components/QrCode.vue";
|
|
|
import { post } from "@/utils/request";
|
|
import { post } from "@/utils/request";
|
|
|
import { userToken } from "@/composables/config";
|
|
import { userToken } from "@/composables/config";
|
|
|
import { userApi } from "@/api/user";
|
|
import { userApi } from "@/api/user";
|
|
@@ -8,6 +8,7 @@ import { ucardApi } from "@/api/ucard";
|
|
|
import useUserStore from "@/stores/use-user-store";
|
|
import useUserStore from "@/stores/use-user-store";
|
|
|
import useRouter from "@/hooks/useRouter";
|
|
import useRouter from "@/hooks/useRouter";
|
|
|
import { useI18n } from "vue-i18n";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
|
+import logoImage from "/static/images/logo3.png";
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
const { t } = useI18n();
|
|
const { t } = useI18n();
|
|
|
const userStore = useUserStore();
|
|
const userStore = useUserStore();
|
|
@@ -131,55 +132,106 @@ const inputType = ref("password");
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
- <cwg-page-wrapper>
|
|
|
|
|
- <view>
|
|
|
|
|
- <view class="company u-flex-y u-flex-y-center">
|
|
|
|
|
- <image src="/static/images/logo.png" class="company-icon" mode="widthFix"></image>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <cwg-page-wrapper class="login-page" :isHeaderFixed="true">
|
|
|
|
|
+ <uni-row class="demo-uni-row">
|
|
|
|
|
+ <match-media :min-width="991">
|
|
|
|
|
+ <uni-col :xs="24" :sm="24" :md="12" :lg="14" :xl="16" class="left-bg">
|
|
|
|
|
+ <view class="company logo u-flex-y u-flex-y-center">
|
|
|
|
|
+ <image src="/static/images/logo4.png" class="company-icon" mode="widthFix"></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="left-box">
|
|
|
|
|
+ <view class="left-content">
|
|
|
|
|
+ <view class="h1">
|
|
|
|
|
+ <text>{{ t('newLoop.item12') }}</text>
|
|
|
|
|
+ <br />
|
|
|
|
|
+ <text class="color-white">{{ t('newLoop.item13') }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="h6 text-white">{{ t('newLoop.item14') }}</view>
|
|
|
|
|
+ <view class="company u-flex-y u-flex-y-center">
|
|
|
|
|
+ <image src="/static/images/trust-pilot.png" class="company-icon" mode="widthFix"></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </uni-col>
|
|
|
|
|
+ </match-media>
|
|
|
|
|
+ <uni-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8" class="right-f">
|
|
|
|
|
+ <view class="account">
|
|
|
|
|
+ <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>
|
|
|
|
|
+ </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>
|
|
|
|
|
|
|
|
- <view class="account">
|
|
|
|
|
- <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">
|
|
|
|
|
- <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>
|
|
|
|
|
|
|
+ <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>
|
|
|
|
|
+ <navigator url="/pages/login/reset" class="account-tip">
|
|
|
|
|
+ <text>{{ t("signin.forget") }}</text>
|
|
|
|
|
+ </navigator>
|
|
|
</view>
|
|
</view>
|
|
|
- <navigator url="/pages/login/reset" class="account-tip">
|
|
|
|
|
- <text>{{ t("signin.forget") }}</text>
|
|
|
|
|
|
|
+ <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>
|
|
</navigator>
|
|
|
- </view>
|
|
|
|
|
- <view class="cwg-button">
|
|
|
|
|
- <u-button type="primary" class="" @click="submit">
|
|
|
|
|
- {{ t("signin.login") }}
|
|
|
|
|
- </u-button>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <match-media :min-width="791">
|
|
|
|
|
+
|
|
|
|
|
|
|
|
- <!-- <navigator url="/pages/login/regist" class="account-tip">
|
|
|
|
|
- {{ t("signin.words") }}
|
|
|
|
|
- <text>{{ t("signin.signup") }}</text>
|
|
|
|
|
- </navigator> -->
|
|
|
|
|
|
|
+ <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>
|
|
|
|
|
+ </match-media>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </uni-col>
|
|
|
|
|
+ </uni-row>
|
|
|
|
|
+ <view class="bottom-box">
|
|
|
|
|
+ <match-media :max-width="791">
|
|
|
|
|
+ <view class="bottom-title ellipsis">{{ t('newSignin.item12') }}</view>
|
|
|
|
|
+ </match-media>
|
|
|
|
|
+ <match-media :min-width="791">
|
|
|
|
|
+ <view class="bottom-title">{{ t('newSignin.item12') }}</view>
|
|
|
|
|
+ </match-media>
|
|
|
|
|
+ <view class="cwg-button">
|
|
|
|
|
+ <u-button type="primary" class="" @click="">
|
|
|
|
|
+ {{ t("News.More") }}
|
|
|
|
|
+ </u-button>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</cwg-page-wrapper>
|
|
</cwg-page-wrapper>
|
|
@@ -188,10 +240,135 @@ const inputType = ref("password");
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
@import "@/uni.scss";
|
|
@import "@/uni.scss";
|
|
|
|
|
|
|
|
-page {
|
|
|
|
|
- // padding: px2rpx(5) px2rpx(27);
|
|
|
|
|
|
|
+.login-page {
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ padding: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.demo-uni-row {
|
|
|
|
|
+ margin: 0 !important;
|
|
|
|
|
+
|
|
|
|
|
+ .left-bg {
|
|
|
|
|
+ height: calc(100vh - 60px);
|
|
|
|
|
+ background-image: url(/static//images/login-bg.gif);
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ background-size: cover;
|
|
|
|
|
+ background-position: center center;
|
|
|
|
|
+
|
|
|
|
|
+ .left-box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .h1 {
|
|
|
|
|
+ // text-align: center;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 30px;
|
|
|
|
|
+ margin-top: 30px;
|
|
|
|
|
+ font-size: 700;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .h6 {
|
|
|
|
|
+ text-align: start;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .company {
|
|
|
|
|
+ padding: px2rpx(40) 0 px2rpx(50) 0;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ align-items: flex-start !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .left-content {
|
|
|
|
|
+ .h1 {
|
|
|
|
|
+ // text-align: center;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 30px;
|
|
|
|
|
+ margin-top: 30px;
|
|
|
|
|
+ font-size: 700;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .h6 {
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right-f {
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ padding: 0 px2rpx(24);
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+
|
|
|
|
|
+ .account {
|
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ height: calc(100vh - 60px);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 0 10%;
|
|
|
|
|
+
|
|
|
|
|
+ .company {
|
|
|
|
|
+ padding: px2rpx(50) 0 px2rpx(20) 0;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ align-items: center !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .company-icon {
|
|
|
|
|
+ width: px2rpx(234);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.bottom-box {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ color: #000;
|
|
|
|
|
+
|
|
|
|
|
+ .bottom-title {
|
|
|
|
|
+
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: px2rpx(14);
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ellipsis {
|
|
|
|
|
+ width: px2rpx(200);
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .cwg-button {
|
|
|
|
|
+ width: 120px !important;
|
|
|
|
|
+ padding: px2rpx(4) 0 !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
button {
|
|
button {
|
|
|
background-color: #ea002a;
|
|
background-color: #ea002a;
|
|
|
font-size: px2rpx(14);
|
|
font-size: px2rpx(14);
|
|
@@ -201,46 +378,63 @@ button {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.company {
|
|
.company {
|
|
|
- padding: px2rpx(110) 0 px2rpx(50) 0;
|
|
|
|
|
|
|
+ padding: px2rpx(50) 0 px2rpx(200) 0;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
align-items: flex-start !important;
|
|
align-items: flex-start !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.home-bg {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- z-index: -1;
|
|
|
|
|
|
|
+.logo {
|
|
|
|
|
+ margin-left: px2rpx(48);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.company-icon {
|
|
|
|
|
- width: px2rpx(117);
|
|
|
|
|
-}
|
|
|
|
|
|
|
+.title {
|
|
|
|
|
+ margin: px2rpx(32) 0;
|
|
|
|
|
+ font-size: px2rpx(24);
|
|
|
|
|
+ font-weight: bolder;
|
|
|
|
|
+ color: #e4e4e4;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
|
|
|
-.company-head {
|
|
|
|
|
- .name {
|
|
|
|
|
- font-size: px2rpx(20);
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- color: #ea002a;
|
|
|
|
|
- margin-bottom: px2rpx(2);
|
|
|
|
|
|
|
+ i {
|
|
|
|
|
+ margin-right: px2rpx(10);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .into {
|
|
|
|
|
- font-size: px2rpx(14);
|
|
|
|
|
- font-weight: 350;
|
|
|
|
|
- color: #222222;
|
|
|
|
|
|
|
+ .tit1 {
|
|
|
|
|
+ font-size: px2rpx(34);
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #000000;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tit2 {
|
|
|
|
|
+ font-size: px2rpx(16);
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ color: #cecece;
|
|
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.account {
|
|
|
|
|
- /* border-radius: px2rpx(16) px2rpx(16) px2rpx(0) px2rpx(0); */
|
|
|
|
|
- background-color: #ffffff;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- top: px2rpx(-15);
|
|
|
|
|
|
|
+.qr-title {
|
|
|
|
|
+ font-size: px2rpx(16);
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ color: #cecece;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ margin: px2rpx(40) 0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ .line {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 1px;
|
|
|
|
|
+ background-color: #e4e4e4;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .qr-tit2 {
|
|
|
|
|
+ margin: 0 px2rpx(12);
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- /* box-shadow: 0 -1px 4px rgba(97, 96, 96, 0.1); */
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.input {
|
|
.input {
|
|
@@ -277,18 +471,14 @@ button {
|
|
|
|
|
|
|
|
:deep(.u-form-item__body) {
|
|
:deep(.u-form-item__body) {
|
|
|
padding: 0 !important;
|
|
padding: 0 !important;
|
|
|
- padding-bottom: px2rpx(14) !important;
|
|
|
|
|
|
|
+ padding-bottom: px2rpx(24) !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
:deep(.wcg-checkbox) {
|
|
:deep(.wcg-checkbox) {
|
|
|
padding: 0 !important;
|
|
padding: 0 !important;
|
|
|
- /* .u-checkbox__icon-wrap {
|
|
|
|
|
- background-color: #ea002a !important;
|
|
|
|
|
- border-color: #ea002a !important;
|
|
|
|
|
- } */
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.cwg-button {
|
|
.cwg-button {
|
|
|
- padding-top: px2rpx(14) !important;
|
|
|
|
|
|
|
+ padding: px2rpx(34) 0 !important;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|