<template>
	<div class="container2">
		<div class="tit">
			<rocketTit>{{ title }}</rocketTit>
			<hr style="border: 0; border-bottom: 1px solid #91d5fe" />
			<div class="datePicker">
				<slot name="datePicker"></slot>
			</div>
		</div>
		<div class="content">
			<div class="snap">
				<slot name="snap"></slot>
			</div>

			<slot />
		</div>
	</div>
</template>

<script>
import rocketTit from '../../../components/rocketTit/index.vue'

export default {
	name: 'Container2',
	components: {
		rocketTit,
	},
	props: {
		title: {
			type: String,
			default: '',
		},
		selected: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {}
	},
}
</script>

<style lang="scss" scoped>
.container2 {
	display: flex;
	flex-direction: column;
	width: 538px;
	height: 586px;
	background-size: cover;
	color: #ffffff;
	font-size: 16px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;

	.tit {
		border-bottom: 1px solid #91d5fe;
		padding: 0 5px;
		position: relative;
		&::before {
			content: ' ';
			position: absolute;
			left: 0;
			bottom: -4px;
			width: 6px;
			height: 6px;
			background-color: #91d5fe;
			border-radius: 4px;
		}
		&::after {
			content: ' ';
			position: absolute;
			right: 0;
			bottom: -4px;
			width: 6px;
			height: 6px;
			background-color: #91d5fe;
			border-radius: 4px;
		}
		.datePicker {
			position: absolute;
			right: 16px;
			top: 12px;

			::v-deep .el-date-editor {
				border-radius: 0;
				box-shadow: none !important;
				border: 1px solid rgba(255, 255, 255, 0.2);
				vertical-align: middle;
				color: #fff;
				background-color: transparent;
				.el-range-input,
				.el-range-separator {
					color: #fff;
				}
				.el-range-editor.is-active {
					border-color: #fff !important;
				}

				input {
					background-color: transparent;
				}
			}
		}
	}

	.content {
		flex: 1;
		padding: 2px;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		.snap {
			position: absolute;
			top: 20px;
			left: 25px;
			font-weight: 300;
		}
	}
}
</style>
