zhaoheqing
/
ohplay_official


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--{if ($type == 'evaluation'){}-->
<title>产品测评</title>
<meta name="description" content="产品测评">
<meta name="keywords" content="猫王收音机,猫王音响,RADIOOO,猫王音乐台,猫王1,猫王2,猫王3,猫王小王子">
<!--{}}-->
<!--{if ($type == 'dynamic'){}-->
<title>热点动态</title>
<meta name="description" content="热点动态">
<meta name="keywords" content="猫王收音机,猫王音响,RADIOOO,猫王音乐台,猫王1,猫王2,猫王3,猫王小王子">
<!--{}}-->
<!--{if ($type == 'video'){}-->
<title>视频专题</title>
<meta name="description" content="视频专题">
<meta name="keywords" content="猫王收音机,猫王音响,RADIOOO,猫王音乐台,猫王1,猫王2,猫王3,猫王小王子">
<!--{}}-->
<link rel="shortcut icon" href="/static/css/favicon.ico">
<!--{ if ($lang == 'en') {}-->
<link rel="stylesheet" type="text/css" href="/static/css/headerComponent_en.css">
<!--{}else{}-->
<link rel="stylesheet" type="text/css" href="/static/css/headerComponent.css">
<!--{}}-->
<link rel="stylesheet" type="text/css" href="/static/css/museumPage.css">
<style type="text/css">
    <!--{if ($type == 'evaluation'){}-->
    .m-museum {
        background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%8D%9A%E7%89%A9%E9%A6%86/review_bg.jpg');
    }
    <!--{}}-->
    <!--{if ($type == 'dynamic'){}-->
    .m-museum {
        background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%8D%9A%E7%89%A9%E9%A6%86/hotspots_bg.jpg');
    }
    <!--{}}-->
    <!--{if ($type == 'video'){}-->
    .m-museum {
        background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%8D%9A%E7%89%A9%E9%A6%86/video_bg.jpg');
    }
    .section-wrap {
        padding: 0;
    }
    <!--{ for($i=0;$i<count($museData);$i++){ }-->
    .section-wrap:nth-child(<!--{ echo $i+1; }-->) .section-videoplay {
        /*background: url(<!--{ echo $museData[$i]['video_img']; }-->) no-repeat center center;
        background-size: cover;*/
    }
    <!--{}}-->
    <!--{}}-->
    
    /*@media (max-device-width: 1081px) {
        <!--{ for($i=0;$i<count($museData);$i++){ }-->
        .section-wrap:nth-child(<!--{echo $i+1 }-->) {
            background-image: url(<!--{ echo $museData[$i]['icon']; }-->);
        }
        <!--{}}-->
    }*/
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/module/TD.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?ec21b876c66f6033f549fcd833ac3b7b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
    <!--{ echo $header; }-->
    <div class="m-museum">
    	<div class="museum-wrap">
            <!--{ for($i=0;$i<count($museData);$i++){ }-->
            <!--{if ($type == 'video'){}-->

            <!--{ $row1 = count($museData)/3; }-->
            <!--{ $row2 = count($museData)*2/3; }-->

            <!--{if ($i == 0){}-->
            <div class="section-row">
            <!--{}}-->

            <!--{if ($i == ceil($row1)){}-->
            </div>
            <div class="section-row">
            <!--{}}-->

            <!--{if ($i == ceil($row2)){}-->
            </div>
            <div class="section-row">
            <!--{}}-->

    		<div class="section-wrap mb-video-section" data-id="<!--{ echo $museData[$i]['id']; }-->">
    			<div class="alpha-layer"></div>
                <div class="section-text">
    				<h1 class="section-date mb-display-toggle" style="display:none;">
	    				<!--{ echo $museData[$i]['gotime']; }-->
	    			</h1>
                    <h2 class="section-title"><!--{ echo $museData[$i]['title']; }--></h2>
                    <p class="section-content mb-display-toggle" style="text-align:left;">
                        <!--{ $str = str_replace('}','</strong>',str_replace('{','<strong>',$museData[$i]['content'])); echo $str; }-->
                    </p>
                    <div class="section-videoplay">
                        <img src="<!--{ echo $museData[$i]['video_img']; }-->"></img>
                        <div class="btn-videoplay"></div>
                    </div>
    			</div>
    			<div class="btn-details-show"></div>
    			<div class="btn-details-hide"></div>
    		</div>

            <!--{if ($i == count($museData) - 1){}-->
            </div>
            <!--{}}-->

            <!--{}else{}-->

            <!--{ $row1 = count($museData)/3; }-->
            <!--{ $row2 = count($museData)*2/3; }-->

            <!--{if ($i == 0){}-->
            <div class="section-row">
            <!--{}}-->

            <!--{if ($i == ceil($row1)){}-->
            </div>
            <div class="section-row">
            <!--{}}-->

            <!--{if ($i == ceil($row2)){}-->
            </div>
            <div class="section-row">
            <!--{}}-->

            <div class="section-wrap" data-id="<!--{ echo $museData[$i]['id']; }-->">
                <div class="alpha-layer"></div>
                <div class="section-img">
                    <img src="<!--{ echo $museData[$i]['icon']; }-->" alt="">
                </div>
                <div class="section-text">
                    <h2 class="section-title"><!--{ echo $museData[$i]['title']; }-->
                    </h2>
                    <p class="section-content">
                        <!--{ $str = str_replace('}','</strong>',str_replace('{','<strong>',$museData[$i]['content'])); echo $str; }-->
                    </p>
                    <p class="section-date">
                        <!--{ echo $museData[$i]['gotime']; }-->
                    </p>
                    
                </div>
                <div class="btn-details-show"></div>
                <div class="btn-details-hide"></div>
            </div>

            <!--{if ($i == count($museData) - 1){}-->
            </div>
            <!--{}}-->

            <!--{}}-->
            <!--{}}-->
    	</div>
        <!--{if ($type != 'video'){}-->
    	<div class="details-wrap">
            <!--{ for($i=0;$i<count($museData);$i++){ }-->
    		<div class="details-section" data-id="<!--{ echo $museData[$i]['id']; }-->">
    			<h2 class="details-title">
    				<!--{ echo $museData[$i]['title']; }-->
    			</h2>
    			<p class="details-message">
                    作者：<!--{ echo $museData[$i]['author']; }--> 
                    发表时间：<!--{ echo $museData[$i]['gotime']; }--> 
                    阅览：<!--{ echo $museData[$i]['views']; }-->次
    			</p>
                <!--{ for($j=0;$j<count($museData[$i]['imgContent']);$j++){ }-->
    			<div class="details-content">
    				<span>
                        <!--{ $str = $museData[$i]['imgContent'][$j]; echo htmlspecialchars_decode($str) }-->
    				</span>
    			</div>
                <!--{ } }-->
                <div class="btn-close">+</div>
    		</div>
            <!--{ } }-->
    	</div>
        <!--{ } }-->
        <!--{if ($type == 'video'){}-->
    	<div class="video-wrap">
            <!--{ for($i=0;$i<count($museData);$i++){ }-->
    		<div class="video-section" data-id="<!--{ echo $museData[$i]['id']; }-->">
    			<video class="video-item" src="<!--{ echo $museData[$i]['video']; }-->" controls="true"></video>
    			<div class="btn-close">+</div>
    		</div>
            <!--{ } }-->
    	</div>
        <!--{ } }-->
    </div>
