添加登录支持对应组件

src/assets/index.css

@@ -15,9 +15,7 @@ body {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
-  position: relative;
   background: url("./bg.png") no-repeat center;
   background-size: cover;
-  position: relative;
 }
 

src/components/info.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="info">
+    <!-- <input type="text" /><br />
+    <input type="text" /><br />
+    <button>1</button> -->
+    <p>{{ info.userName }}</p>
+    <p>{{ info.passWord }}</p>
+    <p>{{ info.dynamicText }}</p>
+  </div>
+</template>
+
+<script lang='ts'>
+import { defineComponent, PropType } from "vue";
+
+export interface ContextProps {
+  userName: string;
+  passWord: string;
+  verify?: number;
+  telephone?: number;
+  dynamicText: string;
+}
+
+export default defineComponent({
+  props: {
+    info: {
+      type: Object as PropType<ContextProps>,
+      require: true,
+    },
+  },
+});
+</script>
+
+<style scoped>
+.info {
+  width: 30vw;
+  height: 40vh;
+  background: url("./login.png") no-repeat center;
+  background-size: cover;
+  position: absolute;
+  border-radius: 20px;
+  right: 100px;
+  top: 35vh;
+}
+</style>

src/views/login.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="login">{{ text }}</div>
+  <div class="login">
+    <info :info="contextInfo" />
+  </div>
 </template>
 
 <script lang="ts">
 import { ref } from "vue"
+import info, { ContextProps } from "../components/info.vue"
+const contextInfo: ContextProps = {
+  userName: "admin",
+  passWord: "123456",
+  dynamicText: "登录",
+}
 export default {
-  mounted() {
-    // @ts-ignore
-    this.$http.request("get", "/getApi")
+  components: {
+    info,
   },
   setup() {
-    const text = ref("login")
     return {
-      text,
+      contextInfo,
     }
   },
 }