chenming
/
561_jiexin
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

更新

master
Wheba 5年前
親
e8a7d6b348
コミット
da697297cd
7個のファイルの変更、280行の追加、42行の削除
分割表示 差分情報を表示
  1. +2
    -0
      src/App.vue
  2. バイナリ
      src/assets/sidebar/arrowBottom.png
  3. バイナリ
      src/assets/sidebar/arrowTop.png
  4. バイナリ
      src/assets/sidebar/btnClose.png
  5. +185
    -0
      src/components/sidebar.vue
  6. +9
    -0
      src/style/animation.css
  7. +84
    -42
      src/views/List.vue

+ 2
- 0
src/App.vue ファイルの表示

@@ -5,10 +5,12 @@
<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/assets/sidebar/arrowBottom.png ファイルの表示

変更前 変更後
幅: 22  |  高さ: 12  |  サイズ: 1.1KB

バイナリ
src/assets/sidebar/arrowTop.png ファイルの表示

変更前 変更後
幅: 22  |  高さ: 12  |  サイズ: 1.2KB

バイナリ
src/assets/sidebar/btnClose.png ファイルの表示

変更前 変更後
幅: 42  |  高さ: 44  |  サイズ: 1.4KB

+ 185
- 0
src/components/sidebar.vue ファイルの表示

@@ -0,0 +1,185 @@
<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>

+ 9
- 0
src/style/animation.css ファイルの表示

@@ -33,3 +33,12 @@
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);}
}

+ 84
- 42
src/views/List.vue ファイルの表示

@@ -1,66 +1,75 @@
<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]];
}
}
}
@@ -68,31 +77,36 @@
</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);
@@ -103,16 +117,44 @@
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;
}
}
}
}

書き込み プレビュー
読み込み中…
キャンセル
保存