优秀毕业生照片列表样式开发

common/styles/global/components.scss

@@ -271,6 +271,18 @@ box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;}
         .video-title{margin-top: 8rpx;}
       }
     }
+
+/* 优秀毕业生照片列表 */
+.photo-item-box{
+    width: 31%;border: 1px solid #ccc;padding: 10rpx;box-sizing: border-box;
+	background-color: #fff;margin-bottom: 16rpx;cursor: pointer;display: inline-block;
+    img,uni-image{width: 100%;height: 148rpx;}
+    .photo-mask-box{
+      .mask-title{font-size: 28rpx;color: #333;margin-top: 6rpx;@include single-line-ellipsis;}
+      .mask-data{font-size: 24rpx;color: #666;margin-top: 6rpx;@include single-line-ellipsis;}
+    }
+  }
+  .photo-item-box +.photo-item-box:not(:nth-child(3n+1)){margin-left: 2%;}
   /**/
   .xyry-item-row{
 	  border-bottom: 1rpx dashed #ccc;margin: 32rpx;display: flex;padding-bottom: 16rpx;cursor: pointer;

pages/zsjyYouxiubiyesheng/zsjyYouxiubiyesheng.vue

@@ -13,14 +13,13 @@
 				</view>
 				<MtaScrollViewVue :refreshFn="getList" :size="20">
 					<template v-slot="{ list }">
-						<view class="video-item-box" v-for="item in list" :key="item.id" @click="handleClick(item)">
+						<view class="photo-item-box" v-for="item in list" :key="item.id" @click="handleClick(item)">
 							<!-- 图 -->
 							<image :src="item.cover"></image>
 							<!-- 内容 -->
-							<view class="video-mask-box">
-								<view class="video-data">[{{formatDateToYearMonthDay(item.createTime).join('-')}}]
-								</view>
-								<view class="video-title">{{item.title}}</view>
+							<view class="photo-mask-box">
+								<view class="mask-title">{{item.title}}</view>
+								<view class="mask-data">{{item.nian}}届结业生</view>
 							</view>
 						</view>
 					</template>