1.首先上效果图
2.index.js中
//重点在于阴影的设计
.card {
border: 2px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 4px 1px 1px #cccccc;
margin: 8px;
position: relative;
}
.image {
width: 100%;
height: 200px;
background-color: #eeeeee;
}
.time {
float: right;
margin-top: 170px;
color: #ffffff;
position: absolute;
right: 0;
top: 0;
z-index: 1;
font-size: 12px;
}
3.index.wxml中
<view class="card" >
<view bindtap="onItemClick">
<image class="image" mode="aspectFill" src="图片地址"/>
<text class="time">时间</text>
<view class="title">标题</view>
</view>
</view>