vue实现首页导航面板组件
发布时间:2020-12-16 23:08:10 所属栏目:百科 来源:网络整理
导读:效果图 ? ? src/pages/home/nav.vue template div class="nav" ul class="nav-list" li class="nav-item" v- for ="(nav,index) in navItems" :key="index" a :href="nav.linkUrl" class="nav-link" img :src="nav.picUrl" alt="" class="nav-pic" p class="
效果图 ? ? src/pages/home/nav.vue <template> <div class="nav"> <ul class="nav-list"> <li class="nav-item" v-for="(nav,index) in navItems" :key="index"> <a :href="nav.linkUrl" class="nav-link"> <img :src="nav.picUrl" alt="" class="nav-pic"> <p class="nav-title">{{nav.text}}</p> </a> </li> </ul> </div> </template> <script> export default { name:'HomeNav',data(){ return{ navItems:[ { linkUrl:'www.baidu.com'),text:'团购' },{ linkUrl:'www.baidu.com''assets/img/nav/nav-item-3.png''assets/img/nav/nav-item-5.png''assets/img/nav/nav-item-7.png''assets/img/nav/nav-item-9.png' } ],} } } </script> <style scoped> .nav{ width:100%; padding-top:15px; background:#fff; } .nav-list{ display:flex; flex-wrap:wrap; } .nav-item{ width:20%; } .nav-link{ display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom:15px; } .nav-pic{ width:60%; margin-bottom:7px; } </style> ? src/pages/home/index.vue <template> <div class="home"> <scrollbar> <slider /> <home-nav /> </scrollbar> <!-- 该页面自己的子路由 --> <router-view></router-view> </div> </template> <script> import Slider from 'components/slider'; import Scrollbar from 'components/scroll'; import HomeNav from './nav'; export { name:"Home" .home{ width:100%; height:100%; } </style> ? src/assets/scss/index.scss @import 'icons'; *{ margin:0; padding:0; } html,body{ // 必须设置,否则内容滚动效果无法实现 width:100%; height:100%; } ul,li{ list-style:none; } a{ text-decoration: none; color:#333; } ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- ruby-on-rails – 如何在Ruby on Rails 3.2.8中的LocalStor
- 查询参数(postgresql.conf设置),如“max_connections”
- gitlab - 解决访问 gitlab 网站出现 502 报错信息的问题
- postgresql – 如何在pg_stat_activity.query字段中检查预准
- Cocos2d-x下Lua调用自定义C++类和函数的最佳实践
- ruby-on-rails-3 – Rspec Capybara:undefined last_respo
- flex TabNavigator 切换之前给出提示(转)
- ruby – Heroku Rails应用程序资产管理
- ajax基础框架
- c# – 将Mvvm Light更新为版本5后,我需要做哪些更改才能使R