<template>
  <div style="overflow:hidden">
    <div id="food">


        <div class="food-bg">
          <div class="flex-column content">
            <div class="content-top flex-row">
              <img src="../assets/image/img/food-left.png" alt="" class="c-top-left">
              <img src="../assets/image/img/food-right.png" alt="" class="c-top-right">
            </div>

            <div class="flex-row content-bottom">
              <div class="flex-column" style="width: 230px">
                <div class="food_type " :class="{'choose_food_type':index==1}" @click="chooseType(1)">三大招牌</div>
                <div class="food_type"  :class="{'choose_food_type':index==2}" @click="chooseType(2)">风味小食</div>
                <div class="food_type"  :class="{'choose_food_type':index==3}" @click="chooseType(3)">拌饭类</div>
              </div>
              <div class="flex-row" style="margin-left: 100px;justify-content: space-between">
                  <div class="flex-column food-pre" style="margin-right: 80px">
                    <img src="../assets/image/img/food1.png" alt="">
                    <div class="food-title">豌杂肉酱面</div>
                    <div class="food-desc">一般豌豆 一半肉酱</div>
                  </div>
                <div class="flex-column food-pre" style="margin-right: 80px">
                  <img src="../assets/image/img/food2.png" alt="">
                  <div class="food-title">葱油面</div>
                  <div class="food-desc">小香葱煸出来</div>
                </div>
                <div class="flex-column food-pre">
                  <img src="../assets/image/img/food3.png" alt="">
                  <div class="food-title">麻酱凉面</div>
                  <div class="food-desc">纯芝麻酱拌面</div>
                </div>
              </div>
            </div>
          </div>
      </div>
  </div>
  </div>
</template>

<script>
import '../assets/css/food.scss'

export default {
  data() {
    return {
      index:1
    }
  },
  created() {

  },

  mounted: function () {


  },
  methods: {
    chooseType(index){
      this.index =index;
    }
  },
  destroyed() {

  },
  components: {
    // introduce,
    // shopthumb,
    // productthumb,
    // "el-card": Card
  }
}


</script>

<style lang="scss">
</style>
