.ul-nav-block {
    border-radius: 16px;
    overflow: hidden;
    background-color: #fff;
    color: #333;

    .item {
        padding: 16px 32px;

        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;

        .item-icon {
            margin-right: 16px;
        }

        &.current {
            background-color: rgb(255, 91, 114);
            color: #fff;
        }

        &:hover {
            background-color: rgba(255, 91, 113, 0.772);
            color: #fff;
        }
    }
}

.ul-nav-block {
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
  color: #333;
}
.ul-nav-block .item {
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}
.ul-nav-block .item .item-icon {
  margin-right: 16px;
}
.ul-nav-block .item.current {
  background-color: #ff5b72;
  color: #fff;
}
.ul-nav-block .item:hover {
  background-color: rgba(255, 91, 113, 0.772);
  color: #fff;
}

<view class="ul-nav-block" style="width: 160px;">
    <view class="item current">
        <view class="item-icon"><i class="layui-icon layui-icon-chart"></i></view>
        <view class="item-title">首页</view>
    </view>
    <view class="item">
        <view class="item-icon"><i class="layui-icon layui-icon-light"></i></view>
        <view class="item-title">订单管理</view>
    </view>
    <view class="item">
        <view class="item-icon"><i class="layui-icon layui-icon-app"></i></view>
        <view class="item-title">产品管理</view>
    </view>
    <view class="item">
        <view class="item-icon"><i class="layui-icon layui-icon-about"></i></view>
        <view class="item-title">其他</view>
    </view>
</view>

.ul-nav-button-item {
    display         : flex;
    align-items     : center;
    justify-content : flex-start;
    margin-bottom   : 10px;
    border-radius   : 8px;
    padding         : 10px;
    box-shadow      : 0px 1px 3px #bbb;
    background-color: #fff;
    cursor          : pointer;
}

.ul-nav-button-icon {
    margin-right: 10px;
}

.ul-nav-button-icon .icon {
    font-size: 38px;
    color    : #999;
}

.ul-nav-button-title {
    color      : #333;
    font-size  : 16px;
    font-weight: 600;
}

.ul-nav-button-desc {
    color    : #666;
    font-size: 14px;
}

.ul-nav-button-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 1px 3px #bbb;
  background-color: #fff;
  cursor: pointer;
}
.ul-nav-button-icon {
  margin-right: 10px;
}
.ul-nav-button-icon .icon {
  font-size: 38px;
  color: #999;
}
.ul-nav-button-title {
  color: #333;
  font-size: 16px;
  font-weight: 600;
}
.ul-nav-button-desc {
  color: #666;
  font-size: 14px;
}

