效果图:
.wxml
<!--PART FIVE-->
<!--行业动态模块-->
<view class="dynamic">
<view class="container">
<view class="pubTitle">
<view class="txt">行业动态</view>
<navigator class="more">更多 ></navigator>
</view>
<view class="dyMain">
<navigator class="dyItem" wx:for="{{5}}">
<view class="pic">
<image src="/images/xszp1.jpg"></image>
</view>
<view class="txt">
<view class="title">这里是标题部分这里是标题部分这里是标题部分这里</view>
<view class="info">
<text>作者:</text>LYL<text space="ensp"> - </text><text>时间:</text>2021-02-23
</view>
</view>
</navigator>
</view>
</view>
</view>
.wxss
/*PART FIVE*/
/*行业动态模块*/
.dynamic{padding:90rpx 0 70rpx;}
.dyItem{display:flex;padding:15rpx 0;border:1rpx dashed #f4f4f4;justify-content:space-between;}
.dyItem .pic{width:230rpx;height:150rpx;}
.dyItem .pic image{width:100%;height:100%;}
.dyItem .txt{width:440rpx;display:flex;flex-direction:column;justify-content:space-between;}
.dyItem .title{font-size:34rpx;}
.dyItem .info{font-size:26rpx;color:#888}
.dyItem .info text{font-size:22rpx;}
公共设置
app.wxss
.container{padding:0 26rpx;box-sizing:border-box;}/**左右两边距页面有间隔**/
@keyframes dh{
0%,50%,100%{opacity:1;}
25%{opacity:0;}
}/**右上角联系图标有闪动效果**/