tradeScreen/src/view/login.vue

<template>
    <div class="login-box">
        <div class="form">
            <div class="content">
                <div style="position: relative;margin-bottom: 3VH;">
                    <img src="/static/login/ZH.png" alt="" class="accont-icon">
                    <input class="ipt" type="text" placeholder="请输入账号" v-model="account">
                    <div style="color: red;" v-show="isAccount">请输入账号</div>
                </div>
                <div style="position: relative;margin-bottom: 3VH;">
                    <img src="/static/login/MM.png" alt="" class="accont-icon" style="">
                    <input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password">
                    <div style="color: red;" v-show="isPassword">请输入密码</div>
                    <img src="/static/login/KJ.png" v-if="show" alt="" @click="show = false" class="show">
                    <img src="/static/login/BKH.png" v-else @click="show = true" class="show">
                </div>
                <div style="background-color: red;position: relative;">
                    <img src="/static/login/DL.png" class="btn" alt="" @click="submit">
                </div>
            </div>

        </div>
    </div>
</template>

<style lang="scss" scoped>
.login-box {
    width: 100vw;
    height: 100vh;
    background-image: url('/static/login/bg.png');
    background-size: 100% 100%;
    overflow: hidden;
}

.form {
    width: 35vw;
    height: 45vh;
    position: absolute;
    top: 25vh;
    right: 10vw;
    box-sizing: border-box;
    background: url("/static/login/DLBG.png");
    background-size: 100% 100%;

    .content {
        position: absolute;
        top: 13vh;
        // background-color: red;
        left: 10vw;

        .ipt {
            border: 1px solid #194FA3;
            padding: 1vh 2vw;
            background-color: #123266;
            width: 13VW;
            outline: none;
            -webkit-user-select: auto;
            caret-color: #fff;
            color: white;
        }

        input[type="password"]::-ms-reveal {
            display: none
        }

        .btn {
            width: 7vw;
            cursor: pointer;
            // margin: 0 auto;
            position: absolute;
            background-color: #fff;
            left: 50%;
            transform: translateX(-50%);

        }

        .accont-icon {
            width: 0.8vw;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: .5vw;

        }

        .show {

            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: .5vw;
            width: 1vw;
            cursor: pointer;
        }
    }


}
</style>
<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router";
import { loginApi } from "@/api.js"
const router = useRouter()
const show = ref(false)
const account = ref('泸县')
const password = ref('luxian')
const isAccount = ref(false)
const isPassword = ref(false)



const submit = () => {

    if (!account.value) {
        isAccount.value = true;
        return
    }
    else isAccount.value = false;
    if (!password.value) {
        isPassword.value = true;

        return
    }
    else isPassword.value = false;


    loginApi({
        account: account.value,
        password: password.value
    }).then(res => {
        console.log(res)
        localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
        router.replace('/')
       


    })
    return



    // alert(isAccount.value)

}



</script>