From ca5e8cd16ed080273903fd0925b5d3ed8c7394dc Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 28 Oct 2023 18:15:24 +0800
Subject: [PATCH] box-title组件
---
pages/home/index.vue | 6 ++
components/boxTitle/index.vue | 77 ++++++++++++++++++++++++++++----------
2 files changed, 62 insertions(+), 21 deletions(-)
diff --git a/components/boxTitle/index.vue b/components/boxTitle/index.vue
index 11b29b8..64845ec 100644
--- a/components/boxTitle/index.vue
+++ b/components/boxTitle/index.vue
@@ -1,10 +1,23 @@
<template>
<view class="cur-container" :style="{color: color}">
- <view class="title">
- {{title}}
- </view>
- <view class="bg-box">
+ <view class="l">
+ <view class="title">
+ <view>
+ {{title}}
+ </view>
+ <view class="title-more">
+ <slot name="titleMore"></slot>
+ </view>
+ </view>
+ <view class="bg-box">
+
+ </view>
+ </view>
+ <view class="r">
+ <view class="more">
+ <slot name="more"></slot>
+ </view>
</view>
</view>
</template>
@@ -30,27 +43,51 @@
<style lang="scss" scoped>
.cur-container {
- padding-left: 10rpx;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- position: relative;
+ padding: 0 10rpx;
height: 60rpx;
+ justify-content: space-between;
+ align-items: center;
- .title {
+ .l {
+ height: 100%;
display: flex;
- position: absolute;
- z-index: 1;
+ justify-content: flex-start;
+
+ position: relative;
+
+ .title {
+ display: flex;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translate(0, -50%);
+ z-index: 99;
+
+ .title-more {
+ margin-left: 20rpx;
+ }
+ }
+
+ .bg-box {
+ position: absolute;
+ top: 50%;
+ bottom: 0;
+ width: 96rpx;
+ background: linear-gradient(to right, #2991faff, #73A2F900);
+ z-index: 1;
+ }
}
- .bg-box {
- position: absolute;
- top: 50%;
- left: 10rpx;
- bottom: 0;
- width: 96rpx;
- background: linear-gradient(to right, #2991faff, #73A2F900);
- z-index: 0;
+ .r {
+ height: 100%;
+ display: flex;
+ justify-content: flex-end;
+
+ .more {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
}
}
</style>
\ No newline at end of file
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 5352c35..29715ff 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -40,7 +40,11 @@
<view class="main-bt pb-40">
<view class="mt-20">
- <box-title :title="'生活'"></box-title>
+ <box-title :title="'生活'">
+ <template slot="titleMore">
+ <view style="color: red;">titleMore</view>
+ </template>
+ </box-title>
<view class="mt-20 b-c-w">
<menu-list :menuData="liveList"></menu-list>
--
Gitblit v1.9.3