add

src/page/login.vue

@@ -1,118 +1,123 @@
 <template>
-  <div class='full-screen flex flex-center '>
-    <el-card class='login'>
-      <div class='flex flex-center' style='width: 100%'>
-        <div class='flex-child-average  flex flex-center left'>
-          <div class='flex flex-justify-start flex-align-start full-height '>
-            <img src='@/assets/img/logo.png' class='padding-14 logo'/>
-            <img src='https://hooray.gitee.io/fantastic-admin-example/assets/login-banner.a565fac8.png' class='logo-main' />
-          </div>
+  <div class='full-screen flex flex-center bg'>
+    <div class='login white-bg radius '>
+      <div class='flex flex-center flex-child-average'>
+        <div class='flex left '>
+          <img
+              src="https://wutong-1302848345.cos.ap-chengdu.myqcloud.com/wtzx/373e3ccd35be4ba2a72376050027612e.png"
+              style="height: 560px;object-fit: contain;border-bottom-left-radius: 10px;border-top-left-radius: 10px"/>
+
         </div>
 
-        <div class='flex-child-average right'>
+        <div class='right white-bg flex flex-col flex-child-average'>
 
-          <div class='flex flex-justify-end '>
+          <div class='flex flex-justify-end full-height'
+               style="margin-top: -20px;margin-right: 4px">
             <div>
-              <img src='../assets/img/code.png' style='width: 50px' @click='qrCodeLogin = !qrCodeLogin'/>
+              <img v-if="qrCodeLogin" src='../assets/img/com.png' style='width: 80px'
+                   @click='qrCodeLogin = !qrCodeLogin'/>
+              <img v-else src='../assets/img/code.png' style='width: 80px'
+                   @click='qrCodeLogin = !qrCodeLogin'/>
             </div>
           </div>
 
-          <div v-if='qrCodeLogin' class='flex flex-center flex-col'>
+          <div v-if='qrCodeLogin' class='flex flex-center flex-col mt-20'>
             <span class='font-24 black bold '>欢迎来到梧桐树云平台👏</span>
-            <div class='flex flex-col flex-center' style='height: 400rpx;width: 400rpx'>
+            <div class='flex flex-col flex-center mt-10' style='height: 360px;width: 360px'>
               <vue-qr :currentLevel='3' :logoCornerRadius='4' :logoScale='0.25' :logoSrc='logoSrc' :text='qrCodeText'
                       size='340'/>
             </div>
-            <span class='mt-20 grey-6 bold '>请使用微信扫一扫，进行登录</span>
+            <span class='mt-10 bold main-color font-16'>打开微信扫描二维码登陆梧桐树云平台</span>
           </div>
 
-          <div v-else class='padding-20' style='margin-top: -50px'>
+          <div v-else class='padding-20 flex flex-col flex-center mt-20'>
             <span class='font-24 black bold '>欢迎来到梧桐树云平台👏</span>
-            <el-form class='form' :model="form" :rules="rules" ref='loginForm'>
-              <el-form-item prop='name'>
-                <el-input
-                  v-model='form.name'
-                  size='large'
-                  placeholder="手机号码"
-                  prefix-icon="Avatar"
-                />
-              </el-form-item>
-              <el-form-item prop='pass'>
-                <el-input
-                  v-model='form.pass'
-                  size='large'
-                  placeholder="密码"
-                  :type='flag ? "text" : "password"'
-                  prefix-icon="WalletFilled">
-                    <template   v-slot:suffix>
-                      <div @click='flag=!flag' class='pointer'>
-                        <el-icon v-if='!flag'><Hide /></el-icon>
-                        <el-icon v-else><View /></el-icon>
+            <div class="flex flex-col flex-center" style="width: 450px;height: 360px">
+              <el-form ref='loginForm' :model="form" :rules="rules">
+                <el-form-item prop='name'>
+                  <el-input
+                      v-model='form.name'
+                      placeholder="手机号码"
+                      prefix-icon="Avatar"
+                      size='large'
+                  />
+                </el-form-item>
+                <el-form-item prop='pass'>
+                  <el-input
+                      v-model='form.pass'
+                      :type='flag ? "text" : "password"'
+                      placeholder="密码"
+                      prefix-icon="WalletFilled"
+                      size='large'>
+                    <template v-slot:suffix>
+                      <div class='pointer' @click='flag=!flag'>
+                        <el-icon v-if='!flag'>
+                          <Hide/>
+                        </el-icon>
+                        <el-icon v-else>
+                          <View/>
+                        </el-icon>
                       </div>
                     </template>
