| | |
| | | <div class="pass-word"> |
| | | <input |
| | | v-model="loginForm.password" |
| | | type="password" |
| | | :type="showPassword ? 'text' : 'password'" |
| | | placeholder="请输入密码" |
| | | /> |
| | | <image :src="showPasswordSvg" /> |
| | | <image :src="showPassword ? openPassword : showPasswordSvg" @click="toggleShowPassword" class="password-toggle-icon" /> |
| | | </div> |
| | | <div class="remember-password"> |
| | | <label> |
| | |
| | | import { useUserStore } from "@/store/index.js"; |
| | | |
| | | import { HOME_PATH, LOGIN_PATH, removeQueryString } from "@/router"; |
| | | import { ref } from "vue"; |
| | | |
| | | import logoSvg from "@/static/images/logo.svg"; |
| | | import showPasswordSvg from "@/static/images/show-password.svg"; |
| | | |
| | | const droneSvg = getAssetsImage("/images/login/droneSvg.svg"); |
| | | const usernameSvg = getAssetsImage("/images/login/username.svg"); |
| | | const passwordSvg = getAssetsImage("/images/login/password.svg"); |
| | | // const logoSvg = getAssetsImage("/images/login/logo.svg"); |
| | | import openPassword from "@/static/images/openPassword.svg"; |
| | | |
| | | const agreed = ref(true); |
| | | |
| | |
| | | password: "", |
| | | }); |
| | | const rememberPassword = ref(false); |
| | | const showPassword = ref(false); |
| | | const inputStyle = computed(() => { |
| | | const style = {}; |
| | | if (loginForm.value.username && loginForm.value.password) { |
| | |
| | | let redirect = HOME_PATH; |
| | | function toggleRemember(e) { |
| | | rememberPassword.value = e.detail.value.length > 0; |
| | | } |
| | | |
| | | function toggleShowPassword() { |
| | | showPassword.value = !showPassword.value; |
| | | } |
| | | |
| | | async function submit() { |
| | |
| | | .user-name{ |
| | | margin-bottom: 40rpx; |
| | | } |
| | | .pass-word{ |
| | | display: flex; |
| | | justify-content: space-around; |
| | | align-items: center; |
| | | } |
| | | .user-name, |
| | | .pass-word { |
| | | display: flex; |