settle-vue3/src/views/welcome/index.vue

<script setup lang="ts">
import { ref } from "vue"
import Header from "./layouts/header.vue"
import Footer from "./layouts/footer.vue"

import Draggable from "vuedraggable"

import { data } from "./panel"

const editable = ref(true)

function handleDrop(evt) {
  console.log(evt)
}
</script>

<template>
  <div class="welcome">
    <div :class="`border-1 box-border p-[5px] ${editable ? 'border-[#9fd2ff]' : 'border-transparent'}`">
      <!-- <Header v-model="editable" /> -->

      <div class="flex w-full">
        <!-- left-start -->
        <div class="w-[1100px] h-full mr-[10px]">
          <Draggable :list="data.left" group="left" @change="handleDrop">
            <template #item="{ element }">
              <div class="w-full h-[180px] mb-2">
                <component :editable="editable" :is="element.key" />
              </div>
            </template>
          </Draggable>
        </div>
        <!-- left-end -->

        <!-- right-start -->
        <div class="flex-1 h-full">
          <template v-for="item in data.right" :key="item.key">
            <div class="w-full h-[180px] mb-2">
              <component :editable="editable" :is="item.key" />
            </div>
          </template>
        </div>
        <!-- right-end -->
      </div>
    </div>

    <Footer v-model="editable" />
  </div>
</template>

<style module scoped>
.size {
  height: 335px;
}
</style>

<style lang="scss" scoped>
.welcome {
  min-height: calc(100vh - 48px);
  width: 100%;
  height: calc(100vh - 48px);
  display: flex;
  padding: 0 0 0 0;
  flex-direction: column;
}
</style>