nav scroll

src/App.vue

@@ -3,8 +3,8 @@
     <TopContainer></TopContainer>
     <BHeader></BHeader>
     <BContent :items="items"></BContent>
-    <BNavSide :options="options"></BNavSide>
-    <!-- <div class="wnd-mask" ref="mask"></div> -->
+    <BNavSide :options="options" v-on:change="isShowMask"></BNavSide>
+    <div class="wnd-mask" ref="mask" v-show="showMask"></div>
   </div>
 </template>
 
@@ -44,7 +44,16 @@ export default {
       }, {
         name: '电影',
         b_id: 'b_movie'
-      }]
+      }],
+      showMask: false
+    }
+  },
+  watch: {
+    options() {
+      console.log('options 变化了')
+    },
+    items() {
+      console.log('items 变化了')
     }
   },
   computed: {
@@ -56,6 +65,12 @@ export default {
       }
       return options
     }
+  },
+  methods: {
+    isShowMask() {
+      console.log('显示阴影')
+      this.showMask = !this.showMask
+    }
   }
 }
 </script>

src/components/content/BContent.vue

@@ -19,7 +19,7 @@
 			<BLive></BLive>
 		</div>
 		<!-- 各分类具体内容 -->
-		<div class="container-row"  v-for="(row, index) in rows" :id="getContentRowId(index)">
+		<div class="container-row"  v-for="(row, index) in rows" :id="getContentRowId(index)"> 
 			<BContentRow :category="sortKeys[index]" :categoryId="sortIds[index]" :row="row"></BContentRow>
 		}
 		</div>

src/components/contentTop/BContentTopItem.vue

@@ -71,7 +71,6 @@ export default {
 				width 100%
 				bottom 0
 				left 0px
-				z-index 1
 				background linear-gradient(transparent,rgba(0,0,0,0.1) 20%,rgba(0,0,0,0.2) 35%,rgba(0,0,0,0.6) 65%,rgba(0,0,0,0.9))
 				border-radius 0 0 4px 4px
 				p

src/components/nav/BNavSide.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="nav-side" :class="{customizing: isSort}">
+	<div class="nav-side" :class="{customizing: isSort}" ref="navSide">
 		<transition name="fade">
 			<div v-if="isSort">
 				<div class="tip"></div>
@@ -172,6 +172,7 @@ export default {
 		//进入排序模式
 		sort() {
 			this.isSort = !this.isSort
+			this.$emit('change')
 		},
 		/** 得到鼠标位置 */
 		getPos(e) {
@@ -181,6 +182,12 @@ export default {
 		/** 滚动事件 */
 		scroll(e) {
 			this.scrollTop = window.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop)
+			if (this.scrollTop >= 300) {
+				this.$refs.navSide.style.top = "0px"
+			} else {
+				this.$refs.navSide.style.top = "240px"
+			}
+			console.log('距离顶部' + this.scrollTop)
 			for (let i = 0; i < this.data.length; i++) {
 				if (this.scrollTop >= this.data[i].offsetTop - this.offset) {
 					this.current = i
@@ -226,7 +233,7 @@ export default {
 		position fixed
 		width 48px
 		text-align center
-		top 0px
+		top 100px
 		left auto
 		right 0px
 		&.customizing

src/store/modules/contentStore.js

@@ -88,6 +88,11 @@ const mutations = {
 	[TYPE.CONTENT_SUCCESS] (state, response) {
 		for(let key of state.sortKeys) {
 			// console.log(JSON.stringify(Object.values(response[key])))
+			// let rowItem = {
+			// 	key: response[key],
+			// 	data: Object.values(response[key])
+			// }
+			// state.rows.push(rowItem)
 			state.rows.push(Object.values(response[key]))
 		}
 	},