启动器按照设计更新样式

css/global.css

@@ -1,25 +1,14 @@
 @charset "utf-8";
 /*样式初始化*/
+body{
+  font-size:12px !important;
+}
 .container-width{
   position:relative;
   width:900px;
   height:564px;
-  position:relative;
   overflow: hidden;
-  /*background:url(bg.jpg);*/
-}
-.border{
-  border-color: rgba(0,153,204,0.8) !important;
-}
-.bg{
-  position:absolute;
-  top:0;
-  left:0;
-  width:900px;
-  height:564px;
-  z-index: -2;
-  background:url(bg.jpg);
-  /*background:url(gradient.jpg);*/
+  background:url(bg.png);
 }
 ::-webkit-scrollbar-track
 {
@@ -31,64 +20,82 @@
   height:5px;
 }
 ::-webkit-scrollbar:hover{
-  background:#f7f7f7;
+  background:#ddd5cf;
 }
 ::-webkit-scrollbar-thumb
 {
-  background-color: #f0f0f0;
+  background-color: #ddd5cf;
 }
 .header{
-  /*background-color:rgba(255,255,255,0.5);*/
-  background-color:rgba(0,153,204,1);
+  height:60px;
   color:#fff;
 }
 .header i{
   color:#fff;
 }
+.version-name{
+  margin-left: 15px;
+  color:#ddd;
+  font-size: 12px;
+}
+.software-wrap{
+  position:relative;
+  background:#fbf6f3;
+  height:485px;
+}
+.software-down{
+  padding: 50px 0;
+}
 .lock-detail{
+  width:868px;
+  position:relative;
+}
+.text-orange{
+  color:#ff6501;
+  padding:0 10px;
+}
+.info-title{
   position:absolute;
-  bottom:0;
-  left:0;
-  right:0;
   width:100%;
-  max-height:250px;
-  overflow-y:auto;
-  background-color:rgba(255,173,51,0.1);
+  height:60px;
+  line-height: 60px;
+  text-align: center;
+  font-size: 16px;
+  z-index: 10;
 }
 .info-list{
-  width:100%;
-}
-.info-list ul{
-  margin:0;
-  padding:0;
-}
-.info-list ul li{
-  float:left;
-  width:100%;
-  border-bottom: 1px dotted #ccc;
-  list-style-type: none;
-  padding:10px 15px;
+  position:absolute;
+  top:67px;
+  max-height:280px;
+  overflow-y:auto;
 }