<view class="ul-nav-button">
    <view class="ul-nav-button-item">
        <view class="ul-nav-button-icon"><i class="icon layui-icon layui-icon-add-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 layui-icon layui-icon-about"></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-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;
    width         : 50px;
    height        : 50px;
    border-radius : 5px;
    line-height   : 50px;
    text-align    : center;
    background    : #2E4158;
    display       : inline-block;
    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-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;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  line-height: 50px;
  text-align: center;
  background: #2E4158;
  display: inline-block;
  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-item-left">
                <view class="ul-nav-card-item-icon layui-icon layui-icon-set"></view>
                <view class="ul-nav-card-item-info">
                    <view class="ul-nav-card-item-title">登录密码</view>
                    <view class="ul-nav-card-item-desc">建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。 </view>
                </view>
            </view>
            <view class="ul-nav-card-item-right">
                <view class="layui-btn layui-btn-sm">修改密码</view>
            </view>
        </view>
        <view class="ul-nav-card-item">
            <view class="ul-nav-card-item-left">
                <view class="ul-nav-card-item-icon layui-icon layui-icon-set"></view>
                <view class="ul-nav-card-item-info">
                    <view class="ul-nav-card-item-title">资金密码</view>
                    <view class="ul-nav-card-item-desc">资金密码用于提现、绑定银行卡等操作，可保障资金安全 </view>
                </view>
            </view>
            <view class="ul-nav-card-item-right">
                <view class="layui-btn layui-btn-sm">找回资金密码</view>
                <view class="layui-btn layui-btn-sm">修改资金密码</view>
            </view>
        </view>
        <view class="ul-nav-card-item disabled">
            <view class="ul-nav-card-item-left">
                <view class="ul-nav-card-item-icon layui-icon layui-icon-set"></view>
                <view class="ul-nav-card-item-info">
                    <view class="ul-nav-card-item-title">比特币转出</view>
                    <view class="ul-nav-card-item-desc">系统维护,不能转出</view>
                </view>
            </view>
            <view class="ul-nav-card-item-right">
                <view class="layui-btn layui-btn-sm layui-btn-disabled">立即转出</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-nav-card ul-nav-card-simple">
        <view class="ul-nav-card-item">
            <view class="ul-nav-card-item-left">
                <view class="ul-nav-card-item-icon layui-icon layui-icon-set"></view>
                <view class="ul-nav-card-item-info">
                    <view class="ul-nav-card-item-title">登录密码</view>
                    <view class="ul-nav-card-item-desc">建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。 </view>
                </view>
            </view>
            <view class="ul-nav-card-item-right">
                <view class="layui-btn layui-btn-sm">修改密码</view>
            </view>
        </view>
        <view class="ul-nav-card-item">
            <view class="ul-nav-card-item-left">
                <view class="ul-nav-card-item-icon layui-icon layui-icon-set"></view>
                <view class="ul-nav-card-item-info">
                    <view class="ul-nav-card-item-title">资金密码</view>
                    <view class="ul-nav-card-item-desc">资金密码用于提现、绑定银行卡等操作，可保障资金安全 </view>
                </view>
            </view>
            <view class="ul-nav-card-item-right">
                <view class="layui-btn layui-btn-sm">找回资金密码</view>
                <view class="layui-btn layui-btn-sm">修改资金密码</view>
            </view>
        </view>
        <view class="ul-nav-card-item disabled">
            <view class="ul-nav-card-item-left">
                <view class="ul-nav-card-item-icon layui-icon layui-icon-set"></view>
                <view class="ul-nav-card-item-info">
                    <view class="ul-nav-card-item-title">比特币转出</view>
                    <view class="ul-nav-card-item-desc">系统维护,不能转出</view>
                </view>
            </view>
            <view class="ul-nav-card-item-right">
                <view class="layui-btn layui-btn-sm layui-btn-disabled">立即转出</view>
            </view>
        </view>
    </view>
</view>

.ul-nav-easy {
    background-color: transparent;
}

.layui-nav-tree.ul-nav-easy .layui-nav-item>a {
    color: #666;
}

.layui-nav-tree.ul-nav-easy .layui-this {
    background-color: transparent;
}

.layui-nav-tree.ul-nav-easy .layui-this>a {
    background-color: transparent;
    color           : #6cf;
}

.layui-nav-tree.ul-nav-easy .layui-nav-item.layui-this a:hover {
    color: #6cf;
}

.layui-nav-tree.ul-nav-easy .layui-nav-item a:hover {
    color: #fff;
}

.layui-nav-tree.ul-nav-easy .layui-nav-item a {
    height     : 45px;
    line-height: 45px;
}

.ul-nav-easy {
  background-color: transparent;
}
.layui-nav-tree.ul-nav-easy .layui-nav-item > a {
  color: #666;
}
.layui-nav-tree.ul-nav-easy .layui-this {
  background-color: transparent;
}
.layui-nav-tree.ul-nav-easy .layui-this > a {
  background-color: transparent;
  color: #6cf;
}
.layui-nav-tree.ul-nav-easy .layui-nav-item.layui-this a:hover {
  color: #6cf;
}
.layui-nav-tree.ul-nav-easy .layui-nav-item a:hover {
  color: #fff;
}
.layui-nav-tree.ul-nav-easy .layui-nav-item a {
  height: 45px;
  line-height: 45px;
}

