{{# var lang001 = {"ch": "配置上传成功", "en": "Config Upload Successful"},     lang002 = {"ch": "在加载上传的配置前，需要确认网卡的对应关系", "en": "Verify Network Interface Mapping before loading config"},     lang003 = {"ch": "网卡对应关系如下", "en": "Network Interface Mapping is as follows"},     lang004 = {"ch": "配置文件中的数据网卡", "en": "Interface in Config File"},     lang005 = {"ch": "本地系统中的数据网卡", "en": "Interface in Local System"},     lang006 = {"ch": "可以左右拖动调整对应关系", "en": "Drag left/right to adjust mapping"};      var remote = layui.sort(d.import);     var locals = layui.sort(d.locals);     var diff = remote.length - locals.length;      if(diff < 0) diff = 0; }}  {{# if(g_sys_env.theme == "light") { }} <style> .paui-page-import-confirm .layui-card{background-color: #eeeeee;} .paui-page-import-confirm .pa-netif{font-size: 26px; color: #666666;} .paui-page-import-confirm .paui-netif-box{width: 40px; height: 63px; background-color:#e1e9ef} .paui-page-import-confirm .paui-netif-item{background-color:#eeeeee; padding-top: 10px; text-align: center;} .paui-page-import-confirm .paui-locals-netif .paui-netif-item{cursor: pointer;} .paui-page-import-confirm .paui-netif-box-hover *{color: orange!important;} </style> {{# } else { }} <style> .paui-page-import-confirm .layui-card{background-color: #405365;} .paui-page-import-confirm .pa-netif{font-size: 26px; color: #d2d2d2;} .paui-page-import-confirm .paui-netif-box{width: 40px; height: 63px; background-color:#273743} .paui-page-import-confirm .paui-netif-item{background-color:#405365; padding-top: 10px; text-align: center;} .paui-page-import-confirm .paui-locals-netif .paui-netif-item{cursor: pointer;} .paui-page-import-confirm .paui-netif-box-hover *{color: orange!important;} </style> {{# } }}  <div class="paui-page-import-confirm" style="padding: 10px 15px;">      <div>{{ lang001[g_lang] || "配置上传成功" }}！</div>     <div style="margin-top:10px">{{ lang002[g_lang] || "在加载上传的配置前，需要确认网卡的对应关系" }}；</div>     <div style="margin-top:10px">{{ lang003[g_lang] || "网卡对应关系如下" }}：</div>      <div class="layui-card" style="margin-top: 10px;">         <div class="layui-card-header">{{ lang004[g_lang] || "配置文件中的数据网卡" }}</div>         <div class="layui-card-body paui-import-netif"> {{# layui.each(remote, function(index, elem){ }}             <div class="layui-inline paui-netif-box">                 <div class="paui-netif-item">                     <i class="pa-icon pa-netif"></i>                     <div class="layui-row paui-netif-val">{{ elem }}</div>                 </div>             </div> {{# }); }}         </div>     </div>      <div class="layui-card" style="margin-top: 15px;">         <div class="layui-card-header">             <span>{{ lang005[g_lang] || "本地系统中的数据网卡" }}</span>             <div class="paui-card-tool paui-color-disable">                 {{ lang006[g_lang] || "可以左右拖动调整对应关系" }}             </div>         </div>         <div class="layui-card-body paui-locals-netif"> {{# layui.each(locals, function(index, elem){ }}             <div class="layui-inline paui-netif-box">                 <div class="paui-netif-item">                     <i class="pa-icon pa-netif"></i>                     <div class="layui-row paui-netif-val">{{ elem }}</div>                 </div>             </div> {{# }); }}  {{# for(var i = 0; i < diff; i++) { }}            <div class="layui-inline paui-netif-box">             </div>  {{# } }}         </div>     </div> </div>  <script> layui.use(function(){     var $ = layui.$,     form = layui.form;      layui.each($(".paui-locals-netif .paui-netif-box"), function(index, elem){         new Sortable(elem, {             sort: true,             group: 'shared',             onEnd: function(evt){                 if(evt.from === evt.to)                     return;                  var num = $(evt.to).children().length;                 if(num == 1) return;                                  var target = $(evt.to).children().eq(evt.newIndex == 1 ? 0 : 1);                  $(evt.from).html('<div class="paui-netif-item">' +  target.html() + '</div>');                 target.remove();             }         });     });      $(".paui-netif-box").mouseenter(function(){         var index = $(this).index();         $(".paui-import-netif .paui-netif-box").eq(index).addClass("paui-netif-box-hover");         $(".paui-locals-netif .paui-netif-box").eq(index).addClass("paui-netif-box-hover");     }).mouseleave(function(){         $(".paui-import-netif .paui-netif-box").removeClass("paui-netif-box-hover");         $(".paui-locals-netif .paui-netif-box").removeClass("paui-netif-box-hover");     });  }); </script>