blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-04-24 18:30:17 +08:00
Code Issues Projects Releases Wiki Activity

编写登录页样式

Browse Source
This commit is contained in:
MTrun 2021-12-14 21:28:32 +08:00
parent ac8274f791
commit 50a8249ac8
5 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/login/login-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

0
src/styles/common/mixins/function.scss Normal file
View File

8
src/styles/common/style.scss
View File

@ -1,14 +1,16 @@
@import './var.scss'; @import './var.scss';
@import './animation.scss'; @import './animation.scss';
// extends
// 毛玻璃 // 毛玻璃
.--background-filter { .go-background-filter {
backdrop-filter: $--filter-blur-base; backdrop-filter: $--filter-blur-base;
background-color: $--filter-color-base; background-color: $--filter-color-base-1;
box-shadow: $--border-shadow;
} }
// 边框圆角 // 边框圆角
.--border-radius { .go-border-radius {
border-radius: $--border-radius-base; border-radius: $--border-radius-base;
overflow: hidden; overflow: hidden;
} }

8
src/styles/common/var.scss
View File

@ -13,9 +13,13 @@ $--color-text-4: hsla(0, 0%, 100%, 0.3);
// 顶部距离 // 顶部距离
$--header-height: 60px; $--header-height: 60px;
// 模糊 // 模糊
$--filter-blur-base: blur(2px); $--filter-blur-base: blur(20px);
// 毛玻璃 // 毛玻璃
$--filter-color-base: rgba(0, 0, 0, 0.07); $--filter-color-base-1: rgba(0, 0, 0, 0.1);
$--filter-color-base-2: rgba(0, 0, 0, 0.2);
$--filter-color-base-3: rgba(23, 23, 26, 0.3);
// 边框 // 边框
$--border-radius-base: 8px; $--border-radius-base: 8px;
$--border-bottom-style: 1px solid $--color-border; $--border-bottom-style: 1px solid $--color-border;
// 阴影
$--border-shadow: 0 8px 20px rgba(0,0,0, .15);

19
src/views/login/index.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div class="go-login-box"> <div class="go-login-box">
<div class="go-login-box-bg"></div>
<n-divider class="go-login-box-header" /> <n-divider class="go-login-box-header" />
<div class="go-login"> <div class="go-login">
<div class="go-login-carousel"> <div class="go-login-carousel">
@ -16,7 +17,7 @@
<div class="login-account"> <div class="login-account">
<div class="login-account-container"> <div class="login-account-container">
<n-collapse-transition :appear="true" :show="show"> <n-collapse-transition :appear="true" :show="show">
<n-card title="登录"> <n-card class="login-account-card" title="登录 GoView">
<div class="login-account-top"> <div class="login-account-top">
<img <img
class="login-account-top-logo" class="login-account-top-logo"
@ -151,6 +152,7 @@ $width: 450px;
$account-img-height: 270px; $account-img-height: 270px;
$footer-height: 50px; $footer-height: 50px;
$account-height: calc(100vh - $footer-height); $account-height: calc(100vh - $footer-height);
$--filter-color-base-login: rgba(51, 55, 61, 0.3);
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -158,7 +160,7 @@ $account-height: calc(100vh - $footer-height);
@include go(login-box) { @include go(login-box) {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background-image: linear-gradient(120deg, #17171a 0%, #232324 100%); background-image: linear-gradient(120deg, $--color-bg-1 0%, $--color-bg-2 100%);
&-header { &-header {
margin: 0px; margin: 0px;
padding-top: $--header-height; padding-top: $--header-height;
@ -188,6 +190,11 @@ $account-height: calc(100vh - $footer-height);
margin-top: 100px; margin-top: 100px;
} }
&-card {
@extend .go-background-filter;
background-color: $--filter-color-base-login;
}
&-top { &-top {
padding-top: 10px; padding-top: 10px;
text-align: center; text-align: center;
@ -204,6 +211,14 @@ $account-height: calc(100vh - $footer-height);
color: $--color-text-2; color: $--color-text-2;
} }
&-bg {
z-index: 0;
position: fixed;
width: 100vw;
height: 100vh;
background: url('@/assets/images/login/login-bg.png') no-repeat 750px -120px;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.login-account { .login-account {
background-repeat: no-repeat; background-repeat: no-repeat;