5--------------------PARTFOUR学员作品模块

效果图：

.wxml

<!--PART FOUR-->
<!--学员作品模块-->
<view class="works">
  <view class="container">
   <view class="pubTitle">
     <view class="txt">学员作品</view>
     <navigator class="more">更多 ></navigator>
   </view>

   <view class="wkMain">
     <navigator class="box" >
       <image class="pic" src="/images/xszp1.jpg"></image>
       <view class="ceng">
         <view class="tit">UI设计作品</view>
         <view class="line"></view>
         <view class="des">UI design works</view>
       </view>
     </navigator>

     <navigator class="box" >
       <image class="pic" src="/images/xszp2.jpg"></image>
       <view class="ceng">
         <view class="tit">UI设计作品</view>
         <view class="line"></view>
         <view class="des">UI design works</view>
       </view>
     </navigator>

     <navigator class="box" >
       <image class="pic" src="/images/xszp3.jpg"></image>
       <view class="ceng">
         <view class="tit">UI设计作品</view>
         <view class="line"></view>
         <view class="des">UI design works</view>
       </view>
     </navigator>

     <navigator class="box" >
       <image class="pic" src="/images/xszp4.jpg"></image>
       <view class="ceng">
         <view class="tit">UI设计作品</view>
         <view class="line"></view>
         <view class="des">UI design works</view>
       </view>
     </navigator>

     <navigator class="box" >
       <image class="pic" src="/images/xszp5.jpg"></image>
       <view class="ceng">
         <view class="tit">UI设计作品</view>
         <view class="line"></view>
         <view class="des">UI design works</view>
       </view>
     </navigator>

     <navigator class="box" >
       <image class="pic" src="/images/xszp6.jpg"></image>
       <view class="ceng">
         <view class="tit">UI设计作品</view>
         <view class="line"></view>
         <view class="des">UI design works</view>
       </view>
     </navigator>

     <navigator class="box" >
       <image class="pic" src="/images/xszp7.jpg"></image>
       <view class="ceng">
         <view class="tit">Web前端作品</view>
         <view class="line"></view>
         <view class="des">web front end works</view>
       </view>
     </navigator>

     <navigator class="box" >
       <image class="pic" src="/images/xszp8.jpg"></image>
       <view class="ceng">
         <view class="tit">三维仿真作品</view>
         <view class="line"></view>
         <view class="des">UI design works</view>
       </view>
     </navigator>

   </view>
  </view>
</view>

.wxss

/**PART FOUR**/
/**学员作品模块布局**/
.pubTitle{display:flex;/**显示在一行**/justify-content:space-between;/**两端对齐**/height:60rpx;align-items:center;margin-bottom:40rpx;}
.pubTitle .txt{font-size:40rpx;position:relative;padding-left:20rpx;}
.pubTitle .txt::before{display:block;width:8rpx;height:34rpx;background:#c8020b;content:" ";position:absolute;left:0;top:50%;margin-top:-15rpx;}
.pubTitle .more{font-size:34rpx;color:#666;}
.works{background:#f0f3f8;padding:90rpx 0 70rpx;}

.wkMain{display:flex;flex-wrap:wrap;justify-content:space-between;}
.wkMain .box{width:344rpx;height:214rpx;margin-bottom:10rpx;position:relative;}
.wkMain .pic{width:100%;height:100%}
.wkMain .ceng{width:100%;height:100%;background:rgba(0,0,0,0.5);position:absolute;top:0;left:0;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 20rpx;box-sizing:border-box;text-align:center;}
.wkMain .ceng .tit{font-size:34rpx;}
.wkMain .ceng .line{width:50rpx;height:2rpx;background:#fff;margin:10rpx 0 20rpx;}
.wkMain .ceng .des{opacity:0.6;text-transform:uppercase;font-size:26rpx;letter-spacing:5rpx;}

公共设置
.app.wxss

.container{padding:0 26rpx;box-sizing:border-box;}/**左右两边距页面有间隔**/

@keyframes dh{
  0%,50%,100%{opacity:1;}
  25%{opacity:0;}
}/**右上角联系图标有闪动效果**/