Skip to content

Commit bf668ca

Browse files
author
潘卓然 Parn Deedlit
authored
Merge pull request #51 from MapGIS/overview
【示例网站】【优化首页的概述部分的全部页面】
2 parents 9763ade + ba697d2 commit bf668ca

File tree

9 files changed

+795
-414
lines changed

9 files changed

+795
-414
lines changed

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

200 KB
Loading

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

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<el-table
3-
height="100%"
43
:data="data"
54
border
6-
style="wfuncth: 100%; margin-top: 20px"
5+
style="margin-top: 20px"
6+
header-cell-style="background-color: #F5F7FA;font-size: 14px;font-family: Microsoft YaHei;font-weight: bold;color: #606266;"
77
>
88
<el-table-column
99
prop="func"
@@ -14,72 +14,52 @@
1414
prop="leaflet"
1515
:label="mobile? 'leaf':'leaflet'"
1616
:filters="[
17-
{ text: '支持', value: '支持' },
18-
{ text: '后续支持', value: '后续支持'},
19-
{ text: '支持', value: '支持'},
20-
{ text: '无计划', value: '无计划'}]"
17+
{ text: '支持', value: '支持' },
18+
{ text: '不支持', value: '不支持'}]"
2119
:filter-method="filterLeafletTag"
2220
filter-placement="bottom-end"
2321
>
2422
<template slot-scope="scope">
25-
<el-tag
26-
:type="scope.row.leaflet === '支持' ? 'success' : scope.row.leaflet === '支持' ? 'primary' : scope.row.leaflet === '后续支持' ? 'warning' : 'danger'"
27-
disable-transitions
28-
>{{scope.row.leaflet}}</el-tag>
23+
<div :class="['default',{'support': scope.row.leaflet === '支持'}, {'not-support': scope.row.leaflet === '不支持'}]">{{scope.row.leaflet === '支持'? '√': scope.row.leaflet === '不支持'? '×': '-'}}</div>
2924
</template>
3025
</el-table-column>
3126
<el-table-column
3227
prop="mapboxgl"
3328
:label="mobile? 'map':'MapboxGL'"
3429
:filters="[
35-
{ text: '支持', value: '支持' },
36-
{ text: '后续支持', value: '后续支持'},
37-
{ text: '支持', value: '支持'},
38-
{ text: '无计划', value: '无计划'}]"
30+
{ text: '支持', value: '支持' },
31+
{ text: '不支持', value: '不支持'}]"
3932
:filter-method="filterMapboxTag"
4033
filter-placement="bottom-end"
4134
>
4235
<template slot-scope="scope">
43-
<el-tag
44-
:type="scope.row.mapboxgl === '支持' ? 'success' : scope.row.mapboxgl === '支持' ? 'primary' : scope.row.mapboxgl === '后续支持' ? 'warning' : 'danger'"
45-
disable-transitions
46-
>{{scope.row.mapboxgl}}</el-tag>
36+
<div :class="['default',{'support': scope.row.leaflet === '支持'}, {'not-support': scope.row.leaflet === '不支持'}]">{{scope.row.leaflet === '支持'? '√': scope.row.leaflet === '不支持'? '×': '-'}}</div>
4737
</template>
4838
</el-table-column>
4939
<el-table-column
5040
prop="openlayers"
5141
:label="mobile? 'ol':'OpenLayers'"
5242
:filters="[
53-
{ text: '支持', value: '支持' },
54-
{ text: '后续支持', value: '后续支持'},
55-
{ text: '支持', value: '支持'},
56-
{ text: '无计划', value: '无计划'}]"
43+
{ text: '支持', value: '支持' },
44+
{ text: '不支持', value: '不支持'}]"
5745
:filter-method="filterOpenlayerTag"
5846
filter-placement="bottom-end"
5947
>
6048
<template slot-scope="scope">
61-
<el-tag
62-
:type="scope.row.openlayers === '支持' ? 'success' : scope.row.openlayers === '支持' ? 'primary' : scope.row.openlayers === '后续支持' ? 'warning' : 'danger'"
63-
disable-transitions
64-
>{{scope.row.openlayers}}</el-tag>
49+
<div :class="['default',{'support': scope.row.leaflet === '支持'}, {'not-support': scope.row.leaflet === '不支持'}]">{{scope.row.leaflet === '支持'? '√': scope.row.leaflet === '不支持'? '×': '-'}}</div>
6550
</template>
6651
</el-table-column>
6752
<el-table-column
6853
prop="cesium"
6954
:label="mobile? 'ce':'Cesium'"
7055
:filters="[
71-
{ text: '支持', value: '支持' },
72-
{ text: '后续支持', value: '后续支持'},
73-
{ text: '支持', value: '支持'},
74-
{ text: '无计划', value: '无计划'}]"
56+
{ text: '支持', value: '支持' },
57+
{ text: '不支持', value: '不支持'}]"
7558
:filter-method="filterCesiumTag"
7659
filter-placement="bottom-end"
7760
>
7861
<template slot-scope="scope">
79-
<el-tag
80-
:type="scope.row.cesium === '支持' ? 'success' : scope.row.cesium === '支持' ? 'primary' : scope.row.cesium === '后续支持' ? 'warning' : 'danger'"
81-
disable-transitions
82-
>{{scope.row.cesium}}</el-tag>
62+
<div :class="['default',{'support': scope.row.leaflet === '支持'}, {'not-support': scope.row.leaflet === '不支持'}]">{{scope.row.leaflet === '支持'? '√': scope.row.leaflet === '不支持'? '×': '-'}}</div>
8363
</template>
8464
</el-table-column>
8565
</el-table>
@@ -114,4 +94,20 @@ export default {
11494
}
11595
}
11696
}
117-
</script>
97+
</script>
98+
99+
<style rel="stylesheet/scss" lang="scss" scoped>
100+
.default {
101+
font-size: 18px;
102+
font-family: Microsoft YaHei;
103+
font-weight: 400;
104+
}
105+
106+
.support {
107+
color: #45AC50;
108+
}
109+
110+
.not-support {
111+
color: #EA4614;
112+
}
113+
</style>

