Pārlūkot izejas kodu

存在高度待修改问题 修改了部分页面样式

sophieChenyx 6 gadi atpakaļ
vecāks
revīzija
98112aaeeb

+ 1 - 1
src/res/tpl/CLScene.tpl

@@ -1,5 +1,5 @@
 <div id="CLScene" fe-role="Switch">
-	<div class="cl-bg"><img id="CLSceneBG" src="assets/img/CLScene/background.jpg" alt=""></div>
+
     <div id="cl-left-panel">
         <div id="name-text"></div>
         <div id="cl-left-tab-scroll" fe-role="Scroll" fe-cfg="scroll_dir:v">

+ 6 - 2
src/res/tpl/IndexScene.tpl

@@ -1,5 +1,7 @@
 <div id="IndexScene" fe-role="Switch">
-	<div class="index-bg"><img src="assets/img/IndexScene/background.jpg" alt=""></div>
+
+	<div class="m-logo"></div>
+
  	<div class="m-header-user" fe-role="Switch">
 		<div fe-role="Widget" class="user-info" id="user-info">
 			<div class="user-info-text">
@@ -8,7 +10,6 @@
 			</div>
 		</div>
 	</div>
-	<!-- 首页底部的五个入口 -->
 	<div id="index-scroll" class="m-main" fe-role="Scroll" fe-cfg="scroll_dir:v,scroll_duration:0.2,scroll_easing:linear">
 		<div class="scroll-list">
 			<div id="history" class="history-wrapper"></div>
@@ -31,4 +32,7 @@
 			</div>
 		</div>
 	</div>
+	<p class="index_msg">
+		powered by 领教信息
+	</p>
 </div>

+ 8 - 0
src/res/tpl/LoginScene.tpl

@@ -1,5 +1,8 @@
 <div id="LoginScene" fe-role="Switch">
+
+	<!--左侧的输入栏目-->
 	<div class="formBox" fe-role="Switch">
+
 		<div class="form-sid">
 			<div class="form-sid-label">
 				学&nbsp;&nbsp;号
@@ -8,6 +11,7 @@
 				<input id="sid-input" class="form-item" name="sid" type="text" readonly fe-role="Widget"/>
 			</div>
 		</div>
+
 		<div class="form-password">
 			<div class="form-password-label">
 				密&nbsp;&nbsp;码
@@ -16,10 +20,13 @@
 				<input id="password-input" class="form-item" name="password" type="text" readonly fe-role="Widget"/>
 			</div>
 		</div>
+
 		<div class="form-submit">
 			<input class="form-item" type="submit" id="submit-input" value="登  录" fe-role="Widget"/>
 		</div>
 	</div>
+
+	<!--右侧的键盘输入-->
 	<div class="keyborad" fe-role="Switch">
 		<div id="key-1" class="keyborad-item" fe-role="Widget">
 			<div class="key-icon one"></div>
@@ -58,4 +65,5 @@
 			<div class="key-icon enter"></div>
 		</div>
 	</div>
+
 </div>

+ 3 - 1
src/res/tpl/ShopCartScene.tpl

@@ -1,6 +1,8 @@
 <div id="ShopCartScene" fe-role="Switch">
-	<div class="cart-bg"><img id="cart-bg" src="assets/img/ShopCartScene/shop_cart_bg.jpg" alt=""></div>
+
+
 	<p class="cart-name" fe-role="Widget" id="cart-name">购物车</p>
+
 	<div id="cart-empty" class="cart-empty">
 		<p class="empty-text">还没有添加商品</p>
 		<div class="back-icon">

+ 8 - 4
src/res/tpl/TerminalScene.tpl

@@ -1,7 +1,11 @@
 <div id="TerminalScene" fe-role="Switch">
-	<div class="terminal-bg">
-		<img src="assets/img/TerminalScene/background.jpg" alt="">
+	<div class="content">
+		<ul fe-role="Switch" class="terminal-wrapper clearfix" id="terminal-wrapper"></ul>
+		<div class="terminal-quit" id="terminal-quit" fe-role="Widget" fe-cfg="default_focus:yes">
+			退出账号
+		</div>
+		<p class="terminal-remind">
+			按遥控器 <span>返回</span> 键退出此界面
+		</p>
 	</div>
-	<ul fe-role="Switch" class="terminal-wrapper clearfix" id="terminal-wrapper"></ul>
-	<div class="terminal-quit" id="terminal-quit" fe-role="Widget" fe-cfg="default_focus:yes"></div>
 </div>

