vue制作公众号相似（H5跳转）页面

公司需要将公众号独立出来开发，按照公众号的页面来制作，类似于下图：

以下是代码

<template>
  <div id="index" class="app-container">
    <div class="menutable">
        <div class="office">
            <div class="highlight_box icon_wrap menu_setting_msg js_menustatus dn" id="menustatus_2" style="display: block;">            
                <i class="icon el-icon-warning info"></i>            
                <p class="title">菜单编辑中</p>            
                <p class="desc">菜单未发布，请确认菜单编辑完成后点击“保存并发布”同步到手机。
                </p>        
            </div>
            <div class="main-tool">
                <div class="menu_preview_area">
                    <div class="mobile_menu_preview">                      
                        <div class="mobile_hd tc">公众号名称</div>                      
                        <div class="mobile_bd">
                            <div v-if="sort == 0">
                                <ul class="pre_menu_list grid_line ui-sortable ui-sortable-disabled no_menu" id="menuList">
                                    <li v-if="meunTabBar.length == 0" class="js_addMenuBox pre_menu_item grid_item no_extra size1of1 pre_menu_link">
                                        <div class="addmeun">
                                            <i class="el-icon-plus"></i><span class="js_addMenuTips">添加菜单</span>
                                        </div>
                                    </li>
                                    <li :class="(meunLeg == '1' || meunLeg == '0') ? 'widtab3' : meunLeg == '2' ? 'widtab2' : meunLeg == '3' ? 'widtab1' : ''" v-for="(item, index) in meunTabBar" :key="index">
                                        <div class="addmeun" :class="(selMeun == index && (selMeun != '' || selMeun == '0')) ? 'pre_menu_link' : ''" @click="plusMeun(index, item)">
                                            <i class="el-icon-plus" v-show="!item.name"></i><span class="js_addMenuTips">{{ item.name }}</span>
                                        </div>
                                        <div class="sub_pre_menu_box js_l2TitleBox" v-if="item.sub_button && disShow == index">
                                            <ul class="sub_pre_menu_list" v-show="(item.sub_button).length > 0">
                                                <li id="subMenu_menu_0_0" v-for="(item0, index1) in item.sub_button" @click="twoClick(item0, index1)" :class="((twoMeun == index1 && (twoMeun != '' || twoMeun == '0')) ) ? 'pre_menu_link' : ''" :key="index1" class="jslevel2 current selected">
                                                    <i class="el-icon-plus" v-show="!item0.name"></i><span class="js_addMenuTips">{{ item0.name }}</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>                        
                            <div v-else>
                                <ul class="msorting grid_line ui-sortable ui-sortable-disabled no_menu" id="menuList">
                                    <draggable class="draggable-column-content" @update="datadragEnd" :options = "{animation:500}">
                                        <li v-if="meunTabBar.length == 0" class="js_addMenuBox pre_menu_item grid_item no_extra size1of1 pre_menu_link">
                                            <div class="addmeun">
                                                <i class="el-icon-plus"></i><span class="js_addMenuTips">添加菜单</span>
                                            </div>
                                        </li>
                                        <li :class="(meunLeg == '1' || meunLeg == '0') ? 'widtab3' : meunLeg == '2' ? 'widtab2' : meunLeg == '3' ? 'widtab1' : ''" v-for="(item, index) in meunTabBar" :key="index">
                                            <div class="addmeun" :class="(selMeun == index && (selMeun != '' || selMeun == '0')) ? 'pre_menu_link' : ''" @click="plusMeun(index, item)">
                                                <i class="el-icon-plus" v-show="!item.name"></i><span class="js_addMenuTips">{{ item.name }}</span>
                                            </div>
                
                                            <div class="sub_pre_menu_box js_l2TitleBox" v-if="item.sub_button && disShow == index">
                                                <ul class="sub_pre_menu_list" v-show="(item.sub_button).length > 0">
                                                    <draggableTwo class="draggable-column" @update="datadragEnd1" :options = "{animation:500}">
                                                        <li id="subMenu_menu_0_0" v-for="(item0, index1) in item.sub_button" @click="twoClick(item0, index1)" :class="((twoMeun == index1 && (twoMeun != '' || twoMeun == '0')) ) ? 'pre_menu_link' : ''" :key="index1" class="jslevel2 current selected">
                                                            <i class="el-icon-plus" v-show="!item0.name"></i><span class="js_addMenuTips">{{ item0.name }}</span>
                                                        </li>
                                                    </draggableTwo>
                                                </ul>
                                            </div>
                                        </li>
                                    </draggable>
                                </ul> 
                            </div>                     
                        </div>                  
                    </div>
                </div>
                <div class="portable_editor to_left">
                    <div class="global_mod float_layout menu_form_hd js_second_title_bar">                              
                        <h4 class="global_info"> 菜单名称</h4>                              
                        <div class="global_extra">
                            <a @click="deleteNeun" v-if="meunTabBar.length !== 1 && meunTabBar.length !== 0" id="jsDelBt">删除菜单</a>
                        </div>                          
                    </div>
                    <!-- 拥有二级模块提示 -->
                    <div class="msg_sender_tips" v-if="tabNum !== 5 && tabNum !== 0">已添加子菜单，仅可设置菜单名称。</div>
                    <div class="msg_sender_tips" v-if="tabNum == 5">已为“{{ llyForm.name }}”添加了5个子菜单，无法设置其他内容。</div>
                    <div class="msg_main">
                        <el-form ref="llyForm" :rules="rules" :model="llyForm" label-width="80px">
                            <el-form-item label="菜单名称" prop="name">
                                <el-input v-model.trim="llyForm.name" maxlength="18" class="activeinput" @keyup.enter.native="editName('llyForm')"></el-input>
                            </el-form-item>
                            <p class="etips">仅支持中英文和数字，
                                <span v-if="selMeun || selMeun == '0'">字数不超过4个汉字或8个字母</span>
                                <span v-else>字数不超过8个汉字或16个字母</span>
                            </p>
                            <el-form-item label="菜单内容" v-if="tabSwitch || llyForm.name == '菜单名称'">
                                <el-radio-group v-model="llyForm.type">
                                    <el-radio v-for="(item, index) in menuSelect" :key="index" :label="item.id">{{item.text}}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <div class="menu_content" v-if="(llyForm.type == 2 && tabSwitch) || llyForm.name == '菜单名称'">
                                <div class="link">订阅者点击该子菜单会跳到以下链接</div>
                                <el-form-item label="页面地址" prop="url">
                                    <el-input v-model.trim="llyForm.url" @keyup.enter.native="editUrl('llyForm')" class="activeinput"></el-input>
                                </el-form-item>
                            </div>
                            <!-- <div class="menu_content" v-if="llyForm.type == 3">
                                <div class="link">订阅者点击该子菜单会跳到以下小程序</div>
                                <el-form-item label="小程序">
                                    <el-button v-if="!llyForm.chengxu">选择小程序</el-button>
                                    <el-input v-else v-model="llyForm.name" class="activeinput"></el-input>
                                    <p v-if="llyForm.chengxu" class="threeSure">已选择小程序 - xxx</p>
                                </el-form-item>
                                <el-form-item label="备用地址">
                                    <el-input v-model="llyForm.name" class="activeinput"></el-input>
                                    <p class="threeSure">
                                        旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。
                                    </p>
                                </el-form-item>
                            </div> -->
                        </el-form>
                    </div>
                </div>
            </div>
            <div style="clear: both"></div>
            <div class="tool_bar tc js_editBox">
                <div class="tool_left">
                    <el-button :disabled="meunTabBar.length < 1" @click="sortMeun(sort)">{{sort == 0 ? '菜单排序' : '完成'}}</el-button>
                </div>
                
                <div class="tool_middle">
                    <el-button type="primary" size="medium">保存</el-button>
                </div>
                <div class="tool_right">
                    <el-button size="medium">发布</el-button>
                </div>
            </div>
        </div>
    </div>
    <DelTips v-if="delVisible" :delVisible="delVisible" @sureTips="sureTips" :delCount="delCount" @closeTips="closeTips"/>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
