新增目录页

src/store/index.js

 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-		imgBaseUrl:''
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+	state: {
+		imgBaseUrl: '',
+		pagePath: [
+			[
+				{'店外':'','店内':'','柜台':'','展示区':'','收银台':'','合规物料':'','浏览全部物料':''},//标准
+				{'店外':'','店内':'','柜台':'','展示区':'','收银台':'','合规物料':'','浏览全部物料':''},//高产
+			], //手机店
+			[
+				{'店外':'','店内':'','柜台':'','展示区':'','收银台':'','合规物料':'','浏览全部物料':''},//标准
+				{'店外':'','店内':'','柜台':'','展示区':'','收银台':'','合规物料':'','浏览全部物料':''},//高产
+			], //家电
+			[
+				{'店外':'','店内':'','柜台':'','展示区':'','收银台':'','合规物料':'','浏览全部物料':''},//标准
+				{'店外':'','店内':'','柜台':'','展示区':'','收银台':'','合规物料':'','浏览全部物料':''},//高产
+			], //二轮车
+		]
+	},
+	mutations: {},
+	actions: {},
+	modules: {}
 })

src/views/List.vue

 <template>
 	<div class="list">
-		<img class="showBg" :src="getImg('showBg.jpg')" />
+		<img class="showBg" :src="getImg('bg.jpg')" />
 		<img class="btnBack" :src="getImg('back.png')" @click="toBackHome"/>
-		<div class="middleContainer"></div>
-	</div>
+		<div class="middleContainer">
+			<p class="title"v-text="titleList[step-1]"></p>
+			<div class="btnContainer">
+				<div class="BtnBox">
+					<table></table>
+					<template v-if="step==1">
+						<div class="item item1" v-for="(item,index) in list1" v-text="item" @click="select(index)"></div>
+					</template>
+					<template v-if="step==2">
+						<div class="item item1" v-for="(item,index) in list2" v-text="item" @click="select(index)"></div>
+					</template>
+					<template v-if="step==3">
+						<div class="item item2" v-for="(item,index) in list3[selectList[0]]" v-text="item" @click="select(index)"></div>
+					</template>
+				</div>
+			</div>
+		</div>
+	</div> 
 </template>
 
 <script>
 	} from 'vuex'
 	export default{
 		name:'List',
+		computed: mapState(['pagePath']),
+		data(){
+			return{
+				step:1,
+				selectList:[0,0,''],
+				titleList:['请选择品类','请选择店铺类型','请选择场景'],
+				list1:['手机门店','家电门店','二轮车门店'],
+				list2:['标准门店','高产门店'],
+				list3:[['店外','店内','柜台','收银台','合规物料','浏览全部物料'],['店外','展示区','收银台','合规物料','浏览全部物料'],['店外','展示区','收银台','合规物料','浏览全部物料']]
+			}
+		},
 		methods:{
 			getImg(img) {
 				if (this.imgBaseUrl) {
 				}
 			},
 			toBackHome(){
-				this.$router.replace('/')
+				if(this.step==1){
+					this.$router.replace('/')
+				}else{
+					this.step--;
+				}
+			},
+			select(index){
+				if(this.step<3){
+					this.selectList[this.step-1]=index;
+					this.step++;
+				}else{
+					this.selectList[this.step-1]=this.list3[this.selectList[0]][index]
+					var path=this.pagePath[this.selectList[0]][this.selectList[1]][this.selectList[2]];
+				}
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped="scoped">
+	@import url("../style/animate.css");
 	.list{
 		height: 100%;
 		background-color: #61686d;
 			top: calc(30/750*100vw);
 			left: calc(46/750*100vw);
 		}
+		.middleContainer{
+			.title{
+				color: #FFFFFF;
+				font-size: 9.4vw;
+				margin: 21.5vw auto 0 auto;
+			}
+			.btnContainer{
+				position: relative;
+				width: calc(446/750*100vw);
+				margin: 15.8vw auto 0 auto;
+				.BtnBox{
+					position: relative;
+					width: 100%;
+					// overflow: hidden;
+					.item{
+						position: relative;
+						width: 100%;
+						height: calc(91/750*100vw);
+						line-height: calc(87/750*100vw);
+						border: calc(2/750*100vw) solid #ffffff;
+						box-sizing: border-box;
+						border-radius: 7vw;
+						color: #ffffff;
+						font-size: 5.5vw;
+						transform: scale(1);
+					}
+					.item:active{
+						transform: scale(0.9);
+					}
+					.item1{
+						margin-top: calc(93/750*100vw);
+					}
+					.item2{
+						margin-bottom: calc(42/750*100vw);
+					}
+				}
+			}
+		}
 	}
 </style>