angular 点菜_无人点餐无人收银系统基础案例

最新推荐文章于 2020-12-20 02:08:34 发布

weixin_39607798

最新推荐文章于 2020-12-20 02:08:34 发布

阅读量106

点赞数

文章标签： angular 点菜

本文链接：https://blog.csdn.net/weixin_39607798/article/details/111550312

版权

本文介绍如何使用Angular构建一个无人点餐无人收银的基础系统。从创建项目开始，逐步讲解设置路由、创建Home和商品组件、重构项目布局等关键步骤。示例包括首页商品列表展示和导航设计。

摘要由CSDN通过智能技术生成

无人点餐无人收银系统基础案例

创建项目

创建一个含有路由的项目

ng new angularproject --skip-install

安装依赖

npm install

运行项目

ng serve --open

创建路由

创建home组件

ng g component components/home

创建商品组件

ng g component components/pcontent

重构项目

home.component.css

@charset "UTF-8";

.index_header{width:96%;margin:0 auto;height:4.4rem;background:#fff;margin-top:1rem;display:flex;border-radius:.5rem; }.index_header .hlist{flex:1;text-align:center;padding-top:.2rem;border-right:1px solid #eee; }.index_header .hlist img{width:2rem;height:2rem;margin:0 auto; }.index_header .hlist:last-child{border-right:none; }

/*列表*/.item .item_cate{text-align:center;padding:.5rem; }.item .item_list{display:flex;flex-wrap:wrap;padding:0px .5rem; }.item .item_list li{width:33.3%;padding:.5rem;box-sizing:border-box; }.item .item_list li .inner{background:#fff;width:100%;border-radius:.5rem;overflow:hidden; }.item .item_list li .inner img{width:100%; }.item .item_list li .inner p{padding:.2rem .5rem; }.item .item_list li .inner .title{font-weight:bold; }

/*侧边栏*/.left_cate{

/*css3运动加过渡效果*/transition:all 1s;transform:translate(-100%, 0);z-index:2;width:6rem;height:100%;position:fixed;background:#eee;top:0px;left:0px; }.left_cate ul{position:absolute;height:100%;padding:.5rem;z-index:3;background:#eee; }.left_cate ul li{line-height:4.4rem; }.left_cate .nav_cate{position:absolute;right:-3.5rem;background:rgba(132, 128, 128, 0.9);top:42%;width:5rem;height:4rem;text-align:center;border-radius:0rem 50% 50% 0rem;z-index:2; }.left_cate .nav_cate img{width:1.8rem;height:1.8rem;margin-left:1rem;margin-top:.4rem; }.left_cate .nav_cate p{color:#fff;margin-left:1rem;margin-top:-0.3rem; }

/*透明层*/.bg{position:fixed;width:100%;height:100%;background:rgba(132, 128, 128, 0.4);left:0px;top:0px;z-index:1;display:none; }

/*首页导航*/.footer_nav{height:4.4rem;width:4.4rem;background:#000;position:fixed;color:#fff;bottom:.5rem;left:.5rem;text-align:center;border-radius:50%; }.footer_nav img{width:1.8rem;height:1.8rem;margin-top:.4rem; }.footer_nav p{position:relative;top:-0.2rem; }

/*导航弹出层*/.footer_nav_show{width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0, 0, 0, 0.6);z-index:2; }.footer_nav_show .list li{height:4.4rem;width:4.4rem;background:#000;position:absolute;color:#fff;left:.5rem;text-align:center;border-radius:50%; }.footer_nav_show .list li img{width:1.8rem;height:1.8rem;margin-top:.4rem; }.footer_nav_show .list li p{position:relative;top:-0.2rem;font-size:1rem; }.footer_nav_show .list li:nth-child(1){bottom:15.4rem;left:0px; }.footer_nav_show .list li:nth-child(2){bottom:12.4rem;left:30%;margin-left:-2.2rem; }.footer_nav_show .list li:nth-child(3){bottom:7.4rem;left:45%;margin-left:-2.2rem; }.footer_nav_show .list li:nth-child(4){left:50%;margin-left:-2.2rem;bottom:.5rem; }.footer_nav_show .list li:nth-child(5){left:.5rem;bottom:.5rem; }.footer_cart{height:4.4rem;width:4.4rem;background:red;position:fixed;color:#fff;bottom:.5rem;right:.5rem;text-align:center;border-radius:50%; }.footer_cart img{width:1.8rem;height:1.8rem;margin-top:.4rem; }.footer_cart p{position:relative;top:-0.2rem; }

/*# sourceMappingURL=index.css.map*/

View Code

home.component.html

热销榜