在这里,不建议直接写这个css文件,建议使用laravel自带的前端工作流,使用Sass, NPM, Yarn, Laravel Mix来写CSS文件。
我们打开webpack.mix.js
,增加一行代码,如下
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.sass('resources/sass/login.scss', 'public/static/css');
这样,我们只需要在resources/sass/
下面新建一个login.scss
,然后写好scss代码,执行编译命令,就会在public/static/css
文件夹下生成login.css,因为之前我们已经在登录页面引用了这个CSS,所以只要css完善,页面就会显示正常。
现在我们来完善这个scss文件,打开我们刚才新建的login.scss
,完善css代码,如下
.col-md-12,
.col-md-3 {
padding: 0;
}
.row {
margin: 0;
}
.login_main {
position: relative;
display: flex;
align-items: center;
min-height: 100vh;
flex-direction: row;
align-items: stretch;
background: url(/static/img/bg-auth1.jpg) center;
background-size: cover;
margin: 0;
.login-page {
background-color: #fff;
}
.card {
box-shadow: 0 0px;
}
.auth-brand {
position: absolute;
top: 3rem;
left: 6rem;
font-size: 26px;
}
.login-logo {
font-size: 2.1rem;
font-weight: 300;
margin-bottom: 0.9rem;
text-align: left;
margin-left: 20px;
}
.btn {
width: 100%;
}
}
body.dark-mode .login_main {
background: url(/static/img/bg-auth.jpg) center;
background-size: cover;
}
.login_main .login-box-msg,
.login_main .register-box-msg {
margin: 0;
padding: 0 0px 20px;
color: #98a6ad !important;
font-size: 0.9rem;
font-weight: 400;
text-align: left;
}
.auth-fluid-right {
padding: 6rem 3rem;
flex: 1;
position: relative;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
text-align: center !important;
font-family: Nunito, sans-serif;
}
.auth-user-testimonial {
position: absolute;
margin: 0 auto;
padding: 0 1.75rem;
bottom: 3rem;
left: 0;
right: 0;
}
.auth-user-testimonial .mb-3 {
color: #fff;
font-weight: 700;
margin: 10px 0;
font-size: 5rem;
}
接下来执行编译命令
npm run watch-poll
如果发现报错,可能是因为没安装包管理工具。只需要执行
yarn install
之后再编译即可。
编译完成后,我们再次打开页面,查看我们的页面是否正常