@media (min-width: 768px) {
	#app.container div:first-child {
		flex-direction: row;
		justify-content: space-between;
	}

	#app.pagination {
		position: absolute;
		right: 9%;
		margin-top: 0;
	}
}

/* 新增样式用于布局 */
.main-layout {
	position: relative;
	display: flex;
	margin-top: 1%;
	/* justify-content: flex-start; */
}

.tree-filter {
	/* position: absolute; */
	left: 0;
	top: 0;
	flex: 0 0 10%;
	/* 占20%宽度，可根据需求调整 */
	min-width: 180px;
	/* 最小宽度，防止内容挤压 */
	background: linear-gradient(to bottom, #f9f9f9, #f0f0f0);
	/* 渐变背景 */
	border: 1px solid #ddd;
	border-radius: 5px;
	/* 圆角 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	/* 阴影效果 */
	padding: 15px;
	/* max-height: 400px;
	overflow-y: auto; */
}

.tree-filter span {
	display: block;
	font-size: 14px;
	/* font-weight: bold; */
	margin-bottom: 10px;
	cursor: pointer;
	color: #333;
	border-bottom: 1px solid #ccc;
	/* 底部边框 */
	padding-bottom: 5px;
	position: relative;
	padding-left: 25px;
	z-index: 1;
	/* 赋予树状目录一个较高的堆叠顺序 */
}

/* 加减号样式 */
.tree-filter span::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	/* 图片宽度 */
	height: 18px;
	/* 图片高度 */
	/* background-image: url('../images/icon/zhankai.png'); */
	background-image: url('../images/icon/shouqi.png');
	background-size: cover;
	transition: transform 0.3s ease;
	/* 旋转动画过渡 */
}

.tree-filter span.expanded::before {
	background-image: url('../images/icon/zhankai.png');
	/* background-image: url('../images/icon/shouqi.png'); */
}


.tree-filter ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0px;
}

.tree-filter li {
	font-size: 14px;
	cursor: pointer;
	margin-bottom: 8px;
	color: #666;
	padding: 5px 10px;
	border-radius: 3px;
	/* 子项圆角 */
	transition: background-color 0.3s ease;
	/* 过渡效果 */
}

.tree-filter li.selected {
	background-color: #d1e7dd !important;
	/* 使用!important确保优先级 */
	color: #0f5132 !important;
	font-weight: bold;
	position: relative;
	/* 用于添加视觉指示器 */
	/* 选中时背景和文字颜色 */
}

.tree-filter li:hover {
	color: #0f5132;
	font-weight: bold;
	/* 悬停时文本颜色 */
}



.product-container {
	margin-left: 20%;
	flex: 1;
	/* 占据剩余空间 */
}