科普剧场 / 故宫青少版网站

<!DOCTYPE HTML> <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=1440" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="keywords" content=""/> <meta name="description" content=""/> <link rel="Shortcut Icon" href="/statics/images/favicon.ico" type="image/x-icon" /> <link href="/statics/css/base.css?v=20230526" rel="stylesheet" type="text/css"> <script src="/statics/js/iefix.js" type="text/javascript"></script> <script src="/statics/js/jquery.min.js?v=20230526" type="text/javascript"></script> <script src="/statics/js/jquery-migrate.min.js?v=20230526" type="text/javascript"></script> <script src="/statics/js/comm.js?v=2022127" type="text/javascript"></script> <title>科普剧场 / 故宫青少版网站</title> <script> (function(w, d, s, q, i) { w[q] = w[q] || []; var f = d.getElementsByTagName(s)[0],j = d.createElement(s); j.async = true; j.id = 'beacon-aplus'; j.src = 'https://d.alicdn.com/alilog/mlog/aplus/' + i + '.js'; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'aplus_queue', '203561150'); //集成应用的appKey aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['appKey', '7iwypreeu3t283ji6xpkxbff'] }) aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-v', 'quickaplus-he-api-cn-shanghai.aliyuncs.com'] }); </script> <script type="text/javascript">!function(a,b){if(!b.__SV){var c,d,e,f;window.dplus=b,b._i=[],b.init=function(a,c,d){function g(a,b){var c=b.split(".");2==c.length&&(a=a[c[0]],b=c[1]),a[b]=function(){a.push([b].concat(Array.prototype.slice.call(arguments,0)))}}var h=b;for("undefined"!=typeof d?h=b[d]=[]:d="dplus",h.people=h.people||[],h.toString=function(a){var b="dplus";return"dplus"!==d&&(b+="."+d),a||(b+=" (stub)"),b},h.people.toString=function(){return h.toString(1)+".people (stub)"},e="disable track track_links track_forms register unregister get_property identify clear set_config get_config get_distinct_id track_pageview register_once track_with_tag time_event people.set people.unset people.delete_user".split(" "),f=0;f<e.length;f++)g(h,e[f]);b._i.push([a,c,d])},b.__SV=1.1,c=a.createElement("script"),c.type="text/javascript",c.charset="utf-8",c.async=!0,c.src="//w.cnzz.com/dplus.php?id=1262057985",d=a.getElementsByTagName("script")[0],d.parentNode.insertBefore(c,d)}}(document,window.dplus||[]),dplus.init("1262057985");</script> <link href="/statics//css/fans.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="/statics//js/swiper/swiper-3.4.2.min.css"> <script type="text/javascript" src="/statics//js/swiper/swiper-3.4.2.jquery.min.js"></script> <style type="text/css"> .kpjc .list .item .name span { color: #ffffff; font-size: 10px; text-transform: uppercase; display: inline-block; margin-left: 0.8em; position: relative; background: #ca0000; line-height: 1.8em; padding: 0 0.5em; border-radius: 0.9em; } .video-layer .container video { max-height:85vh; } </style> </head> <body> <link href="/statics/css/base_2023.css?v=2023505" rel="stylesheet" type="text/css"> <header class="header"> <div class="searchwraper"> <div class="search clearfix"> <div action="/search" method="get"> <input id="keyword" type="text" name='q' placeholder="站内搜索"><button id="searchbtn"></button> </div> <script> var action = '/search'; document.getElementById('searchbtn').onclick=function() { var dlform = document.createElement('form'); dlform.style = "display:none;"; dlform.method = 'get'; dlform.action = action; var hdnFilePath = document.createElement('input'); hdnFilePath.type = 'hidden'; hdnFilePath.name = 'q'; var kw = document.getElementById('keyword').value; hdnFilePath.value = kw; dlform.appendChild(hdnFilePath); document.body.appendChild(dlform); dlform.submit(); document.body.removeChild(dlform); } </script> </div> </div> </div> <style type="text/css"> .header nav .new:after { content: ""; position: absolute; width: 19px; height: 13px; background: url(/statics/images/new.png) no-repeat; top: 2px; right: 0; animation:binb 0.4s ease-in 0s infinite alternate; } @keyframes binb { 0% {top:2px;} 100% {top:-5px;} } </style> <nav> <a class="logo" href="/"></a> <ul class="yahei" id="nav"> <li><a href="/category/110">故宫动态</a></li> <li class="new"><a href="#">我要逛故宫</a><ul><i><em></em></i> <li><a href="/category/204">玩转手帐</a></li> <li><a href="/category/206">主题地图</a></li> <li><a href="/?i=routeopen">交互路线</a></li> <li><a href="/category/122">开放信息</a></li> </ul></li> <li><a href="#">上书房</a> <ul><i><em></em></i> <li><a href="/category/114">紫禁学堂</a></li> <li><a href="/category/115">故宫藏宝</a></li> <li><a href="/category/116">故宫小百科</a></li> </ul> </li> <li class="blank"> </li> <li class="new"><a href="#">视听馆</a> <ul><i><em></em></i> <li><a href="/category/180">紫禁城建筑的秘密</a></li> <li><a href="/category/203">科普剧场</a></li> </ul> </li> <li><a href="javascript:;">故宫大冒险</a> <ul><i><em></em></i> <li><a href="/category/113">微剧场</a></li> <li><a href="/category/113#gamezone">游戏</a></li> <li><a href="//young.dpm.org.cn/art/index">绘画大赛</a></li> <li><a href="/category/260">精彩壁纸</a></li> </ul> </li> <li class="new"><a href="/node/202">好物集市</a></li> <li class="search"><a href="javascript:;" title="站内搜索"></a></li> </ul> <a class="bell"></a> </nav> </header> <div class="kpjc-banner"> <div class="list"> <ul> <li style="background-image: url('/statics/images/v4/creative/images/img1920_2.png')"></li> </ul> </div> <div class="title"><img src="/statics/images/v4/creative/images/img360.png" alt=""></div> </div> <div class="kpjc" id="app"> <div class="icons"> <div class="ico ico-1"><img src="/statics/images/v4/creative/images/img313.png" alt=""></div> <div class="ico ico-2"><img src="/statics/images/v4/creative/images/img44.png" alt=""></div> <div class="ico ico-3"><img src="/statics/images/v4/creative/images/img104.png" alt=""></div> <div class="ico ico-4"><img src="/statics/images/v4/creative/images/img75_3.png" alt=""></div> <div class="ico ico-5"><img src="/statics/images/v4/creative/images/img101.png" alt=""></div> <div class="ico ico-6"><img src="/statics/images/v4/creative/images/img78.png" alt=""></div> <div class="ico ico-7"><img src="/statics/images/v4/creative/images/img153.png" alt=""></div> </div> <div class="wal" v-cloak> <div class="nav"> <ul> <li v-for="(item, index) in nav.list" :key="index"> <a href="javascript:" :class="{'on': index === nav.curr}" @click="handelNav(index)">{{item}}</a> </li> </ul> </div> <div class="list" v-loading="loading"> <ul> <li v-for="(item, index) in list" :key="index"> <div class="item" @click="handelItem(item)"> <div class="img"><img :src="item.img" alt=""></div> <div class="name">{{item.name}}<span v-show="item.isnew=='new'">new</span></div> </div> </li> </ul> </div> <div class="page-num" v-for="(item, index) in total" :key="index" v-if="index === nav.curr"> <el-pagination background layout="prev, pager, next" @current-change="pageChange($event, index)" :page-size="pageSize" :total="item"> </el-pagination> </div> </div> <div class="video-layer" :class="{'show': video.show}"> <div class="container"> <a href="javascript:" class="close" @click="video.show = false"><img src="/statics/images/v4/creative/images/close41.png" alt=""></a> <div class="img" v-if="video.show"> <video :src="video.src" controls ref="video"></video> </div> </div> </div> </div> <script src="/statics/js/vue.js"></script> <link rel="stylesheet" href="/statics/images/v4/mapdownload/css/el.css"> <script src="/statics/images/v4/mapdownload/js/el.js"></script> <script> function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 } new Vue({ el: '#app', data: { nav: { curr: 0, list: ['全部', '知识课堂', '故宫探珍','其他'] }, loading: false, totalList: [[],[],[],[]], list: [], total: [0, 0, 0, 0], pageSize: 12, video: { show: false, src: '' } }, mounted(){ const that = this this.loading = true $.ajax({ url: '/node/201?qtype=theaterlist', type: 'GET', data: {}, dataType: 'json', success: function(data) { const allList = [],//全部 ggtzList = [],//故宫探珍 zsktList = [],//知识课堂 otherList = []//其他 data.list.forEach(item=>{ allList.push(item) if(item.category === '故宫探珍'){ ggtzList.push(item) }else if(item.category === '知识课堂'){ zsktList.push(item) }else if(item.category === '其他'){ otherList.push(item) } }) that.total[0] = allList.length that.totalList[0] = _.chunk(allList, that.pageSize) that.total[1] = zsktList.length that.totalList[1] = _.chunk(zsktList, that.pageSize) that.total[2] = ggtzList.length that.totalList[2] = _.chunk(ggtzList, that.pageSize) that.total[3] = otherList.length that.totalList[3] = _.chunk(otherList, that.pageSize) that.getList() const id = getUrlParam('id') if(id){ that.getDetail(data.list, id) } }, error: function() { console.log('请求失败') } }) }, methods: { getList(i=0, j=0){ //模拟加载过程 this.loading = true setTimeout(()=>{ const list = this.totalList[i] this.list = list[j] this.loading = false this.$forceUpdate() }, 1000) }, handelNav(i){ this.nav.curr = i this.getList(i) }, pageChange(e, i){ this.getList(i, e-1) }, handelItem(item){ this.video.src = item.video this.video.show = true this.$nextTick(()=>{ this.$refs['video'].play() }) //// aplus_queue.push({ 'action':'aplus.record', 'arguments':['abbreviation_video_clk', 'CLK', { video_name: item.name, page_name: "abbreviation_home_page" //您当前页面的自定义页面编码 }] }); //// }, getDetail(list, id){ list.forEach(item=>{ if(item.id == id){ this.handelItem(item) } }) } } }) </script> <div class="masklayer totalPlayStop"></div> <div class="pop"> <a href="javascript:;" class="close totalPlayStop" title="关闭"></a> <div class="saudio paudio ajaxpaudio" data="0" title="朗读本段" style="right: 70px;top: 298px;display: none;"></div> <div class="popwraper"> <div class="ency"></div> <div class="encypic"></div> <div class="popcontent"> <h3></h3> <p></p> </div> <div class="more"><a href="/category/116" target="_blank">更多故宫小知识 ></a></div> </div> <script type="text/javascript"> $(function () { $.getJSON("/statics//data/ency.js", function (jdata) { $(".bell").click(function () { var cdt = jdata[Math.floor(Math.random() * (jdata.length))]; $(".pop .popwraper .encypic").html('<img src="/statics/images/v2/ency/' + cdt.bpic + '" />') $(".pop .popwraper h3").html(cdt.title) $(".pop .popwraper p").html(cdt.content); $(".masklayer").show(); $(".pop").fadeIn("false"); $(".pop .popcontent").jScrollPane(); $(".masklayer").one("click", function () { $(".pop").hide(); $(".masklayer").hide() }) }) }) }) </script> </div> <footer class="footer" style='position:relative;'> <div class="mainwrap"> <div class="cr"> <div class="footerhouse"></div> <div class="relink">故宫其他站点 <ul> <li><a href="http://www.dpm.org.cn/" target="_blank">中文</a></li> <li><a href="http://intl.dpm.org.cn/index.html?l=en" target="_blank">English</a></li> <li><a href="http://intl.dpm.org.cn/index.html?l=es" target="_blank">Español</a></li> <li><a href="http://intl.dpm.org.cn/index.html?l=ru" target="_blank">Русский язык </a></li> <li><a href="http://intl.dpm.org.cn/index.html?l=jp" target="_blank">日本語</a></li> <li><a href="http://intl.dpm.org.cn/index.html?l=fr" target="_blank">Français</a></li> <li><a href="https://www.dpm.org.cn/Events.html#hd1-3" target="_blank">故宫博物院教育中心</a></li> <li><a href="https://www.dpm.org.cn/gugongforum.html" target="_blank">故宫讲坛</a></li> <li><a href="https://digicol.dpm.org.cn/" target="_blank">数字文物库</a></li> <li><a href="https://www.dpm.org.cn/shuziduobaoge/html.html" target="_blank">数字多宝阁</a></li> <li><a href="https://pano.dpm.org.cn/gugong_pano/index.html" target="_blank">全景故宫</a></li> <li><a href="http://v.dpm.org.cn/" target="_blank">V故宫</a></li> </ul> </div> <div class="link"> · <a href="/article/1072" target="_blank">隐私政策</a> · <a href="/article/1073" target="_blank">联系我们</a> · <a href="/article/1074" target="_blank">版权声明</a> · </div> <div class="copyrights">© 2001-2024 故宫博物院 <a href='http://www.beian.miit.gov.cn' target='_blank' style='color:#d2615f'>京ICP备05067311号-1</a> 网站建设：<a href='mailto:tsingstone@163.com' style='color:#d2615f;text-decoration:underline'>清石信息</a>  </div> </div> </div> </footer> <div style='display:none;'></div>  <style type="text/css"> @font-face { font-family: "TIMES"; src: url("/statics/images/v4/calendar/css/TIMES.TTF") format("truetype"); font-weight: normal; font-style: normal; } a.promotion-date { display: block; background: url(/statics/images/v4/calendar2025/images/img91.png) center no-repeat; width: 91px; height: 140px; text-align: center; color: #fff; font-size: 14px; padding-top: 40px; box-sizing: border-box; font-family: 'TIMES'; } .promotion-date:hover { color: #ffff00; } .promotion-date span { font-size: 36px; } .promotion-date b { display: block; position: absolute; right: 33px; top: -24px; font-size: 15px; background: rgba(0, 0, 0, 0.3); color: #fff; font-weight: normal; width: 22px; height: 22px; border-radius: 50%; text-align: center; line-height: 22px; } </style> <div id="rightscrollnav"> <a href="/category/352" class="promotion-date"> <b>×</b> <span>24</span> <div>2025/02</div> </a> <ul> <li class="returntop"></li> <li class="focusus" title="关注我们"> <div><i><em></em></i><span class="weixin">官方微博</span><span class="weibo">官方微信</span></div> </li> <li class="share" title="分享"></li> </ul> </div> <script type="text/javascript" charset="utf-8"> $(function () { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "/statics//js/buttonLite.js#uuid=&style=-1"; document.body.appendChild(script); }) </script> </body> </html>

CINXE.COM

科普剧场 / 故宫青少版网站