制作一个小程序更多好玩页面

页面大概样子是这样，可以实现小程序跳转，当然，图片名称介绍都可以修改。

不要求可以做的一摸一样，效果实现就行，请求大佬帮忙！！！

https://www.douban.com/note/683107151/

wxml

<view class="header">
  强烈推荐
</view>
<view class="list">
  <view class="list-item" wx:for="{{list}}" wx:key="{{index}}">
    <image src="{{item.image}}"></image>
    <view class="right">
      <view class="info">
        <view class="title">{{item.title}}</view>
        <view class="desc">{{item.desc}}</view>
      </view>
      <navigator url="/pages/index/index" class="open">打开</navigator>
    </view>
  </view>
</view>

wxss

.header{
  padding: 10rpx 30rpx;
  margin-bottom: 20rpx;
  font-weight: bold;
}

.list-item{
  padding: 0 30rpx;
  display: flex;
  margin-bottom: 20rpx;
  align-items: center;
}
.list-item image{
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.list-item .right{
  flex: 1;
  display: flex;
  border-bottom: 1px solid #ececec;
  padding: 30rpx 0;
}
.list-item .right .info .title{
  font-size: 32rpx;
}
.list-item .right .info .desc{
  font-size: 28rpx;
  color: #999;
  margin-top: 10rpx;
}
.list-item .right .open{
  margin-left: auto;
  color: #d80303;
  padding: 0rpx 20rpx;
  border: 1rpx solid #d80303;
  height: 50rpx;
  border-radius: 25rpx;
}

js

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    list: [{
      image: '/images/1.jpg',
      title: '标题111',
      desc: '描述文字描述文字'
    }, {
      image: '/images/1.jpg',
      title: '标题222',
      desc: '描述文字描述文字'
    }, {
      image: '/images/1.jpg',
      title: '标题333',
      desc: '描述文字描述文字'
    },{
      image: '/images/1.jpg',
      title: '标题444',
      desc: '描述文字描述文字'
    },{
      image: '/images/1.jpg',
      title: '标题555',
      desc: '描述文字描述文字'
    },{
      image: '/images/1.jpg',
      title: '标题666',
      desc: '描述文字描述文字'
    }]
  }
})