import draggableTwo from 'vuedraggable';
import DelTips from './public/delTips.vue'
export default {
  name: 'index',
  data() {
    var namePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入菜单名称"));
      } else {
        let meunLeg = this.getBytesLength(value);
        if(this.selMeun || this.selMeun == '0') {
            if(meunLeg <= 8) {
                callback(); 
            }else {
                callback(new Error("字数超过上限"));
            }
        } else {
            if(meunLeg <= 16) {
                callback(); 
            }else {
                callback(new Error("字数超过上限"));
            }
        }
      }
    };
    var urlPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入菜单路径"));
      } else {
        const reg = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;
        if(reg.test(value)) {
            callback();
        } else {
            callback(new Error("请输入正确的URL"));
        }
         
      }
    };
    return {
        newMedropList: [],
        sort: 0,
        delCount: 0,
        delVisible: false,
        meunLeg: '',
        tabNum: 0,
        tabSwitch: true,
        selMeun: 0,
        disShow: 0,
        twoMeun: '',
        llyForm: {
            name: '',
            type: 2,
            url: ''
            // chengxu: ''
        },
        menuSelect: [
            // {id: 1,text:'发送消息'},
            {id: 2,text:'跳转网页'},
            // {id: 3,text:'跳转小程序'},
        ],
        editorTabbar: [],
        meunTabBar: [],
        // meunList:[],
        meunList: "[{\"name\":\"推广赚钱\",\"type\":\"view\",\"url\":\"http://www.lanjingji.com/v6/home\"},{\"name\":\"做单工具\",\"sub_button\":[{\"name\":\"查利息\",\"type\":\"view\",\"url\":\"https://www.lanjingji.com/activityWeb/unitools/pages/counter/index\"},{\"name\":\"发票分析\",\"type\":\"view\",\"url\":\"http://www.kakacaifu.com/v6/breezeQuery\"},{\"name\":\"采集链接\",\"type\":\"view\",\"url\":\"http://www.kakacaifu.com/v6/collectLink\"}]},{\"name\":\"服务中心\",\"sub_button\":[{\"name\":\"个人中心\",\"type\":\"view\",\"url\":\"http://www.lanjingji.com/v6/workbench\"},{\"name\":\"进群交流\",\"type\":\"view\",\"url\":\"https://docs.qq.com/doc/DRnp4dnpsYWZzTUxD\"},{\"name\":\"商务合作\",\"type\":\"view\",\"url\":\"https://mp.weixin.qq.com/s?__biz=MzUxNDY4MDkwNg==&mid=2247501732&idx=1&sn=53b59384eda8bb4e572348841ae8dad7&chksm=f940b681ce373f979fa9513148b1f68dc4be05886018de95ef8ca67fa58209d3781d09da5e1d#rd\"},{\"name\":\"证书报考\",\"type\":\"view\",\"url\":\"https://www.lanjingji.com/v6/lesson?courseId=115&shareId=255070&source=2\"},{\"pagepath\":\"pages/index/index\",\"appid\":\"wxf650f1ecf9e99a1e\",\"name\":\"鲸圈小店\",\"type\":\"miniprogram\",\"url\":\"https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/whaleBroker/whale_shop.jpg\"}]}]",
        // meunList: "[{\"name\":\"做单工具\",\"sub_button\":[{\"name\":\"查利息\",\"type\":\"view\",\"url\":\"https://www.lanjingji.com/activityWeb/unitools/pages/counter/index\"},{\"name\":\"发票分析\",\"type\":\"view\",\"url\":\"http://www.kakacaifu.com/v6/breezeQuery\"},{\"name\":\"采集链接\",\"type\":\"view\",\"url\":\"http://www.kakacaifu.com/v6/collectLink\"}]},{\"name\":\"服务中心\",\"sub_button\":[{\"name\":\"个人中心\",\"type\":\"view\",\"url\":\"http://www.lanjingji.com/v6/workbench\"},{\"name\":\"进群交流\",\"type\":\"view\",\"url\":\"https://docs.qq.com/doc/DRnp4dnpsYWZzTUxD\"},{\"name\":\"商务合作\",\"type\":\"view\",\"url\":\"https://mp.weixin.qq.com/s?__biz=MzUxNDY4MDkwNg==&mid=2247501732&idx=1&sn=53b59384eda8bb4e572348841ae8dad7&chksm=f940b681ce373f979fa9513148b1f68dc4be05886018de95ef8ca67fa58209d3781d09da5e1d#rd\"},{\"name\":\"证书报考\",\"type\":\"view\",\"url\":\"https://www.lanjingji.com/v6/lesson?courseId=115&shareId=255070&source=2\"},{\"pagepath\":\"pages/index/index\",\"appid\":\"wxf650f1ecf9e99a1e\",\"name\":\"鲸圈小店\",\"type\":\"miniprogram\",\"url\":\"https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/whaleBroker/whale_shop.jpg\"}]}]",
        // meunList: "[{\"name\":\"做单工具\",\"sub_button\":[{\"name\":\"查利息\",\"type\":\"view\",\"url\":\"https://www.lanjingji.com/activityWeb/unitools/pages/counter/index\"},{\"name\":\"发票分析\",\"type\":\"view\",\"url\":\"http://www.kakacaifu.com/v6/breezeQuery\"},{\"name\":\"采集链接\",\"type\":\"view\",\"url\":\"http://www.kakacaifu.com/v6/collectLink\"}]},{\"name\":\"服务中心\",\"sub_button\":[{\"name\":\"个人中心\",\"type\":\"view\",\"url\":\"http://www.lanjingji.com/v6/workbench\"},{\"name\":\"进群交流\",\"type\":\"view\",\"url\":\"https://docs.qq.com/doc/DRnp4dnpsYWZzTUxD\"},{\"name\":\"商务合作\",\"type\":\"view\",\"url\":\"https://mp.weixin.qq.com/s?__biz=MzUxNDY4MDkwNg==&mid=2247501732&idx=1&sn=53b59384eda8bb4e572348841ae8dad7&chksm=f940b681ce373f979fa9513148b1f68dc4be05886018de95ef8ca67fa58209d3781d09da5e1d#rd\"},{\"name\":\"证书报考\",\"type\":\"view\",\"url\":\"https://www.lanjingji.com/v6/lesson?courseId=115&shareId=255070&source=2\"},{\"pagepath\":\"pages/index/index\",\"appid\":\"wxf650f1ecf9e99a1e\"}]}]",
        // meunList: "[{\"name\":\"推广赚钱\",\"type\":\"view\",\"url\":\"http://www.lanjingji.com/v6/home\"}]",//单个父菜单
        rules: {
            name: [{ required: true, validator: namePass, trigger: "blur" }],
            url: [{ required: true, validator: urlPass, trigger: "blur" }],
        },
    }
  },
  components: { DelTips, draggable, draggableTwo },
  mounted() {
    this.conversion();
  },
  methods:{
    // newMedropList
    //一级菜单
    datadragEnd(item) {
        console.log('item', item)
    },
    setData() {

    },
    //二级菜单
    datadragEnd1(item) {
        console.log('item', item);
    },
    setData1() {

    },
    //菜单排序
    sortMeun(num) {
        if(num == 0) {
            this.sort = 1;
            let newMeunTabBar = [];
            if(this.meunTabBar.length > 0) {
                this.meunTabBar.forEach((item, index) => {
                    newMeunTabBar.push({"name": item.name,"type": item.type,"url":item.url, sub_button: []})
                    if((item.sub_button).length > 1) {
                        for (const newItem of item.sub_button) {
                            if(newItem.name) {
                                newMeunTabBar[index].sub_button.push({"name": newItem.name,"type": newItem.type,"url":newItem.url})
                            }
                        }
                    }
                });
            }
            this.meunTabBar = [];
            this.meunTabBar = newMeunTabBar;
        } else {
            this.sort = 0;
        }
    },
    getBytesLength(str) {  
        return str.replace(/[^\x00-\xff]/g, 'xx').length;  
    },
    //修改信息
    editName(formName) {
        this.$refs[formName].validate((valid) => {
            if(valid) {
                if(this.twoMeun || this.twoMeun == '0') {
                    if((this.meunTabBar[this.disShow].sub_button[this.twoMeun]).name) {
                        (this.meunTabBar[this.disShow].sub_button[this.twoMeun]).name = this.llyForm.name;
                    }else {
                        this.$message.info('菜单名称编辑失败，请刷新页面重试');
                    }
                } else {
                    if(this.selMeun || this.selMeun == '0') {
                        this.meunTabBar[this.selMeun].name = this.llyForm.name;
                    } else {
                        this.$message.info('菜单名称编辑失败，请刷新页面重试');
                    }
                }
            }
        })
    },
    //url编辑
    editUrl(formName) {
        this.$refs[formName].validate((valid) => {
          if(valid) {
            if(this.twoMeun || this.twoMeun == '0') {
                if((this.meunTabBar[this.disShow].sub_button[this.twoMeun]).url) {
                    (this.meunTabBar[this.disShow].sub_button[this.twoMeun]).url = this.llyForm.url;
                }else {
                    this.$message.info('菜单路径编辑失败，请刷新页面重试');
                }
            } else {
                if(this.selMeun || this.selMeun == '0') {
                    this.meunTabBar[this.selMeun].url = this.llyForm.url;
                } else {
                    this.$message.info('菜单路径编辑失败，请刷新页面重试');
                }
            }
          }
        })
    },
    //删除菜单
    deleteNeun() {
        // this.$message.success('成功删除菜单“菜单名称”')
        this.delVisible = true;
        this.delCount = 2;
    },
    //删除父级菜单url
    sureTips(index) {
        if( index == 1) {
            this.$set(this.meunTabBar[this.disShow], 'url', '');
            this.$set(this.meunTabBar[this.disShow], 'sub_button', [{"name":"","type":"view","url":""},{"name":"子菜单名称","type":"view","url":""}])
            this.delVisible = false;
        } else if(index == 2) {
            if(this.twoMeun || this.twoMeun == '0') {
                if(this.twoMeun != 0){
                    this.meunTabBar[this.disShow].sub_button = this.meunTabBar[this.disShow].sub_button.filter((item, index)=>{
                        return index !== this.twoMeun;
                    });
                }else {
                    this.meunTabBar[this.disShow].sub_button.shift();
                }
                
            } else {
                if(this.disShow !== 1) {
                    this.meunTabBar = this.meunTabBar.filter((item, index)=>{
                        return index !== this.disShow;
                    });
                }else {
                    this.meunTabBar.shift();
                }
            } 
            this.delVisible = false;
        }
    },


    //获取菜单信息
    conversion() {
        this.$nextTick(()=>{
            this.meunTabBar = eval(this.meunList);
            this.meunLeg = this.meunTabBar.length;
            let maxLeg = this.meunTabBar.length;
            if(this.meunTabBar) {
                let tabBar = this.meunTabBar[0];
                let sub_button = [{"name":"","type":"view","url":""}];
                let empTwoTab = {"name":"","type":"view","url":""};
                if(tabBar) {
                    let twoTabBar = tabBar.sub_button;
                    if(twoTabBar) {
                        this.llyForm.name = twoTabBar[0].name;
                        this.tabSwitch = false;
                        if(twoTabBar.length < 5) {
                            this.meunTabBar[0].sub_button.push(empTwoTab);
                        }
                    } else {
                        this.llyForm.name = tabBar.name;
                        this.llyForm.url = tabBar.url;
                        this.$set(this.meunTabBar[0], 'sub_button', sub_button);
                    }
                }

            }
            if(maxLeg == 0 || maxLeg < 3) {
                this.meunTabBar.push({"name":"","type":"view","url":""});
            }
            console.log('meunTabBar', this.meunTabBar)
        })
    },
    //tab切换
    plusMeun(index, item) {
        this.twoMeun = '';
        this.disShow = index;
        this.selMeun = index;

        let empTwoTab = {"name":"","type":"view","url":""};
        if(item.name) {
            //定义右侧名称或url
            if(item.url) {
                this.llyForm.name = item.name;
                this.llyForm.url = item.url;
                this.tabSwitch = true;
            }else {
                this.llyForm.name = item.name;
                this.llyForm.url = item.url; 
                this.tabSwitch = false;
            }
            // tabNum
            if(item.sub_button) {
                this.tabNum = (item.sub_button).length;
                if((item.sub_button).length < 5) {
                    let int = 0;
                    for (const itemSow of this.meunTabBar[this.disShow].sub_button) {
                        if(!(itemSow.name)) {
                            int ++;
                        }
                    }
                    if(int == 0) {
                        if(this.sort == 0) {
                            (this.meunTabBar[this.disShow].sub_button).push(empTwoTab)
                        }
                    }
                }
            } else {
                this.tabNum = 0;
            }
        }else {
            let emptyTab = {"name":"菜单名称","type":"view","url":"", 'sub_button':[{"name":"","type":"view","url":""}]};
  
            let tabbarList = [];
            if(this.meunTabBar.length == 0 || this.meunTabBar.length == 1 || this.meunTabBar.length == 2) {
                for (const iterbar of this.meunTabBar) {
                    tabbarList.push(iterbar)
                }
                if(this.sort == 0) {
                    tabbarList.push(emptyTab);
                }
            } else {
                for (const itembar of this.meunTabBar) {
                    if(itembar.name) {
                        tabbarList.push(itembar)
                    }
                }
                if(this.sort == 0) {
                    tabbarList.push(emptyTab);
                }
            }
            this.meunTabBar = tabbarList;
            console.log('meunTabBar', this.meunTabBar);
        }
        
    },
    //子菜单展示
    twoClick(item, index) {
        this.selMeun = '';
        this.twoMeun = index;
        let empTwoTab = {"name":"子菜单名称","type":"view","url":""};
        if(item.name) {
            if(!this.selMeun) {
                this.llyForm.name = (this.meunTabBar[this.disShow].sub_button[this.twoMeun]).name;
                this.llyForm.url = (this.meunTabBar[this.disShow].sub_button[this.twoMeun]).url;
                this.tabSwitch = true;
            }
        } else {
            if(this.meunTabBar[this.disShow].url) {
                this.delVisible = true;
                this.delCount = 1;
            } else {
                let selecTable = this.meunTabBar[this.disShow].sub_button;
                if(selecTable.length < 5){
                    selecTable.push(empTwoTab)
                } else {
                    let tabbarTwoList = [];
                    for (const itemble of selecTable) {
                        if(itemble.name) {
                            tabbarTwoList.push(itemble);
                        }
                    }
                    tabbarTwoList.push(empTwoTab)
                    this.$set(this.meunTabBar[this.disShow], 'sub_button', [])
                    this.meunTabBar[this.disShow].sub_button = tabbarTwoList;
                }
            }            
        }
    },
     //关闭温馨提示
    closeTips() {
        this.delVisible = false;
    },
  }
}
</script>
<style lang="scss" scoped>
.etips {
    font-size: 13px;
    color: #9a9a9a;
    margin-left: 20px;
}
.sub_pre_menu_box {
    bottom: 60px;
    // background-color: #fafafa;
    border-top-width: 0;
    position: absolute;
    width: 100%;
    // border: 1px solid #d0d0d0;
    ul {
        width: 30%;
        padding-left: 0;
        list-style-type: none;
        li {
            width: 100%;
            border: 1px solid transparent;
            margin: 0 -1px -1px;
            line-height: 45px;
        }
        .pre_menu_link {
            border: 0.5px solid #07c160 !important;
            color: #07c160 !important;
        }
        .draggable-column-content {
            li {
                width: 100%;
                border: 1px solid transparent;
                margin: 0 -1px -1px;
                line-height: 45px;
            }
            .pre_menu_link {
                border: 0.5px solid #07c160 !important;
                color: #07c160 !important;
            }
        }
    }
}