‎website/src/views/layout/LayoutThree.vue‎

Lines changed: 128 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,147 @@
11
<template>
2-
<el-container>
3-
<el-header :class="{'webclient-three-header-mobile':mobile, 'webclient-three-header': true}">
4-
<Header></Header>
5-
</el-header>
6-
<el-main class="webclient-three-layout">
7-
<app-main></app-main>
8-
</el-main>
9-
<el-footer
10-
:height="mobile?'300':'250'"
11-
style="padding:0px;"
12-
>
13-
<main-footer></main-footer>
14-
</el-footer>
15-
</el-container>
2+
<el-container>
3+
<el-header :class="{ 'webclient-three-header-mobile': mobile, 'webclient-three-header': true }">
4+
<Header></Header>
5+
</el-header>
6+
<el-main class="webclient-three-layout">
7+
<div class="overview-header">
8+
<div class="title">概述<span>SUMMARY</span></div>
9+
<div class="overview-nav">
10+
<router-link to="/total/core">
11+
<div :class="['item',{select:$route.path === '/total/core'}]">
12+
核心服务
13+
<div class="triangle"></div>
14+
</div>
15+
</router-link>
16+
<router-link to="/total/detail">
17+
<div :class="['item',{select:$route.path === '/total/detail'}]">
18+
详细服务
19+
<div class="triangle"></div>
20+
</div>
21+
</router-link>
22+
<router-link to="/total/use">
23+
<div :class="['item',{select:$route.path === '/total/use'}]">
24+
调用方式
25+
<div class="triangle"></div>
26+
</div>
27+
</router-link>
28+
<router-link to="/total/select">
29+
<div :class="['item',{select:$route.path === '/total/select'}]">
30+
四大引擎选择
31+
<div class="triangle"></div>
32+
</div>
33+
</router-link>
34+
<router-link to="/total/download">
35+
<div :class="['item',{select:$route.path === '/total/download'}]">
36+
选择下载
37+
<div class="triangle"></div>
38+
</div>
39+
</router-link>
40+
</div>
41+
</div>
42+
<app-main></app-main>
43+
</el-main>
44+
<el-footer :height="mobile ? '300' : '250'" style="padding: 0px">
45+
<main-footer></main-footer>
46+
</el-footer>
47+
</el-container>
1648
</template>
1749

1850
<script>
19-
import { Header, AppMain, MainFooter } from "./components";
20-
import { isMobile } from "@/utils/mobile";
51+
import { Header, AppMain, MainFooter } from './components';
52+
import { isMobile } from '@/utils/mobile';
2153
2254
export default {
23-
name: "layoutthree",
24-
components: {
25-
Header,
26-
AppMain,
27-
MainFooter
28-
},
29-
data () {
30-
return {
31-
mobile: isMobile()
32-
}
33-
},
34-
computed: {},
35-
methods: {}
55+
name: 'layoutthree',
56+
components: {
57+
Header,
58+
AppMain,
59+
MainFooter
60+
},
61+
data() {
62+
return {
63+
mobile: isMobile()
64+
};
65+
},
66+
computed: {},
67+
methods: {}
3668
};
3769
</script>
3870

3971
<style rel="stylesheet/scss" lang="scss" scoped>
4072
.webclient-three-header-mobile {
41-
padding: 0px;
42-
height: 48px !important;
73+
padding: 0px;
74+
height: 48px !important;
4375
}
4476
.webclient-three-header {
45-
padding: 0px;
46-
height: 72px;
77+
padding: 0px;
78+
height: 72px;
4779
}
4880
.webclient-three-layout {
49-
padding: 0px;
50-
min-height: 80vh;
51-
// height: fit-content;
52-
margin: 0px 0px;
81+
padding: 0px;
82+
min-height: 80vh;
83+
// height: fit-content;
84+
margin: 0px 0px;
85+
86+
.overview-header {
87+
width: 100%;
88+
height: 240px;
89+
background-image: url('../../../public/static/assets/total/overview.png');
90+
background-size: 100% 240px;
91+
92+
.title {
93+
height: 176px;
94+
font-size: 30px;
95+
font-family: Source Han Sans CN;
96+
font-weight: bold;
97+
font-style: italic;
98+
color: #ffffff;
99+
line-height: 176px;
100+
margin-left: 130px;
101+
102+
span {
103+
margin-left: 15px;
104+
color: rgba(255, 255, 255, 0.3);
105+
}
106+
}
107+
108+
.overview-nav {
109+
display: flex;
110+
height: 64px;
111+
padding: 0 122px;
112+
background-color: rgba(255, 255, 255, 0.13);
113+
box-shadow: -1px 4px 8px 0px rgba(0, 0, 0, 0.1);
114+
115+
a {
116+
flex: 1;
117+
118+
.item {
119+
font-size: 18px;
120+
font-family: Microsoft YaHei;
121+
font-weight: 400;
122+
color: #ffffff;
123+
line-height: 64px;
124+
text-align: center;
125+
126+
&.select {
127+
background-color: rgba(255, 255, 255, 0.14);
128+
129+
.triangle {
130+
width: 0;
131+
height: 0;
132+
margin: -20px auto 0;
133+
border-top: 10px solid transparent;
134+
border-left: 10px solid transparent;
135+
border-right: 10px solid transparent;
136+
border-bottom: 10px solid #ffffff;
137+
}
138+
}
139+
}
140+
}
141+
}
142+
}
53143
}
54144
.el-footer {
55-
padding: 0 0px;
145+
padding: 0 0px;
56146
}
57147
</style>

0 commit comments

Comments
 (0)