.ul-nav-block {
  background-color: $color-white;
  border-radius: $radius-xl;
  overflow: hidden;

  &__item {
    display: flex;
    align-items: center;
    padding: $space-md $space-lg;
    cursor: pointer;
    transition: all .3s;
    color: $color-text;

    &:hover {
      background-color: $color-light-light;
    }

    &.active {
      background-color: $color-primary-base;
      color: $color-white;
    }
  }

  &__icon {
    margin-right: $space-sm;
    font-size: 18px;
    line-height: 1;
  }

  &__title {
    font-size: $font-size-base;
  }
}

.ul-nav-block {
  background-color: var(--ul-color-white);
  border-radius: 12px;
  overflow: hidden;
}
.ul-nav-block__item {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.3s;
  color: var(--ul-color-text);
}
.ul-nav-block__item:hover {
  background-color: var(--ul-color-light-light);
}
.ul-nav-block__item.active {
  background-color: var(--ul-color-primary-base);
  color: var(--ul-color-white);
}
.ul-nav-block__icon {
  margin-right: 8px;
  font-size: 18px;
  line-height: 1;
}
.ul-nav-block__title {
  font-size: 14px;
}

<view class="ul-nav-block" style="width: 160px;">
    <view class="ul-nav-block__item active">
        <view class="ul-nav-block__icon"><i class="fa fa-fw fa-line-chart"></i></view>
        <view class="ul-nav-block__title">首页</view>
    </view>
    <view class="ul-nav-block__item">
        <view class="ul-nav-block__icon"><i class="fa fa-fw fa-list-alt"></i></view>
        <view class="ul-nav-block__title">订单管理</view>
    </view>
    <view class="ul-nav-block__item">
        <view class="ul-nav-block__icon"><i class="fa fa-fw fa-th"></i></view>
        <view class="ul-nav-block__title">产品管理</view>
    </view>
    <view class="ul-nav-block__item">
        <view class="ul-nav-block__icon"><i class="fa fa-fw fa-info-circle"></i></view>
        <view class="ul-nav-block__title">其他</view>
    </view>
</view>

.ul-nav-button {
    &__item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: $space-sm;
        border-radius: $radius-lg;
        padding: $space-sm;
        box-shadow: $shadow-sm;
        background-color: $color-white;
        cursor: pointer;
    }

    
    &__icon {
        margin-right: $space-sm;

        .icon {
            font-size: $font-size-xxxl;
            color: $color-text-placeholder;
        }
    }
    

    &__title {
        color: $color-text;
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
    }

    &__desc {
        color: $color-text-secondary;
        font-size: $font-size-base;
        margin-top: $space-xs;
    }
}

.ul-nav-button__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  background-color: var(--ul-color-white);
  cursor: pointer;
}
.ul-nav-button__icon {
  margin-right: 8px;
}
.ul-nav-button__icon .icon {
  font-size: 38px;
  color: var(--ul-color-text-placeholder);
}
.ul-nav-button__title {
  color: var(--ul-color-text);
  font-size: 16px;
  font-weight: 700;
}
.ul-nav-button__desc {
  color: var(--ul-color-text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

<view class="ul-nav-button">
    <view class="ul-nav-button__item">
        <view class="ul-nav-button__icon"><i class="icon fa fa-plus-circle"></i></view>
        <view class="ul-nav-button__info">
            <view class="ul-nav-button__title">发布公告 </view>
            <view class="ul-nav-button__desc">发布文字/图片和视频.</view>
        </view>
    </view>
    <view class="ul-nav-button__item">
        <view class="ul-nav-button__icon"><i class="icon fa fa-info-circle"></i></view>
        <view class="ul-nav-button__info">
            <view class="ul-nav-button__title">关于 </view>
            <view class="ul-nav-button__desc">查看详细系统信息</view>
        </view>
    </view>
</view>

.ul-nav-card {
    background-color: $color-white;
    border-radius: $radius-base;

    &__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $space-md;
        position: relative;

        & + & {
            border-top: 1px solid $color-border;
        }

        &.disabled {
            color: $color-text-disabled;
            .ul-nav-card__title,
            .ul-nav-card__desc {
                color: $color-text-disabled;
            }
        }
    }

    &__left {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        margin-right: $space-lg;
    }

    &__icon {
        font-size: 24px;
        color: $color-primary-base;
        margin-right: $space-lg;
        flex-shrink: 0;
    }

    &__info {
        flex: 1;
        min-width: 0;
    }

    &__title {
        font-size: $font-size-md;
        color: $color-text;
        margin-bottom: $space-xs;
    }

    &__desc {
        font-size: $font-size-sm;
        color: $color-text-secondary;
        @include text-ellipsis(1);
    }

    &__right {
        flex-shrink: 0;
        .layui-btn + .layui-btn {
            margin-left: $space-md;
        }
    }

    // simple模式
    &.simple {
        background-color: transparent;
        .ul-nav-card__item {
            background-color: $color-white;
            border-radius: $radius-base;
            & + .ul-nav-card__item {
                border-top: none;
                margin-top: $space-md;
            }
        }
        .ul-nav-card__icon {
            display: none;
        }
    }

    // badge模式
    &.badge {
        .ul-nav-card__item {
            overflow: initial;
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 3px;
                height: 30%;
                background-color: $color-primary-base;
            }
        }
    }
}

