box-title组件

shuishen

2023-10-28 ca5e8cd16ed080273903fd0925b5d3ed8c7394dc

box-title组件

 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>

 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>