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> |
||||
import {} from 'vue' |
||||
// import allclass from '@/assets/images/allclass.png' |
||||
</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> |
||||
<div class="container"> |
||||
<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> |
||||
<div></div> |
||||
</template> |
||||
|
||||
<script> |
||||
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> |
||||
<style></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> |
||||
<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> |
||||
<div>消息</div> |
||||
</template> |
||||
|
||||
<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> |
||||
<script></script> |
||||
|
||||
@ -1,173 +1,7 @@ |
||||
<template> |
||||
<div id="your-element-selector" style="width: 100%; height: 100vh"></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> |
||||
<div></div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
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> |
||||
<script lang="ts" setup></script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.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> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
Loading…
Reference in new issue