当前的问题:
目标样式 第一次做的样式
代码
<view class="news">
<view class="news_item" @click=goDetail(item.id) v-for="item in newsList" :key="item.id">
<image src="http://www.itcast.cn/2018czydz/images/gywmban.jpg"></image>
<view class="right">
<view class="tit">
{{item.title}}
</view>
<view class="info">
<text>发布时间: {{item.add_time|formatDate}}</text>
<text>浏览: {{item.click}}</text>
</view>
</view>
</view>
</view>
<style lang="scss">
.news{
.new_item{
display: flex;
padding:10rpx 20rpx;
border-bottom: 1px solid $shop-color;
image{
min-width: 200rpx;
max-width: 200rpx;
height: 150rpx;
}
.right{
margin-left: 15rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.tit{
font-size: 30rpx;
}
.info{
font-size: 24rpx;
text:nth-child(2){
margin-left: 30rpx;
}
}
}
}
}
错误原因:
样式名称写错了,上面调用的是news_item。
查找错误的过程 :
f12发现图片宽高都是100%
减少嵌套层数,去掉动态数据,暂时先用其他正常页面的样式,如果此时是正常的,再增加嵌套的层,发现有个外层的样式名称写错了,里面的层的样式就失效了。