


page {
height: 100vh;
}
.container {
background: #f8f8f8;
padding:20rpx 30rpx 30rpx;
}
.a-popular {
width: 690rpx;
height: auto;
overflow: hidden;
/* padding: 0 20rpx; */
/* margin: -18rpx 0 0; */
}
.popular-item {
border-radius: 20rpx;
margin: 0 0 40rpx 0;
min-height: 380rpx;
width: 690rpx;
background: #fff;
/* padding: 20rpx 0rpx 0rpx 0rpx; */
display: flex;
flex-direction: column;
}
.item-img-wrapper {
position: relative;
border-radius: 20rpx;
font-size: 0;
}
.item-img-wrapper .img {
width: 690rpx;
height: 388rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
}
.item-main {
display: flex;
/* align-items: center; */
justify-content: space-evenly;
height: 90rpx;
margin: 20rpx 0 10rpx;
/* padding-left:20rpx; */
}
.item-sub {
display: flex;
flex-direction: column;
/* text-align: center; */
align-items: center;
font-size:26rpx;
color:#333;
}
.item-sub span{
color: #ed5757;
font-family: Arial;
font-weight: 700;
}
.item-sub .desc{
font-size: 24rpx;
}
.gang{
background: #ededed;
width:4rpx;
height:50rpx;
margin-top:16rpx;
}
<view class="container">
<view class="a-popular">
<view wx:for="{{projectList}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<navigator url="/pages/goods/goods?id={{item.id}}" class="popular-item">
<view class="item-img-wrapper">
<image class="img" src="{{item.cover}}"></image>
</view>
<view class="item-main">
<view class="item-sub">
<view><span>8-10</span>月</view>
<view class="desc">办理周期</view>
</view>
<view class="gang"></view>
<view class="item-sub">
<view><span>500万日元</span></view>
<view class="desc">投资额度</view>
</view>
<view class="gang"></view>
<view class="item-sub">
<view><span>长期签证</span></view>
<view class="desc">身份类型</view>
</view>
<view class="gang"></view>
<view class="item-sub">
<view><span>¥5</span>万</view>
<view class="desc">服务费</view>
</view>
</view>
</navigator>
</view>
</view>
</view>
Page({
data: {
projectList: [{
id: 1,
name: '日本经营管理签证',
cover: 'abc.png',
time: '8-10',
unit: '年'
},
{
id: 2,
name: '日本经营管理签证',
cover: 'https://abc.png',
time: '8-10',
unit: '年'
},
{
id: 3,
name: '日本经营管理签证',
cover: 'https://abc.png',
time: '8-10',
unit: '年'
},
{
id: 4,
name: '日本经营管理签证',
cover: 'https://abc.png',
time: '8-10',
unit: '年'
}
]
},
onLoad: function (n) {
},
onReady: function () {},
onShow: function () {},
onHide: function () {},
onUnload: function () {},
onShareAppMessage: function () {}
});