fix: 修改订阅通知样式
This commit is contained in:
100011797
parent
c305f45727
commit
e5e1d1e0bd
|
|
@ -8,9 +8,6 @@
|
|||
<div class="box-item" v-for="item in getData" :key="item.id">
|
||||
<slot name="card" v-bind="item"></slot>
|
||||
</div>
|
||||
<div class="box-item">
|
||||
<slot name="add"></slot>
|
||||
</div>
|
||||
<div class="box-btn" v-if="(pageIndex + 1) * showLength < data.length">
|
||||
<div class="box-item-action" @click="onRight">
|
||||
<AIcon type="RightOutlined" />
|
||||
|
|
@ -63,14 +60,13 @@ const onLeft = () => {
|
|||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
margin: 8px 0;
|
||||
.box-item {
|
||||
margin: 0 6px;
|
||||
max-width: 48px;
|
||||
margin: 0 12px;
|
||||
max-width: 60px;
|
||||
}
|
||||
|
||||
.box-btn {
|
||||
margin-right: 12px;
|
||||
.box-item-action {
|
||||
width: 12px;
|
||||
background-color: #F7F8FA;
|
||||
|
|
@ -79,6 +75,7 @@ const onLeft = () => {
|
|||
font-size: 12px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #EFF2FE;
|
||||
color: @primary-color;
|
||||
|
|
|
|||
|
|
@ -147,15 +147,19 @@ const onSave = (dt: any) => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.child-item {
|
||||
padding: 5px 20px 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0px 1px 0px 0px #e2e2e2;
|
||||
height: 68px;
|
||||
background: linear-gradient(270deg, #ffffff 0%, #f1f6ff 99%);
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef3;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.child-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
|
|
@ -172,6 +176,7 @@ const onSave = (dt: any) => {
|
|||
|
||||
.child-item-right {
|
||||
display: flex;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,10 +21,9 @@
|
|||
<j-collapse-panel
|
||||
v-for="item in dataSource"
|
||||
:key="item.provider"
|
||||
class="custom"
|
||||
:header="item.name"
|
||||
>
|
||||
<div class="child">
|
||||
<div>
|
||||
<template
|
||||
v-for="child in item.children"
|
||||
:key="child.id"
|
||||
|
|
@ -110,26 +109,32 @@ onMounted(() => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.alert {
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: #999999;
|
||||
line-height: 40px;
|
||||
}
|
||||
.custom {
|
||||
background: #F7F8FA;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
color: #333333;
|
||||
}
|
||||
.child {
|
||||
background-color: white;
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.content-collapse {
|
||||
:deep(.ant-collapse-content > .ant-collapse-content-box) {
|
||||
padding: 0;
|
||||
:deep(.ant-collapse) {
|
||||
border-color: #EBEEF3;
|
||||
background-color: #fff;
|
||||
|
||||
.ant-collapse-item {
|
||||
border: 1px solid #EBEEF3;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ant-collapse-header {
|
||||
background-color: #F7F8FA;
|
||||
height: 42px;
|
||||
}
|
||||
.ant-collapse-content {
|
||||
padding: 17px 21px 7px 21px;
|
||||
}
|
||||
|
||||
.ant-collapse-content-box {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<j-spin :spinning="spinning">
|
||||
<div class="child-item" :class="{ border: !isLast }">
|
||||
<div class="child-item">
|
||||
<div class="child-item-left">
|
||||
<div style="color: #333333">
|
||||
{{ data?.name }}
|
||||
|
|
@ -14,7 +14,10 @@
|
|||
/>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
<div class="child-item-left-auth" :class="{ disabled: !checked }">
|
||||
<div
|
||||
class="child-item-left-auth"
|
||||
:class="{ disabled: !checked }"
|
||||
>
|
||||
<j-tooltip>
|
||||
<template #title>
|
||||
<span v-if="!update">暂无权限，请联系管理员</span>
|
||||
|
|
@ -27,9 +30,17 @@
|
|||
type="text"
|
||||
@click="onAuth"
|
||||
>
|
||||
<span v-if="!auth.length" class="child-item-left-auth-lock" ><AIcon type="LockFilled" /></span>
|
||||
<span v-else class="child-item-left-auth-key"><AIcon type="KeyOutlined" /></span>
|
||||
<span class="child-item-left-auth-text">权限控制</span>
|
||||
<span
|
||||
v-if="!auth.length"
|
||||
class="child-item-left-auth-lock"
|
||||
><AIcon type="LockFilled"
|
||||
/></span>
|
||||
<span v-else class="child-item-left-auth-key"
|
||||
><AIcon type="KeyOutlined"
|
||||
/></span>
|
||||
<span class="child-item-left-auth-text"
|
||||
>权限控制</span
|
||||
>
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
|
|
@ -99,25 +110,15 @@
|
|||
</template>
|
||||
</MCarousel>
|
||||
|
||||
<div class="box-item-add">
|
||||
<div class="box-item-img">
|
||||
<j-tooltip
|
||||
:title="!add ? '暂无权限，请联系管理员' : ''"
|
||||
>
|
||||
<j-button
|
||||
:disabled="!add"
|
||||
type="text"
|
||||
@click="onAdd"
|
||||
>
|
||||
<AIcon
|
||||
style="font-size: 20px"
|
||||
type="PlusOutlined"
|
||||
/>
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
<div class="box-item-text"></div>
|
||||
</div>
|
||||
<j-tooltip :title="!add ? '暂无权限，请联系管理员' : ''">
|
||||
<j-button
|
||||
class="box-item-add"
|
||||
:disabled="!add"
|
||||
@click="onAdd"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</j-spin>
|
||||
|
|
@ -304,12 +305,15 @@ const onAction = (e: boolean) => {
|
|||
role: {
|
||||
idList: [],
|
||||
},
|
||||
permissions: props.provider === 'alarm' ? [
|
||||
{
|
||||
id: 'alarm-config',
|
||||
actions: ['query'],
|
||||
},
|
||||
] : [],
|
||||
permissions:
|
||||
props.provider === 'alarm'
|
||||
? [
|
||||
{
|
||||
id: 'alarm-config',
|
||||
actions: ['query'],
|
||||
},
|
||||
]
|
||||
: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -406,15 +410,19 @@ const onSave = (_data: any) => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.child-item {
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 68px;
|
||||
background: linear-gradient(270deg, #ffffff 0%, #f1f6ff 99%);
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef3;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.child-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
margin-left: 24px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
|
|
@ -435,19 +443,20 @@ const onSave = (_data: any) => {
|
|||
color: #666666;
|
||||
}
|
||||
.child-item-left-auth-key {
|
||||
color: #00C800;
|
||||
color: #00c800;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.child-item-left-auth-lock{
|
||||
.child-item-left-auth-lock {
|
||||
color: @primary-color;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.child-item-left-auth-key, .child-item-left-auth-lock {
|
||||
.child-item-left-auth-key,
|
||||
.child-item-left-auth-lock {
|
||||
color: #666666 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -460,19 +469,14 @@ const onSave = (_data: any) => {
|
|||
|
||||
.box-item {
|
||||
cursor: pointer;
|
||||
width: 48px;
|
||||
margin: 0 2px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.box-item-img {
|
||||
background-color: #fff;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box-item-text {
|
||||
|
|
@ -485,21 +489,27 @@ const onSave = (_data: any) => {
|
|||
|
||||
.box-item-add {
|
||||
cursor: pointer;
|
||||
background-color: #f8f9fc;
|
||||
// width: 54px;
|
||||
background-color: #F7F8FA;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
justify-content: center;
|
||||
color: #666666;
|
||||
border: none;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
margin: 0 16px;
|
||||
|
||||
&:hover {
|
||||
background-color: #eff2fe;
|
||||
color: #2f54eb;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.border {
|
||||
box-shadow: 0px 1px 0px 0px #e2e2e2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<page-container>
|
||||
<FullPage>
|
||||
<div class="content">
|
||||
<div>
|
||||
<div style="margin-bottom: 15px;">
|
||||
<div class="alert">
|
||||
<AIcon type="InfoCircleOutlined" />
|
||||
启用通知类型后，你可以为每种通知类型配置不同的通知方式、通知模板、接收人。
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
<div class="content-collapse">
|
||||
<j-collapse :bordered="false" v-model:activeKey="activeKey" expand-icon-position="right">
|
||||
<!-- <template #expandIcon="{ isActive }">
|
||||
<template #expandIcon="{ isActive }">
|
||||
<AIcon
|
||||
type="CaretRightOutlined"
|
||||
:style="{
|
||||
|
|
@ -19,11 +19,10 @@
|
|||
}deg)`,
|
||||
}"
|
||||
/>
|
||||
</template> -->
|
||||
</template>
|
||||
<j-collapse-panel
|
||||
v-for="item in dataSource"
|
||||
:key="item.provider"
|
||||
class="custom"
|
||||
>
|
||||
<template #header>
|
||||
<div>
|
||||
|
|
@ -31,7 +30,7 @@
|
|||
<span style="margin-left: 10px;" class="alert" v-if="item.provider === 'alarm'">注意：接收人需要有告警配置页面查询权限，才能收到告警类通知</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="child">
|
||||
<div>
|
||||
<template
|
||||
v-for="(child, index) in item.children"
|
||||
:key="child.provider"
|
||||
|
|
@ -142,7 +141,6 @@ onMounted(() => {
|
|||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: 100%;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
|
||||
|
|
@ -153,27 +151,31 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
.alert {
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
line-height: 40px;
|
||||
// background-color: #f6f6f6;
|
||||
}
|
||||
.custom {
|
||||
background: #F7F8FA;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
color: #333333;
|
||||
}
|
||||
.child {
|
||||
background-color: white;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.content-collapse {
|
||||
:deep(.ant-collapse-content > .ant-collapse-content-box) {
|
||||
padding: 0;
|
||||
:deep(.ant-collapse) {
|
||||
border-color: #EBEEF3;
|
||||
background-color: #fff;
|
||||
|
||||
.ant-collapse-item {
|
||||
border: 1px solid #EBEEF3;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ant-collapse-header {
|
||||
background-color: #F7F8FA;
|
||||
height: 42px;
|
||||
}
|
||||
.ant-collapse-content {
|
||||
padding: 17px 21px 7px 21px;
|
||||
}
|
||||
|
||||
.ant-collapse-content-box {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue