我们先做登入的画面,
在app/Http/Controllers/UserAuthController.php新增signInPage方法.
//使用者登入画面
public function signInPage()
{
$name = 'sign_in';
$binding = [
'title' => ShareData::TITLE,
'name' => $name,
];
return view('user.sign-in', $binding);
}
然後新增resources/views/user/sign-in.blade.php
<!-- 指定继承 layout.master 母模板 -->
@extends('layout.master')
<!-- 传送资料到母模板,并指定变数为title -->
@section('title', $title)
<!-- 传送资料到母模板,并指定变数为content -->
@section('content')
<form id="form1" method="post" action="">
<!-- 自动产生 csrf_token 隐藏栏位-->
{!! csrf_field() !!}
<div class="login_form">
<div class="login_title">登入</div>
<div class="login_label">帐号(必须为E-mail)</div>
<div class="login_textbox">
<input name="account" class="form_textbox" type="text" value="{{ old('account') }}" placeholder="请输入帐号"/>
</div>
<div class="login_label">密码</div>
<div class="login_textbox">
<input name="password" class="form_textbox" type="password" value="{{ old('password') }}" placeholder="请输入密码"/>
</div>
<div class="login_error">
<!-- 错误讯息模板元件 -->
@include('layout.ValidatorError')
</div>
<div class="btn_group">
<button type="button" class="btn btn-warning btn_login" onclick="SignUp()">注册</button>
<button type="submit" class="btn btn-success btn_login">登入</button>
</div>
</div>
</form>
<script>
function SignUp()
{
location.href="/user/auth/sign-up";
}
</script>
@endsection
scss档案修改如下
$mainTitleHeight: 56px;
$loginFormWidth: 360px;
$mainColor: #0097A7;
$textColor: #FFF;
//背景颜色
$BackWhiteColor: #FFFFFF;
$BackWhiteColor2: #FAFAFA;
$lightgrayColor: #A7A7A7;
$mainFont: 24px;
$mainFont2: 16px;
$toolBarFont: 16px;
$loginTitleFont: 32px;
$formMainFont: 20px;
$formTextBoxTextFont: 16px;
$formTextBoxBorderFont: 40px;
$mainLeftMargin: 24px;
//上面Bar的样式
.toolbar_section{
height: $mainTitleHeight;
background: $mainColor;
.toolbar_title{
line-height: $mainTitleHeight;
font-size: $mainFont;
margin-left: $mainLeftMargin;
color: $textColor;
}
.toolbar_title2{
line-height: $mainTitleHeight;
font-size: $mainFont2;
margin-left: $mainLeftMargin;
color: $textColor;
}
.toolbar_right{
float: right;
height: $mainTitleHeight;
margin-right: 24px;
font-size: $toolBarFont;
}
.toolbar_text{
margin-left: 12px;
color: $textColor;
line-height: $mainTitleHeight;
}
}
//注册登入表单
.login_form{
width: $loginFormWidth;
margin: auto;
.login_title{
margin-top: 15px;
margin-bottom: 30px;
font-size: $loginTitleFont;
font-weight: 600;
text-align: center;
}
.login_label{
font-size: $formMainFont;
font-weight: 600;
margin-bottom: 12px;
}
.login_textbox{
font-size: $formTextBoxTextFont;
line-height: $formTextBoxBorderFont;
margin-bottom: 20px;
.form_textbox{
padding-left: 12px;
width: 100%;
}
}
.login_error {
font-size: $formTextBoxTextFont;
}
.btn_group{
text-align: right;
.btn_login{
font-size: $formMainFont;
height: 40px;
width: 120px;
color: $textColor;
box-shadow: none;
border-radius: 3px;
border-width: 0;
}
}
}
.background_white {
min-height: calc(100vh - #{$mainTitleHeight});
background: $BackWhiteColor;
}
.background_white2 {
min-height: calc(100vh - #{$mainTitleHeight});
background: $BackWhiteColor2;
}
/****************改变Bootstrap样式****************/
.container {
width: 100vw;
padding: 0;
background: $BackWhiteColor2;
}
//排版
.form.col-sm-1 {
padding: 0;
}
//选单
.nav-pills>li{
&>a{
border-radius: 0;
color: $lightgrayColor;
font-size: $formTextBoxTextFont;
&:hover{
background: #E9E9E9;
}
}
&.active{
border-right: solid 4px $mainColor;
&>a, {
color: $mainColor;
background: transparent;
&:hover{
color: $mainColor;
background: #E9E9E9;
}
}
}
}
点击旁边的登入就会进入登入画面.
<<: [Day 28] 建立注册的画面及功能(十二) - 寄出注册通知信
如果要把怀旧玩家分种类、我想我会分成以下三种。 玩家、这类型的人以游戏为主、不一定会在乎用什麽方式玩...
产品经理平常需要沟通的对象很多,而这些对象对专案的影响程度大小可能不尽相同,为了有效的擅用产品经理自...
注:发文日和截图的日期不一定是同一天,所以价格计算上和当日不同,是很正常的。 声明:这一系列文章并无...
大家好~ 昨天成功在日历上新增 Event 了, 今天来对日历的 Event 做其他操作吧~ Rea...
在开始前,还没看过序章的朋友们,可以点击进去,教学大纲和主题方向都写在里面罗! 看完这章节,你会学到...