Home Explore Help
Sign In
S.H.I.E.L.D.
/
Launcher
2
0
Fork 0
Files Pull Requests 0 Wiki
Browse Source

修改颜色和修改软件列表页

outaozhen 7 years ago
parent
a1c2875004
commit
2932932980
6 changed files with 146 additions and 53 deletions
Split View Show Diff Stats
  1. 63 11
      css/global.css
  2. BIN
      css/gradient.jpg
  3. 8 8
      index.html
  4. 12 12
      software-details.html
  5. 13 12
      software-install.html
  6. 50 10
      software-list.html

+ 63 - 11
css/global.css
View File 

@@ -8,6 +8,9 @@
 
   overflow: hidden;
 
   /*background:url(bg.jpg);*/
 
 }
 
+.border{
 
+  border-color: rgba(255,101,1,0.8) !important;
 
+}
 
 .bg{
 
   position:absolute;
 
   top:0;
 
@@ -15,7 +18,8 @@
 
   width:900px;
 
   height:564px;
 
   z-index: -2;
 
-  background:url(gradient.jpg);
 
+  background:url(bg.jpg);
 
+  /*background:url(gradient.jpg);*/
 
 }
 
 ::-webkit-scrollbar-track
 
 {
 
@@ -27,14 +31,19 @@
 
   height:5px;
 
 }
 
 ::-webkit-scrollbar:hover{
 
-  background:#f7f7f7
 
+  background:#f7f7f7;
 
 }
 
 ::-webkit-scrollbar-thumb
 
 {
 
-  background-color: #e0e0e0;
 
+  background-color: #f0f0f0;
 
 }
 
 .header{
 
-  background-color:rgba(255,255,255,0.5);
 
+  /*background-color:rgba(255,255,255,0.5);*/
 
+  background-color:rgba(255,101,1,0.8);
 
+  color:#fff;
 
+}
 
+.header i{
 
+  color:#fff;
 
 }
 
 .lock-detail{
 
   position:absolute;
 
@@ -44,6 +53,7 @@
 
   width:100%;
 
   max-height:250px;
 
   overflow-y:auto;
 
+  background-color:rgba(251,231,216,0.5);
 
 }
 
 .info-list{
 
   width:100%;
 
@@ -59,9 +69,6 @@
 
   list-style-type: none;
 
   padding:10px 15px;
 
 }
 
-/*.info-list ul li:last-child{
 
-  border-bottom: none;
 
-}*/
 
 .info-list ul li:hover{
 
   border-bottom: 1px solid #ff6501;
 
 }
 
@@ -72,21 +79,30 @@
 
 }
 
 .software-list{
 
   float:left;
 
-  width:390px;
 
+  width:835px;
 
   background:#fefaf9;
 
   border:1px solid #ddd;
 
   border-radius: 7px;
 
   padding:15px;
 
-  margin: 10px 25px 25px 30px;
 
+  margin: 5px 25px 15px 30px;
 
 }
 
 .software-list:hover{
 
   background:#fdf5f2;
 
   border:1px solid #ff6501;
 
 }
 
-.software-list a{}
 
+.software-list a{
 
+  color:#333;
 
+}
 
 .software-list a:hover{
 
   text-decoration: none;
 
 }
 
+.software-title{
 
+  font-size: 16px;
 
+  font-weight: bold;
 
+}
 
+.software-body{
 
+  width:50%;
 
+}
 
 .detail-download{
 
   min-width:400px;
 
   max-height: 450px; 
@@ -106,6 +122,8 @@
 
   top:0;
 
   left:0;
 
   bottom:50px;
 
+  /*background:#f9f9f9;*/
 
+  background-color: rgba(254,250,249,0.3);
 
   overflow-y:auto;
 
 }
 
 .software:hover{
 
@@ -187,4 +205,38 @@
 
 }
 
 .colorblack:hover{
 
   color:#333;
 
-};
 
+}
 
+
 
+.btn-blue {
 
+  color: #fff;
 
+  background-color: #2daebf;
 
+  border-color: #2daebf;
 
+}
 
