@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ theme_asset('app/css/article/article.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{theme_asset('app/css/elementui.min.css')}}">
    <style>
        .recruit_button{
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 10px auto;
            transition: .1s;
            font-weight: 500;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
        }
        .newsshow .l .main .time {
            height:auto;
        }
    </style>
@endpush

@push('js')

@endpush

{{--@include('module.section.header_min')--}}
{{--@include('module.section.content_header')--}}
@section('content')
    <div id="app">
        <div class="newsshow">
            <div class="l">
                <div class="main">
                    <div class="ntitle">{{$info->name}}</div>
                    <div class="time">
                        <span>报名时间：{{$info->apply_time_start}} 至 {{$info->apply_time_end}}</span>
                        <span>补件截止时间：{{$info->supply_time}}</span>
                    </div>
                    <div class="time">
                        <el-tag :type="info.status_tag" effect="dark" size="mini">
                            @{{ info.status_text }}
                        </el-tag>
                        <span>地址：{{$info->address}}</span>
                    </div>
                    <div class="txt">
                        {!! $info->content !!}
                    </div>
                </div>
            </div>

            <div class="r">
                <div class="listbox">
                    <div class="ntit"><div class="tlh">报名入口</div></div>
                    <div style="text-align:center;">
                        @if($info['status'] == 2)
                            <a href="{{$info->url}}"><button class="recruit_button">点击报名</button></a>
                        @else
                            <button class="recruit_button" disabled style="background-color:#999;border-color:#eee;">未开始</button>
                        @endif
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript" src="{{theme_asset('app/js/vue.min.js')}}"></script>
    <script src="{{theme_asset('app/js/axios.js')}}"></script>
    <script type="text/javascript" src="{{theme_asset('app/js/elementui.min.js')}}"></script>
    <script>

        new Vue({
            el: '#app',
            data() {
                return {
                    info: {!! $info !!}
                };
            },
            methods: {},
        })
    </script>
@endsection