school-shunt-app/components/u-panel/u-panel.vue

<template>
	<view class="u-panel" :class="theme">
		<view class="u-panel-title u-flex" v-if="title">
			<image v-if="theme==='red'" class="icon" src="/static/home_label_red.png"></image>
			<image v-else class="icon" src="/static/home_label.png"></image>
			<view class="">{{title}}</view>
			<view style="flex:1" />
		</view>
		<slot />
	</view>
</template>

<script>
	export default {
		name: "u-panel",
		props: {
			title: {
				type: String,
				default: ''
			},
			theme: {
				type: String,
				default: ''
			},
		},
	}
</script>

<style lang="scss" scoped>
	.u-panel {
		background: #FFFFFF;
		margin-bottom: 24rpx;
		box-shadow: 0px 4rpx 22rpx 0px rgba(232, 237, 251, 0.8);
		border-radius: 6rpx;
		padding: 12rpx 32rpx 24rpx;

		&.red {
			.u-panel-title {
				color: #EF6960;
			}
		}

		.u-panel-title {
			padding: 24rpx 0;
			text-align: left;
			font-size: 30rpx;
			font-weight: bold;
			color: #078EF7;

			.icon {
				width: 7rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>