|
@@ -1,31 +1,72 @@
|
|
@import './component/CourseItem.less';
|
|
@import './component/CourseItem.less';
|
|
|
|
|
|
|
|
+@keyframes circle-opacity{
|
|
|
|
+ 0% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(207,209,209,.3) 10%, rgba(207,209,209,.35) 20%,rgba(0,0,0,0) 20%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+ 25% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(207,209,209,.4) 20%, rgba(207,209,209,.45) 40%,rgba(0,0,0,0) 40%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+ 50% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(207,209,209,.4) 30%, rgba(207,209,209,.4) 60%,rgba(0,0,0,0) 60%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+ 70% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(186,188,188,.3) 60%, rgba(186,188,188,.35) 70%,rgba(0,0,0,0) 70%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(186,188,188,.3) 70%, rgba(186,188,188,.35) 100%,rgba(0,0,0,0) 100%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@keyframes circle-opacity-fun{
|
|
|
|
+ 0% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(0,0,0,.3) 10%, rgba(0,0,0,.35) 20%,rgba(0,0,0,0) 20%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+ 25% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(0,0,0,.4) 20%, rgba(0,0,0,.45) 40%,rgba(0,0,0,0) 40%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+ 50% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(0,0,0,.4) 30%, rgba(0,0,0,.4) 60%,rgba(0,0,0,0) 60%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+ 70% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(0,0,0,.3) 60%, rgba(0,0,0,.35) 70%,rgba(0,0,0,0) 70%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ background: -webkit-radial-gradient(rgba(0,0,0,.3) 70%, rgba(0,0,0,.35) 100%,rgba(0,0,0,0) 100%); /* Safari 5.1 - 6.0 */
|
|
|
|
+ //background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.2),rgba(0,0,0,.3),rgba(0,0,0,.4),rgba(0,0,0,.5)); /* 标准的语法(必须放在最后) */
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
#IndexScene {
|
|
#IndexScene {
|
|
position: absolute;
|
|
position: absolute;
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- padding: 0.05rem 1.2rem 0;
|
|
|
|
-
|
|
|
|
- .index-bg {
|
|
|
|
|
|
+ width: unit(@designWidth, rem);
|
|
|
|
+ height: unit(@designHeight, rem);
|
|
|
|
+ padding: 0.05rem 1.2rem .5rem;
|
|
|
|
+ background-image: url('assets/img/IndexScene/index_bg.png');
|
|
|
|
+ background-size: cover;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+
|
|
|
|
+ .m-logo{
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 0;
|
|
|
|
- left: 0;
|
|
|
|
- z-index: -1;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- img {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 0;
|
|
|
|
- left: 0;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- }
|
|
|
|
|
|
+ top: 1rem;
|
|
|
|
+ width: 3.62rem;
|
|
|
|
+ height: 1.30rem;
|
|
|
|
+ background-image: url('assets/img/IndexScene/logo.png');
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ background-repeat: no-repeat;
|
|
}
|
|
}
|
|
-
|
|
|
|
.m-header-user{
|
|
.m-header-user{
|
|
height: 0.96rem;
|
|
height: 0.96rem;
|
|
margin-top: 1rem;
|
|
margin-top: 1rem;
|
|
-
|
|
|
|
.user-info {
|
|
.user-info {
|
|
float: right;
|
|
float: right;
|
|
width: auto;
|
|
width: auto;
|
|
@@ -34,6 +75,8 @@
|
|
border-radius: 0.55rem;
|
|
border-radius: 0.55rem;
|
|
padding-left: 0.2rem;
|
|
padding-left: 0.2rem;
|
|
padding-right: 0.3rem;
|
|
padding-right: 0.3rem;
|
|
|
|
+ padding-top: 0.1rem;
|
|
|
|
+ padding-bottom: 0.1rem;
|
|
margin-right: -0.3rem;
|
|
margin-right: -0.3rem;
|
|
text-align: right;
|
|
text-align: right;
|
|
|
|
|
|
@@ -60,28 +103,17 @@
|
|
font-size: 0.36rem;
|
|
font-size: 0.36rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- &.fe-focus {
|
|
|
|
- border: solid unit(@borderSize, rem) #ffe100;
|
|
|
|
- box-shadow: .03rem .03rem unit(0, rem) transparent;
|
|
|
|
- z-index: 9999;
|
|
|
|
- .user-info-icon {
|
|
|
|
- width: .9rem;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
.m-main {
|
|
.m-main {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 8.6rem;
|
|
|
|
|
|
+ height: 7.8rem;
|
|
margin-top: 0.3rem;
|
|
margin-top: 0.3rem;
|
|
- padding: .2rem 0rem .3rem 0rem;
|
|
|
|
|
|
+ padding: .2rem 0rem 0rem 0rem;
|
|
overflow-y: hidden;
|
|
overflow-y: hidden;
|
|
-
|
|
|
|
.scroll-list {
|
|
.scroll-list {
|
|
width: 100%;
|
|
width: 100%;
|
|
- padding-bottom: 0.5rem;
|
|
|
|
|
|
+ padding-bottom: 0.3rem;
|
|
|
|
|
|
.history-wrapper {
|
|
.history-wrapper {
|
|
font-size: 0;
|
|
font-size: 0;
|
|
@@ -91,22 +123,17 @@
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
|
|
.history-item {
|
|
.history-item {
|
|
|
|
+ position: relative;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
width: 20%;
|
|
width: 20%;
|
|
height: 100%;
|
|
height: 100%;
|
|
padding: 0 .06rem;
|
|
padding: 0 .06rem;
|
|
-
|
|
|
|
.course-item-frame {
|
|
.course-item-frame {
|
|
color: #303030;
|
|
color: #303030;
|
|
.course-item-frame;
|
|
.course-item-frame;
|
|
}
|
|
}
|
|
-
|
|
|
|
- &.fe-focus .course-item-frame {
|
|
|
|
- .after-focus(@borderSize; #ffe100);
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
.fun-wrapper {
|
|
.fun-wrapper {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 1.8rem;
|
|
height: 1.8rem;
|
|
@@ -114,13 +141,13 @@
|
|
margin-top: .02rem;
|
|
margin-top: .02rem;
|
|
margin-bottom: .65rem;
|
|
margin-bottom: .65rem;
|
|
font-size: 0;
|
|
font-size: 0;
|
|
-
|
|
|
|
.fun-item {
|
|
.fun-item {
|
|
|
|
+ position: relative;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
width: 20%;
|
|
width: 20%;
|
|
height: 1.8rem + 2 * unit(@borderSize, rem);
|
|
height: 1.8rem + 2 * unit(@borderSize, rem);
|
|
padding: 0 0.11rem - unit(@borderSize, rem);
|
|
padding: 0 0.11rem - unit(@borderSize, rem);
|
|
-
|
|
|
|
|
|
+ overflow: hidden;
|
|
img {
|
|
img {
|
|
margin-left: .22rem;
|
|
margin-left: .22rem;
|
|
height: 1.8rem;
|
|
height: 1.8rem;
|
|
@@ -130,16 +157,31 @@
|
|
&:first-child {
|
|
&:first-child {
|
|
margin-left: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
- &.fe-focus {
|
|
|
|
- .after-focus(@borderSize; #ffe100);
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
-
|
|
|
|
- &.fe-focus img {
|
|
|
|
- .after-focus(@borderSize; #ffe100);
|
|
|
|
|
|
+ //点击触摸反馈样式 响应
|
|
|
|
+ &::after {
|
|
|
|
+ content: " ";
|
|
|
|
+ display: block;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: -100%;
|
|
|
|
+ margin-left: .11rem;
|
|
|
|
+ width: 3.1rem;
|
|
|
|
+ height: 300%;
|
|
|
|
+ background-color: transparent;
|
|
|
|
+ }
|
|
|
|
+ &:active::after {
|
|
|
|
+ animation: circle-opacity .3s;
|
|
}
|
|
}
|
|
|
|
+
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .index_msg {
|
|
|
|
+ font-family: -webkit-pictograph;
|
|
|
|
+ text-align: center;
|
|
|
|
+ color: rgba(255,255,255,.4);
|
|
|
|
+ font-size: .32rem;
|
|
|
|
+ }
|
|
}
|
|
}
|