+
 
+.btn-blue:hover {
 
+  color: #fff;
 
+  background-color: #219aaa;
 
+  border-color: #219aaa;
 
+}
 
+
 
+.btn-blue:focus, .btn-blue.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(45, 174, 191, 0.5);
 
+}
 
+
 
+.btn-blue.disabled, .btn-blue:disabled {
 
+  color: #fff;
 
+  background-color: #2daebf;
 
+  border-color: #2daebf;
 
+}
 
+
 
+.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;
 
+}
 
+
 
+.btn-blue:not(:disabled):not(.disabled):active:focus, .btn-blue:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-blue.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(45, 174, 191, 0.5);
 
+}

BIN
css/gradient.jpg
View File


+ 8 - 8
index.html
View File 

@@ -10,7 +10,7 @@
 
     <title>启动器</title>
 
   </head>
 
   <body>
 
-  	<div class="container container-width border shadow-sm rounded mt-5 pl-0 pr-0">
 
+  	<div class="container container-width border rounded mt-5 pl-0 pr-0">
 
   		<div class="media p-3 header border-bottom shadow-sm">
 
         <h5 class="mt-1 mr-2"><a href="index.html"><i class="fas fa-th-large"></i></a></h5>
 
         <div class="media-body">
 
@@ -22,10 +22,10 @@
 
           <div class="row">
 
             <div class="col"></div>
 
             <div class="col">
 
-              <a href="software-list.html" class="btn btn-primary btn-block">下载软件</a>
 
+              <a href="software-list.html" class="btn btn-primary btn-blue btn-block">下载软件</a>
 
             </div>
 
             <div class="col">
 
-              <a href="#" class="btn btn-primary btn-block">添加已安装软件</a>
 
+              <a href="#" class="btn btn-primary btn-blue btn-block">添加已安装软件</a>
 
             </div>
 
             <div class="col"></div>
 
           </div>
 
@@ -37,11 +37,11 @@
 
         </div>
 
         <div class="info-list clearfix">
 
           <ul>
 
-            <li><div class="float-right"><button type="button" class="btn btn-primary btn-sm">点击下载</button></div>纵横公路工程造价管理系统 专业版  SC-Z****</li>
 
-            <li><div class="float-right"><button type="button" class="btn btn-primary btn-sm">点击下载</button></div>纵横公路养护造价管理系统 广东养护专业版  GDYH-****</li>
 
-            <li><div class="float-right"><button type="button" class="btn btn-primary btn-sm">点击下载</button></div>纵横公路工程造价管理系统 专业版  SC-Z****</li>
 
-            <li><div class="float-right"><button type="button" class="btn btn-primary btn-sm">点击下载</button></div>纵横公路养护造价管理系统 广东养护专业版  GDYH-****</li>
 
-            <li><div class="float-right"><button type="button" class="btn btn-primary 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>纵横公路工程造价管理系统 专业版  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>
 
       </div>

+ 12 - 12
software-details.html
View File 

@@ -10,7 +10,7 @@
 
     <title>启动器</title>
 
   </head>
 
   <body>
 
-    <div class="container container-width border shadow-sm rounded mt-5 pl-0 pr-0">
 
+    <div class="container container-width 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 href="index.html"><i class="fas fa-th-large"></i></a></h5>
 
         <div class="media-body">
 
@@ -30,7 +30,7 @@
 
                 </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-sm btn-lg btn-block">安装软件</button>
 
+                  <button type="button" class="btn btn-primary btn-blue btn-sm btn-lg btn-block">安装软件</button>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -65,70 +65,70 @@
 
                 <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-sm d-inline-block">下载</button>
 
+                  <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-sm d-inline-block">下载</button>
 
+                  <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-sm d-inline-block">下载</button>
 
+                  <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-sm d-inline-block">下载</button>
 
+                  <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-sm d-inline-block">下载</button>
 
+                  <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-sm d-inline-block">下载</button>
 
+                  <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-sm d-inline-block">下载</button>
 
