commit 90b7627eeaabc62ea2c0d1f1cef8c172c1818b24 Author: Yo Vinchen <2982554722@qq.com> Date: Sun Aug 28 18:09:27 2022 +0800 Initial commit diff --git a/.idea/$PROJECT_FILE$ b/.idea/$PROJECT_FILE$ new file mode 100644 index 0000000..c1ce1bb --- /dev/null +++ b/.idea/$PROJECT_FILE$ @@ -0,0 +1,468 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..35410ca --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# 默认忽略的文件 +/shelf/ +/workspace.xml +# 基于编辑器的 HTTP 客户端请求 +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..6560a98 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,36 @@ + + + + \ No newline at end of file diff --git a/.idea/intellij-javadocs-4.0.1.xml b/.idea/intellij-javadocs-4.0.1.xml new file mode 100644 index 0000000..90d3347 --- /dev/null +++ b/.idea/intellij-javadocs-4.0.1.xml @@ -0,0 +1,204 @@ + + + + + UPDATE + false + true + + FIELD + METHOD + TYPE + + + PUBLIC + PROTECTED + DEFAULT + + + + + + ^.*(public|protected|private)*.+interface\s+\w+.* + /**\n + * The interface ${name}.\n +<#if element.typeParameters?has_content> * \n +</#if> +<#list element.typeParameters as typeParameter> + * @param <${typeParameter.name}> the type parameter\n +</#list> + */ + + + ^.*(public|protected|private)*.+enum\s+\w+.* + /**\n + * The enum ${name}.\n + */ + + + ^.*(public|protected|private)*.+class\s+\w+.* + /**\n + * The type ${name}.\n +<#if element.typeParameters?has_content> * \n +</#if> +<#list element.typeParameters as typeParameter> + * @param <${typeParameter.name}> the type parameter\n +</#list> + */ + + + .+ + /**\n + * The type ${name}.\n + */ + + + + + .+ + /**\n + * Instantiates a new ${name}.\n +<#if element.parameterList.parameters?has_content> + *\n +</#if> +<#list element.parameterList.parameters as parameter> + * @param ${parameter.name} the ${paramNames[parameter.name]}\n +</#list> +<#if element.throwsList.referenceElements?has_content> + *\n +</#if> +<#list element.throwsList.referenceElements as exception> + * @throws ${exception.referenceName} the ${exceptionNames[exception.referenceName]}\n +</#list> + */ + + + + + ^.*(public|protected|private)*\s*.*(\w(\s*<.+>)*)+\s+get\w+\s*\(.*\).+ + /**\n + * Gets ${partName}.\n +<#if element.typeParameters?has_content> * \n +</#if> +<#list element.typeParameters as typeParameter> + * @param <${typeParameter.name}> the type parameter\n +</#list> +<#if element.parameterList.parameters?has_content> + *\n +</#if> +<#list element.parameterList.parameters as parameter> + * @param ${parameter.name} the ${paramNames[parameter.name]}\n +</#list> +<#if isNotVoid> + *\n + * @return the ${partName}\n +</#if> +<#if element.throwsList.referenceElements?has_content> + *\n +</#if> +<#list element.throwsList.referenceElements as exception> + * @throws ${exception.referenceName} the ${exceptionNames[exception.referenceName]}\n +</#list> + */ + + + ^.*(public|protected|private)*\s*.*(void|\w(\s*<.+>)*)+\s+set\w+\s*\(.*\).+ + /**\n + * Sets ${partName}.\n +<#if element.typeParameters?has_content> * \n +</#if> +<#list element.typeParameters as typeParameter> + * @param <${typeParameter.name}> the type parameter\n +</#list> +<#if element.parameterList.parameters?has_content> + *\n +</#if> +<#list element.parameterList.parameters as parameter> + * @param ${parameter.name} the ${paramNames[parameter.name]}\n +</#list> +<#if isNotVoid> + *\n + * @return the ${partName}\n +</#if> +<#if element.throwsList.referenceElements?has_content> + *\n +</#if> +<#list element.throwsList.referenceElements as exception> + * @throws ${exception.referenceName} the ${exceptionNames[exception.referenceName]}\n +</#list> + */ + + + ^.*((public\s+static)|(static\s+public))\s+void\s+main\s*\(\s*String\s*(\[\s*\]|\.\.\.)\s+\w+\s*\).+ + /**\n + * The entry point of application.\n + + <#if element.parameterList.parameters?has_content> + *\n +</#if> + * @param ${element.parameterList.parameters[0].name} the input arguments\n +<#if element.throwsList.referenceElements?has_content> + *\n +</#if> +<#list element.throwsList.referenceElements as exception> + * @throws ${exception.referenceName} the ${exceptionNames[exception.referenceName]}\n +</#list> + */ + + + .+ + /**\n + * ${name}<#if isNotVoid> ${return}</#if>.\n +<#if element.typeParameters?has_content> * \n +</#if> +<#list element.typeParameters as typeParameter> + * @param <${typeParameter.name}> the type parameter\n +</#list> +<#if element.parameterList.parameters?has_content> + *\n +</#if> +<#list element.parameterList.parameters as parameter> + * @param ${parameter.name} the ${paramNames[parameter.name]}\n +</#list> +<#if isNotVoid> + *\n + * @return the ${return}\n +</#if> +<#if element.throwsList.referenceElements?has_content> + *\n +</#if> +<#list element.throwsList.referenceElements as exception> + * @throws ${exception.referenceName} the ${exceptionNames[exception.referenceName]}\n +</#list> + */ + + + + + ^.*(public|protected|private)*.+static.*(\w\s\w)+.+ + /**\n + * The constant ${element.getName()}.\n + */ + + + ^.*(public|protected|private)*.*(\w\s\w)+.+ + /**\n + <#if element.parent.isInterface()> + * The constant ${element.getName()}.\n +<#else> + * The ${name}.\n +</#if> */ + + + .+ + /**\n + <#if element.parent.isEnum()> + *${name} ${typeName}.\n +<#else> + * The ${name}.\n +</#if>*/ + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..b42ef6e --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,18 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..132c45e --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/qaplug_profiles.xml b/.idea/qaplug_profiles.xml new file mode 100644 index 0000000..3dfd21f --- /dev/null +++ b/.idea/qaplug_profiles.xml @@ -0,0 +1,465 @@ + + + + + \ No newline at end of file diff --git a/css/course.css b/css/course.css new file mode 100644 index 0000000..eea5f93 --- /dev/null +++ b/css/course.css @@ -0,0 +1,336 @@ +@import 'public.css'; +.clearfix { + display: block; + content: ''; + clear: both; +} +nav { + width: 100%; + height: 80px; + background: #fff; + box-shadow: 0 2px 3px #dad6d6; + vertical-align: top; +} +nav .main { + width: 1180px; + margin: 0 auto; +} +nav .main ul li:hover { + background: #80C4AE; + color: #fff; +} +nav .main ul li:hover a { + color: #fff; + font-size: 16px; +} +nav .logo { + width: 179px; + height: 53px; + margin: 13px 0 14px 0; +} +nav ul { + display: inline-block; + margin-left: 120px; + border: none; + font-size: 0; +} +nav ul li { + display: inline-block; + width: 80px; + height: 80px; + line-height: 80px; + margin-right: 17px; + text-align: center; +} +nav ul li a { + color: #333; + font-size: 16px; +} +nav ul li:last-child { + margin-right: 0; +} +nav div.search { + display: inline-block; + margin-left: 120px; + border: 1px solid #80C4AE; + border-radius: 3px; + width: 280px; + height: 36px; + text-align: center; + font-size: 0; + padding: 0; + overflow: hidden; + vertical-align: middle; + position: relative; +} +nav div.search .left { + width: 69px; + height: 36px; + border-right: 1px solid #80C4AE; + font-size: 14px; + text-align: center; + line-height: 36px; + float: left; + color: #80C4AE; + padding: 0; +} +nav div.search .left i { + margin-left: 6px; + font-size: 5px; +} +nav div.search input { + border: none; + outline: none; + display: inline-block; + height: 36px; + text-align: center; + font-weight: 400; + font-size: 14px; +} +nav div.search img { + width: 20px; + height: 20px; + position: absolute; + right: 7px; + top: 8px; +} +nav .user { + display: inline-block; + margin-left: 24px; +} +nav .user img { + width: 36px; + height: 36px; + border-radius: 50%; +} +nav .main .user { + position: relative; +} +nav .main .user .userlist { + width: 122px; + height: 269px; + background: url('../img/login/jx.png') no-repeat; + background-size: cover; + position: absolute; + top: 35px; + right: -15px; + display: none; + z-index: 99999; +} +nav .main .user .userlist ul { + width: 122px; + height: 100%; + padding-top: 30px; + margin-left: 0; +} +nav .main .user .userlist ul li { + font-size: 16px; + color: #333; + line-height: 30px; + height: 40px; + text-align: center; + width: 100%; + cursor: pointer; +} +nav .main .user .userlist ul li:hover { + background: none; +} +nav .main .user .userlist ul li:last-child { + color: #666; +} +nav .main .user:hover .userlist { + display: block; +} +main { + width: 1180px; + margin: 0 auto; + height: 736px; + margin-top: 30px; +} +main .leftNav { + width: 220px; + height: 451px; + background: #FFFFFF; + box-shadow: 0px -1px 3px 3px rgba(0, 0, 0, 0.03); + border-radius: 4px; + float: left; + cursor: pointer; +} +main .leftNav > ul { + padding: 25px 0px; +} +main .leftNav>ul>li .class { + background: url(../img/userSet/set_01.jpg) 17px center no-repeat; +} +main .leftNav > ul > li .order { + background: url(../img/userSet/set_03.jpg) 17px center no-repeat; +} +main .leftNav > ul > li .money { + background: url(../img/userSet/set_02.jpg) 17px center no-repeat; +} +main .leftNav > ul > li .center { + background: url(../img/userSet/set_04.jpg) 17px center no-repeat; +} +main .leftNav > ul > li > p { + display: block; + width: 100%; + position: relative; + padding-left: 60px; + padding-top: 10px; + padding-bottom: 10px; +} +main .leftNav > ul > li > p span { + display: block; + font-size: 14px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #333333; +} +main .leftNav > ul > li > p i { + position: absolute; + right: 40px; + top: 10px; +} +main .leftNav > ul > li ol > li { + padding-left: 60px; + margin-top: 5px; + font-size: 12px; + color: #666666; + height: 25px; + line-height: 25px; +} +main .leftNav > ul > li ol .active { + color: #80C4AE; +} +main .rightUser { + float: left; + padding-top: 25px; + padding-left: 30px; +} +main .rightUser .title_top { + height: 50px; + line-height: 50px; +} +main .rightUser .title_top span { + display: inline-block; +} + +/* 列表 */ +.lesson{ + width: 930px; +} +.lesson ul li{ + width: 440px; + height: 256px; + box-shadow: 0 2px 5px #dad6d6; + background: #fff; + position: relative; + overflow: hidden; + margin: 0 30px 30px 0; + float: left; + cursor: pointer; +} +.lesson ul li:nth-child(2n){ + margin-right: 0; +} + + +.lesson ul li .top { + width: 440px; + height: 196px; + vertical-align: top; + overflow: hidden; +} +.lesson ul li .top img{ + width: 100%; + height: 100%; +} +.lesson ul li .top p{ + position: absolute; + bottom: 60px; + left: 0; + width: 100%; + height: 33px; + line-height: 33px; + font-size: 14px; + background: #000000; + color: #fff; + padding-left: 10px; + opacity: 0.3; +} + +.lesson ul li .bottom { + width: 100%; + height: 62px; + overflow: hidden; + line-height: 20px; + font-size: 14px; + color: #333; + margin-top: 7px; + padding-left: 14px; +} +.lesson .bottom span{ + display: block; +} +.lesson .bottom span.time { + margin-top: 5px; + font-size: 14px; + line-height: 17px; + color: #7A7A7A; +} +.lesson .bottom .right { + float: right; + margin-top: 12px; + margin-right: 14px; + width: 86px; + height: 30px; + line-height: 30px; + font-size: 16px; + color: #fff; + background: #74C6B3; + text-align: center; + border-radius: 4px; +} + +footer { + width: 100%; + height: 264px; + background: #333; + margin-top: 36px; + padding-top: 87px; +} +footer .cont { + width: 1180px; + height: 100%; + margin: 0 auto; +} +footer .cont .main { + width: 1153px; + height: 90px; + color: #ccc; + font-size: 14px; + line-height: 18px; + text-align: center; + margin: 0 auto; +} +footer .cont .main p { + margin-top: 5px; +} +div.fix { + position: fixed; + width: 70px; + height: 220px; + bottom: 10px; + right: 0px; +} +div.fix .lesson { + width: 70px; + height: 70px; +} +div.fix .test { + margin: 5px auto; +} +div.fix img { + width: 70px; + height: 70px; +} diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..b4c6e92 --- /dev/null +++ b/css/index.css @@ -0,0 +1,862 @@ +@import 'public.css'; +.clearfix { + display: block; + clear: both; + content: ''; +} +nav { + width: 100%; + height: 80px; + background: #fff; + box-shadow: 0 2px 3px #dad6d6; + vertical-align: top; +} +nav .main { + width: 1180px; + margin: 0 auto; +} +nav .logo { + width: 179px; + height: 53px; + margin: 13px 0 14px 0; +} +nav ul { + display: inline-block; + margin-left: 120px; + border: none; + font-size: 0; +} +nav ul li { + display: inline-block; + width: 80px; + height: 80px; + line-height: 80px; + margin-right: 17px; + text-align: center; +} +nav ul li a { + color: #333; + font-size: 16px; +} +nav ul li:last-child { + margin-right: 0; +} +nav ul .check { + background: #80C4AE; + color: #fff; +} +nav ul .check a { + color: #fff; + font-size: 16px; +} +nav div.search { + display: inline-block; + margin-left: 120px; + border: 1px solid #80C4AE; + border-radius: 3px; + width: 280px; + height: 36px; + text-align: center; + font-size: 0; + padding: 0; + overflow: hidden; + vertical-align: middle; + position: relative; +} +nav div.search .left { + width: 69px; + height: 36px; + border-right: 1px solid #80C4AE; + font-size: 14px; + text-align: center; + line-height: 36px; + float: left; + color: #80C4AE; + padding: 0; +} +nav div.search .left i { + margin-left: 6px; + font-size: 5px; +} +nav div.search input { + border: none; + outline: none; + display: inline-block; + height: 36px; + text-align: center; + font-weight: 400; + font-size: 14px; +} +nav div.search img { + width: 20px; + height: 20px; + position: absolute; + right: 7px; + top: 8px; +} +nav .login { + margin-left: 24px; + display: inline-block; + color: #80C4AE; + font-size: 14px; +} +nav .user { + display: inline-block; + margin-left: 24px; + display: none; +} +nav .user img { + width: 36px; + height: 36px; + border-radius: 50%; +} +nav .main .user { + position: relative; +} +nav .main .user .userlist { + width: 122px; + height: 269px; + background: url('../img/login/jx.png') no-repeat; + background-size: cover; + position: absolute; + top: 35px; + right: -15px; + display: none; + z-index: 99999; +} +nav .main .user .userlist ul { + width: 122px; + height: 100%; + padding-top: 30px; + margin-left: 0; +} +nav .main .user .userlist ul li { + font-size: 16px; + color: #333; + line-height: 30px; + height: 40px; + text-align: center; + width: 100%; + cursor: pointer; +} +nav .main .user:hover .userlist { + display: block; +} +main .banner { + width: 1180px; + height: 350px; + margin: 0 auto; + margin-top: 23px; + position: relative; +} +main .banner .img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +main .banner .img li { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; +} +main .banner .img li.active { + opacity: 1; +} +main .banner .img li img { + width: 100%; + height: 100%; +} +main .banner .list { + width: 198px; + height: 250px; + background: #000000; + border-radius: 4px; + opacity: 0.5; + position: absolute; + right: 20px; + top: 50px; + line-height: 20px; + box-sizing: border-box; + padding-top: 29px; +} +main .banner .list li { + padding-left: 33px; + height: 20px; + font-size: 14px; + font-weight: 600; + color: #E4E4E4; + line-height: 20px; + margin-bottom: 14px; + cursor: pointer; +} +main .banner .list li.high { + color: #71FFDE; + opacity: 1; + background: url(../img/index/left.png) no-repeat 20px 6px; +} +main .online { + width: 1180px; + margin: 44px auto 0; +} +main .online .title { + height: auto; +} +main .online .title span { + width: 80px; + height: 28px; + font-size: 20px; + font-weight: 400; + color: #333; + line-height: 28px; + display: inline-block; + vertical-align: middle; +} +main .online .title span.line { + width: 6px; + height: 20px; + background: #74C6B3; + margin-right: 10px; +} +main .online .title span.more { + display: block; + float: right; + margin-right: 11px; + width: auto; + color: #74C6B3; +} +main .online .title span.more i { + margin-left: 11px; +} +main .online .onlineCont { + width: 1180px; + height: auto; +} +main .online .onlineCont div.content { + width: 1180px; + margin: 20px auto 0; +} +main .online .onlineCont div.content ul li { + width: 280px; + height: 225px; + box-shadow: 0 2px 3px #dad6d6; + background: #fff; + position: relative; + overflow: hidden; + margin: 0 20px 20px 0; + float: left; +} +main .online .onlineCont div.content ul li:nth-child(4n) { + margin-right: 0; +} +main .online .onlineCont div.content ul li .top { + width: 280px; + height: 163px; + vertical-align: top; + overflow: hidden; +} +main .online .onlineCont div.content ul li .top .rj { + position: absolute; + left: 0; + top: 0; + border-radius: 4px 0px 12px 0px; + background: #000000; + color: #000; + display: block; + width: 71px; + height: 33px; + font-size: 14px; + line-height: 33px; + text-align: center; + color: #fff; + opacity: 0.3; +} +main .online .onlineCont div.content ul li .top img.m { + width: 280px; + height: 163px; +} +main .online .onlineCont div.content ul li .top > p { + position: absolute; + bottom: 63px; + left: 0; + width: 100%; + height: 33px; + line-height: 33px; + font-size: 14px; + background: #000000; + color: #fff; + padding-left: 10px; + opacity: 0.3; +} +main .online .onlineCont div.content ul li .bottom { + width: 100%; + height: 62px; + overflow: hidden; + line-height: 20px; + font-size: 14px; + color: #333; + margin-top: 10px; + padding-left: 10px; +} +main .online .onlineCont div.content ul li .bottom .left { + float: left; +} +main .online .onlineCont div.content ul li .bottom .left span { + display: block; +} +main .online .onlineCont div.content ul li .bottom .left span.time { + margin-top: 5px; + font-size: 14px; + line-height: 17px; + color: #7A7A7A; +} +main .online .onlineCont div.content ul li .bottom .right { + float: right; + margin-top: 12px; + margin-right: 5px; + width: 86px; + height: 30px; + line-height: 30px; + font-size: 16px; + color: #fff; + background: #74C6B3; + text-align: center; + border-radius: 4px; +} +main .online .onlineCont div.content ul::after { + display: block; + content: ''; + clear: both; + zoom: 1; +} +main .contBanner { + width: 1180px; + height: 186px; + margin: 31px auto 0; +} +main .contBanner img { + width: 100%; + height: 100%; +} +main .testClass { + width: 1180px; + margin: 44px auto 0; +} +main .testClass .title { + height: auto; +} +main .testClass .title span { + width: 80px; + height: 28px; + font-size: 20px; + font-weight: 400; + color: #333; + line-height: 28px; + display: inline-block; + vertical-align: middle; +} +main .testClass .title span.line { + width: 6px; + height: 20px; + background: #74C6B3; + margin-right: 10px; +} +main .testClass .title span.more { + display: block; + float: right; + margin-right: 11px; + width: auto; + color: #74C6B3; +} +main .testClass .title span.more i { + margin-left: 11px; +} +main .testClass .onlineCont { + width: 1180px; + height: auto; +} +main .testClass .onlineCont div.content { + width: 1180px; + margin: 20px auto 0; +} +main .testClass .onlineCont div.content ul li { + width: 280px; + height: 225px; + box-shadow: 0 2px 3px #dad6d6; + background: #fff; + position: relative; + overflow: hidden; + margin: 0 20px 20px 0; + float: left; +} +main .testClass .onlineCont div.content ul li:nth-child(4n) { + margin-right: 0; +} +main .testClass .onlineCont div.content ul li .top { + width: 280px; + height: 163px; + vertical-align: top; + overflow: hidden; +} +main .testClass .onlineCont div.content ul li .top .rj { + position: absolute; + left: 0; + top: 0; + border-radius: 4px 0px 12px 0px; + background: #000000; + color: #000; + display: block; + width: 71px; + height: 33px; + font-size: 14px; + line-height: 33px; + text-align: center; + color: #fff; + opacity: 0.3; +} +main .testClass .onlineCont div.content ul li .top img.m { + width: 280px; + height: 163px; +} +main .testClass .onlineCont div.content ul li .top > p { + position: absolute; + bottom: 63px; + left: 0; + width: 100%; + height: 33px; + line-height: 33px; + font-size: 14px; + background: #000000; + color: #fff; + padding-left: 10px; + opacity: 0.3; +} +main .testClass .onlineCont div.content ul li .bottom { + width: 100%; + height: 62px; + overflow: hidden; + line-height: 20px; + font-size: 14px; + color: #333; + margin-top: 10px; + padding-left: 10px; +} +main .testClass .onlineCont div.content ul li .bottom .left { + float: left; +} +main .testClass .onlineCont div.content ul li .bottom .left span { + display: block; +} +main .testClass .onlineCont div.content ul li .bottom .left span.time { + margin-top: 5px; + font-size: 14px; + line-height: 17px; + color: #7A7A7A; +} +main .testClass .onlineCont div.content ul li .bottom .right { + float: right; + margin-top: 12px; + margin-right: 5px; + width: 86px; + height: 30px; + line-height: 30px; + font-size: 16px; + color: #fff; + background: #74C6B3; + text-align: center; + border-radius: 4px; +} +main .testClass .onlineCont div.content ul::after { + display: block; + content: ''; + clear: both; + zoom: 1; +} +main .testClass .onlineCont div.content ul li { + width: 379px; + height: 224px; + overflow: hidden; +} +main .testClass .onlineCont div.content ul li .top { + width: 379px; + height: 163px; +} +main .testClass .onlineCont div.content ul li .top img.m { + width: 100%; + height: 163px; +} +main .testClass .onlineCont div.content ul li .top p { + padding-right: 28px; +} +main .testClass .onlineCont div.content ul li .top span:nth-child(1) { + display: block; + float: right; + font-size: 12px; +} +main .testClass .onlineCont div.content ul li .top span:nth-child(2) { + display: block; + float: left; +} +main .testClass .onlineCont div.content ul li .bottom div.left { + width: 140px; +} +main .testClass .onlineCont div.content ul li:nth-child(3n) { + margin-right: 0; +} +main .testClass .onlineCont div.content ul li:nth-child(4n) { + margin-right: 20px; +} +main .goodClass { + width: 1180px; + margin: 44px auto 0; +} +main .goodClass .title { + height: auto; +} +main .goodClass .title span { + width: 80px; + height: 28px; + font-size: 20px; + font-weight: 400; + color: #333; + line-height: 28px; + display: inline-block; + vertical-align: middle; +} +main .goodClass .title span.line { + width: 6px; + height: 20px; + background: #74C6B3; + margin-right: 10px; +} +main .goodClass .title span.more { + display: block; + float: right; + margin-right: 11px; + width: auto; + color: #74C6B3; +} +main .goodClass .title span.more i { + margin-left: 11px; +} +main .goodClass .onlineCont { + width: 1180px; + height: auto; +} +main .goodClass .onlineCont div.content { + width: 1180px; + margin: 20px auto 0; +} +main .goodClass .onlineCont div.content ul li { + width: 280px; + height: 225px; + box-shadow: 0 2px 3px #dad6d6; + background: #fff; + position: relative; + overflow: hidden; + margin: 0 20px 20px 0; + float: left; +} +main .goodClass .onlineCont div.content ul li:nth-child(4n) { + margin-right: 0; +} +main .goodClass .onlineCont div.content ul li .top { + width: 280px; + height: 163px; + vertical-align: top; + overflow: hidden; +} +main .goodClass .onlineCont div.content ul li .top .rj { + position: absolute; + left: 0; + top: 0; + border-radius: 4px 0px 12px 0px; + background: #000000; + color: #000; + display: block; + width: 71px; + height: 33px; + font-size: 14px; + line-height: 33px; + text-align: center; + color: #fff; + opacity: 0.3; +} +main .goodClass .onlineCont div.content ul li .top img.m { + width: 280px; + height: 163px; +} +main .goodClass .onlineCont div.content ul li .top > p { + position: absolute; + bottom: 63px; + left: 0; + width: 100%; + height: 33px; + line-height: 33px; + font-size: 14px; + background: #000000; + color: #fff; + padding-left: 10px; + opacity: 0.3; +} +main .goodClass .onlineCont div.content ul li .bottom { + width: 100%; + height: 62px; + overflow: hidden; + line-height: 20px; + font-size: 14px; + color: #333; + margin-top: 10px; + padding-left: 10px; +} +main .goodClass .onlineCont div.content ul li .bottom .left { + float: left; +} +main .goodClass .onlineCont div.content ul li .bottom .left span { + display: block; +} +main .goodClass .onlineCont div.content ul li .bottom .left span.time { + margin-top: 5px; + font-size: 14px; + line-height: 17px; + color: #7A7A7A; +} +main .goodClass .onlineCont div.content ul li .bottom .right { + float: right; + margin-top: 12px; + margin-right: 5px; + width: 86px; + height: 30px; + line-height: 30px; + font-size: 16px; + color: #fff; + background: #74C6B3; + text-align: center; + border-radius: 4px; +} +main .goodClass .onlineCont div.content ul::after { + display: block; + content: ''; + clear: both; + zoom: 1; +} +main .goodClass .onlineCont div.content { + width: 884px; + float: left; +} +main .goodClass .onlineCont div.content ul li { + overflow: hidden; +} +main .goodClass .onlineCont div.content ul li:nth-child(3n) { + margin-right: 0; +} +main .goodClass .onlineCont div.content ul li:nth-child(4n) { + margin-right: 20px; +} +main .goodClass .onlineCont div.rightCont { + width: 296px; + height: 487px; + float: left; + margin-top: 20px; + overflow: hidden; +} +main .goodClass .onlineCont div.rightCont img { + width: 296px; + height: 487px; + margin-top: -6px; +} +main .goodClass .onlineCont::after { + display: block; + content: ''; + clear: both; + zoom: 1; +} +main .footB { + width: 1180px; + height: 186px; + margin: 31px auto 0; + overflow: hidden; + margin-top: 19px; + height: 100px; +} +main .footB img { + width: 100%; + height: 100%; +} +main .footB div { + width: 380px; + height: 100px; + margin-right: 20px; + float: left; +} +main .footB div:last-child { + margin-right: 0; +} +main div.fix { + position: fixed; + width: 70px; + height: 220px; + bottom: 10px; +} +main div.fix .lesson { + width: 70px; + height: 70px; +} +main div.fix .test { + margin: 5px auto; +} +main div.fix img { + width: 70px; + height: 70px; +} +footer { + width: 100%; + height: 264px; + background: #333; + margin-top: 36px; + padding-top: 87px; +} +footer .cont { + width: 1180px; + height: 100%; + margin: 0 auto; +} +footer .cont .main { + width: 1153px; + height: 90px; + color: #ccc; + font-size: 14px; + line-height: 18px; + text-align: center; + margin: 0 auto; +} +footer .cont .main p { + margin-top: 5px; +} +.pos { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.2); + display: none; + z-index: 99999999; +} +.pos .login { + width: 520px; + height: 522px; + background: #FFFFFF; + border-radius: 4px; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + text-align: center; + padding-top: 30px; +} +.pos .login span.close { + position: absolute; + right: 25px; + top: 25px; + color: #999; + z-index: 9999; + font-size: 20px; +} +.pos .login img { + width: 136px; + height: 40px; + margin-bottom: 46px; +} +.pos .login ul { + padding-left: 20px; +} +.pos .login ul::after { + display: block; + clear: both; + content: ''; +} +.pos .login ul li { + width: 134px; + height: 1px; + float: left; + border-top: 1px solid #ececec; + margin-top: 12px; +} +.pos .login ul li.phone { + float: left; + width: 162px; + height: 25px; + font-size: 18px; + font-weight: 400; + color: #333333; + line-height: 25px; + border: none; + margin: 0 18px; + margin-bottom: 21px; +} +.pos .login input { + display: block; + margin-left: 110px; + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + padding-left: 24px; + margin-bottom: 20px; +} +.pos .login .loginbtn { + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + background: #74C6B3; + color: #fff; + text-align: center; + font-size: 16px; + outline: none; + margin-bottom: 10px; +} +.pos .login p { + width: 300px; + margin: 0 auto; + margin-bottom: 36px; +} +.pos .login p::after { + display: block; + clear: both; + content: ''; +} +.pos .login p span { + display: inline-block; + color: #333; + font-size: 12px; +} +.pos .login p span:first-child { + float: left; +} +.pos .login p span:last-child { + float: right; +} +.pos .login p span a { + font-size: 12px; + color: #74C6B3; +} +.pos .login p.getCenter { + display: block; +} +.pos .login p.getCenter img { + width: 36px; + height: 36px; + border-radius: 50%; +} +.pos .login p.getCenter img:nth-child(2) { + margin-left: 30px; + margin-right: 30px; +} diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..1520170 --- /dev/null +++ b/css/login.css @@ -0,0 +1,159 @@ +.pos { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.2); + /* display: none; */ + z-index: 99999999; +} + +.pos .login { + width: 520px; + height: 522px; + background: #FFFFFF; + border-radius: 4px; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + text-align: center; + padding-top: 30px; +} + +.pos .login span.close { + position: absolute; + right: 25px; + top: 25px; + color: #999; + z-index: 9999; + font-size: 20px; +} + +.pos .login img { + width: 136px; + height: 40px; + margin-bottom: 46px; +} + +.pos .login ul { + padding-left: 20px; +} + +.pos .login ul::after { + display: block; + clear: both; + content: ''; +} + +.pos .login ul li { + width: 134px; + height: 1px; + float: left; + border-top: 1px solid #ececec; + margin-top: 12px; +} + +.pos .login ul li.phone { + float: left; + width: 162px; + height: 25px; + font-size: 18px; + font-weight: 400; + color: #333333; + line-height: 25px; + border: none; + margin: 0 18px; + margin-bottom: 21px; +} + +.pos .login input { + display: block; + margin-left: 110px; + width: 298px; + height: 38px; + border-radius: 4px; + border: 1px solid #80C4AE; + text-indent: 24px; + margin-bottom: 20px; +} + + +.pos .login .loginbtn { + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + background: #74C6B3; + color: #fff; + text-align: center; + font-size: 16px; + outline: none; + margin-bottom: 10px; + margin-top: 10px; +} + +.pos .login p { + width: 300px; + margin: 0 auto; + margin-bottom: 36px; +} + +.pos .login p::after { + display: block; + clear: both; + content: ''; +} + +.pos .login p span { + display: inline-block; + color: #333; + font-size: 12px; +} + +.pos .login p span:first-child { + float: left; +} + +.pos .login p span:last-child { + float: right; +} + +.pos .login p span a { + font-size: 12px; + color: #74C6B3; +} + +.pos .login p.getCenter { + display: block; +} + +.pos .login p.getCenter img { + width: 36px; + height: 36px; + border-radius: 50%; +} + +.pos .login p.getCenter img:nth-child(2) { + margin-left: 30px; + margin-right: 30px; +} + + +/* 提示 */ +.pos .login em { + position: absolute; + left: 180px; + top:268px; + width: 144px; + height: 17px; + font-size: 12px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #F56467; + line-height: 17px; + +} \ No newline at end of file diff --git a/css/online.css b/css/online.css new file mode 100644 index 0000000..0023e33 --- /dev/null +++ b/css/online.css @@ -0,0 +1,501 @@ +@import 'public.css'; +.clearfix { + display: block; + content: ''; + clear: both; +} +nav { + width: 100%; + height: 80px; + background: #fff; + box-shadow: 0 2px 3px #dad6d6; + vertical-align: top; +} +nav .main { + width: 1180px; + margin: 0 auto; +} +nav .main ul li:hover { + background: #80C4AE; + color: #fff; +} +nav .main ul li:hover a { + color: #fff; + font-size: 16px; +} +nav .logo { + width: 179px; + height: 53px; + margin: 13px 0 14px 0; +} +nav ul { + display: inline-block; + margin-left: 120px; + border: none; + font-size: 0; +} +nav ul li { + display: inline-block; + width: 80px; + height: 80px; + line-height: 80px; + margin-right: 17px; + text-align: center; +} +nav ul li a { + color: #333; + font-size: 16px; +} +nav ul li:last-child { + margin-right: 0; +} +nav ul .check { + background: #80C4AE; + color: #fff; +} +nav ul .check a { + color: #fff; + font-size: 16px; +} +nav div.search { + display: inline-block; + margin-left: 120px; + border: 1px solid #80C4AE; + border-radius: 3px; + width: 280px; + height: 36px; + text-align: center; + font-size: 0; + padding: 0; + overflow: hidden; + vertical-align: middle; + position: relative; +} +nav div.search .left { + width: 69px; + height: 36px; + border-right: 1px solid #80C4AE; + font-size: 14px; + text-align: center; + line-height: 36px; + float: left; + color: #80C4AE; + padding: 0; +} +nav div.search .left i { + margin-left: 6px; + font-size: 5px; +} +nav div.search input { + border: none; + outline: none; + display: inline-block; + height: 36px; + text-align: center; + font-weight: 400; + font-size: 14px; +} +nav div.search img { + width: 20px; + height: 20px; + position: absolute; + right: 7px; + top: 8px; +} +nav .login { + margin-left: 24px; + display: inline-block; + color: #80C4AE; + font-size: 14px; +} +nav .user { + display: inline-block; + margin-left: 24px; + display: none; +} +nav .user img { + width: 36px; + height: 36px; + border-radius: 50%; +} +nav .main .user { + position: relative; +} +nav .main .user .userlist { + width: 122px; + height: 269px; + background: url('../img/login/jx.png') no-repeat; + background-size: cover; + position: absolute; + top: 35px; + right: -15px; + display: none; + z-index: 99999; +} +nav .main .user .userlist ul { + width: 122px; + height: 100%; + padding-top: 30px; + margin-left: 0; +} +nav .main .user .userlist ul li { + font-size: 16px; + color: #333; + line-height: 30px; + height: 40px; + text-align: center; + width: 100%; + cursor: pointer; +} +nav .main .user .userlist ul li:hover { + background: none; +} +nav .main .user .userlist ul li:last-child { + color: #666; +} +nav .main .user:hover .userlist { + display: block; +} +footer { + width: 100%; + height: 264px; + background: #333; + margin-top: 36px; + padding-top: 87px; +} +footer .cont { + width: 1180px; + height: 100%; + margin: 0 auto; +} +footer .cont .main { + width: 1153px; + height: 90px; + color: #ccc; + font-size: 14px; + line-height: 18px; + text-align: center; + margin: 0 auto; +} +footer .cont .main p { + margin-top: 5px; +} +.pos { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.2); + display: none; + z-index: 99999999; +} +.pos .login { + width: 520px; + height: 522px; + background: #FFFFFF; + border-radius: 4px; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + text-align: center; + padding-top: 30px; +} +.pos .login span.close { + position: absolute; + right: 25px; + top: 25px; + color: #999; + z-index: 9999; + font-size: 20px; +} +.pos .login img { + width: 136px; + height: 40px; + margin-bottom: 46px; +} +.pos .login ul { + padding-left: 20px; +} +.pos .login ul::after { + display: block; + content: ''; + clear: both; +} +.pos .login ul li { + width: 134px; + height: 1px; + float: left; + border-top: 1px solid #ececec; + margin-top: 12px; +} +.pos .login ul li.phone { + float: left; + width: 162px; + height: 25px; + font-size: 18px; + font-weight: 400; + color: #333333; + line-height: 25px; + border: none; + margin: 0 18px; + margin-bottom: 21px; +} +.pos .login input { + display: block; + margin-left: 110px; + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + padding-left: 24px; + margin-bottom: 20px; +} +.pos .login .loginbtn { + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + background: #74C6B3; + color: #fff; + text-align: center; + font-size: 16px; + outline: none; + margin-bottom: 10px; +} +.pos .login p { + width: 300px; + margin: 0 auto; + margin-bottom: 36px; +} +.pos .login p::after { + display: block; + content: ''; + clear: both; +} +.pos .login p span { + display: inline-block; + color: #333; + font-size: 12px; +} +.pos .login p span:first-child { + float: left; +} +.pos .login p span:last-child { + float: right; +} +.pos .login p span a { + font-size: 12px; + color: #74C6B3; +} +.pos .login p.getCenter { + display: block; +} +.pos .login p.getCenter img { + width: 36px; + height: 36px; + border-radius: 50%; +} +.pos .login p.getCenter img:nth-child(2) { + margin-left: 30px; + margin-right: 30px; +} +main { + width: 1180px; + margin: 0 auto; + margin-top: 22px; +} +main .row { + min-height: 60px; + line-height: 40px; + color: #333; + font-size: 16px; + vertical-align: middle; + width: 1180px; + height: auto; +} +main .row .left { + float: left; + font-weight: Semibold; + margin-right: 10px; + color: #222; + width: 80px; +} +main .row .right { + float: left; + width: 1090px; +} +main .row .right span { + width: 180px; + height: 40px; + border: 1px solid #80C4AE; + border-radius: 4px; + display: inline-block; + padding-left: 18px; + color: #666; + position: relative; + font-size: 14px; + margin-left: 22px; + cursor: pointer; +} +main .row .right span i { + color: #80C4AE; + position: absolute; + right: 13px; +} +main .row .right ul { + margin-left: 35px; +} +main .row .right ul li { + display: inline-block; + margin-right: 50px; + color: #666; + width: 52px; + text-align: center; + font-size: 14px; + box-sizing: border-box; + cursor: pointer; +} +main .row .right ul li a.active { + background: #80C4AE; + color: #fff; + border-radius: 4px; + padding: 3px 5px; +} +main .row::after { + display: block; + content: ''; + clear: both; +} +main .lesson { + width: 1180px; + margin: 20px auto 0; +} +main .lesson ul li { + width: 380px; + height: 256px; + box-shadow: 0 2px 5px #dad6d6; + background: #fff; + position: relative; + overflow: hidden; + margin: 0 20px 20px 0; + float: left; + cursor: pointer; +} +main .lesson ul li:nth-child(3n) { + margin-right: 0; +} +main .lesson ul li .top { + width: 380px; + height: 196px; + vertical-align: top; + overflow: hidden; +} +main .lesson ul li .top img.m { + width: 380px; + height: 196px; +} +main .lesson ul li .top > p { + position: absolute; + bottom: 60px; + left: 0; + width: 100%; + height: 33px; + line-height: 33px; + font-size: 14px; + background: #000000; + color: #fff; + padding-left: 10px; + opacity: 0.3; +} +main .lesson ul li .bottom { + width: 100%; + height: 62px; + overflow: hidden; + line-height: 20px; + font-size: 14px; + color: #333; + margin-top: 7px; + padding-left: 14px; +} +main .lesson ul li .bottom .left { + float: left; +} +main .lesson ul li .bottom .left span { + display: block; +} +main .lesson ul li .bottom .left span.time { + margin-top: 5px; + font-size: 14px; + line-height: 17px; + color: #7A7A7A; +} +main .lesson ul li .bottom .right { + float: right; + margin-top: 12px; + margin-right: 14px; + width: 86px; + height: 30px; + line-height: 30px; + font-size: 16px; + color: #fff; + background: #74C6B3; + text-align: center; + border-radius: 4px; +} +main .lesson ul::after { + display: block; + content: ''; + clear: both; + zoom: 1; +} +main .pageNum { + width: 1180px; + height: 40px; + margin: 0 auto; + margin-top: 20px; + text-align: center; +} +main .pageNum ul { + text-align: center; + line-height: 25px; + font-size: 18px; + display: inline-block; +} +main .pageNum ul li { + display: inline-block; + width: 37px; + height: 40px; + padding: 9px 14px 6px; + color: #333; + background: #ededed; + border-radius: 4px; + font-family: PingFangSC-Semibold, PingFang SC; + margin-right: 12px; +} +main .pageNum ul li.active { + background: #80C4AE; + color: #fff; +} +main .pageNum button { + width: 91px; + height: 40px; + outline: none; + border: none; + background: #ededed; + font-size: 18px; + color: #a4a4a4; + padding: 9px 19px 6px 18px; + border-radius: 4px; + margin: 0 28px; + font-family: PingFangSC-Semibold, PingFang SC; +} +main .pageNum button.active { + color: #333; +} +main .pageNum button:last-child { + margin-left: 8px; +} diff --git a/css/product.css b/css/product.css new file mode 100644 index 0000000..9efc2c5 --- /dev/null +++ b/css/product.css @@ -0,0 +1,272 @@ +@import 'public.css'; +.clearfix { + display: block; + content: ''; + clear: both; +} +nav { + width: 100%; + height: 80px; + background: #fff; + box-shadow: 0 2px 3px #dad6d6; + vertical-align: top; +} +nav .main { + width: 1180px; + margin: 0 auto; +} +nav .main ul li:hover { + background: #80C4AE; + color: #fff; +} +nav .main ul li:hover a { + color: #fff; + font-size: 16px; +} +nav .logo { + width: 179px; + height: 53px; + margin: 13px 0 14px 0; +} +nav ul { + display: inline-block; + margin-left: 120px; + border: none; + font-size: 0; +} +nav ul li { + display: inline-block; + width: 80px; + height: 80px; + line-height: 80px; + margin-right: 17px; + text-align: center; +} +nav ul li a { + color: #333; + font-size: 16px; +} +nav ul li:last-child { + margin-right: 0; +} +nav div.search { + display: inline-block; + margin-left: 120px; + border: 1px solid #80C4AE; + border-radius: 3px; + width: 280px; + height: 36px; + text-align: center; + font-size: 0; + padding: 0; + overflow: hidden; + vertical-align: middle; + position: relative; +} +nav div.search .left { + width: 69px; + height: 36px; + border-right: 1px solid #80C4AE; + font-size: 14px; + text-align: center; + line-height: 36px; + float: left; + color: #80C4AE; + padding: 0; +} +nav div.search .left i { + margin-left: 6px; + font-size: 5px; +} +nav div.search input { + border: none; + outline: none; + display: inline-block; + height: 36px; + text-align: center; + font-weight: 400; + font-size: 14px; +} +nav div.search img { + width: 20px; + height: 20px; + position: absolute; + right: 7px; + top: 8px; +} +nav .user { + display: inline-block; + margin-left: 24px; +} +nav .user img { + width: 36px; + height: 36px; + border-radius: 50%; +} +nav .main .user { + position: relative; +} +nav .main .user .userlist { + width: 122px; + height: 269px; + background: url('../img/login/jx.png') no-repeat; + background-size: cover; + position: absolute; + top: 35px; + right: -15px; + display: none; + z-index: 99999; +} +nav .main .user .userlist ul { + width: 122px; + height: 100%; + padding-top: 30px; + margin-left: 0; +} +nav .main .user .userlist ul li { + font-size: 16px; + color: #333; + line-height: 30px; + height: 40px; + text-align: center; + width: 100%; + cursor: pointer; +} +nav .main .user .userlist ul li:hover { + background: none; +} +nav .main .user .userlist ul li:last-child { + color: #666; +} +nav .main .user:hover .userlist { + display: block; +} +main { + width: 1180px; + margin: 0 auto; + height: 736px; + margin-top: 30px; +} +main .leftNav { + width: 220px; + height: 451px; + background: #FFFFFF; + box-shadow: 0px -1px 3px 3px rgba(0, 0, 0, 0.03); + border-radius: 4px; + float: left; +} +main .leftNav > ul { + padding: 25px 0px; +} +main .leftNav > ul > li:nth-of-type(1) a { + background: url(../img/userSet/set_01.jpg) 17px center no-repeat; +} +main .leftNav > ul > li:nth-of-type(2) a { + background: url(../img/userSet/set_03.jpg) 17px center no-repeat; +} +main .leftNav > ul > li:nth-of-type(3) a { + background: url(../img/userSet/set_02.jpg) 17px center no-repeat; +} +main .leftNav > ul > li:nth-of-type(4) a { + background: url(../img/userSet/set_04.jpg) 17px center no-repeat; +} +main .leftNav > ul > li > a { + display: block; + width: 100%; + position: relative; + padding-left: 60px; + padding-top: 10px; + padding-bottom: 10px; +} +main .leftNav > ul > li > a span { + display: block; + font-size: 14px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #333333; +} +main .leftNav > ul > li > a i { + position: absolute; + right: 40px; + top: 10px; +} +main .leftNav > ul > li ol > li { + padding-left: 60px; + margin-top: 5px; + font-size: 12px; + color: #666666; + height: 25px; + line-height: 25px; +} +main .leftNav > ul > li ol li.active { + color: #80C4AE; +} +main .rightUser { + float: left; + padding-top: 25px; + padding-left: 25px; +} +main .rightUser .title_top { + height: 30px; + line-height: 30px; +} +main .rightUser .title_top span { + display: inline-block; +} +main .rightUser .title_top span:nth-last-of-type(1) { + font-size: 14px; + font-weight: 400; + color: #666666; +} +main .rightUser .title_top span:nth-last-of-type(2) { + margin-left: 17px; + margin-right: 15px; + font-weight: bold; +} +main .rightUser .title_top span:nth-last-of-type(3) { + font-size: 14px; + font-weight: 400; + color: #333333; +} +footer { + width: 100%; + height: 264px; + background: #333; + margin-top: 36px; + padding-top: 87px; +} +footer .cont { + width: 1180px; + height: 100%; + margin: 0 auto; +} +footer .cont .main { + width: 1153px; + height: 90px; + color: #ccc; + font-size: 14px; + line-height: 18px; + text-align: center; + margin: 0 auto; +} +footer .cont .main p { + margin-top: 5px; +} +div.fix { + position: fixed; + width: 70px; + height: 220px; + bottom: 10px; + right: 0px; +} +div.fix .lesson { + width: 70px; + height: 70px; +} +div.fix .test { + margin: 5px auto; +} +div.fix img { + width: 70px; + height: 70px; +} diff --git a/css/public.css b/css/public.css new file mode 100644 index 0000000..c8dd16f --- /dev/null +++ b/css/public.css @@ -0,0 +1,4 @@ +@import 'reset.css'; +* { + box-sizing: border-box; +} diff --git a/css/register.css b/css/register.css new file mode 100644 index 0000000..404784f --- /dev/null +++ b/css/register.css @@ -0,0 +1,196 @@ +.pos { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.2); + /* display: none; */ + z-index: 99999999; +} + +.pos .login { + width: 520px; + height: 522px; + background: #FFFFFF; + border-radius: 4px; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + text-align: center; + padding-top: 30px; +} + +.pos .login span.close { + position: absolute; + right: 25px; + top: 25px; + color: #999; + z-index: 9999; + font-size: 20px; +} + +.pos .login img { + width: 136px; + height: 40px; + margin-bottom: 46px; +} + +.pos .login ul { + padding-left: 20px; +} + +.pos .login ul::after { + display: block; + clear: both; + content: ''; +} + +.pos .login ul li { + width: 134px; + height: 1px; + float: left; + border-top: 1px solid #ececec; + margin-top: 12px; +} + +.pos .login ul li.phone { + float: left; + width: 162px; + height: 25px; + font-size: 18px; + font-weight: 400; + color: #333333; + line-height: 25px; + border: none; + margin: 0 18px; + margin-bottom: 21px; +} + +.pos .login input { + display: block; + margin-left: 110px; + width: 298px; + height: 38px; + border-radius: 4px; + border: 1px solid #80C4AE; + text-indent: 24px; + margin-bottom: 30px; +} + +.pos .login input.xuanze { + width: 14px; + height: 14px; + border-radius: 2px; + border: 1px solid #999999; + position: absolute; + left: 5px; + top: 495px; +} + +.pos .login input.yanzhen { + width: 150px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + float: left; + outline: none; +} + +.pos .login span.yanzhenma { + display: block; + width: 134px; + height: 40px; + line-height: 40px; + text-indent: center; + background-color: #efefef; + float: left; + margin-left: 16px; + font-size: 20px; +} + +.clear { + clear: both; +} + + +.pos .login .loginbtn { + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + background: #74C6B3; + color: #fff; + text-align: center; + font-size: 16px; + outline: none; + margin-bottom: 10px; +} + + +.pos .login p { + width: 300px; + margin: 0 auto; + margin-bottom: 36px; +} + +.pos .login p::after { + display: block; + clear: both; + content: ''; +} + +.pos .login p span { + display: inline-block; + color: #333; + font-size: 12px; +} + +.pos .login p span:first-child { + float: left; + margin-left: 30px; +} + +.pos .login p span:last-child { + float: right; +} + +.pos .login p span a { + font-size: 12px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #999999; +} + +/* 提示 */ +.pos .login em { + position: absolute; + left: 122px; + display: block; + width: 168px; + height: 17px; + font-size: 12px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #999999; + line-height: 17px; +} + +.pos .login em:nth-of-type(1) { + top: 206px; +} + +.pos .login em:nth-of-type(2) { + top: 277px; +} + +.pos .login em:nth-of-type(3) { + top: 348px; +} + +.pos .login em:nth-of-type(4) { + top: 420px; +} \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..eecba94 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,60 @@ +body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{ + margin:0; + padding: 0; +} + +body{ + font:12px "微软雅黑","Arial Narrow",HELVETICA; + background-color: #f2f2f2; +} + +ul,ol{ + list-style: none; +} + +a{ + text-decoration: none; + color:#8b8d8c; +} + +em,i{ + font-style: normal; +} + +b,strong{ + font-weight: normal; +} + +img{ + border: none; + vertical-align: middle; +} + +input{ + outline: none; +} + +textarea{ + resize: none; +} + +h1,h2,h3,h4,h5,h6{ + font-weight: normal; + font-size:16px; +} + +.clearfix::after{ + content: ""; + display: block; + clear: both; +} + +.clearfix{ + zoom: 1; +} +.fl{ + float: left; +} +.fr{ + float: right; +} \ No newline at end of file diff --git a/css/userSeting.css b/css/userSeting.css new file mode 100644 index 0000000..2c6d393 --- /dev/null +++ b/css/userSeting.css @@ -0,0 +1,510 @@ +@import 'public.css'; +.clearfix { + display: block; + content: ''; + clear: both; +} +nav { + width: 100%; + height: 80px; + background: #fff; + box-shadow: 0 2px 3px #dad6d6; + vertical-align: top; +} +nav .main { + width: 1180px; + margin: 0 auto; +} +nav .main ul li:hover { + background: #80C4AE; + color: #fff; +} +nav .main ul li:hover a { + color: #fff; + font-size: 16px; +} +nav .logo { + width: 179px; + height: 53px; + margin: 13px 0 14px 0; +} +nav ul { + display: inline-block; + margin-left: 120px; + border: none; + font-size: 0; +} +nav ul li { + display: inline-block; + width: 80px; + height: 80px; + line-height: 80px; + margin-right: 17px; + text-align: center; +} +nav ul li a { + color: #333; + font-size: 16px; +} +nav ul li:last-child { + margin-right: 0; +} +nav div.search { + display: inline-block; + margin-left: 120px; + border: 1px solid #80C4AE; + border-radius: 3px; + width: 280px; + height: 36px; + text-align: center; + font-size: 0; + padding: 0; + overflow: hidden; + vertical-align: middle; + position: relative; +} +nav div.search .left { + width: 69px; + height: 36px; + border-right: 1px solid #80C4AE; + font-size: 14px; + text-align: center; + line-height: 36px; + float: left; + color: #80C4AE; + padding: 0; +} +nav div.search .left i { + margin-left: 6px; + font-size: 5px; +} +nav div.search input { + border: none; + outline: none; + display: inline-block; + height: 36px; + text-align: center; + font-weight: 400; + font-size: 14px; +} +nav div.search img { + width: 20px; + height: 20px; + position: absolute; + right: 7px; + top: 8px; +} +nav .user { + display: inline-block; + margin-left: 24px; +} +nav .user img { + width: 36px; + height: 36px; + border-radius: 50%; +} +nav .main .user { + position: relative; +} +nav .main .user .userlist { + width: 122px; + height: 269px; + background: url('../img/login/jx.png') no-repeat; + background-size: cover; + position: absolute; + top: 35px; + right: -15px; + display: none; + z-index: 99999; +} +nav .main .user .userlist ul { + width: 122px; + height: 100%; + padding-top: 30px; + margin-left: 0; +} +nav .main .user .userlist ul li { + font-size: 16px; + color: #333; + line-height: 30px; + height: 40px; + text-align: center; + width: 100%; + cursor: pointer; +} +nav .main .user .userlist ul li:hover { + background: none; +} +nav .main .user .userlist ul li:last-child { + color: #666; +} +nav .main .user:hover .userlist { + display: block; +} +main { + width: 1180px; + margin: 0 auto; + height: 736px; + margin-top: 30px; +} +main .leftNav { + width: 220px; + height: 451px; + background: #FFFFFF; + box-shadow: 0px -1px 3px 3px rgba(0, 0, 0, 0.03); + border-radius: 4px; + float: left; + cursor: pointer; +} +main .leftNav > ul { + padding: 25px 0px; +} +main .leftNav>ul>li .class { + background: url(../img/userSet/set_01.jpg) 17px center no-repeat; +} +main .leftNav > ul > li .order { + background: url(../img/userSet/set_03.jpg) 17px center no-repeat; +} +main .leftNav > ul > li .money { + background: url(../img/userSet/set_02.jpg) 17px center no-repeat; +} +main .leftNav > ul > li .center { + background: url(../img/userSet/set_04.jpg) 17px center no-repeat; +} +main .leftNav > ul > li > p { + display: block; + width: 100%; + position: relative; + padding-left: 60px; + padding-top: 10px; + padding-bottom: 10px; +} +main .leftNav > ul > li > p span { + display: block; + font-size: 14px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #333333; +} +main .leftNav > ul > li > p i { + position: absolute; + right: 40px; + top: 10px; +} +main .leftNav > ul > li ol > li { + padding-left: 60px; + margin-top: 5px; + font-size: 12px; + color: #666666; + height: 25px; + line-height: 25px; +} +main .leftNav > ul > li ol .active { + color: #80C4AE; +} +main .rightUser { + float: left; + padding-top: 25px; + padding-left: 25px; +} +main .rightUser .title_top { + height: 30px; + line-height: 30px; +} +main .rightUser .title_top span { + display: inline-block; +} +main .rightUser .title_top span:nth-last-of-type(1) { + font-size: 14px; + font-weight: 400; + color: #666666; +} +main .rightUser .title_top span:nth-last-of-type(2) { + margin-left: 17px; + margin-right: 15px; + font-weight: bold; +} +main .rightUser .title_top span:nth-last-of-type(3) { + font-size: 14px; + font-weight: 400; + color: #333333; +} +main .rightUser .title_center { + height: 30px; + width: 931px; + line-height: 30px; + margin-top: 30px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +main .rightUser .title_center span { + display: inline-block; + text-align: center; +} +main .rightUser .title_center span:nth-child(1) { + width: 100px; + height: 30px; + background: #74C6B3; + border-radius: 4px; + font-weight: 500; + color: #FFFFFF; + font-size: 16px; +} +main .rightUser .title_center span:nth-child(2) { + font-size: 14px; + color: #333; + margin-left: 20px; +} +main .rightUser .content_show { + padding-left: 9px; + margin-top: 25px; +} +main .rightUser .content_show .my_icon { + height: 60px; + line-height: 60px; +} +main .rightUser .content_show .my_icon span { + font-size: 14px; + color: #333; + margin-right: 20px; +} +main .rightUser .content_show .my_icon a { + display: inline-block; + width: 60px; + height: 60px; + position: relative; + vertical-align: bottom; +} +main .rightUser .content_show .my_icon a img { + width: 100%; + height: 100%; + display: block; + border: none; +} +main .rightUser .content_show .my_icon a .change { + width: 60px; + height: 60px; + border-radius: 50%; + position: absolute; + left: 0; + top: 0; + background-color: rgba(0, 0, 0, 0.5); + text-align: center; + line-height: 60px; + font-size: 12px; + color: #fff; + display: none; +} +main .rightUser .content_show .my_icon a .change input { + position: absolute; + left: 0; + top: 0; + display: block; + width: 60px; + height: 60px; + text-decoration: none; + text-indent: -200px; + z-index: 10; +} +main .rightUser .content_show .my_icon:hover .change { + display: block; +} +main .rightUser .content_show .my_name { + margin-top: 20px; + position: relative; + height: 40px; + line-height: 40px; +} +main .rightUser .content_show .my_name span { + color: #333; + font-size: 14px; + margin-right: 40px; +} +main .rightUser .content_show .my_name input { + width: 260px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + text-indent: 20px; + outline: none; + color: #999999; + font-size: 12px; +} +main .rightUser .content_show .my_name:focus { + color: #999999; + font-size: 12px; +} +main .rightUser .content_show .my_name .my_name_left { + position: absolute; + left: 0px; +} +main .rightUser .content_show .my_name .my_name_right { + position: absolute; + left: 500px; +} +main .rightUser .content_show .my_sex { + margin-top: 20px; + position: relative; + height: 40px; + line-height: 40px; +} +main .rightUser .content_show .my_sex span { + color: #333; + font-size: 14px; + margin-right: 40px; +} +main .rightUser .content_show .my_sex:focus { + color: #999999; + font-size: 12px; +} +main .rightUser .content_show .my_sex .my_name_left { + position: absolute; + left: 0px; +} +main .rightUser .content_show .my_sex .my_name_left input { + width: 14px; + height: 14px; + background: rgba(0, 0, 0, 0.1); + margin-right: 10px; +} +main .rightUser .content_show .my_sex .my_name_right { + position: absolute; + left: 500px; +} +main .rightUser .content_show .my_sex .my_name_right input { + width: 260px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + text-indent: 20px; + outline: none; + color: #999999; + font-size: 12px; +} +main .rightUser .content_show .my_phone { + margin-top: 20px; + position: relative; + height: 40px; + line-height: 40px; +} +main .rightUser .content_show .my_phone input { + width: 260px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + text-indent: 20px; + outline: none; + color: #999999; + font-size: 12px; +} +main .rightUser .content_show .my_phone:focus { + color: #999999; + font-size: 12px; +} +main .rightUser .content_show .my_phone .my_name_left { + position: absolute; + left: 0px; +} +main .rightUser .content_show .my_phone .my_name_left span { + margin-right: 40px; +} +main .rightUser .content_show .my_phone .my_name_left a { + font-weight: 400; + color: #80C4AE; + margin-left: 20px; +} +main .rightUser .content_show .my_phone .my_name_right { + position: absolute; + left: 500px; +} +main .rightUser .content_show .my_phone .my_name_right span { + color: #333; + font-size: 14px; + margin-right: 12px; +} +main .rightUser .content_show .my_learn { + margin-top: 20px; + position: relative; + height: 40px; + line-height: 40px; +} +main .rightUser .content_show .my_learn span { + color: #333; + font-size: 14px; + margin-right: 40px; +} +main .rightUser .content_show .my_learn input { + width: 260px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + text-indent: 20px; + outline: none; + color: #999999; + font-size: 12px; + margin-right: 20px; +} +main .rightUser .content_show .my_learn:focus { + color: #999999; + font-size: 12px; +} +main .rightUser .content_show .my_learn .my_name_left { + position: absolute; + left: 0px; + font-weight: 400; + color: #80C4AE; + font-size: 14px; +} +main .rightUser .content_show .my_learn .my_name_right { + position: absolute; + left: 780px; + width: 54px; + height: 30px; + line-height: 30px; + background: #74C6B3; + border-radius: 4px; + text-align: center; + color: #FFFFFF; + font-size: 16px; +} +footer { + width: 100%; + height: 264px; + background: #333; + margin-top: 36px; + padding-top: 87px; +} +footer .cont { + width: 1180px; + height: 100%; + margin: 0 auto; +} +footer .cont .main { + width: 1153px; + height: 90px; + color: #ccc; + font-size: 14px; + line-height: 18px; + text-align: center; + margin: 0 auto; +} +footer .cont .main p { + margin-top: 5px; +} +div.fix { + position: fixed; + width: 70px; + height: 220px; + bottom: 10px; + right: 0px; +} +div.fix .lesson { + width: 70px; + height: 70px; +} +div.fix .test { + margin: 5px auto; +} +div.fix img { + width: 70px; + height: 70px; +} diff --git a/css/videoDetail.css b/css/videoDetail.css new file mode 100644 index 0000000..2b19f0b --- /dev/null +++ b/css/videoDetail.css @@ -0,0 +1,619 @@ +@import 'public.css'; +.clearfix { + display: block; + content: ''; + clear: both; +} +.width { + width: 1180px; + height: auto; + margin: 0 auto; +} +nav { + width: 100%; + height: 80px; + background: #fff; + box-shadow: 0 2px 3px #dad6d6; + vertical-align: top; +} +nav .main { + width: 1180px; + margin: 0 auto; +} +nav .main ul li:hover { + background: #80C4AE; + color: #fff; +} +nav .main ul li:hover a { + color: #fff; + font-size: 16px; +} +nav .logo { + width: 179px; + height: 53px; + margin: 13px 0 14px 0; +} +nav ul { + display: inline-block; + margin-left: 120px; + border: none; + font-size: 0; +} +nav ul li { + display: inline-block; + width: 80px; + height: 80px; + line-height: 80px; + margin-right: 17px; + text-align: center; +} +nav ul li a { + color: #333; + font-size: 16px; +} +nav ul li:last-child { + margin-right: 0; +} +nav ul .check { + background: #80C4AE; + color: #fff; +} +nav ul .check a { + color: #fff; + font-size: 16px; +} +nav div.search { + display: inline-block; + margin-left: 120px; + border: 1px solid #80C4AE; + border-radius: 3px; + width: 280px; + height: 36px; + text-align: center; + font-size: 0; + padding: 0; + overflow: hidden; + vertical-align: middle; + position: relative; +} +nav div.search .left { + width: 69px; + height: 36px; + border-right: 1px solid #80C4AE; + font-size: 14px; + text-align: center; + line-height: 36px; + float: left; + color: #80C4AE; + padding: 0; +} +nav div.search .left i { + margin-left: 6px; + font-size: 5px; +} +nav div.search input { + border: none; + outline: none; + display: inline-block; + height: 36px; + text-align: center; + font-weight: 400; + font-size: 14px; +} +nav div.search img { + width: 20px; + height: 20px; + position: absolute; + right: 7px; + top: 8px; +} +nav .login { + margin-left: 24px; + display: inline-block; + color: #80C4AE; + font-size: 14px; +} +nav .user { + display: inline-block; + margin-left: 24px; + display: none; +} +nav .user img { + width: 36px; + height: 36px; + border-radius: 50%; +} +nav .main .user { + position: relative; +} +nav .main .user .userlist { + width: 122px; + height: 269px; + background: url('../img/login/jx.png') no-repeat; + background-size: cover; + position: absolute; + top: 35px; + right: -15px; + display: none; + z-index: 99999; +} +nav .main .user .userlist ul { + width: 122px; + height: 100%; + padding-top: 30px; + margin-left: 0; +} +nav .main .user .userlist ul li { + font-size: 16px; + color: #333; + line-height: 30px; + height: 40px; + text-align: center; + width: 100%; + cursor: pointer; +} +nav .main .user .userlist ul li:hover { + background: none; +} +nav .main .user .userlist ul li:last-child { + color: #666; +} +nav .main .user:hover .userlist { + display: block; +} +footer { + width: 100%; + height: 264px; + background: #333; + padding-top: 87px; +} +footer .cont { + width: 1180px; + height: 100%; + margin: 0 auto; +} +footer .cont .main { + width: 1153px; + height: 90px; + color: #ccc; + font-size: 14px; + line-height: 18px; + text-align: center; + margin: 0 auto; +} +footer .cont .main p { + margin-top: 5px; +} +.pos { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.2); + display: none; + z-index: 99999999; +} +.pos .login { + width: 520px; + height: 522px; + background: #FFFFFF; + border-radius: 4px; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + text-align: center; + padding-top: 30px; +} +.pos .login span.close { + position: absolute; + right: 25px; + top: 25px; + color: #999; + z-index: 9999; + font-size: 20px; +} +.pos .login img { + width: 136px; + height: 40px; + margin-bottom: 46px; +} +.pos .login ul { + padding-left: 20px; +} +.pos .login ul::after { + display: block; + content: ''; + clear: both; +} +.pos .login ul li { + width: 134px; + height: 1px; + float: left; + border-top: 1px solid #ececec; + margin-top: 12px; +} +.pos .login ul li.phone { + float: left; + width: 162px; + height: 25px; + font-size: 18px; + font-weight: 400; + color: #333333; + line-height: 25px; + border: none; + margin: 0 18px; + margin-bottom: 21px; +} +.pos .login input { + display: block; + margin-left: 110px; + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + padding-left: 24px; + margin-bottom: 20px; +} +.pos .login .loginbtn { + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + background: #74C6B3; + color: #fff; + text-align: center; + font-size: 16px; + outline: none; + margin-bottom: 10px; +} +.pos .login p { + width: 300px; + margin: 0 auto; + margin-bottom: 36px; +} +.pos .login p::after { + display: block; + content: ''; + clear: both; +} +.pos .login p span { + display: inline-block; + color: #333; + font-size: 12px; +} +.pos .login p span:first-child { + float: left; +} +.pos .login p span:last-child { + float: right; +} +.pos .login p span a { + font-size: 12px; + color: #74C6B3; +} +.pos .login p.getCenter { + display: block; +} +.pos .login p.getCenter img { + width: 36px; + height: 36px; + border-radius: 50%; +} +.pos .login p.getCenter img:nth-child(2) { + margin-left: 30px; + margin-right: 30px; +} +.all { + width: 100%; + height: 60px; +} +.all .crumbs { + width: 1180px; + height: 60px; + line-height: 60px; + text-align: left; + margin: 0 auto; + padding-left: 20px; +} +.all .crumbs span { + margin-right: 20px; + color: #333; + font-size: 14px; +} +.all .crumbs span:nth-child(2n) { + color: #000; +} +main { + background: #fafafa; +} +main .classDetail { + width: 1180px; + height: auto; + margin: 0 auto; +} +main .classDetail::after { + display: block; + content: ''; + clear: both; +} +main .classDetail div { + float: left; +} +main .classDetail .left { + padding: 20px; + box-sizing: border-box; + width: 860px; + height: 580px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} +main .classDetail .left img, +main .classDetail .left video { + width: 100%; + height: 100%; +} +main .classDetail .right { + margin-left: 35px; + padding-top: 70px; +} +main .classDetail .right .title { + font-size: 22px; + color: #333; + font-weight: Semibold; + line-height: 30px; + font-family: PingFangSC-Semibold, PingFang SC; +} +main .classDetail .right ul { + margin-top: 20px; +} +main .classDetail .right ul li { + font-size: 14px; + color: #333; + line-height: 20px; + font-weight: Regular; + margin-bottom: 10px; +} +main .classDetail .right ul li span { + color: #f66; + margin-right: 5px; +} +main .classDetail .right ul li.price { + margin-top: 83px; + vertical-align: top; +} +main .classDetail .right ul li.price span { + font-size: 36px; + line-height: 50px; + color: #80C4AE; +} +main .classDetail .right ul li.price span:first-child { + font-family: PingFangSC-Semibold, PingFang SC; +} +main .classDetail .right ul li.price span:last-child { + border: 2px solid #80C4AE; + margin-left: 31px; + border-radius: 4px; + font-size: 14px; + display: inline-block; + width: 130px; + height: 48px; + padding-left: 33px; +} +main .classDetail .right ul li.sale { + width: 260px; + height: 48px; + padding-top: 13px; + padding-left: 15px; + background: #80C4AE; + font-family: PingFangSC-Semibold, PingFang SC; + border-radius: 4px; +} +main .classDetail .right ul li.sale span { + color: #fff; +} +main .classDetail .right ul li.sale span:first-child { + border-right: 1px solid #fff; + padding-right: 25px; + margin-right: 25px; +} +main .row { + width: 1180px; + height: auto; + margin: 0 auto; + background: #fff; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + border-radius: 4px; + height: 156px; + margin-top: 20px; + padding-top: 20px; + padding-left: 20px; + vertical-align: top; + padding-right: 25px; +} +main .row > p { + width: 80px; + height: 28px; + font-size: 20px; + font-weight: 400; + color: #333333; + line-height: 28px; + margin-bottom: 20px; +} +main .row .left { + width: 265px; + float: left; +} +main .row .left .img { + width: 62px; + height: 62px; + background: #D8D8D8; + border-radius: 50%; + margin-left: 9px; + margin-right: 20px; + float: left; +} +main .row .left p.right { + width: 154px; + height: 56px; + font-size: 16px; + font-weight: 400; + color: #333333; + line-height: 22px; + float: left; + border-right: 1px solid #80C4AE; + padding-right: 30px; +} +main .row .left p.right span { + display: inline-block; + width: 124px; + font-size: 16px; +} +main .row .left p.right span:first-child { + font-size: 18px; + color: #333; + margin-bottom: 10px; +} +main .row .left::after { + display: block; + content: ''; + clear: both; +} +main .row .right { + color: #333; + font-size: 16px; + line-height: 22px; + vertical-align: top; + text-align: left; + width: 870px; + float: left; +} +main .row.title { + height: 66px; + text-align: center; + padding-top: 0; + border-radius: 0; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + position: relative; + z-index: 9999; +} +main .row.title span { + display: inline-block; + font-size: 14px; + font-weight: 600; + color: #333333; + line-height: 66px; + width: 80px; + height: 66px; + margin-right: 20px; + cursor: pointer; +} +main .row.title span.active { + background: #80C4AE; + color: #fff; +} +main .classlist { + width: 1180px; + margin: 0 auto; + height: auto; + padding: 30px 40px 0; + background: #fff; + position: relative; + z-index: 999; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + display: none; +} +main .classlist .detail { + width: 100%; +} +main .classlist .detail p.title { + display: block; + height: 22px; + font-size: 16px; + font-weight: 500; + color: #333333; + line-height: 22px; + margin-bottom: 23px; + cursor: pointer; +} +main .classlist .detail p.title i { + margin-left: 900px; + font-size: 12px; + color: #999; +} +main .classlist .detail ul { + display: none; +} +main .classlist .detail ul.active { + display: block; +} +main .classlist .detail ul li { + display: block; + line-height: 20px; + overflow: hidden; + padding-top: 8px; + box-sizing: border-box; + height: 41px; +} +main .classlist .detail ul li:hover { + background: rgba(128, 196, 174, 0.2); + color: #80c4ae; +} +main .classlist .detail ul li::after { + display: block; + content: ''; + clear: both; +} +main .classlist .detail ul li p { + float: left; +} +main .classlist .detail ul li p i { + margin-right: 15px; + color: #80C4AE; + font-size: 16px; +} +main .classlist .detail ul li p span { + width: 219px; + height: 20px; + font-size: 14px; + font-weight: 400; + width: auto; + cursor: pointer; +} +main .classlist .detail ul li p span.start { + width: auto; + height: 30px; + color: #74C6B3; + border: 2px solid #74C6B3; + border-radius: 4px; + padding: 5px 22px; + display: none; + margin-right: 15px; + margin-top: -3px; +} +main .classlist .detail ul li p:last-child { + float: right; +} +main .classlist .bottom { + text-align: center; + width: 1180px; + height: 159px; + background: #fafafa; + line-height: 159px; + margin-left: -40px; +} +main .classlist .bottom .seeAll { + font-size: 22px; + font-weight: 600; + color: #74C6B3; + text-decoration: underline; +} +main .classlist img { + width: 100%; + height: auto; +} +main .classlist.active { + display: block; +} diff --git a/css/videoPlay.css b/css/videoPlay.css new file mode 100644 index 0000000..c2dc771 --- /dev/null +++ b/css/videoPlay.css @@ -0,0 +1,789 @@ +@import 'public.css'; +.clearfix { + display: block; + content: ''; + clear: both; +} +.width { + width: 1180px; + height: auto; + margin: 0 auto; +} +nav { + width: 100%; + height: 80px; + background: #fff; + box-shadow: 0 2px 3px #dad6d6; + vertical-align: top; +} +nav .main { + width: 1180px; + margin: 0 auto; +} +nav .main ul li:hover { + background: #80C4AE; + color: #fff; +} +nav .main ul li:hover a { + color: #fff; + font-size: 16px; +} +nav .logo { + width: 179px; + height: 53px; + margin: 13px 0 14px 0; +} +nav ul { + display: inline-block; + margin-left: 120px; + border: none; + font-size: 0; +} +nav ul li { + display: inline-block; + width: 80px; + height: 80px; + line-height: 80px; + margin-right: 17px; + text-align: center; +} +nav ul li a { + color: #333; + font-size: 16px; +} +nav ul li:last-child { + margin-right: 0; +} +nav ul .check { + background: #80C4AE; + color: #fff; +} +nav ul .check a { + color: #fff; + font-size: 16px; +} +nav div.search { + display: inline-block; + margin-left: 120px; + border: 1px solid #80C4AE; + border-radius: 3px; + width: 280px; + height: 36px; + text-align: center; + font-size: 0; + padding: 0; + overflow: hidden; + vertical-align: middle; + position: relative; +} +nav div.search .left { + width: 69px; + height: 36px; + border-right: 1px solid #80C4AE; + font-size: 14px; + text-align: center; + line-height: 36px; + float: left; + color: #80C4AE; + padding: 0; +} +nav div.search .left i { + margin-left: 6px; + font-size: 5px; +} +nav div.search input { + border: none; + outline: none; + display: inline-block; + height: 36px; + text-align: center; + font-weight: 400; + font-size: 14px; +} +nav div.search img { + width: 20px; + height: 20px; + position: absolute; + right: 7px; + top: 8px; +} +nav .login { + margin-left: 24px; + display: inline-block; + color: #80C4AE; + font-size: 14px; +} +nav .user { + display: inline-block; + margin-left: 24px; + display: none; +} +nav .user img { + width: 36px; + height: 36px; + border-radius: 50%; +} +footer { + width: 100%; + height: 264px; + background: #333; + padding-top: 87px; +} +footer .cont { + width: 1180px; + height: 100%; + margin: 0 auto; +} +footer .cont .main { + width: 1153px; + height: 90px; + color: #ccc; + font-size: 14px; + line-height: 18px; + text-align: center; + margin: 0 auto; +} +footer .cont .main p { + margin-top: 5px; +} +.pos { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.2); + display: none; + z-index: 99999999; +} +.pos .login { + width: 520px; + height: 522px; + background: #FFFFFF; + border-radius: 4px; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + text-align: center; + padding-top: 30px; +} +.pos .login span.close { + position: absolute; + right: 25px; + top: 25px; + color: #999; + z-index: 9999; + font-size: 20px; +} +.pos .login img { + width: 136px; + height: 40px; + margin-bottom: 46px; +} +.pos .login ul { + padding-left: 20px; +} +.pos .login ul::after { + display: block; + content: ''; + clear: both; +} +.pos .login ul li { + width: 134px; + height: 1px; + float: left; + border-top: 1px solid #ececec; + margin-top: 12px; +} +.pos .login ul li.phone { + float: left; + width: 162px; + height: 25px; + font-size: 18px; + font-weight: 400; + color: #333333; + line-height: 25px; + border: none; + margin: 0 18px; + margin-bottom: 21px; +} +.pos .login input { + display: block; + margin-left: 110px; + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + padding-left: 24px; + margin-bottom: 20px; +} +.pos .login .loginbtn { + width: 300px; + height: 40px; + border-radius: 4px; + border: 1px solid #80C4AE; + background: #74C6B3; + color: #fff; + text-align: center; + font-size: 16px; + outline: none; + margin-bottom: 10px; +} +.pos .login p { + width: 300px; + margin: 0 auto; + margin-bottom: 36px; +} +.pos .login p::after { + display: block; + content: ''; + clear: both; +} +.pos .login p span { + display: inline-block; + color: #333; + font-size: 12px; +} +.pos .login p span:first-child { + float: left; +} +.pos .login p span:last-child { + float: right; +} +.pos .login p span a { + font-size: 12px; + color: #74C6B3; +} +.pos .login p.getCenter { + display: block; +} +.pos .login p.getCenter img { + width: 36px; + height: 36px; + border-radius: 50%; +} +.pos .login p.getCenter img:nth-child(2) { + margin-left: 30px; + margin-right: 30px; +} +.all { + width: 100%; + height: 60px; +} +.all .crumbs { + width: 1180px; + height: 60px; + line-height: 60px; + text-align: left; + margin: 0 auto; + padding-left: 20px; +} +.all .crumbs span { + margin-right: 20px; + color: #333; + font-size: 14px; +} +.all .crumbs span:nth-child(2n) { + color: #000; +} +main { + background: #fafafa; +} +main .classDetail { + width: 1180px; + height: auto; + margin: 0 auto; +} +main .classDetail::after { + display: block; + content: ''; + clear: both; +} +main .classDetail div { + float: left; +} +main .classDetail .left { + padding: 20px; + box-sizing: border-box; + width: 860px; + height: 580px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} +main .classDetail .left img, +main .classDetail .left video { + width: 100%; + height: 100%; +} +main .classDetail .right { + margin-left: 35px; + padding-top: 70px; +} +main .classDetail .right .title { + font-size: 22px; + color: #333; + font-weight: Semibold; + line-height: 30px; + font-family: PingFangSC-Semibold, PingFang SC; +} +main .classDetail .right ul { + margin-top: 20px; +} +main .classDetail .right ul li { + font-size: 14px; + color: #333; + line-height: 20px; + font-weight: Regular; + margin-bottom: 10px; +} +main .classDetail .right ul li span { + color: #f66; + margin-right: 5px; +} +main .classDetail .right ul li.price { + margin-top: 83px; + vertical-align: top; +} +main .classDetail .right ul li.price span { + font-size: 36px; + line-height: 50px; + color: #80C4AE; +} +main .classDetail .right ul li.price span:first-child { + font-family: PingFangSC-Semibold, PingFang SC; +} +main .classDetail .right ul li.price span:last-child { + border: 2px solid #80C4AE; + margin-left: 31px; + border-radius: 4px; + font-size: 14px; + display: inline-block; + width: 130px; + height: 48px; + padding-left: 33px; +} +main .classDetail .right ul li.sale { + width: 260px; + height: 48px; + padding-top: 13px; + padding-left: 15px; + background: #80C4AE; + font-family: PingFangSC-Semibold, PingFang SC; + border-radius: 4px; +} +main .classDetail .right ul li.sale span { + color: #fff; +} +main .classDetail .right ul li.sale span:first-child { + border-right: 1px solid #fff; + padding-right: 25px; + margin-right: 25px; +} +main .row { + width: 1180px; + height: auto; + margin: 0 auto; + background: #fff; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + border-radius: 4px; + height: 156px; + margin-top: 20px; + padding-top: 20px; + padding-left: 20px; + vertical-align: top; + padding-right: 25px; +} +main .row > p { + width: 80px; + height: 28px; + font-size: 20px; + font-weight: 400; + color: #333333; + line-height: 28px; + margin-bottom: 20px; +} +main .row .left { + width: 265px; + float: left; +} +main .row .left .img { + width: 62px; + height: 62px; + background: #D8D8D8; + border-radius: 50%; + margin-left: 9px; + margin-right: 20px; + float: left; +} +main .row .left p.right { + width: 154px; + height: 56px; + font-size: 16px; + font-weight: 400; + color: #333333; + line-height: 22px; + float: left; + border-right: 1px solid #80C4AE; + padding-right: 30px; +} +main .row .left p.right span { + display: inline-block; + width: 124px; + font-size: 16px; +} +main .row .left p.right span:first-child { + font-size: 18px; + color: #333; + margin-bottom: 10px; +} +main .row .left::after { + display: block; + content: ''; + clear: both; +} +main .row .right { + color: #333; + font-size: 16px; + line-height: 22px; + vertical-align: top; + text-align: left; + width: 870px; + float: left; +} +main .row.title { + height: 66px; + text-align: center; + padding-top: 0; + border-radius: 0; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + position: relative; + z-index: 9999; +} +main .row.title span { + display: inline-block; + font-size: 14px; + font-weight: 600; + color: #333333; + line-height: 66px; + width: 80px; + height: 66px; + margin-right: 20px; + cursor: pointer; +} +main .row.title span.active { + background: #80C4AE; + color: #fff; +} +main .classlist { + width: 1180px; + margin: 0 auto; + height: auto; + padding: 30px 40px 0; + background: #fff; + position: relative; + z-index: 999; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + display: none; +} +main .classlist .detail { + width: 100%; +} +main .classlist .detail p.title { + display: block; + height: 22px; + font-size: 16px; + font-weight: 500; + color: #333333; + line-height: 22px; + margin-bottom: 23px; + cursor: pointer; +} +main .classlist .detail p.title i { + margin-left: 900px; + font-size: 12px; + color: #999; +} +main .classlist .detail ul { + display: none; +} +main .classlist .detail ul.active { + display: block; +} +main .classlist .detail ul li { + display: block; + line-height: 20px; + overflow: hidden; + padding-top: 8px; + box-sizing: border-box; + height: 41px; +} +main .classlist .detail ul li:hover { + background: rgba(128, 196, 174, 0.2); + color: #80c4ae; +} +main .classlist .detail ul li::after { + display: block; + content: ''; + clear: both; +} +main .classlist .detail ul li p { + float: left; +} +main .classlist .detail ul li p i { + margin-right: 15px; + color: #80C4AE; + font-size: 16px; +} +main .classlist .detail ul li p span { + width: 219px; + height: 20px; + font-size: 14px; + font-weight: 400; + width: auto; + cursor: pointer; +} +main .classlist .detail ul li p span.start { + width: auto; + height: 30px; + color: #74C6B3; + border: 2px solid #74C6B3; + border-radius: 4px; + padding: 5px 22px; + display: none; + margin-right: 15px; + margin-top: -3px; +} +main .classlist .detail ul li p:last-child { + float: right; +} +main .classlist .bottom { + text-align: center; + width: 1180px; + height: 159px; + background: #fafafa; + line-height: 159px; + margin-left: -40px; +} +main .classlist .bottom .seeAll { + font-size: 22px; + font-weight: 600; + color: #74C6B3; + text-decoration: underline; +} +main .classlist img { + width: 100%; + height: auto; +} +main .classlist.active { + display: block; +} +.clearfix { + display: block; + content: ''; + clear: both; +} +.width { + width: 1180px; + height: auto; + margin: 0 auto; +} +nav .main .user { + position: relative; +} +nav .main .user .userlist { + width: 122px; + height: 269px; + background: url('../img/login/jx.png') no-repeat; + background-size: cover; + position: absolute; + top: 35px; + right: -15px; + display: none; +} +nav .main .user .userlist ul { + width: 122px; + height: 100%; + padding-top: 30px; + margin-left: 0; +} +nav .main .user .userlist ul li { + font-size: 16px; + color: #333; + line-height: 30px; + height: 40px; + text-align: center; + width: 100%; + cursor: pointer; +} +nav .main .user .userlist ul li:hover { + background: none; +} +nav .main .user .userlist ul li:last-child { + color: #666; +} +nav .main .user:hover .userlist { + display: block; +} +main div.classDetail .left { + margin-right: 14px; + position: relative; +} +main div.classDetail .left video { + width: 100%; + height: 100%; +} +main div.classDetail .left i { + font-size: 30px; + position: absolute; + bottom: 83px; + right: 30px; + color: #fff; +} +main div.classDetail .right { + padding-top: 20px; + margin-left: 0; +} +main div.classDetail .right p.top { + margin-left: 26px; + padding-right: 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + width: 250px; +} +main div.classDetail .right p.top span { + display: inline-block; + width: 81px; + height: 35px; + font-weight: 500; + line-height: 35px; + font-size: 14px; + text-align: center; + color: #333; +} +main div.classDetail .right p.top span.active { + color: #fff; + background: #80C4AE; + border-radius: 4px; +} +main div.classDetail .right div.content { + width: 300px; + height: 525px; + overflow: scroll; + display: none; +} +main div.classDetail .right div.content .list { + margin-top: 20px; + width: 300px; + height: auto; +} +main div.classDetail .right div.content .list p { + margin-left: 26px; + font-size: 16px; + color: #333; + line-height: 22px; +} +main div.classDetail .right div.content .list ul { + width: 300px; +} +main div.classDetail .right div.content .list ul li { + cursor: pointer; + height: 41px; + width: 300px; + line-height: 40px; + font-size: 14px; + padding-left: 26px; + color: #333; +} +main div.classDetail .right div.content .list ul li.active { + color: #80C4AE; + background: rgba(128, 196, 174, 0.2); +} +main div.classDetail .right div.content .list ul li.active span { + color: #80C4AE; +} +main div.classDetail .right div.content .list ul li span { + color: #333; + float: left; +} +main div.classDetail .right div.content .list ul li i { + color: #80C4AE; + line-height: 37px; + float: right; + margin-right: 22px; +} +main div.classDetail .right div.content.active { + display: block; +} +main div.classDetail .right div.content textarea { + width: 260px; + height: 80px; + border-radius: 4px; + border: 1px solid #E5E5E5; + margin-left: 26px; + margin-top: 20px; + background: #fafafa; + outline: none; + padding: 5px; +} +main div.classDetail .right div.content button { + width: 54px; + height: 30px; + background: #74C6B3; + border-radius: 4px; + outline: none; + padding: 5px 13px; + color: #fff; + font-size: 14px; + border: none; + margin-top: 10px; + margin-left: 232px; +} +main div.classDetail .right div.content ul.comment { + width: 260px; + margin-left: 26px; +} +main div.classDetail .right div.content ul.comment li { + min-height: 86px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +main div.classDetail .right div.content ul.comment li p img { + width: 36px; + height: 36px; + border-radius: 50%; + margin-right: 10px; +} +main div.classDetail .right div.content ul.comment li p span { + color: #333; + font-size: 14px; +} +main div.classDetail .right div.content ul.comment li p span:last-child { + float: right; + line-height: 35px; +} +main div.classDetail .right div.content ul.comment li p:last-child { + color: #666; + margin-top: 10px; + margin-bottom: 20px; + width: 100%; + height: auto; +} +main div.classDetail .right div.content:last-child { + overflow: hidden; +} +main div.classDetail .right div.content:last-child .scroll { + height: 375px; + overflow: scroll; +} +main div.classlist .detail ul li p span.title { + width: 320px; + display: inline-block; +} +main div.classlist .detail ul li p span.hasStudy { + width: 46px; + height: 22px; + background: #80C4AE; + border-radius: 4px; + padding: 3px 5px 3px; + color: #fff; +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..5c64aa0 Binary files /dev/null and b/favicon.ico differ diff --git a/img/index/Bootstrap.webp b/img/index/Bootstrap.webp new file mode 100644 index 0000000..8b6c714 Binary files /dev/null and b/img/index/Bootstrap.webp differ diff --git a/img/index/JavaEE.webp b/img/index/JavaEE.webp new file mode 100644 index 0000000..3ff725d Binary files /dev/null and b/img/index/JavaEE.webp differ diff --git a/img/index/JavaSe.webp b/img/index/JavaSe.webp new file mode 100644 index 0000000..a9dafaf Binary files /dev/null and b/img/index/JavaSe.webp differ diff --git a/img/index/JavaWeb.webp b/img/index/JavaWeb.webp new file mode 100644 index 0000000..c0b18f0 Binary files /dev/null and b/img/index/JavaWeb.webp differ diff --git a/img/index/Mysql1.webp b/img/index/Mysql1.webp new file mode 100644 index 0000000..27951cf Binary files /dev/null and b/img/index/Mysql1.webp differ diff --git a/img/index/Mysql2.webp b/img/index/Mysql2.webp new file mode 100644 index 0000000..68c32b4 Binary files /dev/null and b/img/index/Mysql2.webp differ diff --git a/img/index/Mysql3.webp b/img/index/Mysql3.webp new file mode 100644 index 0000000..7a1a245 Binary files /dev/null and b/img/index/Mysql3.webp differ diff --git a/img/index/React.webp b/img/index/React.webp new file mode 100644 index 0000000..eab1a16 Binary files /dev/null and b/img/index/React.webp differ diff --git a/img/index/SpringBoot.webp b/img/index/SpringBoot.webp new file mode 100644 index 0000000..7e6a9b3 Binary files /dev/null and b/img/index/SpringBoot.webp differ diff --git a/img/index/Vue.webp b/img/index/Vue.webp new file mode 100644 index 0000000..e29ff0e Binary files /dev/null and b/img/index/Vue.webp differ diff --git a/img/index/WechatIMG20.png b/img/index/WechatIMG20.png new file mode 100644 index 0000000..e0dee08 Binary files /dev/null and b/img/index/WechatIMG20.png differ diff --git a/img/index/banner1.png b/img/index/banner1.png new file mode 100644 index 0000000..7b94c03 Binary files /dev/null and b/img/index/banner1.png differ diff --git a/img/index/banner2.png b/img/index/banner2.png new file mode 100644 index 0000000..3a88c64 Binary files /dev/null and b/img/index/banner2.png differ diff --git a/img/index/banner3.png b/img/index/banner3.png new file mode 100644 index 0000000..ebeec2f Binary files /dev/null and b/img/index/banner3.png differ diff --git a/img/index/banner4.png b/img/index/banner4.png new file mode 100644 index 0000000..db081a7 Binary files /dev/null and b/img/index/banner4.png differ diff --git a/img/index/banner5.png b/img/index/banner5.png new file mode 100644 index 0000000..bc15731 Binary files /dev/null and b/img/index/banner5.png differ diff --git a/img/index/banner6.png b/img/index/banner6.png new file mode 100644 index 0000000..09d64a9 Binary files /dev/null and b/img/index/banner6.png differ diff --git a/img/index/banner7.png b/img/index/banner7.png new file mode 100644 index 0000000..b0c06e7 Binary files /dev/null and b/img/index/banner7.png differ diff --git a/img/index/banner8.png b/img/index/banner8.png new file mode 100644 index 0000000..667f754 Binary files /dev/null and b/img/index/banner8.png differ diff --git a/img/index/foot1.png b/img/index/foot1.png new file mode 100644 index 0000000..98981e8 Binary files /dev/null and b/img/index/foot1.png differ diff --git a/img/index/foot2.png b/img/index/foot2.png new file mode 100644 index 0000000..f9600bf Binary files /dev/null and b/img/index/foot2.png differ diff --git a/img/index/foot3.png b/img/index/foot3.png new file mode 100644 index 0000000..302e662 Binary files /dev/null and b/img/index/foot3.png differ diff --git a/img/index/good_banner1.png b/img/index/good_banner1.png new file mode 100644 index 0000000..c0a2ffd Binary files /dev/null and b/img/index/good_banner1.png differ diff --git a/img/index/good_banner2.png b/img/index/good_banner2.png new file mode 100644 index 0000000..73206c2 Binary files /dev/null and b/img/index/good_banner2.png differ diff --git a/img/index/good_banner3.png b/img/index/good_banner3.png new file mode 100644 index 0000000..23d9f49 Binary files /dev/null and b/img/index/good_banner3.png differ diff --git a/img/index/good_banner4.png b/img/index/good_banner4.png new file mode 100644 index 0000000..efa677e Binary files /dev/null and b/img/index/good_banner4.png differ diff --git a/img/index/good_banner5.png b/img/index/good_banner5.png new file mode 100644 index 0000000..d0afa92 Binary files /dev/null and b/img/index/good_banner5.png differ diff --git a/img/index/good_banner6.png b/img/index/good_banner6.png new file mode 100644 index 0000000..24784c6 Binary files /dev/null and b/img/index/good_banner6.png differ diff --git a/img/index/good_banner7.png b/img/index/good_banner7.png new file mode 100644 index 0000000..2484b09 Binary files /dev/null and b/img/index/good_banner7.png differ diff --git a/img/index/gotop.png b/img/index/gotop.png new file mode 100644 index 0000000..d7dea6c Binary files /dev/null and b/img/index/gotop.png differ diff --git a/img/index/java.webp b/img/index/java.webp new file mode 100644 index 0000000..23dbc09 Binary files /dev/null and b/img/index/java.webp differ diff --git a/img/index/left.png b/img/index/left.png new file mode 100644 index 0000000..15a40ab Binary files /dev/null and b/img/index/left.png differ diff --git a/img/index/logo.png b/img/index/logo.png new file mode 100644 index 0000000..0e3c328 Binary files /dev/null and b/img/index/logo.png differ diff --git a/img/index/mylesson.png b/img/index/mylesson.png new file mode 100644 index 0000000..99c23a5 Binary files /dev/null and b/img/index/mylesson.png differ diff --git a/img/index/mysql.webp b/img/index/mysql.webp new file mode 100644 index 0000000..6760854 Binary files /dev/null and b/img/index/mysql.webp differ diff --git a/img/index/mytest.png b/img/index/mytest.png new file mode 100644 index 0000000..9cc066b Binary files /dev/null and b/img/index/mytest.png differ diff --git a/img/index/search.png b/img/index/search.png new file mode 100644 index 0000000..5dcefbb Binary files /dev/null and b/img/index/search.png differ diff --git a/img/index/shuju2022.png b/img/index/shuju2022.png new file mode 100644 index 0000000..529c4e5 Binary files /dev/null and b/img/index/shuju2022.png differ diff --git a/img/index/tbanner1.png b/img/index/tbanner1.png new file mode 100644 index 0000000..6537928 Binary files /dev/null and b/img/index/tbanner1.png differ diff --git a/img/index/tbanner2.png b/img/index/tbanner2.png new file mode 100644 index 0000000..27646cc Binary files /dev/null and b/img/index/tbanner2.png differ diff --git a/img/index/tbanner3.png b/img/index/tbanner3.png new file mode 100644 index 0000000..db8489a Binary files /dev/null and b/img/index/tbanner3.png differ diff --git a/img/index/tbanner4.png b/img/index/tbanner4.png new file mode 100644 index 0000000..ebc8d77 Binary files /dev/null and b/img/index/tbanner4.png differ diff --git a/img/index/tbanner5.png b/img/index/tbanner5.png new file mode 100644 index 0000000..ca60312 Binary files /dev/null and b/img/index/tbanner5.png differ diff --git a/img/index/test1.png b/img/index/test1.png new file mode 100644 index 0000000..ff1fd7a Binary files /dev/null and b/img/index/test1.png differ diff --git a/img/index/test2.png b/img/index/test2.png new file mode 100644 index 0000000..b4cc662 Binary files /dev/null and b/img/index/test2.png differ diff --git a/img/index/test3.png b/img/index/test3.png new file mode 100644 index 0000000..cc8b275 Binary files /dev/null and b/img/index/test3.png differ diff --git a/img/index/test4.png b/img/index/test4.png new file mode 100644 index 0000000..b81f6db Binary files /dev/null and b/img/index/test4.png differ diff --git a/img/index/test5.png b/img/index/test5.png new file mode 100644 index 0000000..c75114a Binary files /dev/null and b/img/index/test5.png differ diff --git a/img/index/test6.png b/img/index/test6.png new file mode 100644 index 0000000..2fde3c7 Binary files /dev/null and b/img/index/test6.png differ diff --git a/img/index/web.webp b/img/index/web.webp new file mode 100644 index 0000000..9ba20d6 Binary files /dev/null and b/img/index/web.webp differ diff --git a/img/index/yjy (1).jpg b/img/index/yjy (1).jpg new file mode 100644 index 0000000..e2356d3 Binary files /dev/null and b/img/index/yjy (1).jpg differ diff --git a/img/index/yjy (2).jpg b/img/index/yjy (2).jpg new file mode 100644 index 0000000..23af233 Binary files /dev/null and b/img/index/yjy (2).jpg differ diff --git a/img/index/yjy (3).jpg b/img/index/yjy (3).jpg new file mode 100644 index 0000000..87ebd41 Binary files /dev/null and b/img/index/yjy (3).jpg differ diff --git a/img/index/yjy (4).jpg b/img/index/yjy (4).jpg new file mode 100644 index 0000000..02f58f2 Binary files /dev/null and b/img/index/yjy (4).jpg differ diff --git a/img/index/yjy (5).jpg b/img/index/yjy (5).jpg new file mode 100644 index 0000000..891e763 Binary files /dev/null and b/img/index/yjy (5).jpg differ diff --git a/img/index/yuan.webp b/img/index/yuan.webp new file mode 100644 index 0000000..b502ad6 Binary files /dev/null and b/img/index/yuan.webp differ diff --git a/img/login/jx.png b/img/login/jx.png new file mode 100644 index 0000000..1813bb5 Binary files /dev/null and b/img/login/jx.png differ diff --git a/img/login/loginlogo.png b/img/login/loginlogo.png new file mode 100644 index 0000000..53ef518 Binary files /dev/null and b/img/login/loginlogo.png differ diff --git a/img/login/qq.png b/img/login/qq.png new file mode 100644 index 0000000..76d2655 Binary files /dev/null and b/img/login/qq.png differ diff --git a/img/login/sina.png b/img/login/sina.png new file mode 100644 index 0000000..b880853 Binary files /dev/null and b/img/login/sina.png differ diff --git a/img/login/user.png b/img/login/user.png new file mode 100644 index 0000000..e7a8939 Binary files /dev/null and b/img/login/user.png differ diff --git a/img/login/wx.png b/img/login/wx.png new file mode 100644 index 0000000..f2d08d8 Binary files /dev/null and b/img/login/wx.png differ diff --git a/img/online/banner1-1.png b/img/online/banner1-1.png new file mode 100644 index 0000000..3257a04 Binary files /dev/null and b/img/online/banner1-1.png differ diff --git a/img/online/banner1-2.png b/img/online/banner1-2.png new file mode 100644 index 0000000..4fc9bdf Binary files /dev/null and b/img/online/banner1-2.png differ diff --git a/img/online/banner1-3.png b/img/online/banner1-3.png new file mode 100644 index 0000000..d5b5edb Binary files /dev/null and b/img/online/banner1-3.png differ diff --git a/img/online/banner1-4.png b/img/online/banner1-4.png new file mode 100644 index 0000000..47febc6 Binary files /dev/null and b/img/online/banner1-4.png differ diff --git a/img/online/banner1-5.png b/img/online/banner1-5.png new file mode 100644 index 0000000..8f64b3a Binary files /dev/null and b/img/online/banner1-5.png differ diff --git a/img/online/banner1-6.png b/img/online/banner1-6.png new file mode 100644 index 0000000..3a81469 Binary files /dev/null and b/img/online/banner1-6.png differ diff --git a/img/online/banner2-1.png b/img/online/banner2-1.png new file mode 100644 index 0000000..997be77 Binary files /dev/null and b/img/online/banner2-1.png differ diff --git a/img/online/banner2-2.png b/img/online/banner2-2.png new file mode 100644 index 0000000..e02691e Binary files /dev/null and b/img/online/banner2-2.png differ diff --git a/img/online/banner2-3.png b/img/online/banner2-3.png new file mode 100644 index 0000000..5df2294 Binary files /dev/null and b/img/online/banner2-3.png differ diff --git a/img/online/banner2-4.png b/img/online/banner2-4.png new file mode 100644 index 0000000..4e8e256 Binary files /dev/null and b/img/online/banner2-4.png differ diff --git a/img/online/banner2-5.png b/img/online/banner2-5.png new file mode 100644 index 0000000..6f96bba Binary files /dev/null and b/img/online/banner2-5.png differ diff --git a/img/online/banner2-6.png b/img/online/banner2-6.png new file mode 100644 index 0000000..6277124 Binary files /dev/null and b/img/online/banner2-6.png differ diff --git a/img/online/left.png b/img/online/left.png new file mode 100644 index 0000000..15a40ab Binary files /dev/null and b/img/online/left.png differ diff --git a/img/online/logo.png b/img/online/logo.png new file mode 100644 index 0000000..0e3c328 Binary files /dev/null and b/img/online/logo.png differ diff --git a/img/online/search.png b/img/online/search.png new file mode 100644 index 0000000..5dcefbb Binary files /dev/null and b/img/online/search.png differ diff --git a/img/public/left.png b/img/public/left.png new file mode 100644 index 0000000..15a40ab Binary files /dev/null and b/img/public/left.png differ diff --git a/img/public/logo.png b/img/public/logo.png new file mode 100644 index 0000000..0e3c328 Binary files /dev/null and b/img/public/logo.png differ diff --git a/img/public/search.png b/img/public/search.png new file mode 100644 index 0000000..5dcefbb Binary files /dev/null and b/img/public/search.png differ diff --git a/img/userSet/ico1.gif b/img/userSet/ico1.gif new file mode 100644 index 0000000..57ed5e3 Binary files /dev/null and b/img/userSet/ico1.gif differ diff --git a/img/userSet/ico2.gif b/img/userSet/ico2.gif new file mode 100644 index 0000000..b263772 Binary files /dev/null and b/img/userSet/ico2.gif differ diff --git a/img/userSet/set_01.jpg b/img/userSet/set_01.jpg new file mode 100644 index 0000000..3986f2c Binary files /dev/null and b/img/userSet/set_01.jpg differ diff --git a/img/userSet/set_02.jpg b/img/userSet/set_02.jpg new file mode 100644 index 0000000..6452f1c Binary files /dev/null and b/img/userSet/set_02.jpg differ diff --git a/img/userSet/set_03.jpg b/img/userSet/set_03.jpg new file mode 100644 index 0000000..893d30b Binary files /dev/null and b/img/userSet/set_03.jpg differ diff --git a/img/userSet/set_04.jpg b/img/userSet/set_04.jpg new file mode 100644 index 0000000..d162747 Binary files /dev/null and b/img/userSet/set_04.jpg differ diff --git a/img/videoDetail/detail.png b/img/videoDetail/detail.png new file mode 100644 index 0000000..4a7c078 Binary files /dev/null and b/img/videoDetail/detail.png differ diff --git a/img/videoDetail/san.png b/img/videoDetail/san.png new file mode 100644 index 0000000..5b2c4f1 Binary files /dev/null and b/img/videoDetail/san.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..89fba1a --- /dev/null +++ b/index.html @@ -0,0 +1,278 @@ + + + + + + + 小u课堂 + + + + + + + + + + + + + +
+ + + + +
+
+ + JAVA + 更多课程 + +
+
+
+
    +
  • +
    + + +

    1100人在学习

    +
    +
    +
    + {{sc.courseName}} + 23课时 +
    +
    免费学习
    +
    +
  • + +
