饿了吗css,vue实现饿了么点餐的动画效果

点击白色的食品区域

对应的食物名字 价格 显示在黄色区域

结果类似

应该给添加怎么样的事件

{{food.name}}

¥{{food.price}}

• {{item.name}}

import axios from 'axios'

import Vue from 'vue'

export default {

name: 'navMenu',

created() {

axios.get('static/data.json').then((res) => {

console.log(res.data.goods)

this.goods = res.data.goods

});

},

data() {

return {

goods: [],

isSelected:0,

name:'food',

selectedFood: '',

}

},

computed:{

// selectFoods() {

// let foods = []

// this.goods.forEach((good) => {

// good.foods.forEach((food) => {

// if (food.count) {

// foods.push(food)

// }

// })

// })

// return foods

// }

},

methods:{

menuClick (name,index) {

this.isSelected = index

this.name=name

}

}

}

.navMenu{

position: fixed;

right: 1%;

top:0;

height: 100%;

color:white;

}

.navMenu ul{

list-style: none;

background: #00B595;

padding: 5%;

}

.navMenu ul li{

margin:20% 0% 10%;

padding: 5%;

}

.nav{

list-style: none;

background: #00B595;

padding: 5%;

margin:20% 0% 10%;

padding: 5%;

}

.navMenu-selected{

background: #00725E;

}

.foods-wrapper{

background: #DBE0E3;

position: absolute;

top:3%;

left:30%;

width:60%;

height:80%;

}

.foodList{

margin: 1%;

}

.food{

background-color: #FFFFFF;

border-radius: 8%;

display: inline-block;

height:90px;

width:125px;

margin: 1%;

}

.order{

background: white;

width: 25%;

margin-top:1%;

}

.order-head{

background-color: #00B595;

width: 100%;

height: 50px;

margin-top:5%;

}

.border{

border:1px solid #DBE0E3;

margin-top: 2%;

}

.order-list{

margin-top:1%;

width:100%;

height: 400px;

background-color: yellow;

}