视频列表页样式开发

common/styles/global/components.scss

@@ -212,7 +212,7 @@ view{box-sizing: border-box;}
 box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;}
 /* 无限滚动区域 */
 // .uni-scroll-view-content{height: calc(100vh - 290rpx)}
-.uni-scroll-view-content{height: calc(100vh - 420rpx)}
+.uni-scroll-view-content{height: calc(100vh - 410rpx)}
 
 /*左侧图片右侧内容列表区域*/
 .list-item-box{
@@ -252,13 +252,31 @@ box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;}
 	&:first-child{margin:10rpx 12rpx 32rpx;}
   }
   
+  /* 视频列表区域 */
+  .video-item-box{
+      width: 48%;height: 220rpx;display: inline-block;position: relative;margin:0 1% 16rpx;cursor: pointer;
+      img,.el-image,uni-image{width: 100%;height: 220rpx;}
+      .video-play-btn{
+        width: 60rpx;height: 60rpx;position: absolute;left: 50%;top: 50%;transform: translate(-30rpx, -30rpx);transition: all .3s;
+        @include dljt-no-repeat-cover;background-image: url("@/static/images/common/video-play-btn.png");cursor: pointer;
+      }
+      .video-play-btn:hover{width: 66rpx;height: 66rpx;transform: translate(-33rpx, -33rpx);}
+      .video-mask-box{
+        width: 100%;box-sizing: border-box;padding:12rpx;font-size: 24rpx;
+        position: absolute;left: 0;bottom: 0;right:0;color: #fff;line-height: 1;
+        background: linear-gradient(to bottom, rgba(132,164,226,0), #84A4E2);
+        .video-data,.video-title{font-weight: bold;}
+        .video-title{margin-top: 8rpx;}
+      }
+    }
+  
 
 /* 底部返回按钮*/
 .return-footer-box{
   display: flex;justify-content: space-between;align-items: center;
   .footer-right{flex-shrink: 0}
-  .dljt-return-btn{width: 133rpx;height: 40rpx;display: inline-block;margin: 24rpx 0;cursor: pointer;flex-shrink: 0;margin-left: auto;
-   @include dljt-no-repeat-cover;background-image: url("@/static/images/common/return-btn.png");}
+  // .dljt-return-btn{width: 133rpx;height: 40rpx;display: inline-block;margin: 24rpx 0;cursor: pointer;flex-shrink: 0;margin-left: auto;
+  //  @include dljt-no-repeat-cover;background-image: url("@/static/images/common/return-btn.png");}
   .dljt-down-btn{width: 238rpx;height: 60rpx;display: inline-block;margin: 24rpx 0;margin-left: auto;
     @include dljt-no-repeat-cover;background-image: url("@/static/images/common/down-btn.png");}
   .dljt-down-btn + .dljt-return-btn{margin-left: 16rpx;}
@@ -266,7 +284,7 @@ box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;}
 
 /* 富文本详情页 */
 .dljt-detail-box{
-	height: calc(100vh - 420rpx);box-sizing: border-box;padding: 24rpx;overflow-y: auto;
+	height: calc(100vh - 410rpx);box-sizing: border-box;padding: 24rpx;overflow-y: auto;
 	.detail-title{color: #000;text-align: center;font-size: 32rpx;font-weight: bold;line-height: 1.5;}
 	.detail-data{color: #666;text-align: center;font-size: 26rpx;margin-top: 24rpx;}
 	.dljt-editor-box{

pages/xygkXiaoyuanfengguang/xygkXiaoyuanfengguang.vue

@@ -11,13 +11,13 @@
 				</view>
 				<MtaScrollViewVue :refreshFn="getList">
 					<template v-slot="{ list }">
-						<view class="list-item-box" v-for="item in list" :key="item.id" @click="handleClick(item)">
+						<view class="video-item-box" v-for="item in list" :key="item.id" @click="handleClick(item)">
 							<!-- 图 -->
 							<image :src="item.content"></image>
 							<!-- 内容 -->
-							<view class="list-right-box">
-								<view class="time-data">{{formatDateToYearMonthDay(item.createTime).join('-')}}</view>
-								<view class="list-name">{{item.title}}</view>
+							<view class="video-mask-box">
+								<view class="video-data">[{{formatDateToYearMonthDay(item.createTime).join('-')}}]</view>
+								<view class="video-title">{{item.title}}</view>
 							</view>
 						</view>
 					</template>
@@ -50,7 +50,7 @@
 		list: '',
 		total: '',
 		page: 1,
-		size: 5
+		size: 10
 	})
 
 	function handleClick(data) {