css的display用法

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 () {}
 });