-                </el-input>
-              </el-form-item>
-              <el-form-item prop='code'>
-                <el-input
-                  v-model='form.code'
-                  size='large'
-                  placeholder="验证码"
-                  prefix-icon="Refresh"
-                  class='append'
-                >
-                  <template v-slot:append>
-                      <img :src='code' class='pic' style='height: 40px;background-color: red;background-blend-mode: lighten;' />
-                  </template>
-                </el-input>
-              </el-form-item>
-              <el-form-item>
-                <div class='flex flex-align-center flex-justify-between full-width'>
-                  <div></div>
-                  <el-link type='primary'  :underline='false' class='font-12'>忘记密码?</el-link>
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop='code'>
+                  <el-input
+                      v-model='form.code'
+                      class='append'
+                      placeholder="验证码"
+                      prefix-icon="Refresh"
+                      size='large'
+                  >
+                    <template v-slot:append>
+                      <img :src='code' class='pic'
+                           style='height: 40px;background-color: red;background-blend-mode: lighten;'/>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item>
+                  <div class='flex flex-align-center flex-justify-between full-width'>
+                    <div></div>
+                    <el-link :underline='false' class='font-12' type='primary'>忘记密码?</el-link>
+                  </div>
+                </el-form-item>
+              </el-form>
+              <el-button size='large' style="width: 78%" type='primary' @click='submint'>登录</el-button>
+              <div class='flex flex-col mt-10'>
+                <span class='grey-6'>由梧桐经济院提供技术支持</span>
+                <div>
+                  <el-button class='mt-10' plain size='small' type='primary' @click='loginAdmin'>admin</el-button>
                 </div>
-              </el-form-item>
-            </el-form>
-            <el-button type='primary' class='full-width' size='large' @click='submint'>登录</el-button>
-            <div class='mt-10 flex flex-center'>
-              <span>还没账户？</span>
-              <el-link type='primary' :underline='false'>注册账户</el-link>
-            </div>
-            <el-divider/>
-            <div class='flex flex-col'>
-              <span class='grey-6'>
-              由梧桐经济院提供技术支持
-              </span>
-              <div>
-                <el-button size='small' type='primary' plain class='mt-10' @click='loginAdmin'>admin</el-button>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </el-card>
+    </div>
   </div>
 </template>
 
 <route>
-  {
-    meta: {
-    layout: 'empty',
-    },
-  }
+{
+meta: {
+layout: 'empty',
+},
+}
 </route>
 
 <script>
 import md5 from 'js-md5'
-import { useStore } from '@/store/user.js'
-import { removeToken, setToken } from '../utils/auth.js'
+import {useStore} from '@/store/user.js'
+import {removeToken, setToken} from '../utils/auth.js'
 import permissionStore from '@/store/permission.js'
 import VueQr from 'vue-qr/src/packages/vue-qr.vue'
