website/application/admin/view/jdgw/nav/index.html

<script src="__CDN__/assets/addons/jdgw/js/vue.js"></script>

<style>
img{display:block;}
.btn-open{width: 11px;height: 11px;margin-top:18px;margin-right: 10px;cursor:pointer;}
.nopot{width: 11px;height: 11px;margin-top:18px;;margin-right: 10px;cursor: auto;}
.df{display:flex;}
.top .nav-title{font-weight:bold;color: #fff;font-size: 16px;}
.navview{border: 1px solid #ddd;background-color:#fff;width: 800px;border-bottom:none;}
.navview .top{height:50px;line-height:50px;padding:0 10px;display:flex;flex-wrap:wrap;justify-content:space-between;background-color: #FFFFFF;background-image: linear-gradient(180deg, #374850 0%, #222D32 50%, #181F23 100%);}
.nav-item{height:50px;line-height:50px;padding:0 10px;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap;justify-content:space-between; background-color: #fff;}
.nav-item .num{margin-left: 2px;}
.sonview{display:none;}
.navview .son{background-color:#F1F4F6;border-bottom:1px solid #ddd;}
.nav-weigh{width: 50px;height: 25px;text-align:center;background-color:#D8FBF4;color: #18bc9c;border-radius:12.5px;border: none;font-size: 12px;}
[v-cloak] {
   display: none;
}
.lab-type{color: #fff;padding: 3px 5px;font-size: 12px;border-radius:5px;}

.nav-url, .nav-url:hover, .nav-url:active, .nav-url:focus {
    outline: none;
    text-decoration: none;
    color: #333;
}
</style>

<div class="panel panel-default panel-intro" style="width:800px;">
    <div class="panel-body" style="padding:0;">
        <div class="navview" id="app" v-cloak>
            <div class="top">
                <div class="nav-title">网站导航管理</div>
                <div>
                    <a href="{:url('jdgw/nav/add')}" class="btn btn-success btn-view btn-dialog btn-diyadd" title="{:__('Add')}" ><i class="fa fa-plus"></i> 增加导航</a>
                </div>
            </div>
            <div class="nav-item">
                <div class="df">
                    <div class="nopot"></div>
                    <div>
                        <a href="{:addon_url('jdgw/index/index')}" target="_blank" class="nav-url">首页</a>
                    </div>
                </div>
                <div>
                </div>
            </div>

            <div v-for="(v,index) in nav">
                <div class="nav-item">
                    <div class="df">
                        <img class="btn-open" @click="open(index)" :src="v.open ? closeIco : openIco" v-if="v.childlist.length > 0">
                        <div class="nopot" v-else></div>
                        <div>
                            <a :href="v.addon_url" target="_blank" class="nav-url">{{v.title}}</a>
                            <span class="num">[id:{{v.id}}]</span>
                            <span v-if="v.typedata=='article'" class="lab-type" style="background-color:#0073B7;">文章</span>
                            <span v-else-if="v.typedata=='images'" class="lab-type" style="background-color:#605CA8;">图文</span> 
                            <span v-else-if="v.typedata=='page'" class="lab-type" style="background-color:#E74C3C;">单页</span> 
                        </div>
                    </div>
                    <div>
                        <input class="nav-weigh" type="text" :value="v.weigh" @change="editSort(v.id, $event)"  >
                        <a :href="'{:url('jdgw/nav/edit')}/ids/'+ v.id" class="btn btn-xs btn-success btn-dialog btn-diyedit" title="编辑"><i class="fa fa-pencil"></i></a>
                        <a href="javascript:;"  class="btn btn-xs btn-danger" @click="del(v.id)"><i class="fa fa-trash"></i></a>
                    </div>
                </div>
                
                <div v-if="v.childlist.length > 0" :class="v.open ? '' : 'sonview'">
                    <div class="nav-item son" v-for="vv in v.childlist">
                        <div class="df" style="margin-left:36px;">
                            <div>-----&ensp;</div>
                            <div>
                                <a :href="vv.addon_url" target="_blank" class="nav-url">{{vv.title}}</a>
                                <span class="num">[id:{{vv.id}}]</span>
                                <span v-if="vv.typedata=='article'" class="lab-type" style="background-color:#0073B7;">文章</span>
                                <span v-else-if="vv.typedata=='images'" class="lab-type" style="background-color:#605CA8;">图文</span> 
                                <span v-else-if="vv.typedata=='page'" class="lab-type" style="background-color:#E74C3C;">单页</span> 
                            </div>
                        </div>
                        <div>
                            <input class="nav-weigh" type="text" :value="vv.weigh" @change="editSort(vv.id, $event)"  >
                            <a :href="'{:url('jdgw/nav/edit')}/ids/'+ vv.id" class="btn btn-xs btn-success btn-dialog btn-diyedit" title="编辑"><i class="fa fa-pencil"></i></a>
                            <a href="javascript:;"  class="btn btn-xs btn-danger" @click="del(vv.id)"><i class="fa fa-trash"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

    </div>
</div>