fix: 全局配置

src/components/JCollapse/index.vue

@@ -48,7 +48,7 @@ const handleEdit = (item) => {
 	button {
 		background-color: #f4f5fa !important;
 	}
-	.coll-left-title,span {
+	.coll-left-title,span.el-collapse-item__title {
 		order: 1;
 		margin-left: 5px;
 	}

src/views/marketing/config/i18n/zh-cn.ts

@@ -14,6 +14,10 @@ export default {
 		deleteListText: '删除分组',
 		updateText: '修改',
 		disposition:'全局配置',
-		deleteText: '删除'
+		deleteText: '删除',
+		cancel: '取消',
+		addDomain: '添加域名',
+		deleteDomain: '删除域名',
+
 	},
 };

src/views/marketing/config/index.vue

@@ -3,7 +3,7 @@
 		<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
 			<el-tab-pane :label="t('marketingConfig.ipList')" name="first" class="layout-padding-auto layout-padding-view">
 				<Title :title="t('marketingConfig.ipList')" />
-				<div class="p-4 rounded" style="background-color: #f8f8f8">
+				<div class="p-4 rounded">
 					<el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addIpList') }}</el-button>
 					<JCollapse
 						@update="(item) => console.log(item)"
@@ -16,7 +16,7 @@
 			</el-tab-pane>
 			<el-tab-pane :label="t('marketingConfig.domainList')" name="second" class="layout-padding-auto layout-padding-view">
 				<Title class="" :title="t('marketingConfig.domainList')" />
-				<div class="p-4 rounded" style="background-color: #f8f8f8">
+				<div class="p-4 rounded">
 					<el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addDomainList') }}</el-button>
 					<JCollapse
 						@update="(item) => console.log(item)"
@@ -29,13 +29,13 @@
 			</el-tab-pane>
 			<el-tab-pane :label="t('marketingConfig.disposition')" name="third" class="layout-padding-auto layout-padding-view">
 				<Title class="" :title="t('marketingConfig.disposition')" />
-				<div class="p-4 rounded" style="background-color: #f8f8f8">
+				<div class="p-4 rounded">
 					<JCollapse
 						:data="[
 							{
 								title: 'IP集合',
 								id: '1',
-							}
+							},
 						]"
 						@update="(item) => console.log(item)"
 						@delete="(item) => console.log(item)"
@@ -43,7 +43,58 @@
 						:updateText="t('marketingConfig.updateText')"
 					>
 						<template #default>
-							<div>11111</div>
+							<div class="border-b p-2 items-center flex flex-wrap">
+								<span class="mr-2">白名单</span>
+								<el-popover v-for="item in data" :key="item.id" width="200" trigger="hover" placement="top">
+									<div class="flex flex-wrap">
+										<span v-for="ip in item.ips" :key="ip" class="ml-2">
+											{{ ip }}
+										</span>
+									</div>
+									<template #reference>
+										<el-tag effect="light" color="#f4f4f4" round class="ml-1 cursor-pointer">
+											{{ item.title }}
+										</el-tag>
+									</template>
+								</el-popover>
+							</div>
+							<div class="p-2 items-center flex flex-wrap">
+								<span class="mr-2">黑名单</span>
+								<el-popover v-for="item in data" :key="item.id" width="200" trigger="hover" placement="top">
+									<div class="flex flex-wrap">
+										<span v-for="ip in item.ips" :key="ip" class="ml-2">
+											{{ ip }}
+										</span>
+									</div>
+									<template #reference>
+										<el-tag effect="light" color="#f4f4f4" round class="ml-1 cursor-pointer">
+											{{ item.title }}
+										</el-tag>
+									</template>
+								</el-popover>
+							</div>
+						</template>
+					</JCollapse>
+
+					<JCollapse
+					    class="mt-4"
+						:data="[
+							{
+								title: '域名集合',
+								id: '1',
+							},
+						]"
+						@update="(item) => console.log(item)"
+						@delete="(item) => closeTags = !closeTags"
+						:deleteText="closeTags ? t('marketingConfig.cancel') : t('marketingConfig.deleteDomain')"
+						:updateText="t('marketingConfig.addDomain')"
+					>
+						<template #default>
+							<div class="border-b p-2 items-center flex flex-wrap">
+								<el-tag v-for="item in whiteList" :key="item" effect="light" :closable="closeTags" color="#f4f4f4" round class="ml-1 cursor-pointer">
+									{{ item.label }}
+								</el-tag>
+							</div>
 						</template>
 					</JCollapse>
 				</div>
@@ -63,7 +114,7 @@ const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue')
 const { t } = useI18n();
 // 定义变量内容
 const activeName = ref('first');
-
+const closeTags = ref(false);
 const data = ref([
 	{
 		title: '分组1',
@@ -81,6 +132,9 @@ const data = ref([
 		ips: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
 	},
 ]);
+const whiteList = ref([{ label: '站大' }, { label: '站而' }, { label: '站撒' }, { label: '站爱' }]);
+const blackList = ref([{ label: '站1' }, { label: '站2' }, { label: '站3' }, { label: '站4' }]);
+
 const menuDialogRef = ref();
 const state: BasicTableProps = reactive<BasicTableProps>({
 	pageList: pageList, // H
@@ -99,8 +153,11 @@ const onOpenEditMenu = (type: string, row: any) => {
 // 删除操作
 const handleDelete = async (ids: string[]) => {};
 </script>
-<style scoped lang="scss">
-.el-tabs__header {
-	margin-bottom: 0;
+<style  lang="scss">
+.is-top {
+	margin-bottom: 0 !important;
+}
+.el-collapse-item__content {
+	padding-bottom: 0 !important;
 }
 </style>