+
 export default {
   name: 'login',
-  components: { VueQr },
+  components: {VueQr},
   watch: {
     qrCodeLogin: {
-      handler (val) {
+      handler(val) {
         if (val) {
           this.qrCode()
           this.checkLogin()
@@ -121,12 +126,12 @@ export default {
       immediate: true
     }
   },
-  setup () {
+  setup() {
     const user = useStore()
     const permission = permissionStore()
-    return { user, permission }
+    return {user, permission}
   },
-  data () {
+  data() {
     return {
       flag: false,
       form: {
@@ -135,16 +140,16 @@ export default {
       },
       rules: {
         name: [
-          { required: true, message: '请输入手机号码', trigger: 'blur' },
-          { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
+          {required: true, message: '请输入手机号码', trigger: 'blur'},
+          {min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur'}
         ],
         pass: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
+          {required: true, message: '请输入密码', trigger: 'blur'},
+          {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
         ],
         code: [
-          { required: true, message: '请输入验证码', trigger: 'blur' },
-          { min: 5, max: 5, message: '验证码不正确', trigger: 'blur' }
+          {required: true, message: '请输入验证码', trigger: 'blur'},
+          {min: 5, max: 5, message: '验证码不正确', trigger: 'blur'}
         ]
       },
       code: '',
@@ -152,29 +157,37 @@ export default {
       qrCodeLogin: true,
       time: null,
       qrCodeText: '',
-      sessionId: ''
+      sessionId: '',
+      logoSrc: new URL('../assets/img/logo.png', import.meta.url).href
     }
   },
-  created () {
+  created() {
     this.permission.cleanPermission()
     removeToken()
     this.init()
   },
-  unmounted () {
+  unmounted() {
     clearInterval(this.time)
   },
   methods: {
-    init () {
+    init() {
       this.$api.login.captcha().then(res => {
         this.code = res.image
         this.header = res.key
       })
     },
-    submint () {
+    submint() {
       this.$refs.loginForm.validate((res) => {
         if (res) {
-          const params = { tenantId: '000000', username: this.form.name, password: md5(this.form.pass), grant_type: 'captcha', scope: 'all', type: 'account' }
-          const header = { captchaKey: this.header, captchaCode: this.form.code }
+          const params = {
+            tenantId: '000000',
+            username: this.form.name,
+            password: md5(this.form.pass),
+            grant_type: 'captcha',
+            scope: 'all',
+            type: 'account'
+          }
+          const header = {captchaKey: this.header, captchaCode: this.form.code}
           this.$api.login.login(params, header).then(res => {
             if (res.error_description) {
               this.$message.error(res.error_description)
@@ -190,11 +203,11 @@ export default {
         }
       })
     },
-    loginAdmin () {
+    loginAdmin() {
       this.form.name = 'admin'
       this.form.pass = 'admin'
     },
-    getInfo () {
+    getInfo() {
       this.getPermission()
       this.$api.login.getUserInfo().then(res => {
         if (res.code === 200) {
@@ -208,14 +221,14 @@ export default {
         }
       })
     },
-    getPermission () {
+    getPermission() {
       this.$api.login.getPermission().then(res => {
         if (res.code === 200) {
           this.permission.addPermission(res.data)
         }
       })
     },
-    checkLogin () {
+    checkLogin() {
       let count = 0
       this.time = setInterval(() => {
         count = count + 1
@@ -233,7 +246,7 @@ export default {
         }
       }, 1000)
     },
-    qrCode () {
+    qrCode() {
       this.$api.login.qrCode().then(res => {
         if (res.code === 200) {
           this.sessionId = res.data
@@ -241,13 +254,20 @@ export default {
         }
       })
     },
-    codeLogin () {
-      this.$api.login.qrCodeLogin({ sessionId: this.sessionId }).then(res => {
+    codeLogin() {
+      this.$api.login.qrCodeLogin({sessionId: this.sessionId}).then(res => {
         if (res.code === 200) {
           const tmp = res.data
           console.log(Object.prototype.hasOwnProperty.call(tmp, 'phone'))
           if (Object.prototype.hasOwnProperty.call(tmp, 'phone')) {
-            const params = { tenantId: '000000', phone: res.data.phone, openId: res.data.openId, grant_type: 'qrcode', scope: 'all', type: 'account' }
+            const params = {
+              tenantId: '000000',
+              phone: res.data.phone,
+              openId: res.data.openId,
+              grant_type: 'qrcode',
+              scope: 'all',
+              type: 'account'
+            }
             this.$api.login.loginByCode(params).then(res => {
               if (res.error_description) {
                 this.$message.error(res.error_description)
@@ -266,44 +286,34 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-.login{
-  :deep(.el-card__body){
-    padding: 0 !important;
-  };
-  padding: 0;
-  display: flex;
-  top: 50%;
-  left: 50%;
-  border-radius: 10px;
-  background-color: white;
-  width: 950px;
-  height: 500px;
+.bg {
+  background-image: url("https://wutong-1302848345.cos.ap-chengdu.myqcloud.com/wtzx/7667edec62f44063a50c66e8654eaa87.png");
+}
+
+.login {
   .left {
-    background-color: #F5F7FA;
-    height: 500px;
-    .logo {
-      width: 45px;
-      height: 45px;
-      border-radius: 50%;
-    }
+    height: auto;
+    width: 560;
+
     .logo-main {
-      width: 100%;
-      margin-top: 70px;
-      margin-left: -80px;
+      width: 80%;
     }
   }
+
   .right {
-    background-color: white;
-    height: 500px;
-    .form{
-      margin-top: 30px;
+    width: 560px;
+    height: auto;
+
+    .form {
     }
   }
 }
+
 .append {
-  :deep(.el-input-group__append){
+  :deep(.el-input-group__append) {
     background-color: white;
   }
+
   .pic {
     border-top: #DDDFE5 1px solid;
     border-bottom: #DDDFE5 1px solid;