Skip to content

Commit a508e31

Browse files
author
潘卓然 Parn Deedlit
authored
Merge pull request #54 from MapGIS/overview
【示例网站】【概述部分的页面兼容手机端】【修复原先页面存在的问题】
2 parents 3c64918 + 426ca12 commit a508e31

File tree

11 files changed

+137
-138
lines changed

11 files changed

+137
-138
lines changed

‎website/public/static/assets/total/retouch.png‎

116 Bytes
Loading

‎website/public/static/assets/total/select/material.png‎

1.04 KB
Loading

‎website/public/static/assets/total/use/arrow.png‎

842 Bytes
Loading

‎website/src/App.vue‎

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -15,60 +15,4 @@
1515
body {
1616
margin: 0px;
1717
}
18-
.overview-header {
19-
width: 100%;
20-
height: 240px;
21-
background-size: 100% 240px;
22-
23-
.title {
24-
height: 176px;
25-
font-size: 30px;
26-
font-family: Source Han Sans CN;
27-
font-weight: bold;
28-
font-style: italic;
29-
color: #ffffff;
30-
line-height: 176px;
31-
margin-left: 130px;
32-
33-
span {
34-
margin-left: 15px;
35-
color: rgba(255, 255, 255, 0.3);
36-
}
37-
}
38-
39-
.overview-nav {
40-
display: flex;
41-
height: 64px;
42-
padding: 0 122px;
43-
background-color: rgba(255, 255, 255, 0.13);
44-
box-shadow: -1px 4px 8px 0px rgba(0, 0, 0, 0.1);
45-
46-
a {
47-
flex: 1;
48-
49-
.item {
50-
font-size: 18px;
51-
font-family: Microsoft YaHei;
52-
font-weight: 400;
53-
color: #ffffff;
54-
line-height: 64px;
55-
text-align: center;
56-
57-
&.select {
58-
background-color: rgba(255, 255, 255, 0.14);
59-
60-
.triangle {
61-
width: 0;
62-
height: 0;
63-
margin: -20px auto 0;
64-
border-top: 10px solid transparent;
65-
border-left: 10px solid transparent;
66-
border-right: 10px solid transparent;
67-
border-bottom: 10px solid #ffffff;
68-
}
69-
}
70-
}
71-
}
72-
}
73-
}
7418
</style>

