修改 触摸反馈

src/res/tpl/IndexScene.tpl

@@ -21,6 +21,7 @@
 				</div>
 				<div id="fun-resource" class="fun-item" fe-role="Widget">
 					<img src="./../../stage/index/assets/img/IndexScene/entrance_resource.png"/>
+					<div class="wave waves-effect"></div>
 				</div>
 				<div id="fun-periphery" class="fun-item" fe-role="Widget">
 					<img src="./../../stage/index/assets/img/IndexScene/entrance_periphery.png"/>

src/stage/index/index.html

@@ -56,6 +56,8 @@
 	<script src="../../lib/js/sha1.min.js"></script>
 	<script src="../../lib/js/md5.min.js"></script>
 	<script src="../../lib/js/hls.js"></script>
+	<!--水波纹插件-->
+	<script src="../../lib/js/waves.min.js"></script>
 	<script>
 		var ts = '201802051925';
 

src/stage/index/index.less

@@ -11,6 +11,7 @@ body {
 
 /*@import '../../lib/css/marquee.css';*/
 @import '../../lib/css/keyPanel.css';
+@import '../../lib/css/waves.min.css';
 @import './style/SplashScene.less';
 @import './style/LoginScene.less';
 @import './style/IndexScene.less';

src/stage/index/style/BuyConfirmScene.less

@@ -48,7 +48,7 @@
 			font-size: 0.48rem;
 
 			&.fe-focus {
-				.after-focus(@borderSize; #ff5050);
+				//.after-focus(@borderSize; #ff5050);
 			}
 		}
 

src/stage/index/style/CLScene.less

@@ -80,7 +80,7 @@
             border: solid unit(@borderSize, rem) transparent;
             border-radius: 0.5rem;
             &.fe-focus {
-                .after-focus(@borderSize; #ffe100);
+              //  .after-focus(@borderSize; #ffe100);
             }
             img {
                 width: 0.78rem;
@@ -139,7 +139,7 @@
             //自定义周边商品item在当前scene的focus样式
             &.fe-focus .course-item-frame,
             &.fe-focus .goods-item-frame {
-                .after-focus(@borderSize; #ffe100);
+               // .after-focus(@borderSize; #ffe100);
             }
         }
 

src/stage/index/style/CourseScene.less

@@ -1,4 +1,6 @@
 @import './component/GoodsItem.less';
+@import './IndexScene.less';
+
 
 .lesson-selected {
 	.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
@@ -91,7 +93,7 @@
 					}
 
 					&.fe-focus {
-						.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+						//.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 					}
 				}
 
@@ -107,7 +109,7 @@
 					}
 
 					&.fe-focus {
-						.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+						//.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 					}
 				}
 
@@ -123,7 +125,7 @@
 					}
 
 					&.fe-focus {
-						.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+						//.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 					}
 				}
 
@@ -143,7 +145,7 @@
 					}
 
 					&.fe-focus {
-						.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+						//.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 					}
 				}
 
@@ -170,9 +172,8 @@
 					&::after {
 						content: '购物车';
 					}
-
 					&.fe-focus {
-						.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+						//.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 					}
 				}
 			}
@@ -211,9 +212,6 @@
 					font-size: .48rem;
 					color: #404040;
 					padding: 0 0.4rem;
-					&.fe-focus {
-						.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
-					}
 					.free-flag {
 						width: .86rem;
 						height: .86rem;
@@ -223,6 +221,19 @@
 						background: url('assets/img/CourseScene/icon_free.png') no-repeat center;
 						background-size: cover;
 					}
+					&::after {
+						content: " ";
+						display: block;
+						position: absolute;
+						left: 0;
+						top: -100%;
+						width: 100%;
+						height: 300%;
+						background-color: transparent;
+					}
+					&:active::after {
+						animation: circle-opacity .3s;
+					}
 				}
 
 				.download-btn-lesson {}
@@ -240,7 +251,7 @@
 					background-repeat: no-repeat;
 					background-size: cover;
 					&.fe-focus {
-						.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+					//	.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 					}
 				}
 
@@ -286,7 +297,7 @@
 						}
 
 						&.fe-focus {
-							.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+						//	.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 						}
 					}
 
@@ -304,7 +315,7 @@
 						background-repeat: no-repeat;
 						background-size: cover;
 						&.fe-focus {
-							.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+						//	.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 						}
 					}
 
@@ -405,7 +416,7 @@
 
 				&.fe-focus {
 					padding-top: .1rem;
-					.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+					//.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 				}
 
 				p {
@@ -426,7 +437,7 @@
 				background-size: cover;
 
 				&.fe-focus {
-					.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+				//	.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 				}
 
 				&.renewal-fee {
@@ -469,7 +480,7 @@
 					}
 
 					&.fe-focus .goods-item-frame {
-						.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
+					//	.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 					}
 				}
 			}

src/stage/index/style/DelConfirmScene.less

@@ -49,7 +49,7 @@
 			font-size: 0.48rem;
 
 			&.fe-focus {
-				.after-focus(@borderSize; #ff5050);
+				//.after-focus(@borderSize; #ff5050);
 			}
 		}
 
@@ -67,7 +67,7 @@
 			font-size: 0.48rem;
 
 			&.fe-focus {
-				.after-focus(@borderSize; #ff5050);
+				//.after-focus(@borderSize; #ff5050);
 			}
 		}
 	}

src/stage/index/style/DownloadScene.less

@@ -179,8 +179,8 @@
 				}
 
 				&.fe-focus {
-					border: .05rem solid #ffe100;
-					border-radius: .25rem;
+			//		border: .05rem solid #ffe100;
+			//		border-radius: .25rem;
 				}
 			}
 
