更新样式

css/global.css

@@ -4,11 +4,13 @@ body{
   font-size:12px !important;
 }
 .container-width{
-  position:relative;
-  width:900px;
-  height:564px;
-  overflow: hidden;
-  background:url(bg.png);
+  /*position:relative;*/
+  padding:20px;
+  /*width:900px;
+  height:564px;*/
+  /*overflow: hidden;*/
+  background: -prefix-linear-gradient(left top,#6d5855,#3b2d2a);
+  background: linear-gradient(to bottom right,#6d5855,#3b2d2a);
 }
 ::-webkit-scrollbar-track
 {
@@ -27,12 +29,21 @@ body{
   background-color: #ddd5cf;
 }
 .header{
+  margin-top: -20px;
+  padding-top: 5px;
   height:60px;
   color:#fff;
+  background:url(header-bg.png) no-repeat 140px 0;
 }
 .header i{
   color:#fff;
 }
+.header-return{
+  display:inline-block;
+  font-size: 20px;
+  font-weight: bold;
+  padding:13px 5px 0 0;
+}
 .version-name{
   margin-left: 15px;
   color:#ddd;
@@ -41,13 +52,13 @@ body{
 .software-wrap{
   position:relative;
   background:#fbf6f3;
-  height:485px;
+  overflow:hidden;
 }
 .software-down{
   padding: 50px 0;
 }
 .lock-detail{
-  width:868px;
+  width:100%;
   position:relative;
 }
 .text-orange{
@@ -66,7 +77,7 @@ body{
 .info-list{
   position:absolute;
   top:67px;
-  max-height:280px;
+  width:100%;
   overflow-y:auto;
 }
 .software-info{
@@ -74,12 +85,11 @@ body{
   font-size: 14px;
 }
 .software-wrapscroll{
-  height:485px;
+  position:absolute;
+  width:100%;
   overflow-y:auto;
 }
 .software-list{
-  float:left;
-  width:830px;
   background:#fff;
   border:2px solid #fff;
   border-radius: 3px;
@@ -104,14 +114,14 @@ body{
   text-decoration: none;
 }
 .obtian-list{
-  float:left;
-  height:373px;
+  position:absolute;
+  width:100%;
+  /*height:373px;*/
   overflow-y:auto;
 }
 .obtian-top{
-  float:left;
-  width:830px;
-  background:rgba(255,173,51,0.1);
+  background:#6b5b59;
+  color:#fff;
   border:1px solid #ddd;
   border-radius: 7px;
   padding:15px;
@@ -155,7 +165,7 @@ body{
 }
 .software-left{
   position: absolute;
-  width:230px;
+  width:27%;
   top:0;
   bottom:0;
   left:0;
@@ -165,7 +175,7 @@ body{
   width:100%;
   top:0;
   left:0;
-  bottom:0;
+  bottom:47px;
   background:#fff;
   overflow-y:auto;
 }
@@ -205,6 +215,22 @@ body{
   background:#ff6501;
   color:#fff;
 }
+.open-left{
+  position:absolute;
+  top:45%;
+  left:100%;
+  z-index: 999;
+}
+.open-left span{
+  display:inline-block;
+  font-size: 16px;
+  width:12px;
+  text-align: center;
+  padding:10px 0;
+  background:#fff;
+  color:#574542;
+  cursor:pointer;
+}
 .software-num{
   position:absolute;
   top:15px;
@@ -214,27 +240,35 @@ body{
   display:inline-block;
   padding:3px 8px;
 }
-.software-left-bottom{
+.software-left-bottomV1,.software-left-bottomV2{
   z-index: 999;
   position:absolute;
   width:100%;
   bottom:0;
   left:0;
+  background:#fff;
+  height:55px;
 }
 .local-install{
   position:absolute;
   top: 0;
-  right:0;
+  left:27%;
   bottom:0;
-  width:635px;
+  width:73%;
   overflow-y:auto;
 }
 .software-content{
-  margin:0 15px 15px;
-  height:385px;
+  position:absolute;
+  width:100%;
+}
+.software-tab-pane{
   background:#fff;
+  padding:15px;
   overflow-y:auto;
 }
+.software-content .tab-pane{
+  padding:0 15px;
+}
 .software-nav{
   position:absolute;
   right:15px;
@@ -266,9 +300,6 @@ body{
   background:#0fb890;
   color:#fff;
 }
-.software-content .tab-pane{
-  margin:0 15px;
-}
 .details{
   background:#fbf6f3;
   padding:15px;
@@ -278,11 +309,20 @@ body{
   color:#888;
   font-size: 14px;
 }
+.software-tab-pane .details:last-child{
+  margin-bottom: 0;
+}
 .details-title{
   width:72%;
   font-size: 16px;
   color:#333;
 }
+.details .details-title .w-25{
+  font-size: 16px;
+  color:#333;
+  font-weight: 500;
+  width:35%!important;
+}
 .details .w-25{
   font-size: 16px;
   font-weight: bold;
@@ -304,7 +344,7 @@ body{
   top: 98px;
   height: 100px;
   position: absolute;
-  width: 868px;
+  width: 100%;
   z-index:1;
   overflow:hidden;
 }

js/global.js

@@ -5,4 +5,35 @@ function waveloop2(){
   $("#banner_bolang_bg_2").css({"left":"-25px"}).animate({"left":"-1009px"},60000,'linear',waveloop2);
 }
 waveloop1();
-waveloop2();
+waveloop2();
+
+function autoFlashHeight(){
+	var header = $(".header").height();
+	$(".autoHeightL1").height($(window).height()-header-25);
+	$(".autoHeightL2").height($(window).height()-header-231);
+	$(".autoHeightL3").height($(window).height()-header-125);
+	$(".autoHeightL4").height($(window).height()-header-114);
+	// console.log($(window).height());
+	console.log($(document).height());
+};
+$(window).resize(autoFlashHeight);
+
+$(document).ready(function(){
+
+	$('.open-left').click(function(){//点击a标签
+		if($('.left-media-body').is(':hidden')){//如果当前隐藏
+			$(".software-left").animate({width:"27%"},500);
+		  $(".local-install").animate({left:"27%",width:"73%"},500);
+		  $(".left-media-body").fadeIn(1000);
+		  $(".software-left-bottomV1").show();
+		  $(".software-left-bottomV2").hide();
+		}else{//否则
+			$(".software-left").animate({width:"7%"},500);
+		  $(".local-install").animate({left:"7%",width:"93%"},500);
+		  $(".left-media-body").fadeOut(100);
+		  $(".software-left-bottomV1").hide();
+		  $(".software-left-bottomV2").show();
+		}
+  })
+
+ });

software-details.html

@@ -10,63 +10,74 @@
     <title>启动器</title>
   </head>
   <body>
-    <div class="container container-width border rounded mt-5 pl-0 pr-0">
-      <div class="media p-3 header">
-        <h5 class="mt-1 mr-2"><a class="mr-2" href="software-list.html"><i class="fas fa-angle-left"></i></a><a href="softwrae-welcome.html"><i class="fas fa-th-large"></i></a></h5>
-        <div class="media-body">
-          <div class="float-right">
-            <div class="dropdown float-left mr-2">
-              <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="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>
-                      <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
-                    </ul>
+    <div class="container-width rounded">
+      <div class="header">
+        <div class="d-flex">
+          <div class=""><span class="header-return"><a href="software-list.html"><i class="fas fa-angle-left"></i></a></span></div>
+          <div class="p-2"><img src="images/logo.jpg" width="30" height="30"></div>
+          <div class="p-2"><h5 class="mt-1">纵横启动器 <span class="version-name">版本：V30.01</span></h5></div>
+          <div class="ml-auto p-2 pt-3">
+            <div class="d-flex flex-wrap">
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fab fa-usb"></i>
                   </div>
-                </div>
-              </div>
-            </div>
-            <div class="dropdown float-left mr-2">
-              <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
-              </div>
-              <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width progress">
-                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</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="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>
+                          <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
+                        </ul>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width">
-                        <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+              </div>
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
+                  </div>
+                  <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width progress">
+                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width">
+                            <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+                          </div>
+                        </div>
                       </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="">
+                <div class="mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
+              </div>
             </div>
-            <div class="float-left mt-1 mr-3"><a href="#" class="colorblack"><i class="fas fa-minus"></i></a></div>
-            <div class="float-right mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
           </div>
-          <h5>纵横启动器 <span class="version-name">版本：V30.01</span></h5>
         </div>
       </div>
-      <div class="software-wrap mb-2 ml-3 mr-3 software-wrapscroll">
+      <div class="software-wrap autoHeightL1">
         <div class="software-detail-top pt-3 pl-3">
           <div class="media">
             <img class="mr-3" src="images/product01.png" width="50" height="50" alt="广东公路造价">
@@ -76,57 +87,61 @@
             </div>
           </div>
         </div>
-        <div class="software-detail pt-3">
+        <div class="software-detail pt-3 pb-1 mb-3">
           <ul class="software-nav nav nav-tabs pl-3" id="myTab" role="tablist">
             <li class="nav-item">
-              <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><span class="iconbg iconbg-purple"><i class="fas fa-download"></i></span>下载软件</a>
+              <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><span class="iconbg iconbg-purple rounded"><i class="fas fa-download"></i></span>下载软件</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" id="profile-tab" data-toggle="tab" href="#details" role="tab" aria-controls="profile" aria-selected="false"><span class="iconbg iconbg-green"><i class="fas fa-info"></i></span>软件详情</a>
+              <a class="nav-link" id="profile-tab" data-toggle="tab" href="#details" role="tab" aria-controls="profile" aria-selected="false"><span class="iconbg iconbg-green rounded"><i class="fas fa-info"></i></span>软件详情</a>
             </li>
           </ul>
           <div class="tab-content software-content" id="myTabContent">
-            <div class="tab-pane fade show active pt-3" id="home" role="tabpanel" aria-labelledby="home-tab">
-              <div class="details">
-                <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
-                <div class="w-25 d-inline-block">专业版</div>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
-              </div>
-              <div class="details">
-                <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
-                <div class="w-25 d-inline-block">专业版</div>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
-              </div>
-              <div class="details">
-                <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
-                <div class="w-25 d-inline-block">专业版</div>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
-              </div>
-              <div class="details">
-                <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
-                <div class="w-25 d-inline-block">专业版</div>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
-              </div>
-              <div class="details">
-                <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
-                <div class="w-25 d-inline-block">专业版</div>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
+            <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"><i class="fas fa-download mr-2"></i>下载</button></div>
+                  <div class="w-25 d-inline-block">专业版</div>
+                  <div class="w-50 d-inline-block">锁号：SC-Z****</div>
+                  <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
+                </div>
+                <div class="details">
+                  <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
+                  <div class="w-25 d-inline-block">专业版</div>
+                  <div class="w-50 d-inline-block">锁号：SC-Z****</div>
+                  <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
+                </div>
+                <div class="details">
+                  <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
+                  <div class="w-25 d-inline-block">专业版</div>
+                  <div class="w-50 d-inline-block">锁号：SC-Z****</div>
+                  <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
+                </div>
+                <div class="details">
+                  <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
+                  <div class="w-25 d-inline-block">专业版</div>
+                  <div class="w-50 d-inline-block">锁号：SC-Z****</div>
+                  <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
+                </div>
+                <div class="details">
+                  <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
+                  <div class="w-25 d-inline-block">专业版</div>
+                  <div class="w-50 d-inline-block">锁号：SC-Z****</div>
+                  <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
+                </div>
               </div>
             </div>
-            <div class="tab-pane fade pt-3 pr-3" id="details" role="tabpanel" aria-labelledby="profile-tab">
-              <p><strong><span style="color:#e36c09">产品介绍：</span></strong></p>
-              <p>纵横公路造价软件2008年通过交通部测评，数据准确，品质保证。具有“模板克隆、定位查询、企业定额、清单调价、参数化设计、实时计算等功能。纵横公路软件以简洁的界面、个性化的资源、高效的算法和完善的管理让您的造价管理工作得心应手。</p>
-              <p><strong><span style="color:#e36c09">使用说明：</span></strong></p>
-              <p><a href="http://d2.smartcost.com.cn/doc/gongchengzaojiaguanlishouce.rar" target="blank">《纵横公路工程造价管理系统》简易操作手册</a></p><p><a href="http://d2.smartcost.com.cn/doc/zhaotoubiao.rar" target="blank">纵横公路造价软件招投标版功能演示</a></p>
-              <p><a href="http://d2.smartcost.com.cn/doc/gaiyusuan.rar" target="blank">纵横公路造价软件概预算版功能演示</a></p><p><a href="http://d2.smartcost.com.cn/doc/wangluoban.zip" target="blank">纵横工程造价软件免费网络版注册教程</a></p>
-              <p><a href="http://d2.smartcost.com.cn/doc/badianshiyonggongneng.zip" target="blank">纵横公路造价软件设计院客户8点实用功能</a></p>
-              <p><strong><span style="color:#e36c09">操作指引：</span></strong></p>
-              <p><img title="公路造价操作流程图.png" src="http://smartcost.com.cn/global/upload/img/20151028/14459972402207.png"></p>
+            <div class="tab-pane fade pr-3" id="details" role="tabpanel" aria-labelledby="profile-tab">
+              <div class="software-tab-pane autoHeightL3">
+                <p><strong><span style="color:#e36c09">产品介绍：</span></strong></p>
+                <p>纵横公路造价软件2008年通过交通部测评，数据准确，品质保证。具有“模板克隆、定位查询、企业定额、清单调价、参数化设计、实时计算等功能。纵横公路软件以简洁的界面、个性化的资源、高效的算法和完善的管理让您的造价管理工作得心应手。</p>
+                <p><strong><span style="color:#e36c09">使用说明：</span></strong></p>
+                <p><a href="http://d2.smartcost.com.cn/doc/gongchengzaojiaguanlishouce.rar" target="blank">《纵横公路工程造价管理系统》简易操作手册</a></p><p><a href="http://d2.smartcost.com.cn/doc/zhaotoubiao.rar" target="blank">纵横公路造价软件招投标版功能演示</a></p>
+                <p><a href="http://d2.smartcost.com.cn/doc/gaiyusuan.rar" target="blank">纵横公路造价软件概预算版功能演示</a></p><p><a href="http://d2.smartcost.com.cn/doc/wangluoban.zip" target="blank">纵横工程造价软件免费网络版注册教程</a></p>
+                <p><a href="http://d2.smartcost.com.cn/doc/badianshiyonggongneng.zip" target="blank">纵横公路造价软件设计院客户8点实用功能</a></p>
+                <p><strong><span style="color:#e36c09">操作指引：</span></strong></p>
+                <p><img title="公路造价操作流程图.png" src="http://smartcost.com.cn/global/upload/img/20151028/14459972402207.png"></p>
+              </div>
             </div>
           </div>
         </div>
@@ -139,5 +154,6 @@
     <script src="js/bootstrap.min.js"></script>
     <script src="js/jquery-1.9.1.min.js"></script> 
     <script src="js/global.js"></script>
+    <script type="text/javascript">autoFlashHeight();</script>  
   </body>
 </html>

software-index.html

@@ -10,91 +10,104 @@
     <title>启动器</title>
   </head>
   <body>
-  	<div class="container container-width border rounded mt-5 pl-0 pr-0">
-      <div class="media p-3 header">
-        <h5 class="mt-1 mr-2"><a class="mr-2" href="softwrae-welcome.html"><i class="fas fa-angle-left"></i></a><a href="softwrae-welcome.html"><i class="fas fa-th-large"></i></a></h5>
-        <div class="media-body">
-          <div class="float-right">
-            <div class="dropdown float-left mr-2">
-              <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="downloading-title border-bottom"><span class="float-right"><b>1年</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>
-                      <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
-                    </ul>
+  	<div class="container-width rounded ">
+      <div class="header">
+        <div class="d-flex">
+          <div class="pt-2 pb-2 pr-2"><img src="images/logo.jpg" width="30" height="30"></div>
+          <div class="p-2"><h5 class="mt-1">纵横启动器 <span class="version-name">版本：V30.01</span></h5></div>
+          <div class="ml-auto p-2 pt-3">
+            <div class="d-flex flex-wrap">
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fab fa-usb"></i>
                   </div>
-                </div>
-              </div>
-            </div>
-            <div class="dropdown float-left mr-2">
-              <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
-              </div>
-              <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width progress">
-                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</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="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>
+                          <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
+                        </ul>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width">
-                        <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+              </div>
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
+                  </div>
+                  <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width progress">
+                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width">
+                            <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+                          </div>
+                        </div>
                       </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="">
+                <div class="mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
+              </div>
             </div>
-            <div class="float-left mt-1 mr-3"><a href="#" class="colorblack"><i class="fas fa-minus"></i></a></div>
-            <div class="float-right mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
           </div>
-          <h5>纵横启动器 <span class="version-name">版本：V30.01</span></h5>
         </div>
       </div>
-      <div class="software-wrap mb-2 ml-3 mr-3">
+      <div class="software-wrap autoHeightL1">
         <div class="software-left">
+          <div class="open-left">
+            <span><i class="fas fa-chevron-left"></i></span>
+          </div>
           <div class="local-software">
             <div class="software media active">
               <img class="mr-2" src="images/product01.png" width="25" height="25" alt="公路造价（增值税）">
-              <div class="media-body">
+              <div class="media-body left-media-body">
                 <div class="mt-1 mb-1"><a href="#">公路造价（增值税）</a></div>
-                <span class="software-num">4</span>
+                <span class="software-num rounded">4</span>
               </div>
             </div>
             <div class="software media">
               <img class="mr-2" src="images/product02.png" width="25" height="25" alt="公路造价（增值税）">
-              <div class="media-body">
+              <div class="media-body left-media-body">
                 <div class="mt-1 mb-1"><a href="#">广东公路造价（增值税）</a></div>
-                <span class="software-num">2</span>
+                <span class="software-num rounded">2</span>
               </div>
             </div>
             <div class="software media">
               <img class="mr-2" src="images/fenlei.png" width="25" height="25" alt="未分类软件">
-              <div class="media-body">
+              <div class="media-body left-media-body">
                 <div class="mt-1 mb-1"><a href="#">未分类软件</a></div>
-                <span class="software-num">8</span>
+                <span class="software-num rounded">8</span>
               </div>
             </div>
           </div>
-          <div class="software-left-bottom">
-            <div class="d-flex bd-highlight">
-              <div class="p-2 flex-fill bd-highlight"><a style="width:100%;" href="software-list.html" class="btn btn-orange btn-sm">下载软件</a></div>
-              <div class="p-2 flex-fill bd-highlight dropup"><button style="width:100%;" type="button" class="btn btn-blue btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">添加软件</button>
+          <div class="software-left-bottomV1">
+            <div class="d-flex">
+              <div class="p-2 flex-fill"><a style="width:100%;" href="software-list.html" class="btn btn-orange btn-sm">下载软件</a></div>
+              <div class="p-2 flex-fill dropup"><button style="width:100%;" type="button" class="btn btn-blue btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">添加软件</button>
                 <div class="dropdown-menu dropdown-wrap">
                   <a class="dropdown-item" href="softwrae-obtain.html">自动获取</a>
                   <a class="dropdown-item" href="software-index.html">手动添加</a>
@@ -102,6 +115,18 @@
               </div>
             </div>
           </div>
+          <div class="software-left-bottomV2" style="display:none;">
+            <div class="d-flex">
+              <div class="p-2 flex-fill dropup"><button style="width:100%;" type="button" class="btn btn-blue btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus mt-2 mb-2"></i></button>
+                <div class="dropdown-menu dropdown-wrap">
+                  <a class="dropdown-item" href="software-list.html">下载软件</a>
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item" href="softwrae-obtain.html">自动获取</a>
+                  <a class="dropdown-item" href="software-index.html">手动添加</a>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="local-install">
           <div class="software-detail-top pt-3 pl-3">
@@ -116,61 +141,85 @@
           <div class="software-detail pt-3">
             <ul class="software-nav nav nav-tabs pl-3" id="myTab" role="tablist">
               <li class="nav-item">
-                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><span class="iconbg iconbg-purple"><i class="fas fa-download"></i></span>下载软件</a>
+                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><span class="iconbg iconbg-purple rounded"><i class="fas fa-download"></i></span>下载软件</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#details" role="tab" aria-controls="profile" aria-selected="false"><span class="iconbg iconbg-green"><i class="fas fa-info"></i></span>软件详情</a>
+                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#details" role="tab" aria-controls="profile" aria-selected="false"><span class="iconbg iconbg-green rounded"><i class="fas fa-info"></i></span>软件详情</a>
               </li>
             </ul>
             <div class="tab-content software-content" id="myTabContent">
-              <div class="tab-pane fade show active pt-3" id="home" role="tabpanel" aria-labelledby="home-tab">
-                <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">纵横公路工程结算决算计量一体化(云版)</div>
-                  <div class="w-25 d-inline-block">3.1.7.140</div>
-                  <div class="d-inline-block">纵横结算决算计量一体化云版</div>
-                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横结算决算计量一体化软件(广东云版)</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="w-25 d-inline-block">专业版</div>
-                  <div class="d-inline-block">锁号：SC-Z****</div>
-                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横结算决算计量一体化软件(广东云版)</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></div>
-                  <div class="w-25 d-inline-block">专业版</div>
-                  <div class="d-inline-block">锁号：SC-Z****</div>
-                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</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></div>
-                  <div class="w-25 d-inline-block">专业版</div>
-                  <div class="d-inline-block">锁号：SC-Z****</div>
-                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</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></div>
-                  <div class="w-25 d-inline-block">专业版</div>
-                  <div class="d-inline-block">锁号：SC-Z****</div>
-                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</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></div>
-                  <div class="w-25 d-inline-block">专业版</div>
-                  <div class="d-inline-block">锁号：SC-Z****</div>
-                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
+              <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"><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">纵横公路工程结算决算计量一体化(云版)</div>
+                    <div class="w-25 d-inline-block">3.1.7.140</div>
+                    <div class="d-inline-block">纵横结算决算计量一体化云版</div>
+                    <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横结算决算计量一体化软件(广东云版)</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">
+                      <div class="w-25 d-inline-block">专业版</div>
+                      <div class="d-inline-block">锁号：SC-Z****</div>
+                    </div>
+                    <div class="w-25 d-inline-block">3.1.7.140</div>
+                    <div class="d-inline-block">纵横结算决算计量一体化云版</div>
+                    <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横结算决算计量一体化软件(广东云版)</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></div>
+                    <div class="details-title">
+                      <div class="w-25 d-inline-block">业主版</div>
+                      <div class="d-inline-block">锁号：SC-GDC****</div>
+                    </div>
+                    <div class="w-25 d-inline-block">3.1.6.140</div>
+                    <div class="d-inline-block">纵横结算决算计量一体化云版</div>
+                    <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</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></div>
+                    <div class="details-title">
+                      <div class="w-25 d-inline-block">专业版</div>
+                      <div class="d-inline-block">锁号：SC-Z****</div>
+                    </div>
+                    <div class="w-25 d-inline-block">3.1.7.140</div>
+                    <div class="d-inline-block">纵横结算决算计量一体化云版</div>
+                    <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</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></div>
+                    <div class="details-title">
+                      <div class="w-25 d-inline-block">招投标版</div>
+                      <div class="d-inline-block">锁号：SC-GDT****</div>
+                    </div>
+                    <div class="w-25 d-inline-block">3.1.7.160</div>
+                    <div class="d-inline-block">纵横结算决算计量一体化云版</div>
+                    <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</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></div>
+                    <div class="details-title">
+                      <div class="w-25 d-inline-block">学习版</div>
+                      <div class="d-inline-block"></div>
+                    </div>
+                    <div class="w-25 d-inline-block">3.1.8.140</div>
+                    <div class="d-inline-block">纵横结算决算计量一体化云版</div>
+                    <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
+                  </div>
                 </div>
               </div>
-              <div class="tab-pane fade pt-3 pr-3" id="details" role="tabpanel" aria-labelledby="profile-tab">
-                <p><strong><span style="color:#e36c09">产品介绍：</span></strong></p>
-                <p>纵横公路造价软件2008年通过交通部测评，数据准确，品质保证。具有“模板克隆、定位查询、企业定额、清单调价、参数化设计、实时计算等功能。纵横公路软件以简洁的界面、个性化的资源、高效的算法和完善的管理让您的造价管理工作得心应手。</p>
-                <p><strong><span style="color:#e36c09">使用说明：</span></strong></p>
-                <p><a href="http://d2.smartcost.com.cn/doc/gongchengzaojiaguanlishouce.rar" target="blank">《纵横公路工程造价管理系统》简易操作手册</a></p><p><a href="http://d2.smartcost.com.cn/doc/zhaotoubiao.rar" target="blank">纵横公路造价软件招投标版功能演示</a></p>
-                <p><a href="http://d2.smartcost.com.cn/doc/gaiyusuan.rar" target="blank">纵横公路造价软件概预算版功能演示</a></p><p><a href="http://d2.smartcost.com.cn/doc/wangluoban.zip" target="blank">纵横工程造价软件免费网络版注册教程</a></p>
-                <p><a href="http://d2.smartcost.com.cn/doc/badianshiyonggongneng.zip" target="blank">纵横公路造价软件设计院客户8点实用功能</a></p>
-                <p><strong><span style="color:#e36c09">操作指引：</span></strong></p>
-                <p><img title="公路造价操作流程图.png" src="http://smartcost.com.cn/global/upload/img/20151028/14459972402207.png"></p>
+              <div class="tab-pane fade pr-3" id="details" role="tabpanel" aria-labelledby="profile-tab">
+                <div class="software-tab-pane autoHeightL3">
+                  <p><strong><span style="color:#e36c09">产品介绍：</span></strong></p>
+                  <p>纵横公路造价软件2008年通过交通部测评，数据准确，品质保证。具有“模板克隆、定位查询、企业定额、清单调价、参数化设计、实时计算等功能。纵横公路软件以简洁的界面、个性化的资源、高效的算法和完善的管理让您的造价管理工作得心应手。</p>
+                  <p><strong><span style="color:#e36c09">使用说明：</span></strong></p>
+                  <p><a href="http://d2.smartcost.com.cn/doc/gongchengzaojiaguanlishouce.rar" target="blank">《纵横公路工程造价管理系统》简易操作手册</a></p><p><a href="http://d2.smartcost.com.cn/doc/zhaotoubiao.rar" target="blank">纵横公路造价软件招投标版功能演示</a></p>
+                  <p><a href="http://d2.smartcost.com.cn/doc/gaiyusuan.rar" target="blank">纵横公路造价软件概预算版功能演示</a></p><p><a href="http://d2.smartcost.com.cn/doc/wangluoban.zip" target="blank">纵横工程造价软件免费网络版注册教程</a></p>
+                  <p><a href="http://d2.smartcost.com.cn/doc/badianshiyonggongneng.zip" target="blank">纵横公路造价软件设计院客户8点实用功能</a></p>
+                  <p><strong><span style="color:#e36c09">操作指引：</span></strong></p>
+                  <p><img title="公路造价操作流程图.png" src="http://smartcost.com.cn/global/upload/img/20151028/14459972402207.png"></p>
+                </div>
               </div>
             </div>
           </div>
@@ -207,5 +256,6 @@
     <script src="js/bootstrap.min.js"></script>
     <script src="js/jquery-1.9.1.min.js"></script> 
     <script src="js/global.js"></script>
+    <script type="text/javascript">autoFlashHeight();</script>  
   </body>
 </html>

software-list.html

@@ -10,198 +10,211 @@
     <title>启动器</title>
   </head>
   <body>
-  	<div class="container container-width border rounded mt-5 pl-0 pr-0">
-      <div class="media p-3 header">
-        <h5 class="mt-1 mr-2"><a class="mr-2" href="softwrae-welcome.html"><i class="fas fa-angle-left"></i></a><a href="softwrae-welcome.html"><i class="fas fa-th-large"></i></a></h5>
-        <div class="media-body">
-          <div class="float-right">
-            <div class="dropdown float-left mr-2">
-              <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="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>
-                      <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
-                    </ul>
+  	<div class="container-width rounded">
+      <div class="header">
+        <div class="d-flex">
+          <div class=""><span class="header-return"><a href="softwrae-welcome.html"><i class="fas fa-angle-left"></i></a></span></div>
+          <div class="p-2"><img src="images/logo.jpg" width="30" height="30"></div>
+          <div class="p-2"><h5 class="mt-1">纵横启动器 <span class="version-name">版本：V30.01</span></h5></div>
+          <div class="ml-auto p-2 pt-3">
+            <div class="d-flex flex-wrap">
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fab fa-usb"></i>
                   </div>
-                </div>
-              </div>
-            </div>
-            <div class="dropdown float-left mr-2">
-              <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
-              </div>
-              <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width progress">
-                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</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="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>
+                          <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
+                        </ul>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width">
-                        <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+              </div>
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
+                  </div>
+                  <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width progress">
+                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width">
+                            <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+                          </div>
+                        </div>
                       </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="">
+                <div class="mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
+              </div>
             </div>
-            <div class="float-left mt-1 mr-3"><a href="#" class="colorblack"><i class="fas fa-minus"></i></a></div>
-            <div class="float-right mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
           </div>
-          <h5>纵横启动器 <span class="version-name">版本：V30.01</span></h5>
         </div>
       </div>
-      <div class="software-wrap software-wrapscroll mb-2 ml-3 mr-3 pt-3">
-        <div class="software-list">
-          <a href="software-details.html">
-            <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-align-left mr-2"></i>详情</button></div>
-                <div class="software-body">
-                  <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
-                  <div class="software-bodyleft">
-                    <h5 class="software-title mb-1">公路造价（增值税）</h5>
-                    <div class="software-stitle">纵横公路工程造价管理系统</div>
+      <div class="software-wrap autoHeightL1">
+        <div class="software-wrapscroll pt-3 autoHeightL1">
+          <div class="software-list">
+            <a href="software-details.html">
+              <div class="media">
+                <img class="mr-3" src="images/product01.png" width="40" height="40" alt="公路造价（增值税）">
+                <div class="media-body clearfix">
+                  <div class="float-right"><button type="button" class="btn btn-white btn-sm mt-2"><i class="fas fa-align-left mr-2"></i>详情</button></div>
+                  <div class="software-body">
+                    <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">公路造价（增值税）</h5>
+                      <div class="software-stitle">纵横公路工程造价管理系统</div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </a>
-        </div>
-        <div class="software-list">
-          <a href="software-details.html">
-            <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-align-left mr-2"></i>详情</button></div>
-                <div class="software-body">
-                  <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
-                  <div class="software-bodyleft">
-                    <h5 class="software-title mb-1">广东公路造价</h5>
-                    <div class="software-stitle">广东公路造价编审软件(标准化2011)</div>
+            </a>
+          </div>
+          <div class="software-list">
+            <a href="software-details.html">
+              <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-align-left mr-2"></i>详情</button></div>
+                  <div class="software-body">
+                    <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">广东公路造价</h5>
+                      <div class="software-stitle">广东公路造价编审软件(标准化2011)</div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </a>
-        </div>
-        <div class="software-list">
-          <a href="software-details.html">
-            <div class="media">
-              <img class="mr-3" src="images/product03.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-align-left mr-2"></i>详情</button></div>
-                <div class="software-body">
-                  <div class="float-right"><div class="software-version">更新时间：2018-05-29</div></div>
-                  <div class="software-bodyleft">
-                    <h5 class="software-title mb-1">计量支付结算决算</h5>
-                    <div class="software-stitle">纵横工程计量支付结算决算一体化软件</div>
+            </a>
+          </div>
+          <div class="software-list">
+            <a href="software-details.html">
+              <div class="media">
+                <img class="mr-3" src="images/product03.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-align-left mr-2"></i>详情</button></div>
+                  <div class="software-body">
+                    <div class="float-right"><div class="software-version">更新时间：2018-05-29</div></div>
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">计量支付结算决算</h5>
+                      <div class="software-stitle">纵横工程计量支付结算决算一体化软件</div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </a>
-        </div>
-        <div class="software-list">
-          <a href="software-details.html">
-            <div class="media">
-              <img class="mr-3" src="images/product03.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-align-left mr-2"></i>详情</button></div>
-                <div class="software-body">
-                  <div class="float-right"><div class="software-version">更新时间：2018-05-29</div></div>
-                  <div class="software-bodyleft">
-                    <h5 class="software-title mb-1">验工计价成本分析</h5>
-                    <div class="software-stitle">纵横施工企业验工计价成本分析软件</div>
+            </a>
+          </div>
+          <div class="software-list">
+            <a href="software-details.html">
+              <div class="media">
+                <img class="mr-3" src="images/product03.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-align-left mr-2"></i>详情</button></div>
+                  <div class="software-body">
+                    <div class="float-right"><div class="software-version">更新时间：2018-05-29</div></div>
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">验工计价成本分析</h5>
+                      <div class="software-stitle">纵横施工企业验工计价成本分析软件</div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </a>
-        </div>
-        <div class="software-list">
-          <a href="software-details.html">
-            <div class="media">
-              <img class="mr-3" src="images/product04.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-align-left mr-2"></i>详情</button></div>
-                <div class="software-body">
-                  <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
-                  <div class="software-bodyleft">
-                    <h5 class="software-title mb-1">材料调差（增值税）</h5>
-                    <div class="software-stitle">纵横公路材料调差软件</div>
+            </a>
+          </div>
+          <div class="software-list">
+            <a href="software-details.html">
+              <div class="media">
+                <img class="mr-3" src="images/product04.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-align-left mr-2"></i>详情</button></div>
+                  <div class="software-body">
+                    <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">材料调差（增值税）</h5>
+                      <div class="software-stitle">纵横公路材料调差软件</div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </a>
-        </div>
-        <div class="software-list">
-          <a href="software-details.html">
-            <div class="media">
-              <img class="mr-3" src="images/product05.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-align-left mr-2"></i>详情</button></div>
-                <div class="software-body">
-                  <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
-                  <div class="software-bodyleft">
-                    <h5 class="software-title mb-1">养护造价（增值税）</h5>
-                    <div class="software-stitle">纵横公路养护造价管理系统</div>
+            </a>
+          </div>
+          <div class="software-list">
+            <a href="software-details.html">
+              <div class="media">
+                <img class="mr-3" src="images/product05.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-align-left mr-2"></i>详情</button></div>
+                  <div class="software-body">
+                    <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">养护造价（增值税）</h5>
+                      <div class="software-stitle">纵横公路养护造价管理系统</div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </a>
-        </div>
-        <div class="software-list">
-          <a href="software-details.html">
-            <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-align-left mr-2"></i>详情</button></div>
-                <div class="software-body">
-                  <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
-                  <div class="software-bodyleft">
-                    <h5 class="software-title mb-1">固化清单</h5>
-                    <div class="software-stitle">纵横公路固化清单软件</div>
+            </a>
+          </div>
+          <div class="software-list">
+            <a href="software-details.html">
+              <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-align-left mr-2"></i>详情</button></div>
+                  <div class="software-body">
+                    <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">固化清单</h5>
+                      <div class="software-stitle">纵横公路固化清单软件</div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </a>
-        </div>
-        <div class="software-list">
-          <a href="software-details.html">
-            <div class="media">
-              <img class="mr-3" src="images/product06.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-align-left mr-2"></i>详情</button></div>
-                <div class="software-body">
-                  <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
-                  <div class="software-bodyleft">
-                    <h5 class="software-title mb-1">公路算量</h5>
-                    <div class="software-stitle">纵横公路工程算量软件</div>
+            </a>
+          </div>
+          <div class="software-list">
+            <a href="software-details.html">
+              <div class="media">
+                <img class="mr-3" src="images/product06.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-align-left mr-2"></i>详情</button></div>
+                  <div class="software-body">
+                    <div class="float-right"><div class="software-version">更新时间：2018-04-27</div></div>
+                    <div class="software-bodyleft">
+                      <h5 class="software-title mb-1">公路算量</h5>
+                      <div class="software-stitle">纵横公路工程算量软件</div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </a>
+            </a>
+          </div>
         </div>
       </div>
   	</div>
@@ -212,5 +225,6 @@
     <script src="js/bootstrap.min.js"></script>
     <script src="js/jquery-1.9.1.min.js"></script> 
     <script src="js/global.js"></script>
+    <script type="text/javascript">autoFlashHeight();</script>  
   </body>
 </html>

softwrae-obtain.html

@@ -10,71 +10,82 @@
     <title>启动器</title>
   </head>
   <body>
-    <div class="container container-width border rounded mt-5 pl-0 pr-0">
-      <div class="media p-3 header">
-        <h5 class="mt-1 mr-2"><a class="mr-2" href="softwrae-welcome.html"><i class="fas fa-angle-left"></i></a><a href="softwrae-welcome.html"><i class="fas fa-th-large"></i></a></h5>
-        <div class="media-body">
-          <div class="float-right">
-            <div class="dropdown float-left mr-2">
-              <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="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>
-                      <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
-                    </ul>
+    <div class="container-width rounded">
+      <div class="header">
+        <div class="d-flex">
+          <div class=""><span class="header-return"><a href="softwrae-welcome.html"><i class="fas fa-angle-left"></i></a></span></div>
+          <div class="p-2"><img src="images/logo.jpg" width="30" height="30"></div>
+          <div class="p-2"><h5 class="mt-1">纵横启动器 <span class="version-name">版本：V30.01</span></h5></div>
+          <div class="ml-auto p-2 pt-3">
+            <div class="d-flex flex-wrap">
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fab fa-usb"></i>
                   </div>
-                </div>
-              </div>
-            </div>
-            <div class="dropdown float-left mr-2">
-              <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
-              </div>
-              <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width progress">
-                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</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="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>
+                          <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
+                        </ul>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width">
-                        <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+              </div>
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
+                  </div>
+                  <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width progress">
+                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width">
+                            <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+                          </div>
+                        </div>
                       </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="">
+                <div class="mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
+              </div>
             </div>
-            <div class="float-left mt-1 mr-3"><a href="#" class="colorblack"><i class="fas fa-minus"></i></a></div>
-            <div class="float-right mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
           </div>
-          <h5>纵横启动器 <span class="version-name">版本：V30.01</span></h5>
         </div>
       </div>
-      <div class="software-wrap mb-2 ml-3 mr-3">
-        <div class="obtian-top clearfix">
+      <div class="software-wrap autoHeightL1">
+        <div class="obtian-top">
           <div class="float-right">
-            <a href="software-index.html" class="btn btn-primary btn-blue btn-sm d-inline-block mt-3">开始使用软件</a>
+            <a href="software-index.html" class="btn btn-orange btn-sm mt-3">开始使用软件</a>
           </div>
           <h5><span class="text-success">检索完成</span></h5>
           <div>努力检索到了 <b>5</b> 款软件</div>
         </div>
-        <div class="obtian-list">
+        <div class="obtian-list pb-4 autoHeightL4">
           <div class="software-list">
             <div class="media">
               <img class="mr-3" src="images/product01.png" width="40" height="40" alt="公路造价（增值税）">
@@ -145,5 +156,6 @@
     <script src="js/bootstrap.min.js"></script>
     <script src="js/jquery-1.9.1.min.js"></script> 
     <script src="js/global.js"></script>
+    <script type="text/javascript">autoFlashHeight();</script>  
   </body>
 </html>

softwrae-welcome.html

@@ -10,63 +10,73 @@
     <title>启动器</title>
   </head>
   <body>
-  	<div class="container container-width rounded mt-5 pl-0 pr-0">
-  		<div class="media p-3 header">
-        <h5 class="mt-1 mr-2"><a href="softwrae-welcome.html"><i class="fas fa-th-large"></i></a></h5>
-        <div class="media-body">
-          <div class="float-right">
-            <div class="dropdown float-left mr-2">
-              <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="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>
-                      <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
-                    </ul>
+  	<div class="container-width rounded">
+      <div class="header">
+        <div class="d-flex">
+          <div class="pt-2 pb-2 pr-2"><img src="images/logo.jpg" width="30" height="30"></div>
+          <div class="p-2"><h5 class="mt-1">纵横启动器 <span class="version-name">版本：V30.01</span></h5></div>
+          <div class="ml-auto p-2 pt-3">
+            <div class="d-flex flex-wrap">
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fab fa-usb"></i>
                   </div>
-                </div>
-              </div>
-            </div>
-            <div class="dropdown float-left mr-2">
-              <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
-              </div>
-              <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width progress">
-                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</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="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>
+                          <li><div class="float-right"><button type="button" class="btn btn-orange btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>纵横公路养护造价管理系统<span class="text-orange">广东养护专业版</span></li>
+                        </ul>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div class="downloaded">
-                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
-                  <div class="pb-2">
-                    <div class="progress-content">
-                      <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
-                      <div class="progress-width">
-                        <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+              </div>
+              <div class="">
+                <div class="dropdown mr-2">
+                  <div class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fas fa-download"></i><span class="badge badge-pill badge-info badge-orange ml-2">2</span>
+                  </div>
+                  <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="far fa-pause-circle text-secondary mr-2"></i></a><a href="#"><i class="far fa-play-circle text-secondary mr-2"></i></a><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width progress">
+                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="downloaded">
+                      <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                      <div class="pb-2">
+                        <div class="progress-content">
+                          <div class="float-right"><a href="#"><i class="fas fa-times text-danger"></i></a></div>
+                          <div class="progress-width">
+                            <button type="button" class="btn btn-blue btn-sm btn-lg btn-block">安装软件</button>
+                          </div>
+                        </div>
                       </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="">
+                <div class="mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
+              </div>
             </div>
-            <div class="float-left mt-1 mr-3"><a href="#" class="colorblack"><i class="fas fa-minus"></i></a></div>
-            <div class="float-right mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
           </div>
-          <h5>纵横启动器 <span class="version-name">版本：V30.01</span></h5>
         </div>
-  		</div>
-      <div class="software-wrap mb-2 ml-3 mr-3">
+      </div>
+      <div class="software-wrap autoHeightL1">
         <div class="software-down">
           <div class="row">
             <div class="col"></div>
@@ -80,15 +90,15 @@
           </div>
         </div>
         <div class="lock-detail clearfix">
-          <div class="info-title pt-1 pb-3">
+          <div class="info-title">
             <p>检测到你的电脑上插上软件锁<b class="pl-2 pr-2">SC-000001</b>有以下产品可下载</p>
           </div>
-          <div class="info-list clearfix">
+          <div class="info-list autoHeightL2 clearfix">
             <div class="software-list">
               <a href="#">
                 <div class="media">
                   <img class="mr-3" src="images/product02.png" width="30" height="30" alt="广东公路造价">
-                  <div class="media-body">
+                  <div class="media-body clearfix">
                     <div class="float-right"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button></div>
                     <div class="software-body float-left">
                       <div class="software-info">纵横公路工程造价管理系统<span class="text-orange">专业版</span>SC-Z****</div>
@@ -165,5 +175,6 @@
     <script src="js/bootstrap.min.js"></script>
     <script src="js/jquery-1.9.1.min.js"></script> 
     <script src="js/global.js"></script>
+    <script type="text/javascript">autoFlashHeight();</script>  
   </body>
 </html>