<ul class="layui-nav layui-nav-tree ul-nav-easy" lay-filter="user-nav">
    <li class="layui-nav-item"><a href="">概况</a></li>
    <li class="layui-nav-item layui-this"><a href="">文章管理</a></li>
    <li class="layui-nav-item"><a href="">素材管理</a></li>
    <li class="layui-nav-item"><a href="">评论管理</a></li>
    <li class="layui-nav-item"><a href="">消息通知</a></li>
    <li class="layui-nav-item"><a href="">数据分析</a></li>
    <li class="layui-nav-item"><a href="">粉丝管理</a></li>
    <li class="layui-nav-item"><a href="">私信管理</a></li>
    <li class="layui-nav-item"><a href="">帐号设置</a></li>
</ul>

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

    $gridCount: 3;

    .item {
        flex: 0 0 calc(100% / $gridCount);
        text-align: center;
        margin-bottom: 12px;

        .icon {
            text-align: center;
        }

        .main {
            padding: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: fit-content;
			margin: 0 auto;
        }
    }

    // 将背景颜色值定义成变量

    $colors:('red': #FF6961,
        'orange': #FFA07A,
        'yellow': #FF69B4,
        'green': #2ECC71,
        'bluegreen': #1ABC9C,
        'blue': #3498DB,
        'purple': #AF7AC5,
    );



    &.colord {

        @each $colorKey,
        $color in $colors {
            .item.#{$colorKey} {
                .icon {
                    color: $color;
                }
            }

        }

    }

    &.colord-bg {

        @each $colorKey,
        $color in $colors {
            .item.#{$colorKey} {
                .icon {
                    color: #fff;

                    .main {
                        background-color: $color;
                        border-radius: 50%;
                    }
                }
            }
        }
    }

    &.box {
        background-color: #eee;
        padding: 0.5px;

        .item {
            flex: 0 0 calc(100% / $gridCount - 1px - 24px);
            margin: 0.5px;
            background-color: #fff;
            padding: 12px;
        }
    }
}

.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% / $gridCount);
  text-align: center;
  margin-bottom: 12px;
}
.ul-nav-grid .item .icon {
  text-align: center;
}
.ul-nav-grid .item .main {
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}
.ul-nav-grid.colord .item.red .icon {
  color: #FF6961;
}
.ul-nav-grid.colord .item.orange .icon {
  color: #FFA07A;
}
.ul-nav-grid.colord .item.yellow .icon {
  color: #FF69B4;
}
.ul-nav-grid.colord .item.green .icon {
  color: #2ECC71;
}
.ul-nav-grid.colord .item.bluegreen .icon {
  color: #1ABC9C;
}
.ul-nav-grid.colord .item.blue .icon {
  color: #3498DB;
}
.ul-nav-grid.colord .item.purple .icon {
  color: #AF7AC5;
}
.ul-nav-grid.colord-bg .item.red .icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .item.red .icon .main {
  background-color: #FF6961;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .item.orange .icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .item.orange .icon .main {
  background-color: #FFA07A;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .item.yellow .icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .item.yellow .icon .main {
  background-color: #FF69B4;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .item.green .icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .item.green .icon .main {
  background-color: #2ECC71;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .item.bluegreen .icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .item.bluegreen .icon .main {
  background-color: #1ABC9C;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .item.blue .icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .item.blue .icon .main {
  background-color: #3498DB;
  border-radius: 50%;
}
.ul-nav-grid.colord-bg .item.purple .icon {
  color: #fff;
}
.ul-nav-grid.colord-bg .item.purple .icon .main {
  background-color: #AF7AC5;
  border-radius: 50%;
}
.ul-nav-grid.box {
  background-color: #eee;
  padding: 0.5px;
}
.ul-nav-grid.box .item {
  flex: 0 0 calc(100% / $gridCount - 1px - 24px);
  margin: 0.5px;
  background-color: #fff;
  padding: 12px;
}