+                  <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-sm d-inline-block">下载</button>
 
+                  <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-sm d-inline-block">下载</button>
 
+                  <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-sm d-inline-block">下载</button>
 
+                  <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">下载</button>
 
                 </div>
 
               </div>
 
             </div>

+ 13 - 12
software-install.html
View File 

@@ -11,7 +11,7 @@
 
   </head>
 
   <body>
 
     <!-- style="background: rgba(216,76,19,0.1);" -->
 
-  	<div class="container container-width border shadow-sm rounded mt-5 pl-0 pr-0">
 
+  	<div class="container container-width rounded mt-5 pl-0 pr-0">
 
   		<div class="media pl-3 pr-3 pb-2 pt-3 header border-bottom shadow-sm">
 
         <h5 class="mt-1 mr-2"><a href="index.html"><i class="fas fa-th-large"></i></a></h5>
 
         <div class="media-body">
 
@@ -23,8 +23,8 @@
 
               <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-sm">启动</button></div>纵横公路工程造价管理系统 专业版</div>
 
-                  <div class="pt-3 pb-2"><div class="float-right"><button type="button" class="btn btn-primary 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="pt-3 pb-2"><div class="float-right"><button type="button" class="btn btn-primary btn-blue btn-sm">下载</button></div>纵横公路养护造价管理系统 广东养护专业版</div>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -43,11 +43,12 @@
 
                 </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-sm btn-lg btn-block">安装软件</button>
 
+                  <button type="button" class="btn btn-primary btn-blue btn-sm btn-lg btn-block">安装软件</button>
 
                 </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>
 
@@ -71,8 +72,8 @@
 
           </div>
 
           <div class="software-left-bottom">
 
             <div class="d-flex bd-highlight">
 
-              <div class="p-2 flex-fill bd-highlight"><button style="width:100%;" type="button" class="btn btn-primary btn-sm">下载软件</button></div>
 
-              <div class="p-2 flex-fill bd-highlight"><button style="width:100%;" type="button" class="btn btn-primary btn-sm">添加软件</button></div>
 
+              <div class="p-2 flex-fill bd-highlight"><button style="width:100%;" type="button" class="btn btn-primary btn-blue btn-sm">下载软件</button></div>
 
+              <div class="p-2 flex-fill bd-highlight"><button style="width:100%;" type="button" class="btn btn-primary btn-blue btn-sm">添加软件</button></div>
 
             </div>
 
           </div>
 
         </div>
 
@@ -99,7 +100,7 @@
 
                   <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-sm d-inline-block">启动软件</button>
 
+                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
 
                   </div>
 
                   <div>D:\Program Files (x86)\纵横软件</div>
 
                 </div>
 
@@ -107,7 +108,7 @@
 
                   <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-sm d-inline-block">启动软件</button>
 
+                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
 
                   </div>
 
                   <div>D:\Program Files (x86)\纵横软件</div>
 
                 </div>
 
@@ -115,7 +116,7 @@
 
                   <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-sm d-inline-block">启动软件</button>
 
+                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
 
                   </div>
 
                   <div>D:\Program Files (x86)\纵横软件</div>
 
                 </div>
 
@@ -123,7 +124,7 @@
 
                   <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-sm d-inline-block">启动软件</button>
 
+                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
 
                   </div>
 
                   <div>D:\Program Files (x86)\纵横软件</div>
 
                 </div>
 
@@ -131,7 +132,7 @@
 
                   <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-sm d-inline-block">启动软件</button>
 
+                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
 
                   </div>
 
                   <div>D:\Program Files (x86)\纵横软件</div>
 
                 </div>
 
@@ -139,7 +140,7 @@
 
                   <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-sm d-inline-block">启动软件</button>
 
+                    <button type="button" class="btn btn-primary btn-blue btn-sm d-inline-block">启动软件</button>
 
                   </div>
 
                   <div>D:\Program Files (x86)\纵横软件</div>
 
                 </div>

+ 50 - 10
software-list.html
View File 

