V0.2.0.20250720

———————————————
1.登录页完善
———————————————

src/assets/main.css

@@ -5,3 +5,7 @@ body{
     width: 100%;
     height: 100%;
 }
+.container {
+    width: 90%;
+    margin: 0 auto;
+}

src/assets/ordinary/Home.css

@@ -8,12 +8,12 @@ body {
 
 .container {
     width: 90%;
-    height: 10vh;
     margin: 0 auto;
 }
 
 .logo {
     background-color: #4081bf;
+    height: 10vh;
 }
 
 

src/assets/ordinary/account.css

@@ -0,0 +1,8 @@
+.center-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /*background-color: red;*/
+    width: 100%;
+    height: 100vh;
+}

src/components/account/sign-in.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import "@/components/account/sign-in.css"
+</script>
+
+<template>
+  in
+</template>
+
+<style scoped>
+
+</style>

src/components/account/sign-option.css

@@ -0,0 +1,5 @@
+.el-button {
+    margin-bottom: 25px;
+    height: 10vh;
+    width: 50vw;
+}

src/components/account/sign-option.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import "@/components/account/sign-option.css"
+//定义事件
+const emit = defineEmits(['signin', 'signup'])
+//登陆事件
+const SigninOption = () => {
+  emit('signin')
+}
+//注册事件
+const SignupOption = () => {
+  emit('signup')
+}
+</script>
+
+<template>
+  <div class="frame">
+    <div class="frame-left"></div>
+    <div class="frame-interlocutory">
+      <div>
+        <el-button type="success" plain @click="SigninOption">登录</el-button>
+        <br>
+        <el-button type="warning" plain @click="SignupOption">注册</el-button>
+      </div>
+    </div>
+    <div class="frame-right"></div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/account/sign-up.css

@@ -0,0 +1,15 @@
+.el-text {
+    text-align: center;
+    width: 60%;
+    margin: 0;
+    padding:0;
+}
+
+.ButtonState {
+    width: 30%;
+    max-width: 120px;
+    min-width: 50px;
+    height: 30px;
+    margin: 0;
+    padding: 0;
+}