<view class="ul-group-title">基本</view>
<view class="ul-nav-grid colord">
    <view class="item red">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
</view>
<view class="ul-group-title">图标颜色</view>
<view class="ul-nav-grid colord">
    <view class="item red">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item orange">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item yellow">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item green">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item bluegreen">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item blue">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item purple">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item red">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item orange">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item yellow">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item green">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item bluegreen">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
</view>
<view class="ul-group-title">图标背景</view>
<view class="ul-nav-grid colord-bg">
    <view class="item red">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item orange">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item yellow">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item green">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item bluegreen">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item blue">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item purple">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item red">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item orange">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item yellow">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item green">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item bluegreen">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
</view>
<view class="ul-group-title">宫格边框+背景色</view>
<view class="ul-nav-grid colord-bg box">
    <view class="item red">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item orange">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item yellow">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item green">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item bluegreen">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item blue">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item purple">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item red">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item orange">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item yellow">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item green">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item bluegreen">
        <view class="icon">
            <view class="main"><i class="layui-icon layui-icon-home"></i></view>
        </view>
        <view class="title">首页</view>
    </view>
</view>
<view class="ul-group-title">宫格边框+图片</view>
<view class="ul-nav-grid box">
    <view class="item red">
        <view class="icon">
            <view class="main">
                <img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
            </view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item orange">
        <view class="icon">
            <view class="main">
                <img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
            </view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item yellow">
        <view class="icon">
            <view class="main">
                <img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
            </view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item green">
        <view class="icon">
            <view class="main">
                <img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
            </view>
        </view>
        <view class="title">首页</view>
    </view>
</view>
<view class="ul-group-title">宫格边框+图片+背景</view>
<view class="ul-nav-grid colord-bg">
    <view class="item red">
        <view class="icon">
            <view class="main">
                <img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
            </view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item orange">
        <view class="icon">
            <view class="main">
                <img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
            </view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item yellow">
        <view class="icon">
            <view class="main">
                <img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
            </view>
        </view>
        <view class="title">首页</view>
    </view>
    <view class="item green">
        <view class="icon">
            <view class="main">
                <img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
            </view>
        </view>
        <view class="title">首页</view>
    </view>
</view>

.ul-nav-header-main {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 5px 15px;
    margin         : 0 auto;
}

.ul-nav-header-right {
    text-align: right;
}

.ul-nav-header-item {
    display     : inline-block;
    margin-right: 15px;
    cursor      : pointer;
    padding     : 5px 15px;
    color       : #333;
}

.ul-nav-header-item:hover {
    color: #6cf;
}

.ul-nav-header-red {
    background-color: #f72222;
}

.ul-nav-header-red .ul-nav-header-item {
    color: #fff;
}

.ul-nav-header-red .ul-nav-header-item:hover {
    color: #fedf50;
}

.ul-nav-header-primary {
    background-color: #6cf;
}

.ul-nav-header-primary .ul-nav-header-item {
    color: #fff;
}

.ul-nav-header-primary .ul-nav-header-item:hover {
    color: #ccffff;
}

.ul-nav-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 15px;
  margin: 0 auto;
}
.ul-nav-header-right {
  text-align: right;
}
.ul-nav-header-item {
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
  padding: 5px 15px;
  color: #333;
}
.ul-nav-header-item:hover {
  color: #6cf;
}
.ul-nav-header-red {
  background-color: #f72222;
}
.ul-nav-header-red .ul-nav-header-item {
  color: #fff;
}
.ul-nav-header-red .ul-nav-header-item:hover {
  color: #fedf50;
}
.ul-nav-header-primary {
  background-color: #6cf;
}
.ul-nav-header-primary .ul-nav-header-item {
  color: #fff;
}
.ul-nav-header-primary .ul-nav-header-item:hover {
  color: #ccffff;
}

