sunmicro-lvgl-designer/src/renderer/src/lvgl-widgets/message/MessageBox.vue

<template>
  <div :style="styleMap?.mainStyle" class="overflow-hidden box-broder">
    <div :style="styleMap?.titleStyle" class="flex items-center justify-between box-broder p-10px">
      <span>{{ title }}</span>
      <span
        class="bg-#2195f6 shadow-[0_4px_0_#cccccc] text-white w-40px h-30px rounded-10px grid place-items-center"
      >
        <LuX size="14px" />
      </span>
    </div>
    <div :style="styleMap?.contentStyle" class="box-broder p-10px">{{ content }}</div>
    <div class="flex items-center justify-around">
      <div
        :style="{ ...styleMap?.btnsStyle, width: btnWidth + 'px', height: btnHeight + 'px' }"
        v-for="(btn, index) in btns"
        :key="index"
        class="grid place-items-center shadow-[0_4px_0_#cccccc]"
      >
        {{ btn.text }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import { LuX } from 'vue-icons-plus/lu'

const props = defineProps<{
  width: number
  height: number
  styles: any
  state: string
  part: string
  title: string
  content: string
  closeBtn: boolean
  btnWidth: number
  btnHeight: number
  btns: { text: string }[]
}>()

const styleMap = useWidgetStyle({
  widget: 'lv_msgbox',
  props
})
</script>

<style scoped></style>