Skip to content

Commit 618b517

Browse files
zhurczhurc
committed
站点页面部分样式调整
1 parent b944f80 commit 618b517

29 files changed

+1391
-783
lines changed

‎examples/css/editor.css‎

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,45 @@
1+
html, body, .wrapper {
2+
height: 100% !important;
3+
}
4+
5+
.wrapper {
6+
overflow: hidden;
7+
}
8+
9+
.main-header {
10+
position: fixed;
11+
width: 100%;
12+
}
13+
14+
.edit-container {
15+
background-color: #f9f9f9;
16+
position: relative;
17+
height: 100%;
18+
}
19+
20+
.content {
21+
top: 52px;
22+
bottom: 0;
23+
margin: 0;
24+
padding: 0;
25+
width: 100%;
26+
z-index: 99;
27+
overflow: hidden;
28+
position: absolute;
29+
}
30+
31+
@media (max-width: 767px) {
32+
.edit-container {
33+
margin-top: 100px;
34+
}
35+
.content{
36+
top:0;
37+
}
38+
}
39+
140
#codePane {
241
width: 660px;
342
height: 100%;
4-
margin-left: 200px;
543
position: absolute;
644
box-shadow: 2px 0px 6px #cccccc;
745
}
@@ -43,19 +81,11 @@
4381
font-size: 12px;
4482
}
4583

46-
#drag {
47-
width: 2px;
48-
height: 100%;
49-
background: #eee;
50-
cursor: w-resize;
51-
left: 860px;
52-
position: absolute;
53-
}
54-
5584
#preview {
5685
height: 100%;
86+
right: 0;
5787
min-width: 400px;
58-
margin-left: 862px;
88+
margin-left: 662px;
5989
position: relative;
6090
}
6191

@@ -69,14 +99,13 @@
6999
#codePane {
70100
width: 340px;
71101
height: 100%;
72-
margin-left: 200px;
73102
position: absolute;
74103
box-shadow: 3px 0px 6px #cccccc;
75104
}
76105

77106
#preview {
78107
height: 100%;
79-
margin-left: 540px;
108+
margin-left: 340px;
80109
position: relative;
81110
}
82111
}
@@ -85,27 +114,24 @@
85114
#codePane {
86115
width: 500px;
87116
height: 100%;
88-
margin-left: 200px;
89117
position: absolute;
90118
box-shadow: 3px 0px 6px #cccccc;
91119
}
92120

93121
#preview {
94122
height: 100%;
123+
margin-left: 502px;
95124
min-width: 400px;
96-
margin-left: 700px;
97125
position: relative;
98126
}
99127
}
100-
.content{
101-
overflow: hidden;
102-
}
128+
103129
::-webkit-scrollbar {
104-
width: 10px;
130+
width: 8px;
105131
}
106132

107133
::-webkit-scrollbar-thumb {
108134
border-radius: 12px;
109-
background: #f7f7f7;
135+
background: #e7e7e7;
110136
-webkit-box-shadow: inset 0 0 6px #d1cfcf;
111137
}

‎examples/css/examples.css‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,31 @@
1-
#examples-container {
2-
margin-left: 205px;
3-
z-index: 10;
1+
.main-header {
2+
position: fixed;
3+
width: 100%;
4+
}
5+
6+
.examples-container {
47
background-color: #f9f9f9;
8+
margin-top: 50px;
9+
overflow: auto;
10+
}
11+
12+
@media (max-width: 767px) {
13+
.examples-container {
14+
margin-top: 100px;
15+
}
516
}
617

718
#charts-list {
819
margin: 0px;
9-
padding-left: 20px;
20+
padding: 1px 20px;
1021
list-style: none;
1122
overflow: inherit;
1223
}
1324

1425
h3.category-title {
15-
height: 60px;
16-
line-height: 60px;
26+
margin-top: 10px;
27+
height: 50px;
28+
line-height: 50px;
1729
border-bottom: 1px solid #cccccc;
1830
}
1931

@@ -50,4 +62,4 @@ h3.category-title {
5062

5163
#charts-list .chart .chart-link .chart-area {
5264
width: 100%;
53-
}
65+
}

‎examples/css/sideBar.css‎

Lines changed: 2 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,4 @@
1-
#sidebar {
2-
width: 200px;
3-
border-right: 1px solid #e0e0e0;
4-
overflow-y: auto;
5-
float: left;
6-
position: fixed;
7-
top: 60px;
8-
padding-bottom: 60px;
9-
height: 100%;
10-
}
11-
12-
#sidebar ul {
13-
padding-left: 20px;
14-
}
15-
#sidebar ul li{
16-
cursor: pointer;
17-
}
18-
#sidebar ul.menu ul.secondMenu, #sidebar ul.menu ul.thirdMenu{
19-
list-style: none;
20-
padding-left: 20px;
21-
}
22-
23-
24-
#sidebar ul.menu .title {
25-
height: 30px;
26-
line-height: 30px;
27-
font-size: 16px;
28-
}
29-
30-
#sidebar ul.menu a:hover,#sidebar ul.menu a.active{
31-
color:#0083CB;
32-
text-decoration:none;
33-
}
34-
35-
#sidebar ul.menu li span,#sidebar ul.menu li a{
36-
line-height: 40px;
37-
color:#000000;
1+
.menuTitle a.active{
2+
color: #ffffff;
383
}
394

‎examples/iclient3d/01_3DMap.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
<meta name="viewport"
77
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
88
<title>三维场景</title>
9-
<link href="http://support.supermap.com.cn:8090/iserver/iClient/for3D/webgl/examples/css/widgets.css"
9+
<link href="../../web/libs/css/widgets.css"
1010
rel="stylesheet">
1111

