审查视图

public/themes/simpleboot3/portal/region/index.html 17.8 KB
1 2 3 4 5 6 7 8
<!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>
景龙 authored
9 10
    <link rel="stylesheet" href="__TMPL__/public/assets/js/swiper4/swiper.min.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/show.css">
景龙 authored
11
    <link rel="stylesheet" href="__TMPL__/public/assets/css/audio.css">
景龙 authored
12
    <style>
13 14 15
        .slide-image {
            width: 260px;
            height: 375px;
景龙 authored
16
        }
17 18 19
        
        .show_INMain_con5_2 p,
        .show_INMain_con6_1 p {
景龙 authored
20 21
            height: 45px;
        }
22 23 24 25
        
        .swiper-button-prev2,
        .swiper-button-next2 {
            outline: none;
景龙 authored
26
        }
27 28
        
        .hl_index {
景龙 authored
29 30 31
            overflow: hidden;
            float: left;
            margin-top: 11px;
景龙 authored
32
        }
33
        
景龙 authored
34 35 36 37 38 39 40 41 42
        .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;
景龙 authored
43
        }
44 45
        
        .swiper-button-prev2 {
景龙 authored
46
            margin-right: 6px;
景龙 authored
47
        }
48
        
景龙 authored
49 50
        .hl_index .first {
            background: #09FF8E;
景龙 authored
51
        }
52
        
景龙 authored
53 54
        .swiper-button-disabled2 {
            background-color: white !important;
景龙 authored
55
        }
zhangwei authored
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
        
        .show_in_banner2 {
            z-index: 20;
        }
        
        .show_bannerFen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }
        
        .show_bannerFen img {
            width: 100%;
            height: 100%;
        }
景龙 authored
74
    </style>
75 76
</head>
77
<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
78
    <!--头部-->
79
    <include file="public@header" />
80 81 82
    <div class="show_index">
        <!-- banner视频 -->
        <div class="show_index_banner">
景龙 authored
83
            <notempty name="res_xqyy">
zhangwei authored
84
                <video id="video" controls width="100%" height="660" src="{:cmf_get_file_download_url($res_xqyy.video)}" controlsList="nodownload"></video>
景龙 authored
85
                <else/>
86
                <video id="video" autoplay="autoplay" controls width="100%" height="660" src="__TMPL__/public/assets/starImg/video.mp4" controlsList="nodownload"></video>
景龙 authored
87 88
            </notempty>
            <!-- poster="__TMPL__/public/assets/starImg/aicon_01.png" -->
zhangwei authored
89 90 91 92
            <img onclick="bofang()" class="show_in_banner2" src="__TMPL__/public/assets/starImg/aicon_30.png" alt="">
            <div class="show_bannerFen">
                <img src="{:cmf_get_image_url($res_xqyy.thumbnail)}" alt="">
            </div>
93 94 95 96 97 98 99
        </div>

        <!-- main 背景 -->
        <div class="show_InMain">
            <!-- 明星访谈盒子 -->
            <div class="show_InMain_box">
                <!-- 顶部标题 -->
jinglong authored
100
                <div class="show_INMain_tit clearfix" id="star_interview">
101
                    <div class="show_IN1 clearfix">
景龙 authored
102
                        <img src="__TMPL__/public/assets/starImg/aicon_48.png" alt="">
103 104 105 106 107
                        <p>明星<span>访谈</span></p>
                        <h2>Star Interview</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="show_IN2">
景龙 authored
108
                        <a href="/portal/region/getMoreStar"> MORE+ </a>
109 110 111 112
                    </div>
                </div>
                <!-- 内容 -->
                <div class="show_INMain_con clearfix">
景龙 authored
113
                    <a href="/portal/region/getStarDetail?id={$res_mxft.id}">
景龙 authored
114
                        <img class="show_INMain_con1" src="{:cmf_get_image_url($res_mxft.avatar)}" alt="">
115
                        <div class="show_INMain_con2 clearfix">
景龙 authored
116 117 118 119
                            <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>
120 121 122 123 124 125 126
                        </div>
                    </a>
                </div>
            </div>
            <!-- 星球故事盒子 -->
            <div class="show_InMain_box show_InMain_box2">
                <!-- 顶部标题 -->
jinglong authored
127
                <div class="show_INMain_tit clearfix" id="story">
128
                    <div class="show_IN1 clearfix">
景龙 authored
129
                        <img src="__TMPL__/public/assets/starImg/aicon_03.png" alt="">
