加入登录界面移动端提醒

frontend/src/i18n/zh.js

@@ -496,6 +496,7 @@ docker run -d --restart always --name crawlab_worker \\
   'Here you can set your password.': '这里您可以设置您的密码',
   'In this tab you can configure your notification settings.': '在这个标签中，您可以配置您的消息通知配置',
   'Here you can add/edit/delete global environment variables which will be passed into your spider programs.': '这里您可以添加/修改/删除全局环境变量，它们会被传入爬虫程序中',
+  'You are running on a mobile device, which is not optimized yet. Please try with a laptop or desktop.': '您正在没有优化过的移动端上浏览，我们建议您用电脑来访问',
 
   // 其他
   'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'

frontend/src/views/login/index.vue

@@ -73,6 +73,11 @@
         <span @click="setLang('zh')" :class="lang==='zh'?'active':''">中文</span>
         <span @click="setLang('en')" :class="lang==='en'?'active':''">English</span>
       </div>
+      <div v-if="isShowMobileWarning" class="mobile-warning">
+        <el-alert type="error" :closable="false">
+          {{$t('You are running on a mobile device, which is not optimized yet. Please try with a laptop or desktop.')}}
+        </el-alert>
+      </div>
     </el-form>
   </div>
 </template>
@@ -121,7 +126,8 @@ export default {
         confirmPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPass }]
       },
       loading: false,
-      pwdType: 'password'
+      pwdType: 'password',
+      isShowMobileWarning: false
     }
   },
   computed: {
@@ -179,7 +185,11 @@ export default {
     }
   },
   mounted () {
-    initCanvas()
+    if (window.innerWidth >= 1024) {
+      initCanvas()
+    } else {
+      this.isShowMobileWarning = true
+    }
   }
 }
 
@@ -455,5 +465,15 @@ const initCanvas = () => {
         text-decoration: underline;
       }
     }
+
+    .mobile-warning {
+      margin-top: 20px;
+    }
+
+  }
+</style>
+<style scoped>
+  .mobile-warning >>> .el-alert .el-alert__description {
+    font-size: 1.2rem;
   }
 </style>