jucai/resources/views/admin/ajax/buy_house_detail.blade.php

<link rel="stylesheet" href="{{theme_asset('statistics/js/layer/skin/default/layer.css')}}?t=1">
<style>
    .table_form,.table_form tr th, .table_form tr td { border:1px solid #ccc; padding: 0 7px}
    .table_form { width: 100%; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px; max-width: 1200px}
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .attchment{
        width: 200px;
        height: 200px;
    }
</style>
<script src="{{ theme_asset('statistics/js/layer/layer.js') }}"></script>
<table cellspacing="0" width="100%" class="table_form">
    <tr style="height:60px;page-break-inside:avoid">
        <td colspan="12">
            <h1>个人信息</h1>
        </td>
    </tr>
    <tr style="height:52px;page-break-inside:avoid">
        <td valign="center" style="width:100px;">姓名</td>
        <td valign="center" colspan="3" style="width:300px;">
            {{$info->name}}
        </td>
        <td valign="center" style="width:100px;">联系电话</td>
        <td valign="center" colspan="3" style="width:300px;">
            {{$info->mobile}}
        </td>
        <td valign="center" style="width:100px;">籍贯</td>
        <td valign="center" colspan="3" style="width:300px;">
            {{$info->native}}
        </td>
    </tr>
    <tr style="height:52px;page-break-inside:avoid">
        <td valign="center">电子邮箱</td>
        <td valign="center" colspan="3">
            {{$info->email}}
        </td>
        <td valign="center">人才层次</td>
        <td valign="center" colspan="3">
            {{$info->talent_level}}
        </td>
        <td valign="center">人才证有效期</td>
        <td valign="center" colspan="3">
            {{$info->talent_card_validity}}
        </td>
    </tr>
    <tr style="height:52px;page-break-inside:avoid">
        <td valign="center">人才标签</td>
        <td valign="center" colspan="3">
            {{$info->talent_tags}}
        </td>

        <td valign="center">人才认定条件</td>
        <td valign="center" colspan="6">
            {{$info->talent_condition}}
        </td>
    </tr>
    <tr style="height:52px;page-break-inside:avoid">
        <td valign="center" >
            证件信息
        </td>
        <td valign="center" colspan="11">
            <div style="padding: 10px 0">
                @foreach($info->certificates as $k => $v)
                    <img class="attchment" data-key="{{$k}}" data-name="certificates" src="{{ $v->response->path }}" />
                @endforeach
            </div>
        </td>
    </tr>
</table>
<table cellspacing="0" width="100%" class="table_form">
    <tr style="height:60px;page-break-inside:avoid">
        <td colspan="12">
            <h1>家庭资料</h1>
        </td>
    </tr>
    <tr>
        <td valign="center">婚姻状况</td>
        <td valign="center" colspan="5">
            {{$info->marry_text}}
        </td>
    </tr>
    @if($info->marray > 1)
        <tr style="height:52px;page-break-inside:avoid">
            <td valign="center">
                婚姻证明<br/>
                （结婚证，离婚证，离婚生效文书、丧偶证明等）
            </td>
            <td valign="center" colspan="3">
                @foreach($info->marry_prove as $k => $v)
                    <img class="attchment" data-key="{{$k}}" data-name="marry_prove" src="{{ $v->response->path }}" />
                @endforeach
            </td>
        </tr>
    @endif
    <tr style="height:52px;page-break-inside:avoid">
        <td valign="center">
            户口本
        </td>
        <td valign="center" colspan="3">
            @foreach($info->household_register as $k => $v)
                <img class="attchment" data-key="{{$k}}" data-name="household_register" src="{{ $v->response->path }}" />
            @endforeach
        </td>
    </tr>
    <tr style="height:47px;page-break-inside:avoid">
        <td valign="center" rowspan="{{ count($info->family)+1 }}">
            家庭成员及其主要社会关系
        </td>
        <td valign="center" style="width:200px;">
            <p style=";text-align:center">
                <span style=";font-family:宋体;font-size:14px">称谓</span>
            </p>
        </td>
        <td width="200" valign="center" style="width:200px;">
            <p style=";text-align:center">
                <span style=";font-family:宋体;font-size:14px">姓名</span>
            </p>
        </td>
        <td width="87" valign="center" style="width:600px;">
            <p style=";text-align:center">
                <span style=";font-family:宋体;font-size:14px">证件信息</span>
            </p>
        </td>
    </tr>
    @foreach($info->family as $k => $v)
        <tr style="height:52px;page-break-inside:avoid" >
            <td valign="center">
                {{$v->relation}}
            </td>
            <td valign="center">
                {{$v->realname}}
            </td>
            <td valign="center">
                {{$v->idcard}}
            </td>
        </tr>
    @endforeach
</table>
<table cellspacing="0" width="100%" class="table_form">
    <tr style="height:60px;page-break-inside:avoid">
        <td colspan="12">
            <h1>工作情况</h1>
        </td>
    </tr>
    <tr style="height:52px;page-break-inside:avoid">
        <td valign="center" style="width:200px;">
            人才工作单位
        </td>
        <td valign="center" style="width:1000px;">
            @foreach($info->work_prove as $k => $v)
                <img class="attchment" data-key="{{$k}}" data-name="work_prove" src="{{ $v->response->path }}" />
            @endforeach
        </td>
    </tr>
    <tr style="height:52px;page-break-inside:avoid">
        <td valign="center">所属街道</td>
        <td valign="center">
            {{$info->street}}
        </td>
    </tr>
</table>
<table cellspacing="0" width="100%" class="table_form">
    <tr style="height:60px;page-break-inside:avoid">
        <td colspan='4'>
            <h1>住房情况</h1>
        </td>
    </tr>
    <tr style="height:52px;page-break-inside:avoid">
        <td valign="center">
            <span class="require">*</span>家庭成员在晋江市行政区域内住房情况
        </td>
        <td valign="center">
            {{$info->house_condition}}
        </td>
        <td valign="center">
            <span class="require">*</span>在晋享受政策性住房或相关优惠情况
        </td>
        <td valign="center">
            {{$info->house_policy}}
        </td>
    </tr>
</table>

<script>
    let photos = {!!json_encode($photos)!!};
    $('.attchment').click(function(){
        let key = $(this).data('key');
        let name = $(this).data('name');
        let photo = photos[name];
        console.log(photo);
        photo.start = key;
        layer.photos({
            photos: photo,
            tab: function () {
                num = 0;
                $(".layui-layer-photos").append('<div class="icon" style="position:relative;width:100%;text-align:center;top:-133px;cursor:pointer;">\n' +
                    '\t\t<img src="{{ theme_asset('statistics/js/layer/skin/default/turn_left.png') }}" style="width:30px;height30px;">\n' +
                    '\t</div>');
            }
        });
    });

    $(document).on("click", ".icon img", function(e) {
        num = (num + 90) % 360;
        $("#layui-layer-photos").css('transform', 'rotate(' + num + 'deg)');

        //$(".layui-layer-phimg img").css('transform','rotate('+num+'deg)');此处只能旋转图片
    });


    $(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg img", function(e) {
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
            (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
        var imagep = $(".layui-layer-phimg").parent().parent();
        var image = $(".layui-layer-phimg").parent();
        var h = image.height();
        var w = image.width();
        if(delta > 0) {

            h = h * 1.05;
            w = w * 1.05;

        } else if(delta < 0) {
            if(h > 100) {
                h = h * 0.95;
                w = w * 0.95;
            }
        }
        imagep.css("top", (window.innerHeight - h) / 2);
        imagep.css("left", (window.innerWidth - w) / 2);
        image.height(h);
        image.width(w);
        imagep.height(h);
        imagep.width(w);

    });

</script>