12-
<script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js"
12+
<script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.min.js"
1313
data-main="../../web/libs/Cesium/main.js"></script>
1414
<style>
1515
html, body, #cesiumContainer {

‎examples/iclient3d/config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,7 @@ var exampleConfig = {
1919
}
2020
}
2121
};
22+
23+
var sideBarIconMap = {
24+
"iClient3D": "fa-globe"
25+
};

‎examples/iclient3d/editor.html‎

Lines changed: 72 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,81 @@
33
<meta charset="UTF-8">
44
<head>
55
<title>SuperMap iClient3D示例代码</title>
6+
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
67
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
7-
<link rel="stylesheet" href="../css/common.css">
8+
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
9+
<link href="http://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
10+
<link rel="stylesheet" href="../../web/libs/css/adminLTE.min.css">
11+
<link rel="stylesheet" href="../../web/libs/css/skin-blue.min.css">
12+
<link rel="stylesheet" href="../../web/libs/css/blue.css">
13+
<link rel="stylesheet" href="../../web/css/header.css">
814
<link rel="stylesheet" href="../css/sideBar.css">
915
<link rel="stylesheet" href="../css/editor.css">
10-
<link rel="stylesheet" href="../../web/css/header.css">
1116
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
1217
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
1318
<script type="text/javascript" src="http://cdn.bootcss.com/ace/1.2.6/ace.js"></script>
14-
<script type="text/javascript" src="./config.js"></script>
15-
<style>
16-
.container {
17-
width: 100%;
18-
}
19+
<!--[if lt IE 9]>
20+
<script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
21+
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
22+
<![endif]-->
23+
</head>
24+
<body class="hold-transition skin-blue sidebar-mini">
1925

20-
.navbar #headerMenu > li > a {
26+
<div class="wrapper">
27+
<!--头部-->
28+
<header class="header-wrapper main-header">
29+
30+
<nav class="navbar navbar-static-top">
2131

22-
font-weight: inherit;
23-
}
24-
</style>
25-
</head>
26-
<body>
27-
<nav class="navbar navbar-fixed-top navbar-default">
28-
</nav>
29-
<script>
30-
$('.navbar-fixed-top').load('../../web/header.html');
31-
</script>
32-
<div class="main">
33-
<div class="content">
34-
<div id="sidebar">
35-
<ul class="menu"></ul>
36-
</div>
3732

38-
<div id="codePane" unselectable="on">
39-
<div class="contentTool">
40-
<span style="padding-left: 20px;">源代码编辑器</span>
41-
<div class="editorBtn" id="runBtn" onclick="run()"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>&nbsp;运行</div>
42-
<div class="editorBtn" id="resetBtn" onclick="refresh()"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>&nbsp;重置</div>
33+
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
34+
<span class="sr-only"></span>
35+
</a>
36+
<div class="nav-header">
37+
4338
</div>
39+
</nav>
40+
</header>
41+
42+
<!-- 侧边栏 -->
4443

45-
<div id="editor">
44+
<aside class="sidebar-wrapper main-sidebar" style="position: fixed;">
45+
<!-- sidebar: style can be found in sidebar.less -->
46+
<section class="sidebar" id="sidebar">
47+
<!-- sidebar menu: : style can be found in sidebar.less -->
48+
<ul class="sidebar-menu" id="sidebar-menu">
49+
50+
</ul>
51+
</section>
52+
<!-- /.sidebar -->
53+
</aside>
54+
<!-- 内容区 -->
55+
<div class="content-wrapper edit-container">
56+
<div class="content">
57+
<div id="codePane">
58+
<div class="contentTool">
59+
<span style="padding-left: 20px;">源代码编辑器</span>
60+
<div class="editorBtn" id="runBtn" onclick="run()"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>&nbsp;运行</div>
61+
<div class="editorBtn" id="resetBtn" onclick="refresh()"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>&nbsp;重置</div>
62+
</div>
63+
64+
<div id="editor">
65+
66+
</div>
67+
</div>
68+
<div id="preview">
69+
<iframe id='innerPage' name='innerPage'></iframe>
4670

4771
</div>
48-
</div>
49-
<div id="preview">
50-
<iframe id='innerPage' name='innerPage'></iframe>
5172
</div>
5273
</div>
5374
</div>
75+
<script type="text/javascript" src="../js/scrollTo.min.js"></script>
76+
<script type="text/javascript" src="../../web/libs/js/app.min.js"></script>
77+
<script>
78+
$('.nav-header').load('../../web/header.html');
79+
</script>
80+
<script type="text/javascript" src="./config.js"></script>
5481
<script type="text/javascript" src="../js/sidebar.js"></script>
5582
<script type="text/javascript" src="../js/editor.js"></script>
5683
<script>
@@ -60,9 +87,19 @@
6087
bindEvents();
6188
});
6289
function bindEvents() {
63-
$("#sidebar ul.thirdMenu a").click(function (evt) {
64-
window.location.hash = "#" + evt.target.id;
65-
initEditor();
90+
$("#sidebar ul.third-menu a").click(function (evt) {
91+
var target = $(evt.target).parent().parent();
92+
var nodeId = evt.target.id;
93+
//如果点击的是span节点还要往上一层
94+
if (evt.target.localName === "span") {
95+
nodeId = target.attr('id');
96+
}
97+
if (nodeId) {
98+
evt.preventDefault();
99+
window.location.hash = "#" + nodeId;
100+
initEditor();
101+
evt.stopPropagation();
102+
}
66103
});
67104
window.addEventListener("hashchange", function () {
68105
var hash = window.location.hash;

0 commit comments

Comments
 (0)