新增版本前端界面

<!DOCTYPE html>
<html>

<head>
    <title>add</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <link rel="stylesheet" type="text/css" href="../css/icons.css">

    <link rel="stylesheet" type="text/css" href="../css/animate.css">
    <link rel="stylesheet" type="text/css" href="../css/htmleaf-demo.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
    <script rel="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>

    <script rel="text/javascript" src="../bootstrap/js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-multiselect.css" />
    <script type="text/javascript" src="../js/util.js"></script>
    <script type="text/javascript" src="../js/add.js"></script>
    <script type="text/javascript" src="../js/validate.js"></script>
    <script type="text/javascript" src="../js/jquery.multipurpose_tabcontent.js"></script>

<style>
.box{
    width:75%; margin-top:90%; margin-left:10px; float:left; margin:auto; padding:28px;
    height:250px; border:1px #111 solid;
    display:none;            /* 默认对话框隐藏 */
}
.box.show{display:block;} 
.box input{width:80%; height:80%; font-size:18px; margin-top:18px;}

</style>

<script> 
        var flag=0;
        
        function  collect(){
           document.getElementById("input1").value="";
        }
        function msgbox(n){
            document.getElementById('inputbox').style.display=n?'block':'none';     /* 点击按钮打开/关闭 对话框 */
        }


       function copy(){
          var str="";
          var str1=document.getElementById("input1").value;
          var str2=str1.split("\n");
         switch(flag)
         {
            case 1:if(str1=="") {alert("不能为空");break;}
                   else
                 for(var i = 0;i < str2.length;i++){
             
                     str+="[+]"+str2[i]+"\r";
                 } 
                 break;
            case 2:if(str1=="") {alert("不能为空");break;}
                   else
            
                for(var i = 0;i < str2.length;i++){
             
                     str+="[-]"+str2[i]+"\r";
                 } 
                break;
            case 3:
               if(str1=="") {alert("不能为空");break;}
                   else
                
                for(var i = 0;i < str2.length;i++){
             
                 str+="[^]"+str2[i]+"\r";
                 } 
                break;
            case 4:
                 if(str1=="") {alert("不能为空");break;}
                   else
            
                for(var i = 0;i < str2.length;i++){
             
                 str+="[#]"+str2[i]+"\r";
                 }
                break;
             default : break; 
         }
          
       document.getElementById("feature").value+=str;  
    }
//防止重复点击
    btn.onclick = function add(){
    btn.innerHTML = Number(btn.innerHTML) + 1;    
    btn.onclick = null;
    clearTimeout(timer);
    var timer = setTimeout(function(){
        btn.onclick = add;
        },1000);    
}

</script>
</head> 

