增加通行帐号登录

css/global.css

@@ -289,14 +289,6 @@ body{
   display:inline-block;
   padding:3px 8px;
 }
-/*.badge-small{
-  font-size: 5px !important;
-  width:12px;
-  height:12px;
-  padding:0 !important;
-  font-weight: 300;
-  border-radius: 0.5rem;
-}*/
 .software-left-bottomV1,.software-left-bottomV2{
   z-index: 999;
   position:absolute;
@@ -543,4 +535,23 @@ body{
 .modal-body{
   height:356px;
   overflow-y:auto;
+}
+.head-img{
+  margin-top: -5px;
+  width:26px;
+  height:26px;
+  border-radius: 13px;
+}
+.downloading .dropdown-item{
+  color:#007bff;
+}
+.modal-online .media{
+  background:#fbf6f3;
+  margin:0 0 15px 0;
+  padding:15px;
+  border: 2px solid #fbf6f3;
+  border-radius: 3px;
+}
+.modal-online .media:hover{
+  border:2px solid rgba(255,101,5,0.2);
 }

software-index.html

@@ -77,13 +77,13 @@
                 </div>
               </div>
               <div class="">
-                <div class="dropdown mr-5">
+                <div class="dropdown">
                   <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <i class="fab fa-usb"></i>
                   </div>
                   <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
                     <div class="downloading">
-                      <div class="border-bottom"><span class="float-right"><b>1年</b></span><h5>SC-0001</h5></div>
+                      <div class="border-bottom"><span class="float-right"><b>期限：2019-06-26</b></span><h5>SC-0001</h5></div>
                       <div class="detail-content">
                         <ul>
                           <li><div class="float-right"><button type="button" class="btn btn-success btn-sm"><i class="fas fa-play mr-2"></i>启动</button></div>纵横公路工程造价管理系统<span class="text-orange">专业版</span></li>
@@ -95,6 +95,70 @@
                 </div>
               </div>
               <div class="">
+                <div class="dropdown ml-2 mr-5">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <img class="head-img" src="images/headimg.png"> 登陆
+                  </div>
+                  <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton" style="width:260px;">
+                    <div class="downloading">
+                      <form>
+                        <div class="form-group">
+                          <label for="tel">邮箱 / 手机</label>
+                          <input type="tel" class="form-control" id="tel" aria-describedby="emailHelp" placeholder="">
+                        </div>
+                        <div class="form-group">
+                          <label for="password">密码</label>
+                          <input type="password" class="form-control" id="password" aria-describedby="emailHelp" placeholder="">
+                        </div>
+                        <button type="submit" class="btn btn-blue btn-sm mr-4 btn-block">登录</button>
+                        <div class="row mt-2">
+                          <div class="col text-right"><a href="" class="">忘记密码</a></div>
+                          <div class="col text-left"><a href="" class="">注册通行帐号</a></div>
+                        </div>
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- 开通免费网络版 -->
+              <!-- <div class="">
+                <div class="dropdown ml-2 mr-5">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Hi <img class="head-img" src="images/headimg2.png">
+                  </div>
+                  <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton" style="width:260px;">
+                    <div class="downloading">
+                      <div class="">
+                        <button type="button" class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#onlinewrap">免费开通纵横网络版</button>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="#">通行账号</a>
+                        <a class="dropdown-item" href="#">帮助中心</a>
+                        <a class="dropdown-item" href="#">退出</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div> -->
+              <!-- 已开通免费网络版 -->
+              <!-- <div class="">
+                <div class="dropdown ml-2 mr-5">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Hi <img class="head-img" src="images/headimg2.png">
+                  </div>
+                  <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton" style="width:260px;">
+                    <div class="downloading">
+                      <div class="">
+                        <a href="#" class="dropdown-item" data-toggle="modal" data-target="#online-two">已开通纵横网络版</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="#">通行账号</a>
+                        <a class="dropdown-item" href="#">帮助中心</a>
+                        <a class="dropdown-item" href="#">退出</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div> -->
+              <div class="">
                 <div class="mt-1 mr-3"><a href="#" class="colorblack"><i class="fas fa-minus"></i></a></div>
               </div>
               <div class="">
@@ -183,6 +247,18 @@
               <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                 <div class="software-tab-pane autoHeightL3">
                   <div class="details">
+                    <div class="float-right"><button type="button" class="btn btn-white btn-sm" data-toggle="modal" data-target="#loginwrap"><i class="fas fa-play mr-2"></i>启动</button></div>
+                    <div class="details-title"><a href="#" title="E:\Program Files (x86)\纵横软件\免费网络版">免费网络版</a></div>
+                    <div class="w-25 d-inline-block">9.1.0.512</div>
+                    <div class="inline-block">SmartCost 2008网络版</div>
+                  </div>
+                  <div class="details">
+                    <div class="float-right"><button type="button" class="btn btn-white btn-sm" data-toggle="modal" data-target="#onlinelist"><i class="fas fa-play mr-2"></i>启动</button></div>
+                    <div class="details-title"><a href="#" title="E:\Program Files (x86)\纵横软件\免费网络版">免费网络版</a></div>
+                    <div class="w-25 d-inline-block">9.1.0.512</div>
+                    <div class="inline-block">SmartCost 2008网络版</div>
+                  </div>
+                  <div class="details">
                     <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-play mr-2"></i>启动</button><!-- <button type="button" class="btn btn-success btn-sm ml-2" data-toggle="modal" data-target="#Modal">新版本</button> --></div>
                     <div class="details-title"><a href="#" title="E:\Program Files (x86)\纵横软件\纵横结算决算计量一体化软件(广东云版)">纵横公路工程结算决算计量一体化(云版)</a></div>
                     <div class="w-25 d-inline-block">3.1.7.140</div>
@@ -351,8 +427,225 @@
         </div>
       </div>
     </div>
-    
 
+    <!-- 开通网络版 -->
+    <div class="modal" tabindex="-1" role="dialog" id="onlinewrap" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">开通免费网络版</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <form>
+              <div class="form-group row">
+                 <label for="" class="col-sm-2 col-form-label">真实姓名</label>
+                 <div class="col-sm-10">
+                  <input type="text" class="form-control" id="" placeholder="">
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-2 col-form-label">手机号码</label>
+                 <div class="col-sm-10">
+                  <input type="text" class="form-control" id="" placeholder="">
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-2 col-form-label">单位(公司)名称</label>
+                 <div class="col-sm-10">
+                  <input type="text" class="form-control" id="" placeholder="">
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-2 col-form-label">联系地址</label>
+                 <div class="col-sm-10 row">
+                  <div class="form-group col-sm-4">
+                    <select id="inputState" class="form-control">
+                      <option selected>广东</option>
+                    </select>
+                  </div>
+                  <div class="form-group col-sm-8">
+                    <input type="text" class="form-control" id="" placeholder="">
+                  </div>
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-2 col-form-label">电话号码</label>
+                 <div class="col-sm-10 row">
+                  <div class="form-group col-sm-4">
+                    <input type="text" class="form-control" id="" placeholder="">
+                  </div>
+                  <div class="form-group col-sm-8">
+                    <input type="text" class="form-control" id="" placeholder="">
+                  </div>
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-2 col-form-label">QQ号码</label>
+                 <div class="col-sm-10">
+                  <input type="text" class="form-control" id="" placeholder="">
+                 </div>
+              </div>
+              <p class="text-danger">需要完善您的信息，才能完成开通。</p>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-primary btn-sm">立即开通</button>
+            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 已开通免费网络版 -->
+    <div class="modal" tabindex="-1" role="dialog" id="online-two" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">免费网络版</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="text-right"><a href="#">修改信息</a></div>
+            <form>
+              <div class="form-group row">
+                 <label for="" class="col-sm-3 col-form-label">真实姓名</label>
+                 <div class="col-sm-9">
+                  <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="张三">
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-3 col-form-label">手机号码</label>
+                 <div class="col-sm-9">
+                  <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="15812644017">
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-3 col-form-label">单位(公司)名称</label>
+                 <div class="col-sm-9">
+                  <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="珠海纵横创新软件有限公司">
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-3 col-form-label">联系地址</label>
+                 <div class="col-sm-9 row">
+                  <div class="form-group col-sm-3">
+                    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="广东省">
+                  </div>
+                  <div class="form-group col-sm-9">
+                    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="珠海香洲区银桦路8号">
+                  </div>
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-3 col-form-label">电话号码</label>
+                 <div class="col-sm-9 row">
+                  <div class="form-group col-sm-3">
+                    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="0756">
+                  </div>
+                  <div class="form-group col-sm-9">
+                    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="3850888">
+                  </div>
+                 </div>
+              </div>
+              <div class="form-group row">
+                 <label for="" class="col-sm-3 col-form-label">QQ号码</label>
+                 <div class="col-sm-9">
+                  <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="3216329758">
+                 </div>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 登录 -->
+    <div class="modal" tabindex="-1" role="dialog" id="loginwrap" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">登录</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 class="text-center pb-3">请登录账号，开始使用免费网络版</h5>
+            <form>
+              <div class="form-group">
+                <label for="tel">邮箱 / 手机</label>
+                  <input type="tel" class="form-control" id="tel" aria-describedby="emailHelp" placeholder="">
+              </div>
+              <div class="form-group">
+                <label for="password">密码</label>
+                  <input type="password" class="form-control" id="password" aria-describedby="emailHelp" placeholder="">
+              </div>
+              <button type="submit" class="btn btn-blue btn-sm mr-4 btn-block">登录</button>
+              <div class="row mt-2">
+                <div class="col text-right"><a href="" class="">忘记密码</a></div>
+                <div class="col text-left"><a href="" class="">注册通行帐号</a></div>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 免费网路版 -->
+    <div class="modal" tabindex="-1" role="dialog" id="onlinelist" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">免费网络版</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="modal-online">
+              <div class="media">
+                <img class="mr-3" src="images/product01.png" width="40" height="40" alt="广东公路造价">
+                <div class="media-body">
+                  <div class="float-right"><button type="button" class="btn btn-white btn-sm mt-2"><i class="fas fa-play mr-2"></i>启动</button></div>
+                  <div class="software-body">
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">纵横公路工程造价管理系统</h5>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="media">
+                <img class="mr-3" src="images/product02.png" width="40" height="40" alt="广东公路造价">
+                <div class="media-body">
+                  <div class="float-right"><button type="button" class="btn btn-white btn-sm mt-2"><i class="fas fa-download mr-2"></i>立即下载</button></div>
+                  <div class="software-body">
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">广东公路造价编审系统</h5>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    
     <script src="js/jquery-3.3.1.slim.min.js"></script>
     <script src="js/popper.min.js"></script>
     <script src="js/bootstrap.min.js"></script>