Detail-Final

src/pages/detail/Detail.vue

@@ -2,24 +2,57 @@
   <div>
     <detail-banner></detail-banner>
     <detail-header></detail-header>
-    <div class="content"></div>
+    <div class="content"><detail-list :list="list"></detail-list></div>
   </div>
 </template>
 
 <script>
 import DetailBanner from "./components/banner";
-import DetailHeader from "./components/header"
+import DetailHeader from "./components/header";
+import DetailList from "./components/list";
 
 export default {
   name: "Detail",
   components: {
     DetailBanner: DetailBanner,
-    DetailHeader: DetailHeader
+    DetailHeader: DetailHeader,
+    DetailList: DetailList
+  },
+  data: function() {
+    return {
+      list: [
+        {
+          title: "成人票",
+          children: [
+            {
+              title: "成人三馆联票",
+              children: [
+                {
+                  title: "成人三馆联票 - 某一连锁店销售"
+                }
+              ]
+            },
+            {
+              title: "成人五馆联票"
+            }
+          ]
+        },
+        {
+          title: "学生票"
+        },
+        {
+          title: "儿童票"
+        },
+        {
+          title: "特惠票"
+        }
+      ]
+    };
   }
-}
+};
 </script>
 
 <style lang="stylus" scoped>
 .content
   height 50rem
-</style>
+</style>

src/pages/detail/components/header.vue

@@ -64,6 +64,7 @@ export default {
     color #ffffff
     font-size .4rem
 .header-fixed
+  z-index 2
   position fixed
   top 0
   left 0
@@ -83,4 +84,4 @@ export default {
     font-size .4rem
     margin-left .1rem
     color #ffffff
-</style>
+</style>

src/pages/detail/components/list.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="item" v-for="(item, index) of list" :key="index">
+      <div class="item-title border-bottom">
+        <span class="item-title-icon"></span>
+        {{ item.title }}
+        <div v-if="item.children" class="item-children">
+          <!-- 递归组件 -->
+          <detail-list :list="item.children"></detail-list>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailList",
+  props: {
+    list: Array
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.item-title-icon
+  position: relative
+  left: .06rem
+  top: .06rem
+  display: inline-block
+  width: .36rem
+  height: .36rem
+  background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
+  margin-right: .1rem
+  background-size: .4rem 3rem
+.item-title
+  line-height .8rem
+  font-size .32rem
+  padding 0 .2rem
+// 我把item-children卸载item-title下就可以不用设置item-children的样式
+// .item-children
+//   padding 0 .2rem
+</style>