{extend name="full"}
{block name='style'}
<style>
    body {
        background-color: #fff;
    }

    .header_wrap {
        background: rgba(0, 0, 0, 0.75);
    }

    .footer_bg {
        background-color: #F7F7F7;
    }

    .vip_intro {
        font-size: 18rem;
        color: #000F16;
    }

    .vip_card {
        width: 435rem;
    }

    .vip_card .vip_img img {
        width: 435rem;
        height: 450rem;
    }

    .vip_card .vip_title {
        margin-top: 40rem;
        color: #000F16;
        font-size: 36rem;
    }

    .vip_card .vip_info {
        margin-top: 40rem;
        color: #000F16;
        font-size: 16rem;
        line-height: 28rem;
    }

    .txt_panel {
        width: 467rem;
        height: 260rem;
        margin: 1px;
        padding: 20rem 40rem;
        box-sizing: border-box;
    }

    .mask_bg {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 20rem;
    }

    .txt_panel_title {
        display: flex;
        justify-content: space-between;
    }

    .panel_title {
        font-size: 32rem;
        color: #000F16;
    }

    .panel_num {
        color: #009CB2;
        font-size: 32rem;
        font-style: italic;
        font-weight: 500;
    }

    .panel_content {
        font-size: 16rem;
        font-weight: 100;
        color: #000F16;
        margin-top: 18rem;
        line-height: 26rem;
    }

    .main_title {
        margin-top: 70rem;
        margin-bottom: 56rem;
        font-size: 48rem;
        font-weight: 500;
        text-align: center;
    }

    .vip_list {
        display: flex;
        justify-content: flex-start;
        width: 1240rem;
        flex-wrap: wrap;
    }

    .pp_card {
        width: 267rem;
        height: 310rem;
        margin-right: 16rem;
        margin-bottom: 16rem;
    }

    .pp_card .card_img img {
        width: 267rem;
        height: 183rem;
    }

    .pp_card .card_title {
        font-size: 16rem;
        font-weight: 400;
        color: #000F16;
        margin-top: 15rem;
    }

    .pp_card .card_info {
        font-size: 14rem;
        color: #717171;
        margin-top: 13rem;
    }

    .notice_card {
        width: 330rem;
        height: 370rem;
        background: url('__ROOT__/static/temp/vip_bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-right: 30rem;
    }

    .notice_txt {
        font-size: 30rem;
        color: #fff;
    }

    .notice_tip {
        font-size: 16rem;
        color: #fff;
        margin-top: 17rem;
    }
</style>
{/block}
{block name='content'}
<div class="inner_full_wrap">
    <div class="inner_full_swiper">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://oss.lqstu.com/wicv/img/other/b2.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="__ROOT__/static/temp/1.png">
                </div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>

<div class="inner_base_wrap">


    <div class="base_panel">
        <div class="item_title_bar" style="justify-content: center;">
            <div class="item_tab_wrap">
                <a href='{:url("vip/index")}'>车路云50人</a>
                <a href='{:url("vip/detail")}' class="active">车路云50人会员</a>

            </div>
        </div>
        <div class="vip_intro pb50">
            <div class="inner_title">会员名单</div>
            <div class="mt30" style="font-size: 18rem;line-height: 32rem;">
                顾问委员会由电多位行业里德高望重的领导和专家组成，成员由车路云对外特邀聘请。顾问委员会是指导车路云发展的顾问机构，对车路云50人的工作思路、重点工作提供咨询指导，主要参与年度论坛以及其他重大活动。人员名单（排名不分先后）如下：
            </div>
        </div>
    </div>
    <div class="vip_list">
        {volist name="list" id="vo"}
        <div class="pp_card">
            <div class="card_img">
                <img src="{$vo.imgs}">
            </div>
            <div class="card_title">{$vo.user_name}</div>
            <div class="card_info">{$vo.user_title}</div>
        </div>
        {/volist}
        
    </div>
</div>
<div class="inner_full_wrap" style="background: linear-gradient( 180deg, rgba(246,246,238,0.3) 0%, #F6F6EE 100%);    height: 640rem;">
    <div class="inner_base_wrap">
        <div class="inner_title_bar flex_between_center" style="margin-top: 60rem;">
            <div class="inner_title">入会公示</div>
            <div class="flex_between_center" style="width: 110rem;">
                <!-- <a class="detail_nav_btn"><i class="layui-icon">&#xe603;</i></a>
                <a class="detail_nav_btn"><i class="layui-icon">&#xe602;</i></a> -->
            </div>
        </div>
        <div class="flex_normal_wrap" style="width: 1260rem;">
            {volist name="show" id="s"}
            <a href='{:url("vip/list_detail")}?sid={$s.id}' class="notice_card">
                <div class="notice_txt">{$s.title|formatTitle|raw}</div>
                <div class="notice_tip">{$s.do_time|formatVipData}</div>
            </a>
            {/volist}           
        </div>
        <div style="margin-top: 70rem;"><a href='{:url("vip/lists")}' class="btn_white">查看更多</a></div>
    </div>

</div>
<div class="inner_base_wrap pb50">
    <div class="ft_38 txt_center color_black0F16 mt40">入会申请</div>
    <div class="ft_22 txt_center color_black0F16 mt20">申请人资料填写</div>
    <form>
    <div class="form_wrap mt50">
        <div class="flex_between_center">
            <div class="input_wrap xs48">
                <div class="label">姓名</div>
                <input type="text" class="input_txt">
            </div>
            <div class="input_wrap xs48">
                <div class="label">单位</div>
                <input type="text" class="input_txt">
            </div>
        </div>
        <div class="flex_between_center">
            <div class="input_wrap xs48">
                <div class="label">电话</div>
                <input type="text" class="input_txt">
            </div>
            <div class="input_wrap xs48">
                <div class="label">职务</div>
                <input type="text" class="input_txt">
            </div>
        </div>
        <div class="flex_between_center">
            <div class="input_wrap xs48">
                <div class="label">邮箱</div>
                <input type="text" class="input_txt">
            </div>
            <div class="input_wrap xs48">
                <div class="label">行业</div>
                <select class="input_txt" style="padding-left: 4rem;">
                    <option value=""></option>
                    <option>互联网</option>
                </select>
            </div>
        </div>
        <div>
            <div class="input_wrap">
                <div class="label">个人简介</div>
                <div class="input_txt"></div>
                <div class="upload_btn1"><img src="__ROOT__/static/temp/icon6.png" class="up_icon"> 上传附件</div>
            </div>
            <div class="input_wrap">
                <div class="label">企业简介</div>
                <div class="input_txt"></div>
                <div class="upload_btn1"><img src="__ROOT__/static/temp/icon6.png" class="up_icon"> 上传附件</div>
            </div>
        </div>
    </form>

        <div class="txt_center mt40"><a href="javascript:void(0)" class="btn_blue_big" style="width: 520rem;border-radius: 6rem;">提交申请</a></div>

    </div>
</div>




<script>

    var mySwiper = new Swiper('.swiper', {
        effect: 'fade',
        // mousewheel: true,
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            bulletClass: 'my-bullet',
            clickable: true,
            clickableClass: 'my-pagination-clickable',
            bulletActiveClass: 'my-bullet-active'
        },


    })

</script>
{/block}