排序

src/App.vue

@@ -4,6 +4,7 @@
     <BHeader></BHeader>
     <BContent></BContent>
     <BNavSide></BNavSide>
+    <div class="wnd-mask" ref="mask"></div>
   </div>
 </template>
 
@@ -35,4 +36,14 @@ export default {
     min-width 990px
     tap-highlight-color transparent
     -webkit-tap-highlight-color transparent
+    .wnd-mask
+      position fixed
+      width 100%
+      height 150%
+      background-color #000
+      opacity .5!important
+      z-index 10005
+      top 0px
+      left 0px
+      transition .2s
 </style>

src/components/nav/BNavSide.vue

@@ -1,50 +1,11 @@
 <template>
-	<div class="index-nav nav-side" style="opacity: 1; display: block; top: 0px; left: auto; right: 0px;">
+	<div class="index-nav nav-side" style="opacity: 1; display: block; top: 100px; left: auto; right: 0px;">
 		<div class="border"></div>
 		<div class="nav-list">
-			<div class="n-i sortable">
-				<div class="name">直播</div>
+			<div class="n-i sortable" v-for="item in sortValues">
+				<div class="name">{{item}}</div>
 			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i sortable">
-				<div class="name">直播</div>
-			</div>
-			<div class="n-i customize" title="自定义">
+			<div class="n-i customize" title="自定义" @click="sort">
 				<i class="n-icon-sort"></i><p>排序</p>
 			</div>
 		</div>
@@ -62,10 +23,19 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
+	computed: {
+		...mapGetters([
+			'sortValues'
+		])
+	},
 	methods: {
 		rotate() {
 			console.log('开始选装')
+		},
+		sort() {
+			console.log('开始排序')
 		}
 	}
 }

src/store/modules/contentStore.js

@@ -21,6 +21,7 @@ const state = {
 	// 默认排序
 	sortKeys: ['douga', 'bangumi', 'music', 'dance', 'game', 'technology', 'life', 'kichiku', 'fashion', 'ad', 'ent', 'movie', 'teleplay'],
 	sortIds: [1, 13, 3, 129, 4, 36, 160, 119, 155, 165, 5, 23, 11],
+	sortValues: ['直播', '动画', '番剧', '音乐', '舞蹈', '游戏', '科技', '生活', '鬼畜', '时尚', '广告', '娱乐', '电影', 'TV剧'],
 	rows: [],
 	ranks: [],
 	rank: {}
@@ -31,7 +32,8 @@ const getters = {
 	sortKeys: state => state.sortKeys,
 	sortIds: state => state.sortIds,
 	ranks: state => state.ranks,
-	rank: state => state.rank
+	rank: state => state.rank,
+	sortValues: state => state.sortValues
 }
 
 const actions = {