暂时登录页面

2 months ago · 18639c0f49
1 changed files with 273 additions and 0 deletions
--- a/src/views/login-hxl.vue
+++ b/src/views/login-hxl.vue
@ -0,0 +1,273 @@
+<template>
+  <div class="total">
+    <div
+      class="box"
+      :class="{ 'box-animaToR': isAnimating, 'box-animaToL': !isAnimating }"
+      @click="startAnimation1"
+    >
+      <div v-if="!isTextAnimating">
+        <span class="title" :class="{ 'title-animaT': isAnimating }"
+          >管理员登录</span
+        >
+        <el-icon
+          class="right"
+          :class="{ 'arrow-anima': !isAnimating, 'title-animaT': isAnimating }"
+        >
+          <Right />
+        </el-icon>
+      </div>
+
+      <div v-else>
+        <span class="title" :class="{ 'title-animaT': !isAnimating }"
+          >用户登录</span
+        >
+        <el-icon
+          class="left"
+          :class="{ 'arrow-anima': isAnimating, 'title-animaT': !isAnimating }"
+        >
+          <Back />
+        </el-icon>
+      </div>
+    </div>
+
+    <div class="login user">
+      <div class="loginTitle">用户登录</div>
+      <el-form :model="userInfo" label-width="auto" style="max-width: 600px">
+        <el-form-item label="账号">
+          <el-input v-model="userInfo.username" />
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input v-model="userInfo.password" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" style="width: 100%">登录</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="login admin">
+      <div class="loginTitle">管理员登录</div>
+      <el-form :model="userInfo" label-width="auto" style="max-width: 600px">
+        <el-form-item label="账号">
+          <el-input v-model="userInfo.username" />
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input v-model="userInfo.password" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" style="width: 100%" @click="login()"
+            >登录</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+import API from "@/util/http";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const firstAnimating = ref(false);
+const isAnimating = ref(false);
+const isTextAnimating = ref(false);
+const startAnimation = () => {
+  isAnimating.value = !isAnimating.value;
+  setTimeout(() => {
+    isTextAnimating.value = !isTextAnimating.value;
+  }, 400);
+};
+
+const userInfo = ref({
+  username: "12345678",
+  password: "123456",
+});
+
+const login = async function () {
+  try {
+    const result = await axios.post(`http://18.143.76.3:10704/admin/login`, {
+      account: userInfo.value.username,
+      password: userInfo.value.password,
+      machineId: "23131233213",
+    });
+    // const result = await API({
+    //   url: "/admin/login",
+    //   data: {
+    //     account: userInfo.username,
+    //     password: userInfo.password,
+    //     machineId: "",
+    //   },
+    // });
+
+    console.log("请求成功", result);
+
+    router.push({
+      name: "workspace",
+      query: {
+        machineId: result.data.data.machineId,
+      },
+    });
+  } catch (error) {
+    console.log("请求失败", error);
+  }
+};
+</script>
+
+<style scoped>
+.login {
+  position: absolute;
+  z-index: 1;
+  width: 30%;
+}
+
+.loginTitle {
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.user {
+  top: 30%;
+  left: 10%;
+}
+
+.admin {
+  top: 30%;
+  left: 55%;
+}
+
+.total {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.title {
+  position: absolute;
+  font-size: 48px;
+  font-weight: bold;
+  top: 40%;
+  left: 30%;
+  z-index: 2;
+}
+
+.title-animaT {
+  animation: textAnimaT 0.7s forwards;
+}
+
+.title-animaF {
+  animation: textAnimaF 0.7s forwards;
+}
+
+@keyframes textAnimaF {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes textAnimaT {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.box {
+  width: 50%;
+  height: 100%;
+  margin: 0;
+  background: linear-gradient(90deg, #ffae00, #ffffff);
+  border-radius: 5%;
+  z-index: 99;
+}
+
+.box-animaToR {
+  animation: animaToR 1s forwards;
+}
+
+.box-animaToL {
+  animation: animaToL 1s forwards;
+}
+
+@keyframes animaToR {
+  0% {
+    transform: translateX(0) scaleX(1);
+    background: linear-gradient(90deg, #ffffff, #29e6ff);
+  }
+
+  /* 50% {
+        transform: translateX(50%) scaleX(2);
+    } */
+
+  100% {
+    transform: translateX(100%) scaleX(1);
+    background: linear-gradient(90deg, #ffffff, #29e6ff);
+  }
+}
+
+@keyframes animaToL {
+  0% {
+    transform: translateX(100%) scaleX(1);
+  }
+
+  /* 50% {
+        transform: translateX(50%) scaleX(2);
+    } */
+
+  100% {
+    transform: translateX(0%) scaleX(1);
+    background: linear-gradient(90deg, #ffae00, #ffffff);
+  }
+}
+
+.right {
+  position: absolute;
+  right: 10%;
+  top: 40%;
+  font-size: 72px;
+}
+
+.left {
+  position: absolute;
+  left: 10%;
+  top: 40%;
+  font-size: 72px;
+  z-index: 2;
+}
+
+.arrow-anima {
+  animation: arrowAnima 1s infinite;
+}
+
+@keyframes arrowAnima {
+  0% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(10px);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>