+
+
+
+ + +
+ +
+ + +
+
+ + Mysql + 更多课程 + +
+
+
+
    +
  • +
    + + +

    + 1100人已考试 + 初一 +

    +
    +
    +
    + {{sc.courseName}} +
    +
    去考试
    +
    +
  • + +
+
+
+
+ + +
+
+ + web + 更多课程 + +
+
+
+
    +
  • +
    + + +

    1100人在学习

    +
    +
    +
    + {{sc.courseName}} + 23课时 +
    +
    免费学习
    +
    +
  • +
+
+
+ +
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/js/axios.min.js b/js/axios.min.js new file mode 100644 index 0000000..fc6c8b6 --- /dev/null +++ b/js/axios.min.js @@ -0,0 +1,3 @@ +/* axios v0.21.1 | (c) 2020 by Matt Zabriskie */ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.axios=t():e.axios=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){var t=new i(e),n=s(i.prototype.request,t);return o.extend(n,i.prototype,t),o.extend(n,t),n}var o=n(2),s=n(3),i=n(4),a=n(22),u=n(10),c=r(u);c.Axios=i,c.create=function(e){return r(a(c.defaults,e))},c.Cancel=n(23),c.CancelToken=n(24),c.isCancel=n(9),c.all=function(e){return Promise.all(e)},c.spread=n(25),c.isAxiosError=n(26),e.exports=c,e.exports.default=c},function(e,t,n){"use strict";function r(e){return"[object Array]"===R.call(e)}function o(e){return"undefined"==typeof e}function s(e){return null!==e&&!o(e)&&null!==e.constructor&&!o(e.constructor)&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}function i(e){return"[object ArrayBuffer]"===R.call(e)}function a(e){return"undefined"!=typeof FormData&&e instanceof FormData}function u(e){var t;return t="undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&e.buffer instanceof ArrayBuffer}function c(e){return"string"==typeof e}function f(e){return"number"==typeof e}function p(e){return null!==e&&"object"==typeof e}function d(e){if("[object Object]"!==R.call(e))return!1;var t=Object.getPrototypeOf(e);return null===t||t===Object.prototype}function l(e){return"[object Date]"===R.call(e)}function h(e){return"[object File]"===R.call(e)}function m(e){return"[object Blob]"===R.call(e)}function y(e){return"[object Function]"===R.call(e)}function g(e){return p(e)&&y(e.pipe)}function v(e){return"undefined"!=typeof URLSearchParams&&e instanceof URLSearchParams}function x(e){return e.replace(/^\s*/,"").replace(/\s*$/,"")}function w(){return("undefined"==typeof navigator||"ReactNative"!==navigator.product&&"NativeScript"!==navigator.product&&"NS"!==navigator.product)&&("undefined"!=typeof window&&"undefined"!=typeof document)}function b(e,t){if(null!==e&&"undefined"!=typeof e)if("object"!=typeof e&&(e=[e]),r(e))for(var n=0,o=e.length;n=200&&e<300}};u.headers={common:{Accept:"application/json, text/plain, */*"}},s.forEach(["delete","get","head"],function(e){u.headers[e]={}}),s.forEach(["post","put","patch"],function(e){u.headers[e]=s.merge(a)}),e.exports=u},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){r.forEach(e,function(n,r){r!==t&&r.toUpperCase()===t.toUpperCase()&&(e[t]=n,delete e[r])})}},function(e,t,n){"use strict";var r=n(2),o=n(13),s=n(16),i=n(5),a=n(17),u=n(20),c=n(21),f=n(14);e.exports=function(e){return new Promise(function(t,n){var p=e.data,d=e.headers;r.isFormData(p)&&delete d["Content-Type"];var l=new XMLHttpRequest;if(e.auth){var h=e.auth.username||"",m=e.auth.password?unescape(encodeURIComponent(e.auth.password)):"";d.Authorization="Basic "+btoa(h+":"+m)}var y=a(e.baseURL,e.url);if(l.open(e.method.toUpperCase(),i(y,e.params,e.paramsSerializer),!0),l.timeout=e.timeout,l.onreadystatechange=function(){if(l&&4===l.readyState&&(0!==l.status||l.responseURL&&0===l.responseURL.indexOf("file:"))){var r="getAllResponseHeaders"in l?u(l.getAllResponseHeaders()):null,s=e.responseType&&"text"!==e.responseType?l.response:l.responseText,i={data:s,status:l.status,statusText:l.statusText,headers:r,config:e,request:l};o(t,n,i),l=null}},l.onabort=function(){l&&(n(f("Request aborted",e,"ECONNABORTED",l)),l=null)},l.onerror=function(){n(f("Network Error",e,null,l)),l=null},l.ontimeout=function(){var t="timeout of "+e.timeout+"ms exceeded";e.timeoutErrorMessage&&(t=e.timeoutErrorMessage),n(f(t,e,"ECONNABORTED",l)),l=null},r.isStandardBrowserEnv()){var g=(e.withCredentials||c(y))&&e.xsrfCookieName?s.read(e.xsrfCookieName):void 0;g&&(d[e.xsrfHeaderName]=g)}if("setRequestHeader"in l&&r.forEach(d,function(e,t){"undefined"==typeof p&&"content-type"===t.toLowerCase()?delete d[t]:l.setRequestHeader(t,e)}),r.isUndefined(e.withCredentials)||(l.withCredentials=!!e.withCredentials),e.responseType)try{l.responseType=e.responseType}catch(t){if("json"!==e.responseType)throw t}"function"==typeof e.onDownloadProgress&&l.addEventListener("progress",e.onDownloadProgress),"function"==typeof e.onUploadProgress&&l.upload&&l.upload.addEventListener("progress",e.onUploadProgress),e.cancelToken&&e.cancelToken.promise.then(function(e){l&&(l.abort(),n(e),l=null)}),p||(p=null),l.send(p)})}},function(e,t,n){"use strict";var r=n(14);e.exports=function(e,t,n){var o=n.config.validateStatus;n.status&&o&&!o(n.status)?t(r("Request failed with status code "+n.status,n.config,null,n.request,n)):e(n)}},function(e,t,n){"use strict";var r=n(15);e.exports=function(e,t,n,o,s){var i=new Error(e);return r(i,t,n,o,s)}},function(e,t){"use strict";e.exports=function(e,t,n,r,o){return e.config=t,n&&(e.code=n),e.request=r,e.response=o,e.isAxiosError=!0,e.toJSON=function(){return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:this.config,code:this.code}},e}},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,s,i){var a=[];a.push(e+"="+encodeURIComponent(t)),r.isNumber(n)&&a.push("expires="+new Date(n).toGMTString()),r.isString(o)&&a.push("path="+o),r.isString(s)&&a.push("domain="+s),i===!0&&a.push("secure"),document.cookie=a.join("; ")},read:function(e){var t=document.cookie.match(new RegExp("(^|;\\s*)("+e+")=([^;]*)"));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,"",Date.now()-864e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t,n){"use strict";var r=n(18),o=n(19);e.exports=function(e,t){return e&&!r(t)?o(e,t):t}},function(e,t){"use strict";e.exports=function(e){return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(e)}},function(e,t){"use strict";e.exports=function(e,t){return t?e.replace(/\/+$/,"")+"/"+t.replace(/^\/+/,""):e}},function(e,t,n){"use strict";var r=n(2),o=["age","authorization","content-length","content-type","etag","expires","from","host","if-modified-since","if-unmodified-since","last-modified","location","max-forwards","proxy-authorization","referer","retry-after","user-agent"];e.exports=function(e){var t,n,s,i={};return e?(r.forEach(e.split("\n"),function(e){if(s=e.indexOf(":"),t=r.trim(e.substr(0,s)).toLowerCase(),n=r.trim(e.substr(s+1)),t){if(i[t]&&o.indexOf(t)>=0)return;"set-cookie"===t?i[t]=(i[t]?i[t]:[]).concat([n]):i[t]=i[t]?i[t]+", "+n:n}}),i):i}},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){function e(e){var t=e;return n&&(o.setAttribute("href",t),t=o.href),o.setAttribute("href",t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,""):"",host:o.host,search:o.search?o.search.replace(/^\?/,""):"",hash:o.hash?o.hash.replace(/^#/,""):"",hostname:o.hostname,port:o.port,pathname:"/"===o.pathname.charAt(0)?o.pathname:"/"+o.pathname}}var t,n=/(msie|trident)/i.test(navigator.userAgent),o=document.createElement("a");return t=e(window.location.href),function(n){var o=r.isString(n)?e(n):n;return o.protocol===t.protocol&&o.host===t.host}}():function(){return function(){return!0}}()},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){function n(e,t){return r.isPlainObject(e)&&r.isPlainObject(t)?r.merge(e,t):r.isPlainObject(t)?r.merge({},t):r.isArray(t)?t.slice():t}function o(o){r.isUndefined(t[o])?r.isUndefined(e[o])||(s[o]=n(void 0,e[o])):s[o]=n(e[o],t[o])}t=t||{};var s={},i=["url","method","data"],a=["headers","auth","proxy","params"],u=["baseURL","transformRequest","transformResponse","paramsSerializer","timeout","timeoutMessage","withCredentials","adapter","responseType","xsrfCookieName","xsrfHeaderName","onUploadProgress","onDownloadProgress","decompress","maxContentLength","maxBodyLength","maxRedirects","transport","httpAgent","httpsAgent","cancelToken","socketPath","responseEncoding"],c=["validateStatus"];r.forEach(i,function(e){r.isUndefined(t[e])||(s[e]=n(void 0,t[e]))}),r.forEach(a,o),r.forEach(u,function(o){r.isUndefined(t[o])?r.isUndefined(e[o])||(s[o]=n(void 0,e[o])):s[o]=n(void 0,t[o])}),r.forEach(c,function(r){r in t?s[r]=n(e[r],t[r]):r in e&&(s[r]=n(void 0,e[r]))});var f=i.concat(a).concat(u).concat(c),p=Object.keys(e).concat(Object.keys(t)).filter(function(e){return f.indexOf(e)===-1});return r.forEach(p,o),s}},function(e,t){"use strict";function n(e){this.message=e}n.prototype.toString=function(){return"Cancel"+(this.message?": "+this.message:"")},n.prototype.__CANCEL__=!0,e.exports=n},function(e,t,n){"use strict";function r(e){if("function"!=typeof e)throw new TypeError("executor must be a function.");var t;this.promise=new Promise(function(e){t=e});var n=this;e(function(e){n.reason||(n.reason=new o(e),t(n.reason))})}var o=n(23);r.prototype.throwIfRequested=function(){if(this.reason)throw this.reason},r.source=function(){var e,t=new r(function(t){e=t});return{token:t,cancel:e}},e.exports=r},function(e,t){"use strict";e.exports=function(e){return function(t){return e.apply(null,t)}}},function(e,t){"use strict";e.exports=function(e){return"object"==typeof e&&e.isAxiosError===!0}}])}); +//# sourceMappingURL=axios.min.map \ No newline at end of file diff --git a/js/data.js b/js/data.js new file mode 100644 index 0000000..54293d0 --- /dev/null +++ b/js/data.js @@ -0,0 +1,168 @@ +var bannerData = [{ + title: '0基础做兼职', + src: './img/index/yjy (1).jpg' + }, + { + title: '2022大前端', + src: './img/index/yjy (2).jpg' + }, + { + title: '全链路UI设计', + src: './img/index/yjy (3).jpg' + }, + { + title: '微服务', + src: './img/index/yjy (4).jpg' + }, + { + title: '软件测试', + src: './img/index/yjy (5).jpg' + } +]; + + +/* + +var lesson = { + online: [{ + title: '行政管理专业班1', + src: './img/index/banner1.png', + cont: '人教版', + time: 23, + isFree: true, + num: 1100 + }, { + title: '行政管理专业班2', + src: './img/index/banner2.png', + cont: '人教版', + time: 23, + isFree: true, + num: 1100 + }, { + title: '行政管理专业班3', + src: './img/index/banner3.png', + cont: '人教版', + time: 23, + isFree: true, + num: 1100 + }, { + title: '行政管理专业班4', + src: './img/index/banner4.png', + cont: '人教版', + time: 22, + isFree: true, + num: 1100 + }, { + title: '行政管理专业班5', + src: './img/index/banner5.png', + cont: '人教版', + time: 33, + isFree: true, + num: 1100 + }, { + title: '行政管理专业班7', + src: './img/index/banner7.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100 + }, { + title: '行政管理专业班6', + src: './img/index/banner6.png', + cont: '人教版', + time: 33, + isFree: true, + num: 1100 + }, { + title: '行政管理专业班8', + src: './img/index/banner8.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100 + }], + test: [{ + title: '2020年6月北京中考试题', + src: './img/index/test1.png', + cont: '北京', + time: '初一', + num: 1100 + }, + { + title: '2020年6月北京中考试题', + src: './img/index/test2.png', + cont: '北京', + time: '初一', + num: 1100 + }, { + title: '2020年6月北京中考试题', + src: './img/index/test3.png', + cont: '北京', + time: '初一', + num: 1100 + }, { + title: '2020年6月北京中考试题', + src: './img/index/test4.png', + cont: '北京', + time: '初一', + num: 1100 + }, { + title: '2020年6月北京中考试题', + src: './img/index/test5.png', + cont: '北京', + time: '初一', + num: 1100 + }, { + title: '2020年6月北京中考试题', + src: './img/index/test6.png', + cont: '北京', + time: '初一', + num: 1100 + } + ], + good: [ + { + title: '行政管理专业班', + src: './img/index/good_banner1.png', + cont: '天津', + time: 23, + isFree: true, + num: 1100 + },{ + title: '行政管理专业班2', + src: './img/index/good_banner2.png', + cont: '天津', + time: 23, + isFree: true, + num: 1100 + },{ + title: '行政管理专业班3', + src: './img/index/good_banner3.png', + cont: '天津', + time: 23, + isFree: true, + num: 1100 + },{ + title: '行政管理专业班4', + src: './img/index/good_banner4.png', + cont: '天津', + time: 23, + isFree: true, + num: 1100 + },{ + title: '行政管理专业班5', + src: './img/index/good_banner5.png', + cont: '天津', + time: 23, + isFree: true, + num: 1100 + },{ + title: '行政管理专业班6', + src: './img/index/good_banner6.png', + cont: '天津', + time: 23, + isFree: true, + num: 1100 + } + ] +}*/ diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..83405f1 --- /dev/null +++ b/js/index.js @@ -0,0 +1,148 @@ +/* + 首页 + 顶部banner +*/ +window.onload = function () { + var ban = document.getElementsByClassName('banner')[0]; + var banul = ban.getElementsByClassName('list')[0]; + var banimg = ban.getElementsByClassName('img')[0]; + console.log(banul); + + // 数据嵌套 + var bannerhtml = ''; + var imghtml = ''; + for (var i = 0; i < bannerData.length; i++) { + bannerhtml += `
  • ${bannerData[i].title}
  • `; + imghtml += `
  • `; + + } + banul.innerHTML = bannerhtml; + banimg.innerHTML = imghtml; + + var banlis = banul.getElementsByTagName('li'); + var imglis = banimg.getElementsByTagName('li'); + console.log(banlis); + banlis[0].className = 'high'; + imglis[0].className = 'active'; + + // 轮播图 + var n = 0; + ban.timer = setInterval(auto, 2000); + + function auto() { + n++; + if (n == banlis.length) n = 0; + for (var i = 0; i < banlis.length; i++) { + banlis[i].className = ''; + // imglis[i].className = ''; + buffMove(imglis[i], { + opacity: 0 + }); + } + banlis[n].className = 'high'; + // imglis[n].className = 'active'; + buffMove(imglis[n], { + opacity: 1 + }); + + } + + // 划上停止 + banul.onmouseenter = function () { + clearInterval(ban.timer); + } + + // 划下开始 + banul.onmouseleave = function () { + ban.timer = setInterval(auto, 2000); + } + + // 划上每一个切换 + for (var j = 0; j < banlis.length; j++) { + banlis[j].index = j; + banlis[j].onmouseenter = function () { + n = this.index - 1; + auto(); + } + } + + + // 同步课程 + var online = document.getElementsByClassName('onlineCont'); + var onul = online[0].getElementsByTagName('ul')[0]; + console.log(onul); + var testul = online[1].getElementsByTagName('ul')[0]; + var goodul = online[2].getElementsByTagName('ul')[0]; + + setHtml(lesson.online, onul, false); + setHtml(lesson.test, testul, true); + setHtml(lesson.good, goodul, false); + + + function setHtml(data, father, isTest) { + var onhtml = ''; + var r = {}; + if (!isTest) { + for (var i = 0; i < data.length; i++) { + r = data[i]; + onhtml += `
  • +
    + ${r.cont} + +

    ${r.num}人在学习

    +
    +
    +
    + ${r.title} + ${r.time}课时 +
    +
    ${r.isFree ? '免费学习' : '付费学习'}
    +
    +
  • `; + } + } else { + for (var i = 0; i < data.length; i++) { + r = data[i]; + onhtml += `
  • +
    + ${r.cont} + +

    + ${r.num}人已考试 + ${r.time} +

    +
    +
    +
    + ${r.title} +
    +
    去考试
    +
    +
  • `; + } + } + father.innerHTML = onhtml; + } + + var fix = document.getElementsByClassName('fix')[0]; + console.log(ban.offsetLeft); + var cw = document.documentElement.clientWidth; + if (cw > 1270) { + fix.style.left = ban.offsetLeft + 1200 + 'px'; + } else { + fix.style.left = auto; + fix.style.right = 0; + } + + // 返回顶部 + var top1 = fix.querySelector('.top'); + console.log(top1); + top1.onclick = function () { + document.body.timer = setInterval(function () { + document.documentElement.scrollTop -= 50; + if (document.documentElement.scrollTop <= 0) { + clearInterval(document.body.timer); + } + }, 1); + } +} \ No newline at end of file diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..4651e55 --- /dev/null +++ b/js/login.js @@ -0,0 +1,84 @@ + // 获取元素 + var form = document.getElementById("form"), + tel = form.tel, + pass = form.pass, + submit = utils.getClass("loginbtn", form)[0]; + em = form.getElementsByTagName("em")[0]; + + + // 保存正则验证的规则 + var regObj = { + tel: /^1\d{10}$/, + pass: /^\w{6,20}$/ + }; + + + // 验证所有的输入框是否都验证通过 + var arr = [true, true]; + + + // 输入框的验证 + tel.onblur = function () { + var val = this.value; + if (regObj.tel.test(val)) { //符合规则 + em.innerHTML = ""; + arr[0] = true; + } else { + em.innerHTML = "您输入的账号或密码不正确"; + arr[0] = false; + } + } + + + pass.onblur = function () { + var val = this.value; + if (regObj.pass.test(val)) { //符合规则 + em.innerHTML = ""; + arr[1] = true; + } else { + em.innerHTML = "您输入的账号或密码不正确"; + arr[1] = false; + } + } + + + form.onsubmit = function () { + // 验证 所有的验证都通过了才发送给服务器 + // 让所有的输入框失去焦点 + tel.focus(); + pass.focus(); + pass.blur(); + + //针对数组做一些判断 都为真才为真 一个为假即位为假 + var resBool = arr.every(function (val, index) { + return val; + }); + + if (resBool) { // 所有的验证都通过了返回true + //登录成功到首页 + var userArr = JSON.parse(window.localStorage.getItem("user")); + + if (!userArr) { //本地还没有存储 + alert("还没有注册,请先注册~~~"); + window.location.href = "./register.html"; + return false; + } + + // 取出数据做比较 + for (var i = 0; i < userArr.length; i++) { + // 输入的用户名和密码都正确才能登录成功 + if (tel.value === userArr[i].tel && pass.value === userArr[i].pass) { + alert("登录成功"); + window.location.href = "../../index.html"; + window.localStorage.setItem("id", tel.value); + return false; + } + } + + // 本地有数据 但是没有当前用户 + alert("当前用户没有注册~~~"); + window.location.href = "./register.html"; + } + + return false; + } \ No newline at end of file diff --git a/js/online.js b/js/online.js new file mode 100644 index 0000000..8f316d4 --- /dev/null +++ b/js/online.js @@ -0,0 +1,177 @@ +window.onload = function () { + // 登陆部分 + var loginbox = document.querySelector('.login'); + var login = loginbox.querySelector('a'); + var user = document.querySelector('.user'); + if (localStorage.login == 'true') { + user.style.display = 'inline-block'; + loginbox.style.display = 'none'; + } + + var pos = document.querySelector('.pos'); + login.onclick = function () { + pos.style.display = 'block'; + document.body.style.overflow = 'hidden'; + } + var inps = pos.querySelectorAll('input'); + var loginbtn = document.querySelector('.loginbtn'); + var phonereg = /^1[3-9]\d{9}$/; + var passreg = /(^\d{6,18}$)|(^[a-zA-Z]{6,18}$)/; + loginbtn.onclick = function () { + if (phonereg.test(inps[0].value) && passreg.test(inps[1].value)) { + localStorage.login = true; + localStorage.phone = inps[0].value; + localStorage.pass = inps[1].value; + pos.style.display = 'none'; + document.body.style.overflow = 'scroll'; + user.style.display = 'inline-block'; + loginbox.style.display = 'none'; + } else { + alert('请输入正确的手机号和密码'); + } + } + + var close = pos.querySelector('.close'); + close.onclick = function () { + pos.style.display = 'none'; + document.body.style.overflow = 'scroll'; + } + + // 用户退出菜单 + var out = user.querySelector('.out'); + out.onclick = function () { + localStorage.login = 'false'; + localStorage.phone = ''; + localStorage.pass = ''; + if (location.href.indexOf('videoPlay') != -1) { + location.href = '../index.html'; + } else { + location.reload(); + } + } + + + var lesson = document.getElementsByClassName('lesson')[0]; + var ul = lesson.getElementsByTagName('ul')[0]; + + var n = 0; // 页数 + // 渲染初始内容 + // 渲染数据 + var allData = online; + + // 截取数据 + var data = online.slice(n * 12, (n + 1) * 12); + // 0 12-1 12 24-1 + setHtml(data); + + // 渲染页数 + var pageNum = document.getElementsByClassName('pageNum')[0]; + var numul = pageNum.getElementsByTagName('ul')[0]; + var allNum = Math.ceil(online.length / 12); + + // 页数渲染 + setNum(allNum); + + var numlis = numul.getElementsByTagName('li'); + + // 渲染上一个下一个按钮 + var btns = pageNum.getElementsByTagName('button'); + if (allNum > 1) btns[1].className = 'active'; + if (n > 0) btns[0].className = 'active'; + + // 筛选学科 + var rows = document.getElementsByClassName('row'); + var objlis = rows[3].getElementsByTagName('li'); + for (var i = 0; i < objlis.length; i++) { + objlis[i].onclick = function () { + for (var j = 0; j < objlis.length; j++) { + objlis[j].getElementsByTagName('a')[0].className = ''; + } + this.getElementsByTagName('a')[0].className = 'active'; + var attr = this.getAttribute('obj'); + allData = online.filter(function (v, i) { + return attr == '1' ? 1 : v.subject == attr; + }); + n = 0; + allNum = Math.ceil(allData.length / 12); + data = allData.slice(n * 12, (n + 1) * 12); + setHtml(data); + setNum(allNum); + } + } + + // 上一页按钮 + btns[0].onclick = function () { + if (n == 0) return; + n--; + data = allData.slice(n * 12, (n + 1) * 12); + setHtml(data); + changebtn(); + } + + // 下一页按钮 + btns[1].onclick = function () { + if (n == allNum - 1) return; + n++; + data = allData.slice(n * 12, (n + 1) * 12); + setHtml(data); + changebtn(); + } + + // 点击每个页数,改变数据 + for (var j = 0; j < numlis.length; j++) { + numlis[j].index = j; + numlis[j].onclick = function () { + n = this.index; + data = allData.slice(n * 12, (n + 1) * 12); + setHtml(data); + changebtn(); + } + } + + // 渲染页面函数 + function setHtml(data) { + var html = ''; + for (var i = 0; i < data.length; i++) { + var r = data[i]; + html += `
  • +
    + +

    ${r.num}人在学习

    +
    +
    +
    + ${r.title} + ${r.time}课时 +
    +
    免费学习
    +
    +
  • `; + } + ul.innerHTML = html; + + } + + // 渲染页数函数 + function setNum(allNum) { + // 页数渲染 + var numhtml = ''; + for (var i = 1; i <= allNum; i++) { + numhtml += `
  • ${i}
  • `; + } + numul.innerHTML = numhtml; + var numlis = numul.getElementsByTagName('li'); + numlis[0].className = 'active'; + } + + // 改变按钮样式 + function changebtn() { + allNum - 2 >= n ? btns[1].className = 'active' : btns[1].className = ''; + n > 0 ? btns[0].className = 'active' : btns[0].className = ''; + for (var i = 0; i < numlis.length; i++) { + numlis[i].className = ''; + } + numlis[n].className = 'active'; + document.documentElement.scrollTop = 0; + } +} \ No newline at end of file diff --git a/js/onlinedata.js b/js/onlinedata.js new file mode 100644 index 0000000..46ac86d --- /dev/null +++ b/js/onlinedata.js @@ -0,0 +1,283 @@ +/* +var online = [{ + title: '人教版语文第一节课程内容讲解', + src: '../img/online/banner1-1.png', + cont: '人教版', + time: 23, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'yuwen' +}, { + title: '人教版数学第一节课程内容讲解', + src: '../img/online/banner1-2.png', + cont: '人教版', + time: 23, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'shuxue' +}, { + title: '人教版英语第一节课程内容讲解', + src: '../img/online/banner1-3.png', + cont: '人教版', + time: 23, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'english' +}, { + title: '人教版数学第一节课程内容讲解', + src: '../img/online/banner1-4.png', + cont: '人教版', + time: 22, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'shuxue' +}, { + title: '人教版语文第一节课程内容讲解', + src: '../img/online/banner1-5.png', + cont: '人教版', + time: 33, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'yuwen' +}, { + title: '人教版英语第一节课程内容讲解', + src: '../img/online/banner1-6.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'english' +}, { + title: '人教版语文第一节课程内容讲解', + src: '../img/online/banner2-1.png', + cont: '人教版', + time: 33, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'yuwen' +}, { + title: '人教版物理第一节课程内容讲解', + src: '../img/online/banner2-2.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'wuli' +}, { + title: '人教版化学第一节课程内容讲解', + src: '../img/online/banner2-3.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: '化学' +}, { + title: '人教版生物第一节课程内容讲解', + src: '../img/online/banner2-4.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'shengwu' +}, { + title: '人教版物理第一节课程内容讲解', + src: '../img/online/banner2-5.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'wuli' +}, { + title: '人教版化学第一节课程内容讲解', + src: '../img/online/banner2-6.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'huaxue' +}, { + title: '人教版化学第一节课程内容讲解', + src: '../img/online/banner2-3.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: '化学' +}, { + title: '人教版生物第一节课程内容讲解', + src: '../img/online/banner2-4.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'shengwu' +}, { + title: '人教版化学第一节课程内容讲解', + src: '../img/online/banner2-3.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: '化学' +}, { + title: '人教版生物第一节课程内容讲解', + src: '../img/online/banner2-4.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'shengwu' +}, { + title: '人教版英语第一节课程内容讲解', + src: '../img/online/banner1-6.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'english' +}, { + title: '人教版语文第一节课程内容讲解', + src: '../img/online/banner2-1.png', + cont: '人教版', + time: 33, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'yuwen' +}, { + title: '人教版物理第一节课程内容讲解', + src: '../img/online/banner2-2.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'wuli' +}, { + title: '人教版化学第一节课程内容讲解', + src: '../img/online/banner2-3.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: '化学' +}, { + title: '人教版生物第一节课程内容讲解', + src: '../img/online/banner2-4.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'shengwu' +}, { + title: '人教版物理第一节课程内容讲解', + src: '../img/online/banner2-5.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'wuli' +}, { + title: '人教版英语第一节课程内容讲解', + src: '../img/online/banner1-6.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'english' +}, { + title: '人教版语文第一节课程内容讲解', + src: '../img/online/banner2-1.png', + cont: '人教版', + time: 33, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'yuwen' +}, { + title: '人教版物理第一节课程内容讲解', + src: '../img/online/banner2-2.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'wuli' +}, { + title: '人教版化学第一节课程内容讲解', + src: '../img/online/banner2-3.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: '化学' +}, { + title: '人教版生物第一节课程内容讲解', + src: '../img/online/banner2-4.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'shengwu' +}, { + title: '人教版物理第一节课程内容讲解', + src: '../img/online/banner2-5.png', + cont: '人教版', + time: 44, + isFree: true, + num: 1100, + city: 'bj', + level: 1, + subject: 'wuli' +}]; +*/ diff --git a/js/register.js b/js/register.js new file mode 100644 index 0000000..2587a34 --- /dev/null +++ b/js/register.js @@ -0,0 +1,143 @@ + // 获取元素 + var form = document.getElementById("form"), + tel = form.tel, + pass = form.pass, + pass2 = form.pass2, + yanzhen = form.yanzhen, + yanzhenma = utils.getClass("yanzhenma", form)[0], + submit = utils.getClass("loginbtn", form)[0]; + + + // 保存正则验证的规则 + var regObj = { + tel: /^1\d{10}$/, + pass: /^\w{6,20}$/ + }; + + + // 验证所有的输入框是否都验证通过 + var arr = [true, true, true, true]; + + // 随机四位验证码 + ;(function () { + // 返回四位随机字符串 + function randomChar() { + var char = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; + var str = ''; + for (var i = 0; i < 4; i++) { + str += char[utils.getRandomNumber(0, char.length - 1)]; + } + return str; + } + + // 初始化页面 + yanzhenma.innerHTML = randomChar(); + + // 点击改变 + yanzhenma.onclick = function () { + this.innerHTML = randomChar(); + } + + })(); + + + // 输入框的验证 + tel.onblur = function () { + var val = this.value; + var em = utils.next(this); + if (regObj.tel.test(val)) { //符合规则 + em.innerHTML = ""; + arr[0] = true; + } else { + em.innerHTML = "手机格式错误,请重新输入!"; + arr[0] = false; + } + } + + + pass.onblur = function () { + var val = this.value; + var em = utils.next(this); + if (regObj.pass.test(val)) { //符合规则 + em.innerHTML = ""; + arr[1] = true; + } else { + em.innerHTML = "密码格式错误,请重新输入!"; + arr[1] = false; + } + } + + pass2.onblur = function () { + var val = this.value; + var em = utils.next(this); + if (val && val === pass.value) { + em.innerHTML = ""; + arr[2] = true; + } else { + em.innerHTML = "密码两次输入不同请验证~"; + arr[2] = false; + } + } + + yanzhen.onblur = function () { + var val = this.value; + var em = utils.next(utils.next(this)); + if (val.toLowerCase() === utils.next(this).innerHTML.toLowerCase()) { + em.innerHTML = ""; + arr[3] = true; + } else { + em.innerHTML = "验证码输入不正确"; + arr[3] = false; + } + } + + + form.onsubmit = function (ev) { + console.log(arr); + ev = ev || window.event; + ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; + + // 验证 所有的验证都通过了才发送给服务器 + // 让所有的输入框失去焦点 + tel.focus(); + pass.focus(); + pass2.focus(); + yanzhen.focus(); + yanzhen.blur(); + + + //针对数组做一些判断 都为真才为真 一个为假即位为假 + var resBool = arr.every(function (val, index) { + return val; + }); + + if (resBool) { // 所有的验证都通过了返回true + // 准备传递服务器的参数 + + // 准备一个用户 + var obj = { + tel: tel.value, + pass: pass.value + }; + + + alert("注册成功"); + // 将用户名 密码存储 + + // 存储之前先获取 + // 可能获取到了是一个对象 没有存储 获取到的null + var myArr = JSON.parse(window.localStorage.getItem("user")); + + + if (myArr) { + myArr.push(obj); + window.localStorage.setItem("user", JSON.stringify(myArr)); + } else { + window.localStorage.setItem("user", JSON.stringify([obj])); + } + + // 跳转到登录 + window.location.href = "./login.html"; + } + + } \ No newline at end of file diff --git a/js/ujiuye.js b/js/ujiuye.js new file mode 100644 index 0000000..4681788 --- /dev/null +++ b/js/ujiuye.js @@ -0,0 +1,266 @@ +// js的函数库 + +// 获取元素的非行间样式 +function getStyle(ele, attr) { + // ele: 元素 + // attr: 属性名 + if (window.getComputedStyle) { + // 标准 + // console.log(window.getComputedStyle(ele)[attr]); + return window.getComputedStyle(ele)[attr]; + } else { + // ie8及以下 + // console.log(ele.currentStyle[attr]); + return ele.currentStyle[attr]; + } +} + +// 运动函数 +function move(ele, attr, step, tar) { + // ele: 元素 + // attr: 属性 + // step: 每一步距离 0-1000 +10 1000-0 -10 + // tar: 目标值 + // 为了用户的方便,每一步是加还是减,需要函数内来进行判断 + var cur = parseInt(getStyle(ele, attr)); + step = cur < tar ? step : -step; + // 开启新的定时器之前,先清除定时器 + clearInterval(ele.t); + // 要想不间断移动,开启定时器 + ele.t = setInterval(function () { + // 每一次都基于当前的left减少10px + var cur = parseInt(getStyle(ele, attr)); + var end = cur + step; + console.log(end, tar); + // 判断是否到达目标值 + if (step > 0 && end >= tar || step < 0 && end <= tar) { + end = tar; + clearInterval(ele.t); + } + // 将计算以后的结束值,赋值给ele的left + ele.style[attr] = end + 'px'; + }, 20); +} + +// 获取随机验证码 +function getCode(n, str) { + str = str ? str : '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; + n = n ? n : 4; + // 存储获取到字母 + var s = ''; + // 随机6位验证码 + // 得到6次随机数 + for (var i = 0; i < n; i++) { + var num = Math.floor(Math.random() * str.length); + s += str[num]; + } + // 设置返回值 + return s; +} + +// 给10以下数字 补0操作 +function add0(val) { + if (val < 10) { + val = '0' + val; + } else { + val = val; + } + return val; +} + +// 有目的性的函数: 创建一个标签 +function createEle(ele, text) { + // ele: 创建什么节点 + // text: td中的内容传递过来 + var td4 = document.createElement(ele); + td4.innerHTML = text; + return td4; +} + +// 添加事件绑定 +function addEvent(ele, type, fn) { + // ele: 元素 + // type: 事件类型 + if (ele.attachEvent) { + // ie8 + ele.attachEvent('on' + type, fn); + } else { + // 标准 + ele.addEventListener(type, fn, false); + } +} + + +// 事件取消 +function removeEvent(ele, type, fn) { + // ele: 元素 + // type: 事件类型 + // fn: 函数 + if (ele.detachEvent) { + // ie8 + ele.detachEvent('on' + type, fn); + } else { + // 标准 + ele.removeEventListener(type, fn, false); + } +} + +// 空函数:拖拽 +function drag(elem) { + // elem: 元素 + // 添加按下事件 + elem.onmousedown = function (evs) { + // 按下的瞬间,获取鼠标当前的位置 事件对象 + var ev = window.event || evs; + // l1 = x1 - ol; l1: 鼠标距离元素左侧的距离 x1: 鼠标距离屏幕左侧的距离 ev.clientX + var l1 = ev.clientX - elem.offsetLeft; + var t1 = ev.clientY - elem.offsetTop; + document.onmousemove = function (evs) { + // 元素动一下 left移动10px + // elem.style.left = 50 + 'px'; + // 鼠标移动的位置 事件对象 + var ev = window.event || evs; + // 设置给元素的l l = cx - l1; cx: 鼠标距离屏幕左侧的距离 - 鼠标距离元素左侧的距离 + var le = ev.clientX - l1; + var to = ev.clientY - t1; + // 判断临界值 + if (le <= 0) { + le = 0; + } + if (to <= 0) { + to = 0; + } + var lMax = document.documentElement.clientWidth - elem.offsetWidth; + if (le >= lMax) { + le = lMax; + } + var tMax = document.documentElement.clientHeight - elem.offsetHeight; + if (to >= tMax) { + to = tMax; + } + + // 赋值给elem + elem.style.left = le + 'px'; + elem.style.top = to + 'px'; + } + // elem设置全局捕获 + if (elem.setCapture) { + elem.setCapture(); + } + return false; + } + // 添加抬起事件 + document.onmouseup = function () { + document.onmousemove = null; + // 释放全局捕获 + if (elem.releaseCapture) { + elem.releaseCapture(); + } + } +} + +// 缓冲运动 +function buffMove(ele, object, fn) { + // ele: 元素 + // object: 属性和目标值 + // fn: 回调函数 + // 获取每一个属性判断有没有透明度 + for (var key in object) { + if (key == 'opacity') { + object[key] = object[key] * 100 + } + } + // 清除定时器,保证一次只有一个定时器在动 + clearInterval(ele.timer); + ele.timer = setInterval(function () { + // 不知道要不要清除定时器 假设需要清除 + var flag = true; + for (var key in object) { + if (key == 'opacity') { + // 当前透明度 0-1 0-100 + var cur = getStyle(ele, key) * 100; + } else { + // 每一次从当前位置 获取当前位置 981.95 用parseInt-->981 + var cur = parseInt(getStyle(ele, key)); + } + // 速度 路程/时间 + var speed = (object[key] - cur) / 20; + speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); + var end = cur + speed; + // 判断有没有到达目标值 如果没有到目标值,一个没到,都不能清除 + if (end != object[key]) { + // 没到 + flag = false; + } + if (key == 'opacity') { + ele.style[key] = end / 100; + } else { + // 赋值给ele + ele.style[key] = end + 'px'; + } + } + // flag为true 假设成立 需要清除 动作已经结束 + if (flag) { + clearInterval(ele.timer); + fn && fn(); + } + }, 20); +} + +// 请求数据的ajax函数 +function Ajax(type, url, string, fn) { + // type: 请求方式 + // url: 请求地址 + // string: 请求参数 + // fn: 请求完成后要执行的函数 + // 1. 创建ajax对象 + var ajax = new XMLHttpRequest(); + // 建立连接: ajax对象.open(请求方式, 请求地址 + ? + 请求参数, 是否异步); + if (type == 'get') { + ajax.open(type, url + '?' + string, true); + // 3. 发送请求: ajax对象.send(); + ajax.send(); + } else { + ajax.open(type, url, true); + // 2.1 设置头请求 + ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8'); + // 3. 发送请求: ajax对象.send(); + ajax.send(string); + } + + // 4. 添加事件监听: ajax对象.onreadystatechange事件 + ajax.onreadystatechange = function () { + if (ajax.readyState == 4 && ajax.status == 200) { + // 5. 得到请求返回的数据 ajax对象.response + fn(ajax.response); + } + } +} + + +// 面向对象的选项卡 +function ChangeDiv(parent) { + // 获取元素 + var par = document.getElementById(parent); + this.divs = par.getElementsByTagName('div'); + this.btns = par.getElementsByTagName('button'); + // 外头能得到正确的this 存一下 + var that = this; + // 点击每一个btn + for (var i = 0; i < this.btns.length; i++) { + this.btns[i].index = i; + // this.btns[i].onclick = this.cFn; + this.btns[i].onclick = function () { + // 点击事件中 this指向触发源 this.btns[i] + that.cFn(this.index); + }; + } +} +ChangeDiv.prototype.cFn = function (ind) { + // 显示div 下标一一对应 按钮的下标 + // 当前点击事件中得不到正确的对象的this + for (var j = 0; j < this.divs.length; j++) { + this.divs[j].style.display = 'none'; + } + this.divs[ind].style.display = 'block'; +} \ No newline at end of file diff --git a/js/user.js b/js/user.js new file mode 100644 index 0000000..795381a --- /dev/null +++ b/js/user.js @@ -0,0 +1,16 @@ +~ function () { + var login = utils.getClass("login")[0], + user = utils.getClass("user")[0], + out = utils.getClass("out",user)[0]; + var resBool = localStorage.getItem("id"); + if (resBool) { + login.style.display = "none"; + user.style.display = "inline-block"; + } + + out.onclick = function(){ + localStorage.removeItem("id"); + login.style.display = "inline-block"; + user.style.display = "none"; + } +}(); \ No newline at end of file diff --git a/js/userSeting.js b/js/userSeting.js new file mode 100644 index 0000000..34ae5af --- /dev/null +++ b/js/userSeting.js @@ -0,0 +1,33 @@ +~ function () { + var pItem = document.querySelectorAll("#leftNav p"); + var pImg = document.querySelectorAll("#leftNav img"); + var pClass = document.querySelectorAll("#leftNav ol"); + + for(var i = 0;i[${vd.year}] ${vd.title}

    + `; + + var rin = document.getElementsByClassName('introduce')[0]; + rin.innerHTML = `

    授课师资

    +
    +

    + +

    +

    + ${vd.teacher} + ${vd.teacherTitle} +

    + +
    +
    + ${vd.introduce} +
    `; + + var rt = document.querySelector('.row.title'); + var rspans = rt.querySelectorAll('span'); + var cls = document.querySelectorAll('.classlist'); + rspans[0].onclick = function () { + this.className = 'active'; + rspans[1].className = ''; + cls[0].className = 'classlist active'; + cls[1].className = 'classlist'; + } + rspans[1].onclick = function () { + this.className = 'active'; + rspans[0].className = ''; + cls[1].className = 'classlist active'; + cls[0].className = 'classlist'; + } + + // 渲染课程列表 + var dl = cls[0].getElementsByClassName('content')[0]; + var html = ''; + for (var i = 0; i < classList.length; i++) { + html += `
    +

    ${classList[i].title}(含${classList[i].num}期)

    +
      +
    +
    `; + } + dl.innerHTML = html; + + var uls = dl.getElementsByTagName('ul'); + for (var i = 0; i < uls.length; i++) { + var ulhtml = ''; + for (var j = 0; j < classList[i].list.length; j++) { + ulhtml += `
  • +

    + + ${classList[i].list[j].name} +

    +

    + ${classList[i].list[j].time}开播 + 播放视频

    +
  • `; + } + uls[i].innerHTML = ulhtml; + } + + var dlp = dl.getElementsByClassName('title'); + for (var i = 0; i < dlp.length; i++) { + dlp[i].index = i; + dlp[i].onclick = function () { + var pi = this.getElementsByTagName('i')[0]; + if (this.className == 'title') { + this.className += ' active'; + pi.className = 'iconfont icon-top1'; + uls[this.index].className = 'active'; + } else { + this.className = 'title'; + pi.className = 'iconfont icon-down'; + uls[this.index].className = ''; + } + } + } + + + var lis = dl.getElementsByTagName('li'); + for (var i = 0; i < lis.length; i++) { + lis[i].onmouseenter = function () { + var spans = this.getElementsByTagName('p')[1].getElementsByTagName('span'); + spans[0].style.display = 'none'; + spans[1].style.display = 'inline-block'; + } + lis[i].onmouseleave = function () { + var spans = this.getElementsByTagName('p')[1].getElementsByTagName('span'); + spans[1].style.display = 'none'; + spans[0].style.display = 'inline-block'; + } + } + + // 免费试学是否跳转 + var fs = document.getElementsByClassName('freeStudy')[0]; + console.log(fs); + fs.onclick = function () { + if (localStorage.login == 'true') { + location.href = './videoPlay.html'; + } else { + pos.style.display = 'block'; + document.body.style.overflow = 'hidden'; + + } + } + + // 点击播放视频 + var starts = document.querySelectorAll('.start'); + for (var i = 0; i < starts.length; i++) { + starts[i].onclick = function () { + if (localStorage.login == 'true') { + location.href = './videoPlay.html'; + } else { + alert('请先登录'); + pos.style.display = 'block'; + document.body.style.overflow = 'hidden'; + } + } + } + + // 点击展开查看全部 + var seeAll = document.querySelector('.seeAll'); + seeAll.onclick = function () { + if (this.innerHTML == '点击展开查看全部') { + for (var i = 0; i < dlp.length; i++) { + var pi = dlp[i].getElementsByTagName('i')[0]; + pi.className = 'iconfont icon-top1'; + uls[i].className = 'active'; + } + this.innerHTML = '收起查看全部'; + } else { + for (var i = 0; i < dlp.length; i++) { + var pi = dlp[i].getElementsByTagName('i')[0]; + pi.className = 'iconfont icon-down'; + uls[i].className = ''; + } + this.innerHTML = '点击展开查看全部'; + } + } +} \ No newline at end of file diff --git a/js/videoDetaildata.js b/js/videoDetaildata.js new file mode 100644 index 0000000..a0697b7 --- /dev/null +++ b/js/videoDetaildata.js @@ -0,0 +1,83 @@ +/* +var videoDetail = { + poster: '../img/videoDetail/san.png', + src: '../video/05_tabbar.mp4', + title: '初三数学班', + year: '2019年秋季', + grade: '初三数学', + time: 15, + duration: '09月30日—12月20日', + period: '2020年12月20日', + end: 1616206481238, + day: 33, + h: 23, + m: 23, + s: 23, + price: 199, + isFree: true, + singlePrice: 199, + group: 99, + teacher: '李晓明', + teacherTitle: '小U课堂高级讲师', + introduce: '多年IT行业从业经验,精通常用的Web开发技术;熟悉主流的CMS、商城、论坛 等PHP开源产品,具有丰富的建站及二次开发经验,多个大型ERP系统的开发实践经验;精通常用的PHP开发框架,对服务器架构及服务器日常运维等方面有一 定的研究。' +}; + +var classList = [{ + title: '第一章:公开课', + num: 4, + list: [ + {name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第二章:公开课', + num: 4, + list: [ + {name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第三章:公开课', + num: 4, + list: [ + {name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第四章:公开课', + num: 4, + list: [ + {name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第五章:公开课', + num: 4, + list: [ + {name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第六章:公开课', + num: 4, + list: [ + {name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +}]; + +var classImgList = [ + '../img/videoDetail/detail.png' +];*/ diff --git a/js/videoPlay.js b/js/videoPlay.js new file mode 100644 index 0000000..1eabcdf --- /dev/null +++ b/js/videoPlay.js @@ -0,0 +1,264 @@ +window.onload = function () { + + // 登陆部分 + localStorage.login = 'true'; + localStorage.phone = '13222221111'; + localStorage.pass = '123456'; + + var loginbox = document.querySelector('.login'); + var user = document.querySelector('.user'); + if (localStorage.login == 'true') { + user.style.display = 'inline-block'; + loginbox.style.display = 'none'; + } + + // 用户退出菜单 + var out = user.querySelector('.out'); + out.onclick = function(){ + localStorage.login = 'false'; + localStorage.phone = ''; + localStorage.pass = ''; + if(location.href.indexOf('videoPlay') != -1){ + location.href = '../index.html'; + } else { + location.reload(); + } + } + + + var vd = videoDetail; + var cd = document.getElementsByClassName('classDetail')[0]; + var video = cd.getElementsByTagName('video')[0]; + video.poster = vd.poster; + video.src = vd.src; + + var rg = cd.getElementsByClassName('right')[0]; + // 右侧盒子内容 + var contents = rg.getElementsByClassName('content'); + var html = ''; + for (var i = 0; i < classList.length; i++) { + var data = classList[i]; + html += `
    +

    ${data.title}(含${data.num}期)

    +
      +
    +
    `; + } + contents[0].innerHTML = html; + var contuls = contents[0].getElementsByTagName('ul'); + for (var i = 0; i < contuls.length; i++) { + html = ''; + for (var j = 0; j < classList[i].list.length; j++) { + html += `
  • + ${classList[i].list[j].name} + +
  • `; + } + contuls[i].innerHTML = html; + } + + // 点击li切换播放 + var contlis = contents[0].getElementsByTagName('li'); + for (var i = 0; i < contlis.length; i++) { + contlis[i].onclick = function () { + video.src = this.getAttribute('src'); + video.play(); + for (var j = 0; j < contlis.length; j++) { + contlis[j].className = ''; + } + this.className = 'active'; + } + } + + // 渲染评论 + var commentul = contents[1].getElementsByClassName('comment')[0]; + setComment(); + function setComment() { + html = ''; + for (var i = 0; i < commentList.length; i++) { + html += `
  • +

    + + ${commentList[i].name} + ${commentList[i].time} +

    +

    ${commentList[i].content}

    +
  • `; + } + commentul.innerHTML = html; + } + + var spants = rg.getElementsByClassName('top')[0].getElementsByTagName('span'); + console.log(spants); + spants[0].onclick = function () { + this.className = 'active'; + spants[1].className = ''; + contents[0].className = 'content active'; + contents[1].className = 'content'; + + } + spants[1].onclick = function () { + this.className = 'active'; + spants[0].className = ''; + contents[1].className = 'content active'; + contents[0].className = 'content'; + } + + // 发表评论 + var push = rg.getElementsByClassName('push')[0]; + var txt = rg.getElementsByClassName('txt')[0]; + push.onclick = function () { + console.log(txt.value); + var obj = { + name: localStorage.phone, + src: '../img/login/wx.png', + content: txt.value, + time: new Date().getHours() + ':' + new Date().getSeconds() + }; + commentList.unshift(obj); + setComment(); + } + + var rin = document.getElementsByClassName('introduce')[0]; + rin.innerHTML = `

    授课师资

    +
    +

    + +

    +

    + ${vd.teacher} + ${vd.teacherTitle} +

    + +
    +
    + ${vd.introduce} +
    `; + + var rt = document.querySelector('.row.title'); + var rspans = rt.querySelectorAll('span'); + var cls = document.querySelectorAll('.classlist'); + rspans[0].onclick = function () { + this.className = 'active'; + rspans[1].className = ''; + cls[0].className = 'classlist active'; + cls[1].className = 'classlist'; + } + rspans[1].onclick = function () { + this.className = 'active'; + rspans[0].className = ''; + cls[1].className = 'classlist active'; + cls[0].className = 'classlist'; + } + + // 渲染课程列表 + var dl = cls[0].getElementsByClassName('content')[0]; + var html = ''; + for (var i = 0; i < classList.length; i++) { + html += `
    +

    ${classList[i].title}(含${classList[i].num}期)

    +
      +
    +
    `; + } + dl.innerHTML = html; + + var uls = dl.getElementsByTagName('ul'); + for (var i = 0; i < uls.length; i++) { + var ulhtml = ''; + for (var j = 0; j < classList[i].list.length; j++) { + ulhtml += `
  • +

    + + ${classList[i].list[j].name} + ${classList[i].list[j].isStudy ? '已学完' : ''} +

    +

    + ${!classList[i].list[j].isStudy ? `${classList[i].list[j].time}开播播放视频

    ` : `${classList[i].list[j].classTime}`} + +
  • `; + } + uls[i].innerHTML = ulhtml; + } + + var dlp = dl.getElementsByClassName('title'); + for (var i = 0; i < dlp.length; i++) { + dlp[i].index = i; + dlp[i].onclick = function () { + var pi = this.getElementsByTagName('i')[0]; + if (this.className == 'title') { + this.className += ' active'; + pi.className = 'iconfont icon-top1'; + uls[this.index].className = 'active'; + } else { + this.className = 'title'; + pi.className = 'iconfont icon-down'; + uls[this.index].className = ''; + } + } + } + + + var lis = dl.getElementsByTagName('li'); + for (var i = 0; i < lis.length; i++) { + lis[i].onmouseenter = function () { + var spans = this.getElementsByTagName('p')[1].getElementsByTagName('span'); + if (spans.length > 1) { + spans[0].style.display = 'none'; + spans[1].style.display = 'inline-block'; + } + + } + lis[i].onmouseleave = function () { + var spans = this.getElementsByTagName('p')[1].getElementsByTagName('span'); + if (spans.length > 1) { + spans[1].style.display = 'none'; + spans[0].style.display = 'inline-block'; + } + + } + } + + // 点击播放视频 + var starts = document.querySelectorAll('.start'); + for (var i = 0; i < starts.length; i++) { + starts[i].onclick = function () { + alert('下一个页面'); + } + } + + // 点击展开查看全部 + var seeAll = document.querySelector('.seeAll'); + seeAll.onclick = function () { + if (this.innerHTML == '点击展开查看全部') { + for (var i = 0; i < dlp.length; i++) { + var pi = dlp[i].getElementsByTagName('i')[0]; + pi.className = 'iconfont icon-top1'; + uls[i].className = 'active'; + } + this.innerHTML = '收起查看全部'; + } else { + for (var i = 0; i < dlp.length; i++) { + var pi = dlp[i].getElementsByTagName('i')[0]; + pi.className = 'iconfont icon-down'; + uls[i].className = ''; + } + this.innerHTML = '点击展开查看全部'; + } + } + + // 点击播放 + var btni = video.nextElementSibling; + btni.onclick = function(){ + if(video.pause){ + video.play(); + this.style.display = 'none'; + } + } + video.onpause = function(){ + btni.style.display = 'block'; + } + video.onplay = function(){ + btni.style.display = 'none'; + } +} \ No newline at end of file diff --git a/js/videoPlayData.js b/js/videoPlayData.js new file mode 100644 index 0000000..b02c064 --- /dev/null +++ b/js/videoPlayData.js @@ -0,0 +1,145 @@ +/* +var videoDetail = { + poster: '../img/videoDetail/san.png', + src: '../video/05_tabbar.mp4', + title: '初三数学班', + year: '2019年秋季', + grade: '初三数学', + time: 15, + duration: '09月30日—12月20日', + period: '2020年12月20日', + end: 1616206481238, + day: 33, + h: 23, + m: 23, + s: 23, + price: 199, + isFree: true, + singlePrice: 199, + group: 99, + teacher: '李晓明', + teacherTitle: '小U课堂高级讲师', + introduce: '多年IT行业从业经验,精通常用的Web开发技术;熟悉主流的CMS、商城、论坛 等PHP开源产品,具有丰富的建站及二次开发经验,多个大型ERP系统的开发实践经验;精通常用的PHP开发框架,对服务器架构及服务器日常运维等方面有一 定的研究。' +}; + +var classList = [{ + title: '第一章:公开课', + num: 4, + list: [ + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: true, name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: true, name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第二章:公开课', + num: 4, + list: [ + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第三章:公开课', + num: 4, + list: [ + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第四章:公开课', + num: 4, + list: [ + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第五章:公开课', + num: 4, + list: [ + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +},{ + title: '第六章:公开课', + num: 4, + list: [ + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第0节:化学的研究对象和研究方法', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第1节:离子反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第2节:氧化还原反应', time: '2020.12.10 20:00'}, + {src: "../video/05_tabbar.mp4", classTime: "33:45", isStudy: false, name: '第3节:钠及其化合物', time: '2020.12.10 20:00'} + ] +}]; + +var classImgList = [ + '../img/videoDetail/detail.png' +]; + +var commentList = [{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +},{ + 'name': '哈哈哈哈', + 'time': '21:12', + 'src': '../img/login/user.png', + 'content': '讲的太好了!' +}];*/ diff --git a/js/vue.js b/js/vue.js new file mode 100644 index 0000000..919aa12 --- /dev/null +++ b/js/vue.js @@ -0,0 +1,11965 @@ +/*! + * Vue.js v2.6.12 + * (c) 2014-2020 Evan You + * Released under the MIT License. + */ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global || self, global.Vue = factory()); +}(this, function () { 'use strict'; + + /* */ + + var emptyObject = Object.freeze({}); + + // These helpers produce better VM code in JS engines due to their + // explicitness and function inlining. + function isUndef (v) { + return v === undefined || v === null + } + + function isDef (v) { + return v !== undefined && v !== null + } + + function isTrue (v) { + return v === true + } + + function isFalse (v) { + return v === false + } + + /** + * Check if value is primitive. + */ + function isPrimitive (value) { + return ( + typeof value === 'string' || + typeof value === 'number' || + // $flow-disable-line + typeof value === 'symbol' || + typeof value === 'boolean' + ) + } + + /** + * Quick object check - this is primarily used to tell + * Objects from primitive values when we know the value + * is a JSON-compliant type. + */ + function isObject (obj) { + return obj !== null && typeof obj === 'object' + } + + /** + * Get the raw type string of a value, e.g., [object Object]. + */ + var _toString = Object.prototype.toString; + + function toRawType (value) { + return _toString.call(value).slice(8, -1) + } + + /** + * Strict object type check. Only returns true + * for plain JavaScript objects. + */ + function isPlainObject (obj) { + return _toString.call(obj) === '[object Object]' + } + + function isRegExp (v) { + return _toString.call(v) === '[object RegExp]' + } + + /** + * Check if val is a valid array index. + */ + function isValidArrayIndex (val) { + var n = parseFloat(String(val)); + return n >= 0 && Math.floor(n) === n && isFinite(val) + } + + function isPromise (val) { + return ( + isDef(val) && + typeof val.then === 'function' && + typeof val.catch === 'function' + ) + } + + /** + * Convert a value to a string that is actually rendered. + */ + function toString (val) { + return val == null + ? '' + : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString) + ? JSON.stringify(val, null, 2) + : String(val) + } + + /** + * Convert an input value to a number for persistence. + * If the conversion fails, return original string. + */ + function toNumber (val) { + var n = parseFloat(val); + return isNaN(n) ? val : n + } + + /** + * Make a map and return a function for checking if a key + * is in that map. + */ + function makeMap ( + str, + expectsLowerCase + ) { + var map = Object.create(null); + var list = str.split(','); + for (var i = 0; i < list.length; i++) { + map[list[i]] = true; + } + return expectsLowerCase + ? function (val) { return map[val.toLowerCase()]; } + : function (val) { return map[val]; } + } + + /** + * Check if a tag is a built-in tag. + */ + var isBuiltInTag = makeMap('slot,component', true); + + /** + * Check if an attribute is a reserved attribute. + */ + var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is'); + + /** + * Remove an item from an array. + */ + function remove (arr, item) { + if (arr.length) { + var index = arr.indexOf(item); + if (index > -1) { + return arr.splice(index, 1) + } + } + } + + /** + * Check whether an object has the property. + */ + var hasOwnProperty = Object.prototype.hasOwnProperty; + function hasOwn (obj, key) { + return hasOwnProperty.call(obj, key) + } + + /** + * Create a cached version of a pure function. + */ + function cached (fn) { + var cache = Object.create(null); + return (function cachedFn (str) { + var hit = cache[str]; + return hit || (cache[str] = fn(str)) + }) + } + + /** + * Camelize a hyphen-delimited string. + */ + var camelizeRE = /-(\w)/g; + var camelize = cached(function (str) { + return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; }) + }); + + /** + * Capitalize a string. + */ + var capitalize = cached(function (str) { + return str.charAt(0).toUpperCase() + str.slice(1) + }); + + /** + * Hyphenate a camelCase string. + */ + var hyphenateRE = /\B([A-Z])/g; + var hyphenate = cached(function (str) { + return str.replace(hyphenateRE, '-$1').toLowerCase() + }); + + /** + * Simple bind polyfill for environments that do not support it, + * e.g., PhantomJS 1.x. Technically, we don't need this anymore + * since native bind is now performant enough in most browsers. + * But removing it would mean breaking code that was able to run in + * PhantomJS 1.x, so this must be kept for backward compatibility. + */ + + /* istanbul ignore next */ + function polyfillBind (fn, ctx) { + function boundFn (a) { + var l = arguments.length; + return l + ? l > 1 + ? fn.apply(ctx, arguments) + : fn.call(ctx, a) + : fn.call(ctx) + } + + boundFn._length = fn.length; + return boundFn + } + + function nativeBind (fn, ctx) { + return fn.bind(ctx) + } + + var bind = Function.prototype.bind + ? nativeBind + : polyfillBind; + + /** + * Convert an Array-like object to a real Array. + */ + function toArray (list, start) { + start = start || 0; + var i = list.length - start; + var ret = new Array(i); + while (i--) { + ret[i] = list[i + start]; + } + return ret + } + + /** + * Mix properties into target object. + */ + function extend (to, _from) { + for (var key in _from) { + to[key] = _from[key]; + } + return to + } + + /** + * Merge an Array of Objects into a single Object. + */ + function toObject (arr) { + var res = {}; + for (var i = 0; i < arr.length; i++) { + if (arr[i]) { + extend(res, arr[i]); + } + } + return res + } + + /* eslint-disable no-unused-vars */ + + /** + * Perform no operation. + * Stubbing args to make Flow happy without leaving useless transpiled code + * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/). + */ + function noop (a, b, c) {} + + /** + * Always return false. + */ + var no = function (a, b, c) { return false; }; + + /* eslint-enable no-unused-vars */ + + /** + * Return the same value. + */ + var identity = function (_) { return _; }; + + /** + * Generate a string containing static keys from compiler modules. + */ + function genStaticKeys (modules) { + return modules.reduce(function (keys, m) { + return keys.concat(m.staticKeys || []) + }, []).join(',') + } + + /** + * Check if two values are loosely equal - that is, + * if they are plain objects, do they have the same shape? + */ + function looseEqual (a, b) { + if (a === b) { return true } + var isObjectA = isObject(a); + var isObjectB = isObject(b); + if (isObjectA && isObjectB) { + try { + var isArrayA = Array.isArray(a); + var isArrayB = Array.isArray(b); + if (isArrayA && isArrayB) { + return a.length === b.length && a.every(function (e, i) { + return looseEqual(e, b[i]) + }) + } else if (a instanceof Date && b instanceof Date) { + return a.getTime() === b.getTime() + } else if (!isArrayA && !isArrayB) { + var keysA = Object.keys(a); + var keysB = Object.keys(b); + return keysA.length === keysB.length && keysA.every(function (key) { + return looseEqual(a[key], b[key]) + }) + } else { + /* istanbul ignore next */ + return false + } + } catch (e) { + /* istanbul ignore next */ + return false + } + } else if (!isObjectA && !isObjectB) { + return String(a) === String(b) + } else { + return false + } + } + + /** + * Return the first index at which a loosely equal value can be + * found in the array (if value is a plain object, the array must + * contain an object of the same shape), or -1 if it is not present. + */ + function looseIndexOf (arr, val) { + for (var i = 0; i < arr.length; i++) { + if (looseEqual(arr[i], val)) { return i } + } + return -1 + } + + /** + * Ensure a function is called only once. + */ + function once (fn) { + var called = false; + return function () { + if (!called) { + called = true; + fn.apply(this, arguments); + } + } + } + + var SSR_ATTR = 'data-server-rendered'; + + var ASSET_TYPES = [ + 'component', + 'directive', + 'filter' + ]; + + var LIFECYCLE_HOOKS = [ + 'beforeCreate', + 'created', + 'beforeMount', + 'mounted', + 'beforeUpdate', + 'updated', + 'beforeDestroy', + 'destroyed', + 'activated', + 'deactivated', + 'errorCaptured', + 'serverPrefetch' + ]; + + /* */ + + + + var config = ({ + /** + * Option merge strategies (used in core/util/options) + */ + // $flow-disable-line + optionMergeStrategies: Object.create(null), + + /** + * Whether to suppress warnings. + */ + silent: false, + + /** + * Show production mode tip message on boot? + */ + productionTip: "development" !== 'production', + + /** + * Whether to enable devtools + */ + devtools: "development" !== 'production', + + /** + * Whether to record perf + */ + performance: false, + + /** + * Error handler for watcher errors + */ + errorHandler: null, + + /** + * Warn handler for watcher warns + */ + warnHandler: null, + + /** + * Ignore certain custom elements + */ + ignoredElements: [], + + /** + * Custom user key aliases for v-on + */ + // $flow-disable-line + keyCodes: Object.create(null), + + /** + * Check if a tag is reserved so that it cannot be registered as a + * component. This is platform-dependent and may be overwritten. + */ + isReservedTag: no, + + /** + * Check if an attribute is reserved so that it cannot be used as a component + * prop. This is platform-dependent and may be overwritten. + */ + isReservedAttr: no, + + /** + * Check if a tag is an unknown element. + * Platform-dependent. + */ + isUnknownElement: no, + + /** + * Get the namespace of an element + */ + getTagNamespace: noop, + + /** + * Parse the real tag name for the specific platform. + */ + parsePlatformTagName: identity, + + /** + * Check if an attribute must be bound using property, e.g. value + * Platform-dependent. + */ + mustUseProp: no, + + /** + * Perform updates asynchronously. Intended to be used by Vue Test Utils + * This will significantly reduce performance if set to false. + */ + async: true, + + /** + * Exposed for legacy reasons + */ + _lifecycleHooks: LIFECYCLE_HOOKS + }); + + /* */ + + /** + * unicode letters used for parsing html tags, component names and property paths. + * using https://www.w3.org/TR/html53/semantics-scripting.html#potentialcustomelementname + * skipping \u10000-\uEFFFF due to it freezing up PhantomJS + */ + var unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/; + + /** + * Check if a string starts with $ or _ + */ + function isReserved (str) { + var c = (str + '').charCodeAt(0); + return c === 0x24 || c === 0x5F + } + + /** + * Define a property. + */ + function def (obj, key, val, enumerable) { + Object.defineProperty(obj, key, { + value: val, + enumerable: !!enumerable, + writable: true, + configurable: true + }); + } + + /** + * Parse simple path. + */ + var bailRE = new RegExp(("[^" + (unicodeRegExp.source) + ".$_\\d]")); + function parsePath (path) { + if (bailRE.test(path)) { + return + } + var segments = path.split('.'); + return function (obj) { + for (var i = 0; i < segments.length; i++) { + if (!obj) { return } + obj = obj[segments[i]]; + } + return obj + } + } + + /* */ + + // can we use __proto__? + var hasProto = '__proto__' in {}; + + // Browser environment sniffing + var inBrowser = typeof window !== 'undefined'; + var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform; + var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase(); + var UA = inBrowser && window.navigator.userAgent.toLowerCase(); + var isIE = UA && /msie|trident/.test(UA); + var isIE9 = UA && UA.indexOf('msie 9.0') > 0; + var isEdge = UA && UA.indexOf('edge/') > 0; + var isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android'); + var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios'); + var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge; + var isPhantomJS = UA && /phantomjs/.test(UA); + var isFF = UA && UA.match(/firefox\/(\d+)/); + + // Firefox has a "watch" function on Object.prototype... + var nativeWatch = ({}).watch; + + var supportsPassive = false; + if (inBrowser) { + try { + var opts = {}; + Object.defineProperty(opts, 'passive', ({ + get: function get () { + /* istanbul ignore next */ + supportsPassive = true; + } + })); // https://github.com/facebook/flow/issues/285 + window.addEventListener('test-passive', null, opts); + } catch (e) {} + } + + // this needs to be lazy-evaled because vue may be required before + // vue-server-renderer can set VUE_ENV + var _isServer; + var isServerRendering = function () { + if (_isServer === undefined) { + /* istanbul ignore if */ + if (!inBrowser && !inWeex && typeof global !== 'undefined') { + // detect presence of vue-server-renderer and avoid + // Webpack shimming the process + _isServer = global['process'] && global['process'].env.VUE_ENV === 'server'; + } else { + _isServer = false; + } + } + return _isServer + }; + + // detect devtools + var devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__; + + /* istanbul ignore next */ + function isNative (Ctor) { + return typeof Ctor === 'function' && /native code/.test(Ctor.toString()) + } + + var hasSymbol = + typeof Symbol !== 'undefined' && isNative(Symbol) && + typeof Reflect !== 'undefined' && isNative(Reflect.ownKeys); + + var _Set; + /* istanbul ignore if */ // $flow-disable-line + if (typeof Set !== 'undefined' && isNative(Set)) { + // use native Set when available. + _Set = Set; + } else { + // a non-standard Set polyfill that only works with primitive keys. + _Set = /*@__PURE__*/(function () { + function Set () { + this.set = Object.create(null); + } + Set.prototype.has = function has (key) { + return this.set[key] === true + }; + Set.prototype.add = function add (key) { + this.set[key] = true; + }; + Set.prototype.clear = function clear () { + this.set = Object.create(null); + }; + + return Set; + }()); + } + + /* */ + + var warn = noop; + var tip = noop; + var generateComponentTrace = (noop); // work around flow check + var formatComponentName = (noop); + + { + var hasConsole = typeof console !== 'undefined'; + var classifyRE = /(?:^|[-_])(\w)/g; + var classify = function (str) { return str + .replace(classifyRE, function (c) { return c.toUpperCase(); }) + .replace(/[-_]/g, ''); }; + + warn = function (msg, vm) { + var trace = vm ? generateComponentTrace(vm) : ''; + + if (config.warnHandler) { + config.warnHandler.call(null, msg, vm, trace); + } else if (hasConsole && (!config.silent)) { + console.error(("[Vue warn]: " + msg + trace)); + } + }; + + tip = function (msg, vm) { + if (hasConsole && (!config.silent)) { + console.warn("[Vue tip]: " + msg + ( + vm ? generateComponentTrace(vm) : '' + )); + } + }; + + formatComponentName = function (vm, includeFile) { + if (vm.$root === vm) { + return '' + } + var options = typeof vm === 'function' && vm.cid != null + ? vm.options + : vm._isVue + ? vm.$options || vm.constructor.options + : vm; + var name = options.name || options._componentTag; + var file = options.__file; + if (!name && file) { + var match = file.match(/([^/\\]+)\.vue$/); + name = match && match[1]; + } + + return ( + (name ? ("<" + (classify(name)) + ">") : "") + + (file && includeFile !== false ? (" at " + file) : '') + ) + }; + + var repeat = function (str, n) { + var res = ''; + while (n) { + if (n % 2 === 1) { res += str; } + if (n > 1) { str += str; } + n >>= 1; + } + return res + }; + + generateComponentTrace = function (vm) { + if (vm._isVue && vm.$parent) { + var tree = []; + var currentRecursiveSequence = 0; + while (vm) { + if (tree.length > 0) { + var last = tree[tree.length - 1]; + if (last.constructor === vm.constructor) { + currentRecursiveSequence++; + vm = vm.$parent; + continue + } else if (currentRecursiveSequence > 0) { + tree[tree.length - 1] = [last, currentRecursiveSequence]; + currentRecursiveSequence = 0; + } + } + tree.push(vm); + vm = vm.$parent; + } + return '\n\nfound in\n\n' + tree + .map(function (vm, i) { return ("" + (i === 0 ? '---> ' : repeat(' ', 5 + i * 2)) + (Array.isArray(vm) + ? ((formatComponentName(vm[0])) + "... (" + (vm[1]) + " recursive calls)") + : formatComponentName(vm))); }) + .join('\n') + } else { + return ("\n\n(found in " + (formatComponentName(vm)) + ")") + } + }; + } + + /* */ + + var uid = 0; + + /** + * A dep is an observable that can have multiple + * directives subscribing to it. + */ + var Dep = function Dep () { + this.id = uid++; + this.subs = []; + }; + + Dep.prototype.addSub = function addSub (sub) { + this.subs.push(sub); + }; + + Dep.prototype.removeSub = function removeSub (sub) { + remove(this.subs, sub); + }; + + Dep.prototype.depend = function depend () { + if (Dep.target) { + Dep.target.addDep(this); + } + }; + + Dep.prototype.notify = function notify () { + // stabilize the subscriber list first + var subs = this.subs.slice(); + if (!config.async) { + // subs aren't sorted in scheduler if not running async + // we need to sort them now to make sure they fire in correct + // order + subs.sort(function (a, b) { return a.id - b.id; }); + } + for (var i = 0, l = subs.length; i < l; i++) { + subs[i].update(); + } + }; + + // The current target watcher being evaluated. + // This is globally unique because only one watcher + // can be evaluated at a time. + Dep.target = null; + var targetStack = []; + + function pushTarget (target) { + targetStack.push(target); + Dep.target = target; + } + + function popTarget () { + targetStack.pop(); + Dep.target = targetStack[targetStack.length - 1]; + } + + /* */ + + var VNode = function VNode ( + tag, + data, + children, + text, + elm, + context, + componentOptions, + asyncFactory + ) { + this.tag = tag; + this.data = data; + this.children = children; + this.text = text; + this.elm = elm; + this.ns = undefined; + this.context = context; + this.fnContext = undefined; + this.fnOptions = undefined; + this.fnScopeId = undefined; + this.key = data && data.key; + this.componentOptions = componentOptions; + this.componentInstance = undefined; + this.parent = undefined; + this.raw = false; + this.isStatic = false; + this.isRootInsert = true; + this.isComment = false; + this.isCloned = false; + this.isOnce = false; + this.asyncFactory = asyncFactory; + this.asyncMeta = undefined; + this.isAsyncPlaceholder = false; + }; + + var prototypeAccessors = { child: { configurable: true } }; + + // DEPRECATED: alias for componentInstance for backwards compat. + /* istanbul ignore next */ + prototypeAccessors.child.get = function () { + return this.componentInstance + }; + + Object.defineProperties( VNode.prototype, prototypeAccessors ); + + var createEmptyVNode = function (text) { + if ( text === void 0 ) text = ''; + + var node = new VNode(); + node.text = text; + node.isComment = true; + return node + }; + + function createTextVNode (val) { + return new VNode(undefined, undefined, undefined, String(val)) + } + + // optimized shallow clone + // used for static nodes and slot nodes because they may be reused across + // multiple renders, cloning them avoids errors when DOM manipulations rely + // on their elm reference. + function cloneVNode (vnode) { + var cloned = new VNode( + vnode.tag, + vnode.data, + // #7975 + // clone children array to avoid mutating original in case of cloning + // a child. + vnode.children && vnode.children.slice(), + vnode.text, + vnode.elm, + vnode.context, + vnode.componentOptions, + vnode.asyncFactory + ); + cloned.ns = vnode.ns; + cloned.isStatic = vnode.isStatic; + cloned.key = vnode.key; + cloned.isComment = vnode.isComment; + cloned.fnContext = vnode.fnContext; + cloned.fnOptions = vnode.fnOptions; + cloned.fnScopeId = vnode.fnScopeId; + cloned.asyncMeta = vnode.asyncMeta; + cloned.isCloned = true; + return cloned + } + + /* + * not type checking this file because flow doesn't play well with + * dynamically accessing methods on Array prototype + */ + + var arrayProto = Array.prototype; + var arrayMethods = Object.create(arrayProto); + + var methodsToPatch = [ + 'push', + 'pop', + 'shift', + 'unshift', + 'splice', + 'sort', + 'reverse' + ]; + + /** + * Intercept mutating methods and emit events + */ + methodsToPatch.forEach(function (method) { + // cache original method + var original = arrayProto[method]; + def(arrayMethods, method, function mutator () { + var args = [], len = arguments.length; + while ( len-- ) args[ len ] = arguments[ len ]; + + var result = original.apply(this, args); + var ob = this.__ob__; + var inserted; + switch (method) { + case 'push': + case 'unshift': + inserted = args; + break + case 'splice': + inserted = args.slice(2); + break + } + if (inserted) { ob.observeArray(inserted); } + // notify change + ob.dep.notify(); + return result + }); + }); + + /* */ + + var arrayKeys = Object.getOwnPropertyNames(arrayMethods); + + /** + * In some cases we may want to disable observation inside a component's + * update computation. + */ + var shouldObserve = true; + + function toggleObserving (value) { + shouldObserve = value; + } + + /** + * Observer class that is attached to each observed + * object. Once attached, the observer converts the target + * object's property keys into getter/setters that + * collect dependencies and dispatch updates. + */ + var Observer = function Observer (value) { + this.value = value; + this.dep = new Dep(); + this.vmCount = 0; + def(value, '__ob__', this); + if (Array.isArray(value)) { + if (hasProto) { + protoAugment(value, arrayMethods); + } else { + copyAugment(value, arrayMethods, arrayKeys); + } + this.observeArray(value); + } else { + this.walk(value); + } + }; + + /** + * Walk through all properties and convert them into + * getter/setters. This method should only be called when + * value type is Object. + */ + Observer.prototype.walk = function walk (obj) { + var keys = Object.keys(obj); + for (var i = 0; i < keys.length; i++) { + defineReactive$$1(obj, keys[i]); + } + }; + + /** + * Observe a list of Array items. + */ + Observer.prototype.observeArray = function observeArray (items) { + for (var i = 0, l = items.length; i < l; i++) { + observe(items[i]); + } + }; + + // helpers + + /** + * Augment a target Object or Array by intercepting + * the prototype chain using __proto__ + */ + function protoAugment (target, src) { + /* eslint-disable no-proto */ + target.__proto__ = src; + /* eslint-enable no-proto */ + } + + /** + * Augment a target Object or Array by defining + * hidden properties. + */ + /* istanbul ignore next */ + function copyAugment (target, src, keys) { + for (var i = 0, l = keys.length; i < l; i++) { + var key = keys[i]; + def(target, key, src[key]); + } + } + + /** + * Attempt to create an observer instance for a value, + * returns the new observer if successfully observed, + * or the existing observer if the value already has one. + */ + function observe (value, asRootData) { + if (!isObject(value) || value instanceof VNode) { + return + } + var ob; + if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { + ob = value.__ob__; + } else if ( + shouldObserve && + !isServerRendering() && + (Array.isArray(value) || isPlainObject(value)) && + Object.isExtensible(value) && + !value._isVue + ) { + ob = new Observer(value); + } + if (asRootData && ob) { + ob.vmCount++; + } + return ob + } + + /** + * Define a reactive property on an Object. + */ + function defineReactive$$1 ( + obj, + key, + val, + customSetter, + shallow + ) { + var dep = new Dep(); + + var property = Object.getOwnPropertyDescriptor(obj, key); + if (property && property.configurable === false) { + return + } + + // cater for pre-defined getter/setters + var getter = property && property.get; + var setter = property && property.set; + if ((!getter || setter) && arguments.length === 2) { + val = obj[key]; + } + + var childOb = !shallow && observe(val); + Object.defineProperty(obj, key, { + enumerable: true, + configurable: true, + get: function reactiveGetter () { + var value = getter ? getter.call(obj) : val; + if (Dep.target) { + dep.depend(); + if (childOb) { + childOb.dep.depend(); + if (Array.isArray(value)) { + dependArray(value); + } + } + } + return value + }, + set: function reactiveSetter (newVal) { + var value = getter ? getter.call(obj) : val; + /* eslint-disable no-self-compare */ + if (newVal === value || (newVal !== newVal && value !== value)) { + return + } + /* eslint-enable no-self-compare */ + if (customSetter) { + customSetter(); + } + // #7981: for accessor properties without setter + if (getter && !setter) { return } + if (setter) { + setter.call(obj, newVal); + } else { + val = newVal; + } + childOb = !shallow && observe(newVal); + dep.notify(); + } + }); + } + + /** + * Set a property on an object. Adds the new property and + * triggers change notification if the property doesn't + * already exist. + */ + function set (target, key, val) { + if (isUndef(target) || isPrimitive(target) + ) { + warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target)))); + } + if (Array.isArray(target) && isValidArrayIndex(key)) { + target.length = Math.max(target.length, key); + target.splice(key, 1, val); + return val + } + if (key in target && !(key in Object.prototype)) { + target[key] = val; + return val + } + var ob = (target).__ob__; + if (target._isVue || (ob && ob.vmCount)) { + warn( + 'Avoid adding reactive properties to a Vue instance or its root $data ' + + 'at runtime - declare it upfront in the data option.' + ); + return val + } + if (!ob) { + target[key] = val; + return val + } + defineReactive$$1(ob.value, key, val); + ob.dep.notify(); + return val + } + + /** + * Delete a property and trigger change if necessary. + */ + function del (target, key) { + if (isUndef(target) || isPrimitive(target) + ) { + warn(("Cannot delete reactive property on undefined, null, or primitive value: " + ((target)))); + } + if (Array.isArray(target) && isValidArrayIndex(key)) { + target.splice(key, 1); + return + } + var ob = (target).__ob__; + if (target._isVue || (ob && ob.vmCount)) { + warn( + 'Avoid deleting properties on a Vue instance or its root $data ' + + '- just set it to null.' + ); + return + } + if (!hasOwn(target, key)) { + return + } + delete target[key]; + if (!ob) { + return + } + ob.dep.notify(); + } + + /** + * Collect dependencies on array elements when the array is touched, since + * we cannot intercept array element access like property getters. + */ + function dependArray (value) { + for (var e = (void 0), i = 0, l = value.length; i < l; i++) { + e = value[i]; + e && e.__ob__ && e.__ob__.dep.depend(); + if (Array.isArray(e)) { + dependArray(e); + } + } + } + + /* */ + + /** + * Option overwriting strategies are functions that handle + * how to merge a parent option value and a child option + * value into the final value. + */ + var strats = config.optionMergeStrategies; + + /** + * Options with restrictions + */ + { + strats.el = strats.propsData = function (parent, child, vm, key) { + if (!vm) { + warn( + "option \"" + key + "\" can only be used during instance " + + 'creation with the `new` keyword.' + ); + } + return defaultStrat(parent, child) + }; + } + + /** + * Helper that recursively merges two data objects together. + */ + function mergeData (to, from) { + if (!from) { return to } + var key, toVal, fromVal; + + var keys = hasSymbol + ? Reflect.ownKeys(from) + : Object.keys(from); + + for (var i = 0; i < keys.length; i++) { + key = keys[i]; + // in case the object is already observed... + if (key === '__ob__') { continue } + toVal = to[key]; + fromVal = from[key]; + if (!hasOwn(to, key)) { + set(to, key, fromVal); + } else if ( + toVal !== fromVal && + isPlainObject(toVal) && + isPlainObject(fromVal) + ) { + mergeData(toVal, fromVal); + } + } + return to + } + + /** + * Data + */ + function mergeDataOrFn ( + parentVal, + childVal, + vm + ) { + if (!vm) { + // in a Vue.extend merge, both should be functions + if (!childVal) { + return parentVal + } + if (!parentVal) { + return childVal + } + // when parentVal & childVal are both present, + // we need to return a function that returns the + // merged result of both functions... no need to + // check if parentVal is a function here because + // it has to be a function to pass previous merges. + return function mergedDataFn () { + return mergeData( + typeof childVal === 'function' ? childVal.call(this, this) : childVal, + typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal + ) + } + } else { + return function mergedInstanceDataFn () { + // instance merge + var instanceData = typeof childVal === 'function' + ? childVal.call(vm, vm) + : childVal; + var defaultData = typeof parentVal === 'function' + ? parentVal.call(vm, vm) + : parentVal; + if (instanceData) { + return mergeData(instanceData, defaultData) + } else { + return defaultData + } + } + } + } + + strats.data = function ( + parentVal, + childVal, + vm + ) { + if (!vm) { + if (childVal && typeof childVal !== 'function') { + warn( + 'The "data" option should be a function ' + + 'that returns a per-instance value in component ' + + 'definitions.', + vm + ); + + return parentVal + } + return mergeDataOrFn(parentVal, childVal) + } + + return mergeDataOrFn(parentVal, childVal, vm) + }; + + /** + * Hooks and props are merged as arrays. + */ + function mergeHook ( + parentVal, + childVal + ) { + var res = childVal + ? parentVal + ? parentVal.concat(childVal) + : Array.isArray(childVal) + ? childVal + : [childVal] + : parentVal; + return res + ? dedupeHooks(res) + : res + } + + function dedupeHooks (hooks) { + var res = []; + for (var i = 0; i < hooks.length; i++) { + if (res.indexOf(hooks[i]) === -1) { + res.push(hooks[i]); + } + } + return res + } + + LIFECYCLE_HOOKS.forEach(function (hook) { + strats[hook] = mergeHook; + }); + + /** + * Assets + * + * When a vm is present (instance creation), we need to do + * a three-way merge between constructor options, instance + * options and parent options. + */ + function mergeAssets ( + parentVal, + childVal, + vm, + key + ) { + var res = Object.create(parentVal || null); + if (childVal) { + assertObjectType(key, childVal, vm); + return extend(res, childVal) + } else { + return res + } + } + + ASSET_TYPES.forEach(function (type) { + strats[type + 's'] = mergeAssets; + }); + + /** + * Watchers. + * + * Watchers hashes should not overwrite one + * another, so we merge them as arrays. + */ + strats.watch = function ( + parentVal, + childVal, + vm, + key + ) { + // work around Firefox's Object.prototype.watch... + if (parentVal === nativeWatch) { parentVal = undefined; } + if (childVal === nativeWatch) { childVal = undefined; } + /* istanbul ignore if */ + if (!childVal) { return Object.create(parentVal || null) } + { + assertObjectType(key, childVal, vm); + } + if (!parentVal) { return childVal } + var ret = {}; + extend(ret, parentVal); + for (var key$1 in childVal) { + var parent = ret[key$1]; + var child = childVal[key$1]; + if (parent && !Array.isArray(parent)) { + parent = [parent]; + } + ret[key$1] = parent + ? parent.concat(child) + : Array.isArray(child) ? child : [child]; + } + return ret + }; + + /** + * Other object hashes. + */ + strats.props = + strats.methods = + strats.inject = + strats.computed = function ( + parentVal, + childVal, + vm, + key + ) { + if (childVal && "development" !== 'production') { + assertObjectType(key, childVal, vm); + } + if (!parentVal) { return childVal } + var ret = Object.create(null); + extend(ret, parentVal); + if (childVal) { extend(ret, childVal); } + return ret + }; + strats.provide = mergeDataOrFn; + + /** + * Default strategy. + */ + var defaultStrat = function (parentVal, childVal) { + return childVal === undefined + ? parentVal + : childVal + }; + + /** + * Validate component names + */ + function checkComponents (options) { + for (var key in options.components) { + validateComponentName(key); + } + } + + function validateComponentName (name) { + if (!new RegExp(("^[a-zA-Z][\\-\\.0-9_" + (unicodeRegExp.source) + "]*$")).test(name)) { + warn( + 'Invalid component name: "' + name + '". Component names ' + + 'should conform to valid custom element name in html5 specification.' + ); + } + if (isBuiltInTag(name) || config.isReservedTag(name)) { + warn( + 'Do not use built-in or reserved HTML elements as component ' + + 'id: ' + name + ); + } + } + + /** + * Ensure all props option syntax are normalized into the + * Object-based format. + */ + function normalizeProps (options, vm) { + var props = options.props; + if (!props) { return } + var res = {}; + var i, val, name; + if (Array.isArray(props)) { + i = props.length; + while (i--) { + val = props[i]; + if (typeof val === 'string') { + name = camelize(val); + res[name] = { type: null }; + } else { + warn('props must be strings when using array syntax.'); + } + } + } else if (isPlainObject(props)) { + for (var key in props) { + val = props[key]; + name = camelize(key); + res[name] = isPlainObject(val) + ? val + : { type: val }; + } + } else { + warn( + "Invalid value for option \"props\": expected an Array or an Object, " + + "but got " + (toRawType(props)) + ".", + vm + ); + } + options.props = res; + } + + /** + * Normalize all injections into Object-based format + */ + function normalizeInject (options, vm) { + var inject = options.inject; + if (!inject) { return } + var normalized = options.inject = {}; + if (Array.isArray(inject)) { + for (var i = 0; i < inject.length; i++) { + normalized[inject[i]] = { from: inject[i] }; + } + } else if (isPlainObject(inject)) { + for (var key in inject) { + var val = inject[key]; + normalized[key] = isPlainObject(val) + ? extend({ from: key }, val) + : { from: val }; + } + } else { + warn( + "Invalid value for option \"inject\": expected an Array or an Object, " + + "but got " + (toRawType(inject)) + ".", + vm + ); + } + } + + /** + * Normalize raw function directives into object format. + */ + function normalizeDirectives (options) { + var dirs = options.directives; + if (dirs) { + for (var key in dirs) { + var def$$1 = dirs[key]; + if (typeof def$$1 === 'function') { + dirs[key] = { bind: def$$1, update: def$$1 }; + } + } + } + } + + function assertObjectType (name, value, vm) { + if (!isPlainObject(value)) { + warn( + "Invalid value for option \"" + name + "\": expected an Object, " + + "but got " + (toRawType(value)) + ".", + vm + ); + } + } + + /** + * Merge two option objects into a new one. + * Core utility used in both instantiation and inheritance. + */ + function mergeOptions ( + parent, + child, + vm + ) { + { + checkComponents(child); + } + + if (typeof child === 'function') { + child = child.options; + } + + normalizeProps(child, vm); + normalizeInject(child, vm); + normalizeDirectives(child); + + // Apply extends and mixins on the child options, + // but only if it is a raw options object that isn't + // the result of another mergeOptions call. + // Only merged options has the _base property. + if (!child._base) { + if (child.extends) { + parent = mergeOptions(parent, child.extends, vm); + } + if (child.mixins) { + for (var i = 0, l = child.mixins.length; i < l; i++) { + parent = mergeOptions(parent, child.mixins[i], vm); + } + } + } + + var options = {}; + var key; + for (key in parent) { + mergeField(key); + } + for (key in child) { + if (!hasOwn(parent, key)) { + mergeField(key); + } + } + function mergeField (key) { + var strat = strats[key] || defaultStrat; + options[key] = strat(parent[key], child[key], vm, key); + } + return options + } + + /** + * Resolve an asset. + * This function is used because child instances need access + * to assets defined in its ancestor chain. + */ + function resolveAsset ( + options, + type, + id, + warnMissing + ) { + /* istanbul ignore if */ + if (typeof id !== 'string') { + return + } + var assets = options[type]; + // check local registration variations first + if (hasOwn(assets, id)) { return assets[id] } + var camelizedId = camelize(id); + if (hasOwn(assets, camelizedId)) { return assets[camelizedId] } + var PascalCaseId = capitalize(camelizedId); + if (hasOwn(assets, PascalCaseId)) { return assets[PascalCaseId] } + // fallback to prototype chain + var res = assets[id] || assets[camelizedId] || assets[PascalCaseId]; + if (warnMissing && !res) { + warn( + 'Failed to resolve ' + type.slice(0, -1) + ': ' + id, + options + ); + } + return res + } + + /* */ + + + + function validateProp ( + key, + propOptions, + propsData, + vm + ) { + var prop = propOptions[key]; + var absent = !hasOwn(propsData, key); + var value = propsData[key]; + // boolean casting + var booleanIndex = getTypeIndex(Boolean, prop.type); + if (booleanIndex > -1) { + if (absent && !hasOwn(prop, 'default')) { + value = false; + } else if (value === '' || value === hyphenate(key)) { + // only cast empty string / same name to boolean if + // boolean has higher priority + var stringIndex = getTypeIndex(String, prop.type); + if (stringIndex < 0 || booleanIndex < stringIndex) { + value = true; + } + } + } + // check default value + if (value === undefined) { + value = getPropDefaultValue(vm, prop, key); + // since the default value is a fresh copy, + // make sure to observe it. + var prevShouldObserve = shouldObserve; + toggleObserving(true); + observe(value); + toggleObserving(prevShouldObserve); + } + { + assertProp(prop, key, value, vm, absent); + } + return value + } + + /** + * Get the default value of a prop. + */ + function getPropDefaultValue (vm, prop, key) { + // no default, return undefined + if (!hasOwn(prop, 'default')) { + return undefined + } + var def = prop.default; + // warn against non-factory defaults for Object & Array + if (isObject(def)) { + warn( + 'Invalid default value for prop "' + key + '": ' + + 'Props with type Object/Array must use a factory function ' + + 'to return the default value.', + vm + ); + } + // the raw prop value was also undefined from previous render, + // return previous default value to avoid unnecessary watcher trigger + if (vm && vm.$options.propsData && + vm.$options.propsData[key] === undefined && + vm._props[key] !== undefined + ) { + return vm._props[key] + } + // call factory function for non-Function types + // a value is Function if its prototype is function even across different execution context + return typeof def === 'function' && getType(prop.type) !== 'Function' + ? def.call(vm) + : def + } + + /** + * Assert whether a prop is valid. + */ + function assertProp ( + prop, + name, + value, + vm, + absent + ) { + if (prop.required && absent) { + warn( + 'Missing required prop: "' + name + '"', + vm + ); + return + } + if (value == null && !prop.required) { + return + } + var type = prop.type; + var valid = !type || type === true; + var expectedTypes = []; + if (type) { + if (!Array.isArray(type)) { + type = [type]; + } + for (var i = 0; i < type.length && !valid; i++) { + var assertedType = assertType(value, type[i]); + expectedTypes.push(assertedType.expectedType || ''); + valid = assertedType.valid; + } + } + + if (!valid) { + warn( + getInvalidTypeMessage(name, value, expectedTypes), + vm + ); + return + } + var validator = prop.validator; + if (validator) { + if (!validator(value)) { + warn( + 'Invalid prop: custom validator check failed for prop "' + name + '".', + vm + ); + } + } + } + + var simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/; + + function assertType (value, type) { + var valid; + var expectedType = getType(type); + if (simpleCheckRE.test(expectedType)) { + var t = typeof value; + valid = t === expectedType.toLowerCase(); + // for primitive wrapper objects + if (!valid && t === 'object') { + valid = value instanceof type; + } + } else if (expectedType === 'Object') { + valid = isPlainObject(value); + } else if (expectedType === 'Array') { + valid = Array.isArray(value); + } else { + valid = value instanceof type; + } + return { + valid: valid, + expectedType: expectedType + } + } + + /** + * Use function string name to check built-in types, + * because a simple equality check will fail when running + * across different vms / iframes. + */ + function getType (fn) { + var match = fn && fn.toString().match(/^\s*function (\w+)/); + return match ? match[1] : '' + } + + function isSameType (a, b) { + return getType(a) === getType(b) + } + + function getTypeIndex (type, expectedTypes) { + if (!Array.isArray(expectedTypes)) { + return isSameType(expectedTypes, type) ? 0 : -1 + } + for (var i = 0, len = expectedTypes.length; i < len; i++) { + if (isSameType(expectedTypes[i], type)) { + return i + } + } + return -1 + } + + function getInvalidTypeMessage (name, value, expectedTypes) { + var message = "Invalid prop: type check failed for prop \"" + name + "\"." + + " Expected " + (expectedTypes.map(capitalize).join(', ')); + var expectedType = expectedTypes[0]; + var receivedType = toRawType(value); + var expectedValue = styleValue(value, expectedType); + var receivedValue = styleValue(value, receivedType); + // check if we need to specify expected value + if (expectedTypes.length === 1 && + isExplicable(expectedType) && + !isBoolean(expectedType, receivedType)) { + message += " with value " + expectedValue; + } + message += ", got " + receivedType + " "; + // check if we need to specify received value + if (isExplicable(receivedType)) { + message += "with value " + receivedValue + "."; + } + return message + } + + function styleValue (value, type) { + if (type === 'String') { + return ("\"" + value + "\"") + } else if (type === 'Number') { + return ("" + (Number(value))) + } else { + return ("" + value) + } + } + + function isExplicable (value) { + var explicitTypes = ['string', 'number', 'boolean']; + return explicitTypes.some(function (elem) { return value.toLowerCase() === elem; }) + } + + function isBoolean () { + var args = [], len = arguments.length; + while ( len-- ) args[ len ] = arguments[ len ]; + + return args.some(function (elem) { return elem.toLowerCase() === 'boolean'; }) + } + + /* */ + + function handleError (err, vm, info) { + // Deactivate deps tracking while processing error handler to avoid possible infinite rendering. + // See: https://github.com/vuejs/vuex/issues/1505 + pushTarget(); + try { + if (vm) { + var cur = vm; + while ((cur = cur.$parent)) { + var hooks = cur.$options.errorCaptured; + if (hooks) { + for (var i = 0; i < hooks.length; i++) { + try { + var capture = hooks[i].call(cur, err, vm, info) === false; + if (capture) { return } + } catch (e) { + globalHandleError(e, cur, 'errorCaptured hook'); + } + } + } + } + } + globalHandleError(err, vm, info); + } finally { + popTarget(); + } + } + + function invokeWithErrorHandling ( + handler, + context, + args, + vm, + info + ) { + var res; + try { + res = args ? handler.apply(context, args) : handler.call(context); + if (res && !res._isVue && isPromise(res) && !res._handled) { + res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); }); + // issue #9511 + // avoid catch triggering multiple times when nested calls + res._handled = true; + } + } catch (e) { + handleError(e, vm, info); + } + return res + } + + function globalHandleError (err, vm, info) { + if (config.errorHandler) { + try { + return config.errorHandler.call(null, err, vm, info) + } catch (e) { + // if the user intentionally throws the original error in the handler, + // do not log it twice + if (e !== err) { + logError(e, null, 'config.errorHandler'); + } + } + } + logError(err, vm, info); + } + + function logError (err, vm, info) { + { + warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm); + } + /* istanbul ignore else */ + if ((inBrowser || inWeex) && typeof console !== 'undefined') { + console.error(err); + } else { + throw err + } + } + + /* */ + + var isUsingMicroTask = false; + + var callbacks = []; + var pending = false; + + function flushCallbacks () { + pending = false; + var copies = callbacks.slice(0); + callbacks.length = 0; + for (var i = 0; i < copies.length; i++) { + copies[i](); + } + } + + // Here we have async deferring wrappers using microtasks. + // In 2.5 we used (macro) tasks (in combination with microtasks). + // However, it has subtle problems when state is changed right before repaint + // (e.g. #6813, out-in transitions). + // Also, using (macro) tasks in event handler would cause some weird behaviors + // that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109). + // So we now use microtasks everywhere, again. + // A major drawback of this tradeoff is that there are some scenarios + // where microtasks have too high a priority and fire in between supposedly + // sequential events (e.g. #4521, #6690, which have workarounds) + // or even between bubbling of the same event (#6566). + var timerFunc; + + // The nextTick behavior leverages the microtask queue, which can be accessed + // via either native Promise.then or MutationObserver. + // MutationObserver has wider support, however it is seriously bugged in + // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It + // completely stops working after triggering a few times... so, if native + // Promise is available, we will use it: + /* istanbul ignore next, $flow-disable-line */ + if (typeof Promise !== 'undefined' && isNative(Promise)) { + var p = Promise.resolve(); + timerFunc = function () { + p.then(flushCallbacks); + // In problematic UIWebViews, Promise.then doesn't completely break, but + // it can get stuck in a weird state where callbacks are pushed into the + // microtask queue but the queue isn't being flushed, until the browser + // needs to do some other work, e.g. handle a timer. Therefore we can + // "force" the microtask queue to be flushed by adding an empty timer. + if (isIOS) { setTimeout(noop); } + }; + isUsingMicroTask = true; + } else if (!isIE && typeof MutationObserver !== 'undefined' && ( + isNative(MutationObserver) || + // PhantomJS and iOS 7.x + MutationObserver.toString() === '[object MutationObserverConstructor]' + )) { + // Use MutationObserver where native Promise is not available, + // e.g. PhantomJS, iOS7, Android 4.4 + // (#6466 MutationObserver is unreliable in IE11) + var counter = 1; + var observer = new MutationObserver(flushCallbacks); + var textNode = document.createTextNode(String(counter)); + observer.observe(textNode, { + characterData: true + }); + timerFunc = function () { + counter = (counter + 1) % 2; + textNode.data = String(counter); + }; + isUsingMicroTask = true; + } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { + // Fallback to setImmediate. + // Technically it leverages the (macro) task queue, + // but it is still a better choice than setTimeout. + timerFunc = function () { + setImmediate(flushCallbacks); + }; + } else { + // Fallback to setTimeout. + timerFunc = function () { + setTimeout(flushCallbacks, 0); + }; + } + + function nextTick (cb, ctx) { + var _resolve; + callbacks.push(function () { + if (cb) { + try { + cb.call(ctx); + } catch (e) { + handleError(e, ctx, 'nextTick'); + } + } else if (_resolve) { + _resolve(ctx); + } + }); + if (!pending) { + pending = true; + timerFunc(); + } + // $flow-disable-line + if (!cb && typeof Promise !== 'undefined') { + return new Promise(function (resolve) { + _resolve = resolve; + }) + } + } + + /* */ + + var mark; + var measure; + + { + var perf = inBrowser && window.performance; + /* istanbul ignore if */ + if ( + perf && + perf.mark && + perf.measure && + perf.clearMarks && + perf.clearMeasures + ) { + mark = function (tag) { return perf.mark(tag); }; + measure = function (name, startTag, endTag) { + perf.measure(name, startTag, endTag); + perf.clearMarks(startTag); + perf.clearMarks(endTag); + // perf.clearMeasures(name) + }; + } + } + + /* not type checking this file because flow doesn't play well with Proxy */ + + var initProxy; + + { + var allowedGlobals = makeMap( + 'Infinity,undefined,NaN,isFinite,isNaN,' + + 'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' + + 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' + + 'require' // for Webpack/Browserify + ); + + var warnNonPresent = function (target, key) { + warn( + "Property or method \"" + key + "\" is not defined on the instance but " + + 'referenced during render. Make sure that this property is reactive, ' + + 'either in the data option, or for class-based components, by ' + + 'initializing the property. ' + + 'See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.', + target + ); + }; + + var warnReservedPrefix = function (target, key) { + warn( + "Property \"" + key + "\" must be accessed with \"$data." + key + "\" because " + + 'properties starting with "$" or "_" are not proxied in the Vue instance to ' + + 'prevent conflicts with Vue internals. ' + + 'See: https://vuejs.org/v2/api/#data', + target + ); + }; + + var hasProxy = + typeof Proxy !== 'undefined' && isNative(Proxy); + + if (hasProxy) { + var isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact'); + config.keyCodes = new Proxy(config.keyCodes, { + set: function set (target, key, value) { + if (isBuiltInModifier(key)) { + warn(("Avoid overwriting built-in modifier in config.keyCodes: ." + key)); + return false + } else { + target[key] = value; + return true + } + } + }); + } + + var hasHandler = { + has: function has (target, key) { + var has = key in target; + var isAllowed = allowedGlobals(key) || + (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data)); + if (!has && !isAllowed) { + if (key in target.$data) { warnReservedPrefix(target, key); } + else { warnNonPresent(target, key); } + } + return has || !isAllowed + } + }; + + var getHandler = { + get: function get (target, key) { + if (typeof key === 'string' && !(key in target)) { + if (key in target.$data) { warnReservedPrefix(target, key); } + else { warnNonPresent(target, key); } + } + return target[key] + } + }; + + initProxy = function initProxy (vm) { + if (hasProxy) { + // determine which proxy handler to use + var options = vm.$options; + var handlers = options.render && options.render._withStripped + ? getHandler + : hasHandler; + vm._renderProxy = new Proxy(vm, handlers); + } else { + vm._renderProxy = vm; + } + }; + } + + /* */ + + var seenObjects = new _Set(); + + /** + * Recursively traverse an object to evoke all converted + * getters, so that every nested property inside the object + * is collected as a "deep" dependency. + */ + function traverse (val) { + _traverse(val, seenObjects); + seenObjects.clear(); + } + + function _traverse (val, seen) { + var i, keys; + var isA = Array.isArray(val); + if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) { + return + } + if (val.__ob__) { + var depId = val.__ob__.dep.id; + if (seen.has(depId)) { + return + } + seen.add(depId); + } + if (isA) { + i = val.length; + while (i--) { _traverse(val[i], seen); } + } else { + keys = Object.keys(val); + i = keys.length; + while (i--) { _traverse(val[keys[i]], seen); } + } + } + + /* */ + + var normalizeEvent = cached(function (name) { + var passive = name.charAt(0) === '&'; + name = passive ? name.slice(1) : name; + var once$$1 = name.charAt(0) === '~'; // Prefixed last, checked first + name = once$$1 ? name.slice(1) : name; + var capture = name.charAt(0) === '!'; + name = capture ? name.slice(1) : name; + return { + name: name, + once: once$$1, + capture: capture, + passive: passive + } + }); + + function createFnInvoker (fns, vm) { + function invoker () { + var arguments$1 = arguments; + + var fns = invoker.fns; + if (Array.isArray(fns)) { + var cloned = fns.slice(); + for (var i = 0; i < cloned.length; i++) { + invokeWithErrorHandling(cloned[i], null, arguments$1, vm, "v-on handler"); + } + } else { + // return handler return value for single handlers + return invokeWithErrorHandling(fns, null, arguments, vm, "v-on handler") + } + } + invoker.fns = fns; + return invoker + } + + function updateListeners ( + on, + oldOn, + add, + remove$$1, + createOnceHandler, + vm + ) { + var name, def$$1, cur, old, event; + for (name in on) { + def$$1 = cur = on[name]; + old = oldOn[name]; + event = normalizeEvent(name); + if (isUndef(cur)) { + warn( + "Invalid handler for event \"" + (event.name) + "\": got " + String(cur), + vm + ); + } else if (isUndef(old)) { + if (isUndef(cur.fns)) { + cur = on[name] = createFnInvoker(cur, vm); + } + if (isTrue(event.once)) { + cur = on[name] = createOnceHandler(event.name, cur, event.capture); + } + add(event.name, cur, event.capture, event.passive, event.params); + } else if (cur !== old) { + old.fns = cur; + on[name] = old; + } + } + for (name in oldOn) { + if (isUndef(on[name])) { + event = normalizeEvent(name); + remove$$1(event.name, oldOn[name], event.capture); + } + } + } + + /* */ + + function mergeVNodeHook (def, hookKey, hook) { + if (def instanceof VNode) { + def = def.data.hook || (def.data.hook = {}); + } + var invoker; + var oldHook = def[hookKey]; + + function wrappedHook () { + hook.apply(this, arguments); + // important: remove merged hook to ensure it's called only once + // and prevent memory leak + remove(invoker.fns, wrappedHook); + } + + if (isUndef(oldHook)) { + // no existing hook + invoker = createFnInvoker([wrappedHook]); + } else { + /* istanbul ignore if */ + if (isDef(oldHook.fns) && isTrue(oldHook.merged)) { + // already a merged invoker + invoker = oldHook; + invoker.fns.push(wrappedHook); + } else { + // existing plain hook + invoker = createFnInvoker([oldHook, wrappedHook]); + } + } + + invoker.merged = true; + def[hookKey] = invoker; + } + + /* */ + + function extractPropsFromVNodeData ( + data, + Ctor, + tag + ) { + // we are only extracting raw values here. + // validation and default values are handled in the child + // component itself. + var propOptions = Ctor.options.props; + if (isUndef(propOptions)) { + return + } + var res = {}; + var attrs = data.attrs; + var props = data.props; + if (isDef(attrs) || isDef(props)) { + for (var key in propOptions) { + var altKey = hyphenate(key); + { + var keyInLowerCase = key.toLowerCase(); + if ( + key !== keyInLowerCase && + attrs && hasOwn(attrs, keyInLowerCase) + ) { + tip( + "Prop \"" + keyInLowerCase + "\" is passed to component " + + (formatComponentName(tag || Ctor)) + ", but the declared prop name is" + + " \"" + key + "\". " + + "Note that HTML attributes are case-insensitive and camelCased " + + "props need to use their kebab-case equivalents when using in-DOM " + + "templates. You should probably use \"" + altKey + "\" instead of \"" + key + "\"." + ); + } + } + checkProp(res, props, key, altKey, true) || + checkProp(res, attrs, key, altKey, false); + } + } + return res + } + + function checkProp ( + res, + hash, + key, + altKey, + preserve + ) { + if (isDef(hash)) { + if (hasOwn(hash, key)) { + res[key] = hash[key]; + if (!preserve) { + delete hash[key]; + } + return true + } else if (hasOwn(hash, altKey)) { + res[key] = hash[altKey]; + if (!preserve) { + delete hash[altKey]; + } + return true + } + } + return false + } + + /* */ + + // The template compiler attempts to minimize the need for normalization by + // statically analyzing the template at compile time. + // + // For plain HTML markup, normalization can be completely skipped because the + // generated render function is guaranteed to return Array. There are + // two cases where extra normalization is needed: + + // 1. When the children contains components - because a functional component + // may return an Array instead of a single root. In this case, just a simple + // normalization is needed - if any child is an Array, we flatten the whole + // thing with Array.prototype.concat. It is guaranteed to be only 1-level deep + // because functional components already normalize their own children. + function simpleNormalizeChildren (children) { + for (var i = 0; i < children.length; i++) { + if (Array.isArray(children[i])) { + return Array.prototype.concat.apply([], children) + } + } + return children + } + + // 2. When the children contains constructs that always generated nested Arrays, + // e.g.