|
@@ -0,0 +1,187 @@
|
|
|
|
+@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 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ 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;
|
|
|
|
+ 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{
|
|
|
|
+ height: 0.96rem;
|
|
|
|
+ margin-top: 1rem;
|
|
|
|
+ .user-info {
|
|
|
|
+ float: right;
|
|
|
|
+ width: auto;
|
|
|
|
+ height: auto;
|
|
|
|
+ margin-left: 0.2rem;
|
|
|
|
+ border-radius: 0.55rem;
|
|
|
|
+ padding-left: 0.2rem;
|
|
|
|
+ padding-right: 0.3rem;
|
|
|
|
+ padding-top: 0.1rem;
|
|
|
|
+ padding-bottom: 0.1rem;
|
|
|
|
+ margin-right: -0.3rem;
|
|
|
|
+ text-align: right;
|
|
|
|
+
|
|
|
|
+ .user-info-text {
|
|
|
|
+ float: left;
|
|
|
|
+ width: auto;
|
|
|
|
+ height: 100%;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ padding-top: 0.01rem;
|
|
|
|
+ filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;
|
|
|
|
+
|
|
|
|
+ .terminal-name {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: .4rem;
|
|
|
|
+ line-height: .4rem;
|
|
|
|
+ font-size: 0.48rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .terminal-id {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: .3rem;
|
|
|
|
+ margin-top: .1rem;
|
|
|
|
+ line-height: .3rem;
|
|
|
|
+ font-size: 0.36rem;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .m-main {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 7.8rem;
|
|
|
|
+ margin-top: 0.3rem;
|
|
|
|
+ padding: .2rem 0rem 0rem 0rem;
|
|
|
|
+ overflow-y: hidden;
|
|
|
|
+ .scroll-list {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding-bottom: 0.3rem;
|
|
|
|
+
|
|
|
|
+ .history-wrapper {
|
|
|
|
+ font-size: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 4.98rem;
|
|
|
|
+ padding: 0.2rem 0.09rem 0.2rem;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ .history-item {
|
|
|
|
+ position: relative;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 20%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ padding: 0 .06rem;
|
|
|
|
+ .course-item-frame {
|
|
|
|
+ color: #303030;
|
|
|
|
+ .course-item-frame;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .fun-wrapper {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 1.8rem;
|
|
|
|
+ padding: 0 0.09rem;
|
|
|
|
+ margin-top: .02rem;
|
|
|
|
+ margin-bottom: .65rem;
|
|
|
|
+ font-size: 0;
|
|
|
|
+ .fun-item {
|
|
|
|
+ position: relative;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 20%;
|
|
|
|
+ height: 1.8rem + 2 * unit(@borderSize, rem);
|
|
|
|
+ padding: 0 0.11rem - unit(@borderSize, rem);
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ img {
|
|
|
|
+ margin-left: .22rem;
|
|
|
|
+ height: 1.8rem;
|
|
|
|
+ width: 3.1rem;
|
|
|
|
+ border: solid unit(@borderSize, rem) transparent;
|
|
|
|
+ border-radius: 0.24rem;
|
|
|
|
+ &:first-child {
|
|
|
|
+ margin-left: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ //点击触摸反馈样式 响应
|
|
|
|
+ &::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;
|
|
|
|
+ }
|
|
|
|
+}
|