src/components/account/sign-up.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import "@/components/account/sign-up.css"
+import {reactive, ref} from 'vue'
+
+const emit = defineEmits(['option'])
+const handleBack = () => {
+  emit('option')
+}
+
+import type {FormInstance, FormRules} from 'element-plus'
+import {Back} from "@element-plus/icons-vue";
+
+const ruleFormRef = ref<FormInstance>()
+const validateEmail = (rule: any, value: string, callback: any) => {
+  if (!value) {
+    callback(new Error('请输入邮箱地址'))
+  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+    callback(new Error('请输入有效的邮箱地址'))
+  } else {
+    callback()
+  }
+}
+
+const validatePass = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('请输入密码'))
+  } else {
+    if (ruleForm.checkPass !== '') {
+      if (!ruleFormRef.value) return
+      ruleFormRef.value.validateField('checkPass')
+    }
+    callback()
+  }
+}
+const validatePass2 = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('请二次确认密码'))
+  } else if (value !== ruleForm.pass) {
+    callback(new Error("Two inputs don't match!"))
+  } else {
+    callback()
+  }
+}
+
+const ruleForm = reactive({
+  userid: '',
+  emailid: '',
+  pass: '',
+  checkPass: '',
+})
+
+const rules = reactive<FormRules<typeof ruleForm>>({
+  emailid: [{validator:validateEmail,trigger:'blur'}],
+  pass: [{validator: validatePass, trigger: 'blur'}],
+  checkPass: [{validator: validatePass2, trigger: 'blur'}],
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
+</script>
+
+<template>
+  <el-form
+      ref="ruleFormRef"
+      style="max-width: 600px"
+      :model="ruleForm"
+      status-icon
+      :rules="rules"
+      label-width="auto"
+      class="demo-ruleForm"
+  >
+    <el-form-item style="width:100%;">
+      <!--      返回-->
+      <el-button :shouldAddSpace="true" class="ButtonState-left ButtonState" round @click="handleBack">
+        <el-icon>
+          <Back/>
+        </el-icon>
+        返回
+      </el-button>
+      <el-text>登录</el-text>
+    </el-form-item>
+    <el-form-item label="用户名（UserID）" prop="userid">
+      <el-input v-model="ruleForm.text" type="text" autocomplete="off"/>
+    </el-form-item>
+    <el-form-item label="电子邮箱（Email）" prop="emailid">
+      <el-input v-model="ruleForm.email" type="email" autocomplete="off"/>
+    </el-form-item>
+    <el-form-item label="密码（Password）" prop="pass">
+      <el-input v-model="ruleForm.pass" type="password" autocomplete="off"/>
+    </el-form-item>
+    <el-form-item label="二次确认密码（CheckPass）" prop="checkPass">
+      <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off"/>
+    </el-form-item>
+    <el-form-item style="width:100%;">
+      <!--      忘记密码-->
+      <el-button key="ResetPassword" type="info" text style="height: 20px; margin: 0;padding: 0;">忘记密码？</el-button>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitForm(ruleFormRef)" style="height: 70px;">提交</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped>
+
+</style>

src/router/router.ts

@@ -1,17 +1,54 @@
 import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
-import Home from "@/views/ordinary/Home.vue";
-import NotFound from "@/components/NotFound.vue";
+import Home from "@/views/Home.vue";
+import NotFound from "@/error/NotFound.vue";
 import Admin from "@/views/managerial/admin.vue"
+import Account from "@/views/ordinary/account.vue"
+import Books from "@/views/ordinary/books.vue"
+import Journals from "@/views/ordinary/journals.vue"
+import Newspapers from "@/views/ordinary/newspapers.vue";
+import Main from "@/views/ordinary/main.vue";
 
 const routes: Array<RouteRecordRaw> = [
     {
         path: "/",
-        name:"home",
+        name: "home",
         component: Home,
+        children: [
+            {
+                path: "account",
+                name: "account",
+                component: Account,
+            },
+            {
+                path: "books",
+                name: "books",
+                component: Books,
+            },
+            {
+                path: "journals",
+                name: "journals",
+                component: Journals,
+            },
+            {
+                path: "newspapers",
+                name: "newspapers",
+                component: Newspapers,
+            },
+            {
+                path: "main",
+                name: "main",
+                component: Main,
+            },
+        ]
     },
     {
-        path:"/5Usw4tshU6SRG2HxSxeG2UKfZZ7HKvSjEZjvBV7WExUFYwUKTX",
-        name:"admin",
+        path: "/account",
+        name: "account",
+        component: Account,
+    },
+    {
+        path: "/5Usw4tshU6SRG2HxSxeG2UKfZZ7HKvSjEZjvBV7WExUFYwUKTX",
+        name: "admin",
         component: Admin,
     },
     {

src/views/Home.vue

@@ -3,6 +3,7 @@ import "@/assets/ordinary/Home.css"
 import {ref} from 'vue'
 import { UserFilled } from '@element-plus/icons-vue'
 import {useRouter} from "vue-router";
+const imgsrc = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png') //头像
 const router = useRouter()
 const activeIndex = ref(router.currentRoute.value.path) // 根据当前路由设置激活状态
 const handleSelect = (path: string) => {
@@ -23,7 +24,7 @@ const handleSelect = (path: string) => {
           router
       >
         <!-- 左侧菜单项 -->
-        <el-menu-item index="/" :route="{ path: '/'}">首页</el-menu-item>
+        <el-menu-item index="/main" :route="{ path: '/mian'}">首页</el-menu-item>
         <el-menu-item index="/books" :route="{ path: '/books'}">图书</el-menu-item>
         <el-menu-item index="/journals" :route="{ path: '/journals'}">期刊</el-menu-item>
         <el-menu-item index="/newspapers" :route="{ path: '/newspapers'}">报纸</el-menu-item>
@@ -31,15 +32,15 @@ const handleSelect = (path: string) => {
         <div class="flex-grow"></div>
         <!-- 头像-->
         <div style="margin: auto 0;">
-          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :icon="UserFilled"/>
+          <el-avatar :src="imgsrc" :icon="UserFilled"/>
         </div>
-        <el-menu-item index="5">读者登录</el-menu-item>
+        <el-menu-item index="/account" :route="{ path: '/account'}">读者登录</el-menu-item>
       </el-menu>
-      <div class="h-6"/>
+<!--      <div class="h-6"/>-->
     </div>
   </header>
-  <div>
-
+  <div class="container row-A">
+    <RouterView></RouterView>
   </div>
 </template>
 

src/views/ordinary/account.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import "@/assets/ordinary/account.css"
+import {ref} from 'vue'
+import SignOption from "@/components/account/sign-option.vue";
+import SignIn from "@/components/account/sign-in.vue";
+import SignUp from "@/components/account/sign-up.vue";
+
+//选项参数
+const state = ref('Option')
+const SigninOption = () => {
+  state.value = 'SignIn'
+}
+const SignupOption = () => {
+  state.value = 'SignUp'
+}
+const handleOption = () => {
+  state.value = 'Option'
+}
+</script>
+
+<template>
+  <div class="center-container">
+    <!--    @signin="SigninOption" 自定义事件-->
+    <SignOption v-if="state=='Option'" @signin="SigninOption" @signup="SignupOption"></SignOption>
+    <sign-in v-if="state=='SignIn'" @option="handleOption"></sign-in>
+    <sign-up v-if="state=='SignUp'" @option="handleOption"></sign-up>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/ordinary/books.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+图书
+</template>
+
+<style scoped>
+
+</style>

src/views/ordinary/journals.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+期刊
+</template>
+
+<style scoped>
+
+</style>

src/views/ordinary/main.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+首页
+</template>
+
+<style scoped>
+
+</style>

src/views/ordinary/newspapers.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+报纸
+</template>
+
+<style scoped>
+
+</style>