vue+element 实现商城主题开发的示例代码(3)

<style lang="scss" scoped> .set-phone { width: calc(100% - 400px); padding: 5%; .el-form-item { margin-bottom: 18px; } .cla-p { padding: 0; margin: 0; color: #666; line-height: 40px; } } .app-phone { position: fixed; top: 70px; right: 5%; width: 350px; box-shadow: 0 0 10px rgba(50, 50, 50, 0.2); perspective:150; transition: all .2s linear; overflow: hidden; &:hover { transform: translate3d(0,0,4px); box-shadow: 0 4px 8px #e1e1e1; box-shadow: 0 0 20px rgba(50, 50, 50, 0.3); } .header-img { display: block; width: 96%; margin: 4px 2%; } .el-menu-demo { display: flex; justify-content: space-around; margin: 2px 4% 0 4%; border: none; } .el-menu--horizontal > .el-menu-item { height: auto; line-height: normal; padding: 4px 12px; margin: 0; } .banner-img { display: block; width: 100%; height: 100%; } .nav { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 10px 0; background: white; background-size: cover; background-repeat:no-repeat; .nav-item { width: 50px; height: 80px; margin: 0 15px; text-align: center; .item-img { width: 50px; height: 50px; } .item-name { padding: 0; margin: 2px 0; font-size: 12px; } } } .goods { width: 100%; } .footer { display: flex; flex-wrap: wrap; justify-content: space-around; width: 100%; height: 50px; padding: 0; margin: 0; .item { list-style: none; width: 50px; text-align: center; .item-img { width: 30px; height: 30px; } .item-name { padding: 0; margin: 0; font-size: 10px; color: white; } } } } </style>