调整示例页样式。review by zhurch

chenmeiyiSupermap · chenmeiyiSupermap · commit cf04ff7cc303 · 2017-05-04T15:57:36.000+08:00
diff --git a/examples/css/examples.css b/examples/css/examples.css
@@ -4,34 +4,33 @@
 }
 
 .examples-container {
-    background-color: #f9f9f9;
+    background-color: #ffffff;
     margin-top: 50px;
     overflow: auto;
 }
 
 @media (max-width: 767px) {
     .examples-container {
-        margin-top: 100px;
     }
 }
 
 #charts-list {
-    margin: 0px;
-    padding: 1px 20px;
+    margin: 0;
+    padding: 0 20px;
     list-style: none;
     overflow: inherit;
 }
 
 h3.category-title {
     margin-top: 10px;
-    height: 50px;
-    line-height: 50px;
-    border-bottom: 1px solid #3c8dbc;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 0;
 }
 
-.category-content {
+/*.category-content {
     margin-left: 30px;
-}
+}*/
 
 #charts-list .chart {
     width: 100%;
@@ -51,7 +50,7 @@ h3.category-title {
 }
 
 #charts-list .chart .chart-link .chart-title {
-    color: #293c55;
+    color: #2c3b41;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -63,3 +62,29 @@ h3.category-title {
 #charts-list .chart .chart-link .chart-area {
     width: 100%;
 }
+
+.box {
+    border-top: 3px solid #3c8dbc;
+}
+
+.box.box-default{
+    background-color: #FFFFFF;
+    border-top-color: #3c8dbc;
+}
+
+.box-title {
+    padding-top: 10px ;
+    padding-bottom: 0 ;
+    padding-left: 5px;
+    color:	#555555;
+}
+
+.box-header{
+    padding-top: 10px ;
+    padding-bottom: 5px ;
+    padding-left: 0;
+}
+
+.box-body{
+    padding: 0;
+}
diff --git a/examples/iclient3d/config.js b/examples/iclient3d/config.js
@@ -27,4 +27,13 @@ var exampleConfig = {
  */
 var sideBarIconConfig = {
     "iClient3D": "fa-globe"
+};
+
+/**
+ *key值：为exampleConfig配置的key值    
+ *value值：fontawesome字体icon名
+ *与sideBarIconConfig的区别：sideBarIconConfig包括侧边栏所有层级目录的图标，exampleIconConfig仅包括一级标题的图标
+ */
+var exampleIconConfig = {
+    "iClient3D": "fa-globe"
 };
diff --git a/examples/js/example.js b/examples/js/example.js
@@ -48,7 +48,7 @@ function createSubGalleryItem(config) {
     var categoryContentDiv = $("<div class='category-content'></div>");
     for (var key in config) {
         var configItem = config[key];
-        var content = $("<div id='category-content-" + key + "'></div>");
+        var content = $("<div class='box box-default color-palette-box' id='category-content-" + key + "'></div>");
         createSubGalleryItemTitle(key, configItem.name).appendTo(content);
         if (configItem.content) {
             createGalleryCharts(configItem.content).appendTo(content);
@@ -59,15 +59,19 @@ function createSubGalleryItem(config) {
 }
 
 function createGalleryItemTitle(id, title) {
-    return $("<h3 class='category-title' id='" + id + "'>" + title + "</h3>");
+    var menuItemIcon = exampleIconConfig[id];
+    return $("<h3 class='category-title' id='" + id + "'>" + "<i class='fa " + menuItemIcon + "'></i>" + "&nbsp;&nbsp;"+title + "</h3>");
 }
 
 function createSubGalleryItemTitle(id, title) {
-    return $("<h4 class='category-type' id='category-type-" + id + "'>" + title + "</h4>");
+    return $("<div class='box-header with-border'>"+"<h3 class='box-title' id='category-type-" + id + "'>" + "&nbsp;&nbsp;" + title + "</h4>"+"</h3>"+"</div>");
 }
 
+
+
+
 function createGalleryCharts(examples) {
-    var chartsDiv = $("<div class='row charts'></div>");
+    var chartsDiv = $("<div class='box-body'></div>");
     var len = (examples && examples.length) ? examples.length : 0;
     for (var i = 0; i < len; i++) {
         createGalleryChart(examples[i]).appendTo(chartsDiv);
diff --git a/examples/leaflet/config.js b/examples/leaflet/config.js
@@ -449,4 +449,20 @@ var sideBarIconConfig = {
     "viz": "fa-map",
     "OGC": "fa-globe",
     "mapping": "fa-send"
+};
+
+/**
+ *key值：为exampleConfig配置的key值    
+ *value值：fontawesome字体icon名
+ *与sideBarIconConfig的区别：sideBarIconConfig包括侧边栏所有层级目录的图标，exampleIconConfig仅包括一级标题的图标
+ */
+var exampleIconConfig = {
+    "iServer": "fa-server",
+    "iPortal": "fa-desktop",
+    "online": "fa-cloud",
+    "iManager": "fa-group",
+    "plot": "fa-edit",
+    "viz": "fa-map",
+    "OGC": "fa-globe",
+    "mapping": "fa-send"
 };
diff --git a/examples/mapboxgl/config.js b/examples/mapboxgl/config.js
@@ -28,3 +28,12 @@ var exampleConfig = {
 var sideBarIconConfig = {
     "iServer": "fa-server"
 };
+
+/**
+ *key值：为exampleConfig配置的key值    
+ *value值：fontawesome字体icon名
+ *与sideBarIconConfig的区别：sideBarIconConfig包括侧边栏所有层级目录的图标，exampleIconConfig仅包括一级标题的图标
+ */
+var exampleIconConfig = {
+    "iServer": "fa-server"
+};
diff --git a/examples/openlayers/config.js b/examples/openlayers/config.js
@@ -461,4 +461,20 @@ var sideBarIconConfig = {
     "viz": "fa-map",
     "OGC": "fa-globe",
     "mapping": "fa-send"
+};
+
+/**
+ *key值：为exampleConfig配置的key值    
+ *value值：fontawesome字体icon名
+ *与sideBarIconConfig的区别：sideBarIconConfig包括侧边栏所有层级目录的图标，exampleIconConfig仅包括一级标题的图标
+ */
+var exampleIconConfig = {
+    "iServer": "fa-server",
+    "iPortal": "fa-desktop",
+    "online": "fa-cloud",
+    "iManager": "fa-group",
+    "plot": "fa-edit",
+    "viz": "fa-map",
+    "OGC": "fa-globe",
+    "mapping": "fa-send"
 };
