mission_detail.html 6.9 KB
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <tc_include file="Public:common"/>
    <link rel="stylesheet" type="text/css" href="__TMPL__Public/assets/css/swiper-3.4.2.min.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__Public/assets/css/Heritage_res.css" />
    <script src="__TMPL__Public/assets/js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <title>活动报名</title>
    <style type="text/css">
        .swiper-container {
            width: 100%;
            height: 3.86rem;
            overflow: hidden;
        }
        .main_content_list {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            padding: 0 0.32rem;
        }
        .list_view {
            width: 100%;
            height: 1.96rem;
            border-bottom: 0.01rem dashed RGBA(153, 153, 153, 1);
            box-sizing: border-box;
            padding: 0.32rem 0rem;
            display: flex;
            align-items: center;
        }
        .list_view_logo {
            width: 1.24rem;
            height: 1.24rem;
        }
        .list_view_res {
            width: 5.25rem;
            height: 100%;
            margin-left: 0.36rem;
            display: flex;
        }
        .list_res_title {
            font-size: 0.26rem;
            font-family: PingFangSC-Regular;
            color: rgba(51, 51, 51, 1);
            line-height: 0.26rem;
        }
        .list_res_mintitle {
            font-size: 0.24rem;
            margin-top: 0.3rem;
            font-family: PingFangSC-Regular;
            color: rgba(153, 153, 153, 1);
        }
        .list_view_res_left {
            width: 2.2rem;
            height: 100%;
            display: flex;
            /*align-items: center;*/
            justify-content: center;
            flex-direction: column;
        }
        .list_view_res_right {
            width: 3rem;
            height: 100%;
            border-left: 1px solid rgba(102, 102, 102, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .list_res_name {
            font-size: 0.26rem;
            font-family: PingFangSC-Regular;
            color: rgba(51, 51, 51, 1);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="head">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="{:sp_get_image_preview_url($thumb)}"/>
                </div>
            </div>
            <div class="pagination">
                <span class="tslide">1</span>/
                <span class="allslide"></span>
            </div>
            <!-- 如果需要分页器 -->
            <!--<div class="swiper-pagination"></div>-->

            <!-- 如果需要导航按钮 -->
            <!--<div class="swiper-button-prev"></div>-->
            <!--<div class="swiper-button-next"></div>-->

            <!-- 如果需要滚动条 -->
            <!--				<div class="swiper-scrollbar"></div>-->
        </div>
        <div class="head_res">
            <div class="head_res_left">
                <div class="main_list_res_top">
                    <p class="main_list_res_top_title">
                        交流体验民俗活动
                    </p>
                    <p class="sign_up"></p>
                </div>
                <div class="main_list_res_bottom">
                    <i class="iconfont icon-fych_icon"></i>
                    <p class="data">
                        投稿截止:{$endtime}
                    </p>
                </div>
            </div>
            <i class="iconfont icon-share"></i>
        </div>
    </div>
    <div class="main_content">
        <eq name="status" value="1">
            <div class="main_content_title">
                奖项设置
            </div>
            <div class="main_content_list">
                <volist name="prizeList" id="vo">
                <div class="list_view">
                    <img src="{:sp_get_image_preview_url($vo['thumb'])}" alt="" class="list_view_logo">
                    <div class="list_view_res" style="display: flex;flex-direction: column;justify-content: center;">
                        <p class="list_res_title">{$vo.level}:{$vo.num}人</p>
                        <p class="list_res_mintitle">{$vo.name}</p>
                    </div>
                </div>
                </volist>
            </div>
        </eq>
        <eq name="status" value="2">
            <div class="main_content_title">
                获奖公示
            </div>
            <div class="main_content_list">
                <volist name="prizeList" id="vo">
                    <div class="list_view" style="justify-content: flex-end">
                        <img src="{:sp_get_image_preview_url($vo['thumb'])}" alt="" class="list_view_logo" style="margin-right: auto">
                        <div class="list_view_res_left">
                            <p class="list_res_title">{$vo.level}:{$vo.num}人</p>
                            <p class="list_res_mintitle">{$vo.name}</p>
                        </div>
                        <div class="list_view_res_right">
                            <p class="list_res_name">
                                <volist name="vo.prizeUser" id="prize">{$prize}</volist>
                            </p>
                        </div>
                    </div>
                </volist>
            </div>
        </eq>
    </div>
    <div class="main">
        <p class="main_title">作品详情</p>
        <p>{$content}</p>
    </div>
</div>
<div class="foot">立即报名</div>
</body>
<script type="text/javascript">
    //		void function myindex(){
    $(".allslide").text($(".swiper-slide").length);
    //		}
    function getZan(that) {
        //点赞
        console.log(1)
    }
    window.onload = function() {
        var mySwiper = new Swiper('.swiper-container', {

            // 如果需要分页器
            //			pagination: '.swiper-pagination',

            // 如果需要前进后退按钮
            //			nextButton: '.swiper-button-next',
            //			prevButton: '.swiper-button-prev',

            // 如果需要滚动条
            //			scrollbar: '.swiper-scrollbar',
            onSlideChangeEnd: function(swiper) {
                //				if(swiper.activeIndex==$(".swiper-slide").length-1){
                //					swiper.activeIndex=1
                //				}else if(swiper.activeIndex==0){
                //					swiper.activeIndex=1
                //				}
                $(".tslide").text(swiper.activeIndex + 1);
                $(".allslide").text($(".swiper-slide").length);
            }
        })
    }
</script>

</html>