.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-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-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-tree-2 {

    .ul-nav-tree-2-group-title {

        font-size: 14px;
        padding: 6px 0;
        color: #253647;
        font-weight: 600;
        white-space: break-spaces;
        word-wrap: anywhere;
        display: block;
    }

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

    .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-group-title {
  font-size: 14px;
  padding: 6px 0;
  color: #253647;
  font-weight: 600;
  white-space: break-spaces;
  word-wrap: anywhere;
  display: block;
}
.ul-nav-tree-2 .ul-nav-tree-2-item-title {
  font-size: 14px;
  color: #999;
  padding-left: 15px;
  line-height: 24px;
  white-space: break-spaces;
  word-wrap: anywhere;
}
.ul-nav-tree-2 .ul-nav-tree-2-item:hover .ul-nav-tree-2-item-title {
  color: #6cf;
  text-decoration: underline;
}

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