aizuda-web-vue3/src/views/flow/create/components/FormDesign.vue

<script setup name="FormDesign">
defineProps({
	label: {
		type: String
	},
	name: {
		type: String
	}
})
import draggable from 'vuedraggable'
</script>

<template>
	<h1>123</h1>
</template>

<style scoped lang="scss">
.form-design-wrap {
}
.leftItem {
	padding-left: 50px;
}

.zj {
	display: inline-block;
	width: 140px;
	margin: 5px;
}

$f22_width: 400px;

$center_width: 360px;
.drag-content {
	min-height: 640px;
	//border: 1px solid;
	width: $center_width;
	border-radius: 20px;
	padding: 30px 10px;
	background-color: white;
	margin-left: calc(50% - ($center_width) / 2);
	box-shadow: 0 0 10px grey;
}

.drag-content-inner {
	background-color: var(--el-bg-color-page);
	border-radius: 5px;
	padding: 5px;
}

.f11 {
	width: calc(100% - $f22_width);
}

.f22 {
	width: $f22_width;
}

.okcomponent {
	padding: 5px;
	border-radius: 0px;
	margin-bottom: 10px;
	background-color: white;
	border: 1px solid white;
}

.active-component {
	border: 1px solid var(--el-color-primary);
}

.deleteIcon {
	position: absolute;
	margin-left: calc($center_width - 60px);
	z-index: 20;
}

.deleteIcon:hover {
	cursor: pointer;
	color: palevioletred;
}
</style>