<view class="ul-section">
    <view class="ul-nav-header">
        <view class="ul-nav-header-main">
            <view class="ul-nav-header-left ul-demo-img-logo" style="height: 60px;width: 60px;"></view>
            <view class="ul-nav-header-right">
                <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 ul-nav-header-red">
        <view class="ul-nav-header-main">
            <view class="ul-nav-header-left ul-demo-img-logo" style="height: 60px;width: 60px;"></view>
            <view class="ul-nav-header-right">
                <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 ul-nav-header-primary">
        <view class="ul-nav-header-main">
            <view class="ul-nav-header-left ul-demo-img-logo" style="height: 60px;width: 60px;"></view>
            <view class="ul-nav-header-right">
                <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 {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        padding        : 15px;


        &__main {
            &__info {
                display        : flex;
                align-items    : center;
                justify-content: flex-start;
            }

            &__icon {
                margin-right: 10px;
            }

            &__title {
                font-size  : 15px;
                font-weight: 400;
            }

            &__content {
                margin-top: 10px;
                color     : #bbb;
                font-size : 14px;
            }
        }

        &__right {
            display        : flex;
            align-items    : center;
            justify-content: flex-end;
            color          : #bbb;

            &__item {
                margin-left: 5px;
            }
        }


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

}

.ul-nav-info__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}
.ul-nav-info__item__main__info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ul-nav-info__item__main__icon {
  margin-right: 10px;
}
.ul-nav-info__item__main__title {
  font-size: 15px;
  font-weight: 400;
}
.ul-nav-info__item__main__content {
  margin-top: 10px;
  color: #bbb;
  font-size: 14px;
}
.ul-nav-info__item__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #bbb;
}
.ul-nav-info__item__right__item {
  margin-left: 5px;
}
.ul-nav-info__item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

<view class="ul-nav-info">
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__item__main">
            <view class="ul-nav-info__item__main__info">
                <view class="ul-nav-info__item__main__icon"><i class="layui-icon layui-icon-set"></i></view>
                <view class="ul-nav-info__item__main__title">设置</view>
            </view>
            <view class="ul-nav-info__item__main__content">设置系统信息</view>
        </view>
        <view class="ul-nav-info__item__right">
            <view class="ul-nav-info__item__right__item">新版本</view>
            <view class="ul-nav-info__item__right__item"><i class="layui-icon layui-icon-right"></i></view>
        </view>
    </view>
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__item__main">
            <view class="ul-nav-info__item__main__info">
                <view class="ul-nav-info__item__main__icon"><i class="layui-icon layui-icon-set"></i></view>
                <view class="ul-nav-info__item__main__title">设置</view>
            </view>
        </view>
        <view class="ul-nav-info__item__right">
            <view class="ul-nav-info__item__right__item">新版本</view>
            <view class="ul-nav-info__item__right__item"><i class="layui-icon layui-icon-right"></i></view>
        </view>
    </view>
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__item__main">
            <view class="ul-nav-info__item__main__info">
                <view class="ul-nav-info__item__main__title">设置</view>
            </view>
        </view>
        <view class="ul-nav-info__item__right">
            <view class="ul-nav-info__item__right__item">新版本</view>
            <view class="ul-nav-info__item__right__item"><i class="layui-icon layui-icon-right"></i></view>
        </view>
    </view>
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__item__main">
            <view class="ul-nav-info__item__main__info">
                <view class="ul-nav-info__item__main__icon">
                    <view class="ul-demo-img-bg" style="width:30px;height: 30px;"></view>
                </view>
                <view class="ul-nav-info__item__main__title">设置</view>
            </view>
        </view>
        <view class="ul-nav-info__item__right">
            <view class="ul-nav-info__item__right__item">新版本</view>
            <view class="ul-nav-info__item__right__item"><i class="layui-icon layui-icon-right"></i></view>
        </view>
    </view>
    <view class="ul-nav-info__item">
        <view class="ul-nav-info__item__main">
            <view class="ul-nav-info__item__main__info">
                <view class="ul-nav-info__item__main__icon">
                    <view class="ul-demo-img-bg" style="width:90px;height: 90px;"></view>
                </view>
                <view class="ul-nav-info__item__main__title">
                    设置
                    <view class="ul-nav-info__item__main__content">设置系统信息</view>
                </view>
            </view>
        </view>
        <view class="ul-nav-info__item__right">
            <view class="ul-nav-info__item__right__item">新版本</view>
            <view class="ul-nav-info__item__right__item"><i class="layui-icon layui-icon-right"></i></view>
        </view>
    </view>
