SOURCE

 var vm = new Vue({
        el: '#app',
        data: {
            message: "移动商城",
            input: ''
        }
    })

<div id="app">
    {{ message }}
    <el-row :gutter="20">
        <el-col :span="17"> 
             <el-input v-model="input" placeholder="请输入内容"></el-input>    
        </el-col>
        <el-col :span="5"> 
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="12">
            <div class="grid-content bg-purple" style="margin: 10px auto">
                <a href="#">
                    <div class="commodity">
                        <div class="item-block-img">
                            <img src="https://img.alicdn.com/imgextra/i1/32548391/O1CN01FMfRMQ2Br80XyqAeE_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt="女装">
                        </div>
                        <div class="item-title">
                            自制 无敌好面料 春秋 西服白色西装外套又飒又帅出街即C位 垫肩
                        </div>
                         <div class="item-monthsell">
                            月销量1494件
                        </div>
                        <div class="item-price">
                            <span class="mui-price">
                                <i>¥</i>
                                <span class="mui-price-inter">5948</span>
                            </span>
                            <span class="mui-price gray">
                                <i>¥</i>
                                <span class="mui-price-inter">5948.0</span>
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="grid-content bg-purple" style="margin: 10px auto">
                <a href="#">
                    <div class="commodity">
                        <div class="item-block-img">
                            <img src="https://img.alicdn.com/imgextra/i1/27069743/O1CN01e76OrN2LqLXjJJPu7_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt="女装">
                        </div>
                        <div class="item-title">
                            全友家居布艺沙发客厅小户型现代简约三人位布沙发组合家具102137
                        </div>
                         <div class="item-monthsell">
                            月销量420件
                        </div>
                        <div class="item-price">
                            <span class="mui-price">
                                <i>¥</i>
                                <span class="mui-price-inter">1999</span>
                            </span>
                            <span class="mui-price gray">
                                <i>¥</i>
                                <span class="mui-price-inter">2451.5</span>
                            </span>
                        </div>
                    </div>
                </a>
            </div>

             <div class="grid-content bg-purple" style="margin: 10px auto">
                <a href="#">
                    <div class="commodity">
                        <div class="item-block-img">
                            <img src="https://img.alicdn.com/imgextra/i4/16522676/O1CN01MG0Cl31VdeXox7uBP_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt="女装">
                        </div>
                        <div class="item-title">
                            【周黑鸭旗舰店_锁鲜】盒装卤鸭脖鸭锁骨鸭翅鸭掌 藤椒多口味组合
                        </div>
                         <div class="item-monthsell">
                            月销量420件
                        </div>
                        <div class="item-price">
                            <span class="mui-price">
                                <i>¥</i>
                                <span class="mui-price-inter">79.9</span>
                            </span>
                            <span class="mui-price gray">
                                <i>¥</i>
                                <span class="mui-price-inter">120.0</span>
                            </span>
                        </div>
                    </div>
                </a>
            </div>            
        </el-col>
        <el-col :span="12">
            <div class="grid-content bg-purple" style="margin: 10px auto">
                <a href="#">
                    <div class="commodity">
                        <div class="item-block-img">
                            <img src="https://gd4.alicdn.com/imgextra/i2/307804503/O1CN011pHFjC1j8Q9sd86lX_!!307804503.jpg" alt="女装">
                        </div>
                        <div class="item-title">
                            自制 无敌好面料 春秋 西服白色西装外套又飒又帅出街即C位 垫肩
                        </div>
                         <div class="item-monthsell">
                            月销量1494件
                        </div>
                        <div class="item-price">
                            <span class="mui-price">
                                <i>¥</i>
                                <span class="mui-price-inter">5948</span>
                            </span>
                            <span class="mui-price gray">
                                <i>¥</i>
                                <span class="mui-price-inter">5948.0</span>
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="grid-content bg-purple" style="margin: 10px auto">
                <a href="#">
                    <div class="commodity">
                        <div class="item-block-img">
                            <img src="https://img.alicdn.com/imgextra/i1/32548391/O1CN01FMfRMQ2Br80XyqAeE_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt="女装">
                        </div>
                        <div class="item-title">
                            自制 无敌好面料 春秋 西服白色西装外套又飒又帅出街即C位 垫肩
                        </div>
                         <div class="item-monthsell">
                            月销量1494件
                        </div>
                        <div class="item-price">
                            <span class="mui-price">
                                <i>¥</i>
                                <span class="mui-price-inter">5948</span>
                            </span>
                            <span class="mui-price gray">
                                <i>¥</i>
                                <span class="mui-price-inter">5948.0</span>
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="grid-content bg-purple" style="margin: 10px auto">
                <a href="#">
                    <div class="commodity">
                        <div class="item-block-img">
                            <img src="https://img.alicdn.com/imgextra/i1/32548391/O1CN01FMfRMQ2Br80XyqAeE_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt="女装">
                        </div>
                        <div class="item-title">
                            自制 无敌好面料 春秋 西服白色西装外套又飒又帅出街即C位 垫肩
                        </div>
                         <div class="item-monthsell">
                            月销量1494件
                        </div>
                        <div class="item-price">
                            <span class="mui-price">
                                <i>¥</i>
                                <span class="mui-price-inter">5948</span>
                            </span>
                            <span class="mui-price gray">
                                <i>¥</i>
                                <span class="mui-price-inter">5948.0</span>
                            </span>
                        </div>
                    </div>
                </a>
            </div>

        </el-col>
    </el-row>
</div>

a{text-decoration: none;color:#333;}
a:hover, a:visited, a:link, a:active {
    color:#333;
}

.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

.item-block-img img{
    width: 100%;
}

*{
            padding: 0;
            margin: 0;
        }
        a{
            overflow: hidden;
            color: #051B28;
            text-decoration: none;
        }
        i{
            font-style: normal;
            font-family: Arial;
        }
        .container{
            position: relative;
            width: 188px;
            height: 304px;
            background: #fff;
            box-sizing: border-box;
            border: 2px solid #ccc;
            margin: 20px 0 0 20px;
        }
        /*在商品项的最外层包裹a标签 便于用户点击查看详情*/
        a.item-block {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
  
        .item-title {
            font-size: 14px;
            color: #333;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.1;
            height: 30px;
            max-height: 36px;
            margin: 9px;
        }
        .item-monthsell {
            display: inline-block;
            font-size: 12px;
            max-width: 100%;
            white-space: nowrap;
            color: #999;
            margin: 0 9px 3px;
            height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 18px;
        }
        .item-price {
            margin: 4%!important;
            height: 5%!important;
        }
        .mui-price {
            color: #dd2727;
            font-size: 12px;
        }
        .mui-price-inter {
            font-size: 16px;
            font-family: Helvetica,sans-serif;
            font-style: normal;
        }
        .mui-price.gray {
            color: #999;
            font-size: 10px;
            text-decoration: line-through;
        }
        .gray .mui-price-inter {
            font-size: 12px;
            font-family: Helvetica,sans-serif;
            font-style: normal;
        }