93 lines
2.6 KiB
Vue
93 lines
2.6 KiB
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>
|