feat(ui): 优化管理界面样式和布局

- 为管理页面添加统一的背景、圆角和阴影样式
- 重构多个管理页面的布局结构，添加容器类名
- 将scoped样式改为less语法
- 调整表格和表单的样式和布局
- 优化资源中心和个人资源页面的样式

src/App.vue

@@ -1,35 +1,43 @@
 <template>
-	<a-config-provider :locale="locale" >
+	<a-config-provider :locale="locale">
 		<router-view v-if="$route.meta.fullpage" />
 		<div v-else>
-				<Header/>
-				<div style="width: 100%; overflow-y: scroll;height: 100%; display: flex;  justify-content: center;">
-					<div style="width: 1624px;">
-							<router-view></router-view>
-					</div>
+			<Header />
+			<div
+				style="
+					width: 100%;
+					overflow-y: scroll;
+					height: 100vh;
+					display: flex;
+					justify-content: center;
+					background-color: #f1f2f8;
+				"
+			>
+				<div style="width: 1624px" class="admin-ui-container">
+					<router-view></router-view>
 				</div>
+			</div>
 
-<!--				<Footer/>-->
-
+			<!--				<Footer/>-->
 		</div>
 	</a-config-provider>
-<!--	<a-config-provider :locale="locale">-->
-<!--		1-->
-<!--		<router-view />-->
-<!--	</a-config-provider>-->
+	<!--	<a-config-provider :locale="locale">-->
+	<!--		1-->
+	<!--		<router-view />-->
+	<!--	</a-config-provider>-->
 </template>
 
 <script setup name="App">
 	import i18n from '@/locales'
 	import { globalStore } from '@/store'
-	import Header from "@/views/portal/components/Header.vue";
-	import Footer from "@/views/portal/components/Footer.vue";
+	import Header from '@/views/portal/components/Header.vue'
+	import Footer from '@/views/portal/components/Footer.vue'
 
 	const store = globalStore()
 	store.initTheme()
 	const locale = i18n.global.messages.value[i18n.global.locale.value].lang
 
 	onMounted(() => {
-		console.log("经过我吗1231312312312")
+		console.log('经过我吗1231312312312')
 	})
 </script>

src/style/index.less

@@ -516,3 +516,11 @@ body,
 		display: none!important;
 	}
 }
+
+// 全局改添加背景，加圆角，加阴影
+.admin-ui-container {
+	background-color: #fff;
+	padding: 20px;
+	margin-top: 20px;
+	border-radius: 8px;
+}

src/views/announcementManagement/index.vue

@@ -1,15 +1,17 @@
 <template>
-				<QueryView style="margin-top: 10px" @handlerSearch="handlerSearch"></QueryView>
-				<!-- 新建课程按钮 -->
-				<a-button style="margin-top: 10px" type="primary" @click="handleNewCourse">
-					<template #icon>
-						<PlusOutlined />
-					</template>
-					新建
-				</a-button>
-				<div style="height: 10px"></div>
-				<ListView ref="listViewRef" style="margin-top: 10px" @handleEdit="handleEdit"></ListView>
-		<DialogView ref="dialogViewRef"  @handleAddItem="handleAddItem"></DialogView>
+	<div class="announcement-management">
+		<QueryView style="margin-top: 10px" @handlerSearch="handlerSearch"></QueryView>
+		<!-- 新建课程按钮 -->
+		<a-button style="margin-top: 10px" type="primary" @click="handleNewCourse">
+			<template #icon>
+				<PlusOutlined />
+			</template>
+			新建
+		</a-button>
+		<div style="height: 10px"></div>
+		<ListView ref="listViewRef" style="margin-top: 10px" @handleEdit="handleEdit"></ListView>
+		<DialogView ref="dialogViewRef" @handleAddItem="handleAddItem"></DialogView>
+	</div>
 </template>
 
 <script setup>
@@ -40,7 +42,7 @@
 		dialogViewRef.value.open()
 	}
 	const handleAddItem = () => {
-		console.log('要去刷新',listViewRef.value)
+		console.log('要去刷新', listViewRef.value)
 		// 在这里添加新建课程的逻辑
 		listViewRef.value.getList()
 	}
@@ -74,7 +76,7 @@
 	})
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 	.desc p {
 		margin-bottom: 1em;
 	}

src/views/classManagement/index.vue

@@ -1,17 +1,17 @@
 <template>
-	<div >
-				<QueryView style="margin-top: 10px" @handlerSearch="handlerSearch"></QueryView>
-				<!-- 新建课程按钮 -->
-				<a-button style="margin-top: 10px" type="primary" @click="handleNewCourse">
-					<template #icon>
-						<PlusOutlined />
-					</template>
-					新建
-				</a-button>
-				<div style="height: 10px"></div>
-				<ListView ref="listViewRef" style="margin-top: 10px" @handleEdit="handleEdit"></ListView>
-			</div>
-		<DialogView ref="dialogViewRef" @handleAddItem="handleAddItem"></DialogView>
+	<div class="class-management">
+		<QueryView style="margin-top: 10px" @handlerSearch="handlerSearch"></QueryView>
+		<!-- 新建课程按钮 -->
+		<a-button style="margin-top: 10px" type="primary" @click="handleNewCourse">
+			<template #icon>
+				<PlusOutlined />
+			</template>
+			新建
+		</a-button>
+		<div style="height: 10px"></div>
+		<ListView ref="listViewRef" style="margin-top: 10px" @handleEdit="handleEdit"></ListView>
+	</div>
+	<DialogView ref="dialogViewRef" @handleAddItem="handleAddItem"></DialogView>
 </template>
 
 <script setup>
@@ -79,7 +79,7 @@
 	})
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 	.desc p {
 		margin-bottom: 1em;
 	}

src/views/courseManagement/index.vue

@@ -1,15 +1,15 @@
 <template>
-	<div >
-				<QueryView style="margin-top: 10px" @handlerSearch="handlerSearch"></QueryView>
-				<!-- 新建课程按钮 -->
-				<a-button style="margin-top: 10px" type="primary" @click="handleNewCourse">
-					<template #icon>
-						<PlusOutlined />
-					</template>
-					新建课程
-				</a-button>
-				<div style="height: 10px"></div>
-				<ListView ref="listViewRef" style="margin-top: 10px" @handleEdit="handleEdit"></ListView>
+	<div class="course-management">
+		<QueryView style="margin-top: 10px" @handlerSearch="handlerSearch"></QueryView>
+		<!-- 新建课程按钮 -->
+		<a-button style="margin-top: 10px" type="primary" @click="handleNewCourse">
+			<template #icon>
+				<PlusOutlined />
+			</template>
+			新建课程
+		</a-button>
+		<div style="height: 10px"></div>
+		<ListView ref="listViewRef" style="margin-top: 10px" @handleEdit="handleEdit"></ListView>
 		<DialogView ref="dialogViewRef"></DialogView>
 	</div>
 </template>
@@ -81,7 +81,7 @@
 	})
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 	.desc p {
 		margin-bottom: 1em;
 	}

src/views/myResources/myResources.vue

@@ -9,82 +9,95 @@
 			<a-tab-pane key="4" tab="回收站"></a-tab-pane>
 		</a-tabs>
 		<!-- 搜索和操作区域 -->
-		<a-row :gutter="12" style="margin-bottom: 16px">
-			<a-col :span="18">
-				<a-input v-model:value="formState.fileName" placeholder="请输入资源名称" style="width: 17%" />
-				<a-cascader
-					style="width: 17%; margin-left: 8px"
-					v-model:value="majorIdName"
-					:options="collegeMajorOptions"
-					:fieldNames="{ label: 'name', value: 'id', children: 'children' }"
-					placeholder="请选择院系"
-					changeOnSelect
-					@change="changeCollegeMajor"
-				/>
-				<!-- <a-select
-					v-model:value="formState.majorId"
-					style="width: 150px; margin-left: 8px"
-					:fieldNames="{ label: 'majorName', value: 'majorCode' }"
-					:options="majorOptions"
-					placeholder="请选择专业"
-				/> -->
-				<a-cascader
-					style="width: 17%; margin-left: 8px"
-					v-model:value="resourceName"
-					:options="resourceTypeOptions"
-					:fieldNames="{ label: 'name', value: 'id', children: 'children' }"
-					placeholder="请选择资源类型"
-					changeOnSelect
-					@change="changeCollegeResource"
-				/>
-				<!-- <a-select
-					v-model:value="formState.resourceType"
-					style="width: 150px; margin-left: 8px"
-					:options="resourceTypeOptions"
-					:fieldNames="{ label: 'name', value: 'id', children: 'children' }"
-					placeholder="请选择资源类型"
-				/> -->
-				<a-select
-					v-model:value="formState.suffix"
-					style="width: 17%; margin-left: 8px"
-					:options="fileformatOptions"
-					:fieldNames="{ label: 'fileExtendName', value: 'fileExtendName', children: 'children' }"
-					placeholder="请选择资源格式"
-				/>
-				<a-select
-					v-if="['0,3', '0', '3'].includes(formState.verifyStatus)"
-					v-model:value="isVerifyStatus"
-					placeholder="请选择资源状态"
-					style="width: 17%; margin-left: 8px"
-				>
-					<a-select-option value="0">未发布</a-select-option>
-					<a-select-option value="3">未通过</a-select-option>
-				</a-select>
-				<!-- <a-select
-					v-model:value="formState.suffix"
-					style="width: 200px; margin-left: 8px"
-					:options="suffixTypeOptions"
-					placeholder="请选择课件格式"
-				/> -->
+		<a-card style="margin-bottom: 16px">
+			<!-- 第一行：名称、院系、类型 -->
+			<a-row :gutter="16" style="margin-bottom: 16px">
+				<a-col :span="6">
+					<span>名称：</span>
+					<a-input
+						v-model:value="formState.fileName"
+						placeholder="请输入名字"
+						style="width: calc(100% - 50px); margin-left: 8px"
+					/>
+				</a-col>
+				<a-col :span="6">
+					<span>层级：</span>
+					<a-cascader
+						style="width: calc(100% - 50px); margin-left: 8px"
+						v-model:value="majorIdName"
+						:options="collegeMajorOptions"
+						:fieldNames="{ label: 'name', value: 'id', children: 'children' }"
+						placeholder="请选择"
+						changeOnSelect
+						@change="changeCollegeMajor"
+					/>
+				</a-col>
+				<a-col :span="6">
+					<span>类型：</span>
+					<a-cascader
+						style="width: calc(100% - 50px); margin-left: 8px"
+						v-model:value="resourceName"
+						:options="resourceTypeOptions"
+						:fieldNames="{ label: 'name', value: 'id', children: 'children' }"
+						placeholder="请选择"
+						changeOnSelect
+						@change="changeCollegeResource"
+					/>
+				</a-col>
+				<a-col :span="6" style="text-align: right">
+					<a-button type="primary" @click="handleSearch">查询</a-button>
+				</a-col>
+			</a-row>
 
-			</a-col>
-			<a-col :span="6" style="text-align: right">
-				<a-button
-					type="primary"
-					style="margin-right: 8px"
-					v-if="formState.verifyStatus === '0,3' && !pageType"
-					@click="batchPublish"
-					:disabled="selectedRowKeys.length === 0"
-				>
-					+ 批量发布
-				</a-button>
-				<a-button type="primary" v-if="!pageType" @click="showUploadModal">+ 上传资源</a-button>
-			</a-col>
-		</a-row>
-		<div>
-			<a-button type="primary" style="margin-left: 0px" @click="handleSearch">查询</a-button>
-			<a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
-		</div>
+			<!-- 第二行：状态、租户、创建人 -->
+			<a-row :gutter="16">
+				<a-col :span="6">
+					<span>状态：</span>
+					<a-select
+						v-if="['0,3', '0', '3'].includes(formState.verifyStatus)"
+						v-model:value="isVerifyStatus"
+						placeholder="请选择"
+						style="width: calc(100% - 50px); margin-left: 8px"
+					>
+						<a-select-option value="0">未发布</a-select-option>
+						<a-select-option value="3">未通过</a-select-option>
+					</a-select>
+					<a-select
+						v-else
+						v-model:value="formState.suffix"
+						style="width: calc(100% - 50px); margin-left: 8px"
+						:options="fileformatOptions"
+						:fieldNames="{ label: 'fileExtendName', value: 'fileExtendName', children: 'children' }"
+						placeholder="请选择"
+					/>
+				</a-col>
+				<a-col :span="6">
+					<span>租户：</span>
+					<a-input placeholder="请选择" style="width: calc(100% - 50px); margin-left: 8px" disabled />
+				</a-col>
+				<a-col :span="6">
+					<span>创建人：</span>
+					<a-input placeholder="请输入名字" style="width: calc(100% - 64px); margin-left: 8px" />
+				</a-col>
+				<a-col :span="6" style="text-align: right">
+					<a-button @click="handleReset">重置</a-button>
+				</a-col>
+			</a-row>
+			<a-row style="margin-top: 16px">
+				<a-col :span="24" style="text-align: left">
+					<a-button
+						type="primary"
+						style="margin-right: 8px"
+						v-if="formState.verifyStatus === '0,3' && !pageType"
+						@click="batchPublish"
+						:disabled="selectedRowKeys.length === 0"
+					>
+						+ 批量发布
+					</a-button>
+					<a-button type="primary" v-if="!pageType" @click="showUploadModal">+ 新增</a-button>
+				</a-col>
+			</a-row>
+		</a-card>
 		<!-- 表格 -->
 		<a-table
 			:columns="columnsPending"
@@ -94,7 +107,7 @@
 			bordered
 			:row-key="(record) => record.id"
 			:row-selection="rowSelection"
-			:scroll="{ x: 1500, y: 300 }"
+			:scroll="{ x: 1300 }"
 		>
 			<template #bodyCell="{ column, text, record }">
 				<template
@@ -255,9 +268,9 @@
 		<!-- 发布模态框 -->
 		<releaseModal v-if="releaseVisible" @close="releaseVisible = false" @confirm="releaseConfirm"></releaseModal>
 		<div style="height: 20px"></div>
-		<span>容量</span><span style="color: #6abe39"> {{bToGb(storageMin)}} GB</span><span> / </span><span style="color: red">{{bToGb(storageMax)}} GB</span>
+		<span>容量</span><span style="color: #6abe39"> {{ bToGb(storageMin) }} GB</span><span> / </span
+		><span style="color: red">{{ bToGb(storageMax) }} GB</span>
 	</a-card>
-
 </template>
 
 <script setup>
@@ -556,20 +569,19 @@
 			})
 	}
 
-	const bToMb = (b) =>{
+	const bToMb = (b) => {
 		if (typeof b !== 'number' || b < 0) {
-			throw new Error('请输入有效的非负数字');
+			throw new Error('请输入有效的非负数字')
 		}
-		return (b / (1024*1024)).toFixed(2); // 保留两位小数
+		return (b / (1024 * 1024)).toFixed(2) // 保留两位小数
 	}
-	const bToGb = (b) =>{
+	const bToGb = (b) => {
 		if (typeof b !== 'number' || b < 0) {
-			throw new Error('请输入有效的非负数字');
+			throw new Error('请输入有效的非负数字')
 		}
-		return (b / (1024 * 1024 * 1024)).toFixed(2); // 保留两位小数
+		return (b / (1024 * 1024 * 1024)).toFixed(2) // 保留两位小数
 	}
 
-
 	const changeCollegeMajor = (value, selectedOptions) => {
 		console.log('Selected:', value, selectedOptions)
 		if (!value) {
@@ -910,7 +922,7 @@
 		getFileformat()
 		getResourceTypeTree()
 		getListData()
-		getstorage().then(res => {
+		getstorage().then((res) => {
 			console.log('容量', res)
 
 			storageMin.value = res.data.storageSize

src/views/myResources/personalResources/index.vue

@@ -1,26 +1,26 @@
 <template>
-	<div>
+	<div class="personal-resources">
 		<!-- 主要内容区域 -->
-				<div style="width: 100%;  display: flex">
-					<div class="sidebar-menu" style="width: 15%">
-						<ul>
-							<li
-								v-for="item in menuItems"
-								:class="{ active: activeKey === item.key }"
-								:key="item.key"
-								@click="handleClick(item)"
-							>
-								<component :is="item.icon" />
-								<!-- <AliwangwangOutlined /> -->
-								{{ item.label }}
-							</li>
-						</ul>
-					</div>
-					<div style="width: 88%">
-						<component :is="currentComponent"></component>
-					</div>
-				</div>
+		<div style="width: 100%; display: flex">
+			<div class="sidebar-menu" style="width: 15%">
+				<ul>
+					<li
+						v-for="item in menuItems"
+						:class="{ active: activeKey === item.key }"
+						:key="item.key"
+						@click="handleClick(item)"
+					>
+						<component :is="item.icon" />
+						<!-- <AliwangwangOutlined /> -->
+						{{ item.label }}
+					</li>
+				</ul>
+			</div>
+			<div style="width: 88%">
+				<component :is="currentComponent"></component>
+			</div>
 		</div>
+	</div>
 </template>
 
 <script setup>
@@ -67,7 +67,7 @@
 			icon: StarOutlined,
 			label: '我的收藏',
 			title: '我的收藏'
-		},
+		}
 		// {
 		// 	key: 'albums',
 		// 	icon: BookOutlined,
@@ -170,7 +170,7 @@
 	})
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 	.a-menu {
 		width: 256px;
 		height: 600px;
@@ -187,6 +187,7 @@
 		height: 100vh;
 		overflow-y: auto;
 	}
+
 	.sidebar-menu {
 		flex: 1;
 		//background-color: #ffff;
@@ -207,6 +208,7 @@
 		background-color: #e6f7ff;
 		color: #ccc;
 	}
+
 	.active {
 		color: #ffff;
 		background-color: #1073cff7;

src/views/resourceCenter/index.vue

@@ -1,77 +1,77 @@
 <template>
-	<div>
-		<ComplexChoices/>
+	<div class="resource-center">
+		<ComplexChoices />
 		<div style="height: 20px"></div>
 		<a-row :gutter="16">
 			<a-col :span="18">
-				<ResourceList/>
+				<ResourceList />
 			</a-col>
 			<a-col :span="6">
-				<SidebarRecommend @handlerItem="handlerItemSidebar"/>
-				<Correlation @handlerItem="handlerItemCorrelation"/>
+				<SidebarRecommend @handlerItem="handlerItemSidebar" />
+				<Correlation @handlerItem="handlerItemCorrelation" />
 			</a-col>
 		</a-row>
 	</div>
 </template>
 
 <script setup>
-import Header from '@/views/portal/components/Header.vue'
-import BreadCrumb from '@/views/portal/components/BreadCrumb.vue'
-import Footer from '@/views/portal/components/Footer.vue'
-import ComplexChoices from './components/ComplexChoices.vue'
-import ResourceList from './components/ResourceList.vue'
-import SidebarRecommend from './components/SidebarRecommend.vue'
-import Correlation from './components/Correlation.vue'
-import {useRouter, useRoute} from 'vue-router'
+	import Header from '@/views/portal/components/Header.vue'
+	import BreadCrumb from '@/views/portal/components/BreadCrumb.vue'
+	import Footer from '@/views/portal/components/Footer.vue'
+	import ComplexChoices from './components/ComplexChoices.vue'
+	import ResourceList from './components/ResourceList.vue'
+	import SidebarRecommend from './components/SidebarRecommend.vue'
+	import Correlation from './components/Correlation.vue'
+	import { useRouter, useRoute } from 'vue-router'
 
-import EventBus from '@/utils/EventBus'
+	import EventBus from '@/utils/EventBus'
 
-const router = useRouter()
-const indexType = ref('resourceCenter')
-const onChangeCurrent = (current) => {
-	indexType.value = current
+	const router = useRouter()
+	const indexType = ref('resourceCenter')
+	const onChangeCurrent = (current) => {
+		indexType.value = current
 
-	router.push({
-		path: '/' + current
-	})
-}
-const handlerItemSidebar = (item) => {
-	// emit('handlerItemSidebar', item)
-}
+		router.push({
+			path: '/' + current
+		})
+	}
+	const handlerItemSidebar = (item) => {
+		// emit('handlerItemSidebar', item)
+	}
 
-const handlerItemCorrelation = (item) => {
-	// emit('handlerItemSidebar', item)
-}
-const handleOpenResourceDetails = (item) => {
-	// emit('handlerItemSidebar', item)
-	// indexType.value = 'resourceDetails'
-	// nextTick(() => {
-	// 	console.log('看看呢', ResourceDetailsRef.value, item) /
-	// 		// if (ResourceDetailsRef.value) {
-	// 		// 	ResourceDetailsRef.value.setData(item)
-	// 		// }
-	// })
-	console.log('看看呢', item)
-	router.push({
-		path: '/portal/resourceDetails',
-		query: {
-			id: item.id
-		}
+	const handlerItemCorrelation = (item) => {
+		// emit('handlerItemSidebar', item)
+	}
+	const handleOpenResourceDetails = (item) => {
+		// emit('handlerItemSidebar', item)
+		// indexType.value = 'resourceDetails'
+		// nextTick(() => {
+		// 	console.log('看看呢', ResourceDetailsRef.value, item) /
+		// 		// if (ResourceDetailsRef.value) {
+		// 		// 	ResourceDetailsRef.value.setData(item)
+		// 		// }
+		// })
+		console.log('看看呢', item)
+		router.push({
+			path: '/portal/resourceDetails',
+			query: {
+				id: item.id
+			}
+		})
+	}
+	onMounted(() => {
+		console.log('经过我 2 ')
+		// setTimeout(() => {
+		// 	images.value = 'http://192.168.1.245:10005/education/2025/7/2/1940361083973906434.jpg'
+		// }, 10000)
 	})
-}
-onMounted(() => {
-	console.log('经过我 2 ')
-	// setTimeout(() => {
-	// 	images.value = 'http://192.168.1.245:10005/education/2025/7/2/1940361083973906434.jpg'
-	// }, 10000)
-})
-EventBus.off('openResourceDetails', handleOpenResourceDetails)
-EventBus.on('openResourceDetails', handleOpenResourceDetails)
+	EventBus.off('openResourceDetails', handleOpenResourceDetails)
+	EventBus.on('openResourceDetails', handleOpenResourceDetails)
 </script>
 
-<style scoped>
-.content {
-	padding-left: 10%;
-	padding-right: 30%;
-}
+<style lang="less" scoped>
+	.content {
+		padding-left: 10%;
+		padding-right: 30%;
+	}
 </style>

src/views/resourceConversionLog/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="resource-conversion-log">
-		<a-card title="资源转换日志" :bordered="false">
+		<a-card title="资源转换日志" :bordered="false" class="scroll-container"> </a-card>
+		<a-card style="margin-bottom: 16px">
 			<!-- 搜索区域 -->
 			<div class="search-area">
 				<a-form layout="inline" :model="searchForm">
@@ -25,7 +26,8 @@
 					</a-form-item>
 				</a-form>
 			</div>
-
+		</a-card>
+		<a-card>
 			<!-- 表格 -->
 			<a-table
 				:columns="columns"
@@ -142,7 +144,7 @@
 	// 分页配置
 	const pagination = reactive({
 		current: 1,
-		pageSize: 20,
+		pageSize: 10,
 		total: 0,
 		showSizeChanger: true,
 		showQuickJumper: true,
@@ -264,18 +266,22 @@
 			userId: record.userId,
 			userFileId: record.userFileId
 		}
-		resourceAuditApi.transcodingResource(params).then((res) => {
-			if (res.code === 200) {
-				message.success(response.msg || '转换成功')
-			} else {
-				message.error(response.msg || '转换失败')
-			}
-		}).catch((err) => {
-			console.error('获取转换日志失败:', error)
-			message.error('获取数据失败')
-		}).finally(() => {
-			fetchData()
-		})
+		resourceAuditApi
+			.transcodingResource(params)
+			.then((res) => {
+				if (res.code === 200) {
+					message.success(response.msg || '转换成功')
+				} else {
+					message.error(response.msg || '转换失败')
+				}
+			})
+			.catch((err) => {
+				console.error('获取转换日志失败:', error)
+				message.error('获取数据失败')
+			})
+			.finally(() => {
+				fetchData()
+			})
 	}
 
 	// 获取状态文本
@@ -331,15 +337,20 @@
 	})
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 	.resource-conversion-log {
 		padding: 20px;
+		// border: 1px solid red;
+		.scroll-container {
+			// border: 1px solid blue;
+			padding: 0;
+			margin: 0;
+		}
 	}
 
 	.search-area {
 		margin-bottom: 16px;
 		padding: 16px;
-		background: #fafafa;
 		border-radius: 6px;
 	}