登录注册样式

vue_project/src/App.vue

@@ -1,26 +1,224 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="app">
+    <div class="container" id="container">
+      <div class="form-container sign-in-container">
+        <LoginForm/>
+      </div>
+      <div class="form-container sign-up-container">
+          <RegisterForm/>
+      </div>
+      <!-- 覆盖容器 -->
+      <div class="overlay-container">
+            <div class="overlay">
+
+                <!-- 覆盖左边 -->
+                <div class="overlay-penal overlay-left-container">
+                    <h1>welcome back!</h1>
+                    <p>
+                        To keep connected with us please login with your personal info
+                    </p>
+                    <router-link to="/login"><button class="ghost" id="signIn" @click="signInClick">登录</button></router-link>
+                </div>
+
+                <!-- 覆盖右边 -->
+                <div class="overlay-penal overlay-right-container">
+                    <h1>Hello Friend!</h1>
+                    <p>
+                        Enter your personal details and start journey with us
+                    </p>
+                    <router-link to="/register"><button class="ghost" id="signUp" @click="signUpClick">注册</button></router-link>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import LoginForm from './components/LoginForm.vue';
+import RegisterForm from './components/RegisterForm.vue';
 
 export default {
-  name: 'App',
   components: {
-    HelloWorld
-  }
-}
+    LoginForm,
+    RegisterForm
+  },
+  data() {
+    return {
+      isSigningIn: true, // 初始状态设为登录界面
+    };
+  },
+  methods: {
+    signInClick() {
+      this.isSigningIn = true; // 点击"sign in"时，设置状态为登录界面
+      // 可以在此处添加逻辑来控制动画
+    },
+    signUpClick() {
+      this.isSigningIn = false; // 点击"sign up"时，设置状态为注册界面
+      // 同样，此处也可以添加控制动画的逻辑
+    },
+  },
+};
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+
+* {
+    padding:0;
+    margin:0;
+    box-sizing: border-box;
+}
+
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #F6F5F7;
+}
+button {
+    outline: none;
+    border: 1px solid #FF4B2B;
+    border-radius: 20px;
+    background-color: #FF4B2B;
+    padding: 10px 40px;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: white;
+    transition: transform 85ms ease-in;
+}
+h1 {
+    text-transform: capitalize;
+    font-size: 30px;
+}
+p{
+    margin: 10px 0 30px;
+}
+button:active {
+    transform: scale(.95);
 }
