";
+ return div.innerHTML.indexOf('
') > 0
+ }
+
+ // #3663: IE encodes newlines inside attribute values while other browsers don't
+ var shouldDecodeNewlines = inBrowser ? getShouldDecode(false) : false;
+ // #6828: chrome encodes content in a[href]
+ var shouldDecodeNewlinesForHref = inBrowser ? getShouldDecode(true) : false;
+
+ /* */
+
+ var idToTemplate = cached(function (id) {
+ var el = query(id);
+ return el && el.innerHTML
+ });
+
+ var mount = Vue.prototype.$mount;
+ Vue.prototype.$mount = function (
+ el,
+ hydrating
+ ) {
+ el = el && query(el);
+
+ /* istanbul ignore if */
+ if (el === document.body || el === document.documentElement) {
+ warn(
+ "Do not mount Vue to or - mount to normal elements instead."
+ );
+ return this
+ }
+
+ var options = this.$options;
+ // resolve template/el and convert to render function
+ if (!options.render) {
+ var template = options.template;
+ if (template) {
+ if (typeof template === 'string') {
+ if (template.charAt(0) === '#') {
+ template = idToTemplate(template);
+ /* istanbul ignore if */
+ if (!template) {
+ warn(
+ ("Template element not found or is empty: " + (options.template)),
+ this
+ );
+ }
+ }
+ } else if (template.nodeType) {
+ template = template.innerHTML;
+ } else {
+ {
+ warn('invalid template option:' + template, this);
+ }
+ return this
+ }
+ } else if (el) {
+ template = getOuterHTML(el);
+ }
+ if (template) {
+ /* istanbul ignore if */
+ if (config.performance && mark) {
+ mark('compile');
+ }
+
+ var ref = compileToFunctions(template, {
+ outputSourceRange: "development" !== 'production',
+ shouldDecodeNewlines: shouldDecodeNewlines,
+ shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
+ delimiters: options.delimiters,
+ comments: options.comments
+ }, this);
+ var render = ref.render;
+ var staticRenderFns = ref.staticRenderFns;
+ options.render = render;
+ options.staticRenderFns = staticRenderFns;
+
+ /* istanbul ignore if */
+ if (config.performance && mark) {
+ mark('compile end');
+ measure(("vue " + (this._name) + " compile"), 'compile', 'compile end');
+ }
+ }
+ }
+ return mount.call(this, el, hydrating)
+ };
+
+ /**
+ * Get outerHTML of elements, taking care
+ * of SVG elements in IE as well.
+ */
+ function getOuterHTML (el) {
+ if (el.outerHTML) {
+ return el.outerHTML
+ } else {
+ var container = document.createElement('div');
+ container.appendChild(el.cloneNode(true));
+ return container.innerHTML
+ }
+ }
+
+ Vue.compile = compileToFunctions;
+
+ return Vue;
+
+}));
diff --git a/less/index.less b/less/index.less
new file mode 100644
index 0000000..f32d9ff
--- /dev/null
+++ b/less/index.less
@@ -0,0 +1,714 @@
+@import './public.css';
+@width: 1180px;
+@color: #80C4AE;
+@title_color: #333;
+@high_color: #fff;
+@font: 16px;
+@fonts: 14px;
+@font_high: #71FFDE;
+@line: #74C6B3;
+@shadow: #dad6d6;
+
+.clearfix{
+ display: block;
+ clear: both;
+ content: '';
+}
+
+nav {
+ width: 100%;
+ height: 80px;
+ background: #fff;
+ box-shadow: 0 2px 3px @shadow;
+ vertical-align: top;
+
+ .main {
+ width: @width;
+ margin: 0 auto;
+ }
+
+ .logo {
+ width: 179px;
+ height: 53px;
+ margin: 13px 0 14px 0;
+ }
+
+ ul {
+ display: inline-block;
+ margin-left: 120px;
+ border: none;
+ font-size: 0;
+
+ li {
+ display: inline-block;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
+ margin-right: 17px;
+ text-align: center;
+
+ a {
+ color: @title_color;
+ font-size: @font;
+ }
+ }
+
+ li:last-child {
+ margin-right: 0;
+ }
+
+ .check {
+ background: @color;
+ color: @high_color;
+
+ a {
+ color: @high_color;
+ font-size: @font;
+ }
+ }
+ }
+
+ div.search {
+ display: inline-block;
+ margin-left: 120px;
+ border: 1px solid @color;
+ border-radius: 3px;
+ width: 280px;
+ height: 36px;
+ text-align: center;
+ font-size: 0;
+ padding: 0;
+ overflow: hidden;
+ vertical-align: middle;
+ position: relative;
+
+ .left {
+ width: 69px;
+ height: 36px;
+ border-right: 1px solid @color;
+ font-size: 14px;
+ text-align: center;
+ line-height: 36px;
+ float: left;
+ color: @color;
+ padding: 0;
+
+ i {
+ margin-left: 6px;
+ font-size: 5px;
+ }
+ }
+
+ input {
+ border: none;
+ outline: none;
+ display: inline-block;
+ height: 36px;
+ text-align: center;
+ font-weight: 400;
+ font-size: @fonts;
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ right: 7px;
+ top: 8px;
+ }
+ }
+
+ .login {
+ margin-left: 24px;
+ display: inline-block;
+ color: @color;
+ font-size: @fonts;
+ }
+ .user{
+ display: inline-block;
+ margin-left: 24px;
+ display: none;
+
+ img{
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ }
+ }
+}
+
+nav{
+ .main{
+ .user{
+ position: relative;
+ .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;
+ ul{
+ width: 122px;
+ height: 100%;
+ padding-top: 30px;
+ margin-left: 0;
+ li{
+ font-size: 16px;
+ color: #333;
+ line-height: 30px;
+ height: 40px;
+ text-align: center;
+ width: 100%;
+ cursor: pointer;
+ }
+ }
+ }
+ &:hover{
+ .userlist{
+ display: block;
+ }
+ }
+ }
+ }
+}
+
+main {
+
+ // banner
+ .banner {
+ width: @width;
+ height: 350px;
+ margin: 0 auto;
+ margin-top: 23px;
+ position: relative;
+
+ .img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ li {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+
+ &.active {
+ opacity: 1;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+
+ .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;
+
+ li {
+ padding-left: 33px;
+ height: 20px;
+ font-size: 14px;
+ font-weight: 600;
+ color: #E4E4E4;
+ line-height: 20px;
+ margin-bottom: 14px;
+ cursor: pointer;
+
+ &.high {
+ color: @font_high;
+ opacity: 1;
+ background: url(../img/index/left.png) no-repeat 20px 6px;
+ }
+ }
+ }
+ }
+
+ // online
+ .online {
+ width: @width;
+ margin: 44px auto 0;
+
+ .title {
+ height: auto;
+
+ span {
+ width: 80px;
+ height: 28px;
+ font-size: 20px;
+ font-weight: 400;
+ color: @title_color;
+ line-height: 28px;
+ display: inline-block;
+ vertical-align: middle;
+
+ &.line {
+ width: 6px;
+ height: 20px;
+ background: @line;
+ margin-right: 10px;
+ }
+
+ &.more {
+ display: block;
+ float: right;
+ margin-right: 11px;
+ width: auto;
+ color: @line;
+
+ i {
+ margin-left: 11px;
+ }
+ }
+ }
+ }
+
+ .onlineCont {
+ width: @width;
+ height: auto;
+
+ div.content {
+ width: @width;
+ margin: 20px auto 0;
+
+ ul {
+ li {
+ width: 280px;
+ height: 225px;
+ box-shadow: 0 2px 3px @shadow;
+ background: #fff;
+ position: relative;
+ overflow: hidden;
+ margin: 0 20px 20px 0;
+ float: left;
+
+ &:nth-child(4n) {
+ margin-right: 0;
+ }
+
+ .top {
+
+ width: 280px;
+ height: 163px;
+ vertical-align: top;
+ overflow: hidden;
+
+ .rj {
+ position: absolute;
+ left: 0;
+ top: 0;
+ border-radius: 4px 0px 12px 0px;
+ background: rgba(0, 0, 0, 1);
+ color: #000;
+ display: block;
+ width: 71px;
+ height: 33px;
+ font-size: @fonts;
+ line-height: 33px;
+ text-align: center;
+ color: @high_color;
+ opacity: 0.3;
+ }
+
+ img.m {
+ width: 280px;
+ height: 163px;
+ }
+
+ &>p {
+ position: absolute;
+ bottom: 63px;
+ left: 0;
+ width: 100%;
+ height: 33px;
+ line-height: 33px;
+ font-size: @fonts;
+ background: rgba(0, 0, 0, 1);
+ color: @high_color;
+ padding-left: 10px;
+ opacity: 0.3;
+ }
+ }
+
+ .bottom {
+ width: 100%;
+ height: 62px;
+ overflow: hidden;
+ line-height: 20px;
+ font-size: 14px;
+ color: @title_color;
+ margin-top: 10px;
+ padding-left: 10px;
+
+ .left {
+ float: left;
+
+ span {
+ display: block;
+
+ &.time {
+ margin-top: 5px;
+ font-size: @fonts;
+ line-height: 17px;
+ color: #7A7A7A;
+ }
+ }
+ }
+
+ .right {
+ float: right;
+ margin-top: 12px;
+ margin-right: 5px;
+ width: 86px;
+ height: 30px;
+ line-height: 30px;
+ font-size: 16px;
+ color: #fff;
+ background: @line;
+ text-align: center;
+ border-radius: 4px;
+ }
+ }
+
+ }
+
+ &::after {
+ display: block;
+ content: '';
+ clear: both;
+ zoom: 1;
+ }
+ }
+ }
+ }
+ }
+
+ .contBanner {
+ width: @width;
+ height: 186px;
+ margin: 31px auto 0;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .testClass {
+ .online();
+
+ .onlineCont {
+ div.content {
+ ul {
+ li {
+ width: 379px;
+ height: 224px;
+ overflow: hidden;
+
+ .top {
+ width: 379px;
+ height: 163px;
+
+ img.m {
+ width: 100%;
+ height: 163px;
+ }
+
+ p {
+ padding-right: 28px;
+ }
+
+ span:nth-child(1) {
+ display: block;
+ float: right;
+ font-size: 12px;
+ }
+
+ span:nth-child(2) {
+ display: block;
+ float: left;
+ }
+ }
+
+ .bottom {
+ div.left {
+ width: 140px;
+ }
+ }
+
+ &:nth-child(3n) {
+ margin-right: 0;
+ }
+
+ &:nth-child(4n) {
+ margin-right: 20px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .goodClass {
+ .online();
+
+ .onlineCont {
+ div.content {
+ width: 884px;
+ float: left;
+
+ ul {
+ li {
+ overflow: hidden;
+
+ &:nth-child(3n) {
+ margin-right: 0;
+ }
+
+ &:nth-child(4n) {
+ margin-right: 20px;
+ }
+ }
+ }
+ }
+
+ div.rightCont {
+ width: 296px;
+ height: 487px;
+ float: left;
+ margin-top: 20px;
+ overflow: hidden;
+
+ img {
+ width: 296px;
+ height: 487px;
+ margin-top: -6px;
+ }
+ }
+
+ &::after {
+ display: block;
+ content: '';
+ clear: both;
+ zoom: 1;
+ }
+ }
+
+ }
+
+ .footB {
+ .contBanner();
+ overflow: hidden;
+ margin-top: 19px;
+ height: 100px;
+
+ div {
+ width: 380px;
+ height: 100px;
+ margin-right: 20px;
+ float: left;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+
+ div.fix {
+ position: fixed;
+ width: 70px;
+ height: 220px;
+ bottom: 10px;
+
+ .lesson {
+ width: 70px;
+ height: 70px;
+ }
+
+ .test {
+ margin: 5px auto;
+ }
+
+ img {
+ width: 70px;
+ height: 70px;
+ }
+ }
+
+}
+
+footer {
+ width: 100%;
+ height: 264px;
+ background: @title_color;
+ margin-top: 36px;
+ padding-top: 87px;
+
+ .cont {
+ width: @width;
+ height: 100%;
+ margin: 0 auto;
+
+ .main {
+ width: 1153px;
+ height: 90px;
+ color: #ccc;
+ font-size: 14px;
+ line-height: 18px;
+ text-align: center;
+ margin: 0 auto;
+
+ p {
+ margin-top: 5px;
+ }
+
+ }
+ }
+}
+
+.pos {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, .2);
+ display: none;
+ z-index: 99999999;
+
+ .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;
+
+ span.close{
+ position: absolute;
+ right: 25px;
+ top: 25px;
+ color: #999;
+ z-index: 9999;
+ font-size: 20px;
+ }
+
+ img {
+ width: 136px;
+ height: 40px;
+ margin-bottom: 46px;
+ }
+
+ ul {
+ padding-left: 20px;
+ &::after{
+ .clearfix();
+ }
+ li {
+ width: 134px;
+ height: 1px;
+ float: left;
+ border-top: 1px solid rgba(236, 236, 236, 1);
+ margin-top: 12px;
+
+ &.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;
+
+ }
+ }
+ }
+
+ input {
+ display: block;
+ margin-left: 110px;
+ width: 300px;
+ height: 40px;
+ border-radius: 4px;
+ border: 1px solid #80C4AE;
+ padding-left: 24px;
+ margin-bottom: 20px;
+ }
+ .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;
+ }
+ p{
+ width: 300px;
+ margin: 0 auto;
+ margin-bottom: 36px;
+ &::after{
+ .clearfix();
+ }
+ span{
+ display: inline-block;
+ color: #333;
+ font-size: 12px;
+ &:first-child{
+ float: left;
+ }
+ &:last-child{
+ float: right;
+ }
+ a{
+ font-size: 12px;
+ color: #74C6B3;
+ }
+ }
+ &.getCenter{
+ display: block;
+ img{
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ &:nth-child(2){
+ margin-left: 30px;
+ margin-right: 30px;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/less/online.less b/less/online.less
new file mode 100644
index 0000000..b2caec8
--- /dev/null
+++ b/less/online.less
@@ -0,0 +1,570 @@
+@import './public.css';
+@width: 1180px;
+@color: #80C4AE;
+@title_color: #333;
+@high_color: #fff;
+@font: 16px;
+@fonts: 14px;
+@font_high: #71FFDE;
+@line: #74C6B3;
+@shadow: #dad6d6;
+
+.clearfix {
+ display: block;
+ content: '';
+ clear: both;
+}
+
+nav {
+ width: 100%;
+ height: 80px;
+ background: #fff;
+ box-shadow: 0 2px 3px @shadow;
+ vertical-align: top;
+
+ .main {
+ width: @width;
+ margin: 0 auto;
+
+ ul {
+ li:hover {
+ background: @color;
+ color: @high_color;
+
+ a {
+ color: @high_color;
+ font-size: @font;
+ }
+ }
+ }
+ }
+
+ .logo {
+ width: 179px;
+ height: 53px;
+ margin: 13px 0 14px 0;
+ }
+
+ ul {
+ display: inline-block;
+ margin-left: 120px;
+ border: none;
+ font-size: 0;
+
+ li {
+ display: inline-block;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
+ margin-right: 17px;
+ text-align: center;
+
+ a {
+ color: @title_color;
+ font-size: @font;
+ }
+ }
+
+ li:last-child {
+ margin-right: 0;
+ }
+
+ .check {
+ background: @color;
+ color: @high_color;
+
+ a {
+ color: @high_color;
+ font-size: @font;
+ }
+ }
+ }
+
+ div.search {
+ display: inline-block;
+ margin-left: 120px;
+ border: 1px solid @color;
+ border-radius: 3px;
+ width: 280px;
+ height: 36px;
+ text-align: center;
+ font-size: 0;
+ padding: 0;
+ overflow: hidden;
+ vertical-align: middle;
+ position: relative;
+
+ .left {
+ width: 69px;
+ height: 36px;
+ border-right: 1px solid @color;
+ font-size: 14px;
+ text-align: center;
+ line-height: 36px;
+ float: left;
+ color: @color;
+ padding: 0;
+
+ i {
+ margin-left: 6px;
+ font-size: 5px;
+ }
+ }
+
+ input {
+ border: none;
+ outline: none;
+ display: inline-block;
+ height: 36px;
+ text-align: center;
+ font-weight: 400;
+ font-size: @fonts;
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ right: 7px;
+ top: 8px;
+ }
+ }
+
+ .login {
+ margin-left: 24px;
+ display: inline-block;
+ color: @color;
+ font-size: @fonts;
+ }
+ .user{
+ display: inline-block;
+ margin-left: 24px;
+ display: none;
+
+ img{
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ }
+ }
+}
+
+nav{
+ .main{
+ .user{
+ position: relative;
+ .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;
+ ul{
+ width: 122px;
+ height: 100%;
+ padding-top: 30px;
+ margin-left: 0;
+ li{
+ font-size: 16px;
+ color: #333;
+ line-height: 30px;
+ height: 40px;
+ text-align: center;
+ width: 100%;
+ cursor: pointer;
+ &:hover{
+ background: none;
+ }
+ &:last-child{
+ color: #666;
+ }
+ }
+ }
+ }
+ &:hover{
+ .userlist{
+ display: block;
+ }
+ }
+ }
+ }
+}
+
+footer {
+ width: 100%;
+ height: 264px;
+ background: @title_color;
+ margin-top: 36px;
+ padding-top: 87px;
+
+ .cont {
+ width: @width;
+ height: 100%;
+ margin: 0 auto;
+
+ .main {
+ width: 1153px;
+ height: 90px;
+ color: #ccc;
+ font-size: 14px;
+ line-height: 18px;
+ text-align: center;
+ margin: 0 auto;
+
+ p {
+ margin-top: 5px;
+ }
+
+ }
+ }
+}
+
+.pos {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, .2);
+ display: none;
+ z-index: 99999999;
+
+ .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;
+
+ span.close{
+ position: absolute;
+ right: 25px;
+ top: 25px;
+ color: #999;
+ z-index: 9999;
+ font-size: 20px;
+ }
+
+ img {
+ width: 136px;
+ height: 40px;
+ margin-bottom: 46px;
+ }
+
+ ul {
+ padding-left: 20px;
+ &::after{
+ .clearfix();
+ }
+ li {
+ width: 134px;
+ height: 1px;
+ float: left;
+ border-top: 1px solid rgba(236, 236, 236, 1);
+ margin-top: 12px;
+
+ &.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;
+
+ }
+ }
+ }
+
+ input {
+ display: block;
+ margin-left: 110px;
+ width: 300px;
+ height: 40px;
+ border-radius: 4px;
+ border: 1px solid #80C4AE;
+ padding-left: 24px;
+ margin-bottom: 20px;
+ }
+ .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;
+ }
+ p{
+ width: 300px;
+ margin: 0 auto;
+ margin-bottom: 36px;
+ &::after{
+ .clearfix();
+ }
+ span{
+ display: inline-block;
+ color: #333;
+ font-size: 12px;
+ &:first-child{
+ float: left;
+ }
+ &:last-child{
+ float: right;
+ }
+ a{
+ font-size: 12px;
+ color: #74C6B3;
+ }
+ }
+ &.getCenter{
+ display: block;
+ img{
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ &:nth-child(2){
+ margin-left: 30px;
+ margin-right: 30px;
+ }
+ }
+ }
+ }
+ }
+}
+
+main {
+ width: @width;
+ margin: 0 auto;
+ margin-top: 22px;
+
+ .row {
+ min-height: 60px;
+ line-height: 40px;
+ color: @title_color;
+ font-size: 16px;
+ vertical-align: middle;
+ width: 1180px;
+ height: auto;
+
+ .left {
+ float: left;
+ font-weight: Semibold;
+ margin-right: 10px;
+ color: #222;
+ width: 80px;
+ }
+
+ .right {
+ float: left;
+ width: 1090px;
+
+ span {
+ width: 180px;
+ height: 40px;
+ border: 1px solid @color;
+ border-radius: 4px;
+ display: inline-block;
+ padding-left: 18px;
+ color: #666;
+ position: relative;
+ font-size: 14px;
+ margin-left: 22px;
+ cursor: pointer;
+ i {
+ color: @color;
+ position: absolute;
+ right: 13px;
+ // top: 18px;
+ }
+ }
+
+ ul {
+ margin-left: 35px;
+
+ li {
+ display: inline-block;
+ margin-right: 50px;
+ color: #666;
+ width: 52px;
+ text-align: center;
+ font-size: 14px;
+ box-sizing: border-box;
+ cursor: pointer;
+ a.active {
+ background: @color;
+ color: @high_color;
+ border-radius: 4px;
+ padding: 3px 5px;
+ }
+ }
+ }
+ }
+
+ &::after {
+ .clearfix();
+ }
+ }
+
+ .lesson {
+ width: @width;
+ margin: 20px auto 0;
+
+ ul {
+ li {
+ width: 380px;
+ height: 256px;
+ box-shadow: 0 2px 5px @shadow;
+ background: #fff;
+ position: relative;
+ overflow: hidden;
+ margin: 0 20px 20px 0;
+ float: left;
+ cursor: pointer;
+ &:nth-child(3n) {
+ margin-right: 0;
+ }
+
+ .top {
+
+ width: 380px;
+ height: 196px;
+ vertical-align: top;
+ overflow: hidden;
+
+ img.m {
+ width: 380px;
+ height: 196px;
+ }
+
+ &>p {
+ position: absolute;
+ bottom: 60px;
+ left: 0;
+ width: 100%;
+ height: 33px;
+ line-height: 33px;
+ font-size: @fonts;
+ background: rgba(0, 0, 0, 1);
+ color: @high_color;
+ padding-left: 10px;
+ opacity: 0.3;
+ }
+ }
+
+ .bottom {
+ width: 100%;
+ height: 62px;
+ overflow: hidden;
+ line-height: 20px;
+ font-size: 14px;
+ color: @title_color;
+ margin-top: 7px;
+ padding-left: 14px;
+
+ .left {
+ float: left;
+
+ span {
+ display: block;
+
+ &.time {
+ margin-top: 5px;
+ font-size: @fonts;
+ line-height: 17px;
+ color: #7A7A7A;
+ }
+ }
+ }
+
+ .right {
+ float: right;
+ margin-top: 12px;
+ margin-right: 14px;
+ width: 86px;
+ height: 30px;
+ line-height: 30px;
+ font-size: 16px;
+ color: #fff;
+ background: @line;
+ text-align: center;
+ border-radius: 4px;
+ }
+ }
+
+ }
+
+ &::after {
+ display: block;
+ content: '';
+ clear: both;
+ zoom: 1;
+ }
+ }
+ }
+
+ .pageNum{
+ width: @width;
+ height: 40px;
+ margin: 0 auto;
+ margin-top: 20px;
+ text-align: center;
+ ul{
+ text-align: center;
+ line-height: 25px;
+ font-size: 18px;
+ display: inline-block;
+ 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;
+ &.active{
+ background: @color;
+ color: #fff;
+ }
+ }
+ }
+ 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;
+ &.active{
+ color: #333;
+ }
+ &:last-child{
+ margin-left: 8px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/less/product.less b/less/product.less
new file mode 100644
index 0000000..aee83e1
--- /dev/null
+++ b/less/product.less
@@ -0,0 +1,350 @@
+@import './public.css';
+@width: 1180px;
+@color: #80C4AE;
+@title_color: #333;
+@high_color: #fff;
+@font: 16px;
+@fonts: 14px;
+@font_high: #71FFDE;
+@line: #74C6B3;
+@shadow: #dad6d6;
+
+.clearfix {
+ display: block;
+ content: '';
+ clear: both;
+}
+
+nav {
+ width: 100%;
+ height: 80px;
+ background: #fff;
+ box-shadow: 0 2px 3px @shadow;
+ vertical-align: top;
+
+ .main {
+ width: @width;
+ margin: 0 auto;
+
+ ul {
+ li:hover {
+ background: @color;
+ color: @high_color;
+
+ a {
+ color: @high_color;
+ font-size: @font;
+ }
+ }
+ }
+ }
+
+ .logo {
+ width: 179px;
+ height: 53px;
+ margin: 13px 0 14px 0;
+ }
+
+ ul {
+ display: inline-block;
+ margin-left: 120px;
+ border: none;
+ font-size: 0;
+
+ li {
+ display: inline-block;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
+ margin-right: 17px;
+ text-align: center;
+
+ a {
+ color: @title_color;
+ font-size: @font;
+ }
+ }
+
+ li:last-child {
+ margin-right: 0;
+ }
+ }
+
+ div.search {
+ display: inline-block;
+ margin-left: 120px;
+ border: 1px solid @color;
+ border-radius: 3px;
+ width: 280px;
+ height: 36px;
+ text-align: center;
+ font-size: 0;
+ padding: 0;
+ overflow: hidden;
+ vertical-align: middle;
+ position: relative;
+
+ .left {
+ width: 69px;
+ height: 36px;
+ border-right: 1px solid @color;
+ font-size: 14px;
+ text-align: center;
+ line-height: 36px;
+ float: left;
+ color: @color;
+ padding: 0;
+
+ i {
+ margin-left: 6px;
+ font-size: 5px;
+ }
+ }
+
+ input {
+ border: none;
+ outline: none;
+ display: inline-block;
+ height: 36px;
+ text-align: center;
+ font-weight: 400;
+ font-size: @fonts;
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ right: 7px;
+ top: 8px;
+ }
+ }
+
+
+ .user {
+ display: inline-block;
+ margin-left: 24px;
+
+ img {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ }
+ }
+}
+
+nav {
+ .main {
+ .user {
+ position: relative;
+
+ .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;
+
+ ul {
+ width: 122px;
+ height: 100%;
+ padding-top: 30px;
+ margin-left: 0;
+
+ li {
+ font-size: 16px;
+ color: #333;
+ line-height: 30px;
+ height: 40px;
+ text-align: center;
+ width: 100%;
+ cursor: pointer;
+
+ &:hover {
+ background: none;
+ }
+
+ &:last-child {
+ color: #666;
+ }
+ }
+ }
+ }
+
+ &:hover {
+ .userlist {
+ display: block;
+ }
+ }
+ }
+ }
+}
+
+main {
+ width: @width;
+ margin: 0 auto;
+ height: 736px;
+ margin-top: 30px;
+
+ .leftNav {
+ width: 220px;
+ height: 451px;
+ background: #FFFFFF;
+ box-shadow: 0px -1px 3px 3px rgba(0, 0, 0, 0.03);
+ border-radius: 4px;
+ float: left;
+
+ >ul {
+ padding: 25px 0px;
+
+ >li {
+
+
+ &:nth-of-type(1) a {
+ background: url(../img/userSet/set_01.jpg) 17px center no-repeat;
+ }
+
+ &:nth-of-type(2) a {
+ background: url(../img/userSet/set_03.jpg) 17px center no-repeat;
+ }
+
+ &:nth-of-type(3) a {
+ background: url(../img/userSet/set_02.jpg) 17px center no-repeat;
+ }
+
+ &:nth-of-type(4) a {
+ background: url(../img/userSet/set_04.jpg) 17px center no-repeat;
+ }
+
+ >a {
+ display: block;
+ width: 100%;
+ position: relative;
+ padding-left: 60px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+
+ span {
+ display: block;
+ font-size: 14px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #333333;
+ }
+
+ i {
+ position: absolute;
+ right: 40px;
+ top: 10px;
+ }
+ }
+
+ ol {
+ >li {
+ padding-left: 60px;
+ margin-top: 5px;
+ font-size: 12px;
+ color: #666666;
+ height: 25px;
+ line-height: 25px;
+ }
+
+ li.active {
+ color: #80C4AE;
+ }
+
+ }
+
+ }
+ }
+ }
+
+ .rightUser {
+ float: left;
+ padding-top: 25px;
+ padding-left: 25px;
+
+ .title_top {
+ height: 30px;
+ line-height: 30px;
+
+ span {
+ display: inline-block;
+
+ &:nth-last-of-type(1) {
+ font-size: 14px;
+ font-weight: 400;
+ color: #666666;
+ }
+
+ &:nth-last-of-type(2) {
+ margin-left: 17px;
+ margin-right: 15px;
+ font-weight: bold;
+ }
+
+ &:nth-last-of-type(3) {
+ font-size: 14px;
+ font-weight: 400;
+ color: #333333;
+ }
+ }
+ }
+ }
+}
+
+footer {
+ width: 100%;
+ height: 264px;
+ background: @title_color;
+ margin-top: 36px;
+ padding-top: 87px;
+
+ .cont {
+ width: @width;
+ height: 100%;
+ margin: 0 auto;
+
+ .main {
+ width: 1153px;
+ height: 90px;
+ color: #ccc;
+ font-size: 14px;
+ line-height: 18px;
+ text-align: center;
+ margin: 0 auto;
+
+ p {
+ margin-top: 5px;
+ }
+
+ }
+ }
+}
+
+
+div.fix {
+ position: fixed;
+ width: 70px;
+ height: 220px;
+ bottom: 10px;
+ right: 0px;
+
+ .lesson {
+ width: 70px;
+ height: 70px;
+ }
+
+ .test {
+ margin: 5px auto;
+ }
+
+ img {
+ width: 70px;
+ height: 70px;
+ }
+}
\ No newline at end of file
diff --git a/less/public.less b/less/public.less
new file mode 100644
index 0000000..146c61e
--- /dev/null
+++ b/less/public.less
@@ -0,0 +1,10 @@
+@import './reset.css';
+@width: 1180px;
+@color: #80C4AE;
+@title_color: #333;
+@high_color: #fff;
+@font: 22px;
+
+*{
+ box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/less/userSeting.less b/less/userSeting.less
new file mode 100644
index 0000000..147779c
--- /dev/null
+++ b/less/userSeting.less
@@ -0,0 +1,630 @@
+@import './public.css';
+@width: 1180px;
+@color: #80C4AE;
+@title_color: #333;
+@high_color: #fff;
+@font: 16px;
+@fonts: 14px;
+@font_high: #71FFDE;
+@line: #74C6B3;
+@shadow: #dad6d6;
+
+.clearfix {
+ display: block;
+ content: '';
+ clear: both;
+}
+
+nav {
+ width: 100%;
+ height: 80px;
+ background: #fff;
+ box-shadow: 0 2px 3px @shadow;
+ vertical-align: top;
+
+ .main {
+ width: @width;
+ margin: 0 auto;
+
+ ul {
+ li:hover {
+ background: @color;
+ color: @high_color;
+
+ a {
+ color: @high_color;
+ font-size: @font;
+ }
+ }
+ }
+ }
+
+ .logo {
+ width: 179px;
+ height: 53px;
+ margin: 13px 0 14px 0;
+ }
+
+ ul {
+ display: inline-block;
+ margin-left: 120px;
+ border: none;
+ font-size: 0;
+
+ li {
+ display: inline-block;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
+ margin-right: 17px;
+ text-align: center;
+
+ a {
+ color: @title_color;
+ font-size: @font;
+ }
+ }
+
+ li:last-child {
+ margin-right: 0;
+ }
+ }
+
+ div.search {
+ display: inline-block;
+ margin-left: 120px;
+ border: 1px solid @color;
+ border-radius: 3px;
+ width: 280px;
+ height: 36px;
+ text-align: center;
+ font-size: 0;
+ padding: 0;
+ overflow: hidden;
+ vertical-align: middle;
+ position: relative;
+
+ .left {
+ width: 69px;
+ height: 36px;
+ border-right: 1px solid @color;
+ font-size: 14px;
+ text-align: center;
+ line-height: 36px;
+ float: left;
+ color: @color;
+ padding: 0;
+
+ i {
+ margin-left: 6px;
+ font-size: 5px;
+ }
+ }
+
+ input {
+ border: none;
+ outline: none;
+ display: inline-block;
+ height: 36px;
+ text-align: center;
+ font-weight: 400;
+ font-size: @fonts;
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ right: 7px;
+ top: 8px;
+ }
+ }
+
+
+ .user {
+ display: inline-block;
+ margin-left: 24px;
+
+ img {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ }
+ }
+}
+
+nav {
+ .main {
+ .user {
+ position: relative;
+
+ .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;
+
+ ul {
+ width: 122px;
+ height: 100%;
+ padding-top: 30px;
+ margin-left: 0;
+
+ li {
+ font-size: 16px;
+ color: #333;
+ line-height: 30px;
+ height: 40px;
+ text-align: center;
+ width: 100%;
+ cursor: pointer;
+
+ &:hover {
+ background: none;
+ }
+
+ &:last-child {
+ color: #666;
+ }
+ }
+ }
+ }
+
+ &:hover {
+ .userlist {
+ display: block;
+ }
+ }
+ }
+ }
+}
+
+main {
+ width: @width;
+ margin: 0 auto;
+ height: 736px;
+ margin-top: 30px;
+
+ .leftNav {
+ width: 220px;
+ height: 451px;
+ background: #FFFFFF;
+ box-shadow: 0px -1px 3px 3px rgba(0, 0, 0, 0.03);
+ border-radius: 4px;
+ float: left;
+
+ >ul {
+ padding: 25px 0px;
+
+ >li {
+
+
+ &:nth-of-type(1) a {
+ background: url(../img/userSet/set_01.jpg) 17px center no-repeat;
+ }
+
+ &:nth-of-type(2) a {
+ background: url(../img/userSet/set_03.jpg) 17px center no-repeat;
+ }
+
+ &:nth-of-type(3) a {
+ background: url(../img/userSet/set_02.jpg) 17px center no-repeat;
+ }
+
+ &:nth-of-type(4) a {
+ background: url(../img/userSet/set_04.jpg) 17px center no-repeat;
+ }
+
+ >a {
+ display: block;
+ width: 100%;
+ position: relative;
+ padding-left: 60px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+
+ span {
+ display: block;
+ font-size: 14px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #333333;
+ }
+
+ i {
+ position: absolute;
+ right: 40px;
+ top: 10px;
+ }
+ }
+
+ ol {
+ >li {
+ padding-left: 60px;
+ margin-top: 5px;
+ font-size: 12px;
+ color: #666666;
+ height: 25px;
+ line-height: 25px;
+ }
+
+ li.active {
+ color: #80C4AE;
+ }
+
+ }
+
+ }
+ }
+ }
+
+ .rightUser {
+ float: left;
+ padding-top: 25px;
+ padding-left: 25px;
+
+ .title_top {
+ height: 30px;
+ line-height: 30px;
+
+ span {
+ display: inline-block;
+
+ &:nth-last-of-type(1) {
+ font-size: 14px;
+ font-weight: 400;
+ color: #666666;
+ }
+
+ &:nth-last-of-type(2) {
+ margin-left: 17px;
+ margin-right: 15px;
+ font-weight: bold;
+ }
+
+ &:nth-last-of-type(3) {
+ font-size: 14px;
+ font-weight: 400;
+ color: #333333;
+ }
+ }
+ }
+
+ .title_center {
+ height: 30px;
+ width: 931px;
+ line-height: 30px;
+ margin-top: 30px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+ span {
+ display: inline-block;
+ text-align: center;
+
+ &:nth-child(1) {
+ width: 100px;
+ height: 30px;
+ background: #74C6B3;
+ border-radius: 4px;
+ font-weight: 500;
+ color: #FFFFFF;
+ font-size: 16px;
+ }
+
+ &:nth-child(2) {
+ font-size: 14px;
+ color: #333;
+ margin-left: 20px;
+ }
+ }
+
+
+ }
+
+ .content_show {
+ padding-left: 9px;
+ margin-top: 25px;
+
+ .my_icon {
+ height: 60px;
+ line-height: 60px;
+
+ span {
+ font-size: 14px;
+ color: #333;
+ margin-right: 20px;
+ }
+
+ a {
+ display: inline-block;
+ width: 60px;
+ height: 60px;
+ position: relative;
+ vertical-align: bottom;
+
+ img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ border: none;
+ }
+
+ .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;
+
+ input {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: block;
+ width: 60px;
+ height: 60px;
+ text-decoration: none;
+ text-indent: -200px;
+ z-index: 10;
+ }
+ }
+ }
+
+ &:hover .change {
+ display: block;
+ }
+
+ }
+
+ .my_name {
+ margin-top: 20px;
+ position: relative;
+ height: 40px;
+ line-height: 40px;
+
+ span {
+ color: #333;
+ font-size: 14px;
+ margin-right: 40px;
+ }
+
+ input {
+ width: 260px;
+ height: 40px;
+ border-radius: 4px;
+ border: 1px solid #80C4AE;
+ text-indent: 20px;
+ outline: none;
+ color: #999999;
+ font-size: 12px;
+ }
+
+ &:focus {
+ color: #999999;
+ font-size: 12px;
+ }
+
+ .my_name_left {
+ position: absolute;
+ left: 0px;
+ }
+
+ .my_name_right {
+ position: absolute;
+ left: 500px;
+ }
+ }
+
+ .my_sex {
+ margin-top: 20px;
+ position: relative;
+ height: 40px;
+ line-height: 40px;
+
+ span {
+ color: #333;
+ font-size: 14px;
+ margin-right: 40px;
+ }
+
+ &:focus {
+ color: #999999;
+ font-size: 12px;
+ }
+
+ .my_name_left {
+ position: absolute;
+ left: 0px;
+
+ input {
+ width: 14px;
+ height: 14px;
+ background: rgba(0, 0, 0, 0.1);
+ margin-right: 10px;
+ }
+ }
+
+ .my_name_right {
+ position: absolute;
+ left: 500px;
+
+ input {
+ width: 260px;
+ height: 40px;
+ border-radius: 4px;
+ border: 1px solid #80C4AE;
+ text-indent: 20px;
+ outline: none;
+ color: #999999;
+ font-size: 12px;
+ }
+ }
+ }
+
+ .my_phone {
+ margin-top: 20px;
+ position: relative;
+ height: 40px;
+ line-height: 40px;
+
+ input {
+ width: 260px;
+ height: 40px;
+ border-radius: 4px;
+ border: 1px solid #80C4AE;
+ text-indent: 20px;
+ outline: none;
+ color: #999999;
+ font-size: 12px;
+ }
+
+ &:focus {
+ color: #999999;
+ font-size: 12px;
+ }
+
+ .my_name_left {
+ position: absolute;
+ left: 0px;
+
+ span {
+ margin-right: 40px;
+ }
+
+ a {
+ font-weight: 400;
+ color: #80C4AE;
+ margin-left: 20px;
+ }
+ }
+
+ .my_name_right {
+ position: absolute;
+ left: 500px;
+
+ span {
+ color: #333;
+ font-size: 14px;
+ margin-right: 12px;
+ }
+ }
+ }
+
+ .my_learn {
+ margin-top: 20px;
+ position: relative;
+ height: 40px;
+ line-height: 40px;
+
+ span {
+ color: #333;
+ font-size: 14px;
+ margin-right: 40px;
+ }
+
+ 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;
+ }
+
+ &:focus {
+ color: #999999;
+ font-size: 12px;
+ }
+
+ .my_name_left {
+ position: absolute;
+ left: 0px;
+ font-weight: 400;
+ color: #80C4AE;
+ font-size: 14px;
+ }
+
+ .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: @title_color;
+ margin-top: 36px;
+ padding-top: 87px;
+
+ .cont {
+ width: @width;
+ height: 100%;
+ margin: 0 auto;
+
+ .main {
+ width: 1153px;
+ height: 90px;
+ color: #ccc;
+ font-size: 14px;
+ line-height: 18px;
+ text-align: center;
+ margin: 0 auto;
+
+ p {
+ margin-top: 5px;
+ }
+
+ }
+ }
+}
+
+
+div.fix {
+ position: fixed;
+ width: 70px;
+ height: 220px;
+ bottom: 10px;
+ right: 0px;
+
+ .lesson {
+ width: 70px;
+ height: 70px;
+ }
+
+ .test {
+ margin: 5px auto;
+ }
+
+ img {
+ width: 70px;
+ height: 70px;
+ }
+}
\ No newline at end of file
diff --git a/less/videoDetail.less b/less/videoDetail.less
new file mode 100644
index 0000000..4b50869
--- /dev/null
+++ b/less/videoDetail.less
@@ -0,0 +1,721 @@
+@import './public.css';
+@width: 1180px;
+@color: #80C4AE;
+@title_color: #333;
+@high_color: #fff;
+@font: 16px;
+@fonts: 14px;
+@font_high: #71FFDE;
+@line: #74C6B3;
+@shadow: #dad6d6;
+
+.clearfix {
+ display: block;
+ content: '';
+ clear: both;
+}
+
+.width {
+ width: @width;
+ height: auto;
+ margin: 0 auto;
+}
+
+// * {
+
+// font-family: PingFangSC-Semibold, PingFang SC;
+// }
+
+nav {
+ width: 100%;
+ height: 80px;
+ background: #fff;
+ box-shadow: 0 2px 3px @shadow;
+ vertical-align: top;
+
+ .main {
+ width: @width;
+ margin: 0 auto;
+
+ ul {
+ li:hover {
+ background: @color;
+ color: @high_color;
+
+ a {
+ color: @high_color;
+ font-size: @font;
+ }
+ }
+ }
+ }
+
+ .logo {
+ width: 179px;
+ height: 53px;
+ margin: 13px 0 14px 0;
+ }
+
+ ul {
+ display: inline-block;
+ margin-left: 120px;
+ border: none;
+ font-size: 0;
+
+ li {
+ display: inline-block;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
+ margin-right: 17px;
+ text-align: center;
+
+ a {
+ color: @title_color;
+ font-size: @font;
+ }
+ }
+
+ li:last-child {
+ margin-right: 0;
+ }
+
+ .check {
+ background: @color;
+ color: @high_color;
+
+ a {
+ color: @high_color;
+ font-size: @font;
+ }
+ }
+ }
+
+ div.search {
+ display: inline-block;
+ margin-left: 120px;
+ border: 1px solid @color;
+ border-radius: 3px;
+ width: 280px;
+ height: 36px;
+ text-align: center;
+ font-size: 0;
+ padding: 0;
+ overflow: hidden;
+ vertical-align: middle;
+ position: relative;
+
+ .left {
+ width: 69px;
+ height: 36px;
+ border-right: 1px solid @color;
+ font-size: 14px;
+ text-align: center;
+ line-height: 36px;
+ float: left;
+ color: @color;
+ padding: 0;
+
+ i {
+ margin-left: 6px;
+ font-size: 5px;
+ }
+ }
+
+ input {
+ border: none;
+ outline: none;
+ display: inline-block;
+ height: 36px;
+ text-align: center;
+ font-weight: 400;
+ font-size: @fonts;
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ right: 7px;
+ top: 8px;
+ }
+ }
+
+ .login {
+ margin-left: 24px;
+ display: inline-block;
+ color: @color;
+ font-size: @fonts;
+ }
+ .user{
+ display: inline-block;
+ margin-left: 24px;
+ display: none;
+
+ img{
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ }
+ }
+}
+
+nav{
+ .main{
+ .user{
+ position: relative;
+ .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;
+ ul{
+ width: 122px;
+ height: 100%;
+ padding-top: 30px;
+ margin-left: 0;
+ li{
+ font-size: 16px;
+ color: #333;
+ line-height: 30px;
+ height: 40px;
+ text-align: center;
+ width: 100%;
+ cursor: pointer;
+ &:hover{
+ background: none;
+ }
+ &:last-child{
+ color: #666;
+ }
+ }
+ }
+ }
+ &:hover{
+ .userlist{
+ display: block;
+ }
+ }
+ }
+ }
+}
+
+footer {
+ width: 100%;
+ height: 264px;
+ background: @title_color;
+ // margin-top: 36px;
+ padding-top: 87px;
+
+ .cont {
+ width: @width;
+ height: 100%;
+ margin: 0 auto;
+
+ .main {
+ width: 1153px;
+ height: 90px;
+ color: #ccc;
+ font-size: 14px;
+ line-height: 18px;
+ text-align: center;
+ margin: 0 auto;
+
+ p {
+ margin-top: 5px;
+ }
+
+ }
+ }
+}
+
+.pos {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, .2);
+ display: none;
+ z-index: 99999999;
+
+ .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;
+
+ span.close{
+ position: absolute;
+ right: 25px;
+ top: 25px;
+ color: #999;
+ z-index: 9999;
+ font-size: 20px;
+ }
+
+ img {
+ width: 136px;
+ height: 40px;
+ margin-bottom: 46px;
+ }
+
+ ul {
+ padding-left: 20px;
+ &::after{
+ .clearfix();
+ }
+ li {
+ width: 134px;
+ height: 1px;
+ float: left;
+ border-top: 1px solid rgba(236, 236, 236, 1);
+ margin-top: 12px;
+
+ &.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;
+
+ }
+ }
+ }
+
+ input {
+ display: block;
+ margin-left: 110px;
+ width: 300px;
+ height: 40px;
+ border-radius: 4px;
+ border: 1px solid #80C4AE;
+ padding-left: 24px;
+ margin-bottom: 20px;
+ }
+ .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;
+ }
+ p{
+ width: 300px;
+ margin: 0 auto;
+ margin-bottom: 36px;
+ &::after{
+ .clearfix();
+ }
+ span{
+ display: inline-block;
+ color: #333;
+ font-size: 12px;
+ &:first-child{
+ float: left;
+ }
+ &:last-child{
+ float: right;
+ }
+ a{
+ font-size: 12px;
+ color: #74C6B3;
+ }
+ }
+ &.getCenter{
+ display: block;
+ img{
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ &:nth-child(2){
+ margin-left: 30px;
+ margin-right: 30px;
+ }
+ }
+ }
+ }
+ }
+}
+
+.all {
+ width: 100%;
+ height: 60px;
+
+ .crumbs {
+ width: @width;
+ height: 60px;
+ line-height: 60px;
+ text-align: left;
+ margin: 0 auto;
+ padding-left: 20px;
+
+ span {
+ margin-right: 20px;
+ color: #333;
+ font-size: 14px;
+
+ &:nth-child(2n) {
+ color: #000;
+ }
+ }
+ }
+}
+
+// 主体样式
+main {
+ background: #fafafa;
+
+ .classDetail {
+ .width();
+
+ &::after {
+ .clearfix();
+ }
+
+ div {
+ float: left;
+ }
+
+ .left {
+ padding: 20px;
+ box-sizing: border-box;
+ width: 860px;
+ height: 580px;
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+
+ img,
+ video {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .right {
+ margin-left: 35px;
+ padding-top: 70px;
+
+ .title {
+ font-size: 22px;
+ color: @title_color;
+ font-weight: Semibold;
+ line-height: 30px;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ }
+
+ ul {
+ margin-top: 20px;
+
+ li {
+ font-size: 14px;
+ color: #333;
+ line-height: 20px;
+ font-weight: Regular;
+ margin-bottom: 10px;
+
+ span {
+ color: #f66;
+ margin-right: 5px;
+ }
+
+ &.price {
+ margin-top: 83px;
+ vertical-align: top;
+
+ span {
+ font-size: 36px;
+ line-height: 50px;
+ color: @color;
+
+ &:first-child {
+ font-family: PingFangSC-Semibold, PingFang SC;
+ }
+
+ &:last-child {
+ border: 2px solid @color;
+ margin-left: 31px;
+ border-radius: 4px;
+ font-size: 14px;
+ display: inline-block;
+ width: 130px;
+ height: 48px;
+ padding-left: 33px;
+
+ }
+ }
+ }
+
+ &.sale {
+ width: 260px;
+ height: 48px;
+ padding-top: 13px;
+ padding-left: 15px;
+ background: @color;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ border-radius: 4px;
+
+ span {
+ color: #fff;
+
+ &:first-child {
+ border-right: 1px solid #fff;
+ padding-right: 25px;
+ margin-right: 25px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .row {
+ .width();
+ 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;
+
+ &>p {
+ width: 80px;
+ height: 28px;
+ font-size: 20px;
+ font-weight: 400;
+ color: #333333;
+ line-height: 28px;
+ margin-bottom: 20px;
+ }
+
+ .left {
+ width: 265px;
+ float: left;
+
+ .img {
+ width: 62px;
+ height: 62px;
+ background: #D8D8D8;
+ border-radius: 50%;
+ margin-left: 9px;
+ margin-right: 20px;
+ float: left;
+ }
+
+ p.right {
+ width: 154px;
+ height: 56px;
+ font-size: 16px;
+ font-weight: 400;
+ color: #333333;
+ line-height: 22px;
+ float: left;
+ border-right: 1px solid @color;
+ padding-right: 30px;
+
+ span {
+ display: inline-block;
+ width: 124px;
+ font-size: 16px;
+
+ &:first-child {
+ font-size: 18px;
+ color: #333;
+ margin-bottom: 10px;
+ }
+ }
+ }
+
+ &::after {
+ .clearfix();
+ }
+ }
+
+ .right {
+ color: @title_color;
+ font-size: 16px;
+ line-height: 22px;
+ vertical-align: top;
+ text-align: left;
+ width: 870px;
+ float: left;
+ }
+
+ &.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;
+
+ span {
+ display: inline-block;
+ font-size: 14px;
+ font-weight: 600;
+ color: #333333;
+ line-height: 66px;
+ width: 80px;
+ height: 66px;
+ margin-right: 20px;
+ cursor: pointer;
+
+ &.active {
+ background: @color;
+ color: @high_color;
+ }
+ }
+ }
+ }
+
+ .classlist {
+ .width();
+ 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;
+
+ .detail {
+ width: 100%;
+
+ p.title {
+ display: block;
+ height: 22px;
+ font-size: 16px;
+ font-weight: 500;
+ color: #333333;
+ line-height: 22px;
+ margin-bottom: 23px;
+ cursor: pointer;
+
+ i {
+ margin-left: 900px;
+ font-size: 12px;
+ color: #999;
+ }
+ }
+
+ ul {
+ display: none;
+
+ &.active {
+ display: block;
+ }
+
+ li {
+ display: block;
+ line-height: 20px;
+ overflow: hidden;
+ padding-top: 8px;
+ box-sizing: border-box;
+ height: 41px;
+
+ &:hover {
+ background: rgba(128, 196, 174, 0.2);
+ color: rgba(128, 196, 174, 1);
+ }
+
+ &::after {
+ .clearfix();
+ }
+
+ p {
+ float: left;
+
+ i {
+ margin-right: 15px;
+ color: @color;
+ font-size: 16px;
+ }
+
+ span {
+ width: 219px;
+ height: 20px;
+ font-size: 14px;
+ font-weight: 400;
+ // line-height: 20px;
+ width: auto;
+ cursor: pointer;
+
+ &.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;
+ }
+ }
+
+
+ &:last-child {
+ float: right;
+ // font-family: PingFangSC-Semibold, PingFang SC;
+ }
+ }
+ }
+ }
+
+ }
+
+ .bottom {
+ text-align: center;
+ width: @width;
+ height: 159px;
+ background: #fafafa;
+ line-height: 159px;
+ margin-left: -40px;
+
+ .seeAll {
+ font-size: 22px;
+ font-weight: 600;
+ color: #74C6B3;
+ text-decoration: underline;
+ // line-height: 30px;
+ }
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+
+ &.active {
+ display: block;
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/less/videoPlay.less b/less/videoPlay.less
new file mode 100644
index 0000000..2115a3c
--- /dev/null
+++ b/less/videoPlay.less
@@ -0,0 +1,271 @@
+@import './public.css';
+@import './videoDetail.less';
+@width: 1180px;
+@color: #80C4AE;
+@title_color: #333;
+@high_color: #fff;
+@font: 16px;
+@fonts: 14px;
+@font_high: #71FFDE;
+@line: #74C6B3;
+@shadow: #dad6d6;
+
+.clearfix {
+ display: block;
+ content: '';
+ clear: both;
+}
+
+.width {
+ width: @width;
+ height: auto;
+ margin: 0 auto;
+}
+
+nav{
+ .main{
+ .user{
+ position: relative;
+ .userlist{
+ width: 122px;
+ height: 269px;
+ background: url('../img/login/jx.png') no-repeat;
+ background-size: cover;
+ position: absolute;
+ top: 35px;
+ right: -15px;
+ display: none;
+ ul{
+ width: 122px;
+ height: 100%;
+ padding-top: 30px;
+ margin-left: 0;
+ li{
+ font-size: 16px;
+ color: #333;
+ line-height: 30px;
+ height: 40px;
+ text-align: center;
+ width: 100%;
+ cursor: pointer;
+ &:hover{
+ background: none;
+ }
+ &:last-child{
+ color: #666;
+ }
+ }
+ }
+ }
+ &:hover{
+ .userlist{
+ display: block;
+ }
+ }
+ }
+ }
+}
+
+main {
+ div.classDetail {
+ .left {
+ margin-right: 14px;
+ position: relative;
+ video {
+ width: 100%;
+ height: 100%;
+ }
+ i{
+ font-size: 30px;
+ position: absolute;
+ bottom: 83px;
+ right: 30px;
+ color: #fff;
+ }
+ }
+
+ .right {
+ padding-top: 20px;
+ margin-left: 0;
+
+ p.top {
+ margin-left: 26px;
+ padding-right: 20px;
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ width: 250px;
+
+ span {
+ display: inline-block;
+ width: 81px;
+ height: 35px;
+ font-weight: 500;
+ line-height: 35px;
+ font-size: 14px;
+ text-align: center;
+ color: #333;
+
+ &.active {
+ color: #fff;
+ background: #80C4AE;
+ border-radius: 4px;
+ }
+ }
+ }
+
+ div.content {
+ width: 300px;
+ height: 525px;
+ overflow: scroll;
+ display: none;
+
+ .list {
+ margin-top: 20px;
+ width: 300px;
+ height: auto;
+
+ p {
+ margin-left: 26px;
+ font-size: 16px;
+ color: #333;
+ line-height: 22px;
+ }
+
+ ul {
+ width: 300px;
+
+ li {
+ cursor: pointer;
+ height: 41px;
+ width: 300px;
+ line-height: 40px;
+ font-size: 14px;
+ padding-left: 26px;
+ color: #333;
+
+ &.active {
+ color: #80C4AE;
+ background: rgba(128, 196, 174, .2);
+
+ span {
+ color: #80C4AE;
+ }
+ }
+
+ span {
+ color: #333;
+ float: left;
+ }
+
+ i {
+ color: #80C4AE;
+ line-height: 37px;
+ float: right;
+ margin-right: 22px;
+ }
+ }
+ }
+ }
+
+ &.active {
+ display: block;
+ }
+
+ textarea {
+ width: 260px;
+ height: 80px;
+ border-radius: 4px;
+ border: 1px solid #E5E5E5;
+ margin-left: 26px;
+ margin-top: 20px;
+ background: #fafafa;
+ outline: none;
+ padding: 5px;
+ }
+
+ 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;
+ }
+
+ ul.comment {
+ width: 260px;
+ margin-left: 26px;
+
+ li {
+ min-height: 86px;
+ border-bottom: 1px solid rgba(0,0,0, .1);
+ p {
+ img {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ margin-right: 10px;
+ }
+
+ span {
+ color: #333;
+ font-size: 14px;
+ &:last-child{
+ float: right;
+ line-height: 35px;
+ }
+ }
+ &:last-child{
+ color: #666;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ width: 100%;
+ height: auto;
+ }
+ }
+ }
+ }
+
+ &:last-child{
+ overflow: hidden;
+ .scroll{
+ height: 375px;
+ overflow: scroll;
+ }
+ }
+ }
+ }
+ }
+
+ div.classlist {
+
+ // .content{
+ .detail {
+ ul {
+ li {
+ p {
+ span.title {
+ width: 320px;
+ display: inline-block;
+ }
+
+ span.hasStudy {
+ width: 46px;
+ height: 22px;
+ background: #80C4AE;
+ border-radius: 4px;
+ padding: 3px 5px 3px;
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
+
+ // }
+ }
+}
\ No newline at end of file
diff --git a/pages/course.html b/pages/course.html
new file mode 100644
index 0000000..a378a1e
--- /dev/null
+++ b/pages/course.html
@@ -0,0 +1,189 @@
+
+
+
+
+
+
+
+
账户设置
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+ 课程中心
+
+
+
+ - 我的课程
+ - 我的练习
+
+
+ -
+
+ 订单中心
+
+
+
+ - 我的订单
+
+
+ -
+
+ 资金管理
+
+
+
+ - 我的钱包
+ - 优惠券
+
+
+ -
+
+ 个人中心
+
+
+
+ - 账户设置
+ - 我的消息
+ - 我的评价
+
+
+
+
+
+
+ 账户设置
+ >
+ 我的课程
+
+
+
+
+ -
+
+
+
+
1100人在学习
+
+
+
+ {{d.courseName}}
+ 23课时
+
+
去学习
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/loginAndRegister/login.html b/pages/loginAndRegister/login.html
new file mode 100644
index 0000000..134c73d
--- /dev/null
+++ b/pages/loginAndRegister/login.html
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+
登录
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 忘记密码
+
+ 还没有账号?
+ 点击注册
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/loginAndRegister/register.html b/pages/loginAndRegister/register.html
new file mode 100644
index 0000000..8fa8b95
--- /dev/null
+++ b/pages/loginAndRegister/register.html
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+
注册
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/online.html b/pages/online.html
new file mode 100644
index 0000000..e7c31e1
--- /dev/null
+++ b/pages/online.html
@@ -0,0 +1,288 @@
+
+
+
+
+
+
+
+
视频详情
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
1100人在学习
+
+
+
+ {{sc.courseName}}
+ 23课时
+
+
免费学习
+
+
+
+
+
+
+
+
+ - 1
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ - 7
+ - 8
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 忘记密码
+
+ 还没有账号?
+ 点击注册
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/search.html b/pages/search.html
new file mode 100644
index 0000000..6e7850d
--- /dev/null
+++ b/pages/search.html
@@ -0,0 +1,268 @@
+
+
+
+
+
+
+
+
搜索页面
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
1100人在学习
+
+
+
+ {{sc.courseName}}
+ 23课时
+
+
免费学习
+
+
+
+
+
+
+
+
+ - 1
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ - 7
+ - 8
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 忘记密码
+
+ 还没有账号?
+ 点击注册
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/userSeting.html b/pages/userSeting.html
new file mode 100644
index 0000000..d86f22f
--- /dev/null
+++ b/pages/userSeting.html
@@ -0,0 +1,197 @@
+
+
+
+
+
+
+
+
账户设置
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+ 课程中心
+
+
+
+ - 我的课程
+ - 我的练习
+
+
+ -
+
+ 订单中心
+
+
+
+ - 我的订单
+
+
+ -
+
+ 资金管理
+
+
+
+ - 我的钱包
+ - 优惠券
+
+
+ -
+
+ 个人中心
+
+
+
+ - 账户设置
+ - 我的消息
+ - 我的评价
+
+
+
+
+
+
+ 账户设置
+ >
+ 个人中心
+
+
+ 学员档案
+ 安全设置
+
+
+
+
+
+
+
+
+ 学习阶段
+
+ 编辑学习阶段与兴趣标签,获得更好的课程推荐
+
+
+ 保存
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/videoDetail.html b/pages/videoDetail.html
new file mode 100644
index 0000000..248d713
--- /dev/null
+++ b/pages/videoDetail.html
@@ -0,0 +1,287 @@
+
+
+
+
+
+
+
+
视频详情
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 首页
+ >
+ 同步课堂
+ >
+ {{course.courseName}}
+
+
+
+
+
+
+
+
+
+
{{course.courseName}}
+
+ - {{course.descs}}
+ - 开课时间:{{course.createTime}}
+ - 有效期至:2022年12月20日
+ - 距报名截止仅剩
+ -
+ 142天
+ 23时
+ 32分
+ 45秒
+
+ -
+ ¥{{course.coursePrice}}
+ 免费试学
+
+ -
+ ¥{{course.coursePrice}}单独购买
+ ¥{{course.coursePrice}}拼团
+
+
+
+
+
+
+
+
+ 课程目录课程详情
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/videoPlay.html b/pages/videoPlay.html
new file mode 100644
index 0000000..732275b
--- /dev/null
+++ b/pages/videoPlay.html
@@ -0,0 +1,299 @@
+
+
+
+
+
+
+
+
视频详情
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 首页
+ >
+ 同步课堂
+ >
+ 视频详情
+
+
+
+
+
+
+
+
+
+
+
+
+ 目录讨论
+
+
+
+
{{course.courseName}}
+
+
+
+
+
+
+
+
+
+
+ 课程目录课程详情
+
+
+
+
+
{{course.courseName}}
+
+
+
+
+ 点击展开查看全部
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 忘记密码
+
+ 还没有账号?
+ 点击注册
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/utils/utils.js b/utils/utils.js
new file mode 100644
index 0000000..27dd1e9
--- /dev/null
+++ b/utils/utils.js
@@ -0,0 +1,437 @@
+var utils = function () {
+ //属于标准浏览器 不成立就是在IE6~8
+ var flag = "getComputedStyle" in window;
+
+ //类数组转为数组
+ function likeArray(likeData) {
+ if (flag) {
+ return Array.prototype.slice.call(likeData, 0);
+ } else {
+ var arr = [];
+ for (var i = 0; i < likeData.length; i++) {
+ arr[i] = likeData[i];
+ }
+ return arr;
+ }
+ }
+
+ /*
+ 获取经过浏览器渲染的样式
+ @param eleObj:元素对象
+ @param attr:样式属性
+ @returns 样式值
+ */
+ function getStyle(eleObj, attr) {
+ return eleObj.currentStyle ? eleObj.currentStyle[attr] : window.getComputedStyle(eleObj)[attr];
+ }
+
+ /*
+ 简单的匀速运动
+ @param eleObj:元素对象
+ @param attr:样式属性
+ @param step:步长
+ @param target:目标值
+ @param interval:时间间隔
+ */
+ function move(eleObj, attr, step, target, interval) {
+ window.clearInterval(eleObj.timer);
+ step = parseFloat(getStyle(eleObj, attr)) < target ? step : -step;
+ eleObj.timer = window.setInterval(function () {
+ var speed = parseFloat(getStyle(eleObj, attr)) + step;
+ if ((speed >= target && step > 0) || (speed <= target && step < 0)) {
+ speed = target;
+ window.clearInterval(eleObj.timer);
+ }
+ eleObj.style[attr] = speed + 'px';
+
+ }, interval);
+ }
+
+ /*
+ 生成n-m之间的随机数
+ @param n:起始值 number
+ @param attr:终值 number
+ @returns 随机数值 number
+ */
+
+ function getRandomNumber(n, m) {
+ if (n > m) {
+ var temp;
+ temp = n;
+ n = m;
+ m = temp;
+ }
+ return Math.round(Math.random() * (m - n) + n);
+ }
+
+
+ /*
+ 补零
+ @param time:时间
+ @returns 补零后的字符串
+ */
+ function zero(time) {
+ return time < 10 ? "0" + time : time;
+ }
+
+
+ /*
+ 冒泡排序:对数组进行排序
+ @param arr:数组
+ @param bool:布尔值 true:升序 false:降序
+ @returns arr
+ */
+ function bubbleSort(arr, bool) {
+ var flag = false;
+ for (var i = 0; i < arr.length - 1; i++) {
+ for (var j = 0; j < arr.length - 1 - i; j++) {
+ if (bool ? arr[j] > arr[j + 1] : arr[j] < arr[j + 1]) {
+ var temp;
+ temp = arr[j];
+ arr[j] = arr[j + 1];
+ arr[j + 1] = temp;
+ flag = true;
+ }
+ }
+ if (flag) {
+ flag = false;
+ } else {
+ break;
+ }
+ }
+ return arr;
+ }
+
+
+ /*
+ 快速排序:对数组进行排序
+ @param arr:数组
+ @returns arr
+ */
+ function quickSort(arr) {
+ if (arr.length <= 1) {
+ return arr;
+ }
+ var point = Math.floor(arr.length / 2);
+ var pointValue = arr.splice(point, 1)[0];
+ var left = [],
+ right = [];
+ for (var i = 0; i < arr.length; i++) {
+ var cur = arr[i];
+ cur < pointValue ? left.push(cur) : right.push(cur);
+ }
+ return quickSort(left).concat(pointValue, quickSort(right));
+ }
+
+
+
+ /*
+ 数组去重:对数组进行去重
+ @param arr:数组
+ @returns arr
+ */
+ function arrNoRepeat(arr) {
+ var obj = {};
+ for (var i = 0; i < arr.length; i++) {
+ var cur = arr[i];
+ if (obj[cur] === cur) {
+ arr[i] = arr[arr.length - 1];
+ arr.length--;
+ i--;
+ continue;
+ }
+ obj[cur] = cur;
+ }
+ return arr;
+ }
+
+
+ /*
+ 获取所有直接子元素(不传递标签名 就获取所有的直接子元素 传递进行过滤)
+ @param eleObj:元素对象
+ @param tagName:标签名
+ @returns array
+ */
+ function getChildren(eleObj, tagName) {
+ var nodes = eleObj.childNodes,
+ arr = []; //存储获取到元素
+ for (var i = 0; i < nodes.length; i++) {
+ var curNode = nodes[i];
+ // 不传递标签名 就获取所有的直接子元素 传递进行过滤
+ if (typeof tagName === "undefined") {
+ if (curNode.nodeType === 1) {
+ arr.push(curNode);
+ }
+ } else {
+
+ if ((curNode.nodeType === 1) && (curNode.nodeName.toUpperCase() === tagName.toUpperCase())) {
+ arr.push(curNode);
+ }
+ }
+ }
+ return arr;
+ }
+
+
+ /*
+ 获取第一个子元素
+ @param eleObj:元素对象
+ @returns eleObj
+ */
+
+ function firtChild(eleObj) {
+ return getChildren(eleObj).length != 0 ? getChildren(eleObj)[0] : null;
+ }
+
+
+ /*
+ 获取第最后一个子元素
+ @param eleObj:元素对象
+ @returns eleObj
+ */
+
+ function lastChild(eleObj) {
+ return getChildren(eleObj).length != 0 ? getChildren(eleObj)[getChildren(eleObj).length - 1] : null;
+ }
+
+
+ /*
+ 获取上一个哥哥元素
+ @param eleObj:元素对象
+ @returns eleObj
+ */
+ function prev(eleObj) {
+ var pre = eleObj.previousSibling;
+ while (pre && pre.nodeType != 1) {
+ pre = pre.previousSibling;
+ }
+ return pre;
+ }
+
+
+ /*
+ 获取下一个弟弟元素
+ @param eleObj:元素对象
+ @returns eleObj
+ */
+ function next(eleObj) {
+ var nex = eleObj.nextSibling;
+ while (nex && nex.nodeType != 1) {
+ nex = nex.nextSibling;
+ }
+ return nex;
+ }
+
+
+ /*
+ 获取所有的哥哥元素
+ @param eleObj:元素对象
+ @returns array
+ */
+ function prveAll(eleObj) {
+ var pre = prev(eleObj); //获取当前对象的哥哥元素
+ var arr = []; //返回数组的集合
+ while (pre) {
+ arr.unshift(pre);
+ pre = prev(pre);
+ }
+
+ return arr;
+ }
+
+
+ /*
+ 获取所有的弟弟元素
+ @param eleObj:元素对象
+ @returns array
+ */
+ function nextAll(eleObj) {
+ var nex = next(eleObj); //获取当前对象的哥哥元素
+ var arr = []; //返回数组的集合
+ while (nex) {
+ arr.push(nex);
+ nex = next(nex);
+ }
+ return arr;
+ }
+
+
+ /*
+ 获取上一个哥哥元素及下一个弟弟元素
+ @param eleObj:元素对象
+ @returns array
+ */
+ function siblings(eleObj) {
+ var arr = [];
+ prev(eleObj) ? arr.push(prev(eleObj)) : null;
+ next(eleObj) ? arr.push(next(eleObj)) : null;
+
+ return arr;
+ }
+
+
+ /*
+ 所有所有的相邻元素
+ @param eleObj:元素对象
+ @returns array
+ */
+ function siblingsAll(eleObj) {
+ return prveAll(eleObj).concat(nextAll(eleObj));
+ }
+
+
+ //DOM2事件绑定兼容处理
+ function eventBind(eleObj, eventType, callBack, boolean) {
+ if (eleObj.addEventListener) {
+ eleObj.addEventListener(eventType, callBack, boolean);
+ } else {
+ eleObj.attachEvent('on' + eventType, callBack);
+ }
+ }
+
+
+ // DOM2事件取消事件绑定兼容处理
+ function unEventBind(eleObj, eventType, callBack, boolean) {
+ if (eleObj.removeEventListener) {
+ eleObj.removeEventListener(eventType, callBack, boolean);
+ } else {
+ eleObj.detachEvent('on' + eventType, callBack);
+ }
+ }
+
+
+ // 设置或获取浏览器的盒子模型 不传值就是获取 传递了就设置
+ function win(attr, value) {
+ if (typeof value === "undefined") {
+ return document.documentElement[attr] || document.body[attr];
+ } else {
+ document.documentElement[attr] = document.body[attr] = value;
+ }
+ }
+
+
+ /*
+ 减速运动
+ @param eleObj:元素对象
+ @param styleObj:样式对象集合 属性:目标值
+ @param interval:时间间隔
+ @param callBack:回调函数
+ */
+ function bufferMove(eleObj, styleObj, interval, callBack) {
+ window.clearInterval(eleObj.timer);
+ eleObj.timer = window.setInterval(function () {
+ var flag = true; //默认值是true
+ for (var styleAttr in styleObj) {
+ var cur = styleAttr === "opacity" ? parseFloat(getStyle(eleObj, styleAttr) * 100) :
+ parseFloat(
+ getStyle(
+ eleObj, styleAttr));
+ var speed = (styleObj[styleAttr] - cur) / 10;
+ speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
+
+ if (cur !== styleObj[styleAttr]) {
+ flag = false;
+ }
+
+ if (styleAttr === "opacity") {
+ eleObj.style.opacity = (cur + speed) / 100;
+ eleObj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
+ } else {
+ eleObj.style[styleAttr] = (cur + speed) + 'px';
+ }
+ }
+
+ if (flag) {
+ window.clearInterval(eleObj.timer);
+ callBack && callBack.call(eleObj);
+ }
+ }, interval);
+ }
+
+
+
+ /*
+ className:类名
+ context:上下文
+ return 数组
+ */
+ function getClass(className, context) {
+ context = context || document;
+
+ var arr = [];
+ if (flag) {
+ var likeArrays = context.getElementsByClassName(className);
+ return likeArray(likeArrays);
+ } else {
+ // 获取所有的HTML元素
+ var curEles = document.getElementsByTagName("*");
+ for (var i = 0; i < curEles.length; i++) {
+ if (curEles[i].className === className) {
+ arr.push(curEles[i]);
+ }
+ }
+ return arr;
+ }
+ }
+
+
+
+ //->hasClass:验证当前元素中是否包含className这个样式类名
+ function hasClass(curEle, className) {
+ var reg = new RegExp("(^| +)" + className + "( +|$)");
+ return reg.test(curEle.className);
+ }
+
+
+
+ //->addClass:给元素增加样式类名
+ function addClass(curEle, className) {
+ var ary = className.replace(/(^ +| +$)/g, "").split(/ +/g);
+ for (var i = 0, len = ary.length; i < len; i++) {
+ var curName = ary[i];
+ if (!this.hasClass(curEle, curName)) {
+ curEle.className += " " + curName;
+ }
+ }
+ }
+
+ //->removeClass:给元素移除样式类名
+ function removeClass(curEle, className) {
+ var ary = className.replace(/(^ +| +$)/g, "").split(/ +/g);
+ for (var i = 0, len = ary.length; i < len; i++) {
+ var curName = ary[i];
+ if (this.hasClass(curEle, curName)) {
+ var reg = new RegExp("(^| +)" + curName + "( +|$)", "g");
+ curEle.className = curEle.className.replace(reg, " ");
+ }
+ }
+ }
+
+
+ return {
+ likeArray: likeArray,
+ getStyle: getStyle,
+ move: move,
+ getRandomNumber: getRandomNumber,
+ zero: zero,
+ bufferMove:bufferMove,
+ getClass: getClass,
+ win: win,
+ arrNoRepeat: arrNoRepeat,
+ hasClass: hasClass,
+ addClass: addClass,
+ removeClass: removeClass,
+ quickSort: quickSort,
+ bubbleSort: bubbleSort,
+ eventBind: eventBind,
+ unEventBind: unEventBind,
+ siblingsAll: siblingsAll,
+ siblings: siblings,
+ nextAll: nextAll,
+ next: next,
+ prev: prev,
+ prveAll: prveAll,
+ lastChild: lastChild,
+ firtChild: firtChild
+ }
+}();
\ No newline at end of file
diff --git a/uxue-edu-web001.iml b/uxue-edu-web001.iml
new file mode 100644
index 0000000..80cc739
--- /dev/null
+++ b/uxue-edu-web001.iml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/video/05_tabbar.mp4 b/video/05_tabbar.mp4
new file mode 100644
index 0000000..9a37c48
Binary files /dev/null and b/video/05_tabbar.mp4 differ