130 131 132 133 134
                        <p>星球<span>故事</span></p>
                        <h2>Planet Story</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="show_IN2">
景龙 authored
135
                        <a href="/portal/region/getMoreStory"> MORE+ </a>
136 137 138
                    </div>
                </div>
                <!-- 内容 -->
景龙 authored
139
                <div class="show_INMain_con2_2 swiper-container2 swiper-no-swiping">
140
                    <div class="swiper-wrapper">
景龙 authored
141 142
                        <volist name="res_xqgs" id="vo">
                            <div class="swiper-slide">
143 144
                                <div class="show_index_con2Txt clearfix">
                                    <a href="/portal/star/getStoryDetail?id={$vo.id}">
景龙 authored
145 146
                                        <!-- 左侧图片 -->
                                        <img class="show_indexImg1" src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
147 148 149 150
                                    </a>
                                    <!-- 文字 -->
                                    <div class="show_index_con2Txt2">
                                        {$vo.excerpt}
景龙 authored
151
                                    </div>
152 153
                                    <!-- 进度条 -->
                                    <div class="show_index_progress">
景龙 authored
154 155 156 157 158
                                        <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>
景龙 authored
159
                                        <!--<img src="__TMPL__/public/assets/starImg/aicon_15.png" alt="">-->
160 161
                                    </div>
                                </div>
162
                            </div>
景龙 authored
163
                        </volist>
164 165
                    </div>
                    <div class="show_swiper2_btn clearfix">
166 167
                        <div class="show_swiper2_btn22">
                            <div class="swiper-button-prev2"></div>
景龙 authored
168 169 170 171
                            <div class="hl_index">
                                <volist name="res_xqgs" id="vo">
                                    <span></span>
                                </volist>
172 173
                            </div>
                            <div class="swiper-button-next2"></div>
174 175

                        </div>
176
177 178 179 180 181 182 183 184
                    </div>

                </div>
            </div>
        </div>
        <!-- 星球画廊盒子 -->
        <div class="show_InMain_box show_InMain_box3">
            <!-- 顶部标题 -->
jinglong authored
185
            <div class="show_INMain_tit clearfix" id="gallery">
186
                <div class="show_IN1 clearfix">
景龙 authored
187
                    <img src="__TMPL__/public/assets/starImg/aicon_50.png" alt="">
188 189 190
                    <p>星球<span>画廊</span></p>
                    <h2>Star Gallery</h2>
                </div>
景龙 authored
191 192
                <!-- 更多 -->
                <div class="show_IN2">
jinglong authored
193
                    <a href="/portal/region/getMoreGallery"> MORE+ </a>
景龙 authored
194
                </div>
195 196 197 198
            </div>
            <!-- 内容 -->
            <div class="show_INMain_con3_3 swiper-container">
                <ul class="swiper-wrapper">
景龙 authored
199 200
                    <volist name="res_xyhl" id="vo">
                        <li class="swiper-slide">
201 202 203
                            <a href="/portal/region/getGalleryDetail?id={$vo.id}">
                                <img class="swiper-slide slide-image" src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                            </a>
景龙 authored
204 205
                        </li>
                    </volist>
206 207 208 209 210 211 212 213 214 215 216 217 218
                </ul>
                <div class="swiper-button-next">

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

                </div>
            </div>
        </div>
        <!-- 独角快报 -->
        <div class="show_InMain2">
            <div class="show_InMain_box4">
                <!-- 顶部标题 -->
jinglong authored
219
                <div class="show_INMain_tit clearfix" id="news">
220
                    <div class="show_IN1 clearfix">
景龙 authored
221
                        <img src="__TMPL__/public/assets/starImg/aicon_51.png" alt="" style="margin-top:5px;width: 30px;">
222 223 224 225 226
                        <p>独角<span>快报</span></p>
                        <h2>Planet Express</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="show_IN2">
jinglong authored
227
                        <a href="/portal/region/getMoreNews"> MORE+ </a>
228 229 230 231 232
                    </div>
                </div>
                <!-- 内容 -->
                <div class="show_INMain_con4">
                    <ul>
景龙 authored
233 234
                        <volist name="res_djkb" id="vo">
                            <li class="clearfix">
jinglong authored
235
                                <a href="/portal/region/getNewsDetail?id={$vo.id}">
景龙 authored
236 237 238 239 240 241 242 243 244 245 246
                                    <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>
