diff --git a/src/assets/images/login/bg2.png b/src/assets/images/login/bg2.png new file mode 100644 index 0000000..7395608 Binary files /dev/null and b/src/assets/images/login/bg2.png differ diff --git a/src/assets/images/login/logo2.png b/src/assets/images/login/logo2.png new file mode 100644 index 0000000..7f6247f Binary files /dev/null and b/src/assets/images/login/logo2.png differ diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 69435f2..ca797f1 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,10 +1,10 @@ @@ -78,6 +58,7 @@ import { ElMessage } from "element-plus"; import { useQRCode } from "@vueuse/integrations/useQRCode"; import { getFileUrl } from "@/assets/js/utils.js"; + const userStore = useUserStore(); const router = useRouter(); const { formRef, validate } = useForm(); @@ -141,10 +122,13 @@ const fnSubmitLogin = async () => { width: 100%; background-color: #2d3a4b; overflow: hidden; - background-image: url(../../assets/images/login/bg.png); + background-image: url(../../assets/images/login/bg2.png); background-repeat: no-repeat; - background-size: 100% 100%; + background-size: 70% 100%; + float: left; + position: relative; } + .login { width: 100%; max-width: 1920px; @@ -154,24 +138,21 @@ const fnSubmitLogin = async () => { background-color: #fff; .logo { - margin-top: 20px; - margin-left: 20px; - width: 100%; - pointer-events: none; + top: 20px; + left: 20px; + position: absolute; } .form { - border-radius: 5px; - box-shadow: 0 0 20px rgb(109 109 109 / 40%); - position: absolute; - right: 230px; - top: 50%; - transform: translateY(-50%); - width: 400px; - height: 490px; - padding: 40px 50px; - background-color: #fff; - z-index: 1; + float: right; + padding-left: 100px; + padding-right: 100px; + padding-top: 150px; + width: 30%; + height: 100%; + //padding: 40px 50px; + background-color: #d6def2; + //z-index: 1; &:after { content: ""; @@ -231,12 +212,13 @@ const fnSubmitLogin = async () => { width: 100%; height: 80px; font-size: 14px; - color: rgba(0, 0, 0, 0.5); + color: white; + //color: rgba(0, 0, 0, 0.5); text-align: center; position: absolute; bottom: 0; left: 50%; - transform: translateX(-50%); + transform: translateX(-70%); z-index: 1; line-height: 80px; }