Skip to content

H
h5-base
Commit 38838cb0 authored by wangwei's avatar wangwei
Browse files
Options

横屏

parent 396517dd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 882 additions and 67 deletions
dev/index.html
View file @ 38838cb0
...@@ -4,4 +4,4 @@ ...@@ -4,4 +4,4 @@
hm.src = "https://hm.baidu.com/hm.js?3d48322170d471164729cba5dfa4195f"; hm.src = "https://hm.baidu.com/hm.js?3d48322170d471164729cba5dfa4195f";
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})();</script><style></style><link href=/static/css/app.9f631d4069047acf4ee994f5d9f958c3.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script type=text/javascript src=/static/js/manifest.b89e097483df0a4727ad.js></script><script type=text/javascript src=/static/js/vendor.f2f18cf9e4f348a6b3fa.js></script><script type=text/javascript src=/static/js/app.e97debad53d6c02e5060.js></script></body></html> })();</script><style></style><link href=/static/css/app.9f631d4069047acf4ee994f5d9f958c3.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script type=text/javascript src=/static/js/manifest.ad69b2172b4848ee909a.js></script><script type=text/javascript src=/static/js/vendor.f2f18cf9e4f348a6b3fa.js></script><script type=text/javascript src=/static/js/app.e97debad53d6c02e5060.js></script></body></html>
\ No newline at end of file \ No newline at end of file
dev/static/images/index-h.png
View replaced file @ 396517dd View file @ 38838cb0
dev/static/images/index-h.png

10.1 KB | W: | H:

dev/static/images/index-h.png

38.5 KB | W: | H:

dev/static/images/index-h.png
dev/static/images/index-h.png
dev/static/images/index-h.png
dev/static/images/index-h.png
  • 2-up
  • Swipe
  • Onion skin