247 248 249 250 251 252 253
                    </ul>
                </div>
            </div>
        </div>
        <!-- 独角日志 -->
        <div class="show_InMain_box show_InMain_box5">
            <!-- 顶部标题 -->
jinglong authored
254
            <div class="show_INMain_tit clearfix" id="note">
255
                <div class="show_IN1 clearfix">
景龙 authored
256
                    <img src="__TMPL__/public/assets/starImg/aicon_52.png" alt="" style="margin-top:3px;width: 28px;">
257 258 259
                    <p>独角<span>日志</span></p>
                    <h2>Neo Blog</h2>
                </div>
260 261 262 263
                <!-- 更多 -->
                <div class="show_IN2">
                    <a href="/portal/region/getMoreNote"> MORE+ </a>
                </div>
264 265 266 267
            </div>
            <!-- 内容 -->
            <div class="show_INMain_con5">
                <ul class="clearfix">
景龙 authored
268 269
                    <volist name="res_djrz" id="vo">
                        <li>
景龙 authored
270
                            <a href="/portal/region/getNoteDetail?id={$vo.id}">
景龙 authored
271
                                <div class="show_INMain_con5_1">
272
                                    <img src="{:cmf_get_image_url($vo.index_thumbnail)}" alt="">
景龙 authored
273 274 275 276 277 278 279 280 281 282 283
                                </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>
284 285 286 287 288 289
                </ul>
            </div>
        </div>
        <!-- 公益未来 -->
        <div class="show_InMain_box show_InMain_box6">
            <!-- 顶部标题 -->
jinglong authored
290
            <div class="show_INMain_tit clearfix" id="future">
291
                <div class="show_IN1 clearfix">
景龙 authored
292
                    <img src="__TMPL__/public/assets/starImg/aicon_53.png" alt="" style="margin-top:5px;width:37px;">
293 294 295
                    <p>公益<span>未来</span></p>
                    <h2>Commonweal & Future</h2>
                </div>
296 297 298 299
                <!-- 更多 -->
                <div class="show_IN2">
                    <a href="/portal/region/getMoreFuture"> MORE+ </a>
                </div>
300 301 302 303
            </div>
            <!-- 内容 -->
            <div class="show_INMain_con6">
                <ul class="clearfix">
景龙 authored
304 305
                    <volist name="res_tqwl" id="vo">
                        <li>
景龙 authored
306
                            <a href="/portal/region/getFutureDetail?id={$vo.id}">
景龙 authored
307 308 309 310 311 312 313 314
                                <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>
315 316 317 318 319
                </ul>
            </div>
        </div>
    </div>
    <!-- 底部 -->
320
    <include file="public@footer" />
景龙 authored
321 322
    <script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
    <script src="__TMPL__/public/assets/js/swiper4/swiper.min.js"></script>
景龙 authored
323
    <script src="__TMPL__/public/assets/js/public.js"></script>
景龙 authored
324
    <script src="__TMPL__/public/assets/js/k-audio.js"></script>
325
    <script>
景龙 authored
326 327 328 329 330 331
        var index = 0;
        $(window).ready(function() {
            if (index == 0) {
                $('.swiper-button-prev2').addClass('swiper-button-disabled2');
            }
        });
332 333 334 335
        //禁止下载
        $('video').bind('contextmenu', function() {
            return false;
        });
景龙 authored
336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378
        // 轮播图
        $('.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');
            }
        });
景龙 authored
379 380 381 382 383 384 385 386 387 388
        $('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) {
389
                // 将audios中其他的audio全部暂停
景龙 authored
390 391 392 393 394 395 396
                i !== self && i.pause();
            })
        }
        // 给play事件绑定暂停函数
        [].forEach.call(audios, function(i) {
            i.addEventListener("play", pauseAll.bind(i));
        });
397 398 399 400 401 402 403 404 405 406 407
        // 星球画廊swiper
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 4,
            spaceBetween: 53,

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        // 星球故事swiper
408 409 410 411 412 413 414 415 416 417 418 419 420
        //        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',
        //            },
        //        });
421 422

        // banner视频
zhangwei authored
423 424 425 426 427 428 429 430
        var video = document.getElementById("video");

        function bofang() {
            video.play();
            $('#video').attr('controls', 'controls')
            $('.show_in_banner2').hide();
            $('.show_bannerFen').hide();
        }
431 432 433 434
    </script>
</body>

</html>