首次提交

css/bootstrap-reboot.css

@@ -0,0 +1,330 @@
+/*!
+ * Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@-ms-viewport {
+  width: device-width;
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+dfn {
+  font-style: italic;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):focus {
+  outline: 0;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.css.map */

css/global.css

@@ -0,0 +1,166 @@
+@charset "utf-8";
+/*样式初始化*/
+.container-width{
+  position:relative;
+  width:900px;
+  height:564px;
+  position:relative;
+  overflow: hidden;
+  background:url(bg.jpg);
+}
+::-webkit-scrollbar-track
+{
+  background-color: #fff;
+}
+::-webkit-scrollbar
+{
+  width: 5px;
+  height:5px;
+}
+::-webkit-scrollbar:hover{
+  background:#f7f7f7
+}
+::-webkit-scrollbar-thumb
+{
+  background-color: #e0e0e0;
+}
+.header{
+  background-color:rgba(255,255,255,0.5);
+}
+.lock-detail{
+  position:absolute;
+  bottom:0;
+  left:0;
+  right:0;
+  width:100%;
+  max-height:250px;
+  overflow-y:auto;
+}
+.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;
+}
+/*.info-list ul li:last-child{
+  border-bottom: none;
+}*/
+.info-list ul li:hover{
+  border-bottom: 1px solid #ff6501;
+}
+.software-wrapscroll{
+  width:100%;
+  height:497px;
+  overflow-y:auto;
+}
+.software-list{
+  float:left;
+  width:380px;
+  margin: 0 30px 45px 25px;
+}
+.detail-download{
+  min-width:400px;
+  max-height: 450px; 
+  padding: 10px 15px;
+  overflow-y:auto;
+}
+.software-left{
+  position: absolute;
+  width:250px;
+  background:#fff;
+  top:56px;
+  bottom:0;
+  left:0;
+}
+.local-software{
+  position:absolute;
+  width:100%;
+  top:0;
+  left:0;
+  bottom:50px;
+  overflow-y:auto;
+}
+.software:hover{
+  background:#FEFAF9;
+}
+.software a{
+  text-decoration: none;
+}
+.software.active{
+  background:#FDF5F2;
+  border-left: 3px solid #ff6501;
+}
+.software.active a{
+  color:#333;
+}
+.software-left-bottom{
+  background:#fff;
+  z-index: 999;
+  position:absolute;
+  width:100%;
+  bottom:0;
+  left:0;
+}
+.local-install{
+  position:absolute;
+  top: 80px;
+  right:0;
+  bottom:0;
+  width:648px;
+  overflow-y:auto;
+}
+.software-content{
+  background:#fff;
+  height:371px;
+  overflow-y:auto;
+  padding-right: 15px;
+}
+.details{
+  padding:15px 0;
+  border-bottom: 1px dotted #ccc;
+}
+.details:hover{
+  border-bottom:1px solid #ff6501;
+}
+.local-software-content{
+  height:364px;
+  background:#fff;
+  overflow-y:auto;
+  padding-right: 15px;
+}
+#dropdownMenuButton{
+  cursor:pointer;
+}
+.dropdown-toggle::after{
+  border:none;
+}
+
+.bolangbanner {
+  bottom: 0;
+  height: 100px;
+  position: absolute;
+  width: 100%;
+  z-index:0;
+}
+#banner_bolang_bg_1{
+  position: absolute;
+  height:85px;
+  background: url(wave1.png) repeat-x;
+  width:300%;
+  bottom:0;
+}
+#banner_bolang_bg_2{
+  position: absolute;
+  height:100px;
+  background: url(wave2.png) repeat-x;
+  width:300%;
+  top:0;
+}

index.html

@@ -0,0 +1,62 @@
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/font-awesome/fontawesome-all.css">
+    <link rel="stylesheet" href="css/global.css">
+    <title>启动器</title>
+  </head>
+  <body>
+  	<div class="container container-width border shadow-sm 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 p-3">
+        <div style="margin-top: 80px;">
+          <div class="row">
+            <div class="col"></div>
+            <div class="col">
+              <a href="software-list.html" class="btn btn-primary btn-block">下载软件</a>
+            </div>
+            <div class="col">
+              <a href="#" class="btn btn-primary btn-block">添加已安装软件</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>
+        <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>
+          </ul>
+        </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>
+    
+
+    <script src="js/jquery-3.3.1.slim.min.js"></script>
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/jquery-1.9.1.min.js"></script> 
+    <script src="js/global.js"></script>
+  </body>
+</html>

js/global.js

@@ -0,0 +1,8 @@
+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);
+}
+waveloop1();
+waveloop2();

software-details.html

@@ -0,0 +1,155 @@
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/font-awesome/fontawesome-all.css">
+    <link rel="stylesheet" href="css/global.css">
+    <title>启动器</title>
+  </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="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">
+          <div class="float-right">
+            <div class="dropdown">
+              <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 ml-2">2</span>
+              </div>
+              <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
+                <div class="downloading">
+                  <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>
+                  </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-sm btn-lg btn-block">安装软件</button>
+                </div>
+              </div>
+            </div>
+            <a href="#"></a>
+          </div>
+          <h5>纵横启动器</h5>
+        </div>
+      </div>
+      <div class="software-wrapscroll">
+        <div class="software-detail-top pt-3 pl-3">
+          <div class="mt-2 pt-1 mr-2 float-left"><a href="software-list.html"><h4><i class="fas fa-angle-left"></i></h4></a></div>
+          <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="software-detail pt-3">
+          <ul class="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>
+            </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>
+            </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="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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </div>
+              </div>
+            </div>
+            <div class="tab-pane fade pt-3" id="details" role="tabpanel" aria-labelledby="profile-tab">
+            </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>
+    
+
+    <script src="js/jquery-3.3.1.slim.min.js"></script>
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/jquery-1.9.1.min.js"></script> 
+    <script src="js/global.js"></script>
+  </body>
+</html>