</view>

.ul-nav-link-item {
    display    : inline-block;
    margin     : 5px 0;
    padding    : 0 10px;
    border     : 1px solid transparent;
    color      : #333;
    white-space: nowrap;
}

.ul-nav-link-item:not(:last-child) {
    border-right-color: #666;
}

.ul-nav-link-item {
  display: inline-block;
  margin: 5px 0;
  padding: 0 10px;
  border: 1px solid transparent;
  color: #333;
  white-space: nowrap;
}
.ul-nav-link-item:not(:last-child) {
  border-right-color: #666;
}

<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>

.ul-nav-min {
    box-shadow: 2px 2px 5px #999;
    padding   : 5px;
    text-align: center;
}

.ul-nav-min .ul-nav-min-item {
    padding: 5px 0;
    cursor : pointer;
    color  : #333;
    display: block;
}

.ul-nav-min-item:hover {
    color: #6cf;
}

.ul-nav-min {
  box-shadow: 2px 2px 5px #999;
  padding: 5px;
  text-align: center;
}
.ul-nav-min .ul-nav-min-item {
  padding: 5px 0;
  cursor: pointer;
  color: #333;
  display: block;
}
.ul-nav-min-item:hover {
  color: #6cf;
}

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

.ul-nav-poster {
    padding         : 5px;
    border          : 1px solid #ddd;
    border-top-width: 3px;
}

.ul-nav-poster-item {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    cursor         : pointer;
}

.ul-nav-poster-left {
    display    : flex;
    align-items: center;
}

.ul-nav-post-title {
    color      : #333;
    font-weight: bold;
}

.ul-nav-poster-desc {
    color      : #999;
    font-size  : 12px;
    font-weight: 100;
}

.ul-nav-poster-img {
    width              : 38px;
    height             : 38px;
    margin             : 5px;
    background-size    : cover;
    background-position: center;
}

.ul-nav-poster-item:not(:last-child) {
    border-bottom: 1px dashed #ddd;
}

.ul-nav-poster {
  padding: 5px;
  border: 1px solid #ddd;
  border-top-width: 3px;
}
.ul-nav-poster-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.ul-nav-poster-left {
  display: flex;
  align-items: center;
}
.ul-nav-post-title {
  color: #333;
  font-weight: bold;
}
.ul-nav-poster-desc {
  color: #999;
  font-size: 12px;
  font-weight: 100;
}
.ul-nav-poster-img {
  width: 38px;
  height: 38px;
  margin: 5px;
  background-size: cover;
  background-position: center;
}
.ul-nav-poster-item:not(:last-child) {
  border-bottom: 1px dashed #ddd;
}

<view class="ul-nav-poster" style="width: 200px;">
    <view class="ul-nav-poster-item" data-repeat="6">
        <view class="ul-nav-poster-left">
            <view class="ul-nav-poster-img ul-demo-img-bg"></view>
            <view class="ul-nav-post-title">国产专区</view>
        </view>
        <view class="ul-nav-poster-right">
            <view class="ul-nav-poster-desc">进入系统</view>
        </view>
    </view>
</view>

/* 附带说明垂直导航 */
.ul-nav-tree {}

.ul-nav-tree-group-title {
    font-size  : 16px;
    font-weight: 600;
    line-height: 2;
}

