小程序实现美团\淘宝卡片

美团更新的酒店页面推荐仿制。

美团界面如下

小程序界面如下二

（界面对齐仍然存在问题）

如果有会的哥们教教我，不知道如何向上对齐

代码直接放下面

tags直接引入ICON然后设置圆角和想要的颜色就能实现,这里不再仿制.

如需引入实际数据可以拉入缓存然后用循环实现卡片堆叠

<!--pages/card/card.wxml-->

<view class="cardContainer">
    <view class="card">
        <image src="https://tse2.mm.bing.net/th?id=OIP.zv3D73TAQK9q-g7L7TPkGwHaE6&pid=15.1" class="cardImg" mode="widthFix"/>
        <view class="cardText">
            <view class="cardTitle">藤原豆腐店</view>
            <view class="cardTags">点赞或火焰或其他</view>
            <view class="cardDetail">"{{detail}}"</view>
        </view>
        <view class="cardBtm">
            <view class="cardPrice">￥999
            <text>起</text>
            </view>
            <view class="cardSales">已售5000+</view>
        </view>
    </view>
    <view class="card">
        <image src="https://live.staticflickr.com/3103/2385867673_41b7dd81cd_n.jpg" class="cardImg" mode="widthFix"/>
        <view class="cardText">
            <view class="cardTitle">藤原豆腐店</view>
            <view class="cardTags">点赞或火焰或其他</view>
            <view class="cardDetail">"{{detail}}"</view>
        </view>
        <view class="cardBtm">
            <view class="cardPrice">￥999
            <text>起</text>
            </view>
            <view class="cardSales">已售5000+</view>
        </view>
    </view>
    <view class="card">
        <image src="https://images.unsplash.com/photo-1609255792418-24d0c20c217b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixlib=rb-1.2.1&q=80&w=200" class="cardImg" mode="widthFix"/>
        <view class="cardText">
            <view class="cardTitle">藤原豆腐店</view>
            <view class="cardTags">点赞或火焰或其他</view>
            <view class="cardDetail">"{{detail}}"</view>
        </view>
        <view class="cardBtm">
            <view class="cardPrice">￥999
            <text>起</text>
            </view>
            <view class="cardSales">已售5000+</view>
        </view>
    </view>
    <view class="card" >
        <image src="https://live.staticflickr.com/3834/10059455096_5eb082dd90_n.jpg" class="cardImg" mode="widthFix"/>
        <view class="cardText">
            <view class="cardTitle">藤原豆腐店</view>
            <view class="cardTags">点赞或火焰或其他</view>
            <view class="cardDetail">"{{detail}}"</view>
        </view>
        <view class="cardBtm">
            <view class="cardPrice">￥999
            <text>起</text>
            </view>
            <view class="cardSales">已售5000+</view>
        </view>
    </view>
</view>
/* pages/card/card.wxss */

.cardContainer{
 display: flex;
 flex-wrap: wrap;
 background-color: #f0f0f0;
 align-items:flex-start;
 align-content: flex-end;
}
.cardContainer .card{
    width: 50%;
    height: auto;
    border:2px solid #f0f0f0 ;
    box-shadow: #f0f0f0;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    
}
.card+.card{
    padding-left:4px ;
}
.cardContainer .cardImg{
    position: relative;
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.cardContainer .cardText{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    padding-left: 4px; 
    box-sizing: border-box;
    margin-top: 4px;
    margin-bottom: 4px;
}
.cardContainer .cardTags{
    box-sizing: border-box;
    background-color: #47ade7;
    color: #eb6416;
    border-radius: 8px;
    font-size: 12px;
}
.cardContainer .cardTitle{
    font-size:18px ;
    font-weight: bold;
    padding-left: 1px;
    padding-bottom: 4px;
}
.cardContainer .cardDetail{
    font-size:15px;
    padding-left: 2px;
    padding-top: 4px;
}
.cardContainer .cardBtm{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-left: 4px; 
    display: flex;
    box-sizing: border-box;
    margin-bottom: 5px;
    align-items: flex-end;
    margin-top: 3px;
}
.cardContainer .cardPrice{
    color: red;
    font-size: 18px;
    flex:1;
}
.cardPrice text{
    font-size: 12px;
    color: #000000;
    padding-left: -1px;
}
.cardContainer .cardSales{
    font-size:12px;
    
}
// pages/card/card.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        detail:"一家很美味的豆腐店"

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})