登录注册页面样式修改

vue_project/src/App.vue

@@ -1,224 +1,33 @@
 <template>
   <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>
+    <!-- <LoginForm/> -->
+    <!-- <RegisterForm/> -->
+    <calendar/>
   </div>
+  
 </template>
 
 <script>
 import LoginForm from './components/LoginForm.vue';
 import RegisterForm from './components/RegisterForm.vue';
+import calendar from './components/CalendarTable.vue';
 
 export default {
   components: {
     LoginForm,
-    RegisterForm
+    RegisterForm,
+    calendar
   },
   data() {
-    return {
-      isSigningIn: true, // 初始状态设为登录界面
-    };
+   
   },
   methods: {
-    signInClick() {
-      this.isSigningIn = true; // 点击"sign in"时，设置状态为登录界面
-      // 可以在此处添加逻辑来控制动画
-    },
-    signUpClick() {
-      this.isSigningIn = false; // 点击"sign up"时，设置状态为注册界面
-      // 同样，此处也可以添加控制动画的逻辑
-    },
+   
   },
 };
 </script>
 
 <style>
 
-* {
-    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/assets/css/style.css

@@ -0,0 +1,266 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.content {
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(82, 84, 97);
+  position: relative;
+}
+.content .wrapper {
+  width: 70%;
+  height: 80%;
+  border-radius: 20px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-image: linear-gradient(to right top, rgb(40, 42, 55) 0%, rgb(40, 42, 55) 20%, rgba(40, 42, 55, 0.9) 60%, rgba(40, 42, 55, 0.4) 100%), url(../images/bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: top;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 80px;
+  box-sizing: border-box;
+}
+.content .wrapper .form-wrapper {
+  width: 100%;
+  height: 50vh;
+  position: relative;
+  top: -10px;
+}
+.content .wrapper .form-wrapper .login-form,
+.content .wrapper .form-wrapper .signup-form {
+  position: absolute;
+  transition: 0.5s;
+}
+.content .wrapper .form-wrapper .login-form .tips,
+.content .wrapper .form-wrapper .signup-form .tips {
+  color: #fff;
+}
+.content .wrapper .form-wrapper .login-form .tips h1,
+.content .wrapper .form-wrapper .signup-form .tips h1 {
+  font-size: 45px;
+  margin: 20px 0;
+  font-family: "Newake", Times, serif;
+  letter-spacing: 2px;
+}
+.content .wrapper .form-wrapper .login-form .tips span,
+.content .wrapper .form-wrapper .signup-form .tips span {
+  margin: 0 0 25px 0;
+  font-family: "Century Gothic", Times, serif;
+}
+.content .wrapper .form-wrapper .login-form .tips span:first-child,
+.content .wrapper .form-wrapper .signup-form .tips span:first-child {
+  color: #d1d1d1;
+}
+.content .wrapper .form-wrapper .login-form .tips span:last-child,
+.content .wrapper .form-wrapper .signup-form .tips span:last-child {
+  color: rgb(29, 144, 245);
+  cursor: pointer;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper {
+  position: relative;
+  margin: 30px 0;
+  transition: 0.5s;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper .inputs,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper .inputs {
+  width: 100%;
+  height: 70px;
+  display: block;
+  border-radius: 18px;
+  border: 0;
+  background-color: rgb(50, 54, 69);
+  color: #fff;
+  padding: 20px 60px 0px 30px;
+  box-sizing: border-box;
+  outline: none;
+  font-size: 15px;
+  font-weight: 600;
+  font-family: "Century Gothic", Times, serif;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper .inputs:focus,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper .inputs:focus {
+  border: 1px solid rgb(21, 139, 243);
+  box-shadow: 0 0 1px 1px rgb(21, 139, 243);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper::before,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper::before {
+  display: inline-block;
+  width: 50px;
+  height: 10px;
+  color: rgb(113, 114, 119);
+  position: absolute;
+  top: 10px;
+  left: 30px;
+  white-space: nowrap;
+  font-family: "Century Gothic", Times, serif;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper::after,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper::after {
+  content: "";
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 36px;
+  right: 10px;
+  background-size: 50%;
+  background-repeat: no-repeat;
+  z-index: 1;
+  white-space: nowrap;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .user::before,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .user::before {
+  content: "Email";
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .user::after,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .user::after {
+  background-image: url(../images/email.png);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .pwd input,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .pwd input {
+  letter-spacing: 2px;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .pwd::before,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .pwd::before {
+  content: "Password";
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .pwd::after,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .pwd::after {
+  background-image: url(../images/password.png);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .veri-code,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .veri-code {
+  opacity: 0;
+  z-index: -1;
+  position: relative;
+  transition: 0.5s;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .veri-code .veri-code-input,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .veri-code .veri-code-input {
+  padding-right: 200px;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .veri-code .veri-code-tips,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .veri-code .veri-code-tips {
+  position: absolute;
+  right: 20px;
+  top: 36px;
+  color: rgb(39, 150, 247);
+  cursor: pointer;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .veri-code::before,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .veri-code::before {
+  content: "Verification Code";
+}
+.content .wrapper .form-wrapper .login-form .form-btn,
+.content .wrapper .form-wrapper .signup-form .form-btn {
+  width: 100%;
+  height: 60px;
+  background-color: rgb(0, 129, 241);
+  color: #fff;
+  border-radius: 50px;
+  border: 0;
+  font-size: 20px;
+  font-weight: 600;
+  margin: 15px auto;
+  cursor: pointer;
+  font-family: "Century Gothic", Times, serif;
+}
+.content .wrapper .form-wrapper .login-form {
+  z-index: 1;
+  opacity: 1;
+  animation: loginAnimation 1s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper {
+  display: flex;
+  transform: translate(0, -90px);
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper .login-btn {
+  flex: 1;
+  margin-left: 10px;
+  transition: 0.5s;
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper .login-btn:hover {
+  background-color: rgb(39, 150, 247);
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper .other-login-btn {
+  flex: 1;
+  margin-right: 10px;
+  transition: 0.5s;
+  background-color: rgb(85, 91, 105);
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper .other-login-btn:hover {
+  background-color: rgb(101, 109, 126);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login {
+  transform: translate(0, -60%);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .divider {
+  width: 100%;
+  margin: 20px 0;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .divider .line {
+  display: inline-block;
+  max-width: 45%;
+  width: 45%;
+  flex: 1;
+  height: 1px;
+  background-color: #fff;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .divider .divider-text {
+  vertical-align: middle;
+  margin: 0px 20px;
+  line-height: 0;
+  display: inline-block;
+  width: 50px;
+  color: #fff;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .other-login-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .other-login-wrapper .other-login-item {
+  border: 1px solid #fff;
+  padding: 10px;
+  text-align: center;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 600;
+  color: rgb(51, 49, 116);
+  margin: 0 10px;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .other-login-wrapper .other-login-item img {
+  width: 30px;
+  height: 30px;
+  vertical-align: middle;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .other-login-wrapper .other-login-item span {
+  vertical-align: middle;
+}
+.content .wrapper .form-wrapper .signup-form {
+  opacity: 0;
+}
+
+@keyframes loginAnimation {
+  0% {
+    transform: translate(0, 100px);
+  }
+  100% {
+    transform: translate(0, 0px);
+  }
+}/*# sourceMappingURL=style.css.map */

vue_project/src/assets/css/style.scss

@@ -0,0 +1,268 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+.content {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(82, 84, 97);
+    position: relative;
+    .wrapper {
+        width: 70%;
+        height: 80%;
+        border-radius: 20px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        background-image: linear-gradient(
+                to right top,
+                rgba(40, 42, 55, 1) 0%,
+                rgba(40, 42, 55, 1) 20%,
+                rgba(40, 42, 55, 0.9) 60%,
+                rgba(40, 42, 55, 0.4) 100%
+            ),
+            url(../images/bg.jpg);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: top;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 80px;
+        box-sizing: border-box;
+        .form-wrapper {
+            width: 100%;
+            height: 50vh;
+            position: relative;
+            top: -10px;
+            .login-form,
+            .signup-form {
+                position: absolute;
+                transition: 0.5s;
+                .tips {
+                    color: #fff;
+                    h1 {
+                        font-size: 45px;
+                        margin: 20px 0;
+                        font-family: "Newake", Times, serif;
+                        letter-spacing: 2px;
+                    }
+                    span {
+                        margin: 0 0 25px 0;
+                        font-family: "Century Gothic", Times, serif;
+                    }
+                    span:first-child {
+                        color: #d1d1d1;
+                    }
+                    span:last-child {
+                        color: rgb(29, 144, 245);
+                        cursor: pointer;
+                    }
+                }
+                .form-wrapper {
+                    .input-wrapper {
+                        position: relative;
+                        margin: 30px 0;
+                        transition: 0.5s;
+                        .inputs {
+                            width: 100%;
+                            height: 70px;
+                            display: block;
+                            border-radius: 18px;
+                            border: 0;
+                            background-color: rgb(52, 50, 69);
+                            color: #fff;
+                            padding: 20px 60px 0px 30px;
+                            box-sizing: border-box;
+                            outline: none;
+                            font-size: 15px;
+                            font-weight: 600;
+                            font-family: "Century Gothic", Times, serif;
+                            &:focus {
+                                border: 1px solid rgb(21, 139, 243);
+                                box-shadow: 0 0 1px 1px rgb(21, 139, 243);
+                            }
+                        }
+                        &::before {
+                            display: inline-block;
+                            width: 50px;
+                            height: 10px;
+                            color: rgb(113, 114, 119);
+                            position: absolute;
+                            top: 10px;
+                            left: 30px;
+                            white-space: nowrap;
+                            font-family: "Century Gothic", Times, serif;
+                        }
+                        &::after {
+                            content: "";
+                            display: inline-block;
+                            width: 40px;
+                            height: 40px;
+                            position: absolute;
+                            top: 36px;
+                            right: 10px;
+                            background-size: 50%;
+                            background-repeat: no-repeat;
+                            z-index: 1;
+                            white-space: nowrap;
+                        }
+                    }
+                    .user {
+                        &::before {
+                            content: "Email";
+                        }
+                        &::after {
+                            background-image: url(../images/email.png);
+                        }
+                    }
+                    .pwd {
+                        input {
+                            letter-spacing: 2px;
+                        }
+                        &::before {
+                            content: "Password";
+                        }
+                        &::after {
+                            background-image: url(../images/password.png);
+                        }
+                    }
+                    .veri-code {
+                        opacity: 0;
+                        z-index: -1;
+                        position: relative;
+                        transition: 0.5s;
+                        .veri-code-input {
+                            padding-right: 200px;
+                        }
+                        .veri-code-tips {
+                            position: absolute;
+                            right: 20px;
+                            top: 36px;
+                            color: rgb(39, 150, 247);
+                            cursor: pointer;
+                        }
+                        &::before {
+                            content: "Verification Code";
+                        }
+                    }
+                }
+                .form-btn {
+                    width: 100%;
+                    height: 60px;
+                    background-color: rgb(0, 129, 241);
+                    color: #fff;
+                    border-radius: 50px;
+                    border: 0;
+                    font-size: 20px;
+                    font-weight: 600;
+                    margin: 15px auto;
+                    cursor: pointer;
+                    font-family: "Century Gothic", Times, serif;
+                }
+            }
+            .login-form {
+                z-index: 1;
+                opacity: 1;
+                animation: loginAnimation 1s;
+                animation-fill-mode: forwards;
+                animation-timing-function: ease;
+                .btn-wrapper {
+                    display: flex;
+                    transform: translate(0, -90px);
+                    .login-btn {
+                        flex: 1;
+                        margin-left: 10px;
+                        transition: 0.5s;
+                        &:hover {
+                            background-color: rgb(39, 150, 247);
+                        }
+                    }
+                    .other-login-btn {
+                        flex: 1;
+                        margin-right: 10px;
+                        transition: 0.5s;
+                        background-color: rgb(85, 91, 105);
+                        &:hover {
+                            background-color: rgb(101, 109, 126);
+                        }
+                    }
+                }
+                .form-wrapper {
+                    .other-login {
+                        transform: translate(0, -60%);
+                        .divider {
+                            width: 100%;
+                            margin: 20px 0;
+                            text-align: center;
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            .line {
+                                display: inline-block;
+                                max-width: 45%;
+                                width: 45%;
+                                flex: 1;
+                                height: 1px;
+                                background-color: #fff;
+                            }
+                            .divider-text {
+                                vertical-align: middle;
+                                margin: 0px 20px;
+                                line-height: 0;
+                                display: inline-block;
+                                width: 50px;
+                                color: #fff;
+                            }
+                        }
+                        .other-login-wrapper {
+                            width: 100%;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            .other-login-item {
+                                border: 1px solid #fff;
+                                padding: 10px;
+                                text-align: center;
+                                border-radius: 10px;
+                                cursor: pointer;
+                                font-weight: 600;
+                                color: rgb(51, 49, 116);
+                                margin: 0 10px;
+                                img {
+                                    width: 30px;
+                                    height: 30px;
+                                    vertical-align: middle;
+                                }
+                                span {
+                                    vertical-align: middle;
+                                }
+
+                                &:hover {
+                                    width: 80px;
+                                    height: 50%;
+                                    background-color: #ccc;
+                                    border: 0;
+                                    box-shadow: -20px 10px 32px 1px rgba(182, 183, 185, 0.37);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .signup-form {
+                opacity: 1;
+            }
+        }
+    }
+}
+@keyframes loginAnimation {
+    0% {
+        transform: translate(0, 100px);
+    }
+    100% {
+        transform: translate(0, 0px);
+    }
+}

vue_project/src/components/CalendarTable.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="calendar-table">
+    <table>
+      <thead>
+        <tr>
+          <th>日</th>
+          <th>一</th>
+          <th>二</th>
+          <th>三</th>
+          <th>四</th>
+          <th>五</th>
+          <th>六</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- 填充的月份数据 -->
+        <tr v-for="(week, weekIndex) in formattedCalendar" :key="weekIndex">
+          <td v-for="(day, dayIndex) in week" :key="dayIndex" :class="{ 'event': day.event }">
+            <span v-if="day.date !== null">{{ day.date }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CalendarTable',
+  data() {
+    // 起始和结束日期
+    const startDate = new Date(2023, 7, 26); // 2023年8月26日，注意月份减1
+    const endDate = new Date(2024, 1, 16); // 2024年2月16日，注意结束日期需加一天以包含该日
+
+    // 初始化日期数组并填充起始日期前的空位以对齐星期
+    let currentDate = new Date(startDate);
+    currentDate.setDate(currentDate.getDate() - currentDate.getDay()); // 回退到当周的周一
+    let calendarData = [];
+
+    while (currentDate <= endDate) {
+      calendarData.push(new Date(currentDate));
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+
+    // 将日期分组到每周
+    const weeks = [];
+    for (let i = 0; i < calendarData.length; i += 7) {
+      weeks.push(calendarData.slice(i, i + 7));
+    }
+
+    // 假设的事件数据，这里应根据实际需求添加
+    const events = {
+      '2023-08-26': '示例事件1', // 假定示例事件
+      // ...其他事件
+      '2024-02-16': '示例事件2' // 结束日期的事件
+    };
+
+    // 格式化日期并标记事件
+    const formattedCalendar = weeks.map(week =>
+      week.map(day => {
+        const dateString = day.toISOString().split('T')[0];
+        return {
+          date: day.getDate(),
+          event: events[dateString]
+        };
+      })
+    );
+
+    return {
+      formattedCalendar
+    };
+  }
+};
+</script>
+
+<style scoped>
+.calendar-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.calendar-table th,
+.calendar-table td {
+  border: 1px solid #ddd;
+  padding: 4px;
+  text-align: center;
+}
+
+.calendar-table th {
+  background-color: #ccc;
+  font-weight: bold;
+}
+
+.calendar-table td {
+  height: 50px;
+  width: 50px;
+  padding: 13px;
+}
+
+.calendar-table tr:nth-child(even) td {
+  background-color: #f8f8f8;
+}
+
+.calendar-table .event {
+  font-weight: bold;
+  color: purple;
+}
+
+.calendar-table td span {
+  display: block;
+  text-align: left;
+  margin-left: 5px;
+}
+</style>

vue_project/src/components/LoginForm.vue

@@ -1,68 +1,65 @@
 <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 class="content">
+    <div class="wrapper">
+      <div class="form-wrapper">
+        <div class="login-form">
+          <div class="tips">
+            <h1>登录.</h1>
+            <span>没有账号?</span>
+            <router-link to="/register"><span class="signup-into">注册</span></router-link>
+          </div>
+          <div class="form-wrapper">
+            <div class="input-wrapper user">
+              <input type="text" class="inputs">
+            </div>
+            <div class="input-wrapper pwd">
+              <input type="password" class="inputs">
+            </div>
+            <div class="input-wrapper veri-code">
+              <input type="text" class="inputs veri-code-input">
+              <span class="veri-code-tips">Click To Get</span>
+            </div>
+            <div class="btn-wrapper">
+              <button class="form-btn login-btn">Login</button>
+            </div>
+            <div class="other-login">
+              <div class="divider">
+                <span class="line"></span>
+                <span class="divider-text">or</span>
+                <span class="line"></span>
+              </div>
+              <div class="other-login-wrapper">
+                <div class="other-login-item">
+                  <img src="../assets/images/qq (1).png" alt="QQ">
+                </div>
+                <div class="other-login-item">
+                  <img src="../assets/images/微信 (1).png" alt="WeChat">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </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>
+  </div>
 </template>
 
 <script>
 export default {
-data() {
-  return {
-    username: '',
-    password: ''
-  };
-},
-methods: {
-  handleLogin() {
-    console.log('Logging in with:', this.username, this.password);
-    // 实际登录逻辑
+  data() {
+    return {
+     
+    };
   },
-  switchToRegister() {
-    this.$emit('switch-form', 'register');
+  methods: {
+    
   }
-}
 };
 </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 scoped>
+  @import url('../assets/css/style.css');
+  
+  @import url('../assets/css/style.scss');
+
 </style>

vue_project/src/components/RegisterForm.vue

@@ -1,49 +1,44 @@
 <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 class="content">
+    <div class="wrapper">
+      <div class="form-wrapper">
+        <div class="signup-form">
+          <div class="tips">
+            <h1>注册账号.</h1>
+            <span>已经有账号?</span>
+            <router-link to="/login"><span class="login-into">登录</span></router-link>
+          </div>
+          <div class="form-wrapper">
+            <div class="input-wrapper user">
+              <input type="text" class="inputs">
+            </div>
+            <div class="input-wrapper pwd">
+              <input type="password" class="inputs">
+            </div>
+            <button class="form-btn">创建新账号</button>
+          </div>
+        </div>
+      </div>
     </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>
+  </div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+     
+    };
+  },
+  methods: {
+    
+  }
 
 };
 </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;
-}
-
+  @import url('../assets/css/style.css');
+  @import url('../assets/css/style.scss');
 
 </style>

vue_project/src/router/router.js

@@ -1,7 +1,7 @@
 export const staticRoutes = [
     {
       path: "/",
-      redirect: "/login",
+      redirect: "/register",
     },
     // {
     //   // 主页
@@ -23,9 +23,9 @@ export const staticRoutes = [
     },
     // {
     //   //商品
-    //   path: "/order",
-    //   component: () => import("../components/order.vue"),
-    //   name: "order",
+    //   path: "/calendar",
+    //   component: () => import("../components/CalendarTable.vue"),
+    //   name: "calendar",
     //   meta:{isAuth:true}
     // },
     // {