| | |
| | | <template> |
| | | <div class="login_page"> |
| | | <!-- <headers /> --> |
| | | <tab-head :leftShow="false" :rightShow="false"> |
| | | <van-popover v-model="languageShow" trigger="click" :actions="actions" @select="onSelect" placement="bottom-end"> |
| | | <van-popover |
| | | v-model="languageShow" |
| | | trigger="click" |
| | | :actions="actions" |
| | | @select="onSelect" |
| | | placement="bottom-end" |
| | | > |
| | | <template #reference> |
| | | <div class="multilingual"> |
| | | <img src="../../assets/img/language.svg" alt="" /> |
| | | <img src="../../assets/img/language_b.png" alt="" /> |
| | | </div> |
| | | </template> |
| | | </van-popover> |
| | | </tab-head> |
| | | |
| | | <img src="../../assets/img/logo.png" alt="" class="logo"> |
| | | <template #left> |
| | | <img src="@/assets/img/logo_1.png" class="left_icon" /> |
| | | </template> |
| | | </tab-head> |
| | | |
| | | <div class="login_title animated slideInDown"> |
| | | <span>{{ $t("dlan") }}</span> |
| | |
| | | <div class="logins_content"> |
| | | <div class="login_forms"> |
| | | <div class="top_forms"> |
| | | <div class="forms_title">{{ $t('hj27') }}</div> |
| | | <el-input :placeholder="$t('hj9')" :size="medium" v-model="userName" clearable> |
| | | <div class="forms_title">{{ $t("hj27") }}</div> |
| | | <el-input |
| | | :placeholder="$t('hj9')" |
| | | :size="medium" |
| | | v-model="userName" |
| | | clearable |
| | | > |
| | | </el-input> |
| | | <div class="forms_title">{{ $t('Password') }}</div> |
| | | <el-input show-password :placeholder="$t('hj10')" :size="medium" v-model="userPassword" |
| | | @input="handleInput()"> |
| | | <div class="forms_title">{{ $t("Password") }}</div> |
| | | <el-input |
| | | show-password |
| | | :placeholder="$t('hj10')" |
| | | :size="medium" |
| | | v-model="userPassword" |
| | | @input="handleInput()" |
| | | > |
| | | </el-input> |
| | | </div> |
| | | <div class="bottom_btns"> |
| | | <van-button type="info" :disabled="!btnClass" class="butn" @click="loginIN"> |
| | | <van-button |
| | | type="info" |
| | | :disabled="!btnClass" |
| | | class="butn" |
| | | @click="loginIN" |
| | | > |
| | | {{ $t("立即登录") }} |
| | | </van-button> |
| | | <van-button type="info" plain class="butn_2" @click="$router.push('/register')"> |
| | | <!-- <van-button |
| | | type="info" |
| | | plain |
| | | class="butn_2" |
| | | @click="$router.push('/register')" |
| | | > |
| | | {{ $t("免費註冊") }} |
| | | </van-button> |
| | | <!-- <div class="password-operate" data-v-8cc76a7b=""> |
| | | <div class="forget" data-v-8cc76a7b="" @click="getApp()"> |
| | | {{ $t("hj12") }} |
| | | </van-button> --> |
| | | </div> |
| | | |
| | | <div class="login_footer"> |
| | | <div class="tui-first"> |
| | | <div @click="$router.push('/register')">{{ $t("立即注册") }}</div> |
| | | <div class="symbol"></div> |
| | | <div @click="$store.dispatch('CustomerService')"> |
| | | {{ $t("kf") }} |
| | | </div> |
| | | <div class="remember" data-v-8cc76a7b=""> |
| | | <van-checkbox @change="checkboxChange" v-model="checked">{{ |
| | | $t("記住帳戶密碼") |
| | | }}</van-checkbox> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="register" data-v-8cc76a7b=""> |
| | | {{ $t("還沒賬號?") }} |
| | | <span @click="$router.push('/register')" data-v-8cc76a7b="" style="color:#c4d600">{{ $t("免費註冊") }}</span> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | // import headers from "./components/header.vue"; |
| | | import tabHead from "../../components/tabHead.vue"; |
| | | import * as api from "@/axios/api"; |
| | | import { Notify } from "vant"; |
| | |
| | | text: "English", |
| | | lang: "en" |
| | | }, |
| | | { text: "español", lang: "es" } |
| | | ], |
| | | { |
| | | text: "中文(繁体)", |
| | | lang: "zh-Hant" |
| | | }, |
| | | { |
| | | text: "हिंदी", |
| | | lang: "hi" |
| | | } |
| | | ] |
| | | }; |
| | | }, |
| | | components: { |
| | | // headers, |
| | | tabHead, |
| | | // headers, |
| | | tabHead |
| | | }, |
| | | mounted() { |
| | | const ret = window.localStorage.getItem("login_admin"); |
| | |
| | | |
| | | setTimeout(() => { |
| | | // this.$router.push("/home"); |
| | | this.$router.push("/home_index"); |
| | | this.$router.push("/"); |
| | | }, 1000); |
| | | } else { |
| | | Notify({ type: "warning", message: data.msg }); |
| | |
| | | onSelect(e) { |
| | | window.localStorage.setItem("language", e.lang); |
| | | this.$i18n.locale = e.lang; |
| | | }, |
| | | } |
| | | }, |
| | | beforeDestroy() { }, |
| | | created() { } |
| | | beforeDestroy() {}, |
| | | created() {} |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | @green: #c4d600; |
| | | @Black1: #13161e; |
| | | |
| | | .login_footer { |
| | | margin-top: 3rem; |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | |
| | | .tui-first { |
| | | display: flex; |
| | | align-items: center; |
| | | color: #0e7ddd; |
| | | font-size: 0.4rem; |
| | | } |
| | | .symbol { |
| | | background-color: #ccc; |
| | | width: 1px; |
| | | height: 0.275rem; |
| | | margin: 0 0.225rem; |
| | | } |
| | | } |
| | | |
| | | .password-operate { |
| | | display: flex; |
| | |
| | | font-weight: 700; |
| | | font-size: 0.7rem; |
| | | line-height: 0.66667rem; |
| | | color: #14181f; |
| | | text-align: center; |
| | | padding: 0.6rem 0.6rem 0; |
| | | } |
| | | |
| | | /deep/ .van-checkbox__label { |
| | |
| | | flex-direction: column; |
| | | height: 100vh; |
| | | |
| | | .left_icon { |
| | | width: 112px; |
| | | height: 32px; |
| | | } |
| | | |
| | | .multilingual { |
| | | width: .8em; |
| | | height: .8em; |
| | | width: 0.8em; |
| | | height: 0.8em; |
| | | margin-left: 0.25em; |
| | | |
| | | img { |
| | |
| | | width: 100%; |
| | | height: 9.7436rem; |
| | | margin-top: 0.4359rem; |
| | | background: #fff; |
| | | // padding: 0 0.4564rem; |
| | | |
| | | .login_forms { |
| | | width: 100%; |
| | | |
| | | border-top-left-radius: 0.26667rem; |
| | | border-top-right-radius: 0.26667rem; |
| | | padding: 0.34667rem 0.4rem; |
| | | padding: 0.2rem 0.6rem; |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | flex-wrap: wrap; |
| | | |
| | | .forms_title { |
| | | font-size: .4rem; |
| | | margin-top: .5rem; |
| | | margin-bottom: .2rem; |
| | | font-size: 0.3rem; |
| | | margin-top: 0.5rem; |
| | | margin-bottom: 0.2rem; |
| | | font-weight: 300; |
| | | opacity: 0.7; |
| | | } |
| | | |
| | | .user_name, |
| | |
| | | width: 100%; |
| | | height: 50px; |
| | | background: #fff; |
| | | // background: #1e1e1e; |
| | | border-radius: 0.3564rem; |
| | | |
| | | >input { |
| | | > input { |
| | | width: 100%; |
| | | height: 100%; |
| | | padding-left: 0.3564rem; |
| | |
| | | /deep/.el-input__inner { |
| | | width: 100%; |
| | | height: 70px; |
| | | background-color: #fff !important; |
| | | // background: #1e1e1e; |
| | | border-radius: 8px; |
| | | font-size: 0.45rem !important; |
| | | border: #ddd solid 1px; |
| | | background-color: @Black1 !important; |
| | | font-size: 0.3rem !important; |
| | | border: @Black1 solid 1px; |
| | | color: #fff; |
| | | border-bottom: rgba(#fff, 0.7) solid 1px; |
| | | } |
| | | |
| | | .bottom_btns { |
| | |
| | | margin-top: 40px; |
| | | height: 60px; |
| | | border-radius: 8px; |
| | | background: @green; |
| | | background: #1f4583; |
| | | border: none; |
| | | } |
| | | |
| | |
| | | border-radius: 8px; |
| | | color: @green; |
| | | border-color: @green; |
| | | margin-top: .4rem; |
| | | margin-top: 0.4rem; |
| | | } |
| | | |
| | | .top_btn { |
| | |
| | | font-size: 0.5128rem; |
| | | margin-top: 0.75rem; |
| | | |
| | | >span { |
| | | > span { |
| | | font-weight: 530 !important; |
| | | } |
| | | } |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | >span { |
| | | > span { |
| | | font-size: 0.3046rem; |
| | | color: #000; |
| | | background-color: #fff; |
| | |
| | | width: 3rem; |
| | | height: 3.5769rem; |
| | | |
| | | >img { |
| | | > img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |