0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修改订阅通知样式

This commit is contained in:
100011797 2023-07-18 15:12:31 +08:00
parent c305f45727
commit e5e1d1e0bd
5 changed files with 115 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/MCarousel/index.vue
View File

@ -8,9 +8,6 @@
<div class="box-item" v-for="item in getData" :key="item.id"> <div class="box-item" v-for="item in getData" :key="item.id">
<slot name="card" v-bind="item"></slot> <slot name="card" v-bind="item"></slot>
</div> </div>
<div class="box-item">
<slot name="add"></slot>
</div>
<div class="box-btn" v-if="(pageIndex + 1) * showLength < data.length"> <div class="box-btn" v-if="(pageIndex + 1) * showLength < data.length">
<div class="box-item-action" @click="onRight"> <div class="box-item-action" @click="onRight">
<AIcon type="RightOutlined" /> <AIcon type="RightOutlined" />
@ -63,14 +60,13 @@ const onLeft = () => {
.box { .box {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 5px 0; margin: 8px 0;
.box-item { .box-item {
margin: 0 6px; margin: 0 12px;
max-width: 48px; max-width: 60px;
} }
.box-btn { .box-btn {
margin-right: 12px;
.box-item-action { .box-item-action {
width: 12px; width: 12px;
background-color: #F7F8FA; background-color: #F7F8FA;
@ -79,6 +75,7 @@ const onLeft = () => {
font-size: 12px; font-size: 12px;
color: #666666; color: #666666;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #EFF2FE; background-color: #EFF2FE;
color: @primary-color; color: @primary-color;

9
src/views/account/Center/components/Subscribe/components/Item.vue
View File

@ -147,15 +147,19 @@ const onSave = (dt: any) => {
<style lang="less" scoped> <style lang="less" scoped>
.child-item { .child-item {
padding: 5px 20px 0 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 { .child-item-left {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 24px;
div { div {
display: flex; display: flex;
@ -172,6 +176,7 @@ const onSave = (dt: any) => {
.child-item-right { .child-item-right {
display: flex; display: flex;
margin-right: 16px;
} }
} }
</style> </style>

39
src/views/account/Center/components/Subscribe/index.vue
View File

@ -21,10 +21,9 @@
<j-collapse-panel <j-collapse-panel
v-for="item in dataSource" v-for="item in dataSource"
:key="item.provider" :key="item.provider"
class="custom"
:header="item.name" :header="item.name"
> >
<div class="child"> <div>
<template <template
v-for="child in item.children" v-for="child in item.children"
:key="child.id" :key="child.id"
@ -110,26 +109,32 @@ onMounted(() => {
<style lang="less" scoped> <style lang="less" scoped>
.alert { .alert {
height: 40px;
padding-left: 10px; padding-left: 10px;
margin-bottom: 10px;
color: #999999; color: #999999;
line-height: 40px; margin-bottom: 16px;
}
.custom {
background: #F7F8FA;
border: 0;
overflow: hidden;
color: #333333;
}
.child {
background-color: white;
padding-bottom: 24px;
} }
.content-collapse { .content-collapse {
:deep(.ant-collapse-content > .ant-collapse-content-box) { :deep(.ant-collapse) {
padding: 0; 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> </style>

106
src/views/system/NoticeRule/components/Item/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<j-spin :spinning="spinning"> <j-spin :spinning="spinning">
<div class="child-item" :class="{ border: !isLast }"> <div class="child-item">
<div class="child-item-left"> <div class="child-item-left">
<div style="color: #333333"> <div style="color: #333333">
{{ data?.name }} {{ data?.name }}
@ -14,7 +14,10 @@
/> />
</j-tooltip> </j-tooltip>
</div> </div>
<div class="child-item-left-auth" :class="{ disabled: !checked }"> <div
class="child-item-left-auth"
:class="{ disabled: !checked }"
>
<j-tooltip> <j-tooltip>
<template #title> <template #title>
<span v-if="!update">暂无权限，请联系管理员</span> <span v-if="!update">暂无权限，请联系管理员</span>
@ -27,9 +30,17 @@
type="text" type="text"
@click="onAuth" @click="onAuth"
> >
<span v-if="!auth.length" class="child-item-left-auth-lock" ><AIcon type="LockFilled" /></span> <span
<span v-else class="child-item-left-auth-key"><AIcon type="KeyOutlined" /></span> v-if="!auth.length"
<span class="child-item-left-auth-text">权限控制</span> 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-button>
</j-tooltip> </j-tooltip>
</div> </div>
@ -99,25 +110,15 @@
</template> </template>
</MCarousel> </MCarousel>
<div class="box-item-add"> <j-tooltip :title="!add ? '暂无权限，请联系管理员' : ''">
<div class="box-item-img"> <j-button
<j-tooltip class="box-item-add"
:title="!add ? '暂无权限，请联系管理员' : ''" :disabled="!add"
> @click="onAdd"
<j-button >
:disabled="!add" <AIcon type="PlusOutlined" />
type="text" </j-button>
@click="onAdd" </j-tooltip>
>
<AIcon
style="font-size: 20px"
type="PlusOutlined"
/>
</j-button>
</j-tooltip>
</div>
<div class="box-item-text"></div>
</div>
</div> </div>
</div> </div>
</j-spin> </j-spin>
@ -304,12 +305,15 @@ const onAction = (e: boolean) => {
role: { role: {
idList: [], idList: [],
}, },
permissions: props.provider === 'alarm' ? [ permissions:
{ props.provider === 'alarm'
id: 'alarm-config', ? [
actions: ['query'], {
}, id: 'alarm-config',
] : [], actions: ['query'],
},
]
: [],
}, },
}, },
], ],
@ -406,15 +410,19 @@ const onSave = (_data: any) => {
<style lang="less" scoped> <style lang="less" scoped>
.child-item { .child-item {
padding: 0 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 { .child-item-left {
display: flex; display: flex;
align-items: center; align-items: center;
height: 80px; margin-left: 24px;
div { div {
display: flex; display: flex;
@ -435,19 +443,20 @@ const onSave = (_data: any) => {
color: #666666; color: #666666;
} }
.child-item-left-auth-key { .child-item-left-auth-key {
color: #00C800; color: #00c800;
font-size: 18px; font-size: 18px;
margin-right: 10px; margin-right: 10px;
} }
.child-item-left-auth-lock{ .child-item-left-auth-lock {
color: @primary-color; color: @primary-color;
font-size: 18px; font-size: 18px;
margin-right: 10px; margin-right: 10px;
} }
&.disabled { &.disabled {
.child-item-left-auth-key, .child-item-left-auth-lock { .child-item-left-auth-key,
.child-item-left-auth-lock {
color: #666666 !important; color: #666666 !important;
} }
} }
@ -460,19 +469,14 @@ const onSave = (_data: any) => {
.box-item { .box-item {
cursor: pointer; cursor: pointer;
width: 48px; width: 100%;
margin: 0 2px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.box-item-img { .box-item-img {
background-color: #fff;
width: 32px; width: 32px;
height: 32px; height: 32px;
display: flex;
justify-content: center;
align-items: center;
} }
.box-item-text { .box-item-text {
@ -485,21 +489,27 @@ const onSave = (_data: any) => {
.box-item-add { .box-item-add {
cursor: pointer; cursor: pointer;
background-color: #f8f9fc; background-color: #F7F8FA;
// width: 54px; width: 54px;
height: 54px; height: 54px;
display: flex; display: flex;
align-items: center; 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 { &.disabled {
filter: grayscale(100%); filter: grayscale(100%);
} }
} }
&.border {
box-shadow: 0px 1px 0px 0px #e2e2e2;
}
} }
</style> </style>

46
src/views/system/NoticeRule/index.vue
View File

@ -2,7 +2,7 @@
<page-container> <page-container>
<FullPage> <FullPage>
<div class="content"> <div class="content">
<div> <div style="margin-bottom: 15px;">
<div class="alert"> <div class="alert">
<AIcon type="InfoCircleOutlined" /> <AIcon type="InfoCircleOutlined" />
启用通知类型后，你可以为每种通知类型配置不同的通知方式、通知模板、接收人。 启用通知类型后，你可以为每种通知类型配置不同的通知方式、通知模板、接收人。
@ -10,7 +10,7 @@
</div> </div>
<div class="content-collapse"> <div class="content-collapse">
<j-collapse :bordered="false" v-model:activeKey="activeKey" expand-icon-position="right"> <j-collapse :bordered="false" v-model:activeKey="activeKey" expand-icon-position="right">
<!-- <template #expandIcon="{ isActive }"> <template #expandIcon="{ isActive }">
<AIcon <AIcon
type="CaretRightOutlined" type="CaretRightOutlined"
:style="{ :style="{
@ -19,11 +19,10 @@
}deg)`, }deg)`,
}" }"
/> />
</template> --> </template>
<j-collapse-panel <j-collapse-panel
v-for="item in dataSource" v-for="item in dataSource"
:key="item.provider" :key="item.provider"
class="custom"
> >
<template #header> <template #header>
<div> <div>
@ -31,7 +30,7 @@
<span style="margin-left: 10px;" class="alert" v-if="item.provider === 'alarm'">注意：接收人需要有告警配置页面查询权限，才能收到告警类通知</span> <span style="margin-left: 10px;" class="alert" v-if="item.provider === 'alarm'">注意：接收人需要有告警配置页面查询权限，才能收到告警类通知</span>
</div> </div>
</template> </template>
<div class="child"> <div>
<template <template
v-for="(child, index) in item.children" v-for="(child, index) in item.children"
:key="child.provider" :key="child.provider"
@ -142,7 +141,6 @@ onMounted(() => {
padding: 24px; padding: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// height: 100%;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
@ -153,27 +151,31 @@ onMounted(() => {
} }
} }
.alert { .alert {
height: 40px;
padding-left: 10px; padding-left: 10px;
margin-bottom: 10px;
color: rgba(0, 0, 0, 0.55); 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 { .content-collapse {
:deep(.ant-collapse-content > .ant-collapse-content-box) { :deep(.ant-collapse) {
padding: 0; 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> </style>