@@ -193,8 +193,8 @@
 					width: 100%;
 				}
 				&.fe-focus {
-					border: .05rem solid #ffe100;
-					border-radius: .25rem;
+					//border: .05rem solid #ffe100;
+					//border-radius: .25rem;
 				}
 			}
 		}

src/stage/index/style/GlobalGoodDetail.less

@@ -18,7 +18,7 @@
             border: solid unit(@borderSize, rem) transparent;
             border-radius: 0.5rem;
             &.fe-focus {
-                .after-focus(@borderSize; #ffe100);
+               // .after-focus(@borderSize; #ffe100);
             }
             img {
                 width: 0.78rem;
@@ -101,7 +101,7 @@
                     border: solid unit(@borderSize, rem) transparent;
                     border-radius: 0.24rem;
                     &.fe-focus {
-                        .after-focus(@borderSize; #ffe100);
+                       // .after-focus(@borderSize; #ffe100);
                     }
                     img {
                         width: 2.77rem;
@@ -143,7 +143,7 @@
                 margin: 0.16rem 0.5rem 0 0;
                 padding: 0.03rem;
                 &.fe-focus {
-                    .after-focus(@borderSize; #ffe100);
+                   // .after-focus(@borderSize; #ffe100);
                 }
                 img {
                     position: inherit;

src/stage/index/style/IndexScene.less

@@ -1,5 +1,52 @@
 @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: 100%;
@@ -36,6 +83,7 @@
 			padding-right: 0.3rem;
 			margin-right: -0.3rem;
 			text-align: right;
+			position: relative;
 
 			.user-info-text {
 				float: left;
@@ -60,15 +108,6 @@
 					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;
-				}
-			}
 		}
 	}
 
@@ -91,22 +130,17 @@
 				overflow: hidden;
 
 				.history-item {
+					position: relative;
 					display: inline-block;
 					width: 20%;
 					height: 100%;
 					padding: 0 .06rem;
-
 					.course-item-frame {
 						color: #303030;
 						.course-item-frame;
 					}
-
-					&.fe-focus .course-item-frame {
-						.after-focus(@borderSize; #ffe100);
-					}
 				}
 			}
-
 			.fun-wrapper {
 				width: 100%;
 				height: 1.8rem;
@@ -114,13 +148,13 @@
 				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;
@@ -130,14 +164,23 @@
 						&:first-child {
 							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;
 					}
+
 				}
 			}
 		}

src/stage/index/style/LessonScene.less

@@ -164,7 +164,7 @@
 				*/
 
 				&.fe-focus {
-					.after-focus(@borderSize; #ffe100);
+				//	.after-focus(@borderSize; #ffe100);
 				}
 			}
 
@@ -199,7 +199,7 @@
 				*/
 
 				&.fe-focus {
-					.after-focus(@borderSize; #ffe100);
+				//	.after-focus(@borderSize; #ffe100);
 				}
 			}
 
@@ -215,7 +215,7 @@
 				color: #ffffff;
 
 				&.fe-focus {
-					.after-focus(@borderSize; #ffe100);
+				//	.after-focus(@borderSize; #ffe100);
 				}
 			}
 
@@ -231,7 +231,7 @@
 				background-repeat: no-repeat;
 
 				&.fe-focus {
-					.after-focus(@borderSize; #ffe100);
+				//	.after-focus(@borderSize; #ffe100);
 				}
 			}
 

src/stage/index/style/LoginScene.less

@@ -117,7 +117,7 @@
 
 				&.fe-focus {
 					background: #2973d7;
-					.after-focus(@outLineSize; #ff5a00; 0; #ff5a00);
+				//	.after-focus(@outLineSize; #ff5a00; 0; #ff5a00);
 				}
 			}
 		}
@@ -190,7 +190,7 @@
 			}
 
 			&.fe-focus .key-icon {
-				.after-focus(@outLineSize; #ff5a00; 0; #ff5a00);
+			//	.after-focus(@outLineSize; #ff5a00; 0; #ff5a00);
 			}
 		}
 	}

src/stage/index/style/RepeatLoginScene.less

@@ -50,7 +50,7 @@
 			}
 
 			&.fe-focus {
-				.after-focus(@borderSize; #ffe100);
+				//.after-focus(@borderSize; #ffe100);
 				border-radius: .5rem;
 			}
 		}

src/stage/index/style/ShopCartScene.less

@@ -80,7 +80,7 @@
 				}
 
 				&.fe-focus .goods-item-frame, &.fe-focus .course-item-frame{
-					.after-focus(@borderSize; #ffe100);
+				//	.after-focus(@borderSize; #ffe100);
 				}
 			}
 
@@ -96,7 +96,7 @@
 				background-size: cover;
 
 				&.fe-focus {
-					.after-focus(@borderSize; #ffe100);
+				//	.after-focus(@borderSize; #ffe100);
 				}
 			}
 		}
@@ -114,7 +114,7 @@
 		background-size: cover;
 
 		&.fe-focus {
-			.after-focus(@borderSize; #ffe100);
+			//.after-focus(@borderSize; #ffe100);
 		}
 	}
 }

src/stage/index/style/TerminalScene.less

@@ -55,7 +55,7 @@
 		border-radius: .3rem;
 
 		&.fe-focus {
-			.after-focus(@borderSize; #ffe100);
+			//.after-focus(@borderSize; #ffe100);
 		}
 	}
 }