.ul-nav-card-item {

  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  height: 82px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.ul-nav-card-item-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ul-nav-card-item-icon {
  font-size: 28px;
  border-radius: 5px;
  height: 50px;
  width: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #2E4158;
  color: #fff;
  vertical-align: bottom;
}

.ul-nav-card-item-info {
  margin-left: 10px;
}

.ul-nav-card-item-title {
  font-size: 14px;
  color: #253647;
  font-weight: 700;
  margin-bottom: 4px;
}

.ul-nav-card-item-desc {
  color: #666;
  font-size: 12px;
}

.ul-nav-card-item.disabled .ul-nav-card-item-icon {
  background-color: #908b8b;

}

.ul-nav-card-simple {

  .ul-nav-card-item {
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 8px 18px -8px #aebcca;
    border: unset;
  }

}

.ul-nav-card {
  background-color: var(--ul-color-white);
  border-radius: 4px;
}
.ul-nav-card__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  position: relative;
}
.ul-nav-card__item + .ul-nav-card__item {
  border-top: 1px solid var(--ul-color-border);
}
.ul-nav-card__item.disabled {
  color: var(--ul-color-text-placeholder);
}
.ul-nav-card__item.disabled .ul-nav-card__title, .ul-nav-card__item.disabled .ul-nav-card__desc {
  color: var(--ul-color-text-placeholder);
}
.ul-nav-card__left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-right: 24px;
}
.ul-nav-card__icon {
  font-size: 24px;
  color: var(--ul-color-primary-base);
  margin-right: 24px;
  flex-shrink: 0;
}
.ul-nav-card__info {
  flex: 1;
  min-width: 0;
}
.ul-nav-card__title {
  font-size: 14px;
  color: var(--ul-color-text);
  margin-bottom: 4px;
}
.ul-nav-card__desc {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ul-nav-card__right {
  flex-shrink: 0;
}
.ul-nav-card__right .layui-btn + .layui-btn {
  margin-left: 16px;
}
.ul-nav-card.simple {
  background-color: transparent;
}
.ul-nav-card.simple .ul-nav-card__item {
  background-color: var(--ul-color-white);
  border-radius: 4px;
}
.ul-nav-card.simple .ul-nav-card__item + .ul-nav-card__item {
  border-top: none;
  margin-top: 16px;
}
.ul-nav-card.simple .ul-nav-card__icon {
  display: none;
}
.ul-nav-card.badge .ul-nav-card__item {
  overflow: initial;
}
.ul-nav-card.badge .ul-nav-card__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 30%;
  background-color: var(--ul-color-primary-base);
}
.ul-nav-card-item {
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  height: 82px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ul-nav-card-item-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ul-nav-card-item-icon {
  font-size: 28px;
  border-radius: 5px;
  height: 50px;
  width: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #2E4158;
  color: #fff;
  vertical-align: bottom;
}
.ul-nav-card-item-info {
  margin-left: 10px;
}
.ul-nav-card-item-title {
  font-size: 14px;
  color: #253647;
  font-weight: 700;
  margin-bottom: 4px;
}
.ul-nav-card-item-desc {
  color: #666;
  font-size: 12px;
}
.ul-nav-card-item.disabled .ul-nav-card-item-icon {
  background-color: #908b8b;
}
.ul-nav-card-simple .ul-nav-card-item {
  border-radius: 6px;
  background-color: white;
  box-shadow: 0px 8px 18px -8px #aebcca;
  border: unset;
}

<view class="ul-section">
    <view class="ul-nav-card">
        <view class="ul-nav-card__item">
            <view class="ul-nav-card__left">
                <view class="ul-nav-card__icon"><i class="fa fa-gears"></i></view>
                <view class="ul-nav-card__info">
                    <view class="ul-nav-card__title">登录密码</view>
                    <view class="ul-nav-card__desc">建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。 </view>
                </view>
            </view>
            <view class="ul-nav-card__right">
                <view class="ul-btn ul-btn-sm">修改密码</view>
            </view>
        </view>
        <view class="ul-nav-card__item">
            <view class="ul-nav-card__left">
                <view class="ul-nav-card__icon"><i class="fa fa-gears"></i></view>
                <view class="ul-nav-card__info">
                    <view class="ul-nav-card__title">资金密码</view>
                    <view class="ul-nav-card__desc">资金密码用于提现、绑定银行卡等操作，可保障资金安全 </view>
                </view>
            </view>
            <view class="ul-nav-card__right">
                <view class="ul-btn ul-btn-sm">找回资金密码</view>
                <view class="ul-btn ul-btn-sm">修改资金密码</view>
            </view>
        </view>
        <view class="ul-nav-card__item disabled">
            <view class="ul-nav-card__left">
                <view class="ul-nav-card__icon"><i class="fa fa-gears"></i></view>
                <view class="ul-nav-card__info">
                    <view class="ul-nav-card__title">比特币转出</view>
                    <view class="ul-nav-card__desc">系统维护,不能转出</view>
                </view>
            </view>
            <view class="ul-nav-card__right">
                <view class="ul-btn ul-btn-sm ul-btn-disabled">立即转出</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-nav-card badge">
        <view class="ul-nav-card__item">
            <view class="ul-nav-card__left">
                <view class="ul-nav-card__icon"></view>
                <view class="ul-nav-card__info">
                    <view class="ul-nav-card__title">登录密码</view>
                    <view class="ul-nav-card__desc">建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。 </view>
                </view>
            </view>
            <view class="ul-nav-card__right">
                <view class="ul-btn ul-btn-sm">修改密码</view>
            </view>
        </view>
        <view class="ul-nav-card__item">
            <view class="ul-nav-card__left">
                <view class="ul-nav-card__icon"></view>
                <view class="ul-nav-card__info">
                    <view class="ul-nav-card__title">资金密码</view>
                    <view class="ul-nav-card__desc">资金密码用于提现、绑定银行卡等操作，可保障资金安全 </view>
                </view>
            </view>
            <view class="ul-nav-card__right">
                <view class="ul-btn ul-btn-sm">找回资金密码</view>
                <view class="ul-btn ul-btn-sm">修改资金密码</view>
            </view>
        </view>
        <view class="ul-nav-card__item disabled">
            <view class="ul-nav-card__left">
                <view class="ul-nav-card__icon"></view>
                <view class="ul-nav-card__info">
                    <view class="ul-nav-card__title">比特币转出</view>
                    <view class="ul-nav-card__desc">系统维护,不能转出</view>
                </view>
            </view>
            <view class="ul-nav-card__right">
                <view class="ul-btn ul-btn-sm ul-btn-disabled">立即转出</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-nav-card simple badge">
        <view class="ul-nav-card__item">
            <view class="ul-nav-card__left">
                <view class="ul-nav-card__icon"></view>
                <view class="ul-nav-card__info">
                    <view class="ul-nav-card__title">登录密码</view>
                    <view class="ul-nav-card__desc">建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。 </view>
                </view>
            </view>
            <view class="ul-nav-card__right">
                <view class="ul-btn ul-btn-sm">修改密码</view>
            </view>
        </view>
        <view class="ul-nav-card__item">
            <view class="ul-nav-card__left">
                <view class="ul-nav-card__icon"></view>
                <view class="ul-nav-card__info">
                    <view class="ul-nav-card__title">资金密码</view>
                    <view class="ul-nav-card__desc">资金密码用于提现、绑定银行卡等操作，可保障资金安全 </view>
                </view>
            </view>
            <view class="ul-nav-card__right">
                <view class="ul-btn ul-btn-sm">找回资金密码</view>
                <view class="ul-btn ul-btn-sm">修改资金密码</view>
            </view>
        </view>
        <view class="ul-nav-card__item disabled">
            <view class="ul-nav-card__left">
                <view class="ul-nav-card__icon"></view>
                <view class="ul-nav-card__info">
                    <view class="ul-nav-card__title">比特币转出</view>
                    <view class="ul-nav-card__desc">系统维护,不能转出</view>
                </view>
            </view>
            <view class="ul-nav-card__right">
                <view class="ul-btn ul-btn-sm ul-btn-disabled">立即转出</view>
            </view>
        </view>
    </view>
</view>

.ul-nav-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;

    $gridCount: 3;

    // 将背景颜色值定义成变量
    $colors:('red': #FF6961,
        'orange': #FFA07A,
        'yellow': #FF69B4,
        'green': #2ECC71,
        'bluegreen': #1ABC9C,
        'blue': #3498DB,
        'purple': #AF7AC5,
    );

    &__item {
        flex: 0 0 calc(100% / #{$gridCount});
        text-align: center;
        margin-bottom: 12px;
    }

    &__icon {
        text-align: center;
    }
    &__title {
        margin-top: $space-sm;
    }

    &__icon-main {
        padding: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    // 状态: 图标颜色
    &.colord {
        @each $colorKey,
        $color in $colors {
            .#{$colorKey} {
                .ul-nav-grid__icon {
                    color: $color;
                }
            }
        }
    }

    // 状态: 图标背景色
    &.colord-bg {
        @each $colorKey,
        $color in $colors {
            .#{$colorKey} {
                .ul-nav-grid__icon-main {
                    background-color: $color;
                    border-radius: 50%;
                }

                .ul-nav-grid__icon {
                    color: #fff;
                }
            }
        }
    }

    // 状态: 宫格模式
    &.box {
        background-color: #eee;
        padding: 0.5px;

        .ul-nav-grid__item {
            flex: 0 0 calc(100% / #{$gridCount} - 1px);
            margin: 0.5px;
            background-color: #fff;
            padding: 12px;
            box-sizing: border-box;
        }
    }
}

.ul-nav-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.ul-nav-grid__item {
  flex: 0 0 calc(100% / 3);
  text-align: center;
  margin-bottom: 12px;
}
.ul-nav-grid__icon {
  text-align: center;
}
.ul-nav-grid__title {
  margin-top: 8px;
}
.ul-nav-grid__icon-main {
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.ul-nav-grid.colord .red .ul-nav-grid__icon {
  color: #FF6961;
}
.ul-nav-grid.colord .orange .ul-nav-grid__icon {
  color: #FFA07A;
}
.ul-nav-grid.colord .yellow .ul-nav-grid__icon {
  color: #FF69B4;
}
.ul-nav-grid.colord .green .ul-nav-grid__icon {
  color: #2ECC71;
}
.ul-nav-grid.colord .bluegreen .ul-nav-grid__icon {
  color: #1ABC9C;
}
.ul-nav-grid.colord .blue .ul-nav-grid__icon {
  color: #3498DB;
}
.ul-nav-grid.colord .purple .ul-nav-grid__icon {
  color: #AF7AC5;
}
.ul-nav-grid.colord-bg .red .ul-nav-grid__icon-main {
  background-color: #FF6961;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .red .ul-nav-grid__icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .orange .ul-nav-grid__icon-main {
  background-color: #FFA07A;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .orange .ul-nav-grid__icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .yellow .ul-nav-grid__icon-main {
  background-color: #FF69B4;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .yellow .ul-nav-grid__icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .green .ul-nav-grid__icon-main {
  background-color: #2ECC71;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .green .ul-nav-grid__icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .bluegreen .ul-nav-grid__icon-main {
  background-color: #1ABC9C;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .bluegreen .ul-nav-grid__icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .blue .ul-nav-grid__icon-main {
  background-color: #3498DB;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .blue .ul-nav-grid__icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .purple .ul-nav-grid__icon-main {
  background-color: #AF7AC5;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .purple .ul-nav-grid__icon {
  color: #fff;
}
.ul-nav-grid.box {
  background-color: #eee;
  padding: 0.5px;
}
.ul-nav-grid.box .ul-nav-grid__item {
  flex: 0 0 calc(100% / 3 - 1px);
  margin: 0.5px;
  background-color: #fff;
  padding: 12px;
  box-sizing: border-box;
}

<view class="ul-title-section">基本</view>
<view class="ul-nav-grid">
    <view class="ul-nav-grid__item">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
</view>
<view class="ul-title-section">图标颜色</view>
<view class="ul-nav-grid colord">
    <view class="ul-nav-grid__item red">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item orange">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item yellow">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item green">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item bluegreen">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item blue">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item purple">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item red">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item orange">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item yellow">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item green">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item bluegreen">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home ul-demo-color"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
</view>
<view class="ul-title-section">图标背景</view>
<view class="ul-nav-grid colord-bg">
    <view class="ul-nav-grid__item red">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item orange">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item yellow">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item green">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item bluegreen">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item blue">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item purple">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item red">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item orange">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item yellow">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item green">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item bluegreen">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
</view>
<view class="ul-title-section">宫格边框+背景色</view>
<view class="ul-nav-grid colord-bg box">
    <view class="ul-nav-grid__item red">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item orange">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item yellow">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item green">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item bluegreen">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item blue">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item purple">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item red">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item orange">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item yellow">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item green">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item bluegreen">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main"><i class="fa fa-home"></i></view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
</view>
<view class="ul-title-section">宫格边框+图片</view>
<view class="ul-nav-grid box">
    <view class="ul-nav-grid__item">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main">
                <view class="ul-demo-icon" style="width: 26px;height: 26px;"></view>
            </view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main">
                <view class="ul-demo-icon" style="width: 26px;height: 26px;"></view>
            </view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main">
                <view class="ul-demo-icon" style="width: 26px;height: 26px;"></view>
            </view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main">
                <view class="ul-demo-icon" style="width: 26px;height: 26px;"></view>
            </view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
</view>
<view class="ul-title-section">宫格边框+图片+背景</view>
<view class="ul-nav-grid colord-bg">
    <view class="ul-nav-grid__item red">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main">
                <view class="ul-demo-icon" style="width: 26px;height: 26px;"></view>
            </view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item orange">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main">
                <view class="ul-demo-icon" style="width: 26px;height: 26px;"></view>
            </view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item yellow">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main">
                <view class="ul-demo-icon" style="width: 26px;height: 26px;"></view>
            </view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
    <view class="ul-nav-grid__item green">
        <view class="ul-nav-grid__icon">
            <view class="ul-nav-grid__icon-main">
                <view class="ul-demo-icon" style="width: 26px;height: 26px;"></view>
            </view>
        </view>
        <view class="ul-nav-grid__title">首页</view>
    </view>
</view>

// ul-nav-header 组件样式
// ==========================================================================

.ul-nav-header {
  background-color: $color-white;
  box-shadow: $shadow-sm;
  
  &__main {
    @include flex(space-between, center);
    max-width: map-get($container-max-widths, xl);
    margin: 0 auto;
    padding: $space-md $space-lg;
  }
  
  &__logo {
    height: 60px;
    width: 60px;
    flex-shrink: 0;
  }
  
  &__nav {
    @include flex(flex-end, center);
    flex-wrap: wrap;
    gap: $space-sm;
  }
  
  &__item {
    padding: $space-sm $space-md;
    color: $color-text;
    cursor: pointer;
    border-radius: $radius-base;
    transition: all 0.3s ease;
    font-weight: $font-weight-medium;
    
    &:hover {
      color: $color-primary-base;
      background-color: $color-primary-light;
    }
  }
  
  @each $name, $color in $theme-colors {
    &.#{$name} {
      background-color: $color;
      
      .ul-nav-header__item {
        color: $color-white;
        
        &:hover {
          color: $color-white;
          background-color: rgba($color-white, 0.2);
        }
      }
    }
  }
  
  // 响应式设计
  @include media-breakpoint-down(md) {
    &__main {
      padding: $space-sm $space-md;
      flex-direction: column;
      gap: $space-md;
    }
    
    &__nav {
      justify-content: center;
      width: 100%;
    }
    
    &__item {
      padding: $space-xs $space-sm;
      font-size: $font-size-sm;
    }
  }
  
  @include media-breakpoint-down(sm) {
    &__logo {
      height: 40px;
      width: 40px;
    }
    
    &__nav {
      flex-wrap: nowrap;
      overflow-x: auto;
      justify-content: flex-start;
      padding-bottom: $space-xs;
      
      &::-webkit-scrollbar {
        display: none;
      }
    }
    
    &__item {
      white-space: nowrap;
      flex-shrink: 0;
    }
  }
}

.ul-nav-header {
  background-color: var(--ul-color-white);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
}
.ul-nav-header__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  max-width: 1140px;
  margin: 0 auto;
  padding: 16px 24px;
}
.ul-nav-header__logo {
  height: 60px;
  width: 60px;
  flex-shrink: 0;
}
.ul-nav-header__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.ul-nav-header__item {
  padding: 8px 16px;
  color: var(--ul-color-text);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
}
.ul-nav-header__item:hover {
  color: var(--ul-color-primary-base);
  background-color: var(--ul-color-primary-light);
}
.ul-nav-header.primary {
  background-color: var(--ul-color-primary-base);
}
.ul-nav-header.primary .ul-nav-header__item {
  color: var(--ul-color-white);
}
.ul-nav-header.primary .ul-nav-header__item:hover {
  color: var(--ul-color-white);
  background-color: rgba(var(--ul-color-white), 0.2);
}
.ul-nav-header.success {
  background-color: var(--ul-color-success-base);
}
.ul-nav-header.success .ul-nav-header__item {
  color: var(--ul-color-white);
}
.ul-nav-header.success .ul-nav-header__item:hover {
  color: var(--ul-color-white);
  background-color: rgba(var(--ul-color-white), 0.2);
}
.ul-nav-header.danger {
  background-color: var(--ul-color-danger-base);
}
.ul-nav-header.danger .ul-nav-header__item {
  color: var(--ul-color-white);
}
.ul-nav-header.danger .ul-nav-header__item:hover {
  color: var(--ul-color-white);
  background-color: rgba(var(--ul-color-white), 0.2);
}
.ul-nav-header.warning {
  background-color: var(--ul-color-warning-base);
}
.ul-nav-header.warning .ul-nav-header__item {
  color: var(--ul-color-white);
}
.ul-nav-header.warning .ul-nav-header__item:hover {
  color: var(--ul-color-white);
  background-color: rgba(var(--ul-color-white), 0.2);
}
.ul-nav-header.info {
  background-color: var(--ul-color-info-base);
}
.ul-nav-header.info .ul-nav-header__item {
  color: var(--ul-color-white);
}
.ul-nav-header.info .ul-nav-header__item:hover {
  color: var(--ul-color-white);
  background-color: rgba(var(--ul-color-white), 0.2);
}
.ul-nav-header.dark {
  background-color: var(--ul-color-dark-base);
}
.ul-nav-header.dark .ul-nav-header__item {
  color: var(--ul-color-white);
}
.ul-nav-header.dark .ul-nav-header__item:hover {
  color: var(--ul-color-white);
  background-color: rgba(var(--ul-color-white), 0.2);
}
.ul-nav-header.light {
  background-color: var(--ul-color-light-base);
}
.ul-nav-header.light .ul-nav-header__item {
  color: var(--ul-color-white);
}
.ul-nav-header.light .ul-nav-header__item:hover {
  color: var(--ul-color-white);
  background-color: rgba(var(--ul-color-white), 0.2);
}
.ul-nav-header.gray {
  background-color: var(--ul-color-gray-base);
}
.ul-nav-header.gray .ul-nav-header__item {
  color: var(--ul-color-white);
}
.ul-nav-header.gray .ul-nav-header__item:hover {
  color: var(--ul-color-white);
  background-color: rgba(var(--ul-color-white), 0.2);
}
@media (max-width: 767.98px) {
  .ul-nav-header__main {
    padding: 8px 16px;
    flex-direction: column;
    gap: 16px;
  }
  .ul-nav-header__nav {
    justify-content: center;
    width: 100%;
  }
  .ul-nav-header__item {
    padding: 4px 8px;
    font-size: 12px;
  }
}
@media (max-width: 575.98px) {
  .ul-nav-header__logo {
    height: 40px;
    width: 40px;
  }
  .ul-nav-header__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
  .ul-nav-header__nav::-webkit-scrollbar {
    display: none;
  }
  .ul-nav-header__item {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

<view class="ul-section">
    <view class="ul-nav-header">
        <view class="ul-nav-header__main">
            <view class="ul-nav-header__logo ul-demo-icon"></view>
            <view class="ul-nav-header__nav">
                <view class="ul-nav-header__item">首页</view>
                <view class="ul-nav-header__item">活动中心</view>
                <view class="ul-nav-header__item">咨询</view>
                <view class="ul-nav-header__item">帮助指南</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-nav-header danger">
        <view class="ul-nav-header__main">
            <view class="ul-nav-header__logo ul-demo-icon"></view>
            <view class="ul-nav-header__nav">
                <view class="ul-nav-header__item">首页</view>
                <view class="ul-nav-header__item">活动中心</view>
                <view class="ul-nav-header__item">咨询</view>
                <view class="ul-nav-header__item">帮助指南</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-nav-header primary">
        <view class="ul-nav-header__main">
            <view class="ul-nav-header__logo ul-demo-icon"></view>
            <view class="ul-nav-header__nav">
                <view class="ul-nav-header__item">首页</view>
                <view class="ul-nav-header__item">活动中心</view>
                <view class="ul-nav-header__item">咨询</view>
                <view class="ul-nav-header__item">帮助指南</view>
            </view>
        </view>
    </view>
</view>
<!-- 所有主题色变体示例 -->
<view class="ul-section">
    <view class="ul-nav-header success">
        <view class="ul-nav-header__main">
            <view class="ul-nav-header__logo ul-demo-icon"></view>
            <view class="ul-nav-header__nav">
                <view class="ul-nav-header__item">首页</view>
                <view class="ul-nav-header__item">活动中心</view>
                <view class="ul-nav-header__item">咨询</view>
                <view class="ul-nav-header__item">帮助指南</view>
            </view>
        </view>
    </view>
</view>

.ul-nav-info {
  &__item {
    @include flex(space-between, center);
    padding: $space-lg;
    border-bottom: 1px solid $color-border;

    &:last-child {
      border-bottom: none;
    }
  }

  &__main {
    @include flex(flex-start, center);
    flex: 1;
  }

  &__icon {
    margin-right: $space-md;
    color: $color-primary-base;
    font-size: $font-size-xl;
  }

  &__content {
    flex: 1;
  }

  &__title {
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $color-text;
    margin-bottom: $space-xs;
    
    // 标题内嵌描述的情况
    .ul-nav-info__desc {
      display: block;
      margin-top: $space-xs;
      font-size: $font-size-sm;
      color: $color-text-secondary;
      line-height: $line-height-base;
      font-weight: $font-weight-normal;
    }
  }

  &__desc {
    font-size: $font-size-sm;
    color: $color-text-secondary;
    line-height: $line-height-base;
    font-weight: $font-weight-normal;
  }

  &__action {
    @include flex(flex-end, center);
    color: $color-text-secondary;
  }

  &__badge {
    background-color: $color-primary-light;
    color: $color-primary-base;
    padding: $space-xs $space-sm;
    border-radius: $radius-base;
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    margin-right: $space-sm;
  }

  // 响应式设计
  @include media-breakpoint-down(md) {
    &__item {
      padding: $space-md;
    }

    &__icon {
      font-size: $font-size-lg;
      margin-right: $space-sm;
    }

    &__title {
      font-size: $font-size-md;
    }

    &__desc {
      font-size: $font-size-xs;
    }

    &__badge {
      padding: 2px $space-xs;
      font-size: 10px;
    }
  }
}

.ul-nav-info__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 24px;
  border-bottom: 1px solid var(--ul-color-border);
}
.ul-nav-info__item:last-child {
  border-bottom: none;
}
.ul-nav-info__main {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex: 1;
}
.ul-nav-info__icon {
  margin-right: 16px;
  color: var(--ul-color-primary-base);
  font-size: 18px;
}
.ul-nav-info__content {
  flex: 1;
}
.ul-nav-info__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ul-color-text);
  margin-bottom: 4px;
}
.ul-nav-info__title .ul-nav-info__desc {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  line-height: 1.5;
  font-weight: 400;
}
.ul-nav-info__desc {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  line-height: 1.5;
  font-weight: 400;
}
.ul-nav-info__action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  color: var(--ul-color-text-secondary);
}
.ul-nav-info__badge {
  background-color: var(--ul-color-primary-light);
  color: var(--ul-color-primary-base);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  margin-right: 8px;
}
@media (max-width: 767.98px) {
  .ul-nav-info__item {
    padding: 16px;
  }
  .ul-nav-info__icon {
    font-size: 16px;
    margin-right: 8px;
  }
  .ul-nav-info__title {
    font-size: 14px;
  }
  .ul-nav-info__desc {
    font-size: 10px;
  }
  .ul-nav-info__badge {
    padding: 2px 4px;
    font-size: 10px;
  }
}

