cherry-js
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cherry.js</title>
    <script src="./Cherry.js"></script>
    <link rel="icon" href="./icon.png"/>
    <style>
        *{margin: 0;padding: 0;}
        .video{object-fit: fill;}
        .test{
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
<script>

    new CherryMain({
        app:"app",
        child:[
            new CHE_Container({
                height: "100%",
                width:"100%",
                position:"fixed",
                child:[
                    new CHE_Text({
                        zindex:3,
                        position:"absolute",
                        height: "100%",
                        width: "100%",
                        lineAlign:"center",
                        textAlign:"center",
                        child:[
                            new CHE_TextItem({
                                name:"text",
                                text:"CherryJS.js",
                                colorStyle:{
                                    color:"#fa4895",
                                    size:55,   //字体大小
                                },
                            }),
                            new CHE_Container({
                                margin:"30px auto",
                                height: 350,
                                width: 400,
                                backgroundColor:"#ffffff",
                                box:{
                                    borderRadius:10,    //原角度
                                },
                                child:[
                                    new CHE_Text({
                                        height:80,
                                        lineAlign:"center",
                                        textAlign:"center",
                                        text:"一个简单的JavaScriptUI框架",
                                        colorStyle:{
                                            color:"#424242",
                                            size:20,   //字体大小
                                        },
                                    }),
                                    new CHE_Text({
                                        height:80,
                                        width:"90%",
                                        margin: "0 auto",
                                        lineAlign:"center",
                                        // textAlign:"center",
                                        text:"\t你可以尝试的去了解一下，并且尝试的开发几个小案例，" +
                                            "\n也许你会喜欢上它，哪怕它在此时没有任何的优点。" +
                                            "\n它没有Vue的快捷方便，也没有Jquery的功能齐全，但是它小巧可爱。" +
                                            "\n【其实，官网就是一个小案例哟】",
                                        colorStyle:{
                                            color:"#666666",
                                            size:15,   //字体大小
                                        },
                                    }),
                                    new CHE_Flexlayout({
                                        width:"100%",
                                        type:"H",   //横向 H 纵向 V
                                        wrap:false,  //是否换行
                                        margin:[100,0,0,0],
                                        child:[
                                            new CHE_FlexlayoutItem({
                                               flex:1,  //弹性布局宽度 越大越宽，也可以用宽度
                                               child:[
                                                   new CHE_Button({
                                                       size:"Big",
                                                       margin:5,
                                                       outline:false,
                                                       text:"Gitee 源码",
                                                       type:"Cherry",
                                                       methods:{
                                                           click:function (e,self) {
                                                               window.open("https://gitee.com/andyxiaqi/cherry-js");
                                                           }, //点击
                                                       },
                                                   }),
                                               ]
                                            }),
                                            new CHE_FlexlayoutItem({
                                                flex:1,  //弹性布局宽度 越大越宽，也可以用宽度
                                                child:[
                                                    new CHE_Button({
                                                        size:"Big",
                                                        margin:5,
                                                        outline:false,
                                                        text:"Wiki 文档",
                                                        type:"Cherry",
                                                        methods:{
                                                            click:function (e,self) {
                                                                window.open("https://gitee.com/andyxiaqi/cherry-js/wikis");
                                                            }, //点击
                                                        },
                                                    }),
                                                ]
                                            }),

                                        ]
                                    })

                                ]
                            }),
                        ]
                    }),
                    new CHE_Container({
                        zindex:2,
                        position:"absolute",
                        height: "100%",
                        width: "100%",
                        backgroundColor:"RGBA(0,0,0,0.8)"
                    }),
                    new CHE_Media({
                        width: "100%",
                        class:"video",
                        height: "100%",
                        position:"fixed",
                        zindex:1,
                        type:"video",
                        src:"./资源/video.mp4",
                        autoplay:true, //加载完播放
                        muted:true,    //是否静音
                        loop:true    //循环播放
                    })
                ]
            })
        ],
        Created:()=>{

        }
    });


</script>
</html>