+.ghost {
+    background-color: transparent;
+    border-color: white;
+}
+.form-container{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    height: 100%;
+    width: 50%;
+    padding: 0 40px;
+    transition: all .65s ease-in-out;
+}
+.form-container form{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.form-container input {
+    width: 100%;
+    height: 40px;
+    margin: 8px 0;
+    background-color: #EEEEEE;
+    border: none;
+    font-size: 14px;
+    padding: 0 20px;
+}
+.sign-in-container{
+    z-index: 10;
+}
+.sign-up-container{
+    z-index: 5;
+}
+
+.container{
+    position: relative;
+    width: 768px;
+    max-width: 100%;
+    min-height: 480px;
+    background-color: white;
+    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+
+.overlay-container {
+    position: absolute;
+    right: 0;
+    width: 52%;
+    height: 100%;
+    background-color: tomato;
+    overflow: hidden;
+    transition: transform .65s ease-in-out;
+    z-index: 100;
+}
+.overlay {
+    position: absolute;
+    display: flex;
+    left: -100%;
+    width: 200%;
+    height: 100%;
+    background: linear-gradient(to right, #2d99ff, #42ffa1);
+}
+
+.overlay-penal {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    padding: 0 40px;
+    text-align: center;
+    color: white;
+    font-size: 12px;
+}
+.forget {
+    height: 20px;
+    color: #9AA9B7;
+    text-decoration: none;
+    margin: 5px 0 15px;
+    font-size: 12px;
+    text-transform: capitalize;
+}
+.forget:hover {
+    border-bottom: 2px tomato solid;
+}
+
+.overlay-left-container {
+    transform: translateX(10%);
+    transition: transform .65s ease-in-out;
+}
+.overlay-right-container {
+    transform: translateX(0);
+    transition: transform .65s ease-in-out;
+}
+
+.container.penal-right-active .sign-in-container {
+    z-index: 5;
+    transform: translateX(100%);
+}
+
+.container.penal-right-active .sign-up-container {
+    z-index: 10;
+    transform: translateX(100%);
+}
+
+.container.penal-right-active .overlay-container {
+    transform: translateX(-100%);
+}
+.container.penal-right-active .overlay {
+    transform: translateX(50%);
+}
+.container.penal-right-active .overlay-left-container {
+    transform: translateX(0);
+}
+.container.penal-right-active .overlay-right-container {
+    transform: translateX(-10%);
+}
+
 </style>

vue_project/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

vue_project/src/components/LoginForm.vue

@@ -0,0 +1,68 @@
+<template>
+  <form action="#" class="form-container sign-in-container">
+    <h1>登录</h1>
+    <div class="social-container">
+      <!-- 社交登录图标 -->
+      <img src="../assets/images/qq (1).png" width="32" height="32" style="margin-right: 10px;" alt="QQ">
+      <img src="../assets/images/微信 (1).png" width="32" height="32" style="margin-right: 10px;" alt="微信">
+      <img src="../assets/images/新浪微博.png" width="32" height="32" style="margin-right: 10px;" alt="新浪微博">
+    </div>
+    <input type="email" name="email" id="email" placeholder="Email...">
+    <input type="password" name="password" id="password" placeholder="Password...">
+    <a href="#" class="forget">忘记密码</a>
+    <button>登录</button>
+  </form>
+</template>
+
+<script>
+export default {
+data() {
+  return {
+    username: '',
+    password: ''
+  };
+},
+methods: {
+  handleLogin() {
+    console.log('Logging in with:', this.username, this.password);
+    // 实际登录逻辑
+  },
+  switchToRegister() {
+    this.$emit('switch-form', 'register');
+  }
+}
+};
+</script>
+
+<style>
+button {
+    outline: none;
+    border: 1px solid #FF4B2B;
+    border-radius: 20px;
+    background-color: #FF4B2B;
+    padding: 10px 40px;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: white;
+    transition: transform 85ms ease-in;
+}
+button:active {
+    transform: scale(.95);
+}
+.social-container a:hover {
+    background-color: #222F3E;
+    color: white;
+    border-color: #CBCBCC;
+}
+.forget {
+    height: 20px;
+    color: #9AA9B7;
+    text-decoration: none;
+    margin: 5px 0 15px;
+    font-size: 12px;
+    text-transform: capitalize;
+}
+.forget:hover {
+    border-bottom: 2px tomato solid;
+}
+</style>

vue_project/src/components/RegisterForm.vue

@@ -0,0 +1,49 @@
+<template>
+  <form action="#" class="form-container sign-up-container">
+    <h1>注册</h1>
+    <div class="social-container">
+      <img src="../assets/images/qq (1).png" width="32" height="32" alt="QQ">
+      <img src="../assets/images/微信 (1).png" width="32" height="32" alt="微信">
+      <img src="../assets/images/新浪微博.png" width="32" height="32" alt="新浪微博">
+    </div>
+    <input type="text" name="userName" id="userName" placeholder="userName...">
+    <input type="email" name="email" id="email" placeholder="Email...">
+    <input type="password" name="password" id="password" placeholder="Password...">
+    <button>注册</button>
+  </form>
+</template>
+
+<script>
+export default {
+
+
+};
+</script>
+
+<style scoped>
+ button {
+    outline: none;
+    border: 1px solid #FF4B2B;
+    border-radius: 20px;
+    background-color: #FF4B2B;
+    padding: 10px 40px;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: white;
+    transition: transform 85ms ease-in;
+}
+button:active {
+    transform: scale(.95);
+}
+.social-container {
+    display: flex;
+}
+
+.social-container a:hover {
+    background-color: #222F3E;
+    color: white;
+    border-color: #CBCBCC;
+}
+
+
+</style>

vue_project/src/router/router.js

@@ -1,26 +1,26 @@
 export const staticRoutes = [
     {
       path: "/",
-      redirect: "/index",
+      redirect: "/login",
     },
-    {
-      // 主页
-      path: "/index",
-      component: () => import("../components/HelloWorld.vue"),
-      name: "Index",
-    },
-    // {
-    //   // 登录
-    //   path: "/login",
-    //   component: () => import("../components/Login.vue"),
-    //   name: "Login",
-    // },
     // {
-    //   //注册
-    //   path: "/register",
-    //   component: () => import("../components/Register.vue"),
-    //   name: "Register",
+    //   // 主页
+    //   path: "/index",
+    //   component: () => import("../components/HelloWorld.vue"),
+    //   name: "Index",
     // },
+    {
+      // 登录
+      path: "/login",
+      component: () => import("../components/LoginForm.vue"),
+      name: "Login",
+    },
+    {
+      //注册
+      path: "/register",
+      component: () => import("../components/RegisterForm.vue"),
+      name: "Register",
+    },
     // {
     //   //商品
     //   path: "/order",