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

  <div> <div class="set-phone">       <p class="cla-p">店铺街</p> $set(theme,'shopStreetImg', res)" :value="theme.shopStreetImg" :maxcount="1">  <p class="cla-p">分类</p> $set(theme,'classifyImg', res)" :value="theme.classifyImg" :maxcount="1">  <p class="cla-p">星级礼包</p> $set(theme,'starBagImg', res)" :value="theme.starBagImg" :maxcount="1">  <p class="cla-p">签到</p> $set(theme,'signInImg', res)" :value="theme.signInImg" :maxcount="1">   <p class="cla-p">元宝商城</p> $set(theme,'yuanbaoShopImg', res)" :value="theme.yuanbaoShopImg" :maxcount="1">  <p class="cla-p">抽奖</p> $set(theme,'luckDrawImg', res)" :value="theme.luckDrawImg" :maxcount="1">  <p class="cla-p">限时秒杀</p> $set(theme,'limitedSeckillImg', res)" :value="theme.limitedSeckillImg" :maxcount="1">  <p class="cla-p">特惠商品</p> $set(theme,'oddsProductImg', res)" :value="theme.oddsProductImg" :maxcount="1">   $set(theme,'navigationBackgroundImg', res)" :value="theme.navigationBackgroundImg" :maxcount="1">   <p class="cla-p">首页未选中图标</p> $set(theme,'homePageIconUnchecked', res)" :value="theme.homePageIconUnchecked" :maxcount="1">  <p class="cla-p">推荐未选中图标</p> $set(theme,'recommendIconUnchecked', res)" :value="theme.recommendIconUnchecked" :maxcount="1">  <p class="cla-p">搜索未选中图标</p> $set(theme,'searchIconUnchecked', res)" :value="theme.searchIconUnchecked" :maxcount="1">  <p class="cla-p">聊天未选中图标</p> $set(theme,'chatIconUnchecked', res)" :value="theme.chatIconUnchecked" :maxcount="1">  <p class="cla-p">个人中心未选中图标</p> $set(theme,'personalCenterIconUnchecked', res)" :value="theme.personalCenterIconUnchecked" :maxcount="1">   <p class="cla-p">首页选中图标</p> $set(theme,'homePageIconChecked', res)" :value="theme.homePageIconChecked" :maxcount="1">  <p class="cla-p">推荐选中图标</p> $set(theme,'recommendIconChecked', res)" :value="theme.recommendIconChecked" :maxcount="1">  <p class="cla-p">搜索选中图标</p> $set(theme,'searchIconChecked', res)" :value="theme.searchIconChecked" :maxcount="1">  <p class="cla-p">聊天选中图标</p> $set(theme,'chatIconChecked', res)" :value="theme.chatIconChecked" :maxcount="1">  <p class="cla-p">个人中心选<span style="color:transparent">本文来源gaodai#ma#com搞*!代#%^码网%</span>中图标</p> $set(theme,'personalCenterIconChecked', res)" :value="theme.personalCenterIconChecked" :maxcount="1">  保存</div><!-- 显示样式 --><div class="app-phone">  热门女装百货鞋包食品母婴  <div class="nav"> <div class="nav-item"> <p class="item-name">店铺街</p></div><div class="nav-item"> <p class="item-name">分类</p></div><div class="nav-item"> <p class="item-name">星级礼包</p></div><div class="nav-item"> <p class="item-name">签到</p></div><div class="nav-item"> <p class="item-name">元宝商城</p></div><div class="nav-item"> <p class="item-name">抽奖</p></div><div class="nav-item"> <p class="item-name">限时秒杀</p></div><div class="nav-item"> <p class="item-name">特惠商品</p></div></div><ul class="footer"> <li class="item"> <p class="item-name">首页</p></li><li class="item"> <p class="item-name">推荐</p></li><li class="item"> <p class="item-name">搜索</p></li><li class="item"> <p class="item-name">聊天</p></li><li class="item"> <p class="item-name">个人中心</p></li></ul></div></div>

  .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; } } } }