hemall.terabimsoft.com.cn/plugins/manual-bonus/views/bonus/list.blade.php

@extends('layouts.base')
@section('title', '手动分红')
@section('content')
    <div class="w1200 m0a">

        <div class="right-titpos">
            <ul class="add-snav">
                <a class='btn btn-info' href="{{yzWebUrl('plugin.manual-bonus.admin.return.index')}}">手动分红</a>
            </ul>
        </div>

        <div class="rightlist">
            <div class="panel panel-info">

            </div>
            <div class="clearfix">
                <div class="panel panel-default">
                    <div class="panel-heading">总数：{{$list->total()}}</div>
                    <div class="panel-body">
                        <table class="table table-hover" style="overflow:visible;">
                            <thead class="navbar-inner">
                            <tr>
                                <th style='width:4%;text-align: center;'>分红ID</th>
                                <th style='width:14%;text-align: center;'>分红名称</th>
                                <th style='width:16%;text-align: center;'>分红时间</th>
                                <th style='width:10%;text-align: center;'>分红金额</th>
                                <th style='width:10%;text-align: center;'>分红人数</th>
                                <th style='width:20%;text-align: center;'>人均分红金额</th>
                                <th style='width:15%;text-align: center;'>操作</th>
                            </tr>
                            </thead>

                            <tbody>
                            @foreach($list as $row)
                                <tr>
                                    <td style="text-align: center;">{{$row->id}}</td>
                                    <td style="text-align: center;">
                                        {{$row->bonus_name}}
                                    </td>
                                    <td style="text-align: center;">{{$row->created_at}}</td>
                                    <td style="text-align: center;">{{$row->bonus_amount}}</td>
                                    <td style="text-align: center;">{{$row->count}}</td>
                                    <td style="text-align: center;">{{$row->unit_amount}}</td>
                                    <td style="text-align: center;">
                                        <a  class="label label-default"  onclick="openwindow('{!! $row->id !!}')">备注信息</a >

                                        <!-- 弹窗隐藏区域 -->
                                        <div id="myModal{!! $row->id !!}" class="modal" style="display: none;">
                                            <!-- 弹窗内容 -->
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <span id="X" class="close" onclick="closewindow('{!! $row->id !!}')">&times;</span>
                                                    <h3>备注信息</h3>
                                                </div>
                                                <div style="white-space: normal;padding: 10px;font-size: 16px">
                                                    @foreach($remarks as $remark)
                                                        @if($remark['id'] == $row->id)
                                                            <span>{{$remark['content']}}</span>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        <a class="label label-default label-info" href="{{yzWebUrl('plugin.manual-bonus.admin.manual-log.index', ['search' => ['manual_id' => $row->id]])}}">查看记录</a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        {!! $pager !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style type="text/css">
        /* 弹窗 (background) */
        .modal {
            display: none; /* 默认隐藏 */
            /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            /*设置弹窗位置*/
            padding-top: 200px;
            padding-bottom: 300px;
            /*浮在全屏上*/
            width: 100%;
            height:  100%;
            /*overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。*/
            overflow: auto;
            background-color: rgba(0,0,0,0);
            text-align: center;
        }

        /* 弹窗内容 */
        .modal-content {
            /*position: relative;*/
            /*弹窗背景色设置*/
            background-color: #fefefe;
            margin: auto;
            padding: 200px auto;
            width: 400px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s
        }

        /* 关闭按钮 */
        .close {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
            padding-top: 24px;
        }

        .close:hover, .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            display: block;
            /*line-height: 10px;*/
            text-align: left;
            height: 30%;
            padding-top: 1px !important;
            padding-bottom: 1px !important;

            border-bottom:1px solid #000
        }

        .modal-body {
            padding-top: 0 !important;
            font-size: 18px;
            height: 200px;
        }
        .p {
            text-align: left;
            word-wrap: break-word;
            word-break: break-all;
            display: flex;
            flex-wrap: wrap;
        }


    </style>
    <script language='javascript'> function openwindow(id){
            //获取弹窗得div
            var modal = document.getElementById('myModal'+ id);
            //窗体弹出
            if (modal.style.display == "none") {
                modal.style.display = "block";
            }
        }
        function closewindow(id) {
            var modal = document.getElementById('myModal' + id);

            if (modal.style.display == "block") {
                modal.style.display = "none";
            }

        }
    </script>
@endsection