ZBLOG

{item?.name} {item?.subNode.map((item1, index1) => (

以下是基于你提供的 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; // 假设价格为红色
            }
        }
    }
}

使用说明

  1. 结构:LESS 使用嵌套规则来表示父子关系,因此 .home-popupItem 下的所有子类都会在其内部定义。
  2. 属性:可以根据需要添加颜色、字体、边距等属性。
  3. 命名约定:遵循 BEM(块、元素、修饰符)命名约定,可以让代码更具可读性和维护性。

请根据你的具体需求修改或扩展这些样式。如果有特定设计要求或者需要进一步帮助,请告诉我!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20328

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?