-.info-list ul li:hover{
-  border-bottom: 1px solid #ff9900;
+.software-info{
+  padding-top: 5px;
+  font-size: 14px;
 }
 .software-wrapscroll{
-  width:100%;
-  height:497px;
+  height:485px;
   overflow-y:auto;
 }
 .software-list{
   float:left;
-  width:835px;
-  background:rgba(255,173,51,0.1);
-  border:1px solid #ddd;
-  border-radius: 7px;
-  padding:15px;
-  margin: 5px 25px 15px 30px;
+  width:830px;
+  background:#fff;
+  border:2px solid #fff;
+  border-radius: 3px;
+  padding:12px;
+  margin:0 15px 15px;
 }
-.software-list:hover{
-  background:rgba(255,153,0,0.1);
-  border:1px solid #ff9900;
+.software-list .software-body{
+  width:85% !important;
+}
+.software-list:hover,.details:hover{
+  border:2px solid rgba(255,101,5,0.2);
+}
+.software-list:hover .btn-white,.details:hover .btn-white{
+  background:#ff6501;
+  color:#fff;
+  border:1px solid #ff6501;
 }
 .software-list a{
   color:#333;
@@ -96,39 +103,60 @@
 .software-list a:hover{
   text-decoration: none;
 }
-.software-obtian{
+.obtian-list{
   float:left;
-  width:835px;
-  padding:15px 0;
-  border-bottom: 1px dotted #ccc;
-  margin: 5px 25px 15px 30px;
+  height:373px;
+  overflow-y:auto;
 }
 .obtian-top{
   float:left;
-  width:835px;
+  width:830px;
   background:rgba(255,173,51,0.1);
   border:1px solid #ddd;
   border-radius: 7px;
   padding:15px;
-  margin: 5px 25px 15px 30px;
+  margin:15px;
 }
 .software-title{
   font-size: 16px;
   font-weight: bold;
 }
-.software-body{
-  width:50%;
+.software-version{
+  font-size: 14px;
+  color:#888;
+}
+.software-stitle{
+  font-size: 14px;
+  color:#888;
 }
 .detail-download{
-  min-width:400px;
-  max-height: 450px; 
+  width:530px;
   padding: 10px 15px;
+  font-size: 14px;
   overflow-y:auto;
 }
+.detail-download button{
+  font-size: 12px;
+}
+.detail-content ul{
+  margin:10px 0 0 0;
+  padding:0;
+}
+.detail-content ul li{
+  list-style-type: none;
+  width:100%;
+  padding:10px 0;
+}
+.detail-content ul li .float-right{
+  margin-top: -4px;
+}
+.color-gray{
+  color:#888;
+}
 .software-left{
   position: absolute;
-  width:250px;
-  top:56px;
+  width:230px;
+  top:0;
   bottom:0;
   left:0;
 }
@@ -137,26 +165,56 @@
   width:100%;
   top:0;
   left:0;
-  bottom:50px;
-  /*background:#f9f9f9;*/
-  background-color: rgba(254,250,249,0.3);
+  bottom:0;
+  background:#fff;
   overflow-y:auto;
 }
-.software:hover{
-  background:rgba(255,153,0,0.1);
+.software{
+  position:relative;
+  padding:12px 0;
+  margin:0 15px;
+  border-bottom: 1px solid #f5ede7;
+  cursor:pointer;
 }
 .software a{
+  color:#333;
   text-decoration: none;
 }
+.software:hover a{
+  color:#ff6501;
+}
 .software.active{
-  background:rgba(255,173,51,0.1);
-  border-left: 3px solid #ff9900;
+  font-weight: bold;
+  color:#ff6501;
+}
+.software.active:before{
+  position:absolute;
+  content: "";
+  top:20px;
+  right:-15px;
+  height: 0px;
+  width: 0px;
+  border-top: 7px solid transparent;
+  border-right: 8px solid #fbf6f3;
+  border-bottom: 8px solid transparent;
 }
 .software.active a{
-  color:#333;
+  color:#ff6501;
+}
+.software.active .software-num,.software:hover .software-num{
+  background:#ff6501;
+  color:#fff;
+}
+.software-num{
+  position:absolute;
+  top:15px;
+  right:0;
+  background:#e9e9e9;
+  color:#555;
+  display:inline-block;
+  padding:3px 8px;
 }
 .software-left-bottom{
-  background-color:rgba(255,173,51,0.1);
   z-index: 999;
   position:absolute;
   width:100%;
@@ -165,23 +223,70 @@
 }
 .local-install{
   position:absolute;
-  top: 80px;
+  top: 0;
   right:0;
   bottom:0;
-  width:648px;
+  width:635px;
   overflow-y:auto;
 }
 .software-content{
-  height:371px;
+  margin:0 15px 15px;
+  height:385px;
+  background:#fff;
   overflow-y:auto;
-  padding-right: 15px;
+}
+.software-nav{
+  position:absolute;
+  right:15px;
+  top:0;
+  border-color: #fff;
+}
+.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
+  border-color: #fff;
+}
+.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
+  border-color: #fff;
+  background:#fff;
+}
+.nav-link{
+  padding:13px 25px;
+}
+.iconbg{
+  display:block;
+  width:30px;
+  padding:10px 0;
+  margin:0 0 5px 9px;
+  text-align: center;
+}
+.iconbg-purple{
+  background:#8a7bfd;
+  color:#fff;
+}
+.iconbg-green{
+  background:#0fb890;
+  color:#fff;
+}
+.software-content .tab-pane{
+  margin:0 15px;
 }
 .details{
-  padding:15px 0;
-  border-bottom: 1px dotted #ccc;
+  background:#fbf6f3;
+  padding:15px;
+  border: 2px solid #fff;
+  border-radius: 3px;
+  margin:0 0 15px;
+  color:#888;
+  font-size: 14px;
+}
+.details-title{
+  width:72%;
+  font-size: 16px;
+  color:#333;
 }
-.details:hover{
-  border-bottom:1px solid #ff9900;
+.details .w-25{
+  font-size: 16px;
+  font-weight: bold;
+  color:#333;
 }
 .local-software-content{
   height:364px;
@@ -196,23 +301,24 @@
 }
 
 .bolangbanner {
-  bottom: 0;
+  top: 98px;
   height: 100px;
   position: absolute;
-  width: 100%;
-  z-index:-1;
+  width: 868px;
+  z-index:1;
+  overflow:hidden;
 }
 #banner_bolang_bg_1{
   position: absolute;
   height:85px;
-  background: url(wave1.png) repeat-x;
+  background: url(wave01.png) repeat-x;
   width:300%;
   bottom:0;
 }
 #banner_bolang_bg_2{
   position: absolute;
   height:100px;
-  background: url(wave2.png) repeat-x;
+  background: url(wave02.png) repeat-x;
   width:300%;
   top:0;
 }
@@ -223,26 +329,74 @@
   color:#333;
 }
 .downloaded{
-  border: 1px solid #dee2e6;
-  background:#fefaf9;
-  border-radius: 7px;
+  background:#fbf6f3;
+  border-radius: 3px;
   padding:10px;
-  margin: 15px 0;
+  font-size: 14px;
+  border:2px solid #fbf6f3;
+  margin:10px 0 10px 0;
+}
+.downloaded:hover{
+  border:2px solid rgba(255,101,5,0.2);
+}
+.progress-content .float-right{
+  font-size: 16px;
+}
+.progress-width{
+  width:85%;
 }
 .dropdown-wrap{
   min-width: 0;
 }
+.btn-white {
+  color: #333;
+  background-color: #fff;
+  border-color: #ddd;
+}
+
+.btn-orange {
+  color: #fff;
+  background-color: #ff6501;
+  border-color: #ff6501;
+}
+.btn-orange:hover {
+  color: #fff;
+  background-color: #e55a00;
+  border-color: #e55a00;
+}
+
+.btn-orange:focus, .btn-orange.focus {
+  box-shadow: 0 0 0 0.2rem rgba(45, 174, 191, 0.5);
+}
+
+.btn-orange.disabled, .btn-orange:disabled {
+  color: #fff;
+  background-color: #e55a00;
+  border-color: #e55a00;
+}
+
+.btn-orange:not(:disabled):not(.disabled):active, .btn-orange:not(:disabled):not(.disabled).active,
+.show > .btn-orange.dropdown-toggle {
+  color: #fff;
+  background-color: #e55a00;
+  border-color: #e55a00;
+}
+
+.btn-orange:not(:disabled):not(.disabled):active:focus, .btn-orange:not(:disabled):not(.disabled).active:focus,
+.show > .btn-orange.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(45, 174, 191, 0.5);
+}
 
 .btn-blue {
   color: #fff;
-  background-color: #2daebf;
-  border-color: #2daebf;
+  background-color: #14a5e8;
+  border-color: #14a5e8;
 }
 
 .btn-blue:hover {
   color: #fff;
-  background-color: #219aaa;
-  border-color: #219aaa;
+  background-color: #0e90cc;
+  border-color: #0e90cc;
 }
 
 .btn-blue:focus, .btn-blue.focus {
@@ -251,15 +405,15 @@
 
 .btn-blue.disabled, .btn-blue:disabled {
   color: #fff;
-  background-color: #2daebf;
-  border-color: #2daebf;
+  background-color: #0e90cc;
+  border-color: #0e90cc;
 }
 
 .btn-blue:not(:disabled):not(.disabled):active, .btn-blue:not(:disabled):not(.disabled).active,
 .show > .btn-blue.dropdown-toggle {
   color: #fff;
-  background-color: #219aaa;
-  border-color: #219aaa;
+  background-color: #0e90cc;
+  border-color: #0e90cc;
 }
 
 .btn-blue:not(:disabled):not(.disabled):active:focus, .btn-blue:not(:disabled):not(.disabled).active:focus,
@@ -273,4 +427,8 @@
 
 .modal-dialog{
   margin: 3rem auto !important;
+}
+.modal-body{
+  height:410px;
+  overflow-y:auto;
 }

js/global.js

@@ -2,7 +2,7 @@ function waveloop1(){
   $("#banner_bolang_bg_1").css({"left":"-236px"}).animate({"left":"-1233px"},25000,'linear',waveloop1);
 }
 function waveloop2(){
-  $("#banner_bolang_bg_2").css({"left":"0px"}).animate({"left":"-1009px"},60000,'linear',waveloop2);
+  $("#banner_bolang_bg_2").css({"left":"-25px"}).animate({"left":"-1009px"},60000,'linear',waveloop2);
 }
 waveloop1();
 waveloop2();

software-details.html

@@ -11,35 +11,62 @@
   </head>
   <body>
     <div class="container container-width border rounded mt-5 pl-0 pr-0">
-      <div class="media p-3 pb-2 header border-bottom shadow-sm">
-        <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 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">
+            <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>
+                <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>
+                </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">
-                      <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+                    <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 border-top pt-2 mt-2">
-                  <div class="pb-2"><span class="float-right mt-1"><a href="#"><i class="fas fa-times text-danger"></i></a></span>公路造价（增值税）专业版</div>
-                  <button type="button" class="btn btn-primary btn-blue btn-sm btn-lg btn-block">安装软件</button>
+                <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>
-            <a href="#"></a>
+            <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>纵横启动器</h5>
+          <h5>纵横启动器 <span class="version-name">版本：V30.01</span></h5>
         </div>
       </div>
-      <div class="software-wrapscroll">
+      <div class="software-wrap mb-2 ml-3 mr-3 software-wrapscroll">
         <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="广东公路造价">
@@ -50,88 +77,48 @@
           </div>
         </div>
         <div class="software-detail pt-3">
-          <ul class="nav nav-tabs pl-3" id="myTab" role="tablist">
+          <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">下载软件</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"><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">软件详情</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"><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 pl-3" id="home" role="tabpanel" aria-labelledby="home-tab">
+            <div class="tab-pane fade show active pt-3" id="home" role="tabpanel" aria-labelledby="home-tab">
               <div class="details">
-                <h5 class="w-25 d-inline-block">专业版</h5>
+                <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="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
+                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
               </div>
               <div class="details">
-                <h5 class="w-25 d-inline-block">标准版</h5>
+                <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="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
+                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
               </div>
               <div class="details">
-                <h5 class="w-25 d-inline-block">专业版</h5>
+                <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="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
+                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
               </div>
               <div class="details">
-                <h5 class="w-25 d-inline-block">标准版</h5>
+                <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="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
+                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
               </div>
               <div class="details">
-                <h5 class="w-25 d-inline-block">专业版</h5>
+                <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="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
-              </div>
-              <div class="details">
-                <h5 class="w-25 d-inline-block">标准版</h5>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
-              </div>
-              <div class="details">
-                <h5 class="w-25 d-inline-block">专业版</h5>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
-              </div>
-              <div class="details">
-                <h5 class="w-25 d-inline-block">标准版</h5>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
-              </div>
-              <div class="details">
-                <h5 class="w-25 d-inline-block">专业版</h5>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
-              </div>
-              <div class="details">
-                <h5 class="w-25 d-inline-block">标准版</h5>
-                <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                <div class="float-right">
-                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
-                </div>
+                <div class="">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
               </div>
             </div>
-            <div class="tab-pane fade pt-3 pl-3 pr-3" id="details" role="tabpanel" aria-labelledby="profile-tab">
+            <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>
@@ -144,12 +131,6 @@
           </div>
         </div>
       </div>
-      <div class="bolangbanner">
-        <div id="banner_bolang_bg_1" style="left: -434.722px;"></div>
-        <div id="banner_bolang_bg_2" style="left: -336.283px;"></div>
-      </div>
-      <!--[if lt IE 7]><style>.bolangbanner{display:none}</style><![endif]-->
-      <div class="bg"></div>
     </div>
     
 

software-index.html

@@ -10,9 +10,8 @@
     <title>启动器</title>
   </head>
   <body>
-    <!-- style="background: rgba(216,76,19,0.1);" -->
   	<div class="container container-width border rounded mt-5 pl-0 pr-0">
-  		<div class="media pl-3 pr-3 pb-2 pt-3 header shadow-sm">
+      <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">
@@ -22,9 +21,13 @@
               </div>
               <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
                 <div class="downloading">
-                  <div class="pb-2 border-bottom"><span class="float-right">1年</span><h4>SC-0001</h4></div>
-                  <div class="pt-3 pb-2"><div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm">启动</button></div>纵横公路工程造价管理系统 专业版</div>
-                  <div class="pt-3 pb-2"><div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm">下载</button></div>纵横公路养护造价管理系统 广东养护专业版</div>
+                  <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>
                 </div>
               </div>
             </div>
@@ -33,53 +36,65 @@
                 <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"><!--  style="display:none;" -->
-                  <div class="pb-2"><span class= style="display:none;" style="display:none;""float-right">63.5MB</span>公路造价（增值税）专业版</div>
+                <div class="downloaded">
+                  <div class="pb-2"><span class="float-right">63.5MB</span>公路造价（增值税）专业版</div>
                   <div class="pb-2">
-                    <div class="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="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 mt-1"><a href="#"><i class="fas fa-times text-danger"></i></a></span>公路造价（增值税）专业版</div>
-                  <button type="button" class="btn btn-primary btn-blue btn-sm btn-lg btn-block">安装软件</button>
+                  <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 class="float-left mt-1 mr-3"><a href="#" class="colorblack"><i class="fas fa-minus"></i></a></div>
-            <!-- 开始和暂停按钮 <i class="far fa-pause-circle"></i><i class="far fa-play-circle"></i> -->
             <div class="float-right mt-1"><a href="#" class="colorblack"><i class="fas fa-times"></i></a></div>
           </div>
-          <h5>纵横启动器</h5>
+          <h5>纵横启动器 <span class="version-name">版本：V30.01</span></h5>
         </div>
       </div>
-      <div class="software-wrap">
-        <div class="software-left border-right border-top">
+      <div class="software-wrap mb-2 ml-3 mr-3">
+        <div class="software-left">
           <div class="local-software">
-            <div class="software media p-3 active">
+            <div class="software media active">
               <img class="mr-2" src="images/product01.png" width="25" height="25" alt="公路造价（增值税）">
               <div class="media-body">
-                <div class="mt-0 mb-1"><a href="#">公路造价（增值税）</a></div>
+                <div class="mt-1 mb-1"><a href="#">公路造价（增值税）</a></div>
+                <span class="software-num">4</span>
               </div>
             </div>
-            <div class="software media p-3">
+            <div class="software media">
               <img class="mr-2" src="images/product02.png" width="25" height="25" alt="公路造价（增值税）">
               <div class="media-body">
-                <div class="mt-0 mb-1"><a href="#">广东公路造价</a></div>
+                <div class="mt-1 mb-1"><a href="#">广东公路造价（增值税）</a></div>
+                <span class="software-num">2</span>
               </div>
             </div>
-            <div class="software media p-3">
-              <img class="mr-2" src="images/logo.jpg" width="25" height="25" alt="未分类软件">
+            <div class="software media">
+              <img class="mr-2" src="images/fenlei.png" width="25" height="25" alt="未分类软件">
               <div class="media-body">
-                <div class="mt-0 mb-1"><a href="#">未分类软件</a></div>
+                <div class="mt-1 mb-1"><a href="#">未分类软件</a></div>
+                <span class="software-num">8</span>
               </div>
             </div>
           </div>
-          <div class="software-left-bottom border-top">
+          <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-primary btn-blue btn-sm">下载软件</a></div>
-              <div class="p-2 flex-fill bd-highlight dropup"><button style="width:100%;" type="button" class="btn btn-primary btn-blue btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">添加软件</button>
+              <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="dropdown-menu dropdown-wrap">
                   <a class="dropdown-item" href="softwrae-obtain.html">自动获取</a>
                   <a class="dropdown-item" href="software-index.html">手动添加</a>
@@ -89,59 +104,65 @@
           </div>
         </div>
         <div class="local-install">
-          <div class="media pl-3">
-            <img class="mr-3" src="images/product01.png" width="50" height="50" alt="广东公路造价">
-            <div class="media-body">
-              <h5 class="mt-0 mb-1">公路造价（增值税）</h5>
-              纵横公路工程造价管理系统
+          <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="广东公路造价">
+              <div class="media-body">
+                <h5 class="mt-0 mb-1">公路造价（增值税）</h5>
+                纵横公路工程造价管理系统
+              </div>
             </div>
           </div>
-          <div class="mt-4">
-            <ul class="nav nav-tabs pl-3" id="myTab" role="tablist">
+          <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">启动软件</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"><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">软件详情</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"><i class="fas fa-info"></i></span>软件详情</a>
               </li>
             </ul>
-            <div class="tab-content local-software-content" id="myTabContent">
-              <div class="tab-pane fade show active pt-3 pl-3" id="home" role="tabpanel" aria-labelledby="home-tab">
+            <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">
-                  <h5>广东公路造价编审系统(标准化2011)专业版 9S(营改增)</h5>
-                  <div><b>9.1.0.411</b></div>
-                  <div class="float-right">
-                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
-                  </div>
-                  <div>E:\Program Files (x86)\纵横软件\广东公路造价编审系统(标准化2011)专业版 9S(营改增)</div>
+                  <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">
-                  <h5 class="w-25 d-inline-block">专业版</h5>
-                  <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                  <div class="float-right">
-                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
-                    <button type="button" class="btn btn-success btn-sm d-inline-block" data-toggle="modal" data-target="#Modal">新版本</button>
-                  </div>
-                  <div>D:\Program Files (x86)\纵横软件</div>
+                  <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">
-                  <h5 class="w-25 d-inline-block">专业版</h5>
-                  <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                  <div class="float-right">
-                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
-                  </div>
-                  <div>D:\Program Files (x86)\纵横软件</div>
+                  <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">
-                  <h5 class="w-25 d-inline-block">专业版</h5>
-                  <div class="w-50 d-inline-block">锁号：SC-Z****</div>
-                  <div class="float-right">
-                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
-                  </div>
-                  <div>D:\Program Files (x86)\纵横软件</div>
+                  <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>
-              <div class="tab-pane fade pt-3 pl-3 pr-3" id="details" role="tabpanel" aria-labelledby="profile-tab">
+              <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>
@@ -155,12 +176,6 @@
           </div>
         </div>
       </div>
-      <div class="bolangbanner">
-        <div id="banner_bolang_bg_1" style="left: -434.722px;"></div>
-        <div id="banner_bolang_bg_2" style="left: -336.283px;"></div>
-      </div>
-      <!--[if lt IE 7]><style>.bolangbanner{display:none}</style><![endif]-->
-      <div class="bg"></div>
   	</div>
 
     <div class="modal" tabindex="-1" role="dialog" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
@@ -173,12 +188,14 @@
             </button>
           </div>
           <div class="modal-body">
-            <p><b>当前版本：</b>9.1.0.411  |  <b>升级版本：</b>9.2.0.411</p>
+            <p>当前版本：<b>9.1.0.411</b>&nbsp;&nbsp;|&nbsp;&nbsp;升级版本：<b>9.2.0.411</b></p>
+            <p><strong>新版功能</strong></p><p><strong> 一、文件类</strong></p><p>1.新增：根据内政发[2011]149号，新增“内蒙古车船税标准(2011)”。</p><p>2.新增：编办说明文档中新增“财税[2018]32号”。</p><p>3.新增：山西省公路工程标准工程量清单(2016)。</p>
+            <p>当前版本：<b>9.1.0.411</b>&nbsp;&nbsp;|&nbsp;&nbsp;升级版本：<b>9.2.0.411</b></p>
             <p><strong>新版功能</strong></p><p><strong> 一、文件类</strong></p><p>1.新增：根据内政发[2011]149号，新增“内蒙古车船税标准(2011)”。</p><p>2.新增：编办说明文档中新增“财税[2018]32号”。</p><p>3.新增：山西省公路工程标准工程量清单(2016)。</p>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-primary">下载更新</button>
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">忽略该版本</button>
+            <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>

software-list.html

@@ -11,24 +11,75 @@
   </head>
   <body>
   	<div class="container container-width border rounded mt-5 pl-0 pr-0">
-  		<div class="media p-3 header border-bottom shadow-sm">
+      <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">
-          <h5>纵横启动器</h5>
+          <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>
+                </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>
+                    </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 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 pt-4 pb-2">
+      <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="software-body float-left">
-                  <h5 class="software-title mb-1">公路造价（增值税）</h5>
-                  <div>纵横公路工程造价管理系统</div>
+                <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 class="float-left">版本号：9.1.0.411<br>更新时间：2018-04-27</div>
-                <div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm mt-2">详情</button></div>
               </div>
             </div>
           </a>
@@ -38,12 +89,14 @@
             <div class="media">
               <img class="mr-3" src="images/product02.png" width="40" height="40" alt="广东公路造价">
               <div class="media-body">
-                <div class="software-body float-left">
-                  <h5 class="software-title mb-1">广东公路造价</h5>
-                  <div>广东公路造价编审软件(标准化2011)</div>
+                <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 class="float-left">版本号：9.1.0.411<br>更新时间：2018-04-27</div>
-                <div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm mt-2">详情</button></div>
               </div>
             </div>
           </a>
@@ -53,12 +106,14 @@
             <div class="media">
               <img class="mr-3" src="images/product03.png" width="40" height="40" alt="计量支付结算决算">
               <div class="media-body">
-                <div class="software-body float-left">
-                  <h5 class="software-title mb-1">计量支付结算决算</h5>
-                  <div>纵横工程计量支付结算决算一体化软件</div>
+                <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 class="float-left">版本号：3.1.7.2205<br>更新时间：2018-05-29</div>
-                <div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm mt-2">详情</button></div>
               </div>
             </div>
           </a>
@@ -68,12 +123,14 @@
             <div class="media">
               <img class="mr-3" src="images/product03.png" width="40" height="40" alt="验工计价成本分析">
               <div class="media-body">
-                <div class="software-body float-left">
-                  <h5 class="software-title mb-1">验工计价成本分析</h5>
-                  <div>纵横施工企业验工计价成本分析软件</div>
+                <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 class="float-left">版本号：3.1.7.2205<br>更新时间：2018-05-29</div>
-                <div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm mt-2">详情</button></div>
               </div>
             </div>
           </a>
@@ -83,12 +140,14 @@
             <div class="media">
               <img class="mr-3" src="images/product04.png" width="40" height="40" alt="材料调差（增值税）">
               <div class="media-body">
-                <div class="software-body float-left">
-                  <h5 class="software-title mb-1">材料调差（增值税）</h5>
-                  <div>纵横公路材料调差软件</div>
+                <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 class="float-left">版本号：9.1.0.411<br>更新时间：2018-04-27</div>
-                <div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm mt-2">详情</button></div>
               </div>
             </div>
           </a>
@@ -98,12 +157,14 @@
             <div class="media">
               <img class="mr-3" src="images/product05.png" width="40" height="40" alt="养护造价（增值税）">
               <div class="media-body">
-                <div class="software-body float-left">
-                  <h5 class="software-title mb-1">养护造价（增值税）</h5>
-                  <div>纵横公路养护造价管理系统</div>
+                <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 class="float-left">版本号：9.0.7.2002<br>更新时间：2018-04-16</div>
-                <div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm mt-2">详情</button></div>
               </div>
             </div>
           </a>
@@ -113,12 +174,14 @@
             <div class="media">
               <img class="mr-3" src="images/product01.png" width="40" height="40" alt="固化清单">
               <div class="media-body">
-                <div class="software-body float-left">
-                  <h5 class="software-title mb-1">固化清单</h5>
-                  <div>纵横公路固化清单软件</div>
+                <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 class="float-left">版本号：9.1.0.411<br>更新时间：2018-04-27</div>
-                <div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm mt-2">详情</button></div>
               </div>
             </div>
           </a>
@@ -128,23 +191,19 @@
             <div class="media">
               <img class="mr-3" src="images/product06.png" width="40" height="40" alt="公路算量">
               <div class="media-body">
-                <div class="software-body float-left">
-                  <h5 class="software-title mb-1">公路算量</h5>
-                  <div>纵横公路工程算量软件</div>
+                <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 class="float-left">版本号：3.2.2.1105<br>更新时间：2018-01-03</div>
-                <div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm mt-2">详情</button></div>
               </div>
             </div>
           </a>
         </div>
       </div>
-      <div class="bolangbanner">
-        <div id="banner_bolang_bg_1" style="left: -434.722px;"></div>
-        <div id="banner_bolang_bg_2" style="left: -336.283px;"></div>
-      </div>
-      <!--[if lt IE 7]><style>.bolangbanner{display:none}</style><![endif]-->
-      <div class="bg"></div>
   	</div>
     
 

softwrae-obtain.html

@@ -11,87 +11,132 @@
   </head>
   <body>
     <div class="container container-width border rounded mt-5 pl-0 pr-0">
-      <div class="media p-3 header border-bottom shadow-sm">
+      <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">
-          <h5>纵横启动器</h5>
+          <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>
+                </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>
+                    </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 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 pt-4 pb-2">
-        <div class="obtian-top">
+      <div class="software-wrap mb-2 ml-3 mr-3">
+        <div class="obtian-top clearfix">
           <div class="float-right">
             <a href="software-index.html" class="btn btn-primary btn-blue btn-sm d-inline-block mt-3">开始使用软件</a>
           </div>
           <h5><span class="text-success">检索完成</span></h5>
-          <div>努力检索到了5款软件</div>
+          <div>努力检索到了 <b>5</b> 款软件</div>
         </div>
-        <div class="software-obtian">
-          <div class="media">
-            <img class="mr-3" src="images/product01.png" width="40" height="40" alt="公路造价（增值税）">
-            <div class="media-body">
-              <div class="software-body">
-                <h5 class="software-title mb-1">公路造价（增值税）</h5>
-                <div>纵横公路工程造价管理系统</div>
+        <div class="obtian-list">
+          <div class="software-list">
+            <div class="media">
+              <img class="mr-3" src="images/product01.png" width="40" height="40" alt="公路造价（增值税）">
+              <div class="media-body">
+                <div class="software-body float-left">
+                  <h5 class="software-title mb-1">公路造价（增值税）<b class="software-version ml-3">网络版</b><span class="software-version ml-3">9.1.0.411</span></h5>
+                  <div class="software-info">纵横公路工程造价管理系统</div>
+                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
+                </div>
               </div>
-              <div class="">版本号：9.1.0.411<br>E:\Program Files (x86)\纵横软件\纵横公路工程算量软件(专业版)</div>
             </div>
           </div>
-        </div>
-        <div class="software-obtian">
-          <div class="media">
-            <img class="mr-3" src="images/product02.png" width="40" height="40" alt="广东公路造价">
-            <div class="media-body">
-              <div class="software-body">
-                <h5 class="software-title mb-1">广东公路造价</h5>
-                <div>广东公路造价编审软件(标准化2011)</div>
+          <div class="software-list">
+            <div class="media">
+              <img class="mr-3" src="images/product02.png" width="40" height="40" alt="广东公路造价">
+              <div class="media-body">
+                <div class="software-body float-left">
+                  <h5 class="software-title mb-1">广东公路造价<b class="software-version ml-3">专业版</b><span class="software-version ml-3">9.1.0.411</span></h5>
+                  <div class="software-info">广东公路造价编审软件(标准化2011)</div>
+                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\广东公路造价编审系统(标准化2011)网络版(07)</div>
+                </div>
               </div>
-              <div class="">版本号：9.1.0.411<br>E:\Program Files (x86)\纵横软件\广东公路造价编审系统(标准化2011)网络版(07)</div>
             </div>
           </div>
-        </div>
-        <div class="software-obtian">
-          <div class="media">
-            <img class="mr-3" src="images/product03.png" width="40" height="40" alt="计量支付结算决算">
-            <div class="media-body">
-              <div class="software-body">
-                <h5 class="software-title mb-1">计量支付结算决算</h5>
-                <div>纵横工程计量支付结算决算一体化软件</div>
+          <div class="software-list">
+            <div class="media">
+              <img class="mr-3" src="images/product03.png" width="40" height="40" alt="计量支付结算决算">
+              <div class="media-body">
+                <div class="software-body float-left">
+                  <h5 class="software-title mb-1">计量支付结算决算<b class="software-version ml-3">标准版</b><span class="software-version ml-3">3.1.7.2205</span></h5>
+                  <div class="software-info">纵横工程计量支付结算决算一体化软件</div>
+                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横工程计量支付结算决算一体化软件</div>
+                </div>
               </div>
-              <div class="">版本号：3.1.7.2205<br>E:\Program Files (x86)\纵横软件\纵横工程计量支付结算决算一体化软件</div>
             </div>
           </div>
-        </div>
-        <div class="software-obtian">
-          <div class="media">
-            <img class="mr-3" src="images/product03.png" width="40" height="40" alt="验工计价成本分析">
-            <div class="media-body">
-              <div class="software-body">
-                <h5 class="software-title mb-1">验工计价成本分析</h5>
-                <div>纵横施工企业验工计价成本分析软件</div>
+          <div class="software-list">
+            <div class="media">
+              <img class="mr-3" src="images/product03.png" width="40" height="40" alt="验工计价成本分析">
+              <div class="media-body">
+                 <div class="software-body float-left">
+                  <h5 class="software-title mb-1">验工计价成本分析<b class="software-version ml-3">招投标版</b><span class="software-version ml-3">3.1.7.2205</span></h5>
+                  <div class="software-info">纵横施工企业验工计价成本分析软件</div>
+                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横施工企业验工计价成本分析软件</div>
+                </div>
               </div>
-              <div class="">版本号：3.1.7.2205<br>E:\Program Files (x86)\纵横软件\纵横施工企业验工计价成本分析软件</div>
             </div>
           </div>
-        </div>
-        <div class="software-obtian">
-          <div class="media">
-            <img class="mr-3" src="images/product04.png" width="40" height="40" alt="材料调差（增值税）">
-            <div class="media-body">
-              <div class="software-body">
-                <h5 class="software-title mb-1">材料调差（增值税）</h5>
-                <div>纵横公路材料调差软件</div>
+          <div class="software-list">
+            <div class="media">
+              <img class="mr-3" src="images/product04.png" width="40" height="40" alt="材料调差（增值税）">
+              <div class="media-body">
+                <div class="software-body float-left">
+                  <h5 class="software-title mb-1">材料调差（增值税）<b class="software-version ml-3">估概预算版</b><span class="software-version ml-3">9.1.0.411</span></h5>
+                  <div class="software-info">纵横公路材料调差软件</div>
+                  <div class="software-stitle">E:\Program Files (x86)\纵横软件\纵横公路材料调差软件</div>
+                </div>
               </div>
-              <div class="">版本号：9.1.0.411<br>E:\Program Files (x86)\纵横软件\纵横公路材料调差软件</div>
             </div>
           </div>
         </div>
       </div>
-      <div class="bolangbanner">
-        <div id="banner_bolang_bg_1" style="left: -434.722px;"></div>
-        <div id="banner_bolang_bg_2" style="left: -336.283px;"></div>
-      </div>
-      <!--[if lt IE 7]><style>.bolangbanner{display:none}</style><![endif]-->
-      <div class="bg"></div>
     </div>
     
 

softwrae-welcome.html

@@ -10,53 +10,153 @@
     <title>启动器</title>
   </head>
   <body>
-  	<div class="container container-width border rounded mt-5 pl-0 pr-0">
-  		<div class="media p-3 header border-bottom shadow-sm">
+  	<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">
-          <h5>纵横启动器</h5>
+          <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>
+                </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>
+                    </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 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 p-3">
-        <div style="margin-top: 80px;">
+      <div class="software-wrap mb-2 ml-3 mr-3">
+        <div class="software-down">
           <div class="row">
             <div class="col"></div>
             <div class="col">
-              <a href="software-list.html" class="btn btn-primary btn-blue btn-block">下载软件</a>
+              <a href="software-list.html" class="btn btn-orange btn-block"><i class="fas fa-download mr-2"></i>下载软件</a>
             </div>
             <div class="col">
-              <div class="btn-group dropup" style="display: block;">
-                <button type="button" class="btn btn-primary btn-blue btn-block 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>
-                </div>
-              </div>
+              <a href="softwrae-obtain.html" class="btn btn-blue btn-block"><i class="fas fa-plus mr-2"></i>添加已安装软件</a>
             </div>
             <div class="col"></div>
           </div>
         </div>
-      </div>
-      <div class="lock-detail border-top">
-        <div class="info-title pt-3 pl-3 pr-3 border-bottom">
-          <p>检测到你的电脑上插上软件锁<b class="pl-2 pr-2">SC-000001</b>有以下产品可下载</p>
+        <div class="lock-detail clearfix">
+          <div class="info-title pt-1 pb-3">
+            <p>检测到你的电脑上插上软件锁<b class="pl-2 pr-2">SC-000001</b>有以下产品可下载</p>
+          </div>
+          <div class="info-list 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="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>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div class="software-list">
+              <a href="#">
+                <div class="media">
+                  <img class="mr-3" src="images/product01.png" width="30" height="30" alt="广东公路造价">
+                  <div class="media-body">
+                    <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>GDYH-****</div>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div class="software-list">
+              <a href="#">
+                <div class="media">
+                  <img class="mr-3" src="images/product03.png" width="30" height="30" alt="广东公路造价">
+                  <div class="media-body">
+                    <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>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div class="software-list">
+              <a href="#">
+                <div class="media">
+                  <img class="mr-3" src="images/product04.png" width="30" height="30" alt="广东公路造价">
+                  <div class="media-body">
+                    <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>GDYH-****</div>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <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="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>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </div>
+          </div>
         </div>
-        <div class="info-list clearfix">
-          <ul>
-            <li><div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm">点击下载</button></div>纵横公路工程造价管理系统 专业版  SC-Z****</li>
-            <li><div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm">点击下载</button></div>纵横公路养护造价管理系统 广东养护专业版  GDYH-****</li>
-            <li><div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm">点击下载</button></div>纵横公路工程造价管理系统 专业版  SC-Z****</li>
-            <li><div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm">点击下载</button></div>纵横公路养护造价管理系统 广东养护专业版  GDYH-****</li>
-            <li><div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm">点击下载</button></div>纵横公路工程造价管理系统 专业版  SC-Z****</li>
-          </ul>
+        <div class="bolangbanner">
+          <div id="banner_bolang_bg_1" style="left: -434.722px;"></div>
+          <div id="banner_bolang_bg_2" style="left: -336.283px;"></div>
         </div>
+        <!--[if lt IE 7]><style>.bolangbanner{display:none}</style><![endif]-->
       </div>
-      <div class="bolangbanner">
-        <div id="banner_bolang_bg_1" style="left: -434.722px;"></div>
-        <div id="banner_bolang_bg_2" style="left: -336.283px;"></div>
-      </div>
-      <!--[if lt IE 7]><style>.bolangbanner{display:none}</style><![endif]-->
-      <div class="bg"></div>
   	</div>