<template>
  <div class="paomadeng-card">
    <h5 style="padding: 10px 15px;">今日菜品</h5>
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 4" :key="item">
        <el-row type="flex" justify="space-around" :gutter="20" style="margin: 0 20px;">
          <el-col :span="8">
            <div class="food-item">
              <el-image src="https://img0.baidu.com/it/u=4242782882,2724987482&fm=26&fmt=auto" />
              <p>有机花菜</p>
              <div class="food-item-footer">
                <span style="float: left">单价: ￥ 18</span>
                <span style="float: right">8小时前发布</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="food-item">
              <el-image src="https://img0.baidu.com/it/u=4242782882,2724987482&fm=26&fmt=auto" />
              <p>有机花菜</p>
              <div class="food-item-footer">
                <span style="float: left">单价: ￥ 18</span>
                <span style="float: right">8小时前发布</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="food-item">
              <el-image src="https://img0.baidu.com/it/u=4242782882,2724987482&fm=26&fmt=auto" />
              <p>有机花菜</p>
              <div class="food-item-footer">
                <span style="float: left">单价: ￥ 18</span>
                <span style="float: right">8小时前发布</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>

.paomadeng-card{
  background: white;
  margin-bottom: 40px;
}

.food-item{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.food-item p{
  font-size: 16px;
  padding: 0 15px;
  color: #52c1f5;
  margin: 5px 0;
}

.food-item-footer{
  font-size: 14px;
  color: grey;
  padding: 10px 15px;
  display: flow-root;
}
</style>
