布局1

// 调试设置
set_attribute("yun_body","oncontextmenu","return true;");
remove_element("info_panel");



// 创建标题
new_top_title(4,"lay-title","h-[48px] ");
set_text("lay-title","数字孪生数据显示平台");


// 创建布局
let style = "position:absolute;top:0px;left:0px;z-index:0;pointer-events:none;";
let class = " bg-base-100/0 pt-[56px] grid grid-cols-1 sm:grid-cols-12 p-4 gap-2  w-full h-full";
create_element("div","left-panel","lay-all",class,style,"Run");

// 创建布局元素
let style1 = "pointer-events: auto;";


// 第一行
let lay1_class = "card grid gap-1 p-2 z-2 bg-base-100/0 min-h-32 sm:col-span-3 xl:col-span-2 bg-size-[100%_100%] bg-no-repeat bg-[url(/assets/textures/image/card/0137.png)]";
create_element("div","lay-all","lay1",lay1_class,style1,"Run");
create_element("div","lay-all","lay2","card z-0 bg-base-100/0 sm:col-span-5 xl:col-span-7 max-sm:pointer-events-auto","","Run");
let lay3_class = "card grid gap-1 p-2 z-2  bg-base-100/0 min-h-32 sm:col-span-4 xl:col-span-3 bg-size-[100%_100%] bg-no-repeat bg-[url(/assets/textures/image/card/197.png)]";
create_element("div","lay-all","lay3",lay3_class,style1,"Run");

// 第二行
let lay2_1_class = "card grid gap-1 p-2 z-2 bg-base-100/0 min-h-32 sm:col-span-3 xl:col-span-2 bg-size-[100%_100%] bg-no-repeat bg-[url(/assets/textures/image/card/091.png)]";
create_element("div","lay-all","lay2_1",lay2_1_class,style1,"Run");
create_element("div","lay-all","lay2_2","card z-0 bg-base-100/0 sm:col-span-5 xl:col-span-7 max-sm:pointer-events-auto","","Run");
let lay2_3_class = "card grid gap-1 p-2 z-2  bg-base-100/0 min-h-32 sm:col-span-4 xl:col-span-3 bg-size-[100%_100%] bg-no-repeat bg-[url(/assets/textures/image/card/0164.png)]";
create_element("div","lay-all","lay2_3",lay2_3_class,style1,"Run");

// 第三行
let lay3_1_class = "card grid gap-1 p-2 z-2 bg-base-100/0 min-h-32 sm:col-span-6 xl:col-span-3 bg-size-[100%_100%] bg-no-repeat bg-[url(/assets/textures/image/card/0172.png)]";
create_element("div","lay-all","lay3_1",lay3_1_class,style1,"Run");
let lay3_2_class = "card grid gap-1 p-2 z-2 bg-base-100/0 min-h-32 sm:col-span-6 xl:col-span-3 bg-size-[100%_100%] bg-no-repeat bg-[url(/assets/textures/image/card/0173.png)]";
create_element("div","lay-all","lay3_2",lay3_2_class,style1,"Run");
let lay3_3_class = "card grid gap-1 p-2 z-2 bg-base-100/0 min-h-32 sm:col-span-6 xl:col-span-3 bg-size-[100%_100%] bg-no-repeat bg-[url(/assets/textures/image/card/0104.png)]";
create_element("div","lay-all","lay3_3",lay3_3_class,style1,"Run");
let lay3_4_class = "card grid gap-1 p-2 z-2 bg-base-100/0 min-h-32 sm:col-span-6 xl:col-span-3 bg-size-[100%_100%] bg-no-repeat bg-[url(/assets/textures/image/card/0158.png)]";
create_element("div","lay-all","lay3_4",lay3_4_class,style1,"Run");


// lay1
create_element("div","lay1","lay1-body","card-body pl-4 p-2",style1,"Run");
create_element("div","lay1-body","lay1-body-title","join gap-2",style1,"Run");
add_element("span","lay1-body-title","","loading loading-bars loading-xs join-item text-info",style1,"Run");
add_element("h2","lay1-body-title","标题","card-title  join-item",style1,"Run");

// lay3
create_element("div","lay3","lay3-body","card-body pl-24 p-2",style1,"Run");
create_element("div","lay3-body","lay3-body-title","join gap-2",style1,"Run");
add_element("h2","lay3-body-title","标题","card-title  join-item",style1,"Run");

// lay2_1
create_element("div","lay2_1","lay2_1-body","card-body pl-4 p-2",style1,"Run");
create_element("div","lay2_1-body","lay2_1-body-title","join gap-2",style1,"Run");
add_element("h2","lay2_1-body-title","标题","card-title  join-item",style1,"Run");


// lay2_3
create_element("div","lay2_3","lay2_3-body","card-body pl-4 p-1",style1,"Run");
create_element("div","lay2_3-body","lay2_3-body-title","join gap-2",style1,"Run");
add_element("h2","lay2_3-body-title","标题","card-title  join-item",style1,"Run");


// 兼容小屏
let moblie = false;
fn update_500ms(){
  get_widht().then(|w|{
    if w < 640 {
      if !moblie{
        append_child("lay2","yun_main");
        moblie=true;
      }

    }else{
      if moblie{
        append_child("left-panel","yun_main");
        moblie=false;
      }

    }
  });

}