项目地址：http://119.91.145.229:8011/admin/tabledata

1.可视化网页设计布局，前端拖拽自动布局，一键拖拽网页整体结构，以下容器快速拖拽到设计页面，

2.可视化拖拽表格，快速自定义设计

3.表单一键直接拖拽

快速查看到代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>可视化PC端网页设计</title>
    <link rel="stylesheet" href="./colorui/main.css">
    <link rel="stylesheet" href="./colorui/icon.css">
    <link rel="stylesheet" href="./colorui/animation.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="https://unpkg/element-ui/lib/theme-chalk/index.css">

    <script src="./js/swiper.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://unpkg/element-ui/lib/index.js"></script>
</head>

<body>


    <div id="app">
        <div class="pageconfig">
            <!--vuetop-->

            <!--表单form0的布局样式-->
            <el-form ref="form" label-position="" :model="form68001" class=" commoncss68001   ">
                <!--表单输入框0的布局样式-->
                <div class="  commoncss66380   ">
                    <el-form-item label="活动标题">
                        <el-input clearable v-model="elinput66380" type="" prefix-icon="" size="large" placeholder="请输入提示信息"></el-input>
                    </el-form-item>
                </div>
                <!--表单单选1的布局样式-->
                <div class="  commoncss94930   ">
                    <el-form-item label="特殊资源">
                        <el-radio-group v-model="radio94930">
                            <el-radio v-for="(item,index) in label94930List" :key="index" :label="item.value">{{ item.name }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <!--表单Switch开关2的布局样式-->
                <div class="  commoncss64718   ">
                    <el-form-item label="即时配送">
                        <el-switch v-model="elinput64718" active-color="" inactive-color="" active-text="" inactive-text="">
                        </el-switch>
                    </el-form-item>
                </div>
                <!--表单输入框3的布局样式-->
                <div class="  commoncss91867   ">
                    <el-form-item label="活动描述">
                        <el-input clearable v-model="elinput91867" type="textarea" prefix-icon="" size="large" placeholder="请输入描述"></el-input>
                    </el-form-item>
                </div>
                <!--表单复选4的布局样式-->
                <div class="  commoncss39534   ">
                    <el-form-item label="活动性质">
                        <el-checkbox-group v-model="checkbox39534">
                            <el-checkbox v-for="(item,index) in label39534List" :key="index" :label="item.value">{{ item.name }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </div>
                <!--Row/col栅格分栏布局5的布局样式-->
                <div class="  commoncss25805   ">
                    <el-row type="flex" justify="start" :gutter="0">
                        <el-col :span="4">
                            <!--按钮0的布局样式-->
                            <div class="  commoncss2422   ">
                                <el-button icon="" type="primary" size="small">提交</el-button>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <!--按钮0的布局样式-->
                            <div class="  commoncss17292   ">
                                <el-button icon="" type="info" size="small">重置</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>


            <!--vuebottom-->

        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                elinput66380: '',
                /**single**/
                radio94930: 0,
                /**single**/
                elinput64718: 2,
                /**single**/
                elinput91867: '',
                /**single**/
                checkbox39534: [],
                /**single**/
                form68001: {},
                /**single**/

                label94930List: [{
                    "name": "线上品牌商赞助",
                    "choose": "0",
                    "value": "2"
                }, {
                    "name": "线下场地免费",
                    "choose": "0",
                    "value": "3"
                }],
                /**vuejs**/
                label39534List: [{
                    "name": "美食\/餐厅线上活动",
                    "choose": "1",
                    "value": "1"
                }, {
                    "name": "地推活动",
                    "choose": "0",
                    "value": "2"
                }, {
                    "name": "线下主题活动",
                    "choose": "0",
                    "value": "3"
                }],
                /**vuejs**/


                optionData: {}
            },
            mounted() {

            },
            methods: {
                /**
                 *          $vuetag = "";
                 *          $vuecss = "";
                 *          $vuejs = "";
                 *
                 */

                handleChange64718(e) {

                    this.elinput64718 = e
                },
                handleChange25805(e) {

                    this.elinput25805 = e
                },
            }
        });
    </script>


</body>
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
        background-color: #F8F9FB;
    }


    /**本页全局配置的代码**/
    .pageconfig {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        overflow-y: scroll;
        background-color: ;
        background-image: url();
        background-position: ;
        background-repeat: ;
        background-size: ;
    }

    /**pagedomcss**/



    /**本页表单form0的css代码**/
    moncss68001 {
        width: 100%;
        background-color: #ffffff !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /**vuecss**/

    /**本页表单输入框0的css代码**/
    moncss66380 {
        width: 100%;
    }

    /**vuecss**/

    /**本页表单单选1的css代码**/
    moncss94930 {
        width: 100%;
    }

    /**vuecss**/

    /**本页表单Switch开关2的css代码**/
    moncss64718 {}

    /**vuecss**/

    /**本页表单输入框3的css代码**/
    moncss91867 {
        width: 100%;
    }

    /**vuecss**/

    /**本页表单复选4的css代码**/
    moncss39534 {
        width: 100%;
    }

    /**vuecss**/

    /**本页按钮0的css代码**/
    moncss2422 {}

    /**vuecss**/

    /**本页按钮0的css代码**/
    moncss17292 {}

    /**vuecss**/

    /**本页Row/col栅格分栏布局5的css代码**/
    moncss25805 {}

    /**vuecss**/
</style>

</html>