software-install.html

@@ -0,0 +1,159 @@
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/font-awesome/fontawesome-all.css">
+    <link rel="stylesheet" href="css/global.css">
+    <title>启动器</title>
+  </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="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">
+          <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="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>
+              </div>
+            </div>
+            <div class="dropdown float-right">
+              <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 ml-2">2</span>
+              </div>
+              <div class="dropdown-menu dropdown-menu-right detail-download" aria-labelledby="dropdownMenuButton">
+                <div class="downloading">
+                  <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>
+                  </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-sm btn-lg btn-block">安装软件</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <h5>纵横启动器</h5>
+        </div>
+      </div>
+      <div class="software-wrap">
+        <div class="software-left border-right border-top">
+          <div class="local-software">
+            <div class="software media p-3 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>
+            </div>
+            <div class="software media p-3">
+              <img class="mr-2 border rounded" src="images/product02.png" width="25" height="25" alt="公路造价（增值税）">
+              <div class="media-body">
+                <div class="mt-0 mb-1"><a href="#">广东公路造价</a></div>
+              </div>
+            </div>
+          </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>
+          </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>
+          </div>
+          <div class="mt-4">
+            <ul class="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>
+              </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>
+              </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="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>
+                  </div>
+                  <div>D:\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-sm d-inline-block">启动软件</button>
+                  </div>
+                  <div>D:\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-sm d-inline-block">启动软件</button>
+                  </div>
+                  <div>D:\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-sm d-inline-block">启动软件</button>
+                  </div>
+                  <div>D:\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-sm d-inline-block">启动软件</button>
+                  </div>
+                  <div>D:\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-sm d-inline-block">启动软件</button>
+                  </div>
+                  <div>D:\Program Files (x86)\纵横软件</div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="profile-tab">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  	</div>
+    
+
+    <script src="js/jquery-3.3.1.slim.min.js"></script>
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/global.js"></script>
+  </body>
+</html>

software-list.html

@@ -0,0 +1,102 @@
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/font-awesome/fontawesome-all.css">
+    <link rel="stylesheet" href="css/global.css">
+    <title>启动器</title>
+  </head>
+  <body>
+  	<div class="container container-width border shadow-sm 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-list">
+          <div class="media">
+            <img class="mr-3" src="images/product01.png" width="40" height="40" alt="公路造价（增值税）">
+            <div class="media-body">
+              <h4 class="mt-1 mb-1"><a href="software-details.html">公路造价（增值税）</a></h4>
+              <!-- 颜色：style="background-color: rgba(216,76,19,0.1);" -->
+            </div>
+          </div>
+        </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">
+              <h4 class="mt-1 mb-1"><a href="software-details.html">广东公路造价</a></h4>
+              <!-- 颜色：style="background-color: rgba(240,174,29,0.1);" -->
+            </div>
+          </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">
+              <h4 class="mt-1 mb-1"><a href="software-details.html">计量支付结算决算</a></h4>
+              <!-- 颜色：style="background-color: rgba(173,178,91,0.1);" -->
+            </div>
+          </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">
+              <h4 class="mt-1 mb-1"><a href="software-details.html">验工计价成本分析</a></h4>
+              <!-- 颜色：style="background-color: rgba(173,178,91,0.1);" -->
+            </div>
+          </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">
+              <h4 class="mt-1 mb-1"><a href="software-details.html">材料调差（增值税）</a></h4>
+              <!-- 颜色：style="background-color: rgba(161,41,33,0.1);" -->
+            </div>
+          </div>
+        </div>
+        <div class="software-list">
+          <div class="media">
+            <img class="mr-3" src="images/product05.png" width="40" height="40" alt="养护造价（增值税）">
+            <div class="media-body">
+              <h4 class="mt-1 mb-1"><a href="software-details.html">养护造价（增值税）</a></h4>
+              <!-- 颜色：style="background-color: rgba(48,106,184,0.1);" -->
+            </div>
+          </div>
+        </div>
+        <div class="software-list">
+          <div class="media">
+            <img class="mr-3" src="images/product01.png" width="40" height="40" alt="固化清单">
+            <div class="media-body">
+              <h4 class="mt-1 mb-1"><a href="software-details.html">固化清单</a></h4>
+              <!-- 颜色：style="background-color: rgba(216,76,19,0.1);" -->
+            </div>
+          </div>
+        </div>
+        <div class="software-list">
+          <div class="media">
+            <img class="mr-3" src="images/product06.png" width="40" height="40" alt="公路算量">
+            <div class="media-body">
+              <h4 class="mt-1 mb-1"><a href="software-details.html">公路算量</a></h4>
+              <!-- 颜色：style="background-color: rgba(106,0,149,0.1);" -->
+            </div>
+          </div>
+        </div>
+      </div>
+  	</div>
+    
+
+    <script src="js/jquery-3.3.1.slim.min.js"></script>
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/global.js"></script>
+  </body>
+</html>