Browse Source

样式修改

tanxue 3 weeks ago
parent
commit
9d773ab37c
2 changed files with 31 additions and 12 deletions
  1. 6 6
      common/styles/global/components.scss
  2. 25 6
      common/styles/global/pages.scss

+ 6 - 6
common/styles/global/components.scss

@@ -18,26 +18,26 @@
   }
 }
 
-// pad上隐藏 (大于768的) vue中使用
-  @media screen and (min-width: 768px) {
+// pad上隐藏 (大于650的) vue中使用
+  @media screen and (min-width: 650px) {
     .ezy-hidden-pad{display: none!important;}
   }
 
-// 手机上隐藏 (小于768的) vue中使用
-  @media screen and (max-width: 767px) {
+// 手机上隐藏 (小于650的) vue中使用
+  @media screen and (max-width: 649px) {
     .ezy-hidden-phone{display: none!important;}
   }
   
   // 对于Pad上隐藏的元素 ---scss中使用
   @mixin hideOnPad() {
-     @media screen and (min-width: 768px) {
+     @media screen and (min-width: 650px) {
          display: none !important;
        }
   }
   
   // 对于手机上隐藏的元素 ---scss media中使用
   @mixin hideOnPhone() {
-      @media screen and (max-width: 767px) {
+      @media screen and (max-width: 649px) {
           display: none !important;
         }
   }

+ 25 - 6
common/styles/global/pages.scss

@@ -369,7 +369,7 @@
 //  选课
 .ezy-xuanke-page{
 	width: 100%;height: 100vh;display: flex;flex-direction: column;padding-bottom: 100rpx;overflow: hidden;
-		.sx-card-list{overflow-y: auto;flex: 1;padding: 24rpx 0 0;}
+		.sx-card-list{overflow-y: auto;flex: 1;padding: 12rpx 0 0;}
 		.sx-card-box{
 			border-radius: 16rpx;margin: 0 24rpx 32rpx;padding: 32rpx;overflow: hidden;
 			box-shadow: 0 0rpx 6rpx rgba(100, 159, 241, 0.3);position: relative;
@@ -407,9 +407,9 @@
 		.sx-card-box::after{background-image: url("@/static/images/common/xk-mask-img2.png");width: 280rpx;height: 265rpx;bottom: -40rpx;right:-60rpx;}
 	@include mediaSmall() {
 		padding-bottom: 80rpx;
-		.sx-card-list{padding: 6rpx 0 0;}
+		.sx-card-list{padding: 4rpx 0 0;}
 		.sx-card-box{
-			border-radius: 6rpx;margin: 0 24rpx 16rpx;padding: 20rpx 20rpx 24rpx;
+			border-radius: 6rpx;margin: 0 24rpx 20rpx;padding: 20rpx 20rpx 24rpx;
 			box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.3);
 			.card-head-box{
 				.head-img{width: 110rpx;height: 154rpx;border-radius: 8rpx;}
@@ -438,7 +438,7 @@
 		padding-bottom: 180rpx;
 		.sx-card-list{padding: 42rpx 0 0;}
 		.sx-card-box{
-			border-radius: 16rpx;margin: 0 56rpx 40rpx;padding: 46rpx 46rpx 48rpx;
+			border-radius: 16rpx;margin: 0 56rpx 52rpx;padding: 46rpx 46rpx 48rpx;
 			box-shadow: 0 0rpx 12rpx rgba(100, 159, 241, 0.3);
 			.card-head-box{
 				.head-img{width: 240rpx;height: 336rpx;border-radius: 16rpx;}
@@ -1172,16 +1172,35 @@
 .ezy-ziliao-page{
 	width: 100%;height: 100vh;display: flex;flex-direction: column;
 	padding-bottom: 100rpx;box-sizing: border-box;
-	.zl-card-list{width: 100%;display: flex;flex-direction: column;flex: 1;overflow-y: auto;}
+	.zl-card-list{width: 100%;display: flex;flex-direction: column;flex: 1;overflow-y: auto;padding: 12rpx 0 0;}
 	.jstx-card-box{
 		border-radius: 16rpx;margin: 0 24rpx 32rpx;font-size: 0;
 		box-shadow: 0 0rpx 6rpx rgba(100, 159, 241, 0.3);
-		.jstx-card-img{width: 100%;height: 400rpx;}
+		.jstx-card-img{width: 100%;border-radius: 16rpx 16rpx 0 0;}
 		.jstx-card-title{
 			padding: 32rpx 24rpx 42rpx;text-align: center;
 			font-size: 32rpx;color: #333;@include single-line-ellipsis;
 		}
 	}
+	@include mediaSmall() {
+		padding-bottom: 80rpx;
+		.zl-card-list{padding: 4rpx 0 0;}
+		.jstx-card-box{
+			margin: 0 24rpx 20rpx;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.3);
+			.jstx-card-title{padding: 21rpx 16rpx 27rpx;font-size: 22rpx;}
+		}
+	}
+	
+	@include mediaBig() {
+		padding-bottom: 180rpx;
+		.zl-card-list{padding: 42rpx 0 0;}
+		.jstx-card-img{border-radius: 26rpx 26rpx 0 0;}
+		.jstx-card-box{
+			border-radius: 26rpx;margin: 0 38rpx 52rpx;
+			box-shadow: 0 0rpx 10rpx rgba(100, 159, 241, 0.3);
+			.jstx-card-title{padding: 51rpx 38rpx 67rpx;font-size: 54rpx;}
+		}
+	}
 }
 
 // 资料---数学--计算特训题库下载