<template>
	<view class="dishes-item">
	    <!-- 菜品左侧图片区域 -->
	    <view class="dishes-item-left">
	      <image :src="dishes.dish_src" class="dishes-pic"></image>
	    </view>
	    <!-- 菜品右侧信息区域 -->
	    <view class="dishes-item-right">
	      <!-- 菜品标题 -->
	       <view class="dishes-name">{{dishes.dish_name}}</view>
	       <view class="dishes-info-box">
							
		   </view>
	    </view>
	</view>
</template>

<script>

	export default {
	    props: {
			dishes: {
				type: Object,
				default:{},
			}
		},
		
		data: {

	    }
	}
</script>


<style lang="scss">
    .dishes-item {
      display: flex;
      padding: 10px 5px;
      border-bottom: 1px solid #f0f0f0;
    
     .dishes-item-left {
        margin-right: 5px;
    
     .dishes-pic {
          width: 100px;
          height: 100px;
          display: block;
        }
      }
    
     .dishes-item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    
     .dishes-name {
          font-size: 13px;
        }
    
     .dishes-price {
          font-size: 16px;
          color: #c00000;
        }
      }
    }
</style>