|
@@ -1,57 +1,74 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="conatiner">
|
|
<div class="conatiner">
|
|
|
- <div class="login-wrap">
|
|
|
|
|
- <div>
|
|
|
|
|
- <div class="logo">
|
|
|
|
|
- <span> {{$t('营销管理平台')}}</span><br>
|
|
|
|
|
- <small>SALE-MANAGE-SYSTEM</small>
|
|
|
|
|
|
|
+ <div class="login-img">
|
|
|
|
|
+ <div style="height: 30px;float: right;margin-top: 10px">
|
|
|
|
|
+ <div class="right-operation flex-align-center">
|
|
|
|
|
+ <svg t="1725853431060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9958" width="16" height="16"><path d="M512 0a512 512 0 1 0 512 512A513.4848 513.4848 0 0 0 512 0z m371.2 262.4a467.968 467.968 0 0 1 76.8 217.6h-256A990.464 990.464 0 0 0 688.0256 307.2a1241.0368 1241.0368 0 0 0 195.1744-44.8zM838.4 204.8a1267.456 1267.456 0 0 1-166.4 38.4 1264.128 1264.128 0 0 0-51.2-166.4 454.1952 454.1952 0 0 1 217.6 128zM384 480a1396.1728 1396.1728 0 0 1 16.0256-166.4c35.2256 3.2256 73.6256 6.4 108.8 6.4 38.4 0 73.6256-3.1744 108.8-6.4a946.2784 946.2784 0 0 1 15.9744 166.4z m256 64a1396.1728 1396.1728 0 0 1-15.9744 166.4c-38.4-3.1744-73.5744-6.4-111.9744-6.4s-73.6256 3.2256-108.8 6.4a946.2784 946.2784 0 0 1-15.9744-166.4zM480 64h64a1058.1504 1058.1504 0 0 1 67.2256 185.6A533.7088 533.7088 0 0 1 512 256c-32 0-64-3.1744-96-3.1744a1089.8944 1089.8944 0 0 1 64-188.8256z m-76.8 12.8a843.6736 843.6736 0 0 0-51.2 166.4A1398.8352 1398.8352 0 0 1 185.6 204.8a454.1952 454.1952 0 0 1 217.6-128zM140.8 262.4A1241.0368 1241.0368 0 0 0 336.0256 307.2a990.464 990.464 0 0 0-15.9744 172.8h-256a455.68 455.68 0 0 1 76.8-217.6z m0 499.2a467.968 467.968 0 0 1-76.8-217.6h256A990.464 990.464 0 0 0 336.0256 716.8a1241.0368 1241.0368 0 0 0-195.2256 44.8zM185.6 819.2a1267.456 1267.456 0 0 1 166.4-38.4 1264.128 1264.128 0 0 0 51.2 166.4 454.1952 454.1952 0 0 1-217.6-128z m358.4 140.8h-64a1058.1504 1058.1504 0 0 1-67.1744-185.6c32-3.1744 64-3.1744 96-3.1744s64 3.2256 96 3.2256a900.7616 900.7616 0 0 1-60.7744 185.6z m76.8-12.8a843.6736 843.6736 0 0 0 51.2-166.4 1398.8352 1398.8352 0 0 1 166.4 38.4 454.1952 454.1952 0 0 1-217.6 128z m262.4-185.6A1241.0368 1241.0368 0 0 0 687.9744 716.8a990.464 990.464 0 0 0 16.0256-172.8h256a455.68 455.68 0 0 1-76.8 217.6z" fill="#FFFFFF" p-id="9959"></path></svg>
|
|
|
|
|
+ <el-dropdown style="margin-left: 5px;margin-right: 30px">
|
|
|
|
|
+ <span class="el-dropdown-link">
|
|
|
|
|
+ <div class="flex">
|
|
|
|
|
+ {{languagename}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
|
|
+ <el-dropdown-item v-for="item in langusge" :key="item.index" @click.native="i18nChangeLanguage(item.languagecode)">{{item.languagename}}</el-dropdown-item>
|
|
|
|
|
+ </el-dropdown-menu>
|
|
|
|
|
+ </el-dropdown>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="login-form">
|
|
|
|
|
- <h4 class="title">{{$t('登录')}}</h4>
|
|
|
|
|
- <el-tabs v-model="activeName">
|
|
|
|
|
- <el-tab-pane :label="$t(`账号登录`)" name="first">
|
|
|
|
|
- <el-form :rules="rules2" ref="loginForm" :model="loginForm">
|
|
|
|
|
- <el-form-item prop="phonenumber">
|
|
|
|
|
- <el-input v-model="loginForm.phonenumber" :placeholder="$t(`账号`)" @keyup.native.enter="loginbyaccount"></el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item prop="password">
|
|
|
|
|
- <el-input v-model="loginForm.password" type="password" :placeholder="$t(`密码`)" @keyup.native.enter="loginbyaccount">
|
|
|
|
|
- </el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item>
|
|
|
|
|
- <div class="flex-between">
|
|
|
|
|
- <el-checkbox v-model="checked">{{$t('记住账号')}}</el-checkbox>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item>
|
|
|
|
|
- <el-button type="primary" style="width:100%" @click="loginbyaccount">{{$t('登 录')}}</el-button>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-form>
|
|
|
|
|
- </el-tab-pane>
|
|
|
|
|
- <el-tab-pane :label="$t(`短信登录`)" name="second">
|
|
|
|
|
- <el-form :rules="rules" ref="loginForm" :model="loginForm">
|
|
|
|
|
- <el-form-item prop="phonenumber">
|
|
|
|
|
- <el-input v-model="loginForm.phonenumber" :placeholder="$t(`账号`)"></el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item prop="password">
|
|
|
|
|
- <el-input v-model="loginForm.password" :placeholder="$t(`验证码`)">
|
|
|
|
|
- <template slot="append">
|
|
|
|
|
- <span v-if="count > 0">{{count === 0?'获取验证码':count+ 's'}}</span>
|
|
|
|
|
- <el-button v-else @click="countDown" type="primary">{{count === 0?'获取验证码':count+ 's'}}</el-button>
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item>
|
|
|
|
|
- <div class="flex-between">
|
|
|
|
|
- <el-checkbox v-model="checked">{{$t('记住账号')}}</el-checkbox>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item>
|
|
|
|
|
- <el-button type="primary" style="width:100%" @click="login">{{$t('登 录')}}</el-button>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-form>
|
|
|
|
|
- </el-tab-pane>
|
|
|
|
|
- </el-tabs>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="login-wrap">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <div class="logo">
|
|
|
|
|
+ <span> {{$t('营销管理平台')}}</span><br>
|
|
|
|
|
+ <small>SALE-MANAGE-SYSTEM</small>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="login-form">
|
|
|
|
|
+ <h4 class="title">{{$t('登录')}}</h4>
|
|
|
|
|
+ <el-tabs v-model="activeName">
|
|
|
|
|
+ <el-tab-pane :label="$t(`账号登录`)" name="first">
|
|
|
|
|
+ <el-form :rules="rules2" ref="loginForm" :model="loginForm">
|
|
|
|
|
+ <el-form-item prop="phonenumber">
|
|
|
|
|
+ <el-input v-model="loginForm.phonenumber" :placeholder="$t(`账号`)" @keyup.native.enter="loginbyaccount"></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item prop="password">
|
|
|
|
|
+ <el-input v-model="loginForm.password" type="password" :placeholder="$t(`密码`)" @keyup.native.enter="loginbyaccount">
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <div class="flex-between">
|
|
|
|
|
+ <el-checkbox v-model="checked">{{$t('记住账号')}}</el-checkbox>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-button type="primary" style="width:100%" @click="loginbyaccount">{{$t('登 录')}}</el-button>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-tab-pane>
|
|
|
|
|
+ <el-tab-pane :label="$t(`短信登录`)" name="second">
|
|
|
|
|
+ <el-form :rules="rules" ref="loginForm" :model="loginForm">
|
|
|
|
|
+ <el-form-item prop="phonenumber">
|
|
|
|
|
+ <el-input v-model="loginForm.phonenumber" :placeholder="$t(`账号`)"></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item prop="password">
|
|
|
|
|
+ <el-input v-model="loginForm.password" :placeholder="$t(`验证码`)">
|
|
|
|
|
+ <template slot="append">
|
|
|
|
|
+ <span v-if="count > 0">{{count === 0?'获取验证码':count+ 's'}}</span>
|
|
|
|
|
+ <el-button v-else @click="countDown" type="primary">{{count === 0?'获取验证码':count+ 's'}}</el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <div class="flex-between">
|
|
|
|
|
+ <el-checkbox v-model="checked">{{$t('记住账号')}}</el-checkbox>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-button type="primary" style="width:100%" @click="login">{{$t('登 录')}}</el-button>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-tab-pane>
|
|
|
|
|
+ </el-tabs>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -60,6 +77,9 @@
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import md5 from 'js-md5'
|
|
import md5 from 'js-md5'
|
|
|
|
|
+import Vue from "vue";
|
|
|
|
|
+import zhLocale from "element-ui/lib/locale/lang/zh-CN";
|
|
|
|
|
+import enLocale from "element-ui/lib/locale/lang/en";
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
data () {
|
|
data () {
|
|
@@ -85,7 +105,9 @@ export default {
|
|
|
},
|
|
},
|
|
|
activeName:'first',
|
|
activeName:'first',
|
|
|
checked:false,
|
|
checked:false,
|
|
|
- count:0
|
|
|
|
|
|
|
+ count:0,
|
|
|
|
|
+ langusge:[],
|
|
|
|
|
+ nowType:'ZH',
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
created () {
|
|
created () {
|
|
@@ -96,6 +118,8 @@ export default {
|
|
|
this.loginForm.phonenumber = localStorage.getItem('phonenumber')
|
|
this.loginForm.phonenumber = localStorage.getItem('phonenumber')
|
|
|
this.checked = true
|
|
this.checked = true
|
|
|
}
|
|
}
|
|
|
|
|
+ this.languagelist()
|
|
|
|
|
+ this.qusetLanguage()
|
|
|
},
|
|
},
|
|
|
methods:{
|
|
methods:{
|
|
|
//验证码请求
|
|
//验证码请求
|
|
@@ -220,6 +244,38 @@ export default {
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ async languagelist () {
|
|
|
|
|
+ const res = await this.$api.requested({
|
|
|
|
|
+ id:10026401
|
|
|
|
|
+ })
|
|
|
|
|
+ this.langusge = res.data
|
|
|
|
|
+ this.nowType = sessionStorage.getItem('lang') ? sessionStorage.getItem('lang') : 'ZH'
|
|
|
|
|
+ },
|
|
|
|
|
+ async i18nChangeLanguage (type) {
|
|
|
|
|
+ console.log(type,'type翻译')
|
|
|
|
|
+ sessionStorage.setItem('lang',type)
|
|
|
|
|
+ location.reload()
|
|
|
|
|
+ /* await this.basicData.query_userauth()
|
|
|
|
|
+ this.$router.go(0)*/
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ async qusetLanguage () {
|
|
|
|
|
+ this.nowType = sessionStorage.getItem('lang')
|
|
|
|
|
+ const res = await this.$api.requested({
|
|
|
|
|
+ id:2024062809072801,
|
|
|
|
|
+ content:{
|
|
|
|
|
+ languagecode:this.nowType
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ if (this.nowType == 'ZH') {
|
|
|
|
|
+ Vue.config.lang = 'zh-cn'
|
|
|
|
|
+ Vue.locale('zh-cn', Object.assign(zhLocale))
|
|
|
|
|
+ } else {
|
|
|
|
|
+ Vue.config.lang = 'en'
|
|
|
|
|
+ Vue.locale('en', Object.assign(enLocale,res.data.EN))
|
|
|
|
|
+ }
|
|
|
|
|
+ this.languagename = this.langusge.filter(e=> e.languagecode == this.nowType)[0].languagename
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -272,15 +328,18 @@ export default {
|
|
|
font-size: 24px;
|
|
font-size: 24px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
}
|
|
}
|
|
|
|
|
+.login-img{
|
|
|
|
|
+ background: url("../../assets/wallhaven-0pq8gm.jpeg") no-repeat;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+}
|
|
|
.login-wrap{
|
|
.login-wrap{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 100vh;
|
|
|
|
|
|
|
+ height: calc(100vh - 40px);
|
|
|
/* background: #fff no-repeat 50% url(../../assets/bg.png); */
|
|
/* background: #fff no-repeat 50% url(../../assets/bg.png); */
|
|
|
- background: url("../../assets/wallhaven-0pq8gm.jpeg") no-repeat;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
.login-form{
|
|
.login-form{
|
|
|
/* min-height: 500px; */
|
|
/* min-height: 500px; */
|
|
@@ -307,4 +366,14 @@ export default {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
}
|
|
}
|
|
|
|
|
+.flex{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ background: none;
|
|
|
|
|
+ color:#fff
|
|
|
|
|
+}
|
|
|
|
|
+.right-operation{
|
|
|
|
|
+ padding: 0 20px;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|