person-select-vue

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body>  <div class="mask-box" style="display:none;">  <div class="Ms_mask bg-white">  <div class="Ms_mask_header"> <div class="t"> <strong>新建排期</strong> </div> <span class="close">×</span> </div>  <div class="Ms_form_list clearfix"> <ul> <li> <p class="t"><span>类型</span></p> <div class="Ms_ipt sel"> <input type="text" placeholder="" value="公开课" class=" form-control"> <div class="Ms_layer" style="display:none;"> <ul> <li><span>公开课</span></li> <li><span>六天六夜六天六夜六天六夜六天六夜六天六夜六天六夜</span></li> </ul> </div> </div> </li>    <div style="display:block;"> <li class="two"> <div class="Ms_ipt date mr-2"> <p class="t"><span>开始</span></p> <input type="text" placeholder="2020.01.15" class=" form-control"> </div> <div class="Ms_ipt date ml-2"> <p class="t"><span>结束</span></p> <input type="text" placeholder="2020.01.15" class=" form-control"> </div> </li> <li> <p class="t"><span>标题</span></p> <div class="Ms_ipt biaoti"> <input type="text" class=" form-control" placeholder="请输入标题"> </div> </li> <li> <p class="t"><span>导师</span></p> <div class="Ms_ipt sel"> <input type="text" class=" form-control" placeholder="请选择导师"> <div class="pq_layer" style="display:none;"> <div class="num"><span>A</span></div> <ul> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> </ul> <div class="num"><span>A</span></div> <ul> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> </ul> <div class="num"><span>A</span></div> <ul> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> </ul> </div> </div> </li> <li> <p class="t"><span>城市</span></p> <div class="Ms_ipt"> <input type="text" class=" form-control" placeholder="请输入城市名称"> <div class="Ms_layer" style="display:none;"> <span>请输入城市名称请输入城市名称请输入城市名称请输入城市名称</span> <span>请输入城市名称请输入城市名称请输入城市名称请输入城市名称</span> <span>请输入城市名称请输入城市名称请输入城市名称请输入城市名称</span> <span>请输入城市名称请输入城市名称请输入城市名称请输入城市名称</span> <span>请输入城市名称请输入城市名称请输入城市名称请输入城市名称</span> <span>请输入城市名称请输入城市名称请输入城市名称请输入城市名称</span> <span>请输入城市名称请输入城市名称请输入城市名称请输入城市名称</span> </div> </div> </li> </div>  <div style="display: none;"> <li class="two"> <div class="Ms_ipt date mr-2"> <p class="t"><span>开始</span></p> <input type="text" placeholder="2020.01.15" class=" form-control"> </div> <div class="Ms_ipt date ml-2"> <p class="t"><span>结束</span></p> <input type="text" placeholder="2020.01.15" class=" form-control"> </div> </li> <li class="two"> <div class="Ms_ipt sel mr-2"> <p class="t"><span>招生类型</span></p> <input type="text" placeholder="请选择招生类型" class=" form-control"> <div class="Ms_layer" style="display:none;"> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> </div> </div> <div class="Ms_ipt sel ml-2"> <p class="t"><span>期数</span></p> <input type="text" placeholder="请选择期数" class=" form-control"> <div class="Ms_layer" style="display:none;"> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> <span>请选择招生类型</span> </div> </div> </li> <li class="two"> <div class="Ms_ipt sel mr-2"> <p class="t"><span>导师领导</span></p> <input type="text" placeholder="请选择导师领导" class=" form-control"> <div class="Ms_layer" style="display:none;"> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> </div> </div> <div class="Ms_ipt sel ml-2"> <p class="t"><span>酒店</span></p> <input type="text" placeholder="请选择酒店" class=" form-control"> <div class="Ms_layer" style="display:none;"> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> </div> </div> </li> <li class="two"> <div class="Ms_ipt mr-2"> <p class="t"><span>城市</span></p> <input type="text" placeholder="请输入城市名称" class=" form-control"> </div> </li> </div>  <div style="display:block ;"> <li class="two"> <div class="Ms_ipt date"> <p class="t"><span>开始</span></p> <input type="text" placeholder="2020.01.15" class=" form-control"> </div> <div class="Ms_ipt date"> <p class="t"><span>结束</span></p> <input type="text" placeholder="2020.01.15" class=" form-control"> </div> </li> <li class="two"> <div class="Ms_ipt sel"> <p class="t"><span>班级名称</span></p> <input type="text" placeholder="请选择班级名称" class=" form-control"> <div class="Ms_layer" style="display:none;"> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> </div> </div> <div class="Ms_ipt sel"> <p class="t"><span>导师</span></p> <input type="text" placeholder="请选择导师" class=" form-control"> <div class="pq_layer" style="display:none;"> <div class="num"><span>A</span></div> <ul> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> </ul> <div class="num"><span>A</span></div> <ul> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> </ul> <div class="num"><span>A</span></div> <ul> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> <li><span>阿不</span></li> </ul> </div> </div> </li> <li> <p class="t"><span>标题</span></p> <div class="Ms_ipt biaoti"> <input type="text" class=" form-control" placeholder="请输入标题"> </div> </li> <li class="two"> <div class="Ms_ipt sel"> <p class="t"><span>酒店</span></p> <input type="text" placeholder="请选择酒店" class=" form-control"> <div class="Ms_layer" style="display:none;"> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> <span>请选择班级名称</span> </div> </div> <div class="Ms_ipt"> <p class="t"><span>城市</span></p> <input type="text" placeholder="请输入城市" class=" form-control"> </div> </li> <li class="two"> <div class="Ms_ipt sel"> <p class="t"><span>会务专员</span></p> <input type="text" placeholder="请选择会务专员" class=" form-control"> <div class="Ms_layer" style="display:none;"> <span>请选择会务专员</span> <span>请选择会务专员</span> <span>请选择会务专员</span> <span>请选择会务专员</span> <span>请选择会务专员</span> <span>请选择会务专员</span> <span>请选择会务专员</span> </div> </div> <div class="Ms_ipt sel"> <p class="t"><span>项目经理</span></p> <input type="text" placeholder="请选择项目经理" class=" form-control"> <div class="Ms_layer" style="display:none;"> <span>请选择项目经理</span> <span>请选择项目经理</span> <span>请选择项目经理</span> <span>请选择项目经理</span> <span>请选择项目经理</span> <span>请选择项目经理</span> <span>请选择项目经理</span> </div> </div> </li> </div> </ul> </div>  <div class="Ms_mask_btn text-right"> <button class="save btn mr-2"><span>保存</span></button> <button class="give btn mr-2"><span>放弃</span></button>   </div> </div> </div>  <div class="Ms_header"> <div class="logo"><a href="javascript:void(0);" class=""></a></div> <div class="title"><strong>学员信息管理</strong></div> <div class="user"> <a href="javascript:void(0);" class="on"> <img src="images/i_ico_user_s.png"> </a> </div> </div>  <div class="Ms_left">  <div class="nav clearfix"> <ul> <li class="active"> <span>日程</span> <div class="s_nav" style="display: ;"> <a href="#" class="pqgl active"><span>排期看板</span></a> <a href="#" class="xygl"><span>酒店信息管理</span></a> </div> </li> <li> <span class="">六天六夜</span> </li> <li> <span>俱乐部</span> </li> <li> <span>教务中心</span> </li> </ul> </div> </div>  <div class="Ms_kanban_hgroup">  <div class="sel">  <div class="sel_box"> <input type="text" placeholder="排期类型" class=" form-control"> <div class="pq_layer" style="display:none;"> <ul> <li> <label class="checkbox"> <input type="checkbox" checked> <i></i> <span>公开课</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>六天六夜六天六夜六天六夜六天六夜六天六夜六天六夜</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>俱乐部（彭浩组）</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>俱乐部（高林涛组）</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>俱乐部（叶晖组）</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>俱乐部（郑燕贤组)</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span> 俱乐部（董董组）</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>电商研究院</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>亿元俱乐部</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>企业大学</span> </label> </li> </ul> </div> </div>  <div class="sel_box"> <input type="text" placeholder="城市" class=" form-control"> </div>  <div class="sel_box"> <input type="text" placeholder="酒店" class=" form-control"> </div>  <div class="sel_box"> <input type="text" placeholder="导师" class=" form-control"> <div class="pq_layer" style="display:none;"> <div class="num"><span>A</span></div> <ul> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>阿不</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>阿贤</span> </label> </li> </ul> <div class="num"><span>B</span></div> <ul> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>阿不</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>阿贤</span> </label> </li> </ul> <div class="num"><span>C</span></div> <ul> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>阿不</span> </label> </li> <li> <label class="checkbox"> <input type="checkbox"> <i></i> <span>阿贤</span> </label> </li> </ul> </div> </div> </div>  <div class="date"> <i class="arr left"></i> <strong>2020年2月22日</strong> <i class="arr right"></i> <i class="ico_date ml-3"></i> </div>  <div class="btns"> <button class="btn mr-2">批量修改酒店</button> <button class="btn">新建排期</button> </div> </div>  <div class="Ms_right" style="left: 200px;">  <div class="Ms_table_box">  <div class="Ms_table_left"> <table class="table"> <tr> <th>排期</th> </tr> <tr> <td style="height: 84px;"> <div class="face"> <i>公</i><span>公开课</span> </div> </td> </tr> <tr> <td style="height: 126px;"> <div class="face"> <i>六</i><span>六天六夜</span> </div> </td> </tr> <tr> <td> <div class="face"> <img src="images/175new2.png"><span>彭浩组</span> </div> </td> </tr> <tr> <td> <div class="face"> <img src="images/175new2.png"><span>高林涛组</span> </div> </td> </tr> <tr> <td> <div class="face"> <img src="images/175new2.png"><span>董董组</span> </div> </td> </tr> <tr> <td> <div class="face"> <i>电</i><span>电商研究院</span> </div> </td> </tr> <tr> <td> <div class="face"> <i>亿</i><span>亿元俱乐部</span> </div> </td> </tr> <tr> <td> <div class="face"> <i>海</i><span>海外游学</span> </div> </td> </tr> <tr> <td> <div class="face"> <i>京</i><span>京东俱乐部</span> </div> </td> </tr> <tr> <td> <div class="face"> <i>亚</i><span>亚马逊俱乐部</span> </div> </td> </tr> <tr> <td> <div class="face"> <i>企</i><span>企业大学</span> </div> </td> </tr> </table> </div>   <div class="Ms_table_right"> <table class="table" style="width:2800px;"> <tr> <th><span>周二 2月27日</span></th> <th class="active"><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> <th><span>周二 2月27日</span><i></i></th> </tr> <tr> <td> </td> <td></td> <td> <div class="M_box grey"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td style="height: 84px;"> <div class="M_box white"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <span>叶辉</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> <div class="M_box white" style="width: 276px; top: 42px;"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td style="height: 126px;"> <div class="M_box purple"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> <div class="M_box purple" style="width: 276px; top: 42px;"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> <div class="M_box purple" style="width: 556px; top: 84px;"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td> <div class="M_box pink" style="width: 556px;"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <div class="M_box grey2" style="width: 417px;"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td> <div class="M_box pink2"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td> <div class="M_box green"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td> <div class="M_box blue"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <div class="M_box yello"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td> <div class="M_box yello2"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <div class="M_box grey2" style="width: 417px;"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td> <div class="M_box pink2"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td> <div class="M_box green"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td> <div class="M_box blue"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <div class="M_box yello"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td> <div class="M_box yello2"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td> <div class="M_box yello3"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <div class="M_box grey3"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td> <div class="M_box purple2"> <strong>合肥</strong> <span>高林涛</span> <span>叶辉</span> <a href="#" class="edit"></a> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div>  </div> </div> </body> </html>