‎website/src/components/Table/Kind.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
:data="data"
44
border
55
style="margin-top: 20px"
6-
header-cell-style="background-color: #F5F7FA;font-size: 14px;font-family: Microsoft YaHei;font-weight: bold;color: #606266;"
6+
:header-cell-style="headerCellStyle"
77
>
88
<el-table-column
99
prop="func"
@@ -85,6 +85,13 @@ export default {
8585
data () {
8686
return {
8787
mobile: isMobile(),
88+
headerCellStyle: {
89+
backgroundColor: '#F5F7FA',
90+
fontSize: '14px',
91+
fontFamily: 'Microsoft YaHei',
92+
fontWeight: 'bold',
93+
color: '#606266'
94+
}
8895
}
8996
},
9097
methods: {

‎website/src/components/Tabs/TotalTab.vue‎

Lines changed: 35 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,25 @@
22
<div class="overview-header">
33
<div class="title">概述<span>SUMMARY</span></div>
44
<div class="overview-nav">
5-
<router-link to="/total/core">
6-
<div :class="['item', { select: $route.path === '/total/core' }]">
7-
核心服务
8-
<div class="triangle"></div>
9-
</div>
5+
<router-link to="/total/core" :class="{ select: $route.path === '/total/core' }">
6+
<div class="item">核心服务</div>
7+
<div class="triangle"></div>
108
</router-link>
11-
<router-link to="/total/detail">
12-
<div :class="['item', { select: $route.path === '/total/detail' }]">
13-
详细服务
14-
<div class="triangle"></div>
15-
</div>
9+
<router-link to="/total/detail" :class="{ select: $route.path === '/total/detail' }">
10+
<div class="item">详细服务</div>
11+
<div class="triangle"></div>
1612
</router-link>
17-
<router-link to="/total/use">
18-
<div :class="['item', { select: $route.path === '/total/use' }]">
19-
调用方式
20-
<div class="triangle"></div>
21-
</div>
13+
<router-link to="/total/use" :class="{ select: $route.path === '/total/use' }">
14+
<div class="item">调用方式</div>
15+
<div class="triangle"></div>
2216
</router-link>
23-
<router-link to="/total/select">
24-
<div :class="['item', { select: $route.path === '/total/select' }]">
25-
四大引擎选择
26-
<div class="triangle"></div>
27-
</div>
17+
<router-link to="/total/select" :class="{ select: $route.path === '/total/select' }">
18+
<div class="item">四大引擎选择 </div>
19+
<div class="triangle"></div>
2820
</router-link>
29-
<router-link to="/total/download">
30-
<div :class="['item', { select: $route.path === '/total/download' }]">
31-
选择下载
32-
<div class="triangle"></div>
33-
</div>
21+
<router-link to="/total/download" :class="{ select: $route.path === '/total/download' }">
22+
<div class="item">选择下载</div>
23+
<div class="triangle"></div>
3424
</router-link>
3525
</div>
3626
</div>
@@ -73,29 +63,33 @@ export default {
7363
box-shadow: -1px 4px 8px 0px rgba(0, 0, 0, 0.1);
7464
7565
a {
66+
position: relative;
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
7670
flex: 1;
7771
72+
&.select {
73+
background-color: rgba(255, 255, 255, 0.14);
74+
75+
.triangle {
76+
position: absolute;
77+
bottom: 0;
78+
width: 0;
79+
height: 0;
80+
margin: 0 auto;
81+
border-top: 10px solid transparent;
82+
border-left: 10px solid transparent;
83+
border-right: 10px solid transparent;
84+
border-bottom: 10px solid #ffffff;
85+
}
86+
}
87+
7888
.item {
7989
font-size: 18px;
8090
font-family: Microsoft YaHei;
8191
font-weight: 400;
8292
color: #ffffff;
83-
line-height: 64px;
84-
text-align: center;
85-
86-
&.select {
87-
background-color: rgba(255, 255, 255, 0.14);
88-
89-
.triangle {
90-
width: 0;
91-
height: 0;
92-
margin: -20px auto 0;
93-
border-top: 10px solid transparent;
94-
border-left: 10px solid transparent;
95-
border-right: 10px solid transparent;
96-
border-bottom: 10px solid #ffffff;
97-
}
98-
}
9993
}
10094
}
10195
}

‎website/src/styles/global.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
a {
22
color: #409eff;
33
text-decoration: none;
4+
word-wrap: break-word;
45
}

‎website/src/views/total/Core.vue‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
border
1616
stripe
1717
style="width: 100%"
18-
header-cell-style="background-color: #F5F7FA;font-size: 14px;font-family: Microsoft YaHei;font-weight: bold;color: #606266;"
18+
:header-cell-style="headerCellStyle"
1919
>
2020
<el-table-column type="index" label="序号" width="60"> </el-table-column>
2121
<el-table-column prop="func" label="功能"> </el-table-column>
@@ -29,7 +29,7 @@
2929
border
3030
stripe
3131
style="width: 100%"
32-
header-cell-style="background-color: #F5F7FA;font-size: 14px;font-family: Microsoft YaHei;font-weight: bold;color: #606266;"
32+
:header-cell-style="headerCellStyle"
3333
>
3434
<el-table-column type="index" label="序号" width="60"> </el-table-column>
3535
<el-table-column prop="func" label="功能"> </el-table-column>
@@ -43,7 +43,7 @@
4343
border
4444
stripe
4545
style="width: 100%"
46-
header-cell-style="background-color: #F5F7FA;font-size: 14px;font-family: Microsoft YaHei;font-weight: bold;color: #606266;"
46+
:header-cell-style="headerCellStyle"
4747
>
4848
<el-table-column type="index" label="序号" width="60"> </el-table-column>
4949
<el-table-column prop="func" label="功能"> </el-table-column>
@@ -57,7 +57,7 @@
5757
border
5858
stripe
5959
style="width: 100%"
60-
header-cell-style="background-color: #F5F7FA;font-size: 14px;font-family: Microsoft YaHei;font-weight: bold;color: #606266;"
60+
:header-cell-style="headerCellStyle"
6161
>
6262
<el-table-column type="index" label="序号" width="60"> </el-table-column>
6363
<el-table-column prop="func" label="功能"> </el-table-column>
@@ -284,7 +284,14 @@ export default {
284284
detail: '通过rest服务获取相关数据，绘制客户端专题图',
285285
url: '除原始地图引擎脚本外，还需引入igserver.js'
286286
}
287-
]
287+
],
288+
headerCellStyle: {
289+
backgroundColor: '#F5F7FA',
290+
fontSize: '14px',
291+
fontFamily: 'Microsoft YaHei',
292+
fontWeight: 'bold',
293+
color: '#606266'
294+
}
288295
};
289296
}
290297
};

‎website/src/views/total/Download.vue‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<total-tab />
44
<div class="content-wrapper">
55
<div class="title">
6-
<img />
6+
<img src="../../../public/static/assets/total/retouch.png" />
77
<div class="text">SDK下载</div>
88
</div>
99
<div class="warning">在这里，可以下载到所有您需要的中地数码 WebClient 产品：{{ SDK.version }}</div>
10-
<div class="download-area">
10+
<div :class="['download-area', { mobile: mobile }]">
1111
<div class="complete package">
1212
<span class="name">完整包</span>
1313
<div class="text">该包含有webclient四大主脚本以及所需的全部的三方cdn脚本</div>
@@ -20,7 +20,7 @@
2020
</div>
2121
</div>
2222
<div class="title">
23-
<img />
23+
<img src="../../../public/static/assets/total/retouch.png" />
2424
<div class="text">Npm</div>
2525
</div>
2626
<el-row>
@@ -52,11 +52,13 @@
5252
<script>
5353
import { download } from './DownloadConfig';
5454
import TotalTab from '@/components/Tabs/TotalTab';
55+
import { isMobile } from '@/utils/mobile';
5556
5657
export default {
5758
components: { TotalTab },
5859
data() {
5960
return {
61+
mobile: isMobile(),
6062
version: [
6163
{
6264
name: 'Cesium运行时版本',
@@ -189,6 +191,18 @@ export default {
189191
.package + .package {
190192
margin-left: 40px;
191193
}
194+
195+
&.mobile {
196+
flex-wrap: wrap;
197+
198+
.package {
199+
flex: initial;
200+
width: 100%;
201+
margin-top: 20px;
202+
margin-left: 0;
203+
padding: 0 20px;
204+
}
205+
}
192206
}
193207
194208
.warning {

0 commit comments

Comments
 (0)