소스 검색

样式修改

tanxue 5 달 전
부모
커밋
91ae60bde2
1개의 변경된 파일39개의 추가작업 그리고 20개의 파일을 삭제
  1. 39 20
      common/styles/global/pages.scss

+ 39 - 20
common/styles/global/pages.scss

@@ -233,27 +233,25 @@
 	
 //地图页	
 .ezy-study-page{
-	width:100%;height:100vh;
-	background-color: #43c1f6;
+	width:100%;height: 100vh;min-height:1400rpx;background-color: #43c1f6;display: flex;flex-direction: column;
 	background-image: url("@/static/images/study/study-page-bj.png");@include ezy-no-repeat-cover(top);
-	position: relative;min-height: 1394rpx;padding-top:calc(1% + var(--status-bar-height));
-    box-sizing: border-box;z-index: 1;
+	box-sizing: border-box;padding-top:var(--status-bar-height);justify-content: center;position: relative;
 	.study-school-year{
 		width: 237rpx;height: 73rpx;line-height:68rpx;background-image: url("@/static/images/study/school-year-bj.png");
-		color: #fff;@include ezy-no-repeat-cover;padding-left: 75rpx;margin: 1% 0 0 3%; 
-		font-size: 28rpx;font-weight: 600;
+		color: #fff;@include ezy-no-repeat-cover;padding-left: 75rpx;font-size: 28rpx;font-weight: 600;
+		position: absolute;left: 20rpx;top:var(--status-bar-height);
 	}
 	.ezy-study-wrap{
-		width:100%;height:1394rpx;background-image: url("@/static/images/study/study-wrap-bj.png");@include ezy-no-repeat-cover;
-		position: absolute;top: 8%;z-index: 2;
+		width:750rpx;height:1394rpx;background-image: url("@/static/images/study/study-wrap-bj.png");
+		@include ezy-no-repeat-cover;position: relative;margin: 0 auto;
 	}
 	.chapter-box{
 		width: 150rpx;text-align: center;font-weight: 800;color: #5c1a11;
-		margin: 126rpx auto auto 330rpx;font-size: 32rpx;
+		font-size: 32rpx;position: absolute;top:126rpx;left:330rpx;
 	}
 	.chapter-title-box{
 		width: 268rpx;text-align: center;font-weight: 800;color: #fbb030;
-		margin: 10rpx auto auto 270rpx;font-size: 32rpx;
+		font-size: 32rpx;position: absolute;top:180rpx;left:270rpx;
 	}
 	.brand-item{box-sizing: border-box;font-size: 28rpx;color: #fff;text-align: center;font-weight: 600;position: relative;}
 	.brand-content{width: 100%;@include single-line-ellipsis;}
@@ -272,36 +270,57 @@
 	}
 	.brand-item:nth-child(1){
 		width: 298rpx;height: 144rpx;@include ezy-no-repeat-cover;
-		padding: 40rpx 4rpx 10rpx 12rpx;margin: 100rpx 60rpx auto auto;
+		padding: 40rpx 4rpx 10rpx 12rpx;position: absolute;top:320rpx;right:60rpx;
 		background-image: url("@/static/images/catalog/chang-pai-disabled.png");
 		
 	}
 	.brand-item.brand-active:nth-child(1){background-image: url("@/static/images/catalog/chang-pai-active.png");}
 	.brand-item:nth-child(2){
 		width: 231rpx;height: 147rpx;@include ezy-no-repeat-cover;
-		padding: 40rpx 0 10rpx 16rpx;margin: 75rpx auto auto 65rpx;
+		padding: 40rpx 0 10rpx 16rpx;position: absolute;top:540rpx;left:75rpx;
 		background-image: url("@/static/images/catalog/duan-pai-disabled.png");
 	}
 	.brand-item:nth-child(3){
 		width: 298rpx;height: 144rpx;@include ezy-no-repeat-cover;
-		padding: 40rpx 4rpx 10rpx 12rpx;margin: 12rpx 85rpx auto auto;
+		padding: 40rpx 4rpx 10rpx 12rpx;position: absolute;top:692rpx;right:90rpx;
 		background-image: url("@/static/images/catalog/chang-pai-disabled.png");
 	}
 	.brand-item:nth-child(4){
 		width: 185rpx;height: 121rpx;@include ezy-no-repeat-cover;
-		padding: 16rpx 16rpx 10rpx 24rpx;margin: 270rpx 160rpx auto auto;
+		padding: 16rpx 16rpx 10rpx 24rpx;position: absolute;top:1112rpx;right:140rpx;
 		background-image: url("@/static/images/catalog/ceshi-pai.png");
 		.brand-lock{left: 0;top: -30rpx;}
 	}
 	@media (max-height: 800px) {
-		.ezy-study-wrap{top:5%;zoom: 0.92;background-size: 92%;background-position: right;}
-		.chapter-box{margin: 126rpx auto auto 396rpx;}
-		.chapter-title-box{margin: 10rpx auto auto 334rpx;}
+		// 0.92
+		.ezy-study-wrap{width: 690rpx;height: 1284rpx;}
+		.chapter-box{width: 138rpx;top:115rpx;left:304rpx;}
+		.chapter-title-box{width: 247rpx;top:164rpx;left:247rpx;}
+		.brand-item:nth-child(1){top:280rpx;right:32rpx;}
+		.brand-item:nth-child(2){top:480rpx;left:70rpx;}
+		.brand-item:nth-child(3){top:632rpx;right:78rpx;}
+		.brand-item:nth-child(4){top:1016rpx;right:140rpx;}
 	}
 	@media (max-height: 700px) {
-		.ezy-study-wrap{top: 53rpx;zoom: 0.9;background-size: 90%;}
-		.chapter-box{margin: 126rpx auto auto 416rpx;}
-		.chapter-title-box{margin: 10rpx auto auto 350rpx;}
+		//0.88
+		.ezy-study-wrap{width: 644rpx;height: 1198rpx;}
+		.chapter-box{top:106rpx;left:275rpx;}
+		.chapter-title-box{width: 230rpx;top:152rpx;left:230rpx;}
+		.brand-item:nth-child(1){top:245rpx;right:30rpx;}
+		.brand-item:nth-child(2){top:440rpx;left:60rpx;}
+		.brand-item:nth-child(3){top:578rpx;right:50rpx;}
+		.brand-item:nth-child(4){top:942rpx;right:124rpx;}
+	}
+	@media (max-height: 600px) {
+		//0.76
+		min-height:1200rpx;
+		.ezy-study-wrap{width: 577rpx;height: 1072rpx;}
+		.chapter-box{width: 120rpx;top:93rpx;left:252rpx;}
+		.chapter-title-box{width: 210rpx;top:132rpx;left:206rpx;}
+		.brand-item:nth-child(1){top:205rpx;right:4rpx;}
+		.brand-item:nth-child(2){top:380rpx;left:30rpx;}
+		.brand-item:nth-child(3){top:508rpx;right:30rpx;}
+		.brand-item:nth-child(4){top:836rpx;right:104rpx;}
 	}
 }