BIN
src/stage/index/assets/img/CLScene/background.jpg


BIN
src/stage/index/assets/img/CLScene/cl_left.png


BIN
src/stage/index/assets/img/CLScene/name_text.png


BIN
src/stage/index/assets/img/IndexScene/background.jpg


BIN
src/stage/index/assets/img/IndexScene/index_bg.png


BIN
src/stage/index/assets/img/IndexScene/logo.png


BIN
src/stage/index/assets/img/LoginScene/background.png


BIN
src/stage/index/assets/img/LoginScene/left_bg.png


BIN
src/stage/index/assets/img/LoginScene/page_bg.png


BIN
src/stage/index/assets/img/LoginScene/right_bg.png


+ 5 - 5
src/stage/index/scene/TerminalScene.js

@@ -8,11 +8,11 @@ class TerminalScene extends scene {
 	}
 
 	renderTerminalList(dataset) {
-		let stu_no = `<li class="info-item"><div>学号</div>:${dataset.eid.replace(/(\d{4})/g, '$1 ')}</li>`;
-		let cp_name = `<li class="info-item"><div>集团名称</div>:${dataset.merchantName}</li>`;
-		let schoole_name = `<li class="info-item"><div>校区名称</div>:${dataset.name}</li>`;
-		let contact_person = `<li class="info-item"><div>联系人</div>:${dataset.merchantContactName}</li>`;
-		let phone_num = `<li class="info-item"><div>电话</div>:${dataset.merchantContactMobile}</li>`;
+		let stu_no = `<li class="info-item"><span>学号</span>:${dataset.eid.replace(/(\d{4})/g, '$1 ')}</li>`;
+		let cp_name = `<li class="info-item"><span>集团名称</span>:${dataset.merchantName}</li>`;
+		let schoole_name = `<li class="info-item"><span>校区名称</span>:${dataset.name}</li>`;
+		let contact_person = `<li class="info-item"><span>联系人</span>:${dataset.merchantContactName}</li>`;
+		let phone_num = `<li class="info-item"><span>电话</span>:${dataset.merchantContactMobile}</li>`;
 		let list = document.getElementById('terminal-wrapper');
 		list.innerHTML = '';
 		let listHtml = stu_no + cp_name + schoole_name + contact_person + phone_num;

+ 13 - 19
src/stage/index/style/CLScene.less

@@ -5,28 +5,19 @@
 #CLScene {
     position: absolute;
     width: 100%;
-    height: 100%;
-
-  	.cl-bg {
-  		position: absolute;
-  		top: 0;
-  		left: 0;
-  		z-index: -1;
-  		width: 100%;
-  		height: 100%;
-  		img {
-  			position: absolute;
-  			top: 0;
-  			left: 0;
-  			width: 100%;
-  			height: 100%;
-  		}
-  	}
+    height: 10.9rem;
+    background-image: url('assets/img/IndexScene/index_bg.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
 
     #cl-left-panel {
         float: left;
         width: 3.7rem;
-        height: 100%;
+        height: 10.9rem;
+        background-image: url('assets/img/CLScene/cl_left.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+
         #name-text {
             color: #fff;
             font-size: 0.6rem;
@@ -35,6 +26,9 @@
             padding-top: 0.58rem;
             padding-bottom: 0.33rem;
             text-align: center;
+            background-image: url('assets/img/CLScene/name_text.png');
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
         }
         #cl-left-tab-scroll{
             position: relative;
@@ -66,7 +60,7 @@
 
     #cl-right-panel {
         float: right;
-        width: 15.5rem;
+        width: 15.3rem;
         height: 100%;
     }
     .control-panel {

+ 1 - 1
src/stage/index/style/CourseScene.less

@@ -9,7 +9,7 @@
 	top: 0;
 	left: 0;
 	width: 100%;
-	height: 100%;
+	height: 10.9rem;
 	overflow: hidden;
 
 	.course-bg {

+ 1 - 1
src/stage/index/style/DownloadScene.less

@@ -5,7 +5,7 @@
 	top: 0;
 	left: 0;
 	width: 100%;
-	height: 100%;
+	height: 10.9rem;
 	overflow: hidden;
 	text-align: center;
 

+ 19 - 21
src/stage/index/style/IndexScene.less

@@ -3,29 +3,23 @@
 #IndexScene {
 	position: absolute;
 	width: 100%;
-	height: 100%;
-	padding: 0.05rem 1.2rem 0;
+	padding: 0.05rem 1.2rem .5rem;
+	background-image: url('assets/img/IndexScene/index_bg.png');
+	background-size: cover;
+	background-repeat: no-repeat;
 
-	.index-bg {
+	.m-logo{
 		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{
 		height: 0.96rem;
 		margin-top: 1rem;
-
 		.user-info {
 			float: right;
 			width: auto;
@@ -71,14 +65,12 @@
 			}
 		}
 	}
-
 	.m-main {
 		width: 100%;
-		height: 8.6rem;
+		height: 7.6rem;
 		margin-top: 0.3rem;
-		padding: .2rem 0rem .3rem 0rem;
+		padding: .2rem 0rem 0rem 0rem;
 		overflow-y: hidden;
-
 		.scroll-list {
 			width: 100%;
 			padding-bottom: 0.5rem;
@@ -142,4 +134,10 @@
 			}
 		}
 	}
+	.index_msg {
+		font-family: -webkit-pictograph;
+		text-align: center;
+		color: rgba(255,255,255,.4);
+		font-size: .32rem;
+	}
 }

+ 1 - 1
src/stage/index/style/LessonScene.less

@@ -5,7 +5,7 @@
 	left: 0;
 	top: 0;
 	width: 100%;
-	height: 100%;
+	height: 10.9rem;
 	overflow: hidden;
 	background-image: url("assets/img/LessonScene/background.jpg");
 	background-size: 100% 100%;

+ 25 - 24
src/stage/index/style/LoginScene.less

@@ -16,26 +16,26 @@
 	left: 0;
 	top: 0;
 	width: 100%;
-	height: 100%;
+	height: 10.9rem;
 	overflow: hidden;
-	background-color: rgba(0, 0, 0, 0.1);
-	background-image: url('assets/img/LoginScene/background.png');
+	background-image: url('assets/img/LoginScene/page_bg.png');
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
+	padding: .8rem 1.2rem .4rem;
 
 	.formBox {
-		position: absolute;
-		top: 4.57rem;
-		left: 2.2rem;
-		width: 8.3rem;
-		height: 3.7rem;
-
+		width: 10.5rem;
+		height: 8.9rem;
+		padding: 3.7rem 1.1rem 0 1rem;
+		background-image: url('assets/img/LoginScene/left_bg.png');
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
 		.form-sid {
-			position: relative;
-			width: 8.3rem;
+			width: 100%;
 			height: 0.8rem;
 			border-radius: 5rem;
 			border: solid unit(@outLineSize, rem) #d3d3d3;
+			overflow: hidden;
 
 			.form-sid-label {
 				float: left;
@@ -63,13 +63,12 @@
 		}
 
 		.form-password {
-			position: relative;
-			top: 0.3rem;
-			width: 8.3rem;
+			margin-top: 0.3rem;
+			width: 100%;
 			height: 0.8rem;
 			border-radius: 5rem;
 			border: solid unit(@outLineSize, rem) #d3d3d3;
-
+			overflow: hidden;
 			.form-password-label {
 				float: left;
 				width: 1.5rem;
@@ -96,9 +95,8 @@
 		}
 
 		.form-submit {
-			position: relative;
-			top: 1.18rem;
-			width: 8.5rem;
+			margin-top: 1.18rem;
+			width: 100%;
 			height: 0.8rem;
 			background: #fff;
 			margin-left: -0.2rem;
@@ -125,10 +123,15 @@
 
 	.keyborad {
 		position: absolute;
-		top: 3.7rem;
-		left: 12.5rem;
-		width: 4.4rem;
-		height: 5.2rem;
+		top: .8rem;
+		right: 1.2rem;
+		width: 6.9rem;
+		height: 8.9rem;
+		background-image: url('assets/img/LoginScene/right_bg.png');
+		//background-color: rgba(0, 0, 0, 0.1);
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		padding: 3rem 0rem 0rem 1.8rem;
 
 		.keyborad-item {
 			width: 1rem;
@@ -136,7 +139,6 @@
 			float: left;
 			margin: 0 0.45rem 0.3rem 0;
 			.before-focus;
-
 			.key-icon {
 				.keyborad-box;
 
@@ -188,7 +190,6 @@
 					background-image: url('assets/img/LoginScene/enter.png');
 				}
 			}
-
 			&.fe-focus .key-icon {
 				.after-focus(@outLineSize; #ff5a00; 0; #ff5a00);
 			}

+ 16 - 13
src/stage/index/style/ShopCartScene.less

@@ -6,21 +6,12 @@
 	top: 0;
 	left: 0;
 	width: 100%;
-	height: 100%;
+	height: 10.9rem;
 	overflow: hidden;
+	background-image: url('assets/img/IndexScene/index_bg.png');
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
 
-	.cart-bg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: -1;
-		width: 100%;
-		height: 100%;
-		img {
-			width: 100%;
-			height: 100%;
-		}
-	}
 	.cart-name {
 		position: absolute;
 		top: .7rem;
@@ -29,6 +20,18 @@
 		line-height: .5rem;
 		font-size: .36rem;
 		color: #fff;
+		&::before {
+			content: "";
+			display: inline-block;
+			position: absolute;
+			top: -.3rem;
+			left: -1.1rem;
+			width: .8rem;
+			height: .8rem;
+			background-image: url('assets/img/shopCart.png');
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+		}
 	}
 	.cart-empty {
 		position: absolute;

+ 67 - 47
src/stage/index/style/TerminalScene.less

@@ -1,61 +1,81 @@
 #TerminalScene {
 	position: absolute;
 	width: 100%;
-	height: 100%;
-	padding: 0 3.76rem;
-    background-size: cover;
-
-	.terminal-bg {
+	height: 10.9rem ;
+	background-image: url('assets/img/IndexScene/index_bg.png');
+	background-size: cover;
+	background-repeat: no-repeat;
+	overflow: hidden;
+	//居中列表
+	.content {
 		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: -1;
-		width: 100%;
-		height: 100%;
-		img {
-			position: absolute;
-			top: 0;
-			left: 0;
+		width: 13rem;
+		left: 50%;
+		margin-left: -6.5rem;
+		padding-top: 1.78rem;
+		padding-bottom: 1.78rem;
+		font-size: .46rem;
+		.terminal-wrapper {
 			width: 100%;
-			height: 100%;
+			height: 7rem;
+			border-radius: 1rem;
+			padding: .2rem .7rem 0;
+			box-sizing: border-box;
+			background-color: #FFFAEA;
+			.info-item {
+				width: 100%;
+				height: 1.2rem;
+				padding-left: .2rem;
+				line-height: 1.7rem;
+				font-size: .46rem;
+				border-bottom: .05rem dashed #fcca98;
+				span {
+					display: inline-block;
+					width: 2rem;
+					height: 100%;
+					text-align:justify;
+					text-justify:distribute-all-lines;/*ie6-8*/
+					text-align-last:justify;/* ie9*/
+					-moz-text-align-last:justify;/*ff*/
+					-webkit-text-align-last:justify;/*chrome 20+*/
+				}
+				&:nth-last-child(1) {
+					border-bottom: none;
+					line-height: 1.6rem;
+				}
+			}
 		}
-	}
-
-	.terminal-wrapper {
-		margin-top: 2.78rem;
 
-		.info-item {
-			width: 100%;
-			height: .7rem;
-			margin-bottom: .5rem;
-			overflow: hidden;
-			font-size: .46rem;
-			color: #051841;
-			div {
+		.terminal-quit {
+			position: absolute;
+			right: .8rem;
+			top: 2.4rem;
+			width: 2rem;
+			height: .65rem;
+			background-color: #1b79ca;
+			border-radius: .5rem;
+			text-align: center;
+			line-height: .55rem;
+			color: #FFF;
+			font-size: .38rem;
+			&.fe-focus {
+				.after-focus(@borderSize; #ffe100);
+			}
+		}
+		.terminal-remind {
+			margin-top: .5rem;
+			text-align: center;
+			font-size: .35rem;
+			color: #fff;
+			span {
 				display: inline-block;
-				width: 2rem;
-				height: 100%;
-				text-align:justify;
-                text-justify:distribute-all-lines;/*ie6-8*/
-                text-align-last:justify;/* ie9*/
-                -moz-text-align-last:justify;/*ff*/
-                -webkit-text-align-last:justify;/*chrome 20+*/
+				width: 1.3rem;
+				background-color: #fff;
+				border-radius: 1rem;
+				color: #224371;
 			}
 		}
 	}
 
-	.terminal-quit {
-		position: absolute;
-		top: 2.7rem;
-		right: 3.5rem;
-		width: 2rem;
-		height: .65rem;
-		background: url('assets/img/TerminalScene/quit.png') no-repeat center;
-		background-size: 100%;
-		border-radius: .3rem;
 
-		&.fe-focus {
-			.after-focus(@borderSize; #ffe100);
-		}
-	}
 }