develoop
ww
5 months ago
parent
f88b793800
commit
a74923f1e9
15 changed files with 650 additions and 1189 deletions
@ -1,9 +1,121 @@ |
|||||||
<template> |
|
||||||
<div>课程目标</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
import {} from 'vue' |
import {} from 'vue' |
||||||
|
// import allclass from '@/assets/images/allclass.png' |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss" scoped></style> |
<template> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="8"> |
||||||
|
<div class="grid-content main"> |
||||||
|
<div class="title"><p>| 课程总目标</p></div> |
||||||
|
<div class="ac_content"> |
||||||
|
<div class="ma_content"> |
||||||
|
通过本课程的学习，使学生进一步了解计算机的工作原理，更好地理解和应用计算机，掌 |
||||||
|
握用计算机处理问题的方法和技能:培养学生分析问题、解决问题的能力以及编制程序实现算 |
||||||
|
法的能力。 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="grid-content picture"> |
||||||
|
<div class="title"><p>| 课程总目标</p></div> |
||||||
|
<div class="ac_pic"></div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="16"> |
||||||
|
<div class="grid-content object"> |
||||||
|
<div class="title"><p>| 课程分目标</p></div> |
||||||
|
<div class="slice"></div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style> |
||||||
|
.el-row { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.el-col { |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
.bg-purple { |
||||||
|
background: #d3dce6; |
||||||
|
} |
||||||
|
.bg-purple-light { |
||||||
|
background: #e5e9f2; |
||||||
|
} |
||||||
|
.grid-content { |
||||||
|
border-radius: 4px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.ac_content { |
||||||
|
background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%); |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
height: 206px; |
||||||
|
} |
||||||
|
.ma_content { |
||||||
|
height: 160px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 16px; |
||||||
|
color: #333333; |
||||||
|
line-height: 20px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
margin-left: 33px; |
||||||
|
margin-right: 33px; |
||||||
|
} |
||||||
|
.ac_pic { |
||||||
|
height: 488px; |
||||||
|
background: linear-gradient(180deg, #ffe9c7 0%, #ffffff 100%); |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
} |
||||||
|
img { |
||||||
|
order: -1; |
||||||
|
} |
||||||
|
.object { |
||||||
|
height: 857px; |
||||||
|
background: linear-gradient(180deg, #4984ff 0%, #74deff 100%); |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
} |
||||||
|
.slice { |
||||||
|
height: 791px; |
||||||
|
background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%); |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
} |
||||||
|
.picture { |
||||||
|
height: 553px; |
||||||
|
margin-top: 28px; |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
background-image: linear-gradient(to right, #f9e397, #ffa674); |
||||||
|
} |
||||||
|
.main { |
||||||
|
height: 272px; |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
background-image: linear-gradient(to right, #4984ff, #74deff); |
||||||
|
display: flex; |
||||||
|
justify-content: end; |
||||||
|
} |
||||||
|
.title { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
p { |
||||||
|
height: 29px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: bold; |
||||||
|
margin-left: 34px; |
||||||
|
font-size: 24px; |
||||||
|
color: #ffffff; |
||||||
|
line-height: 28px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
@ -1,181 +1,6 @@ |
|||||||
|
<script setup></script> |
||||||
<template> |
<template> |
||||||
<div class="container"> |
<div></div> |
||||||
<div class="main"> |
|
||||||
<div class="head"> |
|
||||||
<img src="../src/assets/static/image/demo.png" alt="" /> |
|
||||||
<div class="title">智慧物业管理平台</div> |
|
||||||
</div> |
|
||||||
<!-- 登录内容区域 --> |
|
||||||
<div class="login"> |
|
||||||
<div class="login-options"> |
|
||||||
<div |
|
||||||
class="login-item" |
|
||||||
v-for="(item, index) in loginitems" |
|
||||||
:key="item.id" |
|
||||||
:class="current === index ? 'move' : ''" |
|
||||||
@click="change(index)" |
|
||||||
> |
|
||||||
{{ item.text }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="con"> |
|
||||||
<div class="con-item" v-if="current == 0"> |
|
||||||
<div class="input-items"> |
|
||||||
<input |
|
||||||
type="text" |
|
||||||
v-model="phonevalue" |
|
||||||
placeholder="输入手机号" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div class="input-items"> |
|
||||||
<input type="text" v-model="codevalue" placeholder="输入验证码" /> |
|
||||||
<div class="getcode" @click="getcode"> |
|
||||||
<p v-if="isok == 1">获取验证码</p> |
|
||||||
<p v-else>{{ countTime }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="login-btn" @click="login">登录</div> |
|
||||||
</div> |
|
||||||
<div class="con-item" v-if="current == 1"> |
|
||||||
<div class="input-items"> |
|
||||||
<input |
|
||||||
type="text" |
|
||||||
v-model="phonevalue" |
|
||||||
placeholder="输入手机号" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<el-input |
|
||||||
v-model="passwordinput" |
|
||||||
style="height: 41px; border: 0; outline: none" |
|
||||||
type="password" |
|
||||||
placeholder="输入密码" |
|
||||||
show-password |
|
||||||
/> |
|
||||||
<div class="reset" @click="gotoforgetPassword">重置密码></div> |
|
||||||
<div class="login-btn" @click="login">登录</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<style></style> |
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
imageUrl: '', |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
previewImage(event) { |
|
||||||
const input = event.target |
|
||||||
const reader = new FileReader() |
|
||||||
reader.onload = () => { |
|
||||||
this.imageUrl = reader.result |
|
||||||
} |
|
||||||
reader.readAsDataURL(input.files[0]) |
|
||||||
}, |
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.container { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
height: 100vh; |
|
||||||
} |
|
||||||
.main { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.head { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.head .title { |
|
||||||
font-size: 22px; |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
.head img { |
|
||||||
width: 300px; |
|
||||||
height: 200px; |
|
||||||
} |
|
||||||
.move { |
|
||||||
color: #f5b90f; |
|
||||||
padding-bottom: 5px; |
|
||||||
font-weight: 600; |
|
||||||
border-bottom: 2px solid #f5b90f; |
|
||||||
} |
|
||||||
.login-options { |
|
||||||
margin: 20px 0 10px 0; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.login { |
|
||||||
width: 300px; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.login-item { |
|
||||||
box-sizing: border-box; |
|
||||||
padding-bottom: 5px; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
.input-items { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: space-between; |
|
||||||
background-color: #fff; |
|
||||||
border: 1px solid #ccc; |
|
||||||
border-radius: 5px; |
|
||||||
height: 40px; |
|
||||||
margin: 10px 0; |
|
||||||
} |
|
||||||
input { |
|
||||||
padding-left: 10px; |
|
||||||
outline: none; |
|
||||||
padding-right: 10px; |
|
||||||
border: 0; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.getcode { |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
.con-item { |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.getcode p { |
|
||||||
width: 80px; |
|
||||||
height: 25px; |
|
||||||
text-align: center; |
|
||||||
background-color: #f5b90f; |
|
||||||
color: #fff; |
|
||||||
font-size: 12px; |
|
||||||
line-height: 25px; |
|
||||||
border-radius: 5px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.login-btn { |
|
||||||
width: 100%; |
|
||||||
height: 30px; |
|
||||||
border-radius: 5px; |
|
||||||
text-align: center; |
|
||||||
line-height: 30px; |
|
||||||
color: #fff; |
|
||||||
margin: 45px 0; |
|
||||||
background-color: #f5b90f; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.reset { |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
color: #f5b90f; |
|
||||||
font-size: 12px; |
|
||||||
margin: 10px 0; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|||||||
@ -0,0 +1,108 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
const courses = [ |
||||||
|
{ |
||||||
|
name: 'Vue.js Basics', |
||||||
|
image: 'vuejs-basics.jpg', |
||||||
|
hours: 20, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Reac', |
||||||
|
image: 'react-fundamentals.jpg', |
||||||
|
hours: 25, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Reacts', |
||||||
|
image: 'react-fundamentals.jpg', |
||||||
|
hours: 25, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'React Fund', |
||||||
|
image: 'react-fundamentals.jpg', |
||||||
|
hours: 25, |
||||||
|
}, |
||||||
|
] |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 214px; height: 326px"> |
||||||
|
<conheader title="我的科目"></conheader> |
||||||
|
<div class="info_content" style="width: 214px; height: 264px"> |
||||||
|
<div class="course-list"> |
||||||
|
<div |
||||||
|
v-for="(course, index) in courses" |
||||||
|
:key="index" |
||||||
|
class="course-item" |
||||||
|
> |
||||||
|
<img :src="course.image" alt="course image" class="course-image" /> |
||||||
|
<div class="course-info"> |
||||||
|
<p class="course-name">{{ course.name }}</p> |
||||||
|
<p class="course-hours">{{ course.hours }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.class { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.course-list { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 132px; |
||||||
|
height: 48px; |
||||||
|
} |
||||||
|
.course-item { |
||||||
|
display: flex; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.course-image { |
||||||
|
width: 48px; |
||||||
|
height: 48px; |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.course-info { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 75px; |
||||||
|
height: 46px; |
||||||
|
} |
||||||
|
|
||||||
|
.course-name { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
|
||||||
|
.course-hours { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 12px; |
||||||
|
color: rgba(0, 0, 0, 0.4); |
||||||
|
line-height: 20px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
import { ref } from 'vue' |
||||||
|
const name = ['Aa', 'Bb', 'Cc', 'Dd'] |
||||||
|
const getRandomColor = () => { |
||||||
|
// 生成随机的颜色值 |
||||||
|
return '#' + Math.floor(Math.random() * 16777215).toString(16) |
||||||
|
} |
||||||
|
const drawer2 = ref(false) |
||||||
|
const direction = ref('rtl') |
||||||
|
function cancelClick() { |
||||||
|
drawer2.value = false |
||||||
|
} |
||||||
|
function confirmClick() { |
||||||
|
drawer2.value = false |
||||||
|
} |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 222px; height: 174px"> |
||||||
|
<conheader title="已分组别" v-model="drawer2"> |
||||||
|
<div>编辑</div> |
||||||
|
<template #drawer> |
||||||
|
<el-drawer v-model="drawer2" :direction="direction"> |
||||||
|
<template #header> |
||||||
|
<h4>78</h4> |
||||||
|
</template> |
||||||
|
<template #default> |
||||||
|
<div></div> |
||||||
|
</template> |
||||||
|
<template #footer> |
||||||
|
<div style="flex: auto"> |
||||||
|
<el-button @click="cancelClick">cancel</el-button> |
||||||
|
<el-button type="primary" @click="confirmClick"> |
||||||
|
confirm |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-drawer> |
||||||
|
</template> |
||||||
|
</conheader> |
||||||
|
<div class="info_content" style="width: 194px; height: 112px"> |
||||||
|
<div |
||||||
|
v-for="(item, index) in name" |
||||||
|
:key="index" |
||||||
|
class="stu_color" |
||||||
|
:style="{ backgroundColor: getRandomColor() }" |
||||||
|
> |
||||||
|
{{ item }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.stu { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
width: 194px; |
||||||
|
height: 112px; |
||||||
|
flex-wrap: wrap; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(3, 1fr); |
||||||
|
gap: 24px; /* 设置元素之间的间隔 */ |
||||||
|
grid-row-gap: 16px; |
||||||
|
} |
||||||
|
.stu_color { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 49px; |
||||||
|
height: 48px; |
||||||
|
border-radius: 40px 40px 40px 40px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(255, 255, 255, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
transition: background-color 0.3s; |
||||||
|
} |
||||||
|
.stu_color:hover { |
||||||
|
background-color: #f2f2f2; /* 鼠标移入时的背景色变化 */ |
||||||
|
filter: brightness(1.1); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,107 +1,5 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>消息</div> |
||||||
<el-button type="primary" @click="openDrawer">Open Drawer</el-button> |
|
||||||
|
|
||||||
<el-drawer |
|
||||||
title="Drawer Title" |
|
||||||
v-model:visible="drawerVisible" |
|
||||||
:direction="drawerDirection" |
|
||||||
:width="drawerWidth" |
|
||||||
> |
|
||||||
<el-table :data="formModel" style="width: 100%"> |
|
||||||
<el-table-column prop="name" label="Name"></el-table-column> |
|
||||||
<el-table-column prop="content" label="Content"> |
|
||||||
<template #default="{ row }"> |
|
||||||
<el-button type="text" @click="openEditDialog(row)">Edit</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</el-drawer> |
|
||||||
|
|
||||||
<el-dialog v-model:visible="editDialogVisible"> |
|
||||||
<el-form :model="editForm" label-width="80px"> |
|
||||||
<el-form-item label="Name" prop="name"> |
|
||||||
<el-input v-model="editForm.name"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Content" prop="content"> |
|
||||||
<el-input v-model="editForm.content"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
|
|
||||||
<template v-slot:footer> |
|
||||||
<div> |
|
||||||
<el-button @click="cancelEdit">Cancel</el-button> |
|
||||||
<el-button type="primary" @click="saveEdit">Save</el-button> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-dialog> |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script></script> |
||||||
import { reactive } from 'vue' |
|
||||||
|
|
||||||
export default { |
|
||||||
setup() { |
|
||||||
const data = reactive([ |
|
||||||
{ name: 'Macbook', content: 9.9 }, |
|
||||||
{ name: 'iPhone', content: 9.9 }, |
|
||||||
{ name: '小米电脑', content: 9.9 }, |
|
||||||
{ name: '小米电脑', content: 9.9 }, |
|
||||||
{ name: '小米电脑', content: 9.9 }, |
|
||||||
{ name: '小米电脑', content: 9.9 }, |
|
||||||
{ name: '小米电脑', content: 9.9 }, |
|
||||||
{ name: '小米电脑', content: 9.9 }, |
|
||||||
{ name: '小米电脑', content: 9.9 }, |
|
||||||
]) |
|
||||||
|
|
||||||
const drawerVisible = reactive(false) |
|
||||||
const drawerDirection = reactive('ltr') |
|
||||||
const drawerWidth = reactive('500px') |
|
||||||
const editDialogVisible = reactive(false) |
|
||||||
const editForm = reactive({ |
|
||||||
name: '', |
|
||||||
content: '', |
|
||||||
}) |
|
||||||
let editRowIndex = null |
|
||||||
|
|
||||||
const openDrawer = () => { |
|
||||||
drawerVisible.value = true |
|
||||||
} |
|
||||||
|
|
||||||
const openEditDialog = (row) => { |
|
||||||
editForm.name = row.name |
|
||||||
editForm.content = row.content |
|
||||||
editRowIndex = data.indexOf(row) |
|
||||||
editDialogVisible.value = true |
|
||||||
} |
|
||||||
|
|
||||||
const cancelEdit = () => { |
|
||||||
editDialogVisible.value = false |
|
||||||
editForm.name = '' |
|
||||||
editForm.content = '' |
|
||||||
} |
|
||||||
|
|
||||||
const saveEdit = () => { |
|
||||||
if (editRowIndex !== null) { |
|
||||||
data.splice(editRowIndex, 1, { ...editForm }) |
|
||||||
editRowIndex = null |
|
||||||
} |
|
||||||
editDialogVisible.value = false |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
formModel: data, |
|
||||||
drawerVisible, |
|
||||||
drawerDirection, |
|
||||||
drawerWidth, |
|
||||||
editDialogVisible, |
|
||||||
editForm, |
|
||||||
openDrawer, |
|
||||||
openEditDialog, |
|
||||||
cancelEdit, |
|
||||||
saveEdit, |
|
||||||
} |
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|||||||
@ -1,173 +1,7 @@ |
|||||||
<template> |
<template> |
||||||
<div id="your-element-selector" style="width: 100%; height: 100vh"></div> |
<div></div> |
||||||
|
|
||||||
<div class="login_container"> |
|
||||||
<el-row> |
|
||||||
<el-col |
|
||||||
:span="12" |
|
||||||
:xs="24" |
|
||||||
style=" |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
" |
|
||||||
> |
|
||||||
<el-form |
|
||||||
class="loin_form" |
|
||||||
:model="loginForm" |
|
||||||
ref="formRules" |
|
||||||
:rules="rules" |
|
||||||
> |
|
||||||
<h1>Hello</h1> |
|
||||||
<h2>同学！</h2> |
|
||||||
<el-form-item prop="username"> |
|
||||||
<el-input |
|
||||||
v-model="loginForm.username" |
|
||||||
:prefix-icon="User" |
|
||||||
size="large" |
|
||||||
></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item prop="password"> |
|
||||||
<el-input |
|
||||||
v-model="loginForm.password" |
|
||||||
type="password" |
|
||||||
:prefix-icon="Lock" |
|
||||||
size="large" |
|
||||||
show-password |
|
||||||
></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-button |
|
||||||
:loading="isBtnLoading" |
|
||||||
size="large" |
|
||||||
class="login-btn" |
|
||||||
type="primary" |
|
||||||
@click="login" |
|
||||||
> |
|
||||||
登录 |
|
||||||
</el-button> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12" :xs="0"></el-col> |
|
||||||
</el-row> |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang="ts" setup> |
<script lang="ts" setup></script> |
||||||
import { reactive, ref, onMounted, onUnmounted } from 'vue' |
|
||||||
import { User, Lock } from '@element-plus/icons-vue' |
|
||||||
import useUserStore from '@/store/modules/user' |
|
||||||
import { useRouter, useRoute } from 'vue-router' |
|
||||||
let loginForm = reactive({ username: 'admin', password: '111111' }) |
|
||||||
// 引入登录仓库 |
|
||||||
let userStore = useUserStore() |
|
||||||
// 引入路由 |
|
||||||
const $router = useRouter() |
|
||||||
const $route = useRoute() |
|
||||||
const isBtnLoading = ref<boolean>(false) |
|
||||||
// 获取form实例 |
|
||||||
const formRules = ref<any>(null) |
|
||||||
// 添加校验规则 |
|
||||||
const rules = { |
|
||||||
username: [ |
|
||||||
{ required: true, message: '用户名不能为空', trigger: 'blur' }, |
|
||||||
{ |
|
||||||
max: 10, |
|
||||||
min: 5, |
|
||||||
message: '用户名长度最小五位最大十位', |
|
||||||
trigger: ['change', 'blur'], |
|
||||||
}, |
|
||||||
], |
|
||||||
password: [ |
|
||||||
{ required: true, message: '密码不能为空', trigger: 'blur' }, |
|
||||||
{ |
|
||||||
max: 15, |
|
||||||
min: 6, |
|
||||||
message: '密码长度最小六位最大十五位', |
|
||||||
trigger: ['change', 'blur'], |
|
||||||
}, |
|
||||||
], |
|
||||||
} |
|
||||||
const login = async () => { |
|
||||||
// 等待校验通过 |
|
||||||
await formRules.value.validate() |
|
||||||
try { |
|
||||||
isBtnLoading.value = true |
|
||||||
await userStore.userLogin(loginForm) |
|
||||||
isBtnLoading.value = false |
|
||||||
if ($route.query.redirect) { |
|
||||||
$router.push($route.query.redirect as string) |
|
||||||
} else { |
|
||||||
$router.push('/') |
|
||||||
} |
|
||||||
} catch (error) { |
|
||||||
isBtnLoading.value = false |
|
||||||
} |
|
||||||
} |
|
||||||
const keyDown = (e: any) => { |
|
||||||
//如果是回车则执行登录方法 |
|
||||||
if (e.keyCode == 13) { |
|
||||||
//需要执行的登录方法 |
|
||||||
login() |
|
||||||
} |
|
||||||
} |
|
||||||
onMounted(() => { |
|
||||||
//@ts-expect-error 修复ts校验VANTA不存在GLOBE属性 已经cdn引入 |
|
||||||
VANTA.GLOBE({ |
|
||||||
el: '#your-element-selector', |
|
||||||
mouseControls: true, |
|
||||||
touchControls: true, |
|
||||||
gyroControls: false, |
|
||||||
minHeight: 200.0, |
|
||||||
minWidth: 200.0, |
|
||||||
scale: 1.0, |
|
||||||
scaleMobile: 1.0, |
|
||||||
color: 0x5adc, |
|
||||||
color2: 0x1efc, |
|
||||||
size: 0.8, |
|
||||||
backgroundColor: 0xffffff, |
|
||||||
}) |
|
||||||
window.addEventListener('keydown', keyDown) |
|
||||||
}) |
|
||||||
onUnmounted(() => { |
|
||||||
window.removeEventListener('keydown', keyDown, false) |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped></style> |
||||||
.login_container { |
|
||||||
width: 100%; |
|
||||||
height: 100vh; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
// background: url('../../assets/images/background.jpg') no-repeat; |
|
||||||
.loin_form { |
|
||||||
position: relative; |
|
||||||
top: 30vh; |
|
||||||
width: 80%; |
|
||||||
// background: url('../../assets/images/login_form.png') no-repeat; |
|
||||||
// background-size: cover; |
|
||||||
// background-color: #5577ff; |
|
||||||
background: rgba(255, 255, 255, 0.1); |
|
||||||
-webkit-backdrop-filter: blur(10px); |
|
||||||
backdrop-filter: blur(10px); |
|
||||||
padding: 40px; |
|
||||||
border-radius: 10px; |
|
||||||
box-shadow: 7px 7px 42px rgba(0, 0, 0, 0.17); |
|
||||||
h1 { |
|
||||||
font-size: 40px; |
|
||||||
color: #5577ff; |
|
||||||
} |
|
||||||
h2 { |
|
||||||
font-size: 20px; |
|
||||||
color: #5577ff; |
|
||||||
margin: 20px 0; |
|
||||||
} |
|
||||||
.login-btn { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|||||||
Loading…
Reference in new issue