.ul-nav-tree-item {
    display    : flex;
    align-items: baseline;
    cursor     : pointer;
    padding    : 5px;
    white-space: nowrap;
}

.ul-nav-tree-item.current .ul-nav-tree-item-title {
    color: #6cf;
}

.ul-nav-tree-item-title {
    font-size: 15px;
}

.ul-nav-tree-item-desc {
    font-size  : 14px;
    color      : #999;
    margin-left: 15px;
}

@charset "UTF-8";
/* 附带说明垂直导航 */
.ul-nav-tree-group-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
}
.ul-nav-tree-item {
  display: flex;
  align-items: baseline;
  cursor: pointer;
  padding: 5px;
  white-space: nowrap;
}
.ul-nav-tree-item.current .ul-nav-tree-item-title {
  color: #6cf;
}
.ul-nav-tree-item-title {
  font-size: 15px;
}
.ul-nav-tree-item-desc {
  font-size: 14px;
  color: #999;
  margin-left: 15px;
}

<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">
            <a href="" class="ul-nav-tree-item current">
                <view class="ul-nav-tree-item-title">欢迎</view>
                <view class="ul-nav-tree-item-desc">项目介绍/使用说明</view>
            </a>
            <a href="" class="ul-nav-tree-item">
                <view class="ul-nav-tree-item-title">开始使用</view>
                <view class="ul-nav-tree-item-desc">安装方式,注意事项</view>
            </a>
            <a href="" class="ul-nav-tree-item">
                <view class="ul-nav-tree-item-title">如何使用</view>
                <view class="ul-nav-tree-item-desc">复制组件</view>
            </a>
        </view>
    </view>
    <view class="ul-nav-tree-group">
        <view class="ul-nav-tree-group-title">组件</view>
        <view class="ul-nav-tree-group-main">
            <a href="" class="ul-nav-tree-item">
                <view class="ul-nav-tree-item-title">列表</view>
                <view class="ul-nav-tree-item-desc">用户列表/文章列表...</view>
            </a>
            <a href="" class="ul-nav-tree-item">
                <view class="ul-nav-tree-item-title">头部</view>
                <view class="ul-nav-tree-item-desc">页面头</view>
            </a>
            <a href="" class="ul-nav-tree-item">
                <view class="ul-nav-tree-item-title">导航</view>
                <view class="ul-nav-tree-item-desc">横竖导航/多级导航</view>
            </a>
        </view>
    </view>
</view>

.ul-nav-tree-2 {
  .ul-nav-tree-2-group-title {
    font-size: 14px;
    padding: 6px 0;
    color: #253647;
    font-weight: 600;
    word-wrap: anywhere;
    display: block;
  }

  .ul-nav-tree-2-item {
    cursor: pointer;
    &.current,
    &:hover {
      .ul-nav-tree-2-item-title {
        color: #6cf;
        text-decoration: underline;
      }
    }
  }

  .ul-nav-tree-2-item-title {
    font-size: 14px;
    color: #999;
    padding-left: 15px;
    line-height: 24px;
    word-wrap: anywhere;
  }
}

.ul-nav-tree-2 .ul-nav-tree-2-group-title {
  font-size: 14px;
  padding: 6px 0;
  color: #253647;
  font-weight: 600;
  word-wrap: anywhere;
  display: block;
}
.ul-nav-tree-2 .ul-nav-tree-2-item {
  cursor: pointer;
}
.ul-nav-tree-2 .ul-nav-tree-2-item.current .ul-nav-tree-2-item-title, .ul-nav-tree-2 .ul-nav-tree-2-item:hover .ul-nav-tree-2-item-title {
  color: #6cf;
  text-decoration: underline;
}
.ul-nav-tree-2 .ul-nav-tree-2-item-title {
  font-size: 14px;
  color: #999;
  padding-left: 15px;
  line-height: 24px;
  word-wrap: anywhere;
}

