登录页

src/router/index.js

@@ -10,7 +10,7 @@ const router = vueRouter.createRouter({
 
 //路由拦截
 router.beforeResolve(async (to) => {
-    const token = getToken()
+    /*const token = getToken()
     if (to.path === '/login') {
         return true
     } else if (to.path === '/auth') {
@@ -19,7 +19,8 @@ router.beforeResolve(async (to) => {
         return '/login'
     } else {
         return true
-    }
+    }*/
+    return true
 })
 
 router.afterEach((to) => {

src/views/login/index.vue

@@ -1,12 +1,66 @@
 <template>
-
-    111
+    <div class="login-body">
+        <div class="login-body-bg-box">
+            <img :src="loginBg" alt="">
+        </div>
+        <div class="login-container">
+            <div class="login-sign">
+                <div class="title-img">
+                    <img :src="loginGif" alt="">
+                    <div class="login-title">用户登录</div>
+                </div>
+                <div class="login-tab">
+                    <div class="login-tab-img">
+                        <img :src="loginPng2" alt="">
+                    </div>
+                    <div class="login-tab-form">
+                        <img :src="loginPng3" alt="">
+                        <div class="form-box">
+                            <div class="form-input-box">
+                                <img :src="loginPng4" alt="">
+                                <input v-model="formModel.username" placeholder="账号"/>
+                            </div>
+                            <div class="form-input-box">
+                                <img :src="loginPng4" alt="">
+                                <input type="password" v-model="formModel.password" placeholder="密码"/>
+                            </div>
+                            <div class="form-btn-box" @click="loginClick">
+                                <img :src="loginPng5" alt="">
+                                <div class="btn-text">登 录</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
+import {ref} from "vue";
+import {useRouter} from 'vue-router'
+const router = useRouter()
+//图片资源
+import loginBg from "~src/assets/login/bg.png";
+import loginGif from "~src/assets/login/1.gif";
+import loginPng2 from "~src/assets/login/2.png";
+import loginPng3 from "~src/assets/login/3.png";
+import loginPng4 from "~src/assets/login/4.png";
+import loginPng5 from "~src/assets/login/5.png";
 
-</script>
+const formModel = ref({
+    username: '',
+    password: '',
+})
 
-<style lang="scss" scoped>
+//登录页
+const loginClick = () => {
+    router.push({
+        name: 'home-index'
+    });
+}
+</script>
 
+<style lang="scss">
+@import "./style";
 </style>

src/views/login/style.scss

@@ -0,0 +1,135 @@
+.login-body {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    .login-body-bg-box {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        z-index: 0;
+        display: flex;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+    .login-container {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        .login-sign {
+            position: relative;
+            width: 1200px;
+            .title-img {
+                position: relative;
+                text-align: center;
+                img {
+                    width: 470px;
+                }
+                .login-title {
+                    position: absolute;
+                    text-align: center;
+                    width: 100%;
+                    top: 75px;
+                    font-size: 28px;
+                }
+            }
+        }
+        .login-sign .login-tab {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            top: -120px;
+            .login-tab-img {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 466px;
+                height: 466px;
+                animation: tab-img-loop 5s linear infinite;
+                img {
+                    width: 466px;
+                }
+            }
+            .login-tab-form {
+                position: relative;
+                margin-left: 24px;
+                img {
+                    width: 530px;
+                }
+                .form-box {
+                    position: absolute;
+                    top: 120px;
+                    bottom: 50px;
+                    left: 10px;
+                    right: 6px;
+                    padding: 40px;
+                }
+            }
+        }
+        .login-sign .login-tab .login-tab-form .form-box {
+            .form-input-box {
+                position: relative;
+                width: 100%;
+                img {
+                    width: 100%;
+                }
+                input {
+                    position: absolute;
+                    left: 5px;
+                    top: 5px;
+                    bottom: 10px;
+                    right: 5px;
+                    font-size: 18px;
+                    color: white;
+                    padding: 0 24px;
+                    border: none;
+                    background: transparent;
+                }
+            }
+            .form-input-box + .form-input-box {
+                margin-top: 40px;
+            }
+            .form-btn-box {
+                position: relative;
+                cursor: pointer;
+                width: 100%;
+                margin-top: 60px;
+                user-select: none;
+                img {
+                    width: 100%;
+                    transition: opacity .3s;
+                }
+                .btn-text {
+                    position: absolute;
+                    left: 5px;
+                    top: 5px;
+                    bottom: 10px;
+                    right: 5px;
+                    font-size: 30px;
+                    color: white;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background: transparent;
+                }
+                &:hover img {
+                    opacity: .6;
+                }
+            }
+        }
+    }
+}
+
+@keyframes tab-img-loop {
+    from { transform: rotate(0deg);}
+    50%  { transform: rotate(180deg);}
+    to   { transform: rotate(360deg);}
+}
+