实现分析

该模块由两个模块组成，一个是标题文字和更多按钮，另一个是图片列表。

模块标题和更多链接

wxml:

<view class="works">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">作品</view>
        <navigator class="more">更多  ></navigator>
      </view>
    <view class="wkMain"></view>
  </view>
</view>

2行添加了container模板，可以套用app.wxss中的全局样式。

wxss：

.pubTitle {
  display: flex;
  justify-content: space-between;
  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: red;
  content: "";
  position: absolute; /* 绑定父级*/
  left: 0;
  top: 50%;
  margin-top: -15rpx;
}

.pubTitle .more {
  font-size: 34rpx;
  color: #666;
}

图片列表

分析实现思路

要实现这种在图片上添加白色文字的样式：

首先图片要添加中文标题
添加英文标题
在图片上添加一层暗色透明背景，不至于图片太亮，影响字体辨识。

实现

wxml:

这里直接用for循环8次，然后直接调试样式，后期实现可采用js读取接口数据。

  <view class="wkMain">
    <navigator class="box" wx:for="{{8}}">
      <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>
  </view>

wxss:

.wkMain .ceng{
width:100%;
height: 100%;
background: rgba(0,0,0,0.35);
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: 24rpx;
letter-spacing:5rpx/* 字符间隔 */
}

样式：