trike-datav/src/view/login/index.vue

<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router";
import { login } from "@/api/index.js";
import { getArea, getStreet } from "@/api/index.js"
import { useUserStore } from "@/store/user.js";
import { useAppStore } from "@/store/app.js";
const router = useRouter()
const show = ref(false)
const account = ref('叙永镇')
const password = ref('xuyongzhen')
const isAccount = ref(false)
const isPassword = ref(false)

const userStore = useUserStore();
const appStore = useAppStore();

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

  login({
    account: account.value,
    password: password.value
  }).then(async (res) => {
    userStore.setUserInfo(res.data.user);
    userStore.setToken(res.data.token);
    appStore.setAddress({
      areaCode: res.data.user.area_code,
      streetCode: res.data.user.street_code
    });
    let street = await getStreet({
      area_code: res.data.user.area_code
    })
    appStore.setStreet(street.data);
    router.push('/');
  }).catch(e => {
    console.log(e);
  })
}

</script>


<template>
  <dv-full-screen-container class="body">
    <div class="login-box">
      <div class="form">
        <div class="content" style="padding-top: 2.5rem">
          <div class="line-box">
            <input
              class="ipt"
              type="text"
              placeholder="请输入账号"
              v-model="account"
            />
            <div class="line">
              <img
                src="/src/assets/login_img/ZH.png"
                alt=""
                class="accont-icon"
              />
            </div>
          </div>
          <div class="tips">
            <span v-show="isAccount">请输入账号</span>
          </div>
          <div class="line-box">
            <input
              class="ipt"
              placeholder="请输入密码"
              :type="show ? 'text' : 'password'"
              v-model="password"
            />
            <div class="line">
              <img
                src="/src/assets/login_img/MM.png"
                alt=""
                class="accont-icon"
                style=""
              />
              <img
                src="/src/assets/login_img/KJ.png"
                v-if="show"
                alt=""
                @click="show = false"
                class="accont-icon"
              />
              <img
                src="/src/assets/login_img/BKH.png"
                v-else
                @click="show = true"
                class="accont-icon"
              />
            </div>
          </div>
          <div class="tips">
            <span v-show="isPassword">请输入密码</span>
          </div>
          <button class="btn" @click="submit">登录</button>
        </div>
      </div>
      <div class="title"><span>吟龙物流信息监控溯源可视化大屏</span></div>
    </div>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
.body {
  background-image: url("/src/assets/img/bg.png");
  background-size: 100% 100%;
  color: #fff;
  background-color: rgba($color: #000000, $alpha: 0.8);
}
.login-box {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/login_img/bg.png);
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  .title {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 35%;
    padding-bottom: 0.4rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 2.6rem;
    font-family: "ifonts";
    background-image: url(../../assets/login_img/title.png);
    background-size: 100% 100%;

    span {
      background-image: -webkit-linear-gradient(top, #061028, #144e8b);
      -webkit-background-clip: text;
      /* -webkit-text-fill-color: transparent; */
      color: rgba(0, 0, 0, 0);
      -webkit-text-stroke-color: #5fa2ec;
      -webkit-text-stroke-width: 1px;
    }
  }
}

.form {
  width: 30%;
  height: 45%;
  position: absolute;
  top: 25%;
  right: 10%;
  box-sizing: border-box;
  background: url(../../assets/login_img/DLBG.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 60%;
    height: 60%;
    .ipt {
      border: 1px solid #194fa3;
      background-color: #123266;
      width: 100%;
      box-sizing: border-box;
      padding: 0.5rem 2.5rem;
      outline: none;
      -webkit-user-select: auto;
      caret-color: #fff;
      color: white;
    }
    .line-box {
      position: relative;
      width: 100%;
      margin-top: 1rem;
      .line {
        width: 100%;
        height: 100%;
        position: absolute;
        pointer-events: none;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 0.5rem;
        box-sizing: border-box;
        align-items: center;
      }
      input {
        font-size: 1rem;
      }
    }

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

    .tips {
      width: 100%;
      height: 1.5rem;
      margin-top: 0.3rem;
      text-align: start;
      color: red;
      span {
        margin-left: 2.5rem;
      }
    }

    .btn {
      width: 100%;
      margin-top: 2rem;
      background-color: #0040a1;
      color: #fff;
      border-radius: 0;
      border: 0.1rem solid #2873ff;
    }

    .accont-icon {
      width: 1rem;
      height: 1rem;
      pointer-events: all !important;
    }
  }
}
</style>