门户改动之前的版本

src/router/index.js

@@ -11,6 +11,10 @@ const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   // path和component对应关系的位置
   routes: [
+    {
+      path: '/login',
+      component: () => import('@/views/Login/index.vue')
+    },
     {
       path: '/',
       component: Layout,
@@ -37,7 +41,7 @@ const router = createRouter({
         },
         {
           path: 'textBookDetail',
-          component: () => import('@/views/TextBookDetail/index.vue')
+          component: () => import('@/views/TextbookDetail/index.vue')
         },
         {
           path: 'subject',

src/views/Login/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="login-container">
+    <div class="login-panel">
+      <div class="title">
+        <span>微信扫一扫</span>
+        <span>用户名密码登录</span>
+      </div>
+
+      <div class="login-form">
+        <div class="left">
+          <img src="@/assets/images/qrcode.jpg" alt="">
+          </img>
+        </div>
+
+        <div class="right">
+          <el-form ref="loginFormRef" :model="loginForm" status-icon :rules="rules" label-width="auto">
+            <el-form-item label="" prop="username">
+              <el-input v-model.number="loginForm.username" placeholder="请输入用户名" :prefix-icon="User" />
+            </el-form-item>
+
+            <el-form-item label="" prop="password">
+              <el-input v-model="loginForm.password" type="password" autocomplete="off" placeholder="请输入密码"
+                :prefix-icon="Lock" />
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="submitForm(loginFormRef)">
+                登录
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { User, Lock } from '@element-plus/icons-vue'
+
+const loginForm = reactive({
+  username: '',
+  password: ''
+})
+
+const rules = reactive({
+
+})
+
+const submitForm = (formEl) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
+</script>
+
+<style scoped lang='scss'>
+.login-container {
+  width: 100%;
+  height: 100vh;
+  background: url(@/assets/images/home-bg.png);
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .login-panel {
+    width: 700px;
+    height: 350px;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 50px;
+
+    .title {
+      display: flex;
+      justify-content: space-around;
+      color: #000;
+      font-size: 16px;
+    }
+
+    .login-form {
+      display: flex;
+      padding-top: 30px;
+
+      .left {
+        width: 50%;
+        border-right: 2px solid #ccc;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .right {
+        width: 50%;
+        margin-left: 20px;
+        padding: 30px 0;
+
+        .el-button {
+          margin: 0 auto;
+          width: 80%;
+        }
+      }
+    }
+  }
+}
+</style>