<view class="ul-nav-info">
    <!-- 完整示例：图标 + 标题 + 描述 + 右侧操作 -->
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__main">
            <view class="ul-nav-info__icon"><i class="fa fa-gear"></i></view>
            <view class="ul-nav-info__content">
                <view class="ul-nav-info__title">设置</view>
                <view class="ul-nav-info__desc">设置系统信息</view>
            </view>
        </view>
        <view class="ul-nav-info__action"><span class="ul-nav-info__badge">新版本</span> <i class="fa fa-chevron-right"></i></view>
    </view>
    <!-- 简化示例：图标 + 标题 + 右侧操作 -->
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__main">
            <view class="ul-nav-info__icon"><i class="fa fa-gear"></i></view>
            <view class="ul-nav-info__content">
                <view class="ul-nav-info__title">设置</view>
            </view>
        </view>
        <view class="ul-nav-info__action"><span class="ul-nav-info__badge">新版本</span> <i class="fa fa-chevron-right"></i></view>
    </view>
    <!-- 最简示例：只有标题 + 右侧操作 -->
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__main">
            <view class="ul-nav-info__content">
                <view class="ul-nav-info__title">设置</view>
            </view>
        </view>
        <view class="ul-nav-info__action"><span class="ul-nav-info__badge">新版本</span> <i class="fa fa-chevron-right"></i></view>
    </view>
    <!-- 自定义图标示例：自定义尺寸图标 + 标题 + 右侧操作 -->
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__main">
            <view class="ul-nav-info__icon">
                <view class="ul-demo-icon" style="width:30px;height: 30px;"></view>
            </view>
            <view class="ul-nav-info__content">
                <view class="ul-nav-info__title">设置</view>
            </view>
        </view>
        <view class="ul-nav-info__action"><span class="ul-nav-info__badge">新版本</span> <i class="fa fa-chevron-right"></i></view>
    </view>
    <!-- 大图标示例：大尺寸图标 + 标题（内嵌描述）+ 右侧操作 -->
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__main">
            <view class="ul-nav-info__icon">
                <view class="ul-demo-icon" style="width:90px;height: 90px;"></view>
            </view>
            <view class="ul-nav-info__content">
                <view class="ul-nav-info__title">
                    设置
                    <view class="ul-nav-info__desc">设置系统信息</view>
                </view>
            </view>
        </view>
        <view class="ul-nav-info__action"><span class="ul-nav-info__badge">新版本</span> <i class="fa fa-chevron-right"></i></view>
    </view>
