新闻动态

用到的还是之前的弹性盒子模型
wxml:

<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/xszp2.jpg"></image>
        </view>
        <view class="txt">
          <view class="title">韭菜是怎么炼成的</view>
          <view class="info">
            <text>作者：</text>芜湖<text space="ensp"> - </text><text>时间：</text>2021-2-28
          </view>
        </view>
        </navigator>
      </view>
    </view>
</view>

wxss:

.dynamic{
  padding: 90rpx 0 70rpx;
}

.dyItem{
  display: flex;
  padding: 15rpx 0;
  border:2rpx dashed #f4f4f4;
  justify-content: space-between;
}
.dyItem .pic{
width: 230rpx;
height: 150rpx;
}
.dyItem .pic image{
  width: 100%;
  height: 100%;
}
.dyItem .txt{
width: 440rpx;
/* txt实现盒子模型，垂直排列*/
display: flex;
flex-direction: column; /* 默认是水平排列*/
justify-content: space-between;
}

.dynamic .title{
  font-size: 34rpx;
}
.dynamic .info{
  font-size: 26rpx;
  color:#888;
}
.dynamic .info text{
  font-size:22rpx;
}

底部布局

底部是logo图标居中。
wxml:

<view class="footer">
  <image class="pic" mode="widthFix" src="/images/logo.png"></image>
  <view class="text">- 芜湖起飞 -</view>
</view>

wxss:

.footer{
  padding: 30rpx 0;
  background: #f2f2f2;
  text-align: center;
}
.footer .pic{
  width: 180rpx;
}

.footer .text{
  font-size: 25rpx;
  color: #666;
}