vue 下列表侧滑操作实例代码详解

2020-06-13 10:38:26易采站长站整理

if (!this.$store.state.authList['AUT20180705181442eQbFSPyr7HTOKji']) {
this.$store.commit('popSet', {tips: '无权限操作', status: 1, time: 1500});
return;
}
}
this.$router.push('addAwardActivity');
}
},
created () {
this.getActivityList();
},
components: {
TipsBox
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../../common/stylus/mixin'
.lottery-management-wrapper {
width :100%;
position :absolute;
background-color :#ECF0F3;
min-height :100%;
.lottery-management-list-wrapper {
width :100%;
overflow hidden;
.lottery-management-list {
background-color :#fff;
margin-bottom cal(10);
overflow :hidden;
width :200%;
.lottery-management-list-left {
width :cal(750);
float :left;
transition: margin-left .4s;
dl {
overflow :hidden;
height :cal(128);
dd {
float left;
width :80%;
h3 {
font-size :cal(28);
color: #4A4A4A;
margin:cal(32) 0 0 cal(50);
}
p {
font-size : cal(18)
color:#4A4A4A;
margin:cal(16) 0 0 cal(50);
}
}
dt {
float :left;
width :20%;
color: #9B9B9B;
font-size :cal(26);
line-height :cal(128);
}
.txt-red {
color:#D0021B;
}
.txt-blue {
color:#4A90E2;
}
}
}
.lottery-management-list-right {
float :left;
overflow: hidden;
font-size :cal(24);
line-height :cal(128);
color :#ffffff;
text-align :center;
a {
float: left;
background-color :#70AEF6;
width :cal(190);
color :#ffffff;
}
span {
float: left;
width :cal(128);
background-color :#FE3A32;
}
}
}
}
.add-wrapper {
height: cal(100)
box-sizing: border-box
padding-top: cal(24)
margin-bottom: cal(72)
background: #fff
text-align: center
font-size: 0
margin-top :cal(20)
.icon-tianjia1 {
color: #fe6f3f
font-size: cal(54)
vertical-align: top
margin-right: cal(12)
}
.text {
line-height: cal(60)
vertical-align: top
color: #fe6f3f
font-size: cal(30)
}
}
h4 {
color: #D0021B;
font-size :cal(24);
text-align: center;
margin-bottom :cal(100);
}
.mask-wrapper {
position: fixed
left: 0
right: 0
bottom: 0
top: 0
background: rgba(0,0,0,.5)