首页菜单布局组件，增加分组标题

Tevin

2023-12-02 019840aaa3e52595c9ebd92475f8e816a9f73786

首页菜单布局组件，增加分组标题

 layout/homeNav/CHomeNav.vue

@@ -5,7 +5,13 @@

<template>
    <view :class="['c-home-nav', 'col-'+layout]">
        <view
            class="c-home-nav-title"
            v-if="title"
        >{{title}}</view>
        <view class="c-home-nav-content">
        <slot />
        </view>
    </view>
</template>

@@ -21,6 +27,8 @@
            type: String,
            default: 'two',
        },
        // 群组标题
        title: String,
    },
    methods: {},
};

 layout/homeNav/cHomeNav.scss

@@ -6,9 +6,22 @@
@import "../../common/sassMixin";

.c-home-nav {
    width: 100%;
    margin-bottom: 20px;
    .c-home-nav-title {
        width: 100%;
        color: #666;
        text-align: center;
        background-color: #fff;
        border-top: #e2e2e2 1PX solid;
    }
    .c-home-nav-content {
        width: 100%;
    }
    &.col-two {
        .c-home-nav-content {
        @include clearfix;
        }
        .c-home-item {
            float: left;
            width: 50%;
@@ -50,8 +63,9 @@
        }
    }
    &.col-three {
        width: 100%;
        .c-home-nav-content {
        @include flexbox(flex, flex-start center, n wrap);
        }
        .c-home-item {
            width: 33.3%;
            height: 246px;
@@ -65,6 +79,15 @@
            &:active {
                background-color: #f2f2f2;
            }
            &:nth-child(1) {
                border-top: #e2e2e2 1PX solid;
            }
            &:nth-child(2) {
                border-top: #e2e2e2 1PX solid;
            }
            &:nth-child(3) {
                border-top: #e2e2e2 1PX solid;
            }
            &:nth-child(3n+3) {
                border-right: none;
            }