parent
20023c684a
commit
29912d3580
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
# class_system
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
pnpm build
|
||||
```
|
||||
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "class_system",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^1.7.7",
|
||||
"element-plus": "^2.8.4",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.29",
|
||||
"vue-router": "^4.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"pinia-plugin-persistedstate": "^4.1.1",
|
||||
"unplugin-auto-import": "^0.18.3",
|
||||
"unplugin-vue-components": "^0.27.4",
|
||||
"vite": "^5.3.1"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
|
||||
//上传接口
|
||||
export const uploadService = (file) => {
|
||||
return request.post('/upload/', { file: file })
|
||||
}
|
||||
|
||||
//排行榜展示
|
||||
export const rankingShow = () => {
|
||||
return request.get('/leaderboard/')
|
||||
}
|
||||
|
||||
//启动点名
|
||||
export const callService = () => {
|
||||
return request.post('/roll_call/', { start_roll_call: 'true' } )
|
||||
}
|
||||
|
||||
//启动点名
|
||||
export const callCheckService = (id,dao,wen,ans) => {
|
||||
return request.post('/confirm_roll_call/',
|
||||
{
|
||||
student_id: id,
|
||||
attended: dao,
|
||||
question_repeat: wen,
|
||||
answer_accuracy: ans,
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
|
||||
//注册接口
|
||||
export const userRegisterService = ({user,pwd}) => {
|
||||
return request.post('/toregister/', { user: user, pwd: pwd })
|
||||
}
|
||||
|
||||
//登录接口
|
||||
export const userLoginService = ({ user, pwd }) => {
|
||||
return request.post('/', { user: user, pwd: pwd })
|
||||
}
|
||||
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,9 @@
|
||||
@font-face {
|
||||
font-family: 'LOGO';
|
||||
src: url(ZhanKuXiaoLOGOTi-2.otf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KUAI';
|
||||
src: url(ZhanKuKuaiLeTi2016XiuDingBan-1.ttf);
|
||||
}
|
||||
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 365 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 208 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,16 @@
|
||||
|
||||
import { createApp } from 'vue'
|
||||
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import pinia from '@/stores/index'
|
||||
|
||||
import './assets/font/font.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
@ -0,0 +1,33 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/home',
|
||||
component: () => import('@/views/HomePage.vue'),//首页
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/LoginPage.vue'),//登录页
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
component: () => import('@/views/RegisterPage.vue'),//注册页
|
||||
},
|
||||
{
|
||||
path: '/', component: () => import('@/views/LayoutPage.vue'), redirect: '/ready',
|
||||
children: [
|
||||
{ path: '/ready', component: () => import('@/views/ReadyCall.vue') },
|
||||
{ path: '/rank', component: () => import('@/views/RankingList.vue') },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/rollcall',
|
||||
component: () => import('@/views/RollCall.vue'),//点名页
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -0,0 +1,12 @@
|
||||
import { createPinia } from 'pinia'
|
||||
import persist from 'pinia-plugin-persistedstate'
|
||||
|
||||
const pinia = createPinia()
|
||||
pinia.use(persist)
|
||||
|
||||
export default pinia
|
||||
|
||||
// import { useUserStore } from './modules/user'
|
||||
// export { useUserStore }
|
||||
export * from './modules/user'
|
||||
export * from './modules/ranking.js'
|
||||
@ -0,0 +1,14 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, reactive } from 'vue'
|
||||
export const useRankingStore = defineStore('rank', () => {
|
||||
const list = ref([
|
||||
|
||||
])
|
||||
const count = ref('0')
|
||||
return {
|
||||
list,
|
||||
count,
|
||||
}
|
||||
}, {
|
||||
persist: true
|
||||
})
|
||||
@ -0,0 +1,11 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useUserStore = defineStore('big-user', () => {
|
||||
const user = ref('')
|
||||
|
||||
|
||||
return { user }
|
||||
}, {
|
||||
persist: true
|
||||
})
|
||||
@ -0,0 +1,34 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const baseURL = 'http://10.133.12.95:8000/polls'
|
||||
const instance = axios.create({
|
||||
baseURL: 'http://10.133.12.95:8000/polls',
|
||||
timeout: 1000
|
||||
})
|
||||
|
||||
// 添加请求拦截器
|
||||
instance.interceptors.request.use(
|
||||
(config) => {
|
||||
// 在发送请求之前做些什么
|
||||
return config
|
||||
},
|
||||
(error) => Promise.reject(error)
|
||||
// 对请求错误做些什么
|
||||
)
|
||||
|
||||
// 添加响应拦截器
|
||||
instance.interceptors.response.use(
|
||||
(response) => {
|
||||
// 2xx 范围内的状态码都会触发该函数。
|
||||
// 对响应数据做点什么
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
// 超出 2xx 范围的状态码都会发该函数。
|
||||
// 对响应错误做点什么
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default instance
|
||||
export { baseURL }
|
||||
@ -0,0 +1,83 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-menu class="transparent-menu" text-color="white" mode="horizontal">
|
||||
<el-menu-item class="transparent-menu-item" style="font-size:x-large;letter-spacing: 8px;">
|
||||
classroom roll call system
|
||||
</el-menu-item>
|
||||
<div class="flex-grow" />
|
||||
<el-menu-item class="transparent-menu-item" style="font-size: large;">首页</el-menu-item>
|
||||
<el-menu-item class="transparent-menu-item" style="font-size: large;">关于我们</el-menu-item>
|
||||
<el-button class="transparent-button" @click="$router.push('/login')">login
|
||||
in</el-button>
|
||||
</el-menu>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-button class="transparent-button enter-button" @click="$router.push('/ready')"
|
||||
style="position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%);width: 140px;height: 50px;font-size: larger;">进入</el-button>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style>
|
||||
.transparent-menu {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none ;
|
||||
font-family: "KUAI";
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 0.9;
|
||||
}
|
||||
|
||||
.common-layout {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-image: url('@/assets/first.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.enter-button {
|
||||
font-family: "LOGO";
|
||||
}
|
||||
|
||||
.transparent-button {
|
||||
background-color: transparent;
|
||||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.763);
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
margin-top: 15px;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-menu-item {
|
||||
background-color: transparent !important;
|
||||
&:hover {
|
||||
border-bottom: 2px solid #fff !important;
|
||||
background-color: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-menu-item.is-active {
|
||||
border-bottom: 2px solid #fff !important;
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
import { Pointer, Histogram, Tools } from '@element-plus/icons-vue'
|
||||
import labi from '@/assets/labi.jpg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div calss="button-box">
|
||||
<el-row>
|
||||
<el-col :span="8" style="background-color: #e8edf0;">
|
||||
<el-avatar :size="100" :src=labi class="labi" />
|
||||
<div class="menu">
|
||||
<el-menu active-text-color="#fff" class="el-menu-vertical-demo" :default-active="$route.path"
|
||||
router>
|
||||
<el-menu-item index="/ready">
|
||||
<el-icon>
|
||||
<Pointer class="icon-group" />
|
||||
</el-icon>
|
||||
<span>点名</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/rank">
|
||||
<el-icon>
|
||||
<Histogram class="icon-group" />
|
||||
</el-icon>
|
||||
<span>排行榜</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-button class="butt" @click="$router.push('/home')"
|
||||
style="position: absolute; top: 90%; left:9%; transform: translate(-50%, -50%);width: 90px;height: 40px">
|
||||
返回首页
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<router-view></router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.button-box{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.menu{
|
||||
margin-top: 300px;
|
||||
margin-left: 80px;
|
||||
margin-right: 80px;
|
||||
padding-bottom: 250px;
|
||||
|
||||
}
|
||||
|
||||
.labi {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 12%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: #6c6c6c;
|
||||
&:hover {
|
||||
background-color: #92a772;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background-color: #92a772;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.butt{
|
||||
color: #fff;
|
||||
background-color: #92a772;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #92a772;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,135 @@
|
||||
<script setup>
|
||||
import { userLoginService } from '@/api/user.js'
|
||||
import { User, Lock } from '@element-plus/icons-vue'
|
||||
import { ref ,reactive} from 'vue'
|
||||
import imgText from '@/assets/login.png'
|
||||
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const formdata = ref()
|
||||
const loginForm = reactive({
|
||||
user: '',
|
||||
pwd: '',
|
||||
})
|
||||
|
||||
const rules = {
|
||||
user: [
|
||||
{ required: true, message: '用户名不能为空', trigger: 'change' },
|
||||
{ pattern: /^.{2,}$/, message: '用户名长度不小于2位', trigger: 'change' }
|
||||
],
|
||||
pwd: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'change' },
|
||||
{ pattern: /^(?![0-9A-Z.]+$)(?![0-9a-z.]+$).{8,}$/, message: '密码长度不小于8位,同时包含大小写字母', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
const login = async () => {
|
||||
await formdata.value.validate()
|
||||
const res = await userLoginService(formdata.value)
|
||||
console.log(res)
|
||||
ElMessage.success('登录成功')
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="all-back">
|
||||
<div class="first-back">
|
||||
<el-row>
|
||||
<el-col :span="12" class="left-col">
|
||||
<div class="left-top">
|
||||
<el-menu class="transparent-menu" mode="horizontal">
|
||||
<el-menu-item class="transparent-menu-item"
|
||||
style="font-size: large;border-bottom: 2px solid">登录</el-menu-item>
|
||||
<el-menu-item class="transparent-menu-item" style="font-size: large;"
|
||||
@click="$router.push('/register')">注册</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="left-button">
|
||||
<!--登陆界面-->
|
||||
<el-form :model="loginForm" :rules="rules" ref="formdata">
|
||||
<el-form-item prop="user">
|
||||
<el-icon :size="20" style="color:#8fa46e ;margin-right: 10px;">
|
||||
<User />
|
||||
</el-icon>
|
||||
<el-input v-model="loginForm.user" placeholder="请输入用户名"
|
||||
style="width: 350px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="pwd">
|
||||
<el-icon :size="20" style="color:#8fa46e ;margin-right: 10px;">
|
||||
<Lock />
|
||||
</el-icon>
|
||||
<el-input v-model="loginForm.pwd" placeholder="请输入密码" style="width: 350px;"
|
||||
type="password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button color="#8fa46e"
|
||||
style="color: aliceblue;margin-top: 40px;margin-left: 40px;border-radius: 20px;width: 90px;"
|
||||
@click="login">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img :src="imgText" style="width: 100%;height: 580px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.all-back {
|
||||
background-color: #b6bca6;
|
||||
width: 100%;
|
||||
height: 97.7vh;
|
||||
}
|
||||
.first-back {
|
||||
display: inline-block;
|
||||
margin-top: 5%;
|
||||
margin-left: 17%;
|
||||
width: 1000px;
|
||||
height: 580px;
|
||||
background-color: #dce1de;
|
||||
}
|
||||
|
||||
.transparent-menu {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.transparent-menu-item {
|
||||
background-color: transparent !important;
|
||||
color: #8fa46e !important;
|
||||
&:hover {
|
||||
border-bottom: 2px solid #8fa46e !important;
|
||||
background-color: transparent !important;
|
||||
color: #8fa46e !important;
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-menu-item.is-active {
|
||||
border-bottom: 2px solid #8fa46e !important;
|
||||
color: #8fa46e !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.left-top {
|
||||
margin-top: 50px;
|
||||
margin-left: 50px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.left-button {
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { rankingShow } from '@/api/student.js'
|
||||
|
||||
const tableData = reactive([])
|
||||
|
||||
const rankShow = async () => {
|
||||
const res = await rankingShow()
|
||||
tableData.value = res.data.leaderboard
|
||||
console.log(res.data);
|
||||
console.log(tableData.value)
|
||||
}
|
||||
rankShow()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1 class="top-title">学生积分排行榜</h1>
|
||||
<div class="rank-table">
|
||||
<el-card style="margin-left: 30px;margin-right: 30px;height: 600px;">
|
||||
<template style="background-color: #e8edf0;" #header>
|
||||
<div class="card-header">
|
||||
<span>软件K班</span>
|
||||
</div>
|
||||
</template>
|
||||
<!--排行榜-->
|
||||
<el-table height="510" :data="tableData.value" style="width: 100%;color:#909399">
|
||||
<el-table-column type="index" label="排名" width="100" />
|
||||
<el-table-column prop="student_id" label="学号" width="300" />
|
||||
<el-table-column prop="name" label="姓名" width="300">
|
||||
</el-table-column>
|
||||
<el-table-column prop="score" label="积分" width="70">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.top-title {
|
||||
font-family: KUAI;
|
||||
color: #8fa46e;
|
||||
font-size:xx-large;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-family: KUAI;
|
||||
font-size: larger;
|
||||
color: #8fa46e;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,133 @@
|
||||
<script setup>
|
||||
import { userRegisterService } from '@/api/user.js'
|
||||
import { User, Lock } from '@element-plus/icons-vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
import imgText from '@/assets/login.png'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const formdata = ref()
|
||||
const loginForm = ref({
|
||||
user: '',
|
||||
pwd: '',
|
||||
})
|
||||
|
||||
const rules = {
|
||||
user: [
|
||||
{ required: true, message: '用户名不能为空', trigger: 'change' },
|
||||
{ pattern: /^.{2,}$/, message: '用户名长度不小于2位', trigger: 'change' }
|
||||
],
|
||||
pwd: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'change' },
|
||||
{ pattern: /^(?![0-9A-Z.]+$)(?![0-9a-z.]+$).{8,}$/, message: '密码长度不小于8位,同时包含大小写字母', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
const register = async () => {
|
||||
await formdata.value.validate()
|
||||
const res = await userRegisterService(loginForm.value)
|
||||
console.log(res)
|
||||
ElMessage.success('注册成功')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="all-back">
|
||||
<div class="first-back">
|
||||
<el-row>
|
||||
<el-col :span="12" class="left-col">
|
||||
<div class="left-top">
|
||||
<el-menu class="transparent-menu" mode="horizontal">
|
||||
<el-menu-item class="transparent-menu-item" style="font-size: large;"
|
||||
@click="$router.push('/login')">登录</el-menu-item>
|
||||
<el-menu-item class="transparent-menu-item"
|
||||
style="font-size: large;border-bottom: 2px solid">注册</el-menu-item>
|
||||
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="left-button">
|
||||
<!--登陆界面-->
|
||||
<el-form :model="loginForm" :rules="rules" ref="formdata">
|
||||
<el-form-item prop="user">
|
||||
<el-icon :size="20" style="color:#8fa46e ;margin-right: 10px;">
|
||||
<User />
|
||||
</el-icon>
|
||||
<el-input v-model="loginForm.user" placeholder="请输入用户名"
|
||||
style="width: 350px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="pwd">
|
||||
<el-icon :size="20" style="color:#8fa46e ;margin-right: 10px;">
|
||||
<Lock />
|
||||
</el-icon>
|
||||
<el-input v-model="loginForm.pwd" placeholder="请输入密码" style="width: 350px;"
|
||||
type="password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button color="#8fa46e" @click="register"
|
||||
style="color: aliceblue;margin-top: 40px;margin-left: 40px;border-radius: 20px;width: 90px;">注册</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img :src="imgText" style="width: 100%;height: 580px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.all-back {
|
||||
background-color: #b6bca6;
|
||||
width: 100%;
|
||||
height: 97.7vh;
|
||||
}
|
||||
|
||||
.first-back {
|
||||
display: inline-block;
|
||||
margin-top: 5%;
|
||||
margin-left: 17%;
|
||||
width: 1000px;
|
||||
height: 580px;
|
||||
background-color: #dce1de;
|
||||
}
|
||||
|
||||
.transparent-menu {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.transparent-menu-item {
|
||||
background-color: transparent !important;
|
||||
color: #8fa46e !important;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid #8fa46e !important;
|
||||
background-color: transparent !important;
|
||||
color: #8fa46e !important;
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-menu-item.is-active {
|
||||
border-bottom: 2px solid #8fa46e !important;
|
||||
color: #8fa46e !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.left-top {
|
||||
margin-top: 50px;
|
||||
margin-left: 50px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.left-button {
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
})
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in new issue