<body>
<div>
        <div style="margin-top:5px;float:left; width:100%;">
        
            <div class="htmleaf-container">

                <div class="wrapper" style="margin-left:10px;margin-top:10px;">

                    <div class="tab_wrapper first_tab">

                        <div class="content_wrapper" style="border: 1px solid #49a4d9">
                            <p style="color: #0099FF;" id="addProductName"></p>
                            <div class="tab_content active">    
                                <div>
                                    <div  style="color:#49a4d9;" class="sure">[+]增加&nbsp;[-]删除&nbsp;[^]升级&nbsp;[#]修复</div>
                                    
                                    <div class="sure" >
                                     <button href="#" onClick="msgbox(1);flag=1;"><img src="../images/new.png"  class="menu_slider skip_click" ></button>&nbsp;&nbsp;&nbsp;
                                     <button href="#" onClick="msgbox(1);flag=2;"><img src="../images/shan.png"  class="menu_slider skip_click" ></button>&nbsp;&nbsp;&nbsp;
                                     <button href="#" onClick="msgbox(1);flag=3;"><img src="../images/up.png"  class="menu_slider skip_click" ></button>&nbsp;&nbsp;&nbsp;
                                     <button href="#" onClick="msgbox(1);flag=4;"><img src="../images/fix.png"  class="menu_slider skip_click" ></button>
                                    </div>
                                
                                    <div class="box1" style="color:#49a4d9;"><img style="vertical-align:middle" class="img1" src="..\images\unfold.png">&nbsp;&nbsp;上线特性</div>

                                    <div class="hidde1">
                                        <div class="alignRight">
                                            <span style="color:red;text-align:left;float: left;">*</span>
                                            <textarea id="feature"></textarea>
                                            <p style="color:red;display:none;font-size: 14px;float: right;margin-right:86px">上线特性不能为空</p>
                                        </div>
                                    </div>
                                </div>
                            
                                
            

                                <div style="clear:both;">
                                    <div class="box2" style="color:#49a4d9;"><img style="vertical-align:middle" class="img2" src="..\images\unfold.png">&nbsp;&nbsp;上线计划</div>

                                    <div class="hidde2">
                                        <div class="alignRight">
                                            <table class="table2">
                                                <tr>
                                                    <td>部署版本:<span style="color:red;">*</span></td>
                                                    <td><input id="version" type="text"><span>格式:xx.xx.xx</span></td>
                                                </tr>
                                                <tr>
                                                    <td>部署时间:<span style="color:red;">*</span></td>
                                                    <td><input id="deployTime" type="date"><span>请选择合理的部署时间</span></td>
                                                </tr>

                                            </table>
                                        </div>

                                        <div class="alignRight">
                                            <table class="table3">
                                                <tr>
                                                    <td>部署局点:<span style="color:red;">*</span></td>
                                                    <td><select id="deployArea" multiple="multiple" style="width:125px;">
                                                        <option value="CHN">CHN</option>
                                                        <option value="POL">POL</option>
                                                        <option value="TUR">TUR</option>
                                                        <option value="EGY">EGY</option>
                                                        <option value="NGA">NGA</option>
                                                        <option value="THA">THA</option>
                                                        <option value="RUS">RUS</option>
                                                        <option value="BHR">BHR</option>
                                                        <option value="MEX">MEX</option>
                                                        <option value="BRA">BRA</option>
                                                        <option value="DEU">DEU</option>
                                                        <option value="ZAF">ZAF</option>
                                                        <option value="SGP">SGP</option>
                                                        </select>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>部署方式:<span style="color:red;">*</span></td>
                                                    <td><select id="deployWay">
                                                        <option value=""></option>
                                                        <option value="不停机部署">不停机部署</option>
                                                        <option value="停机部署">停机部署</option>
                                                        </select></td>
                                                </tr>

                                            </table>
                                        </div>

                                    </div>
                                </div>

                                <div style="clear:both;">
                                    <div class="box3" style="color:#49a4d9;"><img class="img3" style="vertical-align:middle" src="..\images\unfold.png">&nbsp;&nbsp;关键责任人</div>
                                    <div class="hidde1" style="margin-left:0px;">
                                        <div class="alignRight">
                                            <table class="table2">
                                                <tr>
                                                    <td> &nbsp;&nbsp;产品经理 :<span style="color:red;">*</span></td>
                                                    <td style="width: 385px;"><input id="SE" type="text"><span>产品SE不能为空</span></td>
                                                </tr>
                                            </table>
                                        </div>

                                        <div class="alignRight">
                                            <table class="table2">
                                                <tr>
                                                    <td> 产品BA&nbsp;:<span style="color:red;">*</span></td>
                                                    <td><input id="BA" type="text"><span>产品BA不能为空</span></td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="sure">
                        <input type="button" name="save" id="sure" value="确  定" onclick="saveProductInfo()" />&nbsp;&nbsp;&nbsp;
                        <input type="button" name="save" id="cancel" value="取 消" onclick="window.close()" />
                    </div>
                </div>
            </div>
        </div>
    </div>

        <div style="clear:both;">
              <div id="inputbox" class="box">
                   <textarea id="input1"  rows="6" cols="35" ></textarea>
                 <div class="sure">
                    <input type="button" id="btn"   value="确定"  onClick="copy()">&nbsp;&nbsp;&nbsp;
                    <input type="button" value="关闭"  class="x" href=""  onclick="collect();msgbox(0); return false;">
                  </div>
            </div>
        </div>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_37139060/article/details/82261152