这个是我的特卖推荐结构和样式的代码：

<template>

<div class="recommend">

<h3 class="recommend-title">热卖推荐</h3>

<div class="loading-container" v-if="!recommends.length">

<MeLoading inline></MeLoading>

</div>

<ul class="recommend-list" v-else>

<li class="recommend-item" v-for="(item, index) in recommends" :key="index">

<router-link

class="recommend-link"

:to="{name: 'home-product', params: {id: item.baseinfo.itemId}}"

>

<p class="recommend-pic"><img class="recommend-img" :src="item.baseinfo.picUrlNew"></p>

<p class="recommend-name">{{item.name.shortName}}</p>

<p class="recommend-origPrice"><del>¥{{item.price.origPrice}}</del></p>

<p class="recommend-info">

<span class="recommend-price">¥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>

<span class="recommend-count">{{item.remind.soldCount}}件已售</span>

</p>

</router-link>

</li>

</ul>

</div>

</template>

<script>

import {getHomeRecommend} from 'api/home';

import MeLoading from 'base/loading';

export default {

name:'HomeRecommend',

components:{

MeLoading

},

data() {

return {

recommends:[],

curPage: 1,//当前页 第一页

totalPage: 1 //总共多少页

}

},

created(){

this.getRecommend();

},

methods:{

getRecommend(){

if(this.curPage > this.totalPage){

return;

}

getHomeRecommend(this.curPage).then(data => {

if(data){

this.curPage++;

this.totalPage = data.totalPage;

this.recommends =this.recommends.concat(data.itemList);

}

})

}

}

}

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.recommend-title {

position: relative;

width: 100%;

padding: 10px 0;

font-size: $font-size-l;

text-align: center;

}

.recommend-title::before{

content: '';

position: absolute;

top: 50%;

width: 40%;

height: 1px;

background-color: #ddd;

left: 0;

}

.recommend-title::after{

content: '';

position: absolute;

top: 50%;

width: 40%;

height: 1px;

background-color: #ddd;

right: 0;

}

.recommend-list{

@include flex-between();

flex-wrap: wrap;

}

.recommend-item{

width: 49%;

background-color: #fff;

box-shadow: 0 1px 1px 0 rgba(0,0,0,0.12);

margin-bottom: 8px;

}

.recommend-link{

display: block;

}

.recommend-pic{

position: relative;

width: 100%;

padding-top: 100%;//padd-top对宽有效，这样就能显示正方形出来

margin-bottom: 5px;

}

.recommend-img{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.recommend-name {

height: 36px;

padding: 0 5px;

margin-bottom: 8px;

line-height: 1.5;

@include multiline-ellipsis();

}

.recommend-origPrice {

padding: 0 5px;

margin-bottom: 8px;

color: #ccc;

}

.recommend-info {

@include flex-between();

padding: 0 5px;

margin-bottom: 8px;

}

.recommend-price {

color: #e61414;

}

.recommend-price-num {

font-size: 20px;

}

.recommend-count {

color: #999;

}

.loading-container {

padding-top: 100px;

}

</style>

这是我product的代码

<template>

<div class="product">

product

</div>

</template>

<script>

export default {

name: 'Product'

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.product {

overflow: hidden;

position: absolute;

top: 0;

left: 0;

z-index: $product-z-index;

width: 100%;

height: 100%;

background-color: $bgc-theme;

}

</style>