</body>
<script type="text/javascript" src="/static/js/module/headerComponent.js"></script>
<script type="text/javascript">
    <!--{if ($type != 'video'){}-->
	// 文字页面的处理函数
	var textTypeHandler = function (wrapEl) {

        $(document).ready(function () {
            var id = location.hash;
            var sectionArr = $('.section-wrap');

            sectionArr.each(function (ele) {
                if ('#' + $(this).data('id').toString() === id) {
                    $(this).find('.btn-details-show').click();
                }
            })

        });

		$('.btn-details-show').on('click', function () {
            var viewCount = function () {
                var id;
                if (wrapEl.data('id') !== 'undefined') {
                    id = wrapEl.data('id');
                } else {
                    id = -1;
                }

                var readedStr = '';

                if (localStorage.getItem('readed')) {
                    readedStr = localStorage.getItem('readed');
                }

                if(readedStr.match(id.toString()) !== null) {
                    return;
                } else {
                    readedStr = readedStr + id + ',';

                    localStorage.setItem('readed',readedStr);

                    TD.ajax({
                        type: 'GET',
                        url: '/index/museum/view',
                        data: {
                            id: id
                        },
                        success: function (res) {
                            console.log(res);
                            return res;
                        },
                        error: function (data) {
                            console.log(data);
                            return 0;
                        }
                    })
                }
            }

            // var index = $(this).parent().index();
            var id;
            var wrapEl = $(this).parent();

            if (wrapEl.data('id') !== 'undefined') {
                id = wrapEl.data('id');
            } else {
                id = -1;
            }

            // 移动端则不需要继续处理
            if (document.documentElement.clientWidth <= 1080) {
                // $('.details-section:nth-child(' + (index+1) + ')').fadeIn(300);
                $('.details-section').each(function (ele) {
                    if ($(this).data('id') === id) {
                        $(this).fadeIn(300);
                    }
                });
                return;
            }

			// 位于左边不动，位于右边则先移动到左边
			// if (index%2 === 1) {
			// 	// 隐藏左边文章
			// 	$('.section-wrap:nth-child(' + index + ')').fadeOut(300);
			// 	wrapEl.animate({
			// 		left: '-46%'
			// 	}, 300, function () {
			// 		wrapEl.css('left', 0);
			// 	})
			// }

			//wrapEl.children('.btn-details-show').hide();
			//wrapEl.children('.btn-details-hide').show();

			// wrapEl.find('img').css('transform', 'scale(0.75)');

            $('.details-section').each(function () {
                if ($(this).css('display') === 'block') {
                    $(this).fadeOut(300);
                }
            });

			// $('.details-section:nth-child(' + (index+1) + ')').fadeIn(300);
            $('.details-section').each(function (ele) {
                if ($(this).data('id') === id) {
                    console.log($(this).data('id'))
                    $(this).fadeIn(300);
                }
            })

            // $('.section-wrap').addClass('section-block');
            $('.section-row').addClass('section-block');

            viewCount(wrapEl);

            var hashHandler = function () {
                var id;

                if (wrapEl.data('id') !== 'undefined') {
                    id = wrapEl.data('id');
                } else {
                    id = -1;
                }

                location.hash = id;
            }

            hashHandler();
		});

		// $('.btn-details-hide').on('click', function () {
		// 	var index = $(this).parent().index();
		// 	var wrapEl = $(this).parent();

		// 	if (index%2 === 1) {
		// 		// 恢复左边文章
		// 		$('.section-wrap:nth-child(' + index + ')').fadeIn(300);
		// 		wrapEl.css('left', '-46%');
		// 		wrapEl.animate({
		// 			left: '0'
		// 		}, 300, function () {
		// 			// wrapEl.css('left', 0);
		// 		})
		// 	}
			
		// 	wrapEl.children('.btn-details-hide').hide();
		// 	wrapEl.children('.btn-details-show').show();

		// 	wrapEl.find('img').css('transform', 'scale(1)');

		// 	$('.details-section:nth-child(' + (index+1) + ')').fadeOut(300);
		// })

        $('.details-wrap .btn-close').on('click', function () {
            var index = $(this).parent().index();

            $(this).parent().fadeOut(300);
            // $('.details-section').each(function () {
            //     if ($(this).css('display') === 'block') {
            //         $(this).fadeOut(300);
            //     }
            // });

            // $('.section-wrap').removeClass('section-block');
            $('.section-row').removeClass('section-block');
            location.hash = '';
        })
	}

    textTypeHandler();
    <!--{}}-->

    <!--{if ($type == 'video'){}-->
	// 视频页面的处理函数
	var videoTypeHandler = function () {
		// $('.btn-play').show();
		$('.details-wrap') && $('.details-wrap').hide();
		$('.btn-details-show').hide();

        // $('.section-videoplay').hover(function () {
        //     $(this).css('opacity', 0.6);
        // },function () {
        //     $(this).css('opacity', 1);
        // })
		$('.section-videoplay').on('click', function () {
            var id;
            var wrapEl = $(this).parent().parent();

            if (wrapEl.data('id') !== 'undefined') {
                id = wrapEl.data('id');
            } else {
                id = -1;
            }

            $('.video-section').each(function (ele) {
                if ($(this).data('id') === id) {
                    $(this).fadeIn(300);

                    var videoEl = $(this).find('.video-item')[0];
                    videoEl.currentTime = 0;
                    videoEl.play();
                }
            });

			// var index = $(this).parent().parent().index();

			// var videoSectionEl = $('.video-section:nth-child(' + (index+1) + ')');
			// var videoEl = videoSectionEl.find('.video-item')[0];

			// videoSectionEl.fadeIn(300);
			// videoEl.currentTime = 0;
			// videoEl.play();
		})

        if (document.documentElement.clientWidth <= 1080) {
            $('.section-wrap').on('click', function () {
                var id;
                var wrapEl = $(this).parent().parent();

                if (wrapEl.data('id') !== 'undefined') {
                    id = wrapEl.data('id');
                } else {
                    id = -1;
                }

                $('.video-section').each(function (ele) {
                    if ($(this).data('id') === id) {
                        $(this).fadeIn(300);
                        
                        var videoEl = $(this).find('.video-item')[0];
                        videoEl.currentTime = 0;
                        videoEl.play();
                    }
                });

                // var index = $(this).parent().index();

                // var videoSectionEl = $('.video-section:nth-child(' + (index+1) + ')');
                // var videoEl = videoSectionEl.find('.video-item')[0];

                // videoSectionEl.fadeIn(300);
                // videoEl.currentTime = 0;
                // videoEl.play();
            })
        }

		$('.video-section').on('click', function (event) {
			var evt = event || window.event;
			var target = evt.target || evt.srcElement;

			if (target.nodeName.toLowerCase() === 'video') {
				console.log('video');
				return;
			}

			$(this).find('.video-item')[0].pause();
			$(this).fadeOut(300);
		})
	}

	videoTypeHandler();
    <!--{}}-->
</script>
</html>