更新

src/App.vue

 		<audio ref="bgAudio">
 			<source src="http://static.jiyou-tech.com/546/resource/assets/sound/music.mp3" type="audio/mpeg">
 		</audio>
+		<!-- <sidebar></sidebar> -->
 	</div>
 </template>
 <script>
 	import BtnMusic from './components/music.vue'
+	// import Sidebar from './components/sidebar.vue'
 	export default {
 		name: 'APP',
 		data(){

src/components/sidebar.vue

+<template>
+	<div ref="sidebar" id="sidebar">
+		<div class="sidebarMiddle">
+			<img class="btnClose" :src="getImg('btnClose.png')" @click="close" />
+			<div style="margin-bottom: calc(136/750*100vw);width: 100%;"></div>
+			<div class="treeNode" :key="item1.title" v-for="(item1,index1) in list">
+				<div class="title titleBox1" :class="{selected:item1.show}" v-text="item1.title" @click="show1(index1)"></div>
+				<div class="treeNodeContent" v-for="(item2,index2) in item1.children" v-show="item1.show">
+					<div class="title titleBox2" :class="{selected:item2.show}" v-text="item2.title" @click="show2(index1,index2)"></div>
+					<transition name="fade">
+						<div class="treeNodeItem" v-show="item2.show">
+							<div class="title titleBox3" v-for="(item3,index3) in item2.children" v-text="item3" @click="show3(index1,index2,item3)"></div>
+						</div>
+					</transition>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+	export default {
+		name: 'Sidebar',
+		computed: mapState(['imgBaseUrl', 'pagePath']),
+		data() {
+			return {
+				list: [{
+					title: '手机门店',
+					show: false,
+					children: [{
+						title: '标准门店',
+						show: false,
+						children: ['店外', '店内', '柜台', '收银台', '合规物料', '浏览全部物料']
+					}, {
+						title: '高产门店',
+						show: false,
+						children: ['店外', '店内', '柜台', '收银台', '合规物料', '浏览全部物料']
+					}]
+				}, {
+					title: '家电门店',
+					show: false,
+					children: [{
+						title: '标准门店',
+						show: false,
+						children: ['店外', '展示区', '收银台', '合规物料', '浏览全部物料']
+					}, {
+						title: '高产门店',
+						show: false,
+						children: ['店外', '展示区', '收银台', '合规物料', '浏览全部物料']
+					}]
+				}, {
+					title: '二轮车门店',
+					show: false,
+					children: [{
+						title: '标准门店',
+						show: false,
+						children: ['店外', '展示区', '收银台', '合规物料', '浏览全部物料']
+					}, {
+						title: '高产门店',
+						show: false,
+						children: ['店外', '展示区', '收银台', '合规物料', '浏览全部物料']
+					}]
+				}]
+			}
+		},
+		methods: {
+			getImg(img) {
+				if (this.imgBaseUrl) {
+					return this.imgBaseUrl + 'sidebar/' + img;
+				} else {
+					return require('../assets/' + 'sidebar/' + img);
+				}
+			},
+			open() {
+				this.$refs.sidebar.style.left = '0%';
+			},
+			close() {
+				this.$refs.sidebar.style.left = '-100%';
+			},
+			show1(index) {
+				this.list[index].show = !this.list[index].show;
+			},
+			show2(index1, index2) {
+				this.list[index1].children[index2].show = !this.list[index1].children[index2].show;
+			},
+			show3(index1, index2, title) {
+				this.close()
+				console.log(this.pagePath[index1][index2][title])
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	#sidebar {
+		position: fixed;
+		top: 0;
+		left: 0%;
+		width: calc(593/750*100vw);
+		height: 100%;
+		background-image: linear-gradient(rgba(48, 53, 56, 0.9), rgba(22, 20, 17, 0.9));
+		border-top-right-radius: calc(88/750*100vw);
+		border-bottom-right-radius: calc(88/750*100vw);
+		transition: left .5s;
+
+		.sidebarMiddle {
+			position: absolute;
+			left: 0;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 100%;
+			height: calc(1206/750*100vw);
+
+			.btnClose {
+				position: absolute;
+				top: 0;
+				left: calc(48/750*100vw);
+				width: calc(42/750*100vw);
+			}
+
+			.treeNode {
+				position: relative;
+				width: 100%;
+
+				.title {
+					position: relative;
+					height: calc(94/750*100vw);
+					line-height: calc(94/750*100vw);
+					color: #aeaeae;
+					border-bottom: 1px solid #43423f;
+					text-align: left;
+					background: url('../assets/sidebar/arrowTop.png');
+					background-size: calc(22/750*100vw) calc(12/750*100vw);
+					background-repeat: no-repeat;
+					background-position: calc(100% - 121/750*100vw) center;
+				}
+
+				.title.selected {
+					color: #ffffff;
+					background: url('../assets/sidebar/arrowBottom.png');
+					background-size: calc(22/750*100vw) calc(12/750*100vw);
+					background-repeat: no-repeat;
+					background-position: calc(100% - 121/750*100vw) center;
+				}
+
+				.titleBox1 {
+					padding-left: calc(58/750*100vw);
+					font-size: calc(40/750*100vw);
+				}
+
+				.titleBox2 {
+					padding-left: calc(99/750*100vw);
+					font-size: calc(32/750*100vw);
+				}
+
+				.treeNodeItem {
+					background-color: rgba(0, 0, 0, 0.5);
+					overflow: hidden;
+
+					.titleBox3 {
+						padding-left: calc(128/750*100vw);
+						font-size: calc(28/750*100vw);
+						background: transparent;
+					}
+				}
+			}
+		}
+	}
+
+	.fade-enter-active,
+	.fade-leave-active {
+		transition: opacity .8s;
+	}
+
+	.fade-enter,
+	.fade-leave-to
+
+	/* .fade-leave-active below version 2.1.8 */
+		{
+		opacity: 0;
+	}
+</style>

src/style/animation.css

     0%{transform:rotate(0deg);}
     100%{transform:rotate(360deg);}
 }
+
+@keyframes enterMc{
+    0%{opacity:0;transform:translateX(20vw);}
+    100%{opacity:1;transform:translateX(0vw);}
+}
+@-webkit-keyframes enterMc{
+    0%{opacity:0;transform:translateX(20vw);}
+    100%{opacity:1;transform:translateX(0vw);}
+}

src/views/List.vue

 <template>
 	<div class="list">
 		<img class="showBg" :src="getImg('bg.jpg')" />
-		<img class="btnBack" :src="getImg('back.png')" @click="toBackHome"/>
+		<img class="btnBack" :src="getImg('back.png')" @click="toBackHome" />
 		<div class="middleContainer">
-			<p class="title"v-text="titleList[step-1]"></p>
+			<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 v-if="step==1">
+						<div class="item item1" :class="[mcEnd?'':'enterMc'+index]" :key='item' v-for="(item,index) in list1" v-text="item" @click="select(index)" @touchstart="touchStart(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>
+						<div class="item item1" :class="[mcEnd?'':'enterMc'+index]" :key='item' v-for="(item,index) in list2" v-text="item" @click="select(index)" @touchstart="touchStart(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>
+						<div class="item item2" :class="[mcEnd?'':'enterMc'+index]" :key='item' v-for="(item,index) in list3[selectList[0]]" v-text="item" @click="select(index)" @touchstart="touchStart(index)"></div>
 					</template>
 				</div>
 			</div>
 		</div>
-	</div> 
+	</div>
 </template>
 
 <script>
 	import {
 		mapState
 	} from 'vuex'
-	export default{
-		name:'List',
+	export default {
+		name: 'List',
 		computed: mapState(['pagePath']),
-		data(){
-			return{
-				step:1,
-				selectList:[0,0,''],
-				titleList:['请选择品类','请选择店铺类型','请选择场景'],
-				list1:['手机门店','家电门店','二轮车门店'],
-				list2:['标准门店','高产门店'],
-				list3:[['店外','店内','柜台','收银台','合规物料','浏览全部物料'],['店外','展示区','收银台','合规物料','浏览全部物料'],['店外','展示区','收银台','合规物料','浏览全部物料']]
+		data() {
+			return {
+				step: 1,
+				selectList: [0, 0, ''],
+				mcEnd:true,
+				titleList: ['请选择品类', '请选择店铺类型', '请选择场景'],
+				list1: ['手机门店', '家电门店', '二轮车门店'],
+				list2: ['标准门店', '高产门店'],
+				list3: [
+					['店外', '店内', '柜台', '收银台', '合规物料', '浏览全部物料'],
+					['店外', '展示区', '收银台', '合规物料', '浏览全部物料'],
+					['店外', '展示区', '收银台', '合规物料', '浏览全部物料']
+				]
 			}
 		},
-		methods:{
+		methods: {
 			getImg(img) {
 				if (this.imgBaseUrl) {
-					return this.imgBaseUrl+'list/' + img;
+					return this.imgBaseUrl + 'list/' + img;
 				} else {
-					return require('../assets/'+'list/' + img);
+					return require('../assets/' + 'list/' + img);
 				}
 			},
-			toBackHome(){
-				if(this.step==1){
+			toBackHome() {
+				if (this.step == 1) {
 					this.$router.replace('/')
-				}else{
+				} else {
 					this.step--;
 				}
 			},
-			select(index){
-				if(this.step<3){
-					this.selectList[this.step-1]=index;
+			touchStart(){
+				this.mcEnd=true;
+			},
+			select(index) {
+				this.mcEnd=false;
+				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]];
+				} 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{
+	@import url("../style/animation.css");
+
+	.list {
 		height: 100%;
-		background-color: #61686d;
-		.btnBack{
+
+		.btnBack {
 			position: absolute;
 			width: calc(24/750*100vw);
 			top: calc(30/750*100vw);
 			left: calc(46/750*100vw);
 		}
-		.middleContainer{
-			.title{
+
+		.middleContainer {
+			.title {
 				color: #FFFFFF;
 				font-size: 9.4vw;
 				margin: 21.5vw auto 0 auto;
 			}
-			.btnContainer{
+
+			.btnContainer {
 				position: relative;
 				width: calc(446/750*100vw);
 				margin: 15.8vw auto 0 auto;
-				.BtnBox{
+
+				.BtnBox {
 					position: relative;
 					width: 100%;
+
 					// overflow: hidden;
-					.item{
+					.item {
 						position: relative;
 						width: 100%;
 						height: calc(91/750*100vw);
 						color: #ffffff;
 						font-size: 5.5vw;
 						transform: scale(1);
+						cursor: pointer;
 					}
-					.item:active{
-						transform: scale(0.9);
+
+					.item:active {
+						transform:scale(0.9);
 					}
-					.item1{
+
+					.item1 {
 						margin-top: calc(93/750*100vw);
 					}
-					.item2{
+
+					.item2 {
 						margin-bottom: calc(42/750*100vw);
 					}
+					.enterMc0{
+						animation: enterMc .5s both;
+						-webkit-animation: enterMc .5s both;
+					}
+					.enterMc1{
+						animation: enterMc .5s .3s both;
+						-webkit-animation: enterMc .5s .3s both;
+					}
+					.enterMc2{
+						animation: enterMc .5s .6s both;
+						-webkit-animation: enterMc .5s .6s both;
+					}
+					.enterMc3{
+						animation: enterMc .5s .9s both;
+						-webkit-animation: enterMc .5s .9s both;
+					}
+					.enterMc4{
+						animation: enterMc .5s 1.2s both;
+						-webkit-animation: enterMc .5s 1.2s both;
+					}
+					.enterMc5{
+						animation: enterMc .5s 1.5s both;
+						-webkit-animation: enterMc .5s 1.5s both;
+					}
 				}
 			}
 		}