diff --git a/backend/src/main/java/io/dataease/auth/util/JWTUtils.java b/backend/src/main/java/io/dataease/auth/util/JWTUtils.java
index 6d0aaef239..cebe34c5f5 100644
--- a/backend/src/main/java/io/dataease/auth/util/JWTUtils.java
+++ b/backend/src/main/java/io/dataease/auth/util/JWTUtils.java
@@ -68,7 +68,8 @@ public class JWTUtils {
 
     public static boolean needRefresh(String token) {
         Date exp = JWTUtils.getExp(token);
-        return new Date().getTime() >= exp.getTime();
+        Long advanceTime = 5000L;
+        return (new Date().getTime() + advanceTime) >= exp.getTime();
     }
 
     /**
diff --git a/frontend/src/permission.js b/frontend/src/permission.js
index c5961184b6..c612f949c9 100644
--- a/frontend/src/permission.js
+++ b/frontend/src/permission.js
@@ -18,9 +18,13 @@ import {
   changeFavicon
 } from '@/utils/index'
 import Layout from '@/layout/index'
-import { getSysUI } from '@/utils/auth'
+import {
+  getSysUI
+} from '@/utils/auth'
 
-import { getSocket } from '@/websocket'
+import {
+  getSocket
+} from '@/websocket'
 
 NProgress.configure({
   showSpinner: false
@@ -53,14 +57,19 @@ const routeBefore = (callBack) => {
     callBack()
   }
 }
-router.beforeEach(async (to, from, next) => routeBefore(() => {
+router.beforeEach(async(to, from, next) => routeBefore(() => {
   // start progress bar
   NProgress.start()
-  const mobileIgnores = ['/delink']
+  const mobileIgnores = ['/delink', '/de-auto-login']
   const mobilePreview = '/preview/'
+  const hasToken = getToken()
 
   if (isMobile() && !to.path.includes(mobilePreview) && mobileIgnores.indexOf(to.path) === -1) {
-    window.location.href = window.origin + '/app.html'
+    let urlSuffix = '/app.html'
+    if (hasToken) {
+      urlSuffix += ('?detoken=' + hasToken)
+    }
+    window.location.href = window.origin + urlSuffix
     NProgress.done()
   }
 
@@ -68,7 +77,7 @@ router.beforeEach(async (to, from, next) => routeBefore(() => {
   document.title = getPageTitle(to.meta.title)
 
   // determine whether the user has logged in
-  const hasToken = getToken()
+
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
diff --git a/mobile/src/common/utils.js b/mobile/src/common/utils.js
index f4c10d9700..2e6fa8b2f7 100644
--- a/mobile/src/common/utils.js
+++ b/mobile/src/common/utils.js
@@ -142,4 +142,17 @@ export function parseLanguage() {
     const language = getLanguage()
     if(language === 'sys') return uni.getLocale()
     return language
-}
\ No newline at end of file
+}
+
+export function getUrlParams(url){
+  const Params = {}
+  if(url.indexOf('?')>0){//判断是否有qurey
+    let parmas = url.slice(url.indexOf('?')+1)//截取出query
+    const paramlists = parmas.split('&')//分割键值对
+    for (const param of paramlists) {
+      let a = param.split('=')
+      Object.assign(Params,{[a[0]]:a[1]})//将键值对封装成对象
+    }
+  }
+  return Params
+}
diff --git a/mobile/src/pages.json b/mobile/src/pages.json
index 1e6be356ac..1fcfb0dc34 100644
--- a/mobile/src/pages.json
+++ b/mobile/src/pages.json
@@ -1,192 +1,192 @@
 {
-	"pages": [ 
+  "pages": [
+
+    {
+      "path": "pages/login/index",
+      "style": {
+        "navigationBarTitleText": "%navigate.login%",
+        "app-plus": {
+          "titleNView": false
+        }
+      }
+    },
+    {
+      "path": "pages/tabBar/home/index",
+      "style": {
+        "navigationBarTitleText": "%navigate.menuHome%",
+        "app-plus": {
+          "titleNView": false
 
-        {
-			"path": "pages/login/index",
-			"style": {
-                "navigationBarTitleText": "%navigate.login%",
-				"app-plus": {
-					"titleNView": false
-				}
-			}
-		},
-        {
-			"path": "pages/tabBar/home/index",
-			"style": {
-                "navigationBarTitleText": "%navigate.menuHome%",
-				"app-plus": {
-                    "titleNView": false
-					
-				},
-                "enablePullDownRefresh": true
-			}
-		},
-        
-        {
-            "path": "pages/tabBar/home/detail",
-            "style": {
-                "navigationBarTitleText": "",
-                "app-plus": {
-					"titleNView": false,
-					"bounce": "none"
-				}
-            }
         },
-        {
-			"path": "pages/tabBar/dir/index",
-			"style": {				
-                "navigationBarTitleText": "%navigate.menuDir%",
-                "app-plus": {
-                    "titleNView": {
-                        "type": "transparent",
-                        "titleColor": "#fff",
-                        "backgroundColor": "#0faeff",
-                        "buttons": [],
-                        "searchInput": {
-                            "backgroundColor": "#fff",
-                            "borderRadius": "6px",
-                            "placeholder": "%searchPlaceholder%",
-                            "disabled": true
-                        }
-                    }
-                },
-                "enablePullDownRefresh": true
-			}
-		},
-        {
-            "path": "pages/tabBar/dir/search",
-            "style": {
-                "navigationBarTitleText": "%navigate.search%",
-                "app-plus": {
-                    "titleNView": {
-                        "titleColor": "#fff",
-                        "backgroundColor": "#0faeff",
-                        
-                        "searchInput": {
-                            "backgroundColor": "#fff",
-                            "borderRadius": "6px",
-                            "placeholder": "%searchPlaceholder%",
-                            "autoFocus": true
-                        }
-                    }
-                }
+        "enablePullDownRefresh": true
+      }
+    },
+
+    {
+      "path": "pages/tabBar/home/detail",
+      "style": {
+        "navigationBarTitleText": "",
+        "app-plus": {
+          "titleNView": false,
+          "bounce": "none"
+        }
+      }
+    },
+    {
+      "path": "pages/tabBar/dir/index",
+      "style": {
+        "navigationBarTitleText": "%navigate.menuDir%",
+        "app-plus": {
+          "titleNView": {
+            "type": "transparent",
+            "titleColor": "#fff",
+            "backgroundColor": "#0faeff",
+            "buttons": [],
+            "searchInput": {
+              "backgroundColor": "#fff",
+              "borderRadius": "6px",
+              "placeholder": "%searchPlaceholder%",
+              "disabled": true
             }
+          }
         },
-        {
-            "path": "pages/tabBar/dir/folder",
-            "style": {
-                "navigationBarTitleText": "",
-                "app-plus": {
-                    "titleNView": {
-                        "type": "transparent"
-                    }
-                },
-                "h5": {
-                    "titleNView": {
-                        "type": "transparent",
-                        "buttons": []
-                    }
-                }
+        "enablePullDownRefresh": true
+      }
+    },
+    {
+      "path": "pages/tabBar/dir/search",
+      "style": {
+        "navigationBarTitleText": "%navigate.search%",
+        "app-plus": {
+          "titleNView": {
+            "titleColor": "#fff",
+            "backgroundColor": "#0faeff",
+
+            "searchInput": {
+              "backgroundColor": "#fff",
+              "borderRadius": "6px",
+              "placeholder": "%searchPlaceholder%",
+              "autoFocus": true
             }
+          }
+        }
+      }
+    },
+    {
+      "path": "pages/tabBar/dir/folder",
+      "style": {
+        "navigationBarTitleText": "",
+        "app-plus": {
+          "titleNView": {
+            "type": "transparent"
+          }
         },
-        {
-			"path": "pages/tabBar/me/index",
-			"style": {
-                "navigationBarTitleText": "%navigate.menuMe%",
-				"app-plus": {
-					"titleNView": false
-				}
-			}
-		},
-        {
-			"path": "pages/tabBar/me/person",
-			"style": {
-				"navigationBarTitleText": "%navigate.personInfo%",
-                
-                "app-plus": {
-                    "titleNView": {
-                        "type": "transparent"
-                    }
-                }
-			}
-		},
-        {
-			"path": "pages/tabBar/me/language",
-			"style": {
-				"navigationBarTitleText": "%navigate.language%",
-                
-                "app-plus": {
-                    "titleNView": {
-                        "type": "transparent"
-                    }
-                }
-			}
-		},
-        {
-			"path": "pages/tabBar/me/about",
-			"style": {
-				"navigationBarTitleText": "%navigate.about%",
-                
-                "app-plus": {
-                    "titleNView": {
-                        "type": "transparent"
-                    }
-                }
-			}
-		},
-        {
-			"path": "pages/tabBar/me/outlink",
-			"style": {
-				"navigationBarTitleText": "",
-                
-                "app-plus": {
-                    "titleNView": {
-                        "type": "transparent"
-                    }
-                }
-			}
-		},
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "%app.name%",
-                "h5": {
-                    "maxWidth": 1190,
-                    "navigationBarTextStyle": "black",
-                    "navigationBarBackgroundColor": "#F1F1F1"
-                }
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "%app.name%",
-		"navigationBarBackgroundColor": "#ffffff",
-		"backgroundColor": "#ffffff"
-	},
-    "tabBar": {
-		"color": "#7A7E83",
-		"selectedColor": "#007AFF",
-		"borderStyle": "black",
-		"backgroundColor": "#ffffff",
-        
-		"list": [{
-				"pagePath": "pages/tabBar/home/index",
-				"iconPath": "static/home.png",
-				"selectedIconPath": "static/home_select.png",
-				"text": "%navigate.menuHome%"
-			},
-			{
-				"pagePath": "pages/tabBar/dir/index",
-				"iconPath": "static/dir.png",
-				"selectedIconPath": "static/dir_select.png",
-				"text": "%navigate.menuDir%"
-			}, {
-				"pagePath": "pages/tabBar/me/index",
-				"iconPath": "static/me.png",
-				"selectedIconPath": "static/me_select.png",
-				"text": "%navigate.menuMe%"
-			}
-		]
-	}
-}
+        "h5": {
+          "titleNView": {
+            "type": "transparent",
+            "buttons": []
+          }
+        }
+      }
+    },
+    {
+      "path": "pages/tabBar/me/index",
+      "style": {
+        "navigationBarTitleText": "%navigate.menuMe%",
+        "app-plus": {
+          "titleNView": false
+        }
+      }
+    },
+    {
+      "path": "pages/tabBar/me/person",
+      "style": {
+        "navigationBarTitleText": "%navigate.personInfo%",
+
+        "app-plus": {
+          "titleNView": {
+            "type": "transparent"
+          }
+        }
+      }
+    },
+    {
+      "path": "pages/tabBar/me/language",
+      "style": {
+        "navigationBarTitleText": "%navigate.language%",
+
+        "app-plus": {
+          "titleNView": {
+            "type": "transparent"
+          }
+        }
+      }
+    },
+    {
+      "path": "pages/tabBar/me/about",
+      "style": {
+        "navigationBarTitleText": "%navigate.about%",
+
+        "app-plus": {
+          "titleNView": {
+            "type": "transparent"
+          }
+        }
+      }
+    },
+    {
+      "path": "pages/tabBar/me/outlink",
+      "style": {
+        "navigationBarTitleText": "",
+
+        "app-plus": {
+          "titleNView": {
+            "type": "transparent"
+          }
+        }
+      }
+    },
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "%app.name%",
+        "h5": {
+          "maxWidth": 1190,
+          "navigationBarTextStyle": "black",
+          "navigationBarBackgroundColor": "#F1F1F1"
+        }
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "%app.name%",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#ffffff"
+  },
+  "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#007AFF",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+
+    "list": [{
+        "pagePath": "pages/tabBar/home/index",
+        "iconPath": "static/home.png",
+        "selectedIconPath": "static/home_select.png",
+        "text": "%navigate.menuHome%"
+      },
+      {
+        "pagePath": "pages/tabBar/dir/index",
+        "iconPath": "static/dir.png",
+        "selectedIconPath": "static/dir_select.png",
+        "text": "%navigate.menuDir%"
+      }, {
+        "pagePath": "pages/tabBar/me/index",
+        "iconPath": "static/me.png",
+        "selectedIconPath": "static/me_select.png",
+        "text": "%navigate.menuMe%"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/mobile/src/pages/login/index.vue b/mobile/src/pages/login/index.vue
index 5b10f91ac3..12b9d94dee 100644
--- a/mobile/src/pages/login/index.vue
+++ b/mobile/src/pages/login/index.vue
@@ -1,385 +1,404 @@
 <template>
-	<view 
-		v-if="axiosFinished" 
-		:class="mobileBG ? 'content-de' : 'content'"
-		:style="mobileBG ? {background:'url(' + mobileBG + ') no-repeat', 'backgroundSize':'cover'} : ''"
-		>
-		
-		<view class="input-group" >
-            <view class="input-row">
-				<text class="welcome">{{$t('login.title')}}</text>
-			</view>
-			<view class="input-row border">
-				<text class="title">{{$t('login.account')}}</text>
-				<m-input class="m-input" type="text" clearable focus v-model="username" :placeholder="$t('login.accountPlaceholder')"></m-input>
-			</view>
-			<view class="input-row border">
-				<text class="title">{{$t('login.password')}}</text>
-				<m-input type="password" displayable v-model="password" :placeholder="$t('login.passwordPlaceholder')"></m-input>
-			</view>
-			
-		</view>
-		<view class="btn-row">
-			<button type="primary" class="primary" :loading="loginBtnLoading" @tap="bindLogin">{{$t('login.loginbtn')}}</button>
-		</view>
-		
-	</view>
+  <view v-if="axiosFinished" :class="mobileBG ? 'content-de' : 'content'"
+    :style="mobileBG ? {background:'url(' + mobileBG + ') no-repeat', 'backgroundSize':'cover'} : ''">
+
+    <view class="input-group">
+      <view class="input-row">
+        <text class="welcome">{{$t('login.title')}}</text>
+      </view>
+      <view class="input-row border">
+        <text class="title">{{$t('login.account')}}</text>
+        <m-input class="m-input" type="text" clearable focus v-model="username"
+          :placeholder="$t('login.accountPlaceholder')"></m-input>
+      </view>
+      <view class="input-row border">
+        <text class="title">{{$t('login.password')}}</text>
+        <m-input type="password" displayable v-model="password" :placeholder="$t('login.passwordPlaceholder')">
+        </m-input>
+      </view>
+
+    </view>
+    <view class="btn-row">
+      <button type="primary" class="primary" :loading="loginBtnLoading"
+        @tap="bindLogin">{{$t('login.loginbtn')}}</button>
+    </view>
+
+  </view>
 </template>
 
 <script>
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex'
-	import mInput from '../../components/m-input.vue'
-    import {login, getInfo, getPublicKey, getUIinfo } from '@/api/auth'
-    import {encrypt, setLocalPK, getLocalPK, setToken, getToken, setUserInfo, getUserInfo } from '@/common/utils'
+  import {
+    mapState,
+    mapMutations
+  } from 'vuex'
+  import mInput from '../../components/m-input.vue'
+  import {
+    login,
+    getInfo,
+    getPublicKey,
+    getUIinfo
+  } from '@/api/auth'
+  import {
+    encrypt,
+    setLocalPK,
+    getLocalPK,
+    setToken,
+    getToken,
+    setUserInfo,
+    getUserInfo,
+    getUrlParams
+  } from '@/common/utils'
 
-	export default {
-		components: {
-			mInput
-		},
-		data() {
-			return {
-				username: '',
-                loginBtnLoading: false,
-				password: '',
-				mobileBG: null,
-				axiosFinished: false
-				
-			}
-		},
-		computed: mapState(['forcedLogin', 'hasLogin', 'univerifyErrorMsg', 'hideUniverify']),
-		onLoad() {
-			uni.showLoading({
-				title: this.$t('commons.loading')
-			});
-            this.loadUiInfo()
-            this.loadPublicKey()
-            if(getToken() && getUserInfo()) {
-                this.toMain()
+  export default {
+    components: {
+      mInput
+    },
+    data() {
+      return {
+        username: '',
+        loginBtnLoading: false,
+        password: '',
+        mobileBG: null,
+        axiosFinished: false
+      }
+    },
+    computed: mapState(['forcedLogin', 'hasLogin', 'univerifyErrorMsg', 'hideUniverify']),
+
+    onLoad() {
+      uni.showLoading({
+        title: this.$t('commons.loading')
+      });
+      this.loadUiInfo()
+      this.loadPublicKey()      
+      if (!this.autoLogin() && getToken() && getUserInfo()) {
+        this.toMain()
+      }
+    },
+
+    methods: {
+      ...mapMutations(['login']),
+
+      async loginByPwd() {
+        if (this.username.length < 1) {
+          uni.showToast({
+            icon: 'none',
+            title: this.$t('login.accFmtError')
+          });
+          return;
+        }
+        if (this.password.length < 1) {
+          uni.showToast({
+            icon: 'none',
+            title: this.$t('login.passwordPlaceholder')
+          });
+          return;
+        }
+        const data = {
+          username: encrypt(this.username),
+          password: encrypt(this.password)
+        };
+        this.loginBtnLoading = true
+        login(data).then(res => {
+          if (res.success) {
+            setToken(res.data.token)
+            this.toMain()
+          }
+
+        }).catch(error => {
+          this.loginBtnLoading = false
+          uni.showToast({
+            icon: 'error',
+            title: error.response.data.message,
+          });
+        })
+      },
+
+      bindLogin() {
+        this.loginByPwd()
+      },
+
+      toMain(userName) {
+        getInfo().then(res => {
+          setUserInfo(res.data)
+          uni.reLaunch({
+            url: '../tabBar/home/index',
+          });
+        })
+      },
+
+      loadUiInfo() {
+        getUIinfo().then(res => {
+          const list = res.data
+          list.forEach(item => {
+            if (item.paramKey === 'ui.mobileBG' && item.paramValue) {
+              this.mobileBG = '/system/ui/image/' + item.paramValue
+              return false
             }
-            
-		},
-		
-		methods: {
-			...mapMutations(['login']),
-			
-			async loginByPwd() {
-				
-				if (this.username.length < 1) {
-					uni.showToast({
-						icon: 'none',
-						title: this.$t('login.accFmtError')
-					});
-					return;
-				}
-				if (this.password.length < 1) {
-					uni.showToast({
-						icon: 'none',
-						title: this.$t('login.passwordPlaceholder')
-					});
-					return;
-				}
-				const data = {
-					username: encrypt(this.username),
-					password: encrypt(this.password)
-				};
-				this.loginBtnLoading = true
-                login(data).then(res => {
-                    if(res.success) {
-                        setToken(res.data.token)
-                        this.toMain()
-                    }
-                     
-                }).catch(error => {
-                    this.loginBtnLoading = false
-                    uni.showToast({
-						icon: 'error',
-						title: error.response.data.message,
-					});
-                })
-                
-			},
-			
-			bindLogin() {
-				this.loginByPwd()
-			},
-			
-			toMain(userName) {
-				getInfo().then(res => {
-                    setUserInfo(res.data)
-                    uni.reLaunch({
-                        url: '../tabBar/home/index',
-                    });
-                })
-				
-			},
-			
-			loadUiInfo() {
-				getUIinfo().then(res => {
-					
-				    
-				    const list = res.data
-				    list.forEach(item => {
-				    	if(item.paramKey === 'ui.mobileBG' && item.paramValue) {
-				    		this.mobileBG = '/system/ui/image/' + item.paramValue
-				    		return false
-				    	}
-				    })
-					setTimeout(() => {
-						uni.hideLoading()
-						this.axiosFinished = true
-					}, 1500)
-					
-				})     
-			},
+          })
+          setTimeout(() => {
+            uni.hideLoading()
+            this.axiosFinished = true
+          }, 1500)
 
-            loadPublicKey() {
-                if(!getLocalPK()) {
-                    getPublicKey().then(res => {
-                        setLocalPK(res.data)
-                    })                    
-                }                
-            },
-			
-			
-		},
-		onReady() {
-			
-		}
-	}
+        })
+      },
+
+      loadPublicKey() {
+        if (!getLocalPK()) {
+          getPublicKey().then(res => {
+            setLocalPK(res.data)
+          })
+        }
+      },
+      autoLogin() {
+        const url = window.location.href
+        const param = getUrlParams(url)
+        if (param?.detoken) {
+          setToken(param.detoken)
+          this.toMain()
+          return true
+        }
+        return false
+      }
+
+    },
+    onReady() {
+
+    }
+  }
 </script>
 
 <style>
-@import "@/components/m-icon/m-icon.css";
+  @import "@/components/m-icon/m-icon.css";
 
-	/*每个页面公共css */
-	page {
-		min-height: 100%;
-		display: flex;
-		font-size: 14px;
-	}
+  /*每个页面公共css */
+  page {
+    min-height: 100%;
+    display: flex;
+    font-size: 14px;
+  }
 
-	input,
-	textarea,
-	button {
-		font-size: 14px;
-	}
+  input,
+  textarea,
+  button {
+    font-size: 14px;
+  }
 
-	/* #ifdef MP-BAIDU */
-	page {
-		width: 100%;
-		height: 100%;
-		display: block;
-	}
+  /* #ifdef MP-BAIDU */
+  page {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
 
-	swan-template {
-		width: 100%;
-		min-height: 100%;
-		display: flex;
-	}
+  swan-template {
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+  }
 
-	/* 原生组件模式下需要注意组件外部样式 */
-	custom-component {
-		width: 100%;
-		min-height: 100%;
-		display: flex;
-	}
+  /* 原生组件模式下需要注意组件外部样式 */
+  custom-component {
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+  }
 
-	/* #endif */
+  /* #endif */
 
-	/* #ifdef MP-ALIPAY */
-	page {
-		min-height: 100vh;
-	}
+  /* #ifdef MP-ALIPAY */
+  page {
+    min-height: 100vh;
+  }
 
-	/* #endif */
+  /* #endif */
 
-	/* 原生组件模式下需要注意组件外部样式 */
-	m-input {
-		width: 100%;
-		/* min-height: 100%; */
-		display: flex;
-		flex: 1;
-	}
+  /* 原生组件模式下需要注意组件外部样式 */
+  m-input {
+    width: 100%;
+    /* min-height: 100%; */
+    display: flex;
+    flex: 1;
+  }
 
-	.content {
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		background-color: #000000;
-        background-image: url(../../static/logo-bg.jpg);
-		padding: 10px;
-        justify-content: center;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        opacity: 0.75;
-	}
-	
-	.content-de {
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		background-color: #000000;
-		padding: 10px;
-	    justify-content: center;
-	    background-repeat: no-repeat;
-	    background-size: 100% 100%;
-	    opacity: 0.75;
-	}
+  .content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    background-color: #000000;
+    background-image: url(../../static/logo-bg.jpg);
+    padding: 10px;
+    justify-content: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    opacity: 0.75;
+  }
 
-	.input-group {
-		background-color: #ffffff;
-		margin-top: 20px;
-		position: relative;
-        opacity: 0.95;
-        border-radius: 10px;
-        overflow: hidden;
-	}
+  .content-de {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    background-color: #000000;
+    padding: 10px;
+    justify-content: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    opacity: 0.75;
+  }
 
-	.input-group::before {
-		position: absolute;
-		right: 0;
-		top: 0;
-		left: 0;
-		height: 1px;
-		content: '';
-		-webkit-transform: scaleY(.5);
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
+  .input-group {
+    background-color: #ffffff;
+    margin-top: 20px;
+    position: relative;
+    opacity: 0.95;
+    border-radius: 10px;
+    overflow: hidden;
+  }
 
-	.input-group::after {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		height: 1px;
-		content: '';
-		-webkit-transform: scaleY(.5);
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
+  .input-group::before {
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: 0;
+    height: 1px;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #c8c7cc;
+  }
 
-	.input-row {
-		display: flex;
-		flex-direction: row;
-		position: relative;
-		/* font-size: 18px; */
-		height: 50px;
-		line-height: 50px;
-	}
+  .input-group::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #c8c7cc;
+  }
 
-	.input-row .title {
-		width: 70px;
-		padding-left: 15px;
-	}
+  .input-row {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    /* font-size: 18px; */
+    height: 50px;
+    line-height: 50px;
+  }
 
-	.input-row.border::after {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 8px;
-		height: 1px;
-		content: '';
-		-webkit-transform: scaleY(.5);
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
+  .input-row .title {
+    width: 70px;
+    padding-left: 15px;
+  }
 
-	.btn-row {
-		margin-top: 10px;
-		padding: 10px 0;
-	}
+  .input-row.border::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 8px;
+    height: 1px;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #c8c7cc;
+  }
 
-	button.primary {
-		background-color: #0faeff;
-        line-height: 40px;
-        border-radius: 5px;
-        overflow: hidden;
-	}
-	.login-type {
-		display: flex;
-		justify-content: center;
-	}
+  .btn-row {
+    margin-top: 10px;
+    padding: 10px 0;
+  }
 
-	.login-type-btn {
-		line-height: 30px;
-		margin: 0px 15px;
-	}
+  button.primary {
+    background-color: #0faeff;
+    line-height: 40px;
+    border-radius: 5px;
+    overflow: hidden;
+  }
 
-	.login-type-btn.act {
-		color: #0FAEFF;
-		border-bottom: solid 1px #0FAEFF;
-	}
+  .login-type {
+    display: flex;
+    justify-content: center;
+  }
 
-	.send-code-btn {
-		width: 120px;
-		text-align: center;
-		background-color: #0FAEFF;
-		color: #FFFFFF;
-	}
+  .login-type-btn {
+    line-height: 30px;
+    margin: 0px 15px;
+  }
 
-	.action-row {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-	}
+  .login-type-btn.act {
+    color: #0FAEFF;
+    border-bottom: solid 1px #0FAEFF;
+  }
 
-	.action-row navigator {
-		color: #007aff;
-		padding: 0 10px;
-	}
+  .send-code-btn {
+    width: 120px;
+    text-align: center;
+    background-color: #0FAEFF;
+    color: #FFFFFF;
+  }
 
-	.oauth-row {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-around;
-		flex-wrap: wrap;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-	}
+  .action-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
 
-	.oauth-image {
-		position: relative;
-		width: 50px;
-		height: 50px;
-		border: 1px solid #dddddd;
-		border-radius: 50px;
-		background-color: #ffffff;
-	}
+  .action-row navigator {
+    color: #007aff;
+    padding: 0 10px;
+  }
 
-	.oauth-image image {
-		width: 30px;
-		height: 30px;
-		margin: 10px;
-	}
+  .oauth-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
 
-	.oauth-image button {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		opacity: 0;
-	}
+  .oauth-image {
+    position: relative;
+    width: 50px;
+    height: 50px;
+    border: 1px solid #dddddd;
+    border-radius: 50px;
+    background-color: #ffffff;
+  }
 
-	.captcha-view {
-		line-height: 0;
-		justify-content: center;
-		align-items: center;
-		display: flex;
-		position: relative;
-		background-color: #f3f3f3;
-	}
-    .welcome {
-        padding-left: 15px;
-        font-size: x-large;
-        font-weight: 500;
-        letter-spacing: 2px;
-    }
-</style>
+  .oauth-image image {
+    width: 30px;
+    height: 30px;
+    margin: 10px;
+  }
+
+  .oauth-image button {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .captcha-view {
+    line-height: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: relative;
+    background-color: #f3f3f3;
+  }
+
+  .welcome {
+    padding-left: 15px;
+    font-size: x-large;
+    font-weight: 500;
+    letter-spacing: 2px;
+  }
+</style>
\ No newline at end of file