From 8b56ab2d31905c3c7582296e9e0052fe02f45207 Mon Sep 17 00:00:00 2001
From: master <master@163.com>
Date: 星期五, 04 三月 2022 16:21:14 +0800
Subject: [PATCH] 添加采集设备页面
---
src/cool/modules/base/pages/login/index.vue | 514 ++++++++++++++++++++++++++++----------------------------
1 files changed, 257 insertions(+), 257 deletions(-)
diff --git a/src/cool/modules/base/pages/login/index.vue b/src/cool/modules/base/pages/login/index.vue
index 71f98bc..6e5a74c 100644
--- a/src/cool/modules/base/pages/login/index.vue
+++ b/src/cool/modules/base/pages/login/index.vue
@@ -1,257 +1,257 @@
-<template>
- <div class="page-login">
- <div class="box">
- <img class="logo" src="../../static/images/logo.png" alt="" />
- <!-- <p class="desc">{{ app.name }}-鍗庤兘浜屽巶鏂欏満鐓ゅ爢瀹炴椂涓夌淮寤烘ā</p> -->
- <p class="desc">{{ app.name }}-鍗庤兘浜屽巶鏂欏満鐓ゅ爢瀹炴椂涓夌淮寤烘ā</p>
-
- <el-form label-position="top" class="form" size="medium" :disabled="saving">
- <el-form-item label="鐢ㄦ埛鍚�">
- <el-input
- v-model="form.username"
- placeholder="璇疯緭鍏ョ敤鎴峰悕"
- maxlength="20"
- auto-complete="off"
- />
- </el-form-item>
-
- <el-form-item label="瀵嗙爜">
- <el-input
- v-model="form.password"
- type="password"
- placeholder="璇疯緭鍏ュ瘑鐮�"
- maxlength="20"
- auto-complete="off"
- />
- </el-form-item>
-
- <el-form-item label="楠岃瘉鐮�" class="captcha">
- <el-input
- v-model="form.verifyCode"
- placeholder="璇疯緭鍏ュ浘鐗囬獙璇佺爜"
- maxlength="4"
- auto-complete="off"
- @keyup.enter="toLogin"
- />
-
- <captcha
- :ref="setRefs('captcha')"
- v-model="form.captchaId"
- class="value"
- @change="
- () => {
- form.verifyCode = '';
- }
- "
- />
- </el-form-item>
- </el-form>
-
- <el-button round size="small" class="submit-btn" :loading="saving" @click="toLogin"
- >鐧诲綍</el-button
- >
- </div>
- <div class="video">
- <video class="bgvideo" id="bgvideo" autoplay muted loop>
- <source src="../../static/video/bg.mp4" type="video/mp4" />
- </video>
- </div>
- </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, ref } from "vue";
-import { ElMessage } from "element-plus";
-import Captcha from "./components/captcha.vue";
-import { useEps, useCool } from "/@/cool";
-
-export default defineComponent({
- cool: {
- route: {
- path: "/login"
- }
- },
-
- components: {
- Captcha
- },
-
- setup() {
- const { refs, setRefs, store, router, app }: any = useCool();
-
- const saving = ref<boolean>(false);
-
- // 鐧诲綍琛ㄥ崟鏁版嵁
- const form = reactive({
- username: "",
- password: "",
- captchaId: "",
- verifyCode: ""
- });
-
- // 鐧诲綍
- async function toLogin() {
- if (!form.username) {
- return ElMessage.warning("鐢ㄦ埛鍚嶄笉鑳戒负绌�");
- }
-
- if (!form.password) {
- return ElMessage.warning("瀵嗙爜涓嶈兘涓虹┖");
- }
-
- if (!form.verifyCode) {
- return ElMessage.warning("鍥剧墖楠岃瘉鐮佷笉鑳戒负绌�");
- }
-
- saving.value = true;
-
- try {
- // 鐧诲綍
- await store.dispatch("userLogin", form);
-
- // 鐢ㄦ埛淇℃伅
- await store.dispatch("userInfo");
-
- // 璇诲彇Eps
- await useEps();
-
- // 鏉冮檺鑿滃崟
- const [first] = await store.dispatch("permMenu");
-
- if (!first) {
- ElMessage.error("璇ヨ处鍙锋病鏈夋潈闄�");
- } else {
- router.push("/");
- }
- } catch (err: any) {
- ElMessage.error(err);
- refs.value.captcha.refresh();
- }
-
- saving.value = false;
- }
-
- return {
- refs,
- setRefs,
- form,
- saving,
- toLogin,
- app
- };
- }
-});
-</script>
-
-<style lang="scss">
-.page-login {
- height: 100vh;
- width: 100vw;
- position: relative;
- background-color: rgba($color: #000000, $alpha: 0.4);
-
- .box {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 500px;
- width: 500px;
- padding: 80px 0;
- position: absolute;
- z-index: 9;
- left: calc(50% - 250px);
- top: calc(50% - 330px);
- background-color: rgba(47, 52, 71, 0.93);
- border-radius: 12px;
- box-shadow: 0 2px 6px rgba($color: #000000, $alpha: 0.15);
-
- .logo {
- height: 50px;
- margin-bottom: 20px;
- }
-
- .desc {
- color: #ccc;
- font-size: 12px;
- margin-bottom: 60px;
- letter-spacing: 1px;
- }
-
- .el-form {
- width: 300px;
- border-radius: 3px;
-
- .el-form-item {
- margin-bottom: 20px;
-
- &__label {
- color: #ccc;
- }
- }
-
- .el-input {
- .el-input__inner {
- border: 0;
- border-bottom: 0.5px solid #999;
- border-radius: 0;
- padding: 0 5px;
- background-color: transparent;
- color: #ccc;
- transition: border-color 0.3s;
- position: relative;
-
- &:focus {
- border-color: #fff;
- color: #fff;
- }
-
- &:-webkit-autofill {
- -webkit-text-fill-color: #fff !important;
- -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
- transition: background-color 50000s ease-in-out 0s;
- }
- }
- }
-
- .captcha {
- position: relative;
-
- .value {
- position: absolute;
- bottom: 1px;
- right: 0;
- }
- }
- }
-
- .submit-btn {
- margin-top: 40px;
- padding: 9px 40px;
- color: #000;
- }
- }
-
- .bgvideo {
- position: absolute;
- top: 50%;
- left: 50%;
- min-width: 100%;
- min-height: 100%;
- width: auto;
- height: auto;
- z-index: -9999;
- -webkit-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- -webkit-transition: 1s opacity;
- transition: 1s opacity;
- }
- .video {
- position: fixed;
- width: 100%;
- height: 100%;
- overflow: hidden;
- z-index: -10000;
- }
-}
-</style>
+<template>
+ <div class="page-login">
+ <div class="box">
+ <img class="logo" src="../../static/images/logo.png" alt="" />
+ <!-- <p class="desc">{{ app.name }}-鍗庤兘浜屽巶鏂欏満鐓ゅ爢瀹炴椂涓夌淮寤烘ā</p> -->
+ <p class="desc">{{ app.name }}-鍗庤兘浜屽巶鏂欏満鐓ゅ爢瀹炴椂涓夌淮寤烘ā</p>
+
+ <el-form label-position="top" class="form" size="medium" :disabled="saving">
+ <el-form-item label="鐢ㄦ埛鍚�">
+ <el-input
+ v-model="form.username"
+ placeholder="璇疯緭鍏ョ敤鎴峰悕"
+ maxlength="20"
+ auto-complete="off"
+ />
+ </el-form-item>
+
+ <el-form-item label="瀵嗙爜">
+ <el-input
+ v-model="form.password"
+ type="password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ maxlength="20"
+ auto-complete="off"
+ />
+ </el-form-item>
+
+ <el-form-item label="楠岃瘉鐮�" class="captcha">
+ <el-input
+ v-model="form.verifyCode"
+ placeholder="璇疯緭鍏ュ浘鐗囬獙璇佺爜"
+ maxlength="4"
+ auto-complete="off"
+ @keyup.enter="toLogin"
+ />
+
+ <captcha
+ :ref="setRefs('captcha')"
+ v-model="form.captchaId"
+ class="value"
+ @change="
+ () => {
+ form.verifyCode = '';
+ }
+ "
+ />
+ </el-form-item>
+ </el-form>
+
+ <el-button round size="small" class="submit-btn" :loading="saving" @click="toLogin"
+ >鐧诲綍</el-button
+ >
+ </div>
+ <div class="video">
+ <video class="bgvideo" id="bgvideo" autoplay muted loop>
+ <source src="../../static/video/bg.mp4" type="video/mp4" />
+ </video>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+import Captcha from "./components/captcha.vue";
+import { useEps, useCool } from "/@/cool";
+
+export default defineComponent({
+ cool: {
+ route: {
+ path: "/login"
+ }
+ },
+
+ components: {
+ Captcha
+ },
+
+ setup() {
+ const { refs, setRefs, store, router, app }: any = useCool();
+
+ const saving = ref<boolean>(false);
+
+ // 鐧诲綍琛ㄥ崟鏁版嵁
+ const form = reactive({
+ username: "",
+ password: "",
+ captchaId: "",
+ verifyCode: ""
+ });
+
+ // 鐧诲綍
+ async function toLogin() {
+ if (!form.username) {
+ return ElMessage.warning("鐢ㄦ埛鍚嶄笉鑳戒负绌�");
+ }
+
+ if (!form.password) {
+ return ElMessage.warning("瀵嗙爜涓嶈兘涓虹┖");
+ }
+
+ if (!form.verifyCode) {
+ return ElMessage.warning("鍥剧墖楠岃瘉鐮佷笉鑳戒负绌�");
+ }
+
+ saving.value = true;
+
+ try {
+ // 鐧诲綍
+ await store.dispatch("userLogin", form);
+
+ // 鐢ㄦ埛淇℃伅
+ await store.dispatch("userInfo");
+
+ // 璇诲彇Eps
+ await useEps();
+
+ // 鏉冮檺鑿滃崟
+ const [first] = await store.dispatch("permMenu");
+
+ if (!first) {
+ ElMessage.error("璇ヨ处鍙锋病鏈夋潈闄�");
+ } else {
+ router.push("/");
+ }
+ } catch (err: any) {
+ ElMessage.error(err);
+ refs.value.captcha.refresh();
+ }
+
+ saving.value = false;
+ }
+
+ return {
+ refs,
+ setRefs,
+ form,
+ saving,
+ toLogin,
+ app
+ };
+ }
+});
+</script>
+
+<style lang="scss">
+.page-login {
+ height: 100vh;
+ width: 100vw;
+ position: relative;
+ background-color: rgba($color: #000000, $alpha: 0.4);
+
+ .box {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 500px;
+ width: 500px;
+ padding: 80px 0;
+ position: absolute;
+ z-index: 9;
+ left: calc(50% - 250px);
+ top: calc(50% - 330px);
+ background-color: rgba(47, 52, 71, 0.93);
+ border-radius: 12px;
+ box-shadow: 0 2px 6px rgba($color: #000000, $alpha: 0.15);
+
+ .logo {
+ height: 50px;
+ margin-bottom: 20px;
+ }
+
+ .desc {
+ color: #ccc;
+ font-size: 12px;
+ margin-bottom: 60px;
+ letter-spacing: 1px;
+ }
+
+ .el-form {
+ width: 300px;
+ border-radius: 3px;
+
+ .el-form-item {
+ margin-bottom: 20px;
+
+ &__label {
+ color: #ccc;
+ }
+ }
+
+ .el-input {
+ .el-input__inner {
+ border: 0;
+ border-bottom: 0.5px solid #999;
+ border-radius: 0;
+ padding: 0 5px;
+ background-color: transparent;
+ color: #ccc;
+ transition: border-color 0.3s;
+ position: relative;
+
+ &:focus {
+ border-color: #fff;
+ color: #fff;
+ }
+
+ &:-webkit-autofill {
+ -webkit-text-fill-color: #fff !important;
+ -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
+ transition: background-color 50000s ease-in-out 0s;
+ }
+ }
+ }
+
+ .captcha {
+ position: relative;
+
+ .value {
+ position: absolute;
+ bottom: 1px;
+ right: 0;
+ }
+ }
+ }
+
+ .submit-btn {
+ margin-top: 40px;
+ padding: 9px 40px;
+ color: #000;
+ }
+ }
+
+ .bgvideo {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ min-width: 100%;
+ min-height: 100%;
+ width: auto;
+ height: auto;
+ z-index: -9999;
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+ -webkit-transition: 1s opacity;
+ transition: 1s opacity;
+ }
+ .video {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ z-index: -10000;
+ }
+}
+</style>
--
Gitblit v1.9.1