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>
|