boxTitle组件

zhongrj

2023-10-27 672bbd9abf0f54f2ae664fdf6d7c83c1d755e4c7

boxTitle组件

 components/boxTitle/index.vue

New file
@@ -0,0 +1,55 @@
<template>
    <view class="cur-container" :style="{color: color}">
        <view class="title">
            {{title}}
        </view>
        <view class="bg-box">

        </view>
    </view>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: ''
            },
            color: {
                type: String,
                default: '#000'
            }
        },

        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .cur-container {
        padding-left: 10rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        height: 60rpx;
		
        .title {
            position: absolute;
            z-index: 1;
        }

        .bg-box {
            position: absolute;
            top: 50%;
            left: 10rpx;
            bottom: 0;
            width: 96rpx;
            background: linear-gradient(to right, #407BE999, #73A2F900);
            z-index: 0;
        }
    }
</style>

 main.js

@@ -2,7 +2,8 @@
import App from './App'
import store from '@/store';


import boxTitle from '@/components/boxTitle/index.vue';
Vue.component('box-title', boxTitle) // 

Vue.config.productionTip = false;