itbaima-study/itbaima-forum-session
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成路由配置

Browse Source
This commit is contained in:
NagoColer 2023-04-10 17:59:10 +08:00
parent 6ac4a0b138
commit 9cfe561071
5 changed files with 109 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
study-project-frontend/src/App.vue
View File

@ -1,52 +1,9 @@
<script setup>
import {User, Lock} from '@element-plus/icons-vue'
</script>
<template>
<div style="width: 100vw;height: 100vh;overflow: hidden;display: flex">
<div style="flex: 1">
<el-image style="width: 100%;height: 100%" fit="cover"
src="https://img1.baidu.com/it/u=4097856652,4033702227&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"/>
</div>
<div style="width: 400px;background-color: white">
<div style="text-align: center;margin: 0 20px">
<div style="margin-top: 150px">
<div style="font-size: 25px;font-weight: bold">登录</div>
<div style="font-size: 14px;color: grey">在进入系统之前请先输入用户名和密码进行登录</div>
</div>
<div style="margin-top: 50px">
<el-input type="text" placeholder="用户名/邮箱">
<template #prefix>
<el-icon><User /></el-icon>
</template>
</el-input>
<el-input type="password" style="margin-top: 10px" placeholder="密码">
<template #prefix>
<el-icon><Lock /></el-icon>
</template>
</el-input>
</div>
<el-row style="margin-top: 5px">
<el-col :span="12" style="text-align: left">
<el-checkbox v-model="checked1" label="记住我"/>
</el-col>
<el-col :span="12" style="text-align: right">
<el-link>忘记密码？</el-link>
</el-col>
</el-row>
<div style="margin-top: 40px">
<el-button style="width: 270px" type="success" plain>立即登录</el-button>
</div>
<el-divider>
<span style="color: grey;font-size: 13px">没有账号</span>
</el-divider>
<div>
<el-button style="width: 270px" type="warning" plain>注册账号</el-button>
</div>
</div>
</div>
</div>
<router-view/>
</template>
<style scoped>

45
study-project-frontend/src/components/welcome/LoginPage.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div style="text-align: center;margin: 0 20px">
<div style="margin-top: 150px">
<div style="font-size: 25px;font-weight: bold">登录</div>
<div style="font-size: 14px;color: grey">在进入系统之前请先输入用户名和密码进行登录</div>
</div>
<div style="margin-top: 50px">
<el-input type="text" placeholder="用户名/邮箱">
<template #prefix>
<el-icon><User /></el-icon>
</template>
</el-input>
<el-input type="password" style="margin-top: 10px" placeholder="密码">
<template #prefix>
<el-icon><Lock /></el-icon>
</template>
</el-input>
</div>
<el-row style="margin-top: 5px">
<el-col :span="12" style="text-align: left">
<el-checkbox v-model="checked1" label="记住我"/>
</el-col>
<el-col :span="12" style="text-align: right">
<el-link>忘记密码？</el-link>
</el-col>
</el-row>
<div style="margin-top: 40px">
<el-button style="width: 270px" type="success" plain>立即登录</el-button>
</div>
<el-divider>
<span style="color: grey;font-size: 13px">没有账号</span>
</el-divider>
<div>
<el-button style="width: 270px" type="warning" plain>注册账号</el-button>
</div>
</div>
</template>
<script setup>
import {User, Lock} from '@element-plus/icons-vue'
</script>
<style scoped>
</style>

17
study-project-frontend/src/router/index.js
View File

@ -3,7 +3,22 @@ import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'welcome',
component: () => import('@/views/WelcomeView.vue'),
children: [
{
path: '',
name: 'welcome-login',
component: () => import('@/components/welcome/LoginPage.vue')
}
]
}, {
path: '/index',
name: 'index',
component: () => import('@/views/IndexView.vue')
}
]
})

16
study-project-frontend/src/views/IndexView.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div>
欢迎进入到学习平台
</div>
<div>
<el-button type="danger" plain>退出登录</el-button>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>

30
study-project-frontend/src/views/WelcomeView.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div style="width: 100vw;height: 100vh;overflow: hidden;display: flex">
<div style="flex: 1">
<el-image style="width: 100%;height: 100%" fit="cover"
src="https://img1.baidu.com/it/u=4097856652,4033702227&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"/>
</div>
<div class="welcome-title">
<div style="font-size: 30px;font-weight: bold">欢迎来到我们的学习平台</div>
<div style="margin-top: 10px">在这里你可以学习如何使用Java，如何搭建网站，并且与Java之父密切交流。</div>
<div style="margin-top: 5px">在这里你可以同性交友，因为都是男的，没有学Java的女生。</div>
</div>
<div style="width: 400px;background-color: white">
<router-view/>
</div>
</div>
</template>
<script setup>
</script>
<style scoped>
.welcome-title {
position: absolute;
bottom: 30px;
left: 30px;
color: white;
text-shadow: 0 0 10px black;
}
</style>