故宫文创 / 故宫青少版网站

<!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> </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><style type="text/css"> .ggwc-banner { max-width: 1920px; margin: auto; } .outlink {text-align: center;margin-bottom: 200px;margin-top: -100px;} .outlink .ulink {display: inline-block;} .outlink .ulink li{ width:auto; margin:0 50px 25px 0;} .outlink .ulink li a{ display:block; border:1px solid #d5d5d5; width:168px; height:40px; line-height:40px; border-radius:25px; position:relative;} .outlink .ulink li a img{ border-radius:0; height:auto; width:auto; position:absolute;top:0; left:-15px; box-shadow:none} .outlink .ulink li a span{ float:left; color:#5a5a5a; font-size:14px; padding:0; margin-left:45px;} .outlink .ulink li a:hover span{ color:#e10200;} .outlink .ulink li a:hover .left { animation: gogo 0.5s linear 0s infinite alternate; -webkit-animation: gogo 0.5s linear 0s infinite alternate; -o-animation: gogo 0.5s linear 0s infinite alternate; -moz-animation: gogo 0.5s linear 0s infinite alternate; } @keyframes gogo { 0% {transform:translate(0px,0); } 50% {transform:translate(-5px,0);} 100% {transform:translate(5px,0);} } @-moz-keyframes gogo { 0% {transform:translate(0px,0); } 50% {transform:translate(-5px,0);} 100% {transform:translate(5px,0);} } @-webkit-keyframes gogo { 0% {transform:translate(0px,0); } 50% {transform:translate(-5px,0);} 100% {transform:translate(5px,0);} } @-o-keyframes gogo { 0% {transform:translate(0px,0); } 50% {transform:translate(-5px,0);} 100% {transform:translate(5px,0);} } </style> <div class="ggwc-banner"> <div class="list"> <ul class="swiper-wrapper"> <li class="swiper-slide" style="background-image: url('/statics/images/v4/creative/images/img1920.png')"></li> </ul> </div> <div class="arrow"> <a href="" class="prev"><img src="/statics/images/v4/creative/images/prev24.png" alt=""></a> <a href="" class="next"><img src="/statics/images/v4/creative/images/next24.png" alt=""></a> </div> <div class="ren1"><img src="/statics/images/v4/creative/images/ren1.png" alt=""></div> <div class="ren2"><img src="/statics/images/v4/creative/images/ren2.png" alt=""></div> <div class="rabbit"><img src="/statics/images/v4/creative/images/img139.png" alt=""></div> <div class="title"><img src="/statics/images/v4/creative/images/ggwc-title.png" alt=""></div> </div> <script> $(function (){ var dom = $('.ggwc-banner') var swiper = new Swiper(dom.find('.list'), { effect : 'fade', fade: { crossFade: true, }, initialSlide: 0, loop: true, autoplay: 5000, autoplayDisableOnInteraction: false, paginationClickable: true, speed: 600, slidesPerView: 1 }) dom.find('.prev').click(function (){ swiper.slidePrev() return false }) dom.find('.next').click(function (){ swiper.slideNext() return false }) }) </script> <div style="width: 100%; overflow: hidden; position: relative"> <div class="ggwc" id="app"> <div class="icons"> <div class="ico ico-1"><img src="/statics/images/v4/creative/images/img95.png" alt=""></div> <div class="ico ico-2"><img src="/statics/images/v4/creative/images/img75.png" alt=""></div> <div class="ico ico-3"><img src="/statics/images/v4/creative/images/img137.png" alt=""></div> <div class="ico ico-4"><img src="/statics/images/v4/creative/images/img97.png" alt=""></div> <div class="ico ico-5"><img src="/statics/images/v4/creative/images/img88.png" alt=""></div> <div class="ico ico-6"><img src="/statics/images/v4/creative/images/img93.png" alt=""></div> <div class="ico ico-7"><img src="/statics/images/v4/creative/images/img45.png" alt=""></div> <div class="ico ico-8"><img src="/statics/images/v4/creative/images/img80.png" alt=""></div> <div class="ico ico-9"><img src="/statics/images/v4/creative/images/img75_2.png" alt=""></div> <div class="ico ico-10"><img src="/statics/images/v4/creative/images/img97_2.png" alt=""></div> <div class="ico ico-11"><img src="/statics/images/v4/creative/images/img134.png" alt=""></div> <div class="ico ico-12"><img src="/statics/images/v4/creative/images/img64.png" alt=""></div> <div class="ico ico-13"><img src="/statics/images/v4/creative/images/img45.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"> <a href="javascript:" @click="handelItem(item)"> <div class="img"><img :src="item.img" alt=""></div> <div class="name">{{item.name}}</div> </a> </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 class="outlink"> <div style="margin-bottom: 40px;"><img src="/statics/images/line.png"></div> <ul class="clearfix ulink"> <li class="left"> <a href="https://gugong1925.taobao.com/" class="clearfix" target="_blank"><div class="left"><img src="/statics/images/gb/icon-1.png"></div> <span>故宫淘宝</span></a> </li> <li class="left"> <a href="https://ggcbs.tmall.com" class="clearfix" target="_blank"><div class="left"><img src="/statics/images/gb/icon-3.png"></div> <span>故宫出版旗舰店</span></a> </li> <li class="left"> <a href="https://palacemuseum.world.tmall.com/" class="clearfix" target="_blank"><div class="left"><img src="/statics/images/gb/icon-4.png"></div> <span>故宫文创旗舰店</span></a> </li> </ul> </div> </div> <div class="ggwc-layer" :class="{'show': detail.show}"> <div class="container"> <a href="javascript:" class="close" @click="detail.show = false"><img src="/statics/images/v4/creative/images/close41.png" alt=""></a> <div class="container2"> <div class="img"><img :src="detail.img" alt=""></div> <div class="name">{{detail.name}}</div> <div class="title"> <h5>简介</h5> </div> <div class="content" v-html="detail.content"></div> <div class="btn" style="display: none;"><a :href="detail.link" target="_blank" v-if="detail.name!='故宫日历2024年儿童版'">购买</a></div> </div> </div> </div> </div> </div> <script src="/statics/js/vue.js"></script> <script src="/statics/js/lodash.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], pageSize: 12, detail: { show: false, img: '', name: '', content: '', link: '' } }, mounted(){ const that = this this.loading = true $.ajax({ url: '/node/201?qtype=creativelist', type: 'GET', data: {}, dataType: 'json', success: function(data) { const allList = [],//全部 bookList = [],//图书 wcList = []//文创 data.list.forEach(item=>{ allList.push(item) if(item.category === '图书'){ bookList.push(item) }else if(item.category === '文创'){ wcList.push(item) } }) that.total[0] = allList.length that.totalList[0] = _.chunk(allList, that.pageSize) that.total[1] = bookList.length that.totalList[1] = _.chunk(bookList, that.pageSize) that.total[2] = wcList.length that.totalList[2] = _.chunk(wcList, 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.detail.img = item.img this.detail.name = item.name this.detail.content = item.intro this.detail.link = item.link this.detail.show = true //// aplus_queue.push({ 'action':'aplus.record', 'arguments':['goods_buy_clk', 'CLK', { goods_name: item.name, page_name: "goods_list_page" //您当前页面的自定义页面编码 }] }); //// }, getDetail(list, id){ list.forEach(item=>{ if(item.id == id){ this.handelItem(item) } }) } } }) $(function(){ $(".ggwc-layer .btn a").click(function(){ aplus_queue.push({ 'action':'aplus.record', 'arguments':['goods_buy_clk', 'CLK', { goods_name: $(this).parent().parent().find(".name").text(), button_name:"购买", page_name: "goods_list_page" //您当前页面的自定义页面编码 }] }); }) }) </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

故宫文创 / 故宫青少版网站