index.html 13.9 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <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/base.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/audio.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/index.css" />
    <title>星域秀场</title>
    <style>
        .fourth_video {
            width: 100%;
            height: 3.4rem;
            position: relative;
        }
        
        .xiucImg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .xiucImg img {
            width: 100%;
            height: 100%;
        }
        
        .swiper-containerHua {
            overflow: hidden;
        }
        
        .swiper-containerHua ul li {
            height: 3.78rem;
        }
        
        .swiper-containerHua ul li a {
            height: 100%;
        }
        
        .swiper-containerHua ul li img {
            height: 100%;
        }
        
        .fourth_log_top {
            height: 3.34rem;
        }
    </style>
</head>

<body>
    <include file="public@header" />
    <!-- 视频 -->
    <div class="fourth_video">
        <div class="fourth_video_center">
            <notempty name="res_xqyy">
                <div class="video_bg" style="background-color:black;">
                    <video src="{:cmf_get_file_download_url($res_xqyy.video)}" id="video" width="100%" style="height: 3.4rem;" autoplay="autoplay" controls controlslist="nodownload"></video>
                    <!--<video src="/portal/index/getVideoById?id={$res_xqyy.id}" id="video" width="100%" style="height: 3.4rem;" autoplay="autoplay" controls controlslist="nodownload"></video>-->
                </div>
            </notempty>
        </div>
    </div>
    <!-- 明星访谈 -->
    <div class="first_scene">
        <div class="first_scene_contant" id="star_interview">
            <div class="first_scene_img">
                <div class="first_scene_top_img">
                    <img src="__TMPL__/public/assets/images/cicon_38@2x.png" alt="" />
                </div>
                <div class="first_scene_top_ch">明星<span>访谈</span>
                </div>
                <div class="first_scene_top_en">
                    Star Interview
                </div>
            </div>
        </div>
    </div>
    <!-- 胡歌 -->
    <div class="fourth_huge_star">
        <div class="userimg">
            <img src="{:cmf_get_image_url($res_mxft.avatar)}" alt="" />
        </div>
        <div class="useraccount tip left star_introduce">
            <a href="/portal/region/getStarDetail?id={$res_mxft.id}">
                <div class="useraccount_top">
                    <div class="useraccount_name one-txt-cut">{$res_mxft.full_name}</div>
                    <div class="useraccount_career">
                        {$res_mxft.position}<span>{$res_mxft.trade}</span>
                    </div>
                </div>
                <div class="useraccount_intro txt-cut" style="-webkit-line-clamp: 3;">
                    {$res_mxft.post_excerpt}
                </div>
            </a>
        </div>
    </div>
    <div class="video_bottom">
        <a href="/portal/region/getMoreStar">
            <div class="video_bottom_contant">
                more+
            </div>
        </a>
    </div>


    <!-- 星球故事 -->
    <div class="first_scene">
        <div class="first_scene_contant" id="story">
            <div class="first_scene_img">
                <div class="first_scene_top_img">
                    <img src="__TMPL__/public/assets/images/cicon_39@2x.png" alt="" />
                </div>
                <div class="first_scene_top_ch">星球<span>故事</span></div>
                <div class="first_scene_top_en">
                    Planet Story
                </div>
            </div>
        </div>
    </div>
    <div class="fourth_audio">
        <div class="index_eighteenth_top">
            <volist name="res_xqgs" id="vo" offset="0" length="1">
                <a href="/portal/star/getStoryDetail?id={$vo.id}">
                    <div class="fourth_audio_top_one">
                        <div class="fourth_audio_to_left">
                            <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
                        </div>
                        <div class="fourth_audio_to_right">
                            {$vo.excerpt}
                        </div>
                    </div>
                    <div class="index_eighteenth_top_three">
                        <notempty name="vo.audio">
                            <audio id="audio" src="{:cmf_get_file_download_url($vo.audio)}"></audio>
                            <else/>
                            <audio id="audio" src="__TMPL__/public/assets/images/清平调.mp3"></audio>
                        </notempty>
                    </div>
                </a>
            </volist>
        </div>
    </div>
    <div class="video_bottom">
        <a href="/portal/region/getMoreStory">
            <div class="video_bottom_contant">
                more+
            </div>
        </a>
    </div>


    <!-- 星球画廊 -->
    <div class="first_scene">
        <div class="first_scene_contant" id="gallery">
            <div class="first_scene_img">
                <div class="first_scene_top_img">
                    <img src="__TMPL__/public/assets/images/cicon_40@2x.png" alt="" />
                </div>
                <div class="first_scene_top_ch">星球<span>画廊</span></div>
                <div class="first_scene_top_en">
                    Star Gallery
                </div>
            </div>
        </div>
    </div>
    <div class="gallery">
        <!-- 图片 -->
        <div class="star_gall_img swiper-container2" style="height:4rem;">
            <!-- 轮播图 -->
            <ul class="swiper-wrapper">
                <volist name="res_xyhl" id="vo">
                    <li class="swiper-slide">
                        <a href="/portal/region/getGalleryDetail?id={$vo.id}">
                            <!-- <img style="width:100%;height: 3.74rem;" src="__TMPL__/public/assets/images/cicon_38@2x.png" alt="" /> -->

                            <img style="width:100%;height: 3.74rem;" src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
                        </a>
                    </li>
                </volist>
            </ul>
        </div>
    </div>
    <div class="video_bottom">
        <a href="/portal/region/getMoreGallery">
            <div class="video_bottom_contant">
                more+
            </div>
        </a>
    </div>
    <!-- 独角快报 -->
    <div class="first_scene">
        <div class="first_scene_contant" id="news">
            <div class="first_scene_img">
                <div class="first_scene_top_img">
                    <img src="__TMPL__/public/assets/images/cicon_41@2x.png" alt="" />
                </div>
                <div class="first_scene_top_ch">独角<span>快报</span></div>
                <div class="first_scene_top_en">Planet Express</div>
            </div>
        </div>
    </div>
    <div class="fourth_bulletin">
        <volist name="res_djkb" id="vo">
            <a href="/portal/region/getNewsDetail?id={$vo.id}">
                <div class="fourth_bulletin_contant">
                    <div class="fourth_bulletin_left">
                        <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
                    </div>
                    <div class="fourth_bulletin_right">
                        <div class="fourth_bulletin_one txt-cut" style="-webkit-line-clamp: 2;">
                            {$vo.post_title}
                        </div>
                        <div class="fourth_bulletin_two">{$vo.create_time|date="Y-m-d",###}</div>
                    </div>
                </div>
            </a>
        </volist>
    </div>
    <div class="video_bottom">
        <a href="/portal/region/getMoreNews">
            <div class="video_bottom_contant">
                more+
            </div>
        </a>
    </div>


    <!-- 独角日志 -->
    <div class="first_scene">
        <div class="first_scene_contant" id="note">
            <div class="first_scene_img">
                <div class="first_scene_top_img">
                    <img src="__TMPL__/public/assets/images/cicon_45@2x.png" alt="" />
                </div>
                <div class="first_scene_top_ch">独角<span>日志</span></div>
                <div class="first_scene_top_en">Neo Blog</div>
            </div>
        </div>
    </div>
    <div class="gallery" id="fourth_logs">
        <!-- 图片 -->
        <div class="star_gall_img  swiper-container_one">
            <!-- 轮播图 -->
            <ul class="swiper-wrapper">
                <volist name="res_djrz" id="vo">
                    <li class="swiper-slide">
                        <a href="/portal/region/getNoteDetail?id={$vo.id}">
                            <div class="fourth_log">
                                <div class="fourth_log_top">
                                    <img src="{:cmf_get_image_url($vo.index_thumbnail)}" alt="" />
                                </div>
                                <div class="fourth_log_bottom" style="height:4.04rem;">
                                    <div class="fourth_log_one txt-cut" style="-webkit-line-clamp: 2;">
                                        {$vo.post_title}
                                    </div>
                                    <div class="fourth_log_two txt-cut" style="-webkit-line-clamp: 3;">
                                        {$vo.post_excerpt}
                                    </div>
                                    <div class="fourth_log_three">
                                        <img src="{:cmf_get_image_url($vo.avatar)}" alt="" />
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                </volist>
            </ul>
        </div>
    </div>
    <div class="video_bottom">
        <a href="/portal/region/getMoreNote">
            <div class="video_bottom_contant">
                more+
            </div>
        </a>
    </div>
    <!-- 公益未来 -->
    <div class="first_scene">
        <div class="first_scene_contant" id="future">
            <div class="first_scene_img">
                <div class="first_scene_top_img">
                    <img src="__TMPL__/public/assets/images/cicon_44@2x.png" alt="" />
                </div>
                <div class="first_scene_top_ch">公益<span>未来</span></div>
                <div class="first_scene_top_en">Great dreams & Education</div>
            </div>
        </div>
    </div>
    <div class="gallery " id="fourth_logs">
        <!-- 图片 -->
        <div class="star_gall_img swiper-container">
            <!-- 轮播图 -->
            <ul class="swiper-wrapper">
                <volist name="res_tqwl" id="vo">
                    <li class="swiper-slide">
                        <a href="/portal/region/getFutureDetail?id={$vo.id}">
                            <div class="fourth_log">
                                <div class="fourth_log_top">
                                    <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
                                </div>
                                <div class="fourth_log_bottom">
                                    <div class="fourth_log_one">
                                        {$vo.post_title}
                                    </div>
                                    <div class="fourth_log_two txt-cut" style="-webkit-line-clamp: 2;">
                                        {$vo.post_excerpt}
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                </volist>
            </ul>
        </div>
    </div>
    <div class="video_bottom">
        <a href="/portal/region/getMoreFuture">
            <div class="video_bottom_contant">
                more+
            </div>
        </a>
    </div>
    <!--底部-->
    <include file="public@footer" />
</body>
<script src="__TMPL__/public/assets/js/jquery-2.1.0.js"></script>
<script src="__TMPL__/public/assets/js/base.js"></script>
<script src="__TMPL__/public/assets/js/swiper.min.js"></script>
<script src="__TMPL__/public/assets/js/k-audio.js"></script>
<script src="__TMPL__/public/assets/js/public.js"></script>
<script>
    $('.navImg1 img').click(function() {
        if ($(this).attr('src') == "__TMPL__/public/assets/images/xx.png") {
            $('.video_bg').show()
        } else {
            $('.video_bg').hide()
        }
    });
    //音频
    var audios = document.getElementsByTagName("audio");
    for (var i = 0; i < audios.length; i++) {
        var a = new kac(
            audios[i],
            800,
            30,
            "https://raw.githubusercontent.com/KIPI-C/k-audio.js/master/22.lrc",
            true
        );
        a.style("#E1E1E6");
    }

    // 星域秀场视频

    // swiper
    var swiper = new Swiper(".swiper-container2", {
        slidesPerView: 2.4,
        paginationClickable: true,
        spaceBetween: 10,
        freeMode: true
    });



    var swiper = new Swiper(".swiper-container", {
        slidesPerView: 1.16,
        paginationClickable: true,
        spaceBetween: 10,
        freeMode: true
    });


    var swiper = new Swiper(".swiper-container_one", {
        slidesPerView: 1.2,
        paginationClickable: true,
        spaceBetween: 10,
        freeMode: true
    });
</script>

</html>