DcatAdmin Vegas+左右布局登录页面

deMemory 的个人博客 / 430 / 6 / 创建于 9个月前 / 更新于 3个月前

在 app/Admin/Controllers/AuthController.php 添加

namespace App\Admin\Controllers;

class AuthController extends BaseAuthController
{
    // 自定义登录视图
    protected $view = 'admin.login';
}

blade

<link rel="stylesheet" href="{{ admin_asset('vendor/css/login.css') }}">
<link rel=" stylesheet" href="{{ admin_asset('vendor/plugins/vegas/vegas.min.css') }}">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway:400,900'>
<div class="row login-main">
    {{-- 登录页面左侧 --}}
    <div class="col-lg-9 col-12 vegas-carousel">
        {{-- 背景模块 --}}
    </div>
    {{-- 登录页面右侧 --}}
    <div class="col-lg-3 col-12 bg-white">
        {{-- 登录模块 --}}
        <div class="login-page">
            {{-- logo区域 --}}
            <div class="auth-brand text-lg-left">{!! config('admin.logo') !!}</div>
            <div class="login-box">
                {{-- 提示区域 --}}
                <div class="login-logo mb-2">
                    <p class="login-box-msg mt-1 mb-1">{{ __('admin.welcome_back') }}</p>
                </div>
                <div class="card">
                    <div class="card-body login-card-body">
                        <form id="login-form" method="POST" action="{{ admin_url('auth/login') }}">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                            <fieldset class="form-label-group form-group position-relative has-icon-left">
                                <input type="text" name="username" required autofocus
                                       class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}"
                                       placeholder="{{ trans('admin.username') }}">
                                <div class="form-control-position"><i class="feather icon-user"></i></div>
                                <label for="email">{{ trans('admin.username') }}</label>
                                <div class="help-block with-errors"></div>
                                @if($errors->has('username'))
                                    <span class="invalid-feedback text-danger" role="alert">
                                        @foreach($errors->get('username') as $message)
                                            <span class="control-label" for="inputError">
                                                <i class="feather icon-x-circle"></i> {{$message}}
                                            </span>
                                            <br>
                                        @endforeach
                                    </span>
                                @endif
                            </fieldset>
                            <fieldset class="form-label-group form-group position-relative has-icon-left">
                                <input minlength="5" maxlength="20" id="password" type="password"
                                       class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                                       name="password" placeholder="{{ trans('admin.password') }}" required
                                       autocomplete="current-password">
                                <div class="form-control-position"><i class="feather icon-lock"></i></div>
                                <label for="password">{{ trans('admin.password') }}</label>
                                <div class="help-block with-errors"></div>
                                @if($errors->has('password'))
                                    <span class="invalid-feedback text-danger" role="alert">
                                        @foreach($errors->get('password') as $message)
                                            <span class="control-label" for="inputError">
                                                <i class="feather icon-x-circle"></i> {{$message}}
                                            </span><br>
                                        @endforeach
                                    </span>
                                @endif
                            </fieldset>
                            <div class="form-group d-flex justify-content-between align-items-center">
                                <div class="text-left">
                                    <fieldset class="checkbox">
                                        <div class="vs-checkbox-con vs-checkbox-primary">
                                            <input id="remember" name="remember" value="1" checked
                                                   type="checkbox" {{ old('remember') ? 'checked' : '' }}>
                                            <span class="vs-checkbox">
                                                <span class="vs-checkbox--check">
                                                  <i class="vs-icon feather icon-check"></i>
                                                </span>
                                            </span>
                                            <span> {{ trans('admin.remember_me') }}</span>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary float-right login-btn">
                                {{ __('admin.login') }}
                                &nbsp;
                                <i class="feather icon-arrow-right"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ admin_asset('vendor/plugins/vegas/vegas.min.js') }}"></script>
<script>
    Dcat.ready(function () {
        // ajax表单提交
        $('#login-form').form({validate: true});

        $('.vegas-carousel, body').vegas({
            overlay: true,
            delay: 20000,
            transitionDuration: 4000,
            slides: shuffle([
                {src: '/images/login-bg/login-bg1.jpg'},
                {src: '/images/login-bg/login-bg2.jpg'},
                {src: '/images/login-bg/login-bg3.jpg'},
                {src: '/images/login-bg/login-bg4.jpg'},
                {src: '/images/login-bg/login-bg5.jpg'},
                {src: '/images/login-bg/login-bg6.jpg'},
                {src: '/images/login-bg/login-bg7.jpg'},
                {src: '/images/login-bg/login-bg8.jpg'},
            ]),
        });
    });

    function shuffle(data) {
        var length = data.length;
        var randomIndex, temp;
        while (length) {
            randomIndex = Math.floor(Math.random() * (length--));
            temp = data[randomIndex];
            data[randomIndex] = data[length];
            data[length] = temp
        }
        return data
    }
</script>

login.css

.row {
    margin: 0;
}

.col-md-12,
.col-md-3 {
    padding: 0;
}

.login-page {
    height: auto;
}

.login-main {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: row;
    align-items: stretch;
    margin: 0;
}

.login-main .login-page {
    background-color: #fff;
}

.login-main .card {
    box-shadow: none;
}

.login-main .auth-brand {
    margin: 4rem 0 4rem;
    font-size: 26px;
    width: 325px;
}

.login-main .login-logo {
    font-size: 2.1rem;
    font-weight: 300;
    margin-bottom: 0.9rem;
    text-align: left;
    margin-left: 20px;
}

.login-main .login-box-msg {
    margin: 0;
    padding: 0 0 20px;
    font-size: 0.9rem;
    font-weight: 400;
    text-align: left;
}

.login-main .btn {
    width: 100%;
}

.login-description {
    position: absolute;
    margin: 0 auto;
    padding: 0 1.75rem;
    bottom: 3rem;
    left: 0;
    right: 0;
}

.content-front {
    position: absolute;
    left: 0;
    right: 0;
    height: 100vh;
    background: rgba(0, 0, 0, .1);
    margin-top: -6rem;
}

body.dark-mode .content-front {
    background: rgba(0, 0, 0, .3);
}

body.dark-mode .auth-brand {
    color: #cacbd6
}

@media screen and (min-width: 1301px) and (max-width: 1700px) {

    .col-lg-3 {
        flex: 0 0 35%;
        max-width: 35%;
    }

    .col-lg-9 {
        flex: 0 0 65%;
        max-width: 65%;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1150px) {
    .col-lg-3,
    .col-lg-9 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (min-width: 1151px) and (max-width: 1300px) {
    .col-lg-3 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .col-lg-9 {
        flex: 0 0 60%;
        max-width: 60%;
    }
}

@media (max-width: 576px) {
    .login-main .auth-brand {
        width: 90%;
        margin-left: 24px
    }
}