Browse Source

看视频页面样式改版

tanxue 1 month ago
parent
commit
e62730e384

+ 19 - 11
common/styles/global/pages.scss

@@ -2136,20 +2136,28 @@
 	.ksp-body{
 		position: relative;z-index: 1;margin: 20rpx 0 0;
 	}
-	/* .ksp-video-box{
-		width: 100%;height: 423rpx;
-	} */
+	.ksp-video-box{width: 100%;height: 423rpx;}
 	.ksp-item-list{
-		width: 96%;margin: 0 auto;
-		background-color: #5894f6;
+		width: 95%;margin: 0 auto 32rpx;border-radius: 16rpx;position: relative;
+		background-color: #5894f6;padding: 32rpx 0 1rpx;box-sizing: border-box;
+		overflow: hidden;box-shadow: 0 0rpx 12rpx rgba(100, 159, 241, 0.4);
+	}
+	.ksp-item-list::before{
+		content: '';width: 100%;height: 97rpx;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/xuexi/ksp-item-top-bj.png");
+		position: absolute;left: 0;right: 0;top: 0;z-index: 1;
 	}
+	.item-title{color: #fff;font-size: 36rpx;margin:0 0 24rpx 24rpx;position: relative;z-index: 2;}
 	.ksp-item-box{
-		background-color: #fff;display: flex;width: 96%;margin: 10rpx auto;
-		/* .ksp-icon{
-				width: 60rpx;height: 75rpx;@include ezy-no-repeat-cover;flex-shrink: 0;
-				@include ezy-no-repeat-cover;background-image: url("@/static/images/xuexi/xx-ksp-icon.png");
-			} */
-		.ksp-title{color: #333;font-size: 36rpx;margin-right: auto;margin-left: 10rpx;height: 50rpx;@include single-line-ellipsis;}
+		width: 670rpx;height: 150rpx;margin: 0 auto 24rpx;padding-left: 24rpx;
+		display: flex;align-items: center;box-sizing: border-box;z-index: 2;position: relative;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/xuexi/ksp-item-bj.png");
+		.ksp-icon{
+			width: 104rpx;height: 104rpx;@include ezy-no-repeat-cover;flex-shrink: 0;
+			@include ezy-no-repeat-cover;background-image: url("@/static/images/xuexi/xx-ksp-icon.png");
+		}
+		.ksp-title{color: #444;font-size: 34rpx;margin-right: auto;
+		margin-left: 10rpx;height: 50rpx;@include single-line-ellipsis;}
 	}
 	
 		

BIN
static/images/xuexi/ksp-item-bj.png


BIN
static/images/xuexi/ksp-item-top-bj.png