</view>

.ul-nav-link {
  // 基础样式
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 calc(-1 * $space-md);
  

  &__item {
    display: inline-block;
    margin: $space-sm 0;
    padding: 0 $space-md;
    border: 1px solid transparent;
    color: $color-text;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;

    // 鼠标悬停效果
    &:hover {
      color: $color-primary-base;
    }

    // 激活状态
    &.active {
      color: $color-primary-base;
    }

    // 禁用状态
    &.disabled {
      color: $color-text-disabled;
      cursor: not-allowed;

      &:hover {
        color: $color-text-disabled;
      }
    }

    // 分隔线 - 除了最后一个元素
    &:not(:last-child) {
      border-right-color: $color-border;
    }

  }

  // 垂直排列变体
  &.vertical {
    flex-direction: column;
    align-items: flex-start;

    .ul-nav-link__item {
      margin: 0 0 $space-sm 0;
      padding: $space-sm 0;
      border-right: none;
      border-bottom: 1px solid $color-border;

      &:not(:last-child) {
        border-right-color: transparent;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }

  // 无分隔线变体
  &.no-divider {
    .ul-nav-link__item {
      border: none;

      &:not(:last-child) {
        border-right-color: transparent;
      }
    }
  }

  // 响应式设计
  @include media-breakpoint-down(md) {
    flex-direction: column;
    align-items: flex-start;

    &__item {
      margin: $space-xs 0;
      padding: $space-sm 0;
      border-right: none;
      border-bottom: 1px solid $color-border;

      &:not(:last-child) {
        border-right-color: transparent;
      }

      &:last-child {
        border-bottom: none;
      }
    }

    // 移动端保持水平排列的变体
    &.horizontal-mobile {
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      overflow-x: auto;

      .ul-nav-link__item {
        margin: $space-xs $space-sm;
        padding: $space-xs $space-sm;
        border: none;
        flex-shrink: 0;

        &:not(:last-child) {
          border-right: 1px solid $color-border;
        }
      }
    }
  }
}

.ul-nav-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 calc(-1 * $space-md);
}
.ul-nav-link__item {
  display: inline-block;
  margin: 8px 0;
  padding: 0 16px;
  border: 1px solid transparent;
  color: var(--ul-color-text);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ul-nav-link__item:hover {
  color: var(--ul-color-primary-base);
}
.ul-nav-link__item.active {
  color: var(--ul-color-primary-base);
}
.ul-nav-link__item.disabled {
  color: var(--ul-color-text-placeholder);
  cursor: not-allowed;
}
.ul-nav-link__item.disabled:hover {
  color: var(--ul-color-text-placeholder);
}
.ul-nav-link__item:not(:last-child) {
  border-right-color: var(--ul-color-border);
}
.ul-nav-link.vertical {
  flex-direction: column;
  align-items: flex-start;
}
.ul-nav-link.vertical .ul-nav-link__item {
  margin: 0 0 8px 0;
  padding: 8px 0;
  border-right: none;
  border-bottom: 1px solid var(--ul-color-border);
}
.ul-nav-link.vertical .ul-nav-link__item:not(:last-child) {
  border-right-color: transparent;
}
.ul-nav-link.vertical .ul-nav-link__item:last-child {
  border-bottom: none;
}
.ul-nav-link.no-divider .ul-nav-link__item {
  border: none;
}
.ul-nav-link.no-divider .ul-nav-link__item:not(:last-child) {
  border-right-color: transparent;
}
@media (max-width: 767.98px) {
  .ul-nav-link {
    flex-direction: column;
    align-items: flex-start;
  }
  .ul-nav-link__item {
    margin: 4px 0;
    padding: 8px 0;
    border-right: none;
    border-bottom: 1px solid var(--ul-color-border);
  }
  .ul-nav-link__item:not(:last-child) {
    border-right-color: transparent;
  }
  .ul-nav-link__item:last-child {
    border-bottom: none;
  }
  .ul-nav-link.horizontal-mobile {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .ul-nav-link.horizontal-mobile .ul-nav-link__item {
    margin: 4px 8px;
    padding: 4px 8px;
    border: none;
    flex-shrink: 0;
  }
  .ul-nav-link.horizontal-mobile .ul-nav-link__item:not(:last-child) {
    border-right: 1px solid var(--ul-color-border);
  }
}

<!-- 基础用法：水平分隔线导航 -->
<view class="ul-nav-link"><a class="ul-nav-link__item">导航1</a> <a class="ul-nav-link__item">导航2</a> <a class="ul-nav-link__item">导航3</a> <a class="ul-nav-link__item">导航4</a></view>
<!-- 状态控制示例 -->
<view class="ul-nav-link"><a class="ul-nav-link__item active">激活状态</a> <a class="ul-nav-link__item">普通状态</a> <a class="ul-nav-link__item disabled">禁用状态</a></view>
<!-- 垂直排列示例 -->
<view class="ul-nav-link vertical"><a class="ul-nav-link__item">垂直导航1</a> <a class="ul-nav-link__item">垂直导航2</a> <a class="ul-nav-link__item">垂直导航3</a></view>
<!-- 无分隔线示例 -->
<view class="ul-nav-link no-divider"><a class="ul-nav-link__item">无分隔线1</a> <a class="ul-nav-link__item">无分隔线2</a> <a class="ul-nav-link__item">无分隔线3</a></view>

.ul-nav-min {
  box-shadow: $shadow-base;
  padding: $space-sm;
  text-align: center;
  background: $color-white;
  border-radius: $radius-base;
  border: 1px solid $color-border;

  &.ghost {
    background: transparent;
    border: none;
    box-shadow: none;
  }
}


.ul-nav-min__item {
  padding: $space-xs 0;
  cursor: pointer;
  color: $color-text;
  display: block;
  font-size: $font-size-sm;
  line-height: $line-height-base;
  transition: all 0.2s ease;
  position: relative;

  &:not(:last-child) {
    border-bottom: 1px solid $color-border;
  }

  &:hover {
    color: $color-primary-base;
    background: $color-primary-light;
  }

  &.active {
    color: $color-primary-base;
    font-weight: $font-weight-medium;

    &::before {
      content: '';
      position: absolute;
      left: -$space-sm;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 60%;
      background-color: $color-primary-base;
      border-radius: 1px;
    }
  }
}

// 响应式设计
@include media-breakpoint-down(md) {
  .ul-nav-min {
    padding: $space-xs;
    border-radius: $radius-sm;

    .ul-nav-min__item {
      font-size: $font-size-xs;
      padding: $space-xs * 0.5 0;

      &.active::before {
        left: -$space-xs;
        width: 1px;
      }
    }
  }
}

// 深色主题支持
.ul-nav-min.dark {
  background: $color-dark-base;
  border-color: $color-dark-light;

  .ul-nav-min__item {
    color: $color-dark-text;
    border-bottom-color: $color-dark-light;

    &:hover {
      color: $color-primary-light;
      background: rgba($color-primary-base, 0.1);
    }

    &.active {
      color: $color-primary-light;

      &::before {
        background-color: $color-primary-light;
      }
    }
  }
}

// 禁用状态
.ul-nav-min__item.disabled {
  cursor: not-allowed;
  color: $color-text-disabled;

  &:hover {
    background: transparent;
    color: $color-text-disabled;
  }
}

.ul-nav-min {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 8px;
  text-align: center;
  background: var(--ul-color-white);
  border-radius: 4px;
  border: 1px solid var(--ul-color-border);
}
.ul-nav-min.ghost {
  background: transparent;
  border: none;
  box-shadow: none;
}
.ul-nav-min__item {
  padding: 4px 0;
  cursor: pointer;
  color: var(--ul-color-text);
  display: block;
  font-size: 12px;
  line-height: 1.5;
  transition: all 0.2s ease;
  position: relative;
}
.ul-nav-min__item:not(:last-child) {
  border-bottom: 1px solid var(--ul-color-border);
}
.ul-nav-min__item:hover {
  color: var(--ul-color-primary-base);
  background: var(--ul-color-primary-light);
}
.ul-nav-min__item.active {
  color: var(--ul-color-primary-base);
  font-weight: 500;
}
.ul-nav-min__item.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  background-color: var(--ul-color-primary-base);
  border-radius: 1px;
}
@media (max-width: 767.98px) {
  .ul-nav-min {
    padding: 4px;
    border-radius: 2px;
  }
  .ul-nav-min .ul-nav-min__item {
    font-size: 10px;
    padding: 2px 0;
  }
  .ul-nav-min .ul-nav-min__item.active::before {
    left: -4px;
    width: 1px;
  }
}
.ul-nav-min.dark {
  background: var(--ul-color-dark-base);
  border-color: var(--ul-color-dark-light);
}
.ul-nav-min.dark .ul-nav-min__item {
  color: var(--ul-color-dark-text);
  border-bottom-color: var(--ul-color-dark-light);
}
.ul-nav-min.dark .ul-nav-min__item:hover {
  color: var(--ul-color-primary-light);
  background: rgba(var(--ul-color-primary-base), 0.1);
}
.ul-nav-min.dark .ul-nav-min__item.active {
  color: var(--ul-color-primary-light);
}
.ul-nav-min.dark .ul-nav-min__item.active::before {
  background-color: var(--ul-color-primary-light);
}
.ul-nav-min__item.disabled {
  cursor: not-allowed;
  color: var(--ul-color-text-placeholder);
}
.ul-nav-min__item.disabled:hover {
  background: transparent;
  color: var(--ul-color-text-placeholder);
}

<view class="ul-nav-min" style="width: 120px;">
    <view class="ul-nav-min__item active">个人中心</view>
    <view class="ul-nav-min__item">安全中心 </view>
    <view class="ul-nav-min__item">数据中心</view>
</view>

.ul-nav-poster {
    border: 1px solid $color-border;
    border-top: 3px solid $color-primary-base;
    border-radius: $radius-base;
    overflow: hidden; // 确保子元素的圆角效果

    // 响应式设计
    @include media-breakpoint-down(sm) {
        border-radius: $radius-sm;
        width: 100% !important; // 手机端强制占满宽度
        margin: 0;
    }

    &__item {
        @include flex(space-between, center);
        cursor: pointer;
        padding: $space-xs $space-sm;
        transition: background-color 0.3s ease;
        position: relative;
        min-height: 60px; // 确保触摸区域足够大

        &:hover {
            background-color: $color-light-light;
        }

        &:active {
            background-color: $color-primary-light;
        }

        &:not(:last-child) {
            border-bottom: 1px dashed $color-border;
        }

        // 响应式设计
        @include media-breakpoint-down(sm) {
            padding: $space-sm;
            -webkit-tap-highlight-color: rgba($color-primary-base, 0.2); // 添加触摸高亮效果
        }

        // 手机端触摸反馈
        @media (hover: none) {
            &:active {
                background-color: $color-primary-light;
                transform: scale(0.98);
            }
        }

        // 状态类
        &.active {
            background-color: $color-primary-light;
            border-left: 3px solid $color-primary-base;
            padding-left: calc(#{$space-sm} - 3px);

            .ul-nav-poster__title {
                color: $color-primary-base;
            }

            .ul-nav-poster__desc {
                color: $color-primary-base;
            }

            // 响应式设计
            @include media-breakpoint-down(sm) {
                border-left: none;
                padding-left: $space-sm;
                border-right: 3px solid $color-primary-base;
            }
        }

        &.disabled {
            cursor: not-allowed;
            opacity: 0.6;

            .ul-nav-poster__title,
            .ul-nav-poster__desc {
                color: $color-text-disabled;
            }

            // 手机端禁用状态更明显的视觉反馈
            @include media-breakpoint-down(sm) {
                opacity: 0.5;
                background-color: $color-bg;
            }
        }
    }

    &__left {
        @include flex(flex-start, center);
        flex: 1; // 允许左侧行内容占用更多空间
        min-width: 0; // 防止flex子项溢出
    }

    &__title {
        color: $color-text;
        font-weight: $font-weight-bold;
        font-size: $font-size-base;
        margin-left: $space-sm;
        @include text-ellipsis(1); // 文本溢出显示省略号
        
        // 响应式设计
        @include media-breakpoint-down(sm) {
            font-size: $font-size-sm;
            max-width: 120px; // 限制标题宽度，确保布局合理
        }
    }

    &__desc {
        color: $color-text-secondary;
        font-size: $font-size-sm;
        font-weight: $font-weight-normal;
        white-space: nowrap; // 防止描述文字换行
        
        // 响应式设计
        @include media-breakpoint-down(sm) {
            font-size: $font-size-xs;
            max-width: 80px; // 限制描述宽度
            @include text-ellipsis(1); // 文本溢出显示省略号
        }
    }

    &__img {
        width: 38px;
        height: 38px;
        background-size: cover;
        background-position: center;
        border-radius: $radius-circle;
        flex-shrink: 0; // 防止图片被压缩
        
        // 响应式设计
        @include media-breakpoint-down(sm) {
            width: 42px; // 手机端适当增大图片尺寸，提高可点击性
            height: 42px;
        }
    }

    &__right {
        flex-shrink: 0; // 防止右侧内容被压缩
        margin-left: $space-sm;
        
        // 响应式设计
        @include media-breakpoint-down(sm) {
            margin-left: $space-xs;
        }
    }
}

.ul-nav-poster {
  border: 1px solid var(--ul-color-border);
  border-top: 3px solid var(--ul-color-primary-base);
  border-radius: 4px;
  overflow: hidden;
}
@media (max-width: 575.98px) {
  .ul-nav-poster {
    border-radius: 2px;
    width: 100% !important;
    margin: 0;
  }
}
.ul-nav-poster__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  padding: 4px 8px;
  transition: background-color 0.3s ease;
  position: relative;
  min-height: 60px;
}
.ul-nav-poster__item:hover {
  background-color: var(--ul-color-light-light);
}
.ul-nav-poster__item:active {
  background-color: var(--ul-color-primary-light);
}
.ul-nav-poster__item:not(:last-child) {
  border-bottom: 1px dashed var(--ul-color-border);
}
@media (max-width: 575.98px) {
  .ul-nav-poster__item {
    padding: 8px;
    -webkit-tap-highlight-color: rgba(var(--ul-color-primary-base), 0.2);
  }
}
@media (hover: none) {
  .ul-nav-poster__item:active {
    background-color: var(--ul-color-primary-light);
    transform: scale(0.98);
  }
}
.ul-nav-poster__item.active {
  background-color: var(--ul-color-primary-light);
  border-left: 3px solid var(--ul-color-primary-base);
  padding-left: calc(8px - 3px);
}
.ul-nav-poster__item.active .ul-nav-poster__title {
  color: var(--ul-color-primary-base);
}
.ul-nav-poster__item.active .ul-nav-poster__desc {
  color: var(--ul-color-primary-base);
}
@media (max-width: 575.98px) {
  .ul-nav-poster__item.active {
    border-left: none;
    padding-left: 8px;
    border-right: 3px solid var(--ul-color-primary-base);
  }
}
.ul-nav-poster__item.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.ul-nav-poster__item.disabled .ul-nav-poster__title, .ul-nav-poster__item.disabled .ul-nav-poster__desc {
  color: var(--ul-color-text-placeholder);
}
@media (max-width: 575.98px) {
  .ul-nav-poster__item.disabled {
    opacity: 0.5;
    background-color: var(--ul-color-bg);
  }
}
.ul-nav-poster__left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex: 1;
  min-width: 0;
}
.ul-nav-poster__title {
  color: var(--ul-color-text);
  font-weight: 700;
  font-size: 14px;
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .ul-nav-poster__title {
    font-size: 12px;
    max-width: 120px;
  }
}
.ul-nav-poster__desc {
  color: var(--ul-color-text-secondary);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .ul-nav-poster__desc {
    font-size: 10px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.ul-nav-poster__img {
  width: 38px;
  height: 38px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .ul-nav-poster__img {
    width: 42px;
    height: 42px;
  }
}
.ul-nav-poster__right {
  flex-shrink: 0;
  margin-left: 8px;
}
@media (max-width: 575.98px) {
  .ul-nav-poster__right {
    margin-left: 4px;
  }
}

<view class="ul-section ul-col-md-3">
    <view class="ul-nav-poster">
        <!-- 默认状态 -->
        <view class="ul-nav-poster__item" data-repeat="2">
            <view class="ul-nav-poster__left">
                <view class="ul-nav-poster__img ul-demo-person"></view>
                <view class="ul-nav-poster__title">清新风景 </view>
            </view>
            <view class="ul-nav-poster__right">
                <view class="ul-nav-poster__desc">进入系统</view>
            </view>
        </view>
        <!-- 激活状态 -->
        <view class="ul-nav-poster__item active" data-repeat="2">
            <view class="ul-nav-poster__left">
                <view class="ul-nav-poster__img ul-demo-person"></view>
                <view class="ul-nav-poster__title">山水画卷</view>
            </view>
            <view class="ul-nav-poster__right">
                <view class="ul-nav-poster__desc">进入系统</view>
            </view>
        </view>
        <!-- 禁用状态 -->
        <view class="ul-nav-poster__item disabled" data-repeat="2">
            <view class="ul-nav-poster__left">
                <view class="ul-nav-poster__img ul-demo-person"></view>
                <view class="ul-nav-poster__title">城市夜景</view>
            </view>
            <view class="ul-nav-poster__right">
                <view class="ul-nav-poster__desc">进入系统</view>
            </view>
        </view>
    </view>
</view>

/* 附带说明垂直导航 */
.ul-nav-tree {
    &__group {
        & + & {
            margin-top: $space-lg;
        }
    }

    &__group-title {
        font-size: $font-size-md;
        font-weight: $font-weight-bold;
        line-height: 2;
        padding: 0 $space-sm;
        color: $color-text-secondary;
    }

    &__item {
        display: block;
        cursor: pointer;
        padding: $space-sm;
        border-radius: $radius-base;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;

        &:hover {
            background-color: $color-bg;
        }

        &.active {
            background-color: $color-primary-light;
            .ul-nav-tree__item-title {
                color: $color-primary-base;
            }
        }
    }

    &__item-title {
        font-size: $font-size-base;
        color: $color-text;
        font-weight: $font-weight-medium;
    }

    &__item-desc {
        font-size: $font-size-sm;
        color: $color-text-secondary;
        margin-top: $space-xs;
    }

    // 水平布局修饰符
    &.row {
        .ul-nav-tree__item {
            @include flex(flex-start, center);
        }

        .ul-nav-tree__item-desc {
            margin-top: 0;
            margin-left: $space-xs;
        }
    }
}

@charset "UTF-8";
/* 附带说明垂直导航 */
.ul-nav-tree__group + .ul-nav-tree__group {
  margin-top: 24px;
}
.ul-nav-tree__group-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
  padding: 0 8px;
  color: var(--ul-color-text-secondary);
}
.ul-nav-tree__item {
  display: block;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ul-nav-tree__item:hover {
  background-color: var(--ul-color-bg);
}
.ul-nav-tree__item.active {
  background-color: var(--ul-color-primary-light);
}
.ul-nav-tree__item.active .ul-nav-tree__item-title {
  color: var(--ul-color-primary-base);
}
.ul-nav-tree__item-title {
  font-size: 14px;
  color: var(--ul-color-text);
  font-weight: 500;
}
.ul-nav-tree__item-desc {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  margin-top: 4px;
}
.ul-nav-tree.row .ul-nav-tree__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.ul-nav-tree.row .ul-nav-tree__item-desc {
  margin-top: 0;
  margin-left: 4px;
}

<view class="ul-nav-tree">
    <view class="ul-nav-tree__group">
        <view class="ul-nav-tree__group-title">起步</view>
        <view class="ul-nav-tree__group-main">
            <view href="#" class="ul-nav-tree__item active">
                <view class="ul-nav-tree__item-title">欢迎</view>
                <view class="ul-nav-tree__item-desc">项目介绍/使用说明</view>
            </view>
            <view href="#" class="ul-nav-tree__item">
                <view class="ul-nav-tree__item-title">开始使用</view>
                <view class="ul-nav-tree__item-desc">安装方式,注意事项</view>
            </view>
            <view href="#" class="ul-nav-tree__item">
                <view class="ul-nav-tree__item-title">如何使用</view>
                <view class="ul-nav-tree__item-desc">复制组件</view>
            </view>
        </view>
    </view>
    <view class="ul-nav-tree__group">
        <view class="ul-nav-tree__group-title">组件</view>
        <view class="ul-nav-tree__group-main">
            <view href="#" class="ul-nav-tree__item">
                <view class="ul-nav-tree__item-title">列表</view>
                <view class="ul-nav-tree__item-desc">用户列表/文章列表...</view>
            </view>
            <view href="#" class="ul-nav-tree__item">
                <view class="ul-nav-tree__item-title">头部</view>
                <view class="ul-nav-tree__item-desc">页面头</view>
            </view>
            <view href="#" class="ul-nav-tree__item">
                <view class="ul-nav-tree__item-title">导航</view>
                <view class="ul-nav-tree__item-desc">横竖导航/多级导航</view>
            </view>
        </view>
    </view>
</view>

.ul-nav-tree2 {
  border-radius: $radius-base;
  overflow: hidden;

  &__group {
    & + & {
      margin-top: $space-md;
    }
  }


  &__group-title {
    padding: 0;
    color: $color-text;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    margin-bottom: $space-sm;
  }

  &__group-main {
    padding-left: $space-md;
  }

  &__item {
    display: block;
    padding: $space-xs 0;
    color: $color-text-secondary;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: $font-size-sm;
    line-height: 1.6;
    position: relative;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      color: $color-primary-base;
      text-decoration: underline;
    }

    &.active {
      color: $color-primary-base;
      text-decoration: underline;

      &::before {
        content: '';
        position: absolute;
        left: -$space-md;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        background-color: $color-primary-base;
        border-radius: $radius-sm;
      }
    }

    &.disabled {
      color: $color-text-disabled;
      cursor: not-allowed;

      &:hover {
        color: $color-text-disabled;
        text-decoration: none;
      }
    }
  }

  &__item-title {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  // 响应式设计
  @include media-breakpoint-down(md) {
    &__group {
      & + & {
        margin-top: $space-md;
      }
    }

    &__group-title {
      font-size: $font-size-sm;
      margin-bottom: $space-xs;
    }

    &__group-main {
      padding-left: $space-sm;
    }

    &__item {
      font-size: $font-size-xs;

      &.active::before {
        left: -$space-sm;
        height: 14px;
      }
    }
  }

  @include media-breakpoint-down(sm) {
    border-radius: 0;

    &__group-main {
      padding-left: $space-xs;
    }

    &__item.active::before {
      left: -$space-xs;
      height: 12px;
    }
  }
}

.ul-nav-tree2 {
  border-radius: 4px;
  overflow: hidden;
}
.ul-nav-tree2__group + .ul-nav-tree2__group {
  margin-top: 16px;
}
.ul-nav-tree2__group-title {
  padding: 0;
  color: var(--ul-color-text);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.ul-nav-tree2__group-main {
  padding-left: 16px;
}
.ul-nav-tree2__item {
  display: block;
  padding: 4px 0;
  color: var(--ul-color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 12px;
  line-height: 1.6;
  position: relative;
}
.ul-nav-tree2__item:last-child {
  border-bottom: none;
}
.ul-nav-tree2__item:hover {
  color: var(--ul-color-primary-base);
  text-decoration: underline;
}
.ul-nav-tree2__item.active {
  color: var(--ul-color-primary-base);
  text-decoration: underline;
}
.ul-nav-tree2__item.active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background-color: var(--ul-color-primary-base);
  border-radius: 2px;
}
.ul-nav-tree2__item.disabled {
  color: var(--ul-color-text-placeholder);
  cursor: not-allowed;
}
.ul-nav-tree2__item.disabled:hover {
  color: var(--ul-color-text-placeholder);
  text-decoration: none;
}
.ul-nav-tree2__item-title {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
@media (max-width: 767.98px) {
  .ul-nav-tree2__group + .ul-nav-tree2__group {
    margin-top: 16px;
  }
  .ul-nav-tree2__group-title {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .ul-nav-tree2__group-main {
    padding-left: 8px;
  }
  .ul-nav-tree2__item {
    font-size: 10px;
  }
  .ul-nav-tree2__item.active::before {
    left: -8px;
    height: 14px;
  }
}
@media (max-width: 575.98px) {
  .ul-nav-tree2 {
    border-radius: 0;
  }
  .ul-nav-tree2__group-main {
    padding-left: 4px;
  }
  .ul-nav-tree2__item.active::before {
    left: -4px;
    height: 12px;
  }
}

<view class="ul-nav-tree2">
    <view class="ul-nav-tree2__group">
        <view class="ul-nav-tree2__group-title">账号管理</view>
        <view class="ul-nav-tree2__group-main">
            <a href="" class="ul-nav-tree2__item active">
                <view class="ul-nav-tree2__item-title">个人信息</view>
            </a>
            <a href="" class="ul-nav-tree2__item">
                <view class="ul-nav-tree2__item-title">安全中心</view>
            </a>
            <a href="" class="ul-nav-tree2__item">
                <view class="ul-nav-tree2__item-title">提现管理</view>
            </a>
        </view>
    </view>
    <view class="ul-nav-tree2__group">
        <view class="ul-nav-tree2__group-title">资金管理</view>
        <view class="ul-nav-tree2__group-main">
            <a href="" class="ul-nav-tree2__item">
                <view class="ul-nav-tree2__item-title">余额宝</view>
            </a>
            <a href="" class="ul-nav-tree2__item">
                <view class="ul-nav-tree2__item-title">理财产品</view>
            </a>
            <a href="" class="ul-nav-tree2__item disabled">
                <view class="ul-nav-tree2__item-title">投资记录</view>
            </a>
        </view>
    </view>
    <view class="ul-nav-tree2__group">
        <view class="ul-nav-tree2__group-title">系统设置</view>
        <view class="ul-nav-tree2__group-main">
            <a href="" class="ul-nav-tree2__item">
                <view class="ul-nav-tree2__item-title">通知设置</view>
            </a>
            <a href="" class="ul-nav-tree2__item">
                <view class="ul-nav-tree2__item-title">隐私设置</view>
            </a>
        </view>
    </view>
</view>