phone_uni/uni_modules/uview-plus/components/u-box/u-box.vue

<template>
	<view class="u-box" :style="[{height: height}, addStyle(customStyle)]">
        <view class="u-box__left" :style="{borderRadius: borderRadius, backgroundColor: bgColors[0]}">
            <slot name="left">左</slot>
        </view>
        <view class="u-box__gap" :style="{width: gap, height: height}"></view>
        <view class="u-box__right">
            <view class="u-box__right-top" :style="{borderRadius: borderRadius, backgroundColor: bgColors[1]}">
                <slot name="rightTop">右上</slot>
            </view>
            <view class="u-box__right-gap" :style="{height: gap}"></view>
            <view class="u-box__right-bottom" :style="{borderRadius: borderRadius, backgroundColor: bgColors[2]}">
                <slot name="rightBottom">右下</slot>
            </view>
        </view>
	</view>
</template>

<script>
	import { propsBox } from './props';
	import { mpMixin } from '../../libs/mixin/mpMixin';
	import { mixin } from '../../libs/mixin/mixin';
	import { addStyle } from '../../libs/function/index';
	import test from '../../libs/function/test';
	/**
	 * box 盒子
	 * @description box盒子一般为左边一个盒子，右侧两个等高的半盒组成，常用于App首页座位重点突出。
	 * @tutorial https://uview-plus.jiangruyi.com/components/box.html
	 * @property {Array}	bgColors			背景色
	 * @property {String}	height			    高度
     * @property {String}	borderRadius		圆角
	 * @property {Object}   customStyle		    定义需要用到的外部样式
	 * 
	 * @event {Function}			click			点击cell列表时触发
	 * @example <up-box colors=['blue', 'red', 'yellow'] height="200px"></up-box>
	 */
	export default {
		name: 'up-box',
		data() {
			return {
			}
		},
		mixins: [mpMixin, mixin, propsBox],
		computed: {
		},
		emits: [],
		methods: {
			addStyle,
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/components.scss";

	.u-box {
        /* #ifndef APP-NVUE */
        /* #endif */
        @include flex();
        flex: 1;

		&__left {
            @include flex();
            justify-content: center;
            align-items: center;
            flex: 1;
        }
        &__gap {
            @include flex();
            flex-direction: column;
        }
        &__right {
            @include flex();
            flex-direction: column;
            flex: 1;
        }

        &__right-top {
            @include flex();
            flex: 1;
            justify-content: center;
            align-items: center;
        }

        &__right-bottom {
            @include flex();
            flex: 1;
            justify-content: center;
            align-items: center;
        }
	}
</style>