Thu Feb 1 16:40:00 CST 2024 inscode

src/App.vue

 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
+import Login from './login.vue'
 </script>
 
 <template>
-  <header>
+  <!-- <header>
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
     </div>
-  </header>
+  </header> -->
 
   <main>
-    <TheWelcome />
+    <!-- <TheWelcome /> -->
+    <Login />
   </main>
 </template>
 

src/login.vue

+<template>
+  <div class="login-wrapper">
+        <h2>用户登录</h2>
+        <form>
+            <div class="form-group">
+                <input type="text" placeholder="用户名">
+            </div>
+            <div class="form-group">
+                <input type="password" placeholder="密码">
+            </div>
+            <button type="submit">登录</button>
+        </form>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+body {
+    background-color: #f1f1f1;
+    font-family: Arial, sans-serif;
+}
+
+.login-wrapper {
+    width: 400px;
+    margin: 100px auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: linear-gradient(to bottom, #00bfff 0%, #1e90ff 100%);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+h2 {
+    text-align: center;
+    color: #fff;
+    margin-bottom: 30px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+input[type="text"], input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: none;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+button[type="submit"] {
+    background-color: #fff;
+    color: #1e90ff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+button[type="submit"]:hover {
+    background-color: #1e90ff;
+    color: #fff;
+}
+
+</style>