dev/static/js/0.da4864f81ccf457ab516.js 0 → 100644
View file @ 38838cb0
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/0.da4864f81ccf457ab516.js.map 0 → 100644
View file @ 38838cb0
This diff is collapsed.
dev/static/js/2.200c08870d91dd7064b0.js 0 → 100644
View file @ 38838cb0
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/2.200c08870d91dd7064b0.js.map 0 → 100644
View file @ 38838cb0
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/3.ba480701d0c4bd572a07.js 0 → 100644
View file @ 38838cb0
This diff is collapsed.
dev/static/js/3.ba480701d0c4bd572a07.js.map 0 → 100644
View file @ 38838cb0
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/8.d34b44eb54271674691b.js 0 → 100644
View file @ 38838cb0
This diff is collapsed.
dev/static/js/8.d34b44eb54271674691b.js.map 0 → 100644
View file @ 38838cb0
This diff is collapsed.
dev/static/js/manifest.ad69b2172b4848ee909a.js 0 → 100644
View file @ 38838cb0
!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,a,c){for(var f,d,i,u=0,b=[];u<r.length;u++)d=r[u],t[d]&&b.push(t[d][0]),t[d]=0;for(f in a)Object.prototype.hasOwnProperty.call(a,f)&&(e[f]=a[f]);for(n&&n(r,a,c);b.length;)b.shift()();if(c)for(u=0;u<c.length;u++)i=o(o.s=c[u]);return i};var r={},t={17:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"static/js/"+e+"."+{0:"da4864f81ccf457ab516",1:"4f08b431dc20b51a1896",2:"200c08870d91dd7064b0",3:"ba480701d0c4bd572a07",4:"2a1ed845f5ffb998c7bc",5:"bbb87395fdecb0367966",6:"3e2065223f37d1a9e048",7:"2be225fb52236d3876ed",8:"d34b44eb54271674691b",9:"5d4a39c9e1a784ee9683",10:"01437b5d24dc0988f3d5",11:"e25cf9ab8ad2ef236662",12:"ab60c4b0944ef819faa3",13:"48e5ec8966f3dc4513b2",14:"a87e2de1d70a4657abd8"}[e]+".js";var f=setTimeout(d,12e4);function d(){c.onerror=c.onload=null,clearTimeout(f);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return c.onerror=c.onload=d,a.appendChild(c),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="/",o.oe=function(e){throw console.error(e),e}}([]);
//# sourceMappingURL=manifest.ad69b2172b4848ee909a.js.map
\ No newline at end of file
dev/static/js/manifest.ad69b2172b4848ee909a.js.map 0 → 100644
View file @ 38838cb0
{"version":3,"sources":["webpack:///webpack/bootstrap ee2f72534e4cec18361c"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","17","exports","module","l","e","installedChunkData","Promise","resolve","promise","reject","head","document","getElementsByTagName","script","createElement","type","charset","async","timeout","nc","setAttribute","src","p","0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","setTimeout","onScriptComplete","onerror","onload","clearTimeout","chunk","Error","undefined","appendChild","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,GAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAA,SAAApB,GACA,IAAAqB,EAAAhB,EAAAL,GACA,OAAAqB,EACA,WAAAC,QAAA,SAAAC,GAA0CA,MAI1C,GAAAF,EACA,OAAAA,EAAA,GAIA,IAAAG,EAAA,IAAAF,QAAA,SAAAC,EAAAE,GACAJ,EAAAhB,EAAAL,IAAAuB,EAAAE,KAEAJ,EAAA,GAAAG,EAGA,IAAAE,EAAAC,SAAAC,qBAAA,WACAC,EAAAF,SAAAG,cAAA,UACAD,EAAAE,KAAA,kBACAF,EAAAG,QAAA,QACAH,EAAAI,OAAA,EACAJ,EAAAK,QAAA,KAEArB,EAAAsB,IACAN,EAAAO,aAAA,QAAAvB,EAAAsB,IAEAN,EAAAQ,IAAAxB,EAAAyB,EAAA,aAAAtC,EAAA,KAAwEuC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,GAAA,uBAAAC,GAAA,uBAAAC,GAAA,uBAAAC,GAAA,uBAAAC,GAAA,wBAA0ZrD,GAAA,MACle,IAAAkC,EAAAoB,WAAAC,EAAA,MAEA,SAAAA,IAEA1B,EAAA2B,QAAA3B,EAAA4B,OAAA,KACAC,aAAAxB,GACA,IAAAyB,EAAAtD,EAAAL,GACA,IAAA2D,IACAA,GACAA,EAAA,OAAAC,MAAA,iBAAA5D,EAAA,aAEAK,EAAAL,QAAA6D,GAKA,OAfAhC,EAAA2B,QAAA3B,EAAA4B,OAAAF,EAaA7B,EAAAoC,YAAAjC,GAEAL,GAIAX,EAAAkD,EAAApD,EAGAE,EAAAmD,EAAAjD,EAGAF,EAAAoD,EAAA,SAAAhD,EAAAiD,EAAAC,GACAtD,EAAAuD,EAAAnD,EAAAiD,IACA3D,OAAA8D,eAAApD,EAAAiD,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAtD,EAAA4D,EAAA,SAAAvD,GACA,IAAAiD,EAAAjD,KAAAwD,WACA,WAA2B,OAAAxD,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAoD,EAAAE,EAAA,IAAAA,GACAA,GAIAtD,EAAAuD,EAAA,SAAAO,EAAAC,GAAsD,OAAArE,OAAAC,UAAAC,eAAAC,KAAAiE,EAAAC,IAGtD/D,EAAAyB,EAAA,IAGAzB,EAAAgE,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.ad69b2172b4848ee909a.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t17: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tvar installedChunkData = installedChunks[chunkId];\n \t\tif(installedChunkData === 0) {\n \t\t\treturn new Promise(function(resolve) { resolve(); });\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunkData) {\n \t\t\treturn installedChunkData[2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunkData[2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = \"text/javascript\";\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"da4864f81ccf457ab516\",\"1\":\"4f08b431dc20b51a1896\",\"2\":\"200c08870d91dd7064b0\",\"3\":\"ba480701d0c4bd572a07\",\"4\":\"2a1ed845f5ffb998c7bc\",\"5\":\"bbb87395fdecb0367966\",\"6\":\"3e2065223f37d1a9e048\",\"7\":\"2be225fb52236d3876ed\",\"8\":\"d34b44eb54271674691b\",\"9\":\"5d4a39c9e1a784ee9683\",\"10\":\"01437b5d24dc0988f3d5\",\"11\":\"e25cf9ab8ad2ef236662\",\"12\":\"ab60c4b0944ef819faa3\",\"13\":\"48e5ec8966f3dc4513b2\",\"14\":\"a87e2de1d70a4657abd8\"}[chunkId] + \".js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap ee2f72534e4cec18361c"],"sourceRoot":""}
\ No newline at end of file
src/components/bindMobile.vue
View file @ 38838cb0
...@@ -89,6 +89,7 @@ ...@@ -89,6 +89,7 @@
logoUrl:logoUrl, logoUrl:logoUrl,
mobile:'', mobile:'',
time:0, time:0,
flag:true,
imgCode:'', imgCode:'',
msgCode:'', msgCode:'',
timeSet:null, timeSet:null,
...@@ -137,25 +138,31 @@ ...@@ -137,25 +138,31 @@
} }
}, },
bindMobile(){ bindMobile(){
if(this.msgCode===''||!this.msgCode) { if(this.flag){
Toast('请填写手机验证码'); this.flag = false;
return false; if(this.msgCode===''||!this.msgCode) {
} Toast('请填写手机验证码');
let json={ return false;
verify_code:this.msgCode }
}; let json={
let mobileCheck = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/; verify_code:this.msgCode
if(this.mobile.match(mobileCheck)){ };
json.mobile = this.mobile let mobileCheck = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
}else{ if(this.mobile.match(mobileCheck)){
Toast('请正确填写手机号'); json.mobile = this.mobile
return false }else{
Toast('请正确填写手机号');
return false
}
bindMobileApi(json).then(res=>{
this.$router.push({name:'index'})
this.flag = true
}).catch(res=>{
this.refImgCode();
this.flag = true
})
} }
bindMobileApi(json).then(res=>{
this.$router.push({name:'index'})
}).catch(res=>{
this.refImgCode();
})
} }
} }
} }
......
src/components/map/index.vue
View file @ 38838cb0
This diff is collapsed.
src/components/newLesson/audio.vue
View file @ 38838cb0
This diff is collapsed.
src/components/newLesson/index.vue
View file @ 38838cb0
<template> <template>
<div class="newLesson"> <div class="newLesson">
<!--竖屏导航-->
<div class="header" v-if="!nowLesson.old"> <div class="header" v-if="!nowLesson.old">
<i class="lessonHeader home" @click="backList"></i> <i class="lessonHeader home" @click="backList"></i>
<i :class="{lessonHeader:true, defaultLook:nowShow !== 1,look:nowShow===1}" @click="changeTitle(1)"></i> <i :class="{lessonHeader:true, defaultLook:nowShow !== 1,look:nowShow===1}" @click="changeTitle(1)"></i>
<i :class="{lessonHeader:true, defaultPlay:nowShow !== 2,play:nowShow===2}" @click="changeTitle(2)"></i> <i :class="{lessonHeader:true, defaultPlay:nowShow !== 2,play:nowShow===2}" @click="changeTitle(2)"></i>
<i :class="{lessonHeader:true, defaultFun:nowShow !== 3,fun:nowShow===3}" @click="changeTitle(3)"></i> <i :class="{lessonHeader:true, defaultFun:nowShow !== 3,fun:nowShow===3}" @click="changeTitle(3)"></i>
</div> </div>
<!--横屏导航-->
<div class="header-h"> <div class="header-h">
<i :class="{headerHP:true, defaultLook:nowShow !== 1,lookHP:nowShow===1}" @click="changeTitle(1)"></i> <i :class="{headerHP:true, defaultLook:nowShow !== 1,lookHP:nowShow===1}" @click="changeTitle(1)"></i>
<i :class="{headerHP:true, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="changeTitle(2)"></i> <i :class="{headerHP:true, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="changeTitle(2)"></i>
<i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="changeTitle(3)"></i> <i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="changeTitle(3)"></i>
<i class="lessonHeader home" @click="backList"></i> <i class="headerHP home" @click="backList"></i>
</div> </div>
<!--老课包返回按钮-->
<img :src="backUrl" v-if="nowLesson.old" @click="backList" class="backImg"> <img :src="backUrl" v-if="nowLesson.old" @click="backList" class="backImg">
<div class="header-h"> <!--内容-->
<div class="header-list active"> <div :class="{'index-content-block':true,radius:nowShow !== 1}">
<i class="index-h look-h"></i>
</div>
<div class="header-list">
<i class="index-h play-h"></i>
</div>
<div class="header-list">
<i class="index-h fun-h"></i>
</div>
<div class="header-list">
<i class="index-h home-h"></i>
</div>
</div>
<div class="index-content-block">
<look-block v-if="nowLesson.type === 'text'" :contentData="nowLesson"/> <look-block v-if="nowLesson.type === 'text'" :contentData="nowLesson"/>
<video-block v-if="nowLesson.type === 'video'" :contentData="nowLesson" :nowShow="nowShow"/> <video-block v-if="nowLesson.type === 'video'" :contentData="nowLesson" :nowShow="nowShow"/>
<audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson"/> <audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson"/>
...@@ -170,6 +160,59 @@ ...@@ -170,6 +160,59 @@
} }
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@toVw:100/667vw;
.lessonHeader{
display: none;
}
.header{
display: none;
}
.actBanKuai{
background-color: white;
border: 1*@toVw solid transparent;
border-left-color: black;
border-top-color: black;
border-bottom-color: black;
border-radius: 8*@toVw 0 0 8*@toVw;
}
.headerHP{
background:url('/static/images/index-h.png') no-repeat;
background-size:62*@toVw 434*@toVw;
display: inline-block;
&.lookHP{height:62*@toVw;width:62*@toVw;background-position:0 0;.actBanKuai}
&.defaultPlay{height:62*@toVw;width:62*@toVw;background-position:0 -62*@toVw;}
&.playHP{height:62*@toVw;width:62*@toVw;background-position:0 -124*@toVw;.actBanKuai}
&.defaultLook{height:62*@toVw;width:62*@toVw;background-position:0 -186*@toVw;}
&.home{height:62*@toVw;width:62*@toVw;background-position:0 -248*@toVw;}
&.defaultFun{height:62*@toVw;width:62*@toVw;background-position:0 -310*@toVw;}
&.funHP{height:62*@toVw;width:62*@toVw;background-position:0 -372*@toVw;.actBanKuai}
}
.header-h{
display: block;
width: 62*@toVw;
position: absolute;
left: 17.5*@toVw;
top: 20*@toVw;
z-index: 2;
.headerHP{
display: block;
}
}
.index-content-block{
position: absolute;
top: 20*@toVw;
left: 80*@toVw;
right: 20*@toVw;
bottom: 20*@toVw;
background: white;
border: 1*@toVw solid #000;
border-radius: 0 8*@toVw 8*@toVw 8*@toVw;
&.radius{
border-radius: 8*@toVw;
}
}
} }
</style> </style>
src/components/newLesson/look.vue
View file @ 38838cb0
...@@ -59,6 +59,33 @@ ...@@ -59,6 +59,33 @@
padding: 10*@toVw; padding: 10*@toVw;
} }
} }
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.look-content{
position: absolute;
top: 20*@toVw;
bottom: 20*@toVw;
left: 20*@toVw;
right: 20*@toVw;
background:rgba(255,255,255,1);
box-shadow:inset 0*@toVw 1*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.2);
overflow: auto;
border-radius:8*@toVw;
padding: 20*@toVw;
.content{
width: 300*@toVw;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
border-radius: 8px;
padding: 10*@toVw;
}
}
}
</style> </style>
<style> <style>
.old-content img,.old-content video{ .old-content img,.old-content video{
......
src/components/newLesson/video.vue
View file @ 38838cb0
...@@ -8,15 +8,29 @@ ...@@ -8,15 +8,29 @@
<div class="video-block" v-for="data in showObj.video"> <div class="video-block" v-for="data in showObj.video">
<video :src="data.url" controls :poster="data.url+'?vframe/jpg/offset/3'"></video> <video :src="data.url" controls :poster="data.url+'?vframe/jpg/offset/3'"></video>
</div> </div>
<div class="video-block hp-video" v-if="showObj.video[videoIndex]">
<video :src="showObj.video[videoIndex].url" controls :poster="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'"></video>
</div>
<div class="btn-block"> <div class="btn-block">
<div v-if="contentData.content.age" class="age-block" @click="ageShow = !ageShow"> <div v-if="contentData.content.age" class="age-block" @click="ageShow = !ageShow">
<div v-if="contentData.age === 1">0-3岁<i class="playImage _154722344142123489"></i></div> <div v-if="contentData.age === 1">0-3岁<i class="playImage _154722344142123489"></i></div>
<div v-if="contentData.age === 2">4-6岁<i class="playImage _154722344142123489"></i></div> <div v-if="contentData.age === 2">4-6岁<i class="playImage _154722344142123489"></i></div>
</div> </div>
<div v-if="showObj.video.length > 1" class="age-block" @click="videoShow = !videoShow">
<div>视频({{videoIndex+1}})<i class="playImage _154722344142123489"></i></div>
</div>
<div class="age-change-block" v-show="videoShow" v-if="showObj.video.length > 1">
<div @click="videoIndex= index;videoShow=false" v-for="(item,index) in showObj.video">视频({{index+1}})<i :class="{'playImage _282918034425091245':index === videoIndex}" v-if="contentData.age === 1"></i></div>
</div>
<div class="age-change-block" v-show="ageShow" v-if="contentData.content.age"> <div class="age-change-block" v-show="ageShow" v-if="contentData.content.age">
<div @click="contentData.age = 1;ageShow=false">0-3岁<i class="playImage _282918034425091245" v-if="contentData.age === 1"></i></div> <div @click="contentData.age = 1;ageShow=false">0-3岁<i class="playImage _282918034425091245" v-if="contentData.age === 1"></i></div>
<div @click="contentData.age = 2;ageShow=false">4-6岁<i class="playImage _282918034425091245" v-if="contentData.age === 2"></i></div> <div @click="contentData.age = 2;ageShow=false">4-6岁<i class="playImage _282918034425091245" v-if="contentData.age === 2"></i></div>
</div> </div>
<div v-if="showObj.change" class="change-block-HP" @click="changeAudio()">
<div class="">
<img :src="imgURL.tapToAudio"/>
</div>
</div>
<div v-if="showObj.change" class="change-block"> <div v-if="showObj.change" class="change-block">
<div class="active">视频教学</div> <div class="active">视频教学</div>
<div @click="changeAudio()">音频教学</div> <div @click="changeAudio()">音频教学</div>
...@@ -32,6 +46,7 @@ ...@@ -32,6 +46,7 @@
import luolacoming from '../../assets/newLesson/luoLacoming.png' import luolacoming from '../../assets/newLesson/luoLacoming.png'
import luolalaila from '../../assets/newLesson/luolalaila.png' import luolalaila from '../../assets/newLesson/luolalaila.png'
import guideBlock from '../guide/video' import guideBlock from '../guide/video'
import tapToAudio from '../../assets/tapToAudio.png'
export default { export default {
name: "play", name: "play",
components:{ components:{
...@@ -44,9 +59,12 @@ ...@@ -44,9 +59,12 @@
video:[], video:[],
change:false change:false
}, },
videoShow:false,
videoIndex:0,
imgURL:{ imgURL:{
luolacoming:luolacoming, luolacoming:luolacoming,
luolalaila:luolalaila luolalaila:luolalaila,
tapToAudio:tapToAudio
} }
} }
}, },
...@@ -115,6 +133,9 @@ ...@@ -115,6 +133,9 @@
border: 1*@toVw solid #666; border: 1*@toVw solid #666;
border-radius: 12*@toVw; border-radius: 12*@toVw;
padding: 8*@toVw; padding: 8*@toVw;
&.hp-video{
display: none;
}
video{ video{
width: 100%; width: 100%;
margin: 0; margin: 0;
...@@ -186,4 +207,100 @@ ...@@ -186,4 +207,100 @@
} }
} }
} }
.change-block-HP{
display: none;
}
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.video-page{
position: absolute;
top: 5*@toVw;
bottom: 5*@toVw;
left: 5*@toVw;
right: 5*@toVw;
background:rgba(255,255,255,1);
overflow: auto;
border-radius:8*@toVw;
.content{
position: static;
height: 100%;
width: 100%;
display: flex;
border-radius: 8px;
padding: 0;
.header{
display: none;
}
.video-block{
display: none;
&.hp-video{
display: inline-block;
margin: 0 10*@toVw 0 0;
border: none;
height: 100%;
border-radius: 12*@toVw;
padding: 0;
}
video{
height: 100%;
margin: auto;
width: auto;
display: block;
background:rgba(0,0,0,0.4);
border-radius:8*@toVw;
}
}
.btn-block{
position:relative;
min-width:90*@toVw ;
display: block;
height: 100%;
.age-block{
display: block;
position: static;
padding: 0;
height: 28*@toVw;
width: 88*@toVw;
line-height: 28*@toVw;
border: 1*@toVw solid #666;
border-radius: 100*@toVw;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
}
.age-change-block{
position: static;
width: 80*@toVw;
margin-top: 10*@toVw;
border-radius: 8*@toVw;
border: 1*@toVw solid #666666;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
&>div{
padding: 6*@toVw 11*@toVw;
text-align: left;
&:first-child{
border-bottom: 1*@toVw solid #eee;
}
}
}
.change-block-HP{
position: absolute;
bottom: 0;
display: block;
width: 78*@toVw;
img{
width: 100%;
}
}
.change-block{
display: none;
}
}
}
}
}
</style> </style>
src/components/public/bottomTab.vue
View file @ 38838cb0
...@@ -56,4 +56,36 @@ ...@@ -56,4 +56,36 @@
} }
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.bottom-tab{
width: 667*@toVw;
height: 48*@toVw;
position: fixed;
left: 0;
bottom: 0;
box-shadow:0px -1px 2px 0px rgba(204,204,204,0.5);
padding: 0 6*@toVw;
display: flex;
font-size:10px;
font-family:PingFang-SC-Medium;
text-align: center;
font-weight:normal;
color:#ccc;
line-height:14px;
z-index: 30;
background: white;
&>div{
width: 50%;
}
.left{
border-right: 1px solid #eeeeee;
}
.actived{
color: #6EB1FF;
}
}
}
</style> </style>
static/images/index-h.png
View replaced file @ 396517dd View file @ 38838cb0
static/images/index-h.png

10.1 KB | W: | H:

static/images/index-h.png

38.5 KB | W: | H:

static/images/index-h.png
static/images/index-h.png
static/images/index-h.png
static/images/index-h.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment