以下是基于你提供的 JSX 结构生成的 LESS 样式结构。这个样式框架提供了一些基本的样式定义,方便你根据实际需要进行调整。
.home-popupItem {
// 主项样式
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 10px;
border-radius: 5px;
background-color: #fff;
&-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
}
&-content {
// 子项容器样式
margin-top: 5px;
.home-popupItem-content-subItem {
// 子项样式
padding: 8px;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none; // 最后一个子项不显示底部边框
}
&-title {
font-size: 14px;
color: #555;
margin-bottom: 4px; // 标题与价格之间的间距
}
&-price {
font-size: 12px;
color: #f00; // 假设价格为红色
}
}
}
}
使用说明
- 结构:LESS 使用嵌套规则来表示父子关系,因此
.home-popupItem
下的所有子类都会在其内部定义。 - 属性:可以根据需要添加颜色、字体、边距等属性。
- 命名约定:遵循 BEM(块、元素、修饰符)命名约定,可以让代码更具可读性和维护性。
请根据你的具体需求修改或扩展这些样式。如果有特定设计要求或者需要进一步帮助,请告诉我!
内容由零声教学AI助手提供,问题来源于学员提问