Browse Source

:zap: 优化下载页按钮样式

zhanghe 6 years ago
parent
commit
6117194a39

+ 10 - 10
src/stage/index/scene/DelConfirmScene.js

@@ -19,17 +19,17 @@ class DelConfirmScene extends scene {
 					cartId: data.cartId,
 					parentScene: data.parentScene,
 				};
-			} else if ('DownloadCollectionScene' == data.parentScene) {
-				delName.innerHTML = `确认删除“${data.title}”吗?`;
-				this.moye.root.reRender();
-				// 默认光标指向取消按钮
-				this.moye.root.getWidgetById('cancle-btn').focus();
-				// 记录下课id
-				this.store = {
-					lessonID: data.lessonID,
-					parentScene: data.parentScene,
-				};
+				return;
 			}
+			delName.innerHTML = `确认删除“${data.title}”吗?`;
+			this.moye.root.reRender();
+			// 默认光标指向取消按钮
+			this.moye.root.getWidgetById('cancle-btn').focus();
+			// 记录下课id
+			this.store = {
+				lessonID: data.lessonID,
+				parentScene: data.parentScene,
+			};
 		});
 	}
 

+ 4 - 6
src/stage/index/scene/DownloadManagerScene.js

@@ -68,11 +68,10 @@ class DownloadManagerScene extends scene {
             <div class="six" >
               <div id="download-btn-wrapper" fe-fole="Switch">
                 <div id="enter-btn-lesson-${rec['lessonID']}" class="download-enter-btn" fe-role="Widget" data-id="${rec['lessonID']}">
-                  <img src="./assets/img/DownloadManagerScene/download_enter_btn.png" class="img-btn"/>
+                  <img src="./assets/img/DownloadScene/download_enter_btn.png" class="img-btn"/>
                 </div>
-                <div class="blank"></div>
                 <div id="del-btn-lesson-${rec['lessonID']}" class="download-del-btn" fe-role="Widget" data-id="${rec['lessonID']}" >
-                  <img src="./assets/img/DownloadManager/download_del_btn.png" class="img-btn"/>
+                  <img src="./assets/img/DownloadScene/download_del_btn.png" class="img-btn"/>
                 </div>
               </div>
             </div>
@@ -106,8 +105,7 @@ class DownloadManagerScene extends scene {
               'storageUsage':150211,
             });
           }
-        */
-
+          */
         let {status, data, error} = CommandBus.execute({type:CMD_TYPE.DOWNLOAD_ALL_LESSON_STATUS_GET, payload:{}});
         let recs = [];
         if (!status && data && data.recs){
@@ -186,7 +184,7 @@ class DownloadManagerScene extends scene {
         if(e.target.con.classList.contains('download-del-btn')){
             let lessonID = e.target.con.dataset.id;
             let title = this.lessonItems[lessonID].lessonName;
-            let parentScene = 'DownloadManager';
+            let parentScene = 'DownloadManagerScene';
             this.showScene(require('./DelConfirmScene.js'), { parentScene, lessonID, title });
         } else if (e.target.con.classList.contains('download-enter-btn')) {
             let lessonID = e.target.con.dataset.id;

+ 17 - 34
src/stage/index/style/DownloadScene.less

@@ -62,7 +62,7 @@
 		.horizon-line {
 			z-index: 0;
 			height:0.82rem;
-			width: 15.24rem;
+			width: 15.6rem;
       		border-bottom: 0.02rem solid #053864;
 			margin: 0 auto;
 			&.first-line{
@@ -112,7 +112,7 @@
 				.right-border;
 			}
 			.six {
-				width:2.5rem;
+				width:2.9rem;
 			}
 		}
 	}
@@ -166,52 +166,35 @@
 			width:2rem;
 		}
 		.six {
-			width:2.5rem;
-			padding-left: 0.1rem;
-
-			.blank {
-				width: 0.2rem;
-			}
-
-			.download-enter-btn{
-				text-align: center;
-				vertical-align: middle;
-				width: 2rem;
-				height: 0.49rem;
-				padding: 0 0;
+			width:2.9rem;
+			text-align: center;
 
-				.img-btn{
+			.download-enter-btn {
+				width: 1.7rem;
+				height: .6rem;
+				border: .05rem solid transparent;
+				.img-btn {
 					height: 100%;
 					width: 100%;
-					margin: 0 0;
 				}
 
 				&.fe-focus {
-					.after-focus(0.03rem; #ffe100; 0; rgba(0,0,0,0.5));
-					border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
-					.img-btn{
-						margin: 0 auto;
-					}
+					border: .05rem solid #ffe100;
+					border-radius: .25rem;
 				}
 			}
 
-			.download-del-btn{
-				text-align: center;
-  				vertical-align:middle;
-				width: 1.25rem;
-				height: 0.49rem;
-				padding: 0 0;
+			.download-del-btn {
+				width: 1rem;
+				height: .6rem;
+				border: .05rem solid transparent;
 				.img-btn{
 					height: 100%;
 					width: 100%;
-					margin: 0 0;
 				}
 				&.fe-focus {
-					.after-focus(0.03rem; #ffe100; 0; rgba(0,0,0,0.5));
-					border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
-					.img-btn{
-						margin: 0 auto;
-					}
+					border: .05rem solid #ffe100;
+					border-radius: .25rem;
 				}
 			}
 		}