tk-page-Fan/src/views/HomeView.vue

<template>
  <div class="main">
    <div class="container">
      <div class="right">
        <img src="../assets/logoBg.png" class="background-video" alt="" />
        <!-- 设置 -->
        <div class="center-align">
          <div></div>
          <div class="setup">
            <div class="setup-item center-justify">
              <div></div>
              <span> 网络设置 </span>
            </div>
            <div class="setup-item center-justify">
              <div></div>
              <span> 简体中文 </span>
            </div>
          </div>
        </div>
        <div class="center-line" style="margin-top: 40px">
          <!-- logo -->
          <div class="logo">
            <!-- <div class="center-justify" style="height: 80px; width: 300px;">
							<img style="height: 100%;" src="@/assets/logotext.png">
						</div> -->
          </div>

          <!-- From -->
          <div class="from">
            <div class="from-title center-justify">
              <div>账号登陆</div>
            </div>

            <div class="from-input">
              <el-form label-position="left" label-width="100px" :model="formData">
                <div class="from-input-item1">
                  <img src="@/assets/username.png" alt="" />
                  <el-input
                    style="height: 25px"
                    v-model="formData.tenantName"
                    placeholder="租户名称"
                    clearable
                    @keyup.enter="onSubmit"
                  />
                </div>
                <div class="from-input-item1">
                  <img src="@/assets/username.png" alt="" />
                  <el-input
                    style="height: 25px"
                    v-model="formData.userId"
                    placeholder="账号"
                    clearable
                    @keyup.enter="onSubmit"
                  />
                </div>
                <div class="from-input-item1">
                  <img src="@/assets/password.png" alt="" />
                  <el-input
                    style="height: 25px"
                    v-model="formData.password"
                    type="password"
                    placeholder="密码"
                    show-password
                    @keyup.enter="onSubmit"
                  />
                </div>

                <div class="from-input-item">
                  <el-button
                    class="loginButton"
                    color="#8f7ee7"
                    type="primary"
                    @click="onSubmit"
                    >登录</el-button
                  >
                </div>
              </el-form>
            </div>
          </div>
        </div>
        <div class="version center-justify">版本号：{{ version }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { login, rentgetloginID } from "@/api/account";
import { getToken, setToken, setUser, setUserPass, getUserPass } from "@/utils/storage";
import { ElLoading } from "element-plus";
import { usePythonBridge } from "@/utils/pythonBridge";
import { ElMessage } from 'element-plus';
import { tokenStore,UserStore } from '@/stores/notice'

const tokenCache = tokenStore()
const userCache = UserStore()
const { getVersion } = usePythonBridge();
let version = ref("0.0.0");

onMounted(() => {
  setTimeout(() => {
    getVersion().then((res) => {
      version.value = res;
    });
    getpassword();
  }, 500);
});

async function getpassword(){
    const res = await getUserPass();
    formData.value = {
      tenantName: res == null ? "" : res.tenantName,
      userId: res == null ? "" : res.userId,
      password: res == null ? "" : res.password,
    };
}


const router = useRouter();

const formData = ref({});

const onSubmit = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  rentgetloginID({
    name: formData.value.tenantName,
  })
    .then((res) => {
      console.log(res);

      login({
        username: formData.value.userId,
        tenantId: res,
        password: formData.value.password,
      })
        .then((res) => {
          loading.close();
          console.log("123123123123",res);
          setToken(res.tokenValue);
          tokenCache.setToken(res.tokenValue)
          userCache.setUser(res)
          setUser(res);
          setUserPass(formData.value);
          router.push("/nav");
        })
        .catch((err) => {
          loading.close();
        });
    })
    .catch((err) => {
      loading.close();
      console.log(err);
    });
};
</script>

<style lang="less">
.main {
  width: 1600px;
  height: 900px;
  overflow: hidden;
  box-sizing: border-box;

  /* 页面无法选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .container {
    display: flex;
    box-sizing: border-box;
    width: 1600px;
    height: 900px;

    .right {
      box-sizing: border-box;
      position: relative;
      width: 1600px;
      height: 900px;
      padding: 20px 40px 20px 50px;
      border-left: 3px solid #23516e;
      position: relative;
      /* 添加 position: relative */
      overflow: hidden;
      /* 防止内容溢出 */

      .version {
        color: #fff;
        position: absolute;
        font-size: 20px;
        bottom: 20px;
        left: calc(50% - 50px);
        // box-sizing: border-box;
        // width: 1600px;
      }

      .background-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        /* 确保视频在内容之下 */
      }

      .setup {
        display: flex;
        color: #fff;

        .setup-item {
          padding: 10px 6px;
          display: flex;

          div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgb(255, 255, 255);
            margin-right: 5px;
          }
        }
      }

      .logo {
        padding: 20px 0;
        height: 80px;
      }

      .from {
        width: 420px;
        // height: 320px;
        color: @bg-color;
        background-color: #ffffff44;
        border-radius: 20px;
        border: 1px solid #fff;
        padding: 32px;
        box-sizing: border-box;

        .from-title {
          font-family: Source Han Sans SC;
          font-weight: 500;
          font-size: 24px;
          color: @bg-color;
          line-height: 37px;

          div {
            font-size: 20px;
            font-weight: 600;
            // border-bottom: 4px solid #1db97d;
          }
        }

        .from-input {
          width: 100%;
          padding: 15px 0;

          .from-input-item {
            display: flex;
            padding: 8px 0;

            .from-input-item-title {
              color: @bg-color;
              font-size: 18px;
              font-weight: 500;
              width: 80px;
              height: 50px;
            }

            .loginButton {
              width: 359px;
              height: 50px;
              background: #ffffff;
              border-radius: 24px;
              border: 1px solid #ffffff;

              font-family: Source Han Sans SC;
              font-weight: 500;
              font-size: 18px;
              color: @bg-color;
              line-height: 37px;
            }
          }

          .from-input-item1 {
            display: flex;
            width: 359px;
            height: 50px;
            background: @bg-color-light-light;
            border-radius: 24px;
            border: 1px solid #ffffff;
            padding: 12px 25px 13px 25px;
            box-sizing: border-box;
            margin-bottom: 16px;
          }
        }
      }
    }
  }
}

.center-line {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center-justify {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.center-align {
  display: flex;
  justify-content: space-between;
}

.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-input__wrapper {
  --el-input-focus-border-color: rgba(255, 255, 0, 0);
  --el-menu-hover-bg-color: rgba(255, 255, 0, 0);
}
</style>

<style scoped lang="less">
::v-deep(.el-input__wrapper) {
  background-color: rgba(255, 0, 0, 0);
  box-shadow: none;
}

::v-deep(.el-input__inner) {
  color: #fff;
}

::v-deep(.el-input__inner::placeholder) {
  color: @bg-color;
}
</style>