.ball-wrap{.ball{位置：固定；左：50%；底部：10px；z-索引：100000；红色;过渡：所有0.5秒立方贝塞尔曲线（0.49，-0.29，0.75，0.41）；.inner{宽度：16px;高度：16px；过渡：所有0.5s线性；.cubeic-add{字体大小：22px；}}}}App.vue{{item.label}}
{{cartTotal}}data(){return{transitionName:'route-forward',selectLabel:"/",tabs:[{label:"Home",value:"/",icon:"cubeic-home"},{label:"Cart",value:"/cart",icon:"cubeic-mall"},{label:"Me",value:"/about",icon:"cubeic-person"}]};},created(){//初始化选项卡设置以避免页面刷新this.selectLabel=this.$route.path;},watch:{$route(route){//监听路由变化并动态设置标签选择状态this.selectLabel=route.path;this.transitionName=this.$router.transitionName}},方法：{changeHandler(val)这.$router.push(val);}}，轮播图和产品列表商品服务，service/goods.jsimportaxiosfrom"axios";exportdefault{//获取轮播图、产品和分类数据getGoodsInfo(){returnaxios.get("/api/goods").then(res=>{const{code,data:goodsInfo,slider,keys}=res.data;//数据处理if(code){return{goodsInfo,slider,keys};}else{returnnull;}});}};轮播，产品列表，Home.vue脚本>从“@/service/goods”导入gs；从“@/components/GoodList.vue”导入GoodList；导出默认值{名称：“家”，组件：{GoodList}，数据（）{返回{滑块：[],keys:[],goodsInfo:{}};},created(){//首先查询gs.getGoodsInfo().then(({goodsInfo,slider,keys})=>{//保存状态this.goodsInfo=goodsInfo;this.slider=slider;this.keys=钥匙;});},computed:{goods(){//[[{},{}]]=>[{},{}]returnthis.keys.flatMap(key=>this.goodsInfo[key]);}}};购物车状态,cart.jsexportdefault{state:{//购物车初始状态列表:JSON.parse(localStorage.getItem("cart"))||[]},mutations:{addcart(state,item){//添加商品到购物车constgood=state.list.find(v=>v.title==item.title);如果（好）{good.cartCount+=1;}else{state.list.push({...item,cartCount:1});}},cartremove(state,index){//count-1if(state.list[index].cartCount>1){state.list[index].cartCount-=1;}},cartadd(state,index){//count+1state.list[index].cartCount+=1;}},getters:{car??tTotal:state=>{//项目总数letnum=0;state.list.forEach(v=>{num+=v.c艺术计数；});返回数；},total:state=>{//返回总价state.list.reduce((total,item)=>total+item.cartCount*item.price,0);}}}动画设计添加购物车动画，CartAnim.vue
