Today, when making ele.me commodity components, the css style of this component is suddenly not displayed. All other components css can display normally
this is the template
<template>
<div class="goods">
<div class="menu-wrapper">
<ul>
<li v-for="(item,index) in goods" class="menu-item">
<span class="text border-1px">
<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper"></div>
</div>
</template>this is css
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl"
.goods
display:flex
position:absolute
width:100%
top:174px
bottom:46px
overflow:hidden
.menu-wrapper
flex:0 0 80px
width:80px
background: -sharpf3f5f7
.menu-item
display:table
width:56px
height:54px
padding:0 12px
line-height:14px
.text
display:table-cell
width:56px
vertical-align:middle
border-1px(rgba(7, 17, 27, 0.1))
font-size:12px
.icon
display:inline-block
vertical-align: top
width:12px
height:12px
margin-right:2px
background-repeat:no-repeat
background-size:12px 12px
&.decrease
bg-image("decrease_3")
&.discount
bg-image("discount_3")
&.special
bg-image("special_3")
&.invoice
bg-image("invoice_3")
&.guarantee
bg-image("guarantee_3")
.foods-wrapper
flex:1
</style>