{path:'/goods/goodsshow/:goodsid',component:goodsshow},
整体和前面差不多
<template>
    <div class="tmpl">
        <!-- 1.0 商品列表图片布局 -->
        <ul class="mui-table-view mui-grid-view">
           <!--  <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a class="a" href="#">
                ![](../../../statics/imgs/thumb_201504200154277661.jpg)
                 <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                </a>

            <div class="desc">
                <h5><span class="sellprice">￥2099</span>
                   <s>￥1099 </s>
                  </h5>
                <div class="left">热卖中</div>
                <div class="right">剩60件</div>
            </div>
            </li> -->

            <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
                <router-link v-bind="{to:'/goods/goodsshow/'+item.id}">
                    ![](item.img_url)
                    <div class="mui-media-body" v-text="item.title"></div>
                </router-link>
            <div class="desc">
                <h5><span class="sellprice">￥{{item.sell_price}}</span>
                   <s>￥{{item.market_price}} </s>
                  </h5>
                <div class="left">热卖中</div>
                <div class="right">剩{{item.stock_quantity}}件</div>
            </div>
            </li>
        </ul> 
    </div>


</template>

<script>
import common from '../../kits/common.js'
    export default{
        data(){
            return {
                list:[]
            }
        },
        methods:{
            getlist(){
                this.$http.get(common.apiDomain+'/api/getgoods?pageindex=1').then(res=>{
                    this.list = res.body.message;

                    console.log(res.body.message[0].img_url);
                });
            }
        },
        created(){
            this.getlist();
        }
    }
</script>

<style scoped>
    .mui-table-view.mui-grid-view .mui-table-view-cell{
        border:1px solid rgba(0,0,0,0.3);
        padding:0 0 0 0;
        box-shadow:0 0 3px #666;
    }
    .mui-table-view.mui-grid-view{
        padding:5px;
    }
    
    .a{
        padding: 5px;
    }
    .desc{
        background-color: rgba(0,0,0,0.1);
        height: 60px;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    .desc h5{
        text-align: left;
        padding: 5px;
    }
    .desc s{
        padding-left: 15px;
    }
    .sellprice{
        color: red;
        font-size: 14px;
        font-weight: bold;
    }

    .left {
        width: 50%;
        float: left;
        text-align: left;
        padding-left: 10px;
    }
    .right {
        width:50%;
        float: right;
        text-align: right;
        padding-right: 10px;
    }

    .left,.right{
        margin-top: 15px;
        font-size: 12px;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
        font-size:12px;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell{
        margin-right: 5px;
    }

    .mui-col-xs-6{
        width: 48%;
    }



    
</style>