三级联动的组件
// 第一个参数：全局组件的名字，第2个参数：组件的名字
Vue.component(TypeNav.name, TypeNav)
三级联动组件
<template>
<div class="type-nav">
<div class="container">
<h2 class="all">全部商品分类</h2>
<nav class="nav">
<a href="###">服装城</a>
<a href="###">美妆馆</a>
<a href="###">尚品汇超市</a>
<a href="###">全球购</a>
<a href="###">闪购</a>
<a href="###">团购</a>
<a href="###">有趣</a>
<a href="###">秒杀</a>
</nav>
<div class="sort">
<div class="all-sort-list2">
<div class="item bo">
<h3>
<a href="">图书、音像、数字商品</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书</a>
</dt>
<dd>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">家用电器</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书1</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">手机、数码、充值</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">充值</a>
</dt>
<dd>
<em>
<a href="recharge.html">充值</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">电子书2</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">电脑、办公</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书3</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>教育</dt>
<dd>
<em>
<a href="">教材教辅</a>
</em>
<em>
<a href="">考试</a>
</em>
<em>
<a href="">外语学习</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>其它</dt>
<dd>
<em>
<a href="">英文原版书</a>
</em>
<em>
<a href="">港台图书</a>
</em>
<em>
<a href="">工具书</a>
</em>
<em>
<a href="">套装书</a>
</em>
<em>
<a href="">杂志/期刊</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">家居、家具、家装、厨具</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书4</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">服饰内衣</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书5</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">个护化妆</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书6</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>教育</dt>
<dd>
<em>
<a href="">教材教辅</a>
</em>
<em>
<a href="">考试</a>
</em>
<em>
<a href="">外语学习</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>其它</dt>
<dd>
<em>
<a href="">英文原版书</a>
</em>
<em>
<a href="">港台图书</a>
</em>
<em>
<a href="">工具书</a>
</em>
<em>
<a href="">套装书</a>
</em>
<em>
<a href="">杂志/期刊</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">运动健康</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书7</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">汽车用品</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书8</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">彩票、旅行</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">理财、众筹</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">母婴、玩具</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">箱包</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">运动户外</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">箱包</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TypeNav',
data () {
return {
}
},
}
</script>
<style scoped lang="less">
.type-nav {
border-bottom: 2px solid #e1251b;
.container {
width: 1200px;
margin: 0 auto;
display: flex;
position: relative;
.all {
width: 210px;
height: 45px;
background-color: #e1251b;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.nav {
a {
height: 45px;
margin: 0 22px;
line-height: 45px;
font-size: 16px;
color: #333;
}
}
.sort {
position: absolute;
left: 0;
top: 45px;
width: 210px;
height: 461px;
position: absolute;
background: #fafafa;
z-index: 999;
.all-sort-list2 {
.item {
h3 {
line-height: 30px;
font-size: 14px;
font-weight: 400;
overflow: hidden;
padding: 0 20px;
margin: 0;
a {
color: #333;
}
}
.item-list {
display: none;
position: absolute;
width: 734px;
min-height: 460px;
background: #f7f7f7;
left: 210px;
border: 1px solid #ddd;
top: 0;
z-index: 9999 !important;
.subitem {
float: left;
width: 650px;
padding: 0 4px 0 8px;
dl {
border-top: 1px solid #eee;
padding: 6px 0;
overflow: hidden;
zoom: 1;
&.fore {
border-top: 0;
}
dt {
float: left;
width: 54px;
line-height: 22px;
text-align: right;
padding: 3px 6px 0 0;
font-weight: 700;
}
dd {
float: left;
width: 415px;
padding: 3px 0 0;
overflow: hidden;
em {
float: left;
height: 14px;
line-height: 14px;
padding: 0 8px;
margin-top: 5px;
border-left: 1px solid #ccc;
}
}
}
}
}
&:hover {
.item-list {
display: block;
}
}
}
}
}
}
}
</style
ListContainer组件
<template>
<div class="list-container">
<div class="sortList clearfix">
<div class="center">
<!--banner轮播-->
<div class="swiper-container" id="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/banner1.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/banner2.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/banner3.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/banner4.jpg" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="right">
<div class="news">
<h4>
<em class="fl">尚品汇快报</em>
<span class="fr tip">更多 ></span>
</h4>
<div class="clearix"></div>
<ul class="news-list unstyled">
<li>
<span class="bold">[特惠]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[公告]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[特惠]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[公告]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[特惠]</span>备战开学季 全民半价购数码
</li>
</ul>
</div>
<ul class="lifeservices">
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">话费</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">机票</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">电影票</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">游戏</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">彩票</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">加油站</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">酒店</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">火车票</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">众筹</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">理财</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">礼品卡</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">白条</span>
</li>
</ul>
<div class="ads">
<img src="./images/ad1.png" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
}
</script>
<style scoped lang="less">
.list-container {
width: 1200px;
margin: 0 auto;
.sortList {
height: 464px;
padding-left: 210px;
.center {
box-sizing: border-box;
width: 740px;
height: 100%;
padding: 5px;
float: left;
}
.right {
float: left;
width: 250px;
.news {
border: 1px solid #e4e4e4;
margin-top: 5px;
h4 {
border-bottom: 1px solid #e4e4e4;
padding: 5px 10px;
margin: 5px 5px 0;
line-height: 22px;
overflow: hidden;
font-size: 14px;
.fl {
float: left;
}
.fr {
float: right;
font-size: 12px;
font-weight: 400;
}
}
.news-list {
padding: 5px 15px;
line-height: 26px;
.bold {
font-weight: 700;
}
}
}
.lifeservices {
border-right: 1px solid #e4e4e4;
overflow: hidden;
display: flex;
flex-wrap: wrap;
.life-item {
border-left: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
margin-right: -1px;
height: 64px;
text-align: center;
position: relative;
cursor: pointer;
width: 25%;
.list-item {
background-image: url(./images/icons.png);
width: 61px;
height: 40px;
display: block;
}
.service-intro {
line-height: 22px;
width: 60px;
display: block;
}
&:nth-child(1) {
.list-item {
background-position: 0px -5px;
}
}
&:nth-child(2) {
.list-item {
background-position: -62px -5px;
}
}
&:nth-child(3) {
.list-item {
background-position: -126px -5px;
}
}
&:nth-child(4) {
.list-item {
background-position: -190px -5px;
}
}
&:nth-child(5) {
.list-item {
background-position: 0px -76px;
}
}
&:nth-child(6) {
.list-item {
background-position: -62px -76px;
}
}
&:nth-child(7) {
.list-item {
background-position: -126px -76px;
}
}
&:nth-child(8) {
.list-item {
background-position: -190px -76px;
}
}
&:nth-child(9) {
.list-item {
background-position: 0px -146px;
}
}
&:nth-child(10) {
.list-item {
background-position: -62px -146px;
}
}
&:nth-child(11) {
.list-item {
background-position: -126px -146px;
}
}
&:nth-child(12) {
.list-item {
background-position: -190px -146px;
}
}
}
}
.ads {
margin-top: 5px;
img {
opacity: 0.8;
transition: all 400ms;
&:hover {
opacity: 1;
}
}
}
}
}
}
</style>
复习:重点
1:swiper|lodash|moment插件工作的时候经常使用----【API：有时间翻看一下】
2:$nextTick,组件实例的方法。
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
1)合并参数*****
为什么需要合并参数（query|params）:因为这些参数，对于search是有用的，因为search通过这些参数
向服务器发请求，需要把这些参数携带给服务器，服务器就会返回相应的用户的搜索的数据，search就可以进行展示。
1.1:开发的三级联动业务，当你点击a标签的时候，会进行路由的跳转，将产品的名字与id传递给search模块----（query）
1.2:点击搜索按钮的时候，用户输入进来的关键字，点击按钮的时候会通过params参数传递给search模块-----（params）
1.3路由跳转（home->search）,两个地方，三级联动（typeNav）、Header组件（搜索按钮）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
