jjhc
/
lw_test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
							<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>晋江人力资本有限公司</title>
    <link rel="stylesheet" href="__HCSS__/style.css">
    <link rel="stylesheet" href="/static/common/css/swiper.min.css">
    <style>
        .container {width:1255px;height:605px;background-image:url("__HIMAGES__/index.jpg");background-size:100% 100%;background-repeat:no-repeat;position:relative;}
        .inner-box {width:890px;height:546px;position:absolute;left:336px;top:32px;background:white;}
        .lw-title {height:40px;position:relative;}
        .lw-title .main-title {color:#737373;font-weight:bold;height:22px;line-height:22px;}
        .lw-title .main-title .big {font-size:18px;}
        .lw-title .main-title .little {font-size:14px;}
        .lw-title .sub-title {font-size:12px;color:#E08212;height:12px;line-height:12px;}
        .lw-title .more a{color:#1280dd;font-size:14px;position:absolute;right:10px;top:16px;}
        .title-review {margin-top:20px;margin-left:22px;}
        .review {width:266px;margin-left:8px;}
        .review .review-box {width:266px;height:470px;background:#F6F6F6;border:1px solid #FEFEFE;border-radius:20px;padding-top:5px;}
        .review-box .img-box {width:224px;margin:5px auto;}
        .review-box .img-box .img {width:224px;height:116px;border-radius:20px;background-size:cover;background-position: center;}
        .review-box .img-box p {font-size:12px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;height:32px;line-height:16px;}
        .right {margin-right:30px;}
        .booked-box {width:570px;height:322px;background:#F6F6F6;border:1px solid #FEFEFE;border-radius:20px;overflow-x:hidden;overflow-y: scroll;}
        .booked-title {margin-top:20px;}
        .booked-box table {width:535px;margin-left:20px;font-size:14px;margin-top:10px;}
        .booked-box table td{padding-right:5px;}
        .booked-box table .thead td{border-bottom:2px solid #9DCAFC;}
        .booked-box table .tbody td{border-bottom:1px solid #CFCFCD;vertical-align:top;padding-top:5px;}
        .contact-box {width:570px;height:98px;background:#F6F6F6;border:1px solid #FEFEFE;border-radius:20px;display:flex;align-items:flex-end;}
        .contact-title {margin-top:10px;}
        .contact-box img {width:74px;height:74px;margin-bottom:12px;margin-left:15px;}
        .contact-box span {margin-bottom:12px;margin-left:2px;font-size:15px;}
        .jucai {   position: absolute;right: -20px;bottom: -27px;}
        .layui-layer-imgtit a {max-width:100% !important;}
        .layui-layer-imgbar {display:block !important;}
    </style>
</head>
<body>
<div class="container">
    <div class="inner-box">
        <div class="review fl">
            <div class="lw-title title-review">
                <div class="main-title">
                    <span class="big">往期</span>
                    <span class="little">回顾</span>
                </div>
                <div class="sub-title">
                    ACTIVE REVIEW
                </div>
                <div class="more fr">
                    <a href="{:url('previous/index')}">查看更多>></a>
                </div>
            </div>
            <div class="review-box">
                <div class="swiper-container" id="swiper1">
                    <div class="swiper-wrapper">
                        {volist name="previous_list" id="previous"}
                        <div class="swiper-slide">
                            {volist name="previous" id="vo"}
                            <div class="img-box">
                                <div class="img" data-url="{$vo.image}" data-title="{$vo.title}"  style="background-image:url('{$vo.image}')"></div>
                                <p>{$vo.title}</p>
                            </div>
                            {/volist}
                        </div>
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
        <div class="right fr">
            <div class="booked">
                <div class="lw-title booked-title">
                    <div class="main-title">
                        <span class="big">已预约</span>
                        <span class="little">活动</span>
                    </div>
                    <div class="sub-title">
                        BOOKED ACTIVITIES
                    </div>
                </div>
                <div class="booked-box">
                    <table cellpadding="0" cellspacing="0" id="booked-box">
                        <tr class="thead">
                            <td style="width:111px;">时间</td>
                            <td style="width:253px">内容</td>
                            <td style="width:95px">场地</td>
                            <td style="width:56px;padding-right:0;">参加人数</td>
                        </tr>
                        {volist name="reserved" id="vo"}
                        <tr class="tbody">
                            <td>{$vo.time}</td>
                            <td>{$vo.content}</td>
                            <td>{$vo.address}</td>
                            <td>{$vo.num}</td>
                        </tr>
                        {/volist}
                    </table>
                </div>
            </div>
            <div class="contact">
                <div class="lw-title contact-title">
                    <div class="main-title">
                        <span class="big">联系</span>
                        <span class="little">我们</span>
                    </div>
                    <div class="sub-title">
                        CONTACT US
                    </div>
                </div>
                <div class="contact-box">
                    <img src="__HIMAGES__/qrcode_contact.png" alt="">
                    <span>扫码添加好友或者拨打19906096782了解详情，预约场地活动。</span>
                </div>
            </div>
        </div>
        <img src="__HIMAGES__/jucai.png" class="jucai">
    </div>
</div>
<script src="__COMMON_JS__/jquery-1.12.4.min.js"></script>
<script src="/static/common/js/swiper.min.js"></script>
<script src="__COMMON_JS__/layer/layer.js"></script>
<script>
    var swiper1 = new Swiper('#swiper1',{autoplay: 5000});
    $('.img').click(function(){
        let url = $(this).data('url');
        let title = $(this).data('title');
        let json = {
            "title": title, //相册标题
            "id": 1, //相册id
            "start": 0, //初始显示的图片序号，默认0
            "data": [   //相册包含的图片，数组格式
                {
                    "alt": title,
                    "pid": 2, //图片id
                    "src": url, //原图地址
                    "thumb": "" //缩略图地址
                }
            ]
        };
        layer.photos({
            photos: json
        });
        $('.layui-layer-imgbar').show();
    });
    const boxHeight = $('#booked-box').height();
    const bookHeight = $('.booked-box').height();
    const scrollheight = boxHeight - bookHeight + 20;
    let boxTop = 0;
    setInterval(function(){
        if (boxTop >= scrollheight) {
            boxTop = 0;
        }
        boxTop++;
        $('.booked-box').scrollTop(boxTop);
    },50)
</script>
</body>
</html>