|
@@ -1,5 +1,5 @@
|
|
<template>
|
|
<template>
|
|
- <div class="fun-list">
|
|
|
|
|
|
+ <div class="fun-list" :class="{'class-type': classType, 'last-row': lastRow}">
|
|
<div class="f-l-left">
|
|
<div class="f-l-left">
|
|
<div class="title_box">
|
|
<div class="title_box">
|
|
<h4 class="list-name">{{ name }}</h4>
|
|
<h4 class="list-name">{{ name }}</h4>
|
|
@@ -19,6 +19,7 @@
|
|
<p class="list-desc">{{ desc }}</p>
|
|
<p class="list-desc">{{ desc }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="f-l-middle">
|
|
<div class="f-l-middle">
|
|
|
|
+ <div class="switch-item sub-title" v-if="classType"><span>{{subTitle}}</span></div>
|
|
<div class="switch-item" v-if="isMailShow">
|
|
<div class="switch-item" v-if="isMailShow">
|
|
<span>邮件提醒</span>
|
|
<span>邮件提醒</span>
|
|
<el-switch :value="emailVal" active-color="#2ABED1" inactive-color="#E3E4E5" :active-value="1" :inactive-value="0"
|
|
<el-switch :value="emailVal" active-color="#2ABED1" inactive-color="#E3E4E5" :active-value="1" :inactive-value="0"
|
|
@@ -65,7 +66,11 @@ export default {
|
|
noMsgtip: {
|
|
noMsgtip: {
|
|
type: [Boolean, Number],
|
|
type: [Boolean, Number],
|
|
default: 0
|
|
default: 0
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ // 分类类别
|
|
|
|
+ classType: String,
|
|
|
|
+ subTitle: String,
|
|
|
|
+ lastRow: Boolean
|
|
},
|
|
},
|
|
components: {
|
|
components: {
|
|
[Switch.name]: Switch,
|
|
[Switch.name]: Switch,
|
|
@@ -91,6 +96,8 @@ export default {
|
|
this.nomsgtipRadio = newVal || 0
|
|
this.nomsgtipRadio = newVal || 0
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ mounted () {
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
onEdit () {
|
|
onEdit () {
|
|
this.$emit('edit', {
|
|
this.$emit('edit', {
|
|
@@ -136,18 +143,28 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
-
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.fun-list {
|
|
.fun-list {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
padding: 12px 0;
|
|
padding: 12px 0;
|
|
-
|
|
|
|
&:not(:last-child) {
|
|
&:not(:last-child) {
|
|
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
|
|
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ &.class-type{
|
|
|
|
+ box-shadow: none;
|
|
|
|
+ padding-top:16px;
|
|
|
|
+ padding-bottom:0;
|
|
|
|
+ .list-desc{
|
|
|
|
+ position: absolute;
|
|
|
|
+ top:17px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &.last-row{
|
|
|
|
+ box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
|
|
|
|
+ padding-bottom:12px;
|
|
|
|
+ }
|
|
.title_box {
|
|
.title_box {
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
|
@@ -231,6 +248,7 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.f-l-left {
|
|
.f-l-left {
|
|
|
|
+ position: relative;
|
|
width: 44%;
|
|
width: 44%;
|
|
@extend .flex-center;
|
|
@extend .flex-center;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -276,6 +294,10 @@ export default {
|
|
>span {
|
|
>span {
|
|
margin-right: 12px;
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
|
|
+ &.sub-title{
|
|
|
|
+ min-width:116px;
|
|
|
|
+ color: #686868;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.edit-text {
|
|
.edit-text {
|
|
@@ -284,7 +306,6 @@ export default {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
::v-deep {
|
|
::v-deep {
|
|
.el-switch__core {
|
|
.el-switch__core {
|
|
width: 48px !important;
|
|
width: 48px !important;
|