.sub_pre_menu_box:nth-child(0){
}
.sub_pre_menu_box:nth-child(1){

}
.sub_pre_menu_box:nth-child(2){
    padding-right: 16px;
}
.tool_bar {
    margin-top: 10px;
    display: flex;
    // justify-content: space-between;
    .tool_left {
        float: left;
        margin-left: 5%;
    }
    .tool_middle {
        margin-left: 20%;
    }
    .tool_right {
        margin-left: 5%;
    }
}
.addmeun {
    display: block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    text-decoration: none;
    text-align: center;
}
.main-tool {
    .menu_preview_area {
        float: left;
        margin-right: 12px;
        position: relative;
        padding-bottom: 40px;
        .mobile_menu_preview {
            width: 294px;
            background-size: contain;
            position: relative;
            // width: 317px;
            height: 580px;
            background: transparent url('../../../assets/images/bg_mobile_head.png') no-repeat 0 0;
            background-position: 0 0;
            border: 1px solid #e7e7eb;
            .mobile_hd {
                color: #fff;
                text-align: center;
                padding-top: 35px;
                font-size: 15px;
                width: auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;
                margin: 0 30px;
            }
            .mobile_bd{
                
            }
        }
        .pre_menu_list {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid #e7e7eb;
            background: transparent url('../../../assets/images/bg_mobile_bottom.png') no-repeat 0 0;
            background-position: 0 0;
            background-repeat: no-repeat;
            padding-left: 43px;
            display: flex;
            justify-content: center;
            li {
                text-align: center;
                font-size: 12px;
                cursor: pointer;
                line-height: 50px;
                border:0.5px solid #c2c2c2;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;
                color: #616161;
            }
            .widtab1 {
                width: 33.3%;
            }
            .widtab2 {
                width: 50%;
            }
            .widtab3 {
                width: 100%;
            }
            .pre_menu_link {
                border: 0.5px solid #07c160 !important;
                color: #07c160 !important;
            }
            
        }
        .msorting {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid #e7e7eb;
            background: transparent url('../../../assets/images/bg_mobile_bottom.png') no-repeat 0 0;
            background-position: 0 0;
            background-repeat: no-repeat;
            padding-left: 43px;
            .draggable-column-content { 
                display: flex;
                justify-content: center;
                li {
                    text-align: center;
                    font-size: 12px;
                    cursor: pointer;
                    line-height: 50px;
                    border:0.5px solid #c2c2c2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-wrap: normal;
                    color: #616161;
                }
                .widtab1 {
                    width: 33.3%;
                }
                .widtab2 {
                    width: 50%;
                }
                .widtab3 {
                    width: 100%;
                }
                .pre_menu_link {
                    border: 0.5px solid #07c160 !important;
                    color: #07c160 !important;
                }
            }
        }
        .pre_menu_item {
            line-height: 50px;
            .addmeun {
                display: block;
                width: auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;
                text-decoration: none;
                text-align: center;
            }
        }
        .sort_btn_wrp {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -72px;
            text-align: center;
        }
    }
    .portable_editor {
        padding: 9px 20px 5px;
        margin-left: 12px;
        float: left;
        background-color: #f4f5f9;
        border: 1px solid #e7e7eb;
        min-width: 69%;
        position: relative;
        min-height: 580px;
        .global_mod {
            display: flex;
            justify-content: space-between;
        }
        .editor_inner {
            min-height: 560px;
            padding-bottom: 20px;
            padding: 0 20px 5px;
            background-color: #f4f5f9;
            border: 1px solid #e7e7eb;
            -webkit-border-radius: 0;
            -webkit-box-shadow: none;
            
        }
        .menu_form_hd {
            padding: 9px 0;
            border-bottom: 1px solid #e7e7eb;
            font-size: 14px;
            .global_info {
                font-weight: 400;
            }
            .global_extra {
                a{
                    text-decoration: none;
                    color: #576b95;
                } 
            }
        }
        .msg_sender_tips {
            display: block;
            color: #9a9a9a;
            margin-top: 10px;
            font-size: 14px;
        }
        .msg_main {
            padding-top: 30px;
            margin-bottom: 10px;
            .activeinput {
                width: 30%;
            }
            .menu_content {
                padding: 16px 20px;
                border: 1px solid #e7e7eb;
                background-color: #fff;
                margin-left: 20px;
                .link {
                    color: #9a9a9a;
                    margin-top: 10px;
                    font-size: 14px;
                    margin-left: 20px;
                    padding-bottom: 10px;
                }
                .surface {
                    color: #576b95;
                    span {
                        margin-right: 10px;
                        cursor: pointer;
                    }
                }
                .threeSure {
                    padding-top: 4px;
                    color: #9a9a9a;
                }
            }
        }
    }
    
} 
.menutable {
    margin: 24px 150px 24px 40px;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 2%);
    .office {
        .highlight_box {
            position: relative;
            padding: 9px 30px;
            background-color: #f4f5f9;
        }
        .icon_wrap {
            padding-top: 14px;
            padding-bottom: 14px;
            overflow: hidden;
            .icon {
                float: left;
                margin-right: 15px;
                font-size: 35px;
                color: #00aeef;
                transform: rotateX(180deg);
            }
            .icon_msg_small {
                margin-top: 5px;
            }
            .title {
                font-weight: 400;
                font-style: normal;
                font-size: 15px;
                margin-bottom: 10px;
            }
            .desc {
                color: #9a9a9a;
                font-size: 15px;
            }
        }
        .height-box {
            position: relative;
            padding: 9px 30px;
            background-color: #f4f5f9;
            line-height: 1.6;
        }
        .menu_setting_msg {
            margin-bottom: 40px;
        }
    }
}
.grid_line .no_extra.grid_item {
    float: none;
    width: auto;
    overflow: hidden;
}
.menu_preview_area .pre_menu_list.no_menu .pre_menu_item .pre_menu_link {
    border: 1px solid #07c160 !important;
    color: #07c160 !important;
}
</style>

主要使用了vue+element+vuedraggable(实现拖动),滑动编辑效果一致