<view class="ul-nav-tree-2">
    <view class="ul-nav-tree-2-group">
        <view class="ul-nav-tree-2-group-title">账号管理</view>
        <view class="ul-nav-tree-2-group-main">
            <a href="" class="ul-nav-tree-2-item current">
                <view class="ul-nav-tree-2-item-title">个人信息</view>
            </a>
            <a href="" class="ul-nav-tree-2-item">
                <view class="ul-nav-tree-2-item-title">安全中心</view>
            </a>
            <a href="" class="ul-nav-tree-2-item">
                <view class="ul-nav-tree-2-item-title">提现管理</view>
            </a>
        </view>
    </view>
    <view class="ul-nav-tree-2-group">
        <view class="ul-nav-tree-2-group-title">资金管理</view>
        <view class="ul-nav-tree-2-group-main">
            <a href="" class="ul-nav-tree-2-item">
                <view class="ul-nav-tree-2-item-title">余额宝</view>
            </a>
        </view>
    </view>
</view>

/* 头部结束 */

/* 导航开始 */
.layui-nav.ul-nav-white {
    background-color: #f0f0f0;
}

.layui-nav.ul-nav-white .layui-nav-child a {
    color: #666;
}

.layui-nav.ul-nav-white .layui-nav-item a {
    color: #666;
}

.layui-nav.ul-nav-white .layui-nav-itemed>.layui-nav-child {
    background-color: rgba(255, 255, 255, 0.6) !important;
    padding-left    : 15px;
    min-width       : calc(100% - 15px) !important;
}

.layui-nav-tree.ul-nav-white .layui-nav-item a:hover {
    background-color: #9cf;
    color           : #fff !important;
}

.layui-nav.ul-nav-white .layui-nav-itemed>a,
.layui-nav-tree.ul-nav-white .layui-nav-title a,
.layui-nav-tree.ul-nav-white .layui-nav-title a:hover {
    color: #666 !important;
}

.layui-nav-tree.ul-nav-white .layui-nav-bar {
    background-color: #6cf;
}

.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this,
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this a,
.layui-nav-tree.ul-nav-white .layui-this,
.layui-nav-tree.ul-nav-white .layui-this>a,
.layui-nav-tree.ul-nav-white .layui-this>a:hover {
    background-color: #9cf;
    color           : #fff;
}

/* 导航结束 */

@charset "UTF-8";
/* 头部结束 */
/* 导航开始 */
.layui-nav.ul-nav-white {
  background-color: #f0f0f0;
}
.layui-nav.ul-nav-white .layui-nav-child a {
  color: #666;
}
.layui-nav.ul-nav-white .layui-nav-item a {
  color: #666;
}
.layui-nav.ul-nav-white .layui-nav-itemed > .layui-nav-child {
  background-color: rgba(255, 255, 255, 0.6) !important;
  padding-left: 15px;
  min-width: calc(100% - 15px) !important;
}
.layui-nav-tree.ul-nav-white .layui-nav-item a:hover {
  background-color: #9cf;
  color: #fff !important;
}
.layui-nav.ul-nav-white .layui-nav-itemed > a, .layui-nav-tree.ul-nav-white .layui-nav-title a, .layui-nav-tree.ul-nav-white .layui-nav-title a:hover {
  color: #666 !important;
}
.layui-nav-tree.ul-nav-white .layui-nav-bar {
  background-color: #6cf;
}
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this, .layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this a, .layui-nav-tree.ul-nav-white .layui-this, .layui-nav-tree.ul-nav-white .layui-this > a, .layui-nav-tree.ul-nav-white .layui-this > a:hover {
  background-color: #9cf;
  color: #fff;
}
/* 导航结束 */

<ul class="layui-nav layui-nav-tree ul-nav-white">
    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side">
    -->
    <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">默认展开</a>
        <dl class="layui-nav-child">
            <dd class="layui-this"><a href="javascript:;">选项1</a></dd>
            <dd><a href="javascript:;">选项2</a></dd>
            <dd><a href="">跳转</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
</ul>