@@ -10,20 +10,25 @@
 
     <title>启动器</title>
 
   </head>
 
   <body>
 
-  	<div class="container container-width border shadow-sm rounded mt-5 pl-0 pr-0">
 
+  	<div class="container container-width rounded mt-5 pl-0 pr-0">
 
   		<div class="media p-3 header border-bottom shadow-sm">
 
         <h5 class="mt-1 mr-2"><a href="index.html"><i class="fas fa-th-large"></i></a></h5>
 
         <div class="media-body">
 
           <h5>纵横启动器</h5>
 
         </div>
 
       </div>
 
-      <div class="software-wrap software-wrapscroll pt-4">
 
+      <div class="software-wrap software-wrapscroll pt-4 pb-2">
 
         <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">
 
-                <h5 class="mt-2 mb-1">公路造价（增值税）</h5>
 
+                <div class="software-body float-left">
 
+                  <h5 class="software-title mb-1">公路造价（增值税）</h5>
 
+                  <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>
 
@@ -33,7 +38,12 @@
 
             <div class="media">
 
               <img class="mr-3" src="images/product02.png" width="40" height="40" alt="广东公路造价">
 
               <div class="media-body">
 
-                <h5 class="mt-2 mb-1">广东公路造价</h5>
 
+                <div class="software-body float-left">
 
+                  <h5 class="software-title mb-1">广东公路造价</h5>
 
+                  <div>广东公路造价编审软件(标准化2011)</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>
 
@@ -43,7 +53,12 @@
 
             <div class="media">
 
               <img class="mr-3" src="images/product03.png" width="40" height="40" alt="计量支付结算决算">
 
               <div class="media-body">
 
-                <h5 class="mt-2 mb-1">计量支付结算决算</h5>
 
+                <div class="software-body float-left">
 
+                  <h5 class="software-title mb-1">计量支付结算决算</h5>
 
+                  <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>
 
@@ -53,7 +68,12 @@
 
             <div class="media">
 
               <img class="mr-3" src="images/product03.png" width="40" height="40" alt="验工计价成本分析">
 
               <div class="media-body">
 
-                <h5 class="mt-2 mb-1">验工计价成本分析</h5>
 
+                <div class="software-body float-left">
 
+                  <h5 class="software-title mb-1">验工计价成本分析</h5>
 
+                  <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>
 
@@ -63,7 +83,12 @@
 
             <div class="media">
 
               <img class="mr-3" src="images/product04.png" width="40" height="40" alt="材料调差（增值税）">
 
               <div class="media-body">
 
-                <h5 class="mt-2 mb-1">材料调差（增值税）</h5>
 
+                <div class="software-body float-left">
 
+                  <h5 class="software-title mb-1">材料调差（增值税）</h5>
 
+                  <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>
 
@@ -73,7 +98,12 @@
 
             <div class="media">
 
               <img class="mr-3" src="images/product05.png" width="40" height="40" alt="养护造价（增值税）">
 
               <div class="media-body">
 
-                <h5 class="mt-2 mb-1">养护造价（增值税）</h5>
 
+                <div class="software-body float-left">
 
+                  <h5 class="software-title mb-1">养护造价（增值税）</h5>
 
+                  <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>
 
@@ -83,7 +113,12 @@
 
             <div class="media">
 
               <img class="mr-3" src="images/product01.png" width="40" height="40" alt="固化清单">
 
               <div class="media-body">
 
-                <h5 class="mt-2 mb-1">固化清单</h5>
 
+                <div class="software-body float-left">
 
+                  <h5 class="software-title mb-1">固化清单</h5>
 
+                  <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>
 
@@ -93,7 +128,12 @@
 
             <div class="media">
 
               <img class="mr-3" src="images/product06.png" width="40" height="40" alt="公路算量">
 
               <div class="media-body">
 
-                <h5 class="mt-2 mb-1">公路算量</h5>
 
+                <div class="software-body float-left">
 
+                  <h5 class="software-title mb-1">公路算量</h5>
 
+                  <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>