public/themes/simpleboot3/portal/region/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星域秀场</title>
    <link rel="stylesheet" href="__TMPL__/public/assets/js/swiper4/swiper.min.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/show.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/audio.css">
    <style>
        .slide-image{
            width:260px;
            height:375px;
        }
        .show_INMain_con5_2 p, .show_INMain_con6_1 p {
            height: 45px;
        }
        .swiper-button-prev2,.swiper-button-next2{
            outline:none;
        }

        .hl_index{
            overflow: hidden;
            float: left;
            margin-top: 11px;
        }
        .hl_index span {
            width: 8px;
            height: 8px;
            float: left;
            background: rgba(255, 255, 255, 1);
            opacity: 0.6;
            display: inline-block;
            border-radius: 50%;
            margin-right: 6px;
        }
        .swiper-button-prev2{
            margin-right: 6px;
        }
        .hl_index .first {
            background: #09FF8E;
        }
        .swiper-button-disabled2 {
            background-color: white !important;
        }
    </style>
</head>

<body>
    <!--头部-->
    <include file="public@header"/>
    <div class="show_index">
        <!-- banner视频 -->
        <div class="show_index_banner">
            <notempty name="res_xqyy">
                <video id="video" autoplay="autoplay" controls width="100%" height="660" src="{:cmf_get_file_download_url($res_xqyy.video)}"></video>
                <else/>
                <video id="video" autoplay="autoplay" controls width="100%" height="660" src="__TMPL__/public/assets/starImg/video.mp4"></video>
            </notempty>
            <!-- poster="__TMPL__/public/assets/starImg/aicon_01.png" -->
            <!-- <img onclick="bofang()" class="show_in_banner2" src="__TMPL__/public/assets/starImg/aicon_30.png" alt=""> -->
        </div>

        <!-- main 背景 -->
        <div class="show_InMain">
            <!-- 明星访谈盒子 -->
            <div class="show_InMain_box">
                <!-- 顶部标题 -->
                <div class="show_INMain_tit clearfix" id="star_interview">
                    <div class="show_IN1 clearfix">
                        <img src="__TMPL__/public/assets/starImg/aicon_48.png" alt="">
                        <p>明星<span>访谈</span></p>
                        <h2>Star Interview</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="show_IN2">
                        <a href="/portal/region/getMoreStar"> MORE+ </a>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="show_INMain_con clearfix">
                    <a href="/portal/region/getStarDetail?id={$res_mxft.id}">
                        <img class="show_INMain_con1" src="{:cmf_get_image_url($res_mxft.avatar)}" alt="">
                        <div class="show_INMain_con2 clearfix">
                            <img class="show_INMain_con3" src="__TMPL__/public/assets/starImg/aicon_32.png" alt="">
                            <h2>{$res_mxft.full_name}</h2>
                            <h3>{$res_mxft.position} {$res_mxft.trade}</h3>
                            <p>{$res_mxft.post_excerpt}</p>
                        </div>
                    </a>
                </div>
            </div>
            <!-- 星球故事盒子 -->
            <div class="show_InMain_box show_InMain_box2">
                <!-- 顶部标题 -->
                <div class="show_INMain_tit clearfix" id="story">
                    <div class="show_IN1 clearfix">
                        <img src="__TMPL__/public/assets/starImg/aicon_03.png" alt="">
                        <p>星球<span>故事</span></p>
                        <h2>Planet Story</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="show_IN2">
                        <a href="/portal/region/getMoreStory"> MORE+ </a>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="show_INMain_con2_2 swiper-container2 swiper-no-swiping">
                    <div class="swiper-wrapper">
                        <volist name="res_xqgs" id="vo">
                            <div class="swiper-slide">
                                <div class="show_index_con2Txt clearfix">
                                    <a href="/portal/star/getStoryDetail?id={$vo.id}">
                                        <!-- 左侧图片 -->
                                        <img class="show_indexImg1" src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                    </a>
                                    <!-- 文字 -->
                                    <div class="show_index_con2Txt2">
                                        {$vo.excerpt}
                                    </div>
                                    <!-- 进度条 -->
                                    <div class="show_index_progress">
                                        <notempty name="vo.audio">
                                            <audio src="{:cmf_get_file_download_url($vo.audio)}"></audio>
                                            <else/>
                                            <audio src="http://link.hhtjim.com/163/442869240.mp3"></audio>
                                        </notempty>
                                        <!--<img src="__TMPL__/public/assets/starImg/aicon_15.png" alt="">-->
                                    </div>
                                </div>
                            </div>
                        </volist>
                    </div>
                    <div class="show_swiper2_btn clearfix">
                        <div class="show_swiper2_btn22">
                            <div class="swiper-button-prev2"></div>
                            <div class="hl_index">
                                <volist name="res_xqgs" id="vo">
                                    <span></span>
                                </volist>
                            </div>
                            <div class="swiper-button-next2"></div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
        <!-- 星球画廊盒子 -->
        <div class="show_InMain_box show_InMain_box3">
            <!-- 顶部标题 -->
            <div class="show_INMain_tit clearfix" id="gallery">
                <div class="show_IN1 clearfix">
                    <img src="__TMPL__/public/assets/starImg/aicon_50.png" alt="">
                    <p>星球<span>画廊</span></p>
                    <h2>Star Gallery</h2>
                </div>
                <!-- 更多 -->
                <div class="show_IN2">
                    <a href="/portal/region/getMoreGallery"> MORE+ </a>
                </div>
            </div>
            <!-- 内容 -->
            <div class="show_INMain_con3_3 swiper-container">
                <ul class="swiper-wrapper">
                    <volist name="res_xyhl" id="vo">
                        <li class="swiper-slide">
                            <img class="swiper-slide slide-image" src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                        </li>
                    </volist>
                </ul>
                <div class="swiper-button-next">

                </div>
                <div class="swiper-button-prev ">

                </div>
            </div>
        </div>
        <!-- 独角快报 -->
        <div class="show_InMain2">
            <div class="show_InMain_box4">
                <!-- 顶部标题 -->
                <div class="show_INMain_tit clearfix" id="news">
                    <div class="show_IN1 clearfix">
                        <img src="__TMPL__/public/assets/starImg/aicon_51.png" alt="" style="margin-top:5px;width: 30px;">
                        <p>独角<span>快报</span></p>
                        <h2>Planet Express</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="show_IN2">
                        <a href="/portal/region/getMoreNews"> MORE+ </a>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="show_INMain_con4">
                    <ul>
                        <volist name="res_djkb" id="vo">
                            <li class="clearfix">
                                <a href="/portal/region/getNewsDetail?id={$vo.id}">
                                    <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                    <div class="show_INMain_con4_txt">
                                        <h2>{$vo.post_title}</h2>
                                        <p>
                                            {$vo.post_excerpt}
                                        </p>
                                        <span>{$vo.create_time|date="Y-m-d",###}</span>
                                    </div>
                                </a>
                            </li>
                        </volist>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 独角日志 -->
        <div class="show_InMain_box show_InMain_box5">
            <!-- 顶部标题 -->
            <div class="show_INMain_tit clearfix" id="note">
                <div class="show_IN1 clearfix">
                    <img src="__TMPL__/public/assets/starImg/aicon_52.png" alt="" style="margin-top:3px;width: 28px;">
                    <p>独角<span>日志</span></p>
                    <h2>Neo Blog</h2>
                </div>
            </div>
            <!-- 内容 -->
            <div class="show_INMain_con5">
                <ul class="clearfix">
                    <volist name="res_djrz" id="vo">
                        <li>
                            <a href="/portal/region/getNoteDetail?id={$vo.id}">
                                <div class="show_INMain_con5_1">
                                    <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                </div>
                                <div class="show_INMain_con5_2">
                                    <h1>{$vo.post_title}</h1>
                                    <p>
                                        {$vo.post_excerpt}
                                    </p>
                                    <img src="{:cmf_get_image_url($vo.avatar)}" alt="">
                                </div>
                            </a>
                        </li>
                    </volist>
                </ul>
            </div>
        </div>
        <!-- 公益未来 -->
        <div class="show_InMain_box show_InMain_box6">
            <!-- 顶部标题 -->
            <div class="show_INMain_tit clearfix" id="future">
                <div class="show_IN1 clearfix">
                    <img src="__TMPL__/public/assets/starImg/aicon_53.png" alt="" style="margin-top:5px;width:37px;">
                    <p>公益<span>未来</span></p>
                    <h2>Commonweal & Future</h2>
                </div>
            </div>
            <!-- 内容 -->
            <div class="show_INMain_con6">
                <ul class="clearfix">
                    <volist name="res_tqwl" id="vo">
                        <li>
                            <a href="/portal/region/getFutureDetail?id={$vo.id}">
                                <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                <div class="show_INMain_con6_1">
                                    <h1>{$vo.post_title}</h1>
                                    <p>{$vo.post_excerpt}</p>
                                </div>
                            </a>
                        </li>
                    </volist>
                </ul>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <include file="public@footer"/>
    <script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
    <script src="__TMPL__/public/assets/js/swiper4/swiper.min.js"></script>
    <script src="__TMPL__/public/assets/js/public.js"></script>
    <script src="__TMPL__/public/assets/js/k-audio.js"></script>
    <script>
        var index = 0;
        $(window).ready(function() {
            if (index == 0) {
                $('.swiper-button-prev2').addClass('swiper-button-disabled2');
            }
        });
        // 轮播图
        $('.hl_index span:first-child').addClass('first');
        $('.swiper-button-next2').click(function() {
            index++;
            if (index == $('.swiper-container2 .swiper-wrapper .swiper-slide').length) {
                index = $('.swiper-container2 .swiper-wrapper .swiper-slide').length - 1
            }
            $(".swiper-container2 .swiper-wrapper").animate({
                "left": -1200 * index
            }, 300);
            $(".hl_index span").eq(index).css("background-color", "#09FF8E")
                .siblings().css("background-color", "#FFFFFF");
            if (index == $('.swiper-container2 .swiper-wrapper .swiper-slide').length - 1) {
                $('.swiper-button-next2').addClass('swiper-button-disabled2');
                $('.swiper-button-prev2').removeClass('swiper-button-disabled2');
            } else if (index <= $('.swiper-container2 .swiper-wrapper .swiper-slide').length - 1) {
                $('.swiper-button-next2').removeClass('swiper-button-disabled2');
                $('.swiper-button-prev2').removeClass('swiper-button-disabled2');
            } else {
                $('.swiper-button-next2').removeClass('swiper-button-disabled2');
            }
        });
        $(".swiper-button-prev2").click(function() {
            if (index == 0) {
                index = 0;
            } else {
                index--;
            }
            $(".swiper-container2 .swiper-wrapper").animate({
                "left": -1200 * index
            }, 300);
            $(".hl_index span").eq(index).css("background-color", "#09FF8E")
                .siblings().css("background-color", "#FFFFFF");
            if (index == 0) {
                $('.swiper-button-prev2').addClass('swiper-button-disabled2');
                $('.swiper-button-next2').removeClass('swiper-button-disabled2');
            } else if (index <= $('.swiper-container2 .swiper-wrapper .swiper-slide').length - 1) {
                $('.swiper-button-next2').removeClass('swiper-button-disabled2');
                $('.swiper-button-prev2').removeClass('swiper-button-disabled2');
            } else {
                $('.swiper-button-prev2').removeClass('swiper-button-disabled2');
            }
        });
        $('audio').each(function() {
            var a = new kac(this, 800, 40, "https://raw.githubusercontent.com/KIPI-C/k-audio.js/master/22.lrc", true);
            a.style("#E1E1E6");
        });
        // 获取所有audios
        var audios = document.getElementsByTagName("audio");
        // 暂停函数
        function pauseAll() {
            var self = this;
            [].forEach.call(audios, function(i) {
// 将audios中其他的audio全部暂停
                i !== self && i.pause();
            })
        }
        // 给play事件绑定暂停函数
        [].forEach.call(audios, function(i) {
            i.addEventListener("play", pauseAll.bind(i));
        });
        // 星球画廊swiper
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 4,
            spaceBetween: 53,

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        // 星球故事swiper
//        var swiper = new Swiper('.swiper-container2', {
//            slidesPerView: 1,
//            spaceBetween: 30,
//            // loop: true,
//            pagination: {
//                el: '.swiper-pagination',
//                clickable: true,
//            },
//            navigation: {
//                nextEl: '.swiper-button-next2',
//                prevEl: '.swiper-button-prev2',
//            },
//        });

        // banner视频
        // var video = document.getElementById("video");
        // function bofang() {
        //     video.play();
        //     $('#video').attr('controls', 'controls')
        //     $('.show_in_banner2').hide();
        // }
    </script>
</body>

</html>