| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 | <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/SL-icon.png">    <title>{{ isset($title) ? $title : '后台管理'  }}</title>    <link rel="stylesheet" href="/plugins/layui-admin/layui/css/layui.css">    <link rel="stylesheet" href="/plugins/fontawesome/css/all.min.css">    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2167475_2x5tvqp7zzu.css">    <link rel="stylesheet" href="/plugins/circle-process-bar/circleProcessBar.min.css">{{--    <link rel="stylesheet" href="/css/style.css">--}}    <script src="/plugins/jquery/jquery-3.3.1.min.js"></script>    <script src="/plugins/layui-admin/layui/layui.js"></script>    <script src="/plugins/zx-image-view.min.js"></script>    <script src="/plugins/circle-process-bar/circleProcessBar.min.js"></script>    {{--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>--}}    <style>        .silent-layout-content {            padding: 15px 15px 15px 15px;        }        .silent-layout-content .layui-form-item .layui-form-label {            line-height: 38px;        }        .sg-card-header {            color: #00b6ed;            font-size: 1.1rem;        }        .sg-card-create {            float: right;            display: inline;        }        .layui-form-item.has-error {            color: #FF5722;        }        .layui-form-item.has-error input {            border-color: #FF5722;        }        .sg-create-container {            padding-top: 50px;        }        .layui-form-item .sg-table-multi-select .layui-form-checkbox {            margin-top: 0;        }        .sg-table-multi-select .layui-table {            margin: 0;            border-width: 0;        }        .sg-table-multi-select {            width: 220px;            height: 300px;            overflow-y: scroll;            border: 1px solid #e6e6e6;        }        .sg-table-multi-select::-webkit-scrollbar {            display: none;        }        #sg-search-form .layui-inline {            margin-right: 0;        }        /* 上传图片 */        .sg-image-container-sg {            display: flex;            flex-wrap: wrap;        }        .sg-image-item-sg {            position: relative;            width: 100px;            height: 100px;            border: 2px solid #f2f2f2;            display: flex;            justify-content: center;            align-items: center;            margin-right: 10px;            margin-top: 10px;            overflow: hidden;        }        .sg-image-sg span:hover {            background-color: rgba(0, 0, 0, 0.4);            color: #F0F0F0;        }        .sg-image-sg span {            transition: all 0.5s;            position: absolute;            display: flex;            justify-content: center;            align-items: center;            width: 100%;            height: 100%;            z-index: 1000;            font-size: 3.5rem;            color: transparent;        }        .sg-image-item-sg img {            width: 100%;        }        .sg-image-btn-sg {            font-size: 3rem;            color: #c2c2c2;        }        /* sg-data-box */        .sg-data-box {            margin-bottom: 20px;        }        .sg-data-header {            margin-bottom: 2px;            padding: 15px 10px;            background-color: white;            color: grey;            font-size: 1.1rem;            font-weight: bold;        }        .sg-data-title {            padding-left: 10px;            border-left: 3px solid #1E9FFF;        }        .sg-data-body {            display: flex;            flex-wrap: wrap;        }        .sg-data-item {            width: 25%;        }        .sg-data-wrapper {            margin-bottom: 3px;            padding: 30px 15px;            margin-right: 3px;            display: flex;            justify-content: space-between;        }        .sg-data-item:nth-child(4) .sg-data-wrapper {            margin-right: 0;        }        .sg-data-label {            padding-left: 10px;        }        .sg-data-value {            font-size: 1.2rem;            color: #2F4056;            font-weight: bold;        }        /* sg-search-box */        .sg-search-box {            background-color: white;            margin-bottom: 20px;            padding: 24px 10px 5px 30px;        }        .sg-red {            color: #FF5722;        }        .layui-card .layui-table-cell {            word-break: break-all;            padding: 0 4px;            height: auto;            white-space: normal;        }        .layui-table-hover .layui-table-grid-down {            display: none;        }        .help-block {            color: red;            margin-top: 5px;            font-size: .8rem;        }        .sg-dark-green-bg {            background: #009688;        }        .sg-green-bg {            background: #5FB878;        }        .sg-blue-bg {            background: #1E9FFF;        }        .sg-red-bg {            background: #FF5722;        }        .sg-orange-bg {            background: #FFB800;        }        .layui-container > .layui-col-sm8 {            float: none;        }        .layui-container > div {            float: none;        }        .layui-container {            background: white;        }    </style>    @yield('header')</head><body><div class="silent-layout-content">    @yield('content')</div><script type="text/javascript">    $(function () {        layui.use(['element', 'layer', 'laydate'], function () {            var layer = layui.layer;            @if($errors->has('sg_error_info'))            layer.msg("{{ $errors->first('sg_error_info') }}", {                icon: 2            });            @endif            @if(session('sg_success_info'))            layer.msg("{{ session('sg_success_info') }}", {                icon: 1            }, function() {            });            var index = parent.layer.getFrameIndex(window.name);            parent.layer.close(index);            @endif            $('.sg-image-container-sg').on('click', '.sg-image-btn-sg', function () {                var that = this,                    type = $(that).parent().attr('data-type');                type = type === 'multi' ? 'multi' : 'single';                layer.open({                    title: '选择图片',                    type: 2,                    area: ['90%', '90%'],                    content: '/admin/upload-images/index',                    btn: ['确认', '取消'],                    yes: function(index, layero) {                        var body = layer.getChildFrame('body', index),                            images = [],                            html = '';                        $(body).find('.sg-image-item.sg-selected').each(function () {                            images.push($(this).attr('data-path'));                        });                        if(type === 'single') {                            images = images.slice(0, 1);                        }                        $(that).next().val(images.join(','));                        $(that).parent().find('.sg-image-sg').remove();                        for(var i = 0; i < images.length; ++i) {                            html += '<div class="sg-image-item-sg sg-image-sg" data-path="' + images[i] + '"><img src="' + images[i] + '"><span><i class="fas fa-times"></i></span></div>'                        }                        $(that).before(html);                        layer.close(index)                    },                    btn2: function(index, layero){                        layer.close(index)                    }                });            }).on('click', '.sg-image-sg', function () {                var $parent = $(this).parent(),                    images = [];                $(this).remove();                $parent.find('.sg-image-sg').each(function () {                    images.push($(this).attr('data-path')) ;                });                $parent.find('.sg-image-input-sg').val(images.join(','));            });        });    })</script>@yield('footer')</body></html>
 |