腾讯开心鼠英语ABCmouse

<!DOCTYPE html> <html class="" style=""> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="shenma-site-verification" content="8c37872b0c293d31eb8cb3085b63a548_1574067633"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="x5-pagetype" content="webapp"> <title>腾讯开心鼠英语ABCmouse</title> <base href="https://abcmouse.qq.com/"> <link rel="preconnect" href='https://sas.qq.com'> <link rel="preconnect" href='https://pingjs.qq.com'> <link rel="preconnect" href='https://pingtas.qq.com'> <meta name="keywords" content="腾讯开心鼠英语ABCmouse,腾讯出品,少儿英语学习,少儿英语教育,少儿英语培训,儿童英语在线,英语在线学习"> <meta name="description" itemprop="description" content="腾讯开心鼠英语ABCmouse是美国知名少儿英语学习培训品牌，专注3-8岁少儿英语教育。由权威团队打造，腾讯独家代理。通过科学合理的课程体系、生动有趣的教学方式、沉浸式的学习环境，让孩子爱上英语学习。包括多种互动式教学方法，以及安全便捷的家长中心，让家长轻松把控学习进度。针对中国孩子精心制作的包括10,000个英语词汇，7000个纯正发音的学习活动、口语跟读、听说练习、动画、歌曲、绘本等丰富多彩的学习内容。" /> <link rel="canonical" href="https://abcmouse.qq.com/"> <meta name="applicable-device" content="pc"> <meta http-equiv="x-dns-prefetch-control" content="on"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" /> <meta baidu-gxt-verify-token="bb305f5412e9bf90ae1d2e22beed0d31"> <meta itemprop="name" content="腾讯开心鼠英语ABCmouse - 少儿英语学习,儿童英语在线"> <meta itemprop="description" content="腾讯开心鼠英语ABCmouse是美国知名少儿英语学习培训品牌，专注3-8岁少儿英语教育。由权威团队打造，腾讯独家代理。通过科学合理的课程体系、生动有趣的教学方式、沉浸式的学习环境，让孩子爱上英语学习。包括多种互动式教学方法，以及安全便捷的家长中心，让家长轻松把控学习进度。针对中国孩子精心制作的包括10,000个英语词汇，7000个纯正发音的学习活动、口语跟读、听说练习、动画、歌曲、绘本等丰富多彩的学习内容。"> <meta itemprop="image" content="https://qzonestyle.gtimg.cn/touch/proj-abcmouse/images/homepc/abcmouse-share.jpg"> <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="320" /> <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/> <meta name="x5-fast-scroller" content="disable" /> <meta name="tags" content="sea2.1" /> <link rel="Shortcut Icon" href="//qzonestyle.gtimg.cn/touch/proj-abcmouse/html/favicon.ico?max_age=31536000" type="image/x-icon" /> <script> if(!window.navigator) window.navigator = {}; </script><script data-content="envData"> window.imgcacheProxy = false; window.imgcacheDomain = 'qzonestyle.gtimg.cn'; window.isAlpha = false; window.jsHttps = true; window.jsCrossOrigin = false; window.isH5Test = false; window.fixPicUrl = function fixPicUrlFun(url) { if (!url) { return ''; } if (url.match(/^(http:)?\/\/qzonestyle/)) { return url.replace(/^http:/, ''); } else if (url.match(/^(http:)?\/\/imgcache\.qq\.com\//)) { return url.replace(/^http:/, ''); } else if (url.match(/^(http:)?\/\/q.qlogo.cn\//)) { return url.replace(/^http:/, ''); } else if (url.match(/^http:\/\/i.gtimg.cn/)) { return url.replace(/^http:/, ''); } else if (url.match(/^http:\/\/(.*).qpic.cn\//)) { return url.replace(/^http:/, ''); } else if (url.match(/^http:\/\/a[0-9].qpic.cn\//)) { return url.replace(/^http:/, ''); } else if (url.match(/^(http:)?\/\/qlogo[0-9].store.qq.com\//)) { return url.replace(/^http:/, ''); } else if (url.match(/^http:\/\/(.*).photo.store.qq.com\//)) { return url.replace(/^http:/, ''); } else if (url.match(/^http:\/\/group.store.qq.com\//)) { return url.replace(/^http:/, ''); } else if (url.match(/^http:\/\//) && !/^http:\/\/proxy\.gtimg\.cn\/tx_tls_gate=/.test(url)) { return '//proxy.gtimg.cn/tx_tls_gate=' + url.replace(/^http:\/\//, ''); } else if (url.match(/^\/\//) && !/^\/\/proxy\.gtimg\.cn\/tx_tls_gate=/.test(url)) { return '//proxy.gtimg.cn/tx_tls_gate=' + url.replace(/^\/\//, ''); } else { return url; } }; HYB = { loadTimes: {}, jsHttps: window.jsHttps, imgcache: 'qzonestyle.gtimg.cn', jsVersion : '1', cssVersion : '1', _domains: { main: 'abcmouse.qzone.qq.com', imgcache: 'qzonestyle.gtimg.cn', jsVersion : '1', cssVersion : '1' }, supportSilent: false, devMode: false }; </script>  <script data-content="HYBData"> HYB.offline = 'false'; HYB.userInfo = {"openid":""}; HYB.reportConfig = {}; HYB.browserInfo = {"client":"","platform":"","qua":"","quaVersion":"","os":{"iPad":null,"iPhone":null,"android":null,"wp":null},"modelTag":"","model":"","display":"","transparentNav":false}; HYB.requestModule = []</script>  <script> HYB.loadTimes.startLoad = +new Date(); </script> <script data-content="checkIframe"> (function() { try { if (parent != self && (parent.document.domain != document.domain || (document.referrer && !/^http(s)?:\/\/[.\w-]+\.(qzone|weishi)\.qq\.com\//i.test(document.referrer)))) { throw new Error("can't be iframed"); } } catch(e) { window.open(location.href, "_top"); } })(); </script> <script data-content="habo"> (function() { var ua = navigator.userAgent || ''; var qzoneArray = /Qzone\/(\S+)/.exec(ua), qqArray = /V\S+_\S+_\S+_\S+_\S+_\S+_\S+/.exec(ua), weiyunArray = /Weiyun\/(\S+)/.exec(ua); var apnArray = /NetType\/(\S+)/.exec(ua); var uinArray = /uin=o0*(\S+);/.exec(document.cookie || ''); var pathArray = /^\/[^\/]+?\/[^\/]+/.exec(location.pathname || ''); var qua = qzoneArray && qzoneArray[1] || qqArray && qqArray[0] || weiyunArray && weiyunArray[1] || ''; var apn = apnArray && apnArray[1]; var uin = uinArray && uinArray[1]; var collector = [], collectorTime = 2000,//2000ms时间间隔内的请求合并上报 collectorTimer; window.reportHaboGlobal = function(code, appid, command) { command = command || ''; if (command[0] === '/') { command = 'hybrid' + command + (pathArray && pathArray[0]);; } var data = { releaseversion: qua, apn: apn, touin: uin, key: 'appid,commandid,resultcode' }; collector.push([appid || '1000361', command, code]); var url = 'https://h5.qzone.qq.com/wspeed.qq.com/w.cgi'; collectorTimer && clearTimeout(collectorTimer); collectorTimer = setTimeout(report, collectorTime); function report() { var params = []; for (var key in data) { if (data.hasOwnProperty(key)) { params.push(key + '=' + encodeURIComponent(data[key])); } } if (collector && collector.length) { var i = 0; while (collector.length) { if (params.join('&').length > 1000) { break; } var c = collector.shift(); params.push([i + 1, 1].join('_') + '=' + c[0]); params.push([i + 1, 2].join('_') + '=' + c[1]); params.push([i + 1, 3].join('_') + '=' + c[2]); i++; } } params.push('rv=' + Math.random()); new Image().src = url + '?' + params.join('&'); i > 0 && collector.length && setTimeout(report, 1000); } }; })(); </script> <script data-content="jserror"> (function() { var toUrlParam = function(data) { var arr = []; for (var key in data) { if (data.hasOwnProperty(key)) { if(data[key] !== '' && data[key] !== undefined) { arr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } } } return arr.join('&'); }; var getCommand = function(a,b){b=b.replace(/^\//,"");!b||0>=b.length?b=a:(b=b.replace("qzone/hybrid/module/",""),b=b.replace("qzone/hybrid/",""),b=b.replace(/^([^\/]+\/[^\/]+)(\/.*|$)/,"$1"));return"hybrid/"+b}; var send = function(data, callback, onTimeout) { try { onTimeout && setTimeout(function() { callback = null; onTimeout && onTimeout(); }, 3000); data = toUrlParam(data); var url = 'https://h5.qzone.qq.com/log/post/script/error/' + command; var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : {}; if ('withCredentials' in xhr) { xhr.open('post', url, true); xhr.withCredentials = true; xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200) { var o = JSON.parse(xhr.responseText); onTimeout = null; callback && callback(o); } }; try{xhr.send(data);}catch(e){}; } else if ('XDomainRequest' in window) { var xdr = new XDomainRequest(); xdr.open('post', url); xdr.onload = function() { var o; window.JSON ? (o = JSON.parse(xdr.responseText)) : eval('o = ' + xdr.responseText); onTimeout = null; callback && callback(o); }; setTimeout(function() { try{xdr.send(data);}catch(e){}; }, 0); } } catch(e) {} }; var appid = '1000361', maxJsErrorCount = parseInt(''), maxJsErrorCount = isNaN(maxJsErrorCount) ? 5 : maxJsErrorCount, jsErrorCount = 0, command = getCommand(location.host, location.pathname), reportHabo = 1, queue = [], isReporting = false, hasReportPv = false; command = 'abcmouse_web/all_pages'; var report = function() { var data = queue.shift(); if (!data) { isReporting = false; return; } isReporting = true; data.reportHabo = reportHabo; reportHabo = 0; send(data, function(o) { if (o && o.code == 0 && o.data && o.data.result != 1) { reportHabo = data.reportHabo; } setTimeout(report, 1000); }, function() { report(); }); }; window.reportJsError = function(data) { reportPv(); if (jsErrorCount++ >= maxJsErrorCount) {return;} queue.push(data); !isReporting && report(); }; var onError = function(event) { var data = { appid: appid, error: event.message, stack: event.error && event.error.stack || '', url: location.href, scriptUrl: event.filename, lineNumber: event.lineno, columnNumber: event.colno }; var fn = window.beforeJsErrorReport; if (typeof fn === 'function' && false === fn(data)) { return; } window.reportJsError(data); }; var reportPv = function() { if (hasReportPv) {return;} window.reportHaboGlobal && reportHaboGlobal(0, appid, command); hasReportPv = true; }; if (window.addEventListener) { window.addEventListener('error', onError); window.addEventListener('load', reportPv); } else if (window.attachEvent) { window.attachEvent('onerror', onError); window.attachEvent('onload', reportPv); } else { window.onerror = onError; setTimeout(reportPv, 3000); } window.listenError = true; })(); </script> <style data-url="//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/base.css"> * { margin: 0; padding: 0; } html, body { font-family: /* 西文 */ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, /* 中文 */ "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif; background: #fff; font-size: 12px; color: #000; } ul li { list-style: none; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; color: #000; text-decoration: none; } input { border: none; outline: none; background: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; } button { outline: none; border: none; background: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: none; cursor: pointer; } input::-webkit-input-placeholder { color: #ccc; } input:-ms-input-placeholder { color: #ccc; } input::placeholder { color: #ccc; } .clearfix { display: block; clear: both; content: ''; zoom: 1; overflow: hidden; } .hide { display: none!important; } /* 公共品牌btn样式 */ .brand-yellow-btn, .brand-blue-btn { position: relative; width: calc(100vw - 60px); height: 55px; line-height: 55px; display: block; font-size: 20px; text-align: center; font-weight: 500; margin: 25px auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; overflow: hidden; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF433), to(#FFE000)); background-image: linear-gradient(-180deg, #FFF433 0%, #FFE000 100%); -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.06); border-radius: 55px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .brand-yellow-btn:hover{ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF65B), to(#FFE632)); background-image: linear-gradient(-180deg, #FFF65B 0%, #FFE632 100%); } .brand-yellow-btn:visited, .brand-yellow-btn:active { background-image: -webkit-gradient(linear, left top, left bottom, from(#FFE000), to(#FFE000)); background-image: linear-gradient(-180deg, #FFE000 0%, #FFE000 100%); background-color: #FFE000; color: rgba(0, 0, 0, 0.6); color: #000 \9; /* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); */ } .brand-yellow-btn.disabled { background-image: -webkit-gradient(linear, left top, left bottom, from(#FFE000), to(#FFE000)); background-image: linear-gradient(-180deg, #FFE000 0%, #FFE000 100%); color: rgba(0, 0, 0, 0.1); color: #000 \9; /* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); */ } .brand-blue-btn, .brand-blue-btn:visited { background: -webkit-gradient( linear, left top, left bottom, from(#5dd7fa), to(#5dc1fb)); background: linear-gradient( to bottom, #5dd7fa, #5dc1fb); color: #fff; } .brand-blue-btn.disabled { color: rgba(255, 255, 255, 0.3); color: #fff \9; /* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6000000,endColorstr=#E6000000); */ } .brand-blue-btn:active, .brand-blue-btn:hover { background: #5dc1fb; color: rgba(255, 255, 255, 0.7); color: #fff \9; /* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3000000,endColorstr=#B3000000); */ } /* 公共底部 ABCmouse logo */ .mod-logo { margin: 50px auto 30px; width: 110px; height: 25px; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/abc-logo.png'); background-size: cover; } /* 头像公共样式 */ .avatar { position: relative; cursor: pointer; background-size: cover; background-repeat: repeat; overflow: hidden; background-color: #fff466; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .avatar-100 { width: 100px; height: 100px; border-radius: 100%; margin-bottom: 20px; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/avatar.png'); } .avatar-80 { width: 80px; height: 80px; border-radius: 100%; margin-bottom: 20px; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/avatar.png'); } .avatar-60 { width: 60px; height: 60px; border-radius: 100%; margin-right: 15px; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/avatar.png'); } .avatar-50 { width: 50px; height: 50px; border-radius: 100%; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/avatar.png'); } .avatar-45 { width: 45px; height: 45px; border-radius: 100%; margin-right: 10px; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/avatar.png'); } .avatar-40 { width: 40px; height: 40px; border-radius: 100%; margin-right: 10px; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/avatar.png'); } /* 口语秀公共 tips 样式 START */ .common-tips { position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100vw; height: 50px; top: 50%; margin-top: -25px; left: 0; z-index: 3; } .common-tips .info, .common-tips .desc { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 16px; text-align: center; color: #fff; font-size: 14px; border-radius: 5px; background: rgba(0, 0, 0, 0.6); height: 50px; line-height: 50px; text-align: left; } .common-tips .icon { width: 24px; height: 24px; /*margin-right: 20px;*/ margin: 0 20px; } .common-tips .icon-fail { background: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/icon-tips-fail.png') 0 0 no-repeat; background-size: 24px 24px; } .common-tips .icon-success { background: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/icon-tips-success.png') 0 0 no-repeat; background-size: 24px 24px; } .common-tips.hide { display: none; } /* 口语秀公共 tips 样式 END */ /* 公共弹窗组件 START */ .mod-popup { -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); padding: 0 33px; z-index: 1000; } .mod-popup .popup { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; height: auto; background: #fff; border-radius: 20px; padding: 20px 20px 0; } .mod-popup .popup .title { font-size: 20px; text-align: center; line-height: 1.5; } .mod-popup .popup .close-btn{ position: absolute; bottom: -60px; width: 42px; height: 42px; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/slice/forwarding/close_btn@2x.png'); background-size: cover; } .mod-popup .popup .desc { font-size: 16px; margin: 20px 0; word-wrap: break-word; word-break: break-all; } .mod-popup .popup .desc-item{ display: flex; align-items: flex-start; justify-content: center; font-size: 14px; margin-bottom: 25px; } .mod-popup .popup .desc-item:last-child{ margin-bottom: 0; } .mod-popup .popup .order{ display: block; margin-right: 15px; word-break: normal; } .mod-popup .popup .focus{ color: #FF5533; } .mod-popup .popup .desc .username{ word-wrap: break-word; word-break: break-all; } .mod-popup .popup .btns { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 50px; } .mod-popup .popup .btn { width: 50%; font-size: 18px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .mod-popup .popup .cancel-btn { border-right: 1px #eee solid; } /* 公共弹窗组件 END */ /* 公共空白占位样式 START */ .mod-empty { text-align: center; } .mod-empty .empty { margin: 30px auto 15px; width: 100px; height: 113px; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/empty.png'); background-size: cover; } .mod-empty .desc { width: 300px; margin: 0 auto; font-size: 16px; } /* 公共空白占位样式 END */ /* 绑定点击去黑框 */ .avoid-tap-highlight{ cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .disable-select{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select: none; } /* 公共arrow组件 */ .pseudo-arrow::after { position: absolute; content: ''; width: 5px; height: 5px; margin-top: 7px; margin-left: 3px; border-right: 1.5px solid #fff; border-top: 1.5px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* 公共局部loading组件 */ .loading-gif { width: 100%; height: 40px; background: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/loading.gif') 50% 50% no-repeat; background-size: 20px 20px; } /* 视频播放弹层 start */ .mod-video{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.85); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 5; } .mod-video video{ width: 100vw; height: 56.2vw; background-color: #fff; } .mod-video .close-btn{ position: absolute; right: 20px; top: 20px; content: ''; width: 20px; height: 20px; background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/homemb/close-btn@2x.png'); background-size: 20px; border: none; outline: none; cursor: pointer; padding: 0; background-color: transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 视频播放弹层 end */ /* 公共全屏laoding组件 */ .mod-loading { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); background: rgba(255, 255, 255, 1); z-index: 6; } .mod-loading.hide { display: none; } .mod-loading .shape { width: 20px; height: 20px; margin: 0 10px; } /* 元素动画间隔是10帧 */ /* rotate的动画一定要跟元素本身，才可以自转。不能在外层包裹的div去做ratate的动画 */ .mod-loading .shape-triangle { background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/loading-triangle.png'); background-size: cover; -webkit-animation: shape-rotate 1.17s -0.86s linear infinite; animation: shape-rotate 1.17s -0.86s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } .mod-loading .shape-square { background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/loading-square.png'); background-size: cover; -webkit-animation: shape-rotate 1.17s -0.57s linear infinite; animation: shape-rotate 1.17s -0.57s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } .mod-loading .shape-circle { background-image: url(//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/'../images/common/loading-round.png'); background-size: cover; -webkit-animation: shape-rotate 1.17s -0.29s linear infinite; animation: shape-rotate 1.17s -0.29s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } .mod-loading .shape-scale.triangle { -webkit-animation: shape-scale 1.17s -0.86s linear infinite; animation: shape-scale 1.17s -0.86s linear infinite; -webkit-transform-origin: center bottom; transform-origin: center bottom; } .mod-loading .shape-scale.square { -webkit-animation: shape-scale 1.17s -0.57s linear infinite; animation: shape-scale 1.17s -0.57s linear infinite; -webkit-transform-origin: center bottom; transform-origin: center bottom; } .mod-loading .shape-scale.circle { -webkit-animation: shape-scale 1.17s -0.29s linear infinite; animation: shape-scale 1.17s -0.29s linear infinite; -webkit-transform-origin: center bottom; transform-origin: center bottom; } .mod-loading .triangle .shape-trans { -webkit-animation: shape-trans 1.17s -0.86s linear infinite; animation: shape-trans 1.17s -0.86s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } .mod-loading .square .shape-trans { -webkit-animation: shape-trans 1.17s -0.57s linear infinite; animation: shape-trans 1.17s -0.57s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } .mod-loading .circle .shape-trans { -webkit-animation: shape-trans 1.17s -0.29s linear infinite; animation: shape-trans 1.17s -0.29s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } /* 30帧/s */ @-webkit-keyframes shape-trans { 0% { -webkit-transform: translate3d(0,0,0); } /* 第3帧 */ 8.57% { -webkit-transform: translate3d(0,3px,0); } /* 第14帧 */ 40% { -webkit-transform: translate3d(0,-20px,0); } /* 第22帧 */ 62.86% { -webkit-transform: translate3d(0,3px,0); } /* 第25帧 */ 71.43% { -webkit-transform: translate3d(0,0,0); } 100% { -webkit-transform: translate3d(0,0,0); } } @keyframes shape-trans { 0% { transform: translate3d(0,0,0); } /* 第3帧 */ 8.57% { transform: translate3d(0,3px,0); } /* 第14帧 */ 40% { transform: translate3d(0,-20px,0); } /* 第22帧 */ 62.86% { transform: translate3d(0,3px,0); } /* 第25帧 */ 71.43% { transform: translate3d(0,0,0); } 100% { transform: translate3d(0,0,0); } } @-webkit-keyframes shape-rotate { 0% { -webkit-transform: rotate(0deg); } /* 第3帧 */ 8.57% { -webkit-transform: rotate(0deg); } /* 第8帧 */ 22.86% { -webkit-transform: rotate(30deg); } /* 第14帧 */ 40% { -webkit-transform: rotate(180deg); } /* 第19帧 */ 54.29% { -webkit-transform: rotate(350deg); } /* 第22帧 */ 62.86% { -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes shape-rotate { 0% { transform: rotate(0deg); } /* 第3帧 */ 8.57% { transform: rotate(0deg); } /* 第8帧 */ 22.86% { transform: rotate(30deg); } /* 第14帧 */ 40% { transform: rotate(180deg); } /* 第19帧 */ 54.29% { transform: rotate(350deg); } /* 第22帧 */ 62.86% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes shape-scale { 0% { -webkit-transform: scale(1, 1); } /* 第3帧 10% */ /* 开始旋转，位移开始变化。 */ 8.57% { -webkit-transform: scale(1, 0.8); } /* 第8帧 26.67%*/ 22.86% { -webkit-transform: scale(1, 1.2); } /* 第14帧 46.67*/ /* 位移维持在最高位置，并且旋转 */ 40% { -webkit-transform: scale(1, 1); } /* 第19帧 63.33*/ /* 开始下落，位移开始变化 */ 54.29% { -webkit-transform: scale(1, 1); } /* 第22帧 73.33*/ 62.86% { -webkit-transform: scale(1, 0.8); } /* 第25帧 83.33*/ 71.43% { -webkit-transform: scale(1, 1); } 100% { -webkit-transform: scale(1, 1); } } @keyframes shape-scale { 0% { transform: scale(1, 1); } /* 第3帧 10% */ /* 开始旋转，位移开始变化。 */ 8.57% { transform: scale(1, 0.8); } /* 第8帧 26.67%*/ 22.86% { transform: scale(1, 1.2); } /* 第14帧 46.67*/ /* 位移维持在最高位置，并且旋转 */ 40% { transform: scale(1, 1); } /* 第19帧 63.33*/ /* 开始下落，位移开始变化 */ 54.29% { transform: scale(1, 1); } /* 第22帧 73.33*/ 62.86% { transform: scale(1, 0.8); } /* 第25帧 83.33*/ 71.43% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } </style><style data-url="//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/index.css"> * { -webkit-box-sizing: border-box; box-sizing: border-box; } .wrapper { width: 100vw; overflow-x: hidden; } .header-block { background-image: linear-gradient(180deg, #FFD333 52%, #FCAE25 100%); } .modules { border: 0 none; display: flex; flex-direction: column; align-items: center; width: 100vw; overflow-x: hidden; } .section .bg-orange { background: #ffd333; } /* 左右加上引号 */ .tt--quotation { display: flex; position: relative; align-items: flex-start; justify-content: center; font-size: calc( 48 / 1920 * 100vw); line-height: 2; font-weight: bold; } .tt--quotation::before, .tt--quotation::after { content: "“"; font-size: calc(75 / 1920 * 100vw); line-height: 1; font-weight: bold; color: #ffae0d; position: relative; top: 1.6667vw; font-family: sans-serif,Arial,Helvetica; } .tt--quotation::before { left: -0.8vw; } .tt--quotation::after { content: "”"; right: -0.8vw; } .bg-orange .tt--quotation, .tt--orange { color: #4A1515; } .block-tt { font-size: calc( 24 / 1920 * 100vw); text-align: center; } .bg-orange .block-tt { color: #4A1515; position: relative; z-index: 10; } .feature-list { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 4vw; } .feature-list .feature-item { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; } .feature-list .feature-item .item-icon { width: 100%; } .feature-list .feature-item .item-des { color: #777; font-size: calc(16 / 1920 * 100vw); } .feature-list .feature-item .item-tt { position: relative; font-weight: bold; margin-bottom: 5px; } .feature-list .feature-item .item-tt label{ position: relative; z-index: 10; } .feature-list .feature-item .item-tt::before { content: ''; position: absolute; left: 0px; bottom: 0px; right: 0px; height: calc( 20 / 1920 * 100vw); background: #FFD333; } img.full-width { width: 100vw; height: auto; border: 0 none; } /** 视频播放 start **/ .video-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.85); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 100; } .video-container video { width: 100vmin; /* height: 56.2vw; background-color: #fff; */ } /** 视频播放 end **/ @-webkit-keyframes slideDown { 0% { top: -100%; } 100% { top: 0; } } .f { visibility: hidden; } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .fadeInUpQueue { visibility: visible; } .fadeInUpQueue .queue-item { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .fadeInUpQueue .queue-item:nth-of-type(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .fadeInUpQueue .queue-item:nth-of-type(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .fadeInUpQueue .queue-item:nth-of-type(4) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .fadeInUpQueue .queue-item:nth-of-type(5) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .fadeInUpQueue .queue-item:nth-of-type(6) { -webkit-animation-delay: 0.8s; animation-delay: 1s; } @-webkit-keyframes fadeInUp { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInDown { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInLeft { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(40px, 0, 0); transform: translate3d(40px, 0, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(40px, 0, 0); transform: translate3d(40px, 0, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInLeftTop { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(20px, 20px, 0); transform: translate3d(20px, 20px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftTop { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(20px, 20px, 0); transform: translate3d(20px, 20px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightTop { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(20px, -20px, 0); transform: translate3d(20px, -20px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInRightTop { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(20px, -20px, 0); transform: translate3d(20px, -20px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBottom { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(-20px, -20px, 0); transform: translate3d(-20px, -20px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInLeftBottom { from { opacity: 0; visibility: hidden; -webkit-transform: translate3d(-20px, -20px, 0); transform: translate3d(-20px, -20px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes bounce { 0% { opacity: 0; visibility: hidden; height: 0; } 45% { visibility: visible; opacity: 1; height: 110%; } 60% { visibility: visible; opacity: 1; height: 90%; } 75% { visibility: visible; opacity: 1; height: 105%; } 90% { visibility: visible; opacity: 1; height: 95%; } 100% { visibility: visible; opacity: 1; height: 100%; } } @keyframes bounce { 0% { opacity: 0; visibility: hidden; height: 0; } 45% { visibility: visible; opacity: 1; height: 110%; } 60% { visibility: visible; opacity: 1; height: 90%; } 75% { visibility: visible; opacity: 1; height: 105%; } 90% { visibility: visible; opacity: 1; height: 95%; } 100% { visibility: visible; opacity: 1; height: 100%; } } /** 购买弹窗start **/ .popper { position: absolute; display: none; left: 0px; top: 0px; } .popper-mask { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 400; -webkit-transform: translateZ(1000px); transform: translateZ(1000px); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .popper.show { display: -webkit-box; display: -ms-flexbox; display: flex; } .popper-main { position: fixed; left: 50%; top: 50%; width: 100vw; z-index: 420; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(-50%, -50%, 0px); transform: translate3d(-50%,-50%,0px); display: flex; flex-direction: row; align-self: center; justify-content: center; } .popper.show .popper-main { -webkit-animation: showemail 0.8s ease-in-out; animation: showemail 0.8s ease-in-out; } .popper-main .popper-bg { width: 700px; height: 475px; position: relative; } .popper-main .popper-bg img { width: 160px; height: 160px; border: 0 none; position: absolute; left: 72px; top: 170px; } .popper-close { width: 80px; height: 80px; bottom: 0px; -webkit-transform: translateX(-50%) translateY(100%); -ms-transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%); left: 50%; position: absolute; background-size: 100% 100%; cursor: pointer; } @-webkit-keyframes showemail { 0% { -webkit-transform: translateX(-50%) translateY(calc(-50% - 40px)) translateZ(1000px); transform: translateX(-50%) translateY(calc(-50% - 40px)) translateZ(1000px); opacity: 0.2; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(1000px); transform: translateX(-50%) translateY(-50%) translateZ(1000px); opacity: 1; } } @keyframes showemail { 0% { -webkit-transform: translateX(-50%) translateY(calc(-50% - 40px)) translateZ(1000px); transform: translateX(-50%) translateY(calc(-50% - 40px)) translateZ(1000px); opacity: 0.2; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(1000px); transform: translateX(-50%) translateY(-50%) translateZ(1000px); opacity: 1; } } /** 购买弹窗end **/ .customer--fixed { position: fixed; width: 65px; height: 90px; background: url(https://qzonestyle.gtimg.cn/qzone/abcmouse/pages/home/homeV3/img/service_pc.png) no-repeat left top; background-size: 100% 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; right: 2.2917vw; bottom: 8.8542vw; display: block; } </style><style data-url="//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/header/index.css"> .mod-header { height: calc(80 / 1920 * 100vw); margin: 0 auto; padding: 0 23vw; position: fixed; left: 0px; right: 0px; top: 0px; background: #FFD333; z-index: 20; display: flex; flex-direction: row; align-items: center; justify-content: space-between; transition: all 0.5s ease-in-out; } .mod-header::before { background: url(https://qzonestyle.gtimg.cn/abcmouse/imgstatic//home/new-logo@2x.png) no-repeat left top; width: calc(164 / 1920 * 100vw); height: calc(80 / 1920 * 100vw); content: ''; background-size: 100% 100%; } .mod-header.highlight { background: #FFF; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.05); } .mod-header .mod-header__log { flex: 1; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; transition: all 0.2s ease-in; } .mod-header .mod-header__log img { /* height: 2.6042vw; */ height: 100%; width: auto; } .mod-header .mod-header__link { display: inline-flex; flex-direction: row; justify-content: flex-start; align-items: center; } .mod-header .mod-header__link .link-item { font-size: 18px; color: #222222; font-weight: 500; margin-left: 3.5833vw; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; position: relative; } .mod-header .mod-header__link .link-item label { display: inline-block; position: relative; z-index: 2; } .mod-header .mod-header__link .link-item i.textline { position: absolute; left: 50%; width: calc(100 / 1920 * 100vw); bottom: calc(5 / 1920 * 100vw); transform: translateX(-50%) translateY(1vw); height: calc(10 / 1920 * 100vw); background: #FFF; display: none; border-radius: calc(5 / 1920 * 100vw); z-index: 0; } .mod-header.highlight .mod-header__link .link-item i.textline { background: #FFD333; } .mod-header .mod-header__link .link-item:hover i.textline { display: block; animation: ease-in textlineslideup .2s forwards; } @keyframes textlineslideup { 0% { transform: translateX(-50%) translateY(1vw); opacity: 0; } 100% { transform: translateX(-50%) translateY(1vw); opacity: 1; } } .mod-header .mod-header__link .download-app label, .mod-header .mod-header__link .immediate-buexperiencey label { position: relative; } .mod-header .mod-header__link .download-app:hover .download-qr, .mod-header .mod-header__link .immediate-experience:hover .experience-qr { visibility: visible; -webkit-transform: translateX(-50%) translate3d(0, 5%, 0); -ms-transform: translateX(-50%) translate3d(0, 5%, 0); transform: translateX(-50%) translate3d(0, 5%, 0); opacity: 1; } .mod-header .mod-header__link .download-app .download-qr, .mod-header .mod-header__link .immediate-experience .experience-qr { position: absolute; width: 11.625vw; height: 11.625vw; top: 3.6042vw; left: 50%; visibility: hidden; z-index: 1; opacity: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0, 1.5); -o-transition: all 0.5s cubic-bezier(0.4, 0, 0, 1.5); transition: all 0.5s cubic-bezier(0.4, 0, 0, 1.5); border-radius: 1.6vw; } .mod-header .mod-header__link .download-app .download-qr { background-size: 100% 100%; } .mod-header .mod-header__link .immediate-experience .experience-qr { width: 12vw; height: 13vw; top: 2.5vw; background-size: 95%; background-repeat: no-repeat; background-position: center; display: flex; flex-direction: row; align-items: center; justify-content: center; padding-top: 2.8vw; } .mod-header .mod-header__link .immediate-experience .experience-qr img{ width: 8.8vw; height: 8.8vw; border: 0 none; } .mod-header .mod-header__link .download-app .download-qr::before { width: 0px; height: 0px; border-left: 1.0625vw transparent solid; border-bottom: 1.0625vw #fff solid; border-right: 1.0625vw transparent solid; top: -1vw; left: 50%; position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); content: ""; } .mod-header .mod-header__link .pointer { cursor: pointer; } </style><style data-url="//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/banner/index.css"> .mod-banner { height: calc( 680 / 1920 * 100vw); background: #EFEFEF; background-image: linear-gradient(180deg, #FFD333 52%, #FCAE25 100%); /* @TODO */ text-align: center; position: relative; } .mod-banner img { height: calc( 680 / 1920 * 100vw); border: 0 none; } .banner-footer-bg { height: calc(78 / 1920 * 100vw); width: 100vw; position: absolute; overflow: hidden; bottom: 0px; left: 0px; right: 0px; // margin-top: calc(-48 / 1920 * 100vw); } .immediate-experience { background-image: linear-gradient(180deg, #FF9811 3%, #FF5533 100%); box-shadow: 0 calc(12 / 1920 * 100vw) calc(24 / 1920 * 100vw) 0 rgba(255,85,51,0.30); border-radius: calc(33 / 1920 * 100vw); width: calc(350 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: calc( 24 / 1920 * 100vw); color: #FFF; font-weight: 500; position: absolute; bottom: calc(174 / 1920 * 100vw); left: calc(402 / 1920 * 100vw); } .banner-footer-bg::before { content: ''; position: absolute; width: calc(2 * (960 * 960 + 48 * 48)/ (2 * 48) / 1920 * 100vw); height: calc(2 * (960 * 960 + 48 * 48)/ (2 * 48) / 1920 * 100vw); background: transparent; border-radius: 100%; box-shadow: 0px 0px 0px 100px #FFF; left: 50%; bottom: 0%; transform: translateX(-50%); } </style><style data-url="//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/modules.css"> /* 激励式教学理念 start */ .section.section--idea { margin-top: calc( 44 / 1920 * 100vw); } .section.section--idea .block-bd { width: calc( 952 / 1920 * 100vw); height: calc( 742 / 1920 * 100vw); } .section.section--idea .block-bd img{ border: 0 none; width: 100%; height: 100%; } /* 激励式教学理念 end */ /* 中美共同研发科学课程体系 start */ .section--course { position: relative; } .section--course::before, .section--course::after { background-size: 100vw 100%; content: ""; display: block; position: absolute; left: 0px; background-color: #FFF; } .section--course .course-content { padding-top: calc( 113 / 1920 * 100vw); width: 100vw; } .section--course::before { height: calc(436 / 2 / 1920 * 100vw); width: 100vw; top: 0px; background-image: url(https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/pc/module_bgtop_1.png); } .section--course::after { height: calc(756 / 2 / 1920 * 100vw); width: 100vw; bottom: 0px; background-image: url(https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/pc/module-bottombg-1.png); } .section--course .block-bd { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; } .section--course .list--course { margin-top: calc(40 / 1920 * 100vw); margin-bottom: calc(24 / 1920 * 100vw); } .section--course .list--course .full-width { width: calc(676 / 1920 * 100vw); } .section--course .course-level .course-img { width: calc(941 / 1920 * 100vw); } .section--course .course-des { font-size: calc(16 / 1920 * 100vw); color: #7E7E7E; text-align: center; margin-top: calc(27 / 1920 * 100vw); } /* 中美共同研发科学课程体系 end */ /* 专业的课程开发及内容制作团队 start */ .section--team { margin-top: calc(113 / 1920 * 100vw); } .section--team .section-bd { width: 56vw; margin-top: calc(40 / 1920 * 100vw); } .team-list { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; } .team-list .team-item { display: flex; flex-direction: column; align-items: center; flex: 1; justify-content: flex-start; } .team-list .team-item .item-bd { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: calc( 30 / 1920 * 100vw); } .team-list .team-item .item-tt { font-weight: normal; font-weight: bold; font-size: calc( 24 / 1920 * 100vw); line-height: calc( 33 / 1920 * 100vw); margin-bottom: calc(22 / 1920 * 100vw); color: #222222; letter-spacing: 0; position: relative; } .team-list .team-item .item-tt label{ position: relative; z-index: 10; padding: 0px calc(11 / 1920 * 100vw); display: inline-block; } .team-list .team-item .item-tt::before { content: ''; position: absolute; left: 0px; bottom: 0px; right: 0px; height: calc( 22 / 1920 * 100vw); background: #FFD333; } .team-list .team-item .item-des { line-height: 1.6; color: #666; font-size: calc(16 / 1920 * 100vw); text-align: center; } .team-list .item-icon { height: calc( 222 / 1920 * 100vw); width: calc( 238 / 1920 * 100vw); background-size: cover; background-image: url(https://qzonestyle.gtimg.cn/abcmouse/imgstatic/mp-activity/product/people.png); background-repeat: no-repeat; } .team-list .item-icon.icon--rebecca-palacios { background-position: -3.8667vw center; } .team-list .item-icon.icon--kimberly-burnim { background-position: -19.7333vw center; } .team-list .item-icon.icon--ao-bing-xin { background-position: -34.3333vw center; } /* 专业的课程开发及内容制作团队 end */ /* 腾讯出品，领先科技保驾护航 start */ .section--technology { margin-top: calc(100 / 1920 * 100vw); } .section--technology .section-bd { margin-top: calc(40 / 1920 * 100vw); } .section--technology .list--tech { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 50vw; } .section--technology .list--tech .feature-item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .section--technology .list--tech .feature-item:nth-of-type(1) { margin-left: 0; } .section--technology .list--tech .item-icon { width: calc(84 / 1920 * 100vw); height: calc(84 / 1920 * 100vw); background-image: url(https://qzonestyle.gtimg.cn/abcmouse/imgstatic/mp-activity/product/icon-tech.png); background-repeat: no-repeat; background-size: calc(750 * 84 / 125 / 1980 * 100vw) calc(84 / 1980 * 100vw); } .section--technology .list--tech { margin-top: 0.3vw; } .section--technology .list--tech .item-tt { font-size: calc( 24 / 1920 * 100vw); text-align: left; margin-bottom: 0.417vw; } .section--technology .list--tech .item-tt label { padding: 0px calc(10 / 1920 * 100vw) 0px calc(4 / 1920 * 100vw); } .section--technology .list--tech .item-des { font-size: calc( 16 / 1920 * 100vw); text-align: left; } .section--technology .list--tech .feature-item:nth-of-type(1) .item-icon { background-position: -2.8vw top; } .section--technology .list--tech .feature-item:nth-of-type(2) .item-icon { background-position: -10.5vw top; } .section--technology .list--tech .feature-item:nth-of-type(3) .item-icon { background-position: -18.5vw top; } /* 腾讯出品，领先科技保驾护航 end */ /* 丰富的线上+线下学习资源 start */ .section.section--resource { margin-top: 2.3333vw; width: 100vw; position: relative; } .section--resource .resource-content { padding-top: calc( (366 / 2 + 70) / 1920 * 100vw); } .section--resource .resource-content .resource-footer-bg { height: calc(72 / 1920 * 100vw); width: 100vw; position: relative; overflow: hidden; } .section--resource .resource-content .resource-footer-bg::before { content: ''; position: absolute; width: calc(2 * (960 * 960 + 72 * 72)/ (2 * 72) / 1920 * 100vw); height: calc(2 * (960 * 960 + 72 * 72)/ (2 * 72) / 1920 * 100vw); background: transparent; border-radius: 100%; box-shadow: 0px 0px 0px 100px #FFF; left: 50%; transform: translateX(-50%); } .section--resource .resource-content .resource-header-bg { top: 0px; background-color: #FFF; height: calc(366 / 2 /1920 * 100vw); width: 100vw; position: absolute; left: 0px; background-size: 100% 100%; background-image: url(https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/pc/module_bgtop_2.png); } .section--resource .resource-content .resource-footer-bg::before { bottom: 0px; } .section--resource .resource-content .section-bd { padding-bottom: calc(460 / 1920 * 100vw); } .section--resource .resource-content .block-bd { display: flex; flex-direction: row; align-items: center; justify-content: center; } .section--resource .block--resource-dashboard { margin-top: calc( 20 / 1920 * 100vw); } .section--resource .block--resource-dashboard .full-width { width: calc( 960 / 1920 * 100vw); } /* 丰富的线上+线下学习资源 end */ /* 丰富有趣的智能点读教材 start */ .section--package { margin-top: calc(-440 / 1920 * 100vw); } .section--package .block-bd { text-align: center; margin-top: calc(40 / 1920 * 100vw); } .section--package .pkg-total { margin-bottom: 6.9333vw; } .section--package img.full-width { width: calc( 576 / 1920 * 100vw); text-align: center; position: relative; z-index: 10; } /* 丰富有趣的智能点读教材 end */ /* 腾讯开心鼠英语的优势 start */ .section-advantage { margin-top: calc(80 / 1920 * 100vw); } .section-advantage .block--award { margin-bottom: 3.093vw; } .section-advantage .block-bd .award-back { margin-top: 1.333vw; } .section-advantage .block-bd { margin-top: calc( 50 / 1920 * 100vw); } .section-advantage .award-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 3vw; } .section-advantage .award-video { width: 100vw; height: 69.3333vw; background: no-repeat left top; background-size: 100% 100%; margin-top: 6.667vw; } .section-advantage .award-video-pc { display: none; } .section-advantage .tech-video { width: 100vw; height: 69.3333vw; background: url(//qzonestyle.gtimg.cn/qzone/abcmouse/img/video-cover-mask-3.png) no-repeat left top; background-size: 100% 100%; } .section-advantage .award-container { margin-top: 0px; } .section-advantage .award-container .award-wrapper { width: 13.333vw; height: 16.667vw; background: no-repeat; background-size: cover; } .section-advantage .award-container .award-wrapper.award-1 { background-position: -1.458vw top; } .section-advantage .award-container .award-wrapper.award-2 { background-position: -16.354vw top; } .section-advantage .award-container .award-wrapper.award-3 { background-position: -31.458vw bottom; } .section-advantage .award-container .award-wrapper.award-4 { background-position: -45.833vw bottom; } .section-advantage .bd--award .award-video-pc { margin-top: 2.7083vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .section-advantage .bd--award .award-video-pc .award-video--1 { width: 33.698vw; height: 20.833vw; background: no-repeat left top; background-size: cover; } .section-advantage .bd--award .award-video-pc .award-video--2 { width: 32.656vw; height: 20.833vw; background: no-repeat right top; background-size: cover; } .section-advantage .bd--award .award-video { display: none; } /* 腾讯开心鼠英语的优势 end */ /* 常见问题 start */ .section-faq { margin-top: 11.187vw; } .section-faq .faq-title { color: black; font-size: 5.333vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .section-faq .faq-title::before, .section-faq .faq-title::after { content: ""; display: block; margin: 0 4vw; width: 30.133vw; height: 0.133vw; border-bottom: 1px solid #cbcbcb; } .section-faq .faq-categories { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .section-faq .faq-categories .category { color: #999; letter-spacing: 0; font-size: 3.467vw; margin-top: 3.467vw; padding: 1.333vw 0; width: 26.667vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .section-faq .faq-categories .category:first-child { margin-left: 0; } .section-faq .faq-categories .category .category-inner { text-align: center; } .section-faq .faq-categories .category .category-inner.current { color: #222; position: relative; } .section-faq .faq-categories .category .category-inner.current > span { position: relative; } .section-faq .faq-categories .category .category-inner.current::before { content: ""; display: block; position: absolute; top: 5.6vw; left: 0; width: 100%; height: 1.067vw; background: #ffe000; } .section-faq { width: 75.5455vw; margin: 2.708vw auto; margin-bottom: 0; } .section-faq .faq-title { font-size: 2.0202vw; } .section-faq .faq-title::before, .section-faq .faq-title::after { margin: 0 1vw; width: 24.344vw; height: 0.267vw; border-bottom: 1px solid #cbcbcb; } .section-faq .faq-categories { padding: 0 1.8vw; cursor: pointer; } .section-faq .faq-categories .category { font-size: 1.5152vw; margin-top: 1.467vw; } .section-faq .faq-categories .category .category-inner.current::before { top: 2.6vw; height: 0.417vw; } .section-faq .faq-content { font-size: 0.8081vw; margin-top: 2.03vw; padding: 0 8.4vw; min-height: 22.5vw; } .section-faq .faq-content .question { margin-bottom: 0px; line-height: 2.0202vw; } .section-faq .faq-content .answer { margin-bottom: 2.0202vw; padding-left: 0.9vw; line-height: 30px; } /* 常见问题 end */ /* 二维码 start */ .section-qr { height: 55.467vw; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .section-qr .block-qr > img { width: 22.933vw; height: 22.933vw; text-align: center; display: block; margin: 0 auto; } .section-qr .block-qr > span { margin-top: 2.493vw; display: block; font-size: 2.667vw; color: #222222; text-align: center; } .section-qr { width: auto; height: 19.792vw; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .section-qr .block-qr:last-of-type { margin-left: 8.073vw; } .section-qr .block-qr > img { width: 6.771vw; height: 6.771vw; } .section-qr .block-qr > span { font-size: 0.729vw; margin-top: 0.521vw; } /* 二维码 end */ </style><style data-url="//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/footer/index.css"> .section-footer { height: 24vw; padding: 0 8.667vw 0 8.667vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #f4f4f4; width: 100vw; } .section-footer .block-link { font-size: 3.2vw; color: #222222; text-align: center; line-height: 5.867vw; margin: 0 auto; overflow: hidden; } .section-footer .block-link > span { display: block; } .section-footer .block-comment { font-size: 3.2vw; color: #999999; text-align: center; margin: 3.867vw auto; } .section-footer .block-comment > span { display: block; } .section-footer .link-item > a { color: #999999; cursor: pointer; } .section-footer { height: 8.3333vw; padding: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 12px; } .section-footer .block-link { font-size: 0.729vw; line-height: normal; } .section-footer .block-link span { display: inline; } .section-footer .block-comment { font-size: 12px; margin: 0px; margin-top: 0.8854vw; } </style><style data-url="//qzonestyle.gtimg.cn/qzone/abcmouse/home/pc/style/carousel.css"> #carousel-container { position:relative; width:100vw; height: 480px; clear:both; display: flex; flex-direction: row; align-items: center; justify-content: center; } #carousel { position:relative; width: 800px; height: 480px; clear: both; } .card-page { background: #FFD333; width: 481px; height: 402px; position: absolute; border-radius: 11px; box-shadow: 0px 10px 20px rgba(180,86,0,0.12); display: none; } #carousel img { cursor:pointer; /* otherwise it's not as obvious items can be clicked */ width: 100%; position: absolute; left: 0px; bottom: -2px; right: 0px; } #carousel .control-btn { position: absolute; width: 40px; height: 40px; background: #FFF; border-radius: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 2px #AFAFAF; top: 50%; } #carousel .left-btn { left: 0px; transform: translateX(calc(-100% - 20px)) translateY(-50%); } #carousel .right-btn { right: 0px; transform: translateX(calc(100% + 20px)) translateY(-50%); } #carousel .control-btn::before { position: absolute; width: 16px; height: 16px; border: 2px solid #FFD333; content: ''; top: 12px; transform: rotate(45deg); } #carousel .left-btn::before { left: 14px; border-top: 0 none; border-right: 0 none; } #carousel .right-btn::before { right: 14px; border-bottom: 0 none; border-left: 0 none; } </style> <script> HYB.loadTimes.syncCssLoad = +new Date(); </script><script data-content="hybapi"> (function() { var platform = HYB.browserInfo.platform || 'other', client = HYB.browserInfo.client || 'browser'; var isType = function(obj, type) { return Object.prototype.toString.call(obj) === '[object ' + type + ']'; }; var invokeSchema = function(schema) { var container = document.body || document.documentElement; var iframe = document.createElement('iframe'); iframe.style.cssText = 'display:none;width:0px;height:0px;'; if (platform === 'ios') { iframe.src = schema; container.appendChild(iframe); } else { container.appendChild(iframe); iframe.src = schema; } setTimeout(function() { iframe.parentNode && iframe.parentNode.removeChild(iframe); }, 100); }; var invokeClient = function(ns, method, params) { var schema = 'jsbridge://' + encodeURIComponent(ns) + '/' + encodeURIComponent(method); params = isType(params, 'Object') ? JSON.stringify(params) : params; if (params) {schema = schema + '?p=' + encodeURIComponent(params)} invokeSchema(schema); }; var autoProtocol = function(url) { return url && url.replace(/^(https?:)?\/\//, location.protocol + '//'); }; var openWindow = function(params) { window.open(autoProtocol(params.url), params.target == 1 ? '_blank' : '_self'); }; var facades = { 'ui.openUrl': { qq: { ios: function(params) { params.styleCode = ({1: 4, 2: 2, 3: 5})[params.style] || 1; invokeClient('nav', 'openLinkInNewWebView', {url: params.url, options: params}); }, android: function(params) { invokeClient('ui', 'openUrl', {url: params.url, options: params}); }, other: openWindow }, qzone: { other: openWindow }, browser: { ios: openWindow, android: openWindow, other: openWindow } } }; HYB.api = {}; HYB.api.invoke = function(ns, method, params) { if (!ns || !method) {return;} var facade = facades[ns + '.' + method]; if (facade) { var fn = facade[client] && facade[client][platform]; if (fn) {fn(params);} else {invokeClient.apply(null, arguments);} } else { invokeClient.apply(null, arguments); } }; var handler = function(evt) { var ns, method, params; var el = evt.target || evt.srcElement; while (el && el.nodeType !== el.DOCUMENT_NODE) { if (el.nodeName === 'A' && el.hasAttribute('data-open-url')) { var href = el.href; if (/^(https?:)?\/\//.test(href)) { ns = 'ui'; method = 'openUrl'; params = {url: autoProtocol(href), target: 1, style: 1}; evt.preventDefault(); break; } } if (el.hasAttribute('data-open-url')) { var href = el.getAttribute('data-open-url'); if (/^(https?:)?\/\//.test(href)) { ns = 'ui'; method = 'openUrl'; params = {url: autoProtocol(href), target: 1, style: 1}; break; } } el = el.parentNode; } ns && method && HYB.api.invoke(ns, method, params); }; HYB.api.addOpenUrlAgent = function() { document.addEventListener && document.addEventListener('click', handler); }; HYB.api.removeOpenUrlAgent = function() { document.removeEventListener && document.removeEventListener('click', handler); }; HYB.api.addOpenUrlAgent(); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?53127b12c307ffdd25e0ee38f664db0d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <style> .common-tips .info { margin: 10px; padding: 10px 16px; height: auto; line-height: 25px; } </style> <script> /** * 页面处于白屏时的数据上报 * @author milohuang * @date 2020-07-27 * */ var img = new Image(); img.src = location.origin + '/webApp/logReport' + location.search; img = null </script> </head> <body class=" " style=""> <noscript> <img height="1" width="1" style="display:none" src="https://a.gdt.qq.com/pixel?user_action_set_id=1107979299&action_type=PAGE_VIEW&noscript=1"/> </noscript> <div class="wrapper"> <a name="home" href="javascript:;"></a> <div class="header-block"> <div class="mod-header"> <div class="mod-header__link"> <div class="link-item"> <a href="#home"> <label class="pointer"> 首页 </label> </a> <i class="textline"></i> </div> <div class="link-item start-learn"> <label class="pointer"> 开始学习 </label> <i class="textline"></i> </div> <div class="link-item download-app"> <label class="pointer"> 下载App <span class="download-qr" data-src='https://qzonestyle.gtimg.cn/abcmouse/imgstatic/home/download-app.png'></span> </label> <i class="textline"></i> </div>  <div class="link-item"> <a href="#question"> <label class="pointer"> 常见问题 </label> <i class="textline"></i> </a> </div> </div> </div> <div class="mod-banner"> <img src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/pc/new_banner.png" title="腾讯开心鼠英语" alt="腾讯开心鼠英语"/> <div class="experience immediate-experience"> <label>立即体验</label> </div> <div class="banner-footer-bg"> </div> </div> </div> <div class="modules"> <div class="section section--idea"> <div class="section-tt tt--quotation hidden animate"> 激励式教学理念 </div> <div class="section-bd"> <div class="section-block block--drive"> <div class="block-tt hidden animate"> <label>培养5大学习动机，持续激发孩子兴趣</label> </div> <div class="block-bd"> <img class="full-width hidden animate" src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/pc/new_feature.png"></img> </div> </div> </div> </div> <div class="section section--course"> <div class="bg-orange course-content"> <div class="section-tt tt--quotation">中美共同研发科学课程体系</div> <div class="section-bd"> <div class="section-block block--course"> <div class="block-tt">源自美国，腾讯联合开发，更适合中国孩子</div> <div class="block-bd"> <div class="list--course" data-animate-id="system-feature"> <img class="full-width" src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/pc/system-icon.png"/> </div> <div class="course-level"> <img class="full-width course-img" src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/pc/kecheng_pc.png"></img> <div class="course-des"> <div>课程体系根据第二语言学习理论以及儿童学习和认知规律设置</div> </div> </div> </div> </div> </div> </div> </div> <div class="section section--team"> <div class="section-tt tt--quotation"> 专业的课程开发及内容制作团队 </div> <div class="section-bd"> <div class="block-bd"> <div class="team-list" data-animate-id="people-list"> <div class="team-item queue-item"> <div class="item-icon icon--rebecca-palacios"></div> <div class="item-bd"> <div class="item-tt"> <label>Rebecca Palacios</label> </div> <div class="item-des">课程顾问美国教学标准<br/>委员会联合创始人及前副主席<br/>入选美国教师名人堂<br/></div> </div> </div> <div class="team-item queue-item"> <div class="item-icon icon--kimberly-burnim"></div> <div class="item-bd"> <div class="item-tt"> <label>Kimberly Burnim</label> </div> <div class="item-des">美国教学标准委员会的<br/>董事会成员，获2006年<br/>度美国国家教师</div> </div> </div> <div class="team-item queue-item"> <div class="item-icon icon--ao-bing-xin"></div> <div class="item-bd"> <div class="item-tt"> <label>敖冰欣</label> </div> <div class="item-des">台湾知名配音师<br/>曾为《一休和尚》《机器猫》<br/>《东京爱情故事》等影视作品配音</div> </div> </div> </div> </div> </div> </div> <div class="section section--technology"> <div class="section-tt tt--quotation"> 腾讯出品，领先科技保驾护航 </div> <div class="section-bd"> <div class="block-bd"> <div class="bd-feature feature-list list--tech" data-animate-id="tech-list"> <div class="feature-item queue-item"> <div class="item-icon icon--ai"></div> <div class="tech-item__right"> <div class="item-tt"> <label>AI自适应</label> </div> <div class="item-des">精准语音识别</div> </div> </div> <div class="feature-item queue-item"> <div class="item-icon icon--ar"></div> <div class="tech-item__right"> <div class="item-tt"> <label>AR互动教学</label> </div> <div class="item-des">沉浸式学习体验</div> </div> </div> <div class="feature-item queue-item"> <div class="item-icon icon--save"></div> <div class="tech-item__right"> <div class="item-tt"> <label>安全保护体系</label> </div> <div class="item-des">关爱儿童视力健康</div> </div> </div> </div> </div> </div> </div> <div class="section section--resource"> <div class="bg-orange resource-content"> <div class="resource-header-bg"></div> <div class="section-tt tt--quotation tt--orange">丰富的线上+线下学习资源</div> <div class="section-bd"> <div class="section-block block--resource-dashboard"> <div class="block-bd"> <img class="full-width" src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/pc/resource.png" /> </div> </div> </div> <div class="resource-footer-bg"></div> </div> </div> <div class="section section--package"> <div class="section-tt tt--quotation tt--orange"> 丰富有趣的智能点读教材 </div> <div class="section-bd"> <div class="block-bd"> <div id="carousel-container"> <div id="carousel" class="imageflow"> <div class="control-btn left-btn"></div> <div class="control-btn right-btn"></div> <div class="card-page" data-original_width="481" data-original_height="405"> <img src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/new_card1.png" /> </div> <div class="card-page" data-original_width="481" data-original_height="405" > <img src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/new_card2.png"/> </div> <div class="card-page" data-original_width="481" data-original_height="405" > <img src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/new_card3.png"/> </div> <div class="card-page" data-original_width="481" data-original_height="405" > <img src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/new_card4.png"/> </div> <div class="card-page" data-original_width="481" data-original_height="405" > <img src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/new_card5.png"/> </div> <div class="card-page" data-original_width="481" data-original_height="405" > <img src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/new_card6.png"/> </div> </div> </div> <img class="full-width" src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/v4/pkg-box.png" /> </div> </div> </div> <div class="section section-advantage"> <div class="section-tt tt--quotation"> <label>腾讯开心鼠英语的优势</label> </div> <div class="section-bd"> <div class="section-block block--award "> <div class="block-tt mtop0"> <label>荣获美国大奖孩子喜欢妈妈放心</label> </div> <div class="block-bd bd--award"> <div class='award-container'> <div class='award-wrapper award-1 queue-item lazy' data-src='https://qzonestyle.gtimg.cn/qzone/abcmouse/pages/home/homeV3/img/award_pc.png'></div> <div class='award-wrapper award-2 queue-item lazy' data-src='https://qzonestyle.gtimg.cn/qzone/abcmouse/pages/home/homeV3/img/award_pc.png'></div> <div class='award-wrapper award-3 queue-item lazy' data-src='https://qzonestyle.gtimg.cn/qzone/abcmouse/pages/home/homeV3/img/award_pc.png'></div> <div class='award-wrapper award-4 queue-item lazy' data-src='https://qzonestyle.gtimg.cn/qzone/abcmouse/pages/home/homeV3/img/award_pc.png'></div> </div> <div class="award-video-pc"> <div class='award-video--1 lazy' data-src='https://qzonestyle.gtimg.cn/qzone/abcmouse/pages/home/homeV3/img/award/video_2_pc.png'></div> <div class='award-video--2 lazy' data-src='https://qzonestyle.gtimg.cn/qzone/abcmouse/pages/home/homeV3/img/award/video_2_pc.png'></div> </div> </div> </div> </div> <div class="section-faq"> <a name="question" href="javascript:;"></a> <div class="faq-title">常见问题</div> <div class="faq-categories"> </div> <div class="faq-content"> </div> </div> <div class="section-qr"> <div class='block-qr'> <img class='lazy' alt="关注腾讯开心鼠英语公众号" data-src='https://qzonestyle.gtimg.cn/qzone/abcmouse/pages/home/homeV3/img/qrcode/qrcode-wechat@2x.png' /> <span>关注腾讯开心鼠英语公众号</span> </div> <div class='block-qr'> <img class='lazy' alt="下载腾讯开心鼠英语客户端" data-src='https://qzonestyle.gtimg.cn/abcmouse/imgstatic/home/download-app.png' /> <span>下载腾讯开心鼠英语app</span> </div> </div> </div> <div class='section-footer'> <div class='block-comment'> <span> TM & © 1998-2024 Tencent and Age of Learning, Inc. </span> <span> All trademarks and copyrights are property of their respective owners. All rights reserved. </span> <span> Enquiry: 0755-86013388 </span> <div class="link-item"> <a href="/proxy/domain/qzonestyle.gtimg.cn/abcmouse/article" id="articles"> 精选文章 </a> </div> </div> </div> <div class='footer-help'></div> </div> <div class="popper mod-home__dialog"> <div class="popper-mask"> </div> <div class="popper-main"> <div class="buy-qrcode-element popper-bg" id="dialog-img" data-src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/home/home-qrcode-bg.png"></div> <div class="popper-close mod-home__dialog-popper-close buy-qrcode" id="close-img" data-src="https://qzonestyle.gtimg.cn/qzone/abcmouse/pages/home/homeV3/img/close.png"></div> </div> </div> <div class="customer--fixed"> </div> <script> window.shine0callback = ''; </script> <script>window.syncData = {"isMobile":false,"isPC":true,"hoverImg":"https://qzonestyle.gtimg.cn/abcmouse/imgstatic/home/default_hover.png","dialogImg":"https://qzonestyle.gtimg.cn/abcmouse/imgstatic/home/default_dialog-min.png","adtag":"","imgAdtag":"default","brandName":{"long":"腾讯开心鼠英语ABCmouse","short":"腾讯开心鼠英语"}};</script> <script> const readyTime = +new Date() HYB.loadTimes.bodyEnd = readyTime; HYB.loadTimes.domReady = readyTime; window.PAGE_DOM_READY = readyTime; </script> <script type="text/javascript"> window.HUATUO_REPORT = (function() { var HuatuoReport = function() { return this.initialize.apply(this, arguments); }; var REPORT_CGI = 'https://report.huatuo.qq.com/report.cgi?', ua = window.navigator.userAgent, iPad = ua.match(/(iPad).*OS\s([\d_]+)/), iPhone = !iPad && ua.match(/(iPhone\sOS)\s([\d_]+)/), iPod = ua.match(/(iPod).*OS\s([\d_]+)/), android = ua.match(/(Android)\s+([\d.]+)/)||ua.match(/Android/); var Platform = { IOS: 'ios', ANDROID: 'android', PC: 'pc' }; /** * 获取当前平台环境 * @see {@link http://tapd.oa.com/mhb/markdown_wikis/#1010084921006403623} * @description 只支持android、ios、pc，其他默认为unknown */ HuatuoReport.platform = (function() { if (iPad || iPhone || iPod) { return Platform.IOS; } else if (android) { return Platform.ANDROID; } return Platform.PC; })(); HuatuoReport.param = function(params){ var paramArray = []; for (var key in params) { if (params.hasOwnProperty(key)) { if (params[key] !== '' && params[key] !== undefined) { paramArray.push(key + '=' + encodeURIComponent(params[key])); } } } return paramArray.join('&'); }; HuatuoReport.prototype = { /** * 上报参数 * @param {Integer} appid 应用id * @param {Object} speedparams 自定义上报测速点 */ initialize: function(appid, speedparams) { if (!/^[1-9]\d*$/.test(appid)) { console.warn('huatuo: invalid appid.'); return; } this.appid = appid; this.speedparams = speedparams || {}; this.report(); }, report: function() { if (!window.performance || !window.performance.timing) { console.warn('huatuo: performance not supported.') return; } var params = { appid: this.appid, platform: HuatuoReport.platform, speedparams: this.getSpeedparams() }; var url = REPORT_CGI + HuatuoReport.param(params); new Image().src = url; }, getSpeedparams: function() { var timing = window.performance.timing; var startTime = timing.startTime || timing.navigationStart; var timePoints = [ "navigationStart", "unloadEventStart", "unloadEventEnd", "redirectStart", "redirectEnd", "fetchStart", "domainLookupStart", "domainLookupEnd", "connectStart", "connectEnd", "requestStart", "responseStart", "responseEnd", "domLoading", "domInteractive", "domContentLoadedEventStart", "domContentLoadedEventEnd", "domComplete", "loadEventStart", "loadEventEnd" ]; var time, costTime, speedparams = {}, len = timePoints.length; for (var i=1; i<len; i++) { time = timing[timePoints[i]]; costTime = 0; if (time !== undefined && time > 0) { if(time - startTime > 0) { costTime = time - startTime; } } speedparams[i] = costTime; } speedparams = Object.assign(speedparams, this.speedparams || {}); return HuatuoReport.param(speedparams); } }; return { /** * 测速上报 * @example HUATUO_REPORT.report('12012'); */ report: function(appid, speedparams) { return new HuatuoReport(appid, speedparams); } } })(); </script> <script data-content="seajsText"> var SeajsloadErrorMap = {}; (function(t, u) { function v(b) { return function(c) { return Object.prototype.toString.call(c) === "[object " + b + "]" } } function Q() { return w++ } function I(b, c) { var a; a = b.charAt(0); if (R.test(b)) a = b; else if ("." === a) { a = (c ? c.match(E)[0] : h.cwd) + b; for (a = a.replace(S, "/"); a.match(J);) a = a.replace(J, "/") } else a = "/" === a ? (a = h.cwd.match(T)) ? a[0] + b.substring(1) : b: h.base + b; return a } function K(b, c) { if (!b) return ""; var a = b, d = h.alias, a = b = d && F(d[a]) ? d[a] : a, d = h.paths, g; if (d && (g = a.match(U)) && F(d[g[1]])) a = d[g[1]] + g[2]; g = a; var e = h.vars; e && -1 < g.indexOf("{") && (g = g.replace(V, function(a, b) { return F(e[b]) ? e[b] : a })); a = g.length - 1; d = g.charAt(a); b = "#" === d ? g.substring(0, a) : ".js" === g.substring(a - 2) || 0 < g.indexOf("?") || ".css" === g.substring(a - 3) || "/" === d ? g: g + ".js"; g = I(b, c); var a = h.map, l = g; if (a) for (var d = 0, f = a.length; d < f && !(l = a[d], l = x(l) ? l(g) || g: g.replace(l[0], l[1]), l !== g); d++); return l } function L(b, c) { var a = b.sheet, d; if (M) a && (d = !0); else if (a) try { a.cssRules && (d = !0) } catch(g) { "NS_ERROR_DOM_SECURITY_ERR" === g.name && (d = !0) } setTimeout(function() { d ? c() : L(b, c) }, 20) } function W() { if (y) return y; if (z && "interactive" === z.readyState) return z; for (var b = s.getElementsByTagName("script"), c = b.length - 1; 0 <= c; c--) { var a = b[c]; if ("interactive" === a.readyState) return z = a } } function e(b, c) { this.uri = b; this.dependencies = c || []; this.exports = null; this.status = 0; this._waitings = {}; this._remain = 0 } if (!t.seajs) { var f = t.seajs = { version: "2.1.1" }, h = f.data = {}, X = v("Object"), F = v("String"), A = Array.isArray || v("Array"), x = v("Function"), w = 0, p = h.events = {}; f.on = function(b, c) { (p[b] || (p[b] = [])).push(c); return f }; f.off = function(b, c) { if (!b && !c) return p = h.events = {}, f; var a = p[b]; if (a) if (c) for (var d = a.length - 1; 0 <= d; d--) a[d] === c && a.splice(d, 1); else delete p[b]; return f }; var m = f.emit = function(b, c) { var a = p[b], d; if (a) for (a = a.slice(); d = a.shift();) d(c); return f }, E = /[^?#]*\//, S = /\/\.\//g, J=/\/[^/]+\/\.\.\//, U=/^([^/:]+)(\/.+)$/,V=/{([^{]+)}/g,R=/^\/\/.|:\//,T=/^.*?\/\/.*?\//,n=document,q=location,B=q.href.match(E)[0],k=n.getElementsByTagName("script"),k=n.getElementById("seajsnode")||k[k.length- 1], k = ((k.hasAttribute ? k.src: k.getAttribute("src", 4)) || B).match(E)[0], s = n.getElementsByTagName("head")[0] || n.documentElement, N = s.getElementsByTagName("base")[0], O = /\.css(?:\?|$)/i, Y = /^(?:loaded|complete|undefined)$/, y, z, M = 536 > 1 * navigator.userAgent.replace(/.*AppleWebKit\/(\d+)\..*/, "$1"), Z = /"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*$\s*(["'])(.+?)\1\s*$/g, $ = /\\\\/g, r = f.cache = {}, C, G = {}, H = {}, D = {}, j = e.STATUS = { FETCHING: 1, SAVED: 2, LOADING: 3, LOADED: 4, EXECUTING: 5, EXECUTED: 6 }; e.prototype.resolve = function() { for (var b = this.dependencies, c = [], a = 0, d = b.length; a < d; a++) c[a] = e.resolve(b[a], this.uri); return c }; e.prototype.load = function() { if (! (this.status >= j.LOADING)) { this.status = j.LOADING; var b = this.resolve(); m("load", b); for (var c = this._remain = b.length, a, d = 0; d < c; d++) a = e.get(b[d]), a.status < j.LOADED ? a._waitings[this.uri] = (a._waitings[this.uri] || 0) + 1 : this._remain--; if (0 === this._remain) this.onload(); else { for (var g = {}, d = 0; d < c; d++) a = r[b[d]], a.status < j.FETCHING ? a.fetch(g) : a.status === j.SAVED && a.load(); for (var h in g) if (g.hasOwnProperty(h)) g[h]() } } }; e.prototype.onload = function() { this.status = j.LOADED; this.callback && this.callback(); var b = this._waitings, c, a; for (c in b) if (b.hasOwnProperty(c) && (a = r[c], a._remain -= b[c], 0 === a._remain)) a.onload(); delete this._waitings; delete this._remain }; e.prototype.fetch = function(b) { function c() { var a = g.requestUri, b = g.onRequest, c = g.charset, d = O.test(a), e = n.createElement(d ? "link": "script"); var aa = document.createElement("a"); aa.href = a; if (HYB && HYB.browserInfo && aa.host === 'qzonestyle.gtimg.cn') { if (HYB.browserInfo.platform === 'android') { e.setAttribute("crossorigin", 'anonymous'); } else if (HYB.browserInfo.platform === 'ios') { if(window.location.search && window.location.search === '?lzl=1'){ e.setAttribute("crossorigin", 'anonymous'); a = a.replace('qzonestyle.gtimg.cn', 'h5.qzone.qq.com/proxy/domain/qzonestyle.gtimg.cn'); }else{ a = a.replace('qzonestyle.gtimg.cn', 'h5.abcmouse.qq.com/proxy/domain/qzonestyle.gtimg.cn'); } } } if (c && (c = x(c) ? c(a) : c)) e.charset = c; var f = e; d && (M || !("onload" in f)) ? setTimeout(function() { L(f, b) }, 1) : f.onload = f.onreadystatechange = function(e) { Y.test(f.readyState) && (f.onload = f.onerror = f.onreadystatechange = null, !d && !h.debug && s.removeChild(f), f = null, b(e)) }; f.onerror = function(e) { SeajsloadErrorMap[f.src] = 1; Y.test(f.readyState) && (f.onload = f.onerror = f.onreadystatechange = null, !d && !h.debug && s.removeChild(f), f = null, b(e)) }; d ? (e.rel = "stylesheet", e.href = a) : (e.async = !0, e.src = a); y = e; s.getElementsByTagName("base")[0] ? s.insertBefore(e, s.getElementsByTagName("base")[0]) : s.appendChild(e); y = null } function a() { delete G[f]; H[f] = !0; C && (e.save(d, C), C = null); var a, b = D[f]; for (delete D[f]; a = b.shift();) a.load() } var d = this.uri; this.status = j.FETCHING; var g = { uri: d }; m("fetch", g); var f = g.requestUri || d; ! f || H[f] ? this.load() : G[f] ? D[f].push(this) : (G[f] = !0, D[f] = [this], m("request", g = { uri: d, requestUri: f, onRequest: a, charset: h.charset }), g.requested || (b ? b[g.requestUri] = c: c())) }; e.prototype.exec = function() { function b(a) { return e.get(b.resolve(a)).exec() } if (this.status >= j.EXECUTING) return this.exports; this.status = j.EXECUTING; var c = this.uri; b.resolve = function(a) { return e.resolve(a, c) }; b.async = function(a, g) { e.use(a, g, c + "_async_" + w++); return b }; var a = this.factory, a = x(a) ? a(b, this.exports = {}, this) : a; a === u && (a = this.exports); null === a && !O.test(c) && m("error", this); delete this.factory; this.exports = a; this.status = j.EXECUTED; m("exec", this); return a }; e.resolve = function(b, c) { var a = { id: b, refUri: c }; m("resolve", a); return a.uri || K(a.id, c) }; e.define = function(b, c, a) { var d = arguments.length; 1 === d ? (a = b, b = u) : 2 === d && (a = c, A(b) ? (c = b, b = u) : c = u); if (!A(c) && x(a)) { var g = []; a.toString().replace($, "").replace(Z, function(a, b, c) { c && g.push(c) }); c = g } d = { id: b, uri: e.resolve(b), deps: c, factory: a }; if (!d.uri && n.attachEvent) { var f = W(); f && (d.uri = f.src) } m("define", d); d.uri ? e.save(d.uri, d) : C = d }; e.save = function(b, c) { var a = e.get(b); a.status < j.SAVED && (a.id = c.id || b, a.dependencies = c.deps || [], a.factory = c.factory, a.status = j.SAVED) }; e.get = function(b, c) { return r[b] || (r[b] = new e(b, c)) }; e.use = function(b, c, a) { var d = e.get(a, A(b) ? b: [b]); d.callback = function() { for (var a = [], b = d.resolve(), e = 0, f = b.length; e < f; e++) a[e] = r[b[e]].exec(); c && c.apply(t, a); delete d.callback }; d.load() }; e.preload = function(b) { var c = h.preload, a = c.length; a ? e.use(c, function() { c.splice(0, a); e.preload(b) }, h.cwd + "_preload_" + w++) : b() }; f.use = function(b, c) { e.preload(function() { e.use(b, c, h.cwd + "_use_" + w++) }); return f }; e.define.cmd = {}; t.define = e.define; f.Module = e; h.fetchedList = H; h.cid = Q; f.resolve = K; f.require = function(b) { return (r[e.resolve(b)] || {}).exports }; h.base = (k.match(/^(.+?\/)(\?\?)?(seajs\/)+/) || ["", k])[1]; h.dir = k; h.cwd = B; h.charset = "utf-8"; var B = h, P = [], q = q.search.replace(/(seajs-\w+)(&|$)/g, "$1=1$2"), q = q + (" " + n.cookie); q.replace(/(seajs-\w+)=1/g, function(b, c) { P.push(c) }); B.preload = P; f.config = function(b) { for (var c in b) { var a = b[c], d = h[c]; if (d && X(d)) for (var e in a) d[e] = a[e]; else A(d) ? a = d.concat(a) : "base" === c && ("/" === a.slice( - 1) || (a += "/"), a = I(a)), h[c] = a } m("config", b); return f } } })(this); </script> <script data-content="errorLoad"> (function(){ var retryMap = {}; seajs.on('request', function(data) { var uri = data.uri; var mod = seajs.cache[uri]; if(mod) { var cb = data.onRequest || function() {}; data.onRequest = function(e) { var ars = arguments; if(!e) return cb.apply(window, ars);//以防万一 if(e.type === 'error') { if(retryMap[uri]) { cb.apply(window, ars); reportLoadInfo(data.requestUri || uri, false, 'retry');//重试失败 } else { if(ignoreErrorLoad(uri)) { cb.apply(window, ars); } else { var retryUri = seajs.resolve(fixPath(uri)); retryMap[uri] = retryUri; retryMap[retryUri] = true; seajs.use(retryUri, function() { if(seajs.cache[retryUri]) { seajs.cache[uri].dependencies = seajs.cache[retryUri].dependencies; seajs.cache[uri].exports = seajs.cache[retryUri].exports; } cb.apply(window, ars); }); } reportLoadInfo(uri, false);//加载失败 } } else { cb.apply(window, ars); if(retryMap[uri]) { reportLoadInfo(data.requestUri || uri, true, 'retry');//重试成功 } else { reportLoadInfo(uri, true);//加载成功 } } }; } }); function reportLoadInfo(uri, done, retry) { if(done && retry || !done) { console.log('SEAJSLOAD --- ' + (retry ? '重试' : '加载') + (done ? '成功' : '失败') + ': ' + uri); } if(retry) { if(done) { window._WebSoNetTime && reportHaboGlobal( 0,'1000369', '/jsreload/fromnet'); reportHaboGlobal( 0,'1000369', '/jsreload/all'); } else { window._WebSoNetTime && reportHaboGlobal( -1 ,'1000369', '/jsreload/fromnet'); reportHaboGlobal( -1,'1000369', '/jsreload/all'); } sendLog('/jsload/error/abcmouse_proxy', 'type: reload ' + (done ? 'succ' : 'fail') + '. url:' + uri + ';'); } else { if(done) { window._WebSoNetTime && reportHaboGlobal( 0 ,'1000369', '/jsload/fromnet'); reportHaboGlobal( 0 ,'1000369', '/jsload/all'); } else { window._WebSoNetTime && reportHaboGlobal( -1 ,'1000369', '/jsload/fromnet'); reportHaboGlobal( -1 ,'1000369', '/jsload/all'); sendLog('/jsload/error/abcmouse_proxy', 'type: load. url:' + uri + ';'); } } } function fixPath(path) { path = path.replace(/\.\d{13}\./,'.').replace(/_offline=1&?/, ''); if(path.indexOf('proxy/domain') === -1) { path = path.replace('//', '//abcmouse.qzone.qq.com/proxy/domain/'); if(path.indexOf('?') !== -1) { path += '&_qzhw_channel=wns'; } else { path += '?_qzhw_channel=wns'; } } else { path = path.replace('abcmouse.qzone.qq.com/proxy/domain/', ''); } return path; } function ignoreErrorLoad(url){ return url.indexOf('.css') !== -1 || url.indexOf('ignoreErrorLoad') !== -1 } function sendLog(path, msg) { var xhr = new XMLHttpRequest(); xhr.open('post', 'https://h5.qzone.qq.com/log/post' + path, true); xhr.withCredentials = true; xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(msg); } }()); </script> <script data-content="seajsConfig"> HYB.loadTimes.commonJsEnd = +new Date(); (function() { seajs.config({ charset: 'utf-8', timeout: 5 * 60 * 1000, debug: 0, paths: { "abcMousePath" : "https://qzonestyle.gtimg.cn/qzone/abcmouse", "hybridPath": "https://qzonestyle.gtimg.cn/qzone/hybrid" }, alias: { "vue": "https://qzonestyle.gtimg.cn/ac/lib/vue/vue-2.0.1.js", "vue230": "https://qzonestyle.gtimg.cn/ac/lib/vue/vue-2.3.0.js", "zepto": "https://qzonestyle.gtimg.cn/ac/lib/zepto/zepto-1.1.4.js", "lib": "abcMousePath/common/lib/index.js?t=1732709542884", "wx_jssdk" : "https://res.wx.qq.com/open/js/jweixin-1.6.0.js?max_age=31536000", "jssdk" : "https://res.wx.qq.com/open/js/jweixin-1.6.0.js?max_age=31536000" } }); })(); </script> <script type="text/javascript" src="https://qzonestyle.gtimg.cn/abcmouse/imgstatic/raven/raven.min.js" crossorigin="anonymous"></script> <script>console.log('openid: undefined')</script><script> var _mtac = {"performanceMonitor":1,"senseQuery":0,"senseHash":0}; (function() { var mta = document.createElement("script"); mta.src = "https://pingjs.qq.com/h5/stats.js?v2.0.4"; mta.setAttribute("name", "MTAH5"); mta.setAttribute("sid", "500602466"); mta.setAttribute("cid", "500602467"); var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mta, s); })(); </script><script> seajs.use(['zepto', 'abcMousePath/home/pc/index.js', 'lib'], function ($, HomePage, lib) { if($ && HomePage && typeof HomePage.init === 'function' && lib) { HomePage.init(); console.log('hello kitty'); } }); </script>  <script data-content="others"> document.body.className = document.body.className; </script> <script> (function() { if (navigator.userAgent.match(/(iPhone)/)) { if ((screen.height == 812) && (screen.width == 375)) { document.body.scrollTop=0 console.log('This is iphoneX'); } else { console.log('This is not iphoneX'); } } })(); </script> <script type="text/javascript" src="https://h5.abcmouse.qq.com/vc/token"></script> </body> </html>

CINXE.COM

腾讯开心鼠英语ABCmouse