dev/dcp-app-gate/components/uni-group/uni-group.vue

<template>
	<view class="uni-group" :class="['uni-group--'+mode]" :style="{marginTop: `${top}px` }">
		<slot name="title">
			<view v-if="title" class="uni-group__title">
				<text class="uni-group__title-text">{{ title }}</text>
			</view>
		</slot>
		<view class="uni-group__content">
			<slot />
		</view>
	</view>
</template>

<script>
/**
 * Group 分组
 * @description 表单字段分组
 * @tutorial https://ext.dcloud.net.cn/plugin?id=21002
 * @property {String} title 主标题
 * @property {Number} top 分组间隔
 */
export default {
	name: 'UniFormGroup',
	props: {
		title: {
			type: String,
			default: ''
		},
		top: {
			type: [Number, String],
			default: 10
		},
		mode:{
			type:String,
			default:'default'
		}
	},
	data() {
		return {}
	},
	watch: {
		title(newVal) {
			if (uni.report && newVal !== '') {
				uni.report('title', newVal)
			}
		}
	},
	methods: {
		onClick() {
			this.$emit('click')
		}
	}
}
</script>
<style lang="scss" scoped>
	.uni-group {
        background: #fff;
        margin-top: 10px;
		// border: 1px red solid;
    }

	.uni-group__title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		padding-left: 15px;
		height: 40px;
		background-color: $uni-bg-color-grey;
		font-weight: normal;
		color: $uni-text-color;
	}
	.uni-group__content {
		padding: 15px;
		padding-bottom: 5px;
		background-color: #FFF;
	}
	.uni-group__title-text {
		font-size: $uni-font-size-base;
		color: $uni-text-color;
	}

	.distraction {
		flex-direction: row;
		align-items: center;
	}
	.uni-group--card {
		margin: 10px;
		border-radius: 5px;
		overflow: hidden;
		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.08);
	}
</style>