From 019840aaa3e52595c9ebd92475f8e816a9f73786 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Sat, 02 Dec 2023 20:14:15 +0800
Subject: [PATCH] 首页菜单布局组件，增加分组标题
---
layout/homeNav/CHomeNav.vue | 10 +++++++++-
layout/homeNav/cHomeNav.scss | 29 ++++++++++++++++++++++++++---
2 files changed, 35 insertions(+), 4 deletions(-)
diff --git a/layout/homeNav/CHomeNav.vue b/layout/homeNav/CHomeNav.vue
index 2035d3f..25b41b1 100644
--- a/layout/homeNav/CHomeNav.vue
+++ b/layout/homeNav/CHomeNav.vue
@@ -5,7 +5,13 @@
<template>
<view :class="['c-home-nav', 'col-'+layout]">
- <slot />
+ <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: {},
};
diff --git a/layout/homeNav/cHomeNav.scss b/layout/homeNav/cHomeNav.scss
index c10b698..913cad1 100644
--- a/layout/homeNav/cHomeNav.scss
+++ b/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 {
- @include clearfix;
+ .c-home-nav-content {
+ @include clearfix;
+ }
.c-home-item {
float: left;
width: 50%;
@@ -50,8 +63,9 @@
}
}
&.col-three {
- width: 100%;
- @include flexbox(flex, flex-start center, n wrap);
+ .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;
}
--
Gitblit v1.9.1