Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0ad9e78

Browse files
author
ParnDeedlit&潘卓然
committed
【站点】【优化】【优化显示效果&移动端适配】
1 parent f923946 commit 0ad9e78

File tree

14 files changed

+389
-568
lines changed

14 files changed

+389
-568
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
<el-table-column
66
prop="id"
77
label="EPSG编号"
8-
width="100">
8+
:width="mobile ? 90 : 100">
99
</el-table-column>
1010
<el-table-column
1111
prop="name"
1212
label="名称"
13-
width="200">
13+
:width="mobile ? 80 : 280">
1414
</el-table-column>
1515
<el-table-column
1616
prop="proj"
@@ -20,18 +20,20 @@
2020
</template>
2121

2222
<script>
23+
import { isMobile } from "@/utils/mobile";
2324
export default {
2425
components: {},
2526
props: {
2627
tableData: Array
2728
},
2829
data() {
2930
return {
31+
mobile: isMobile()
3032
};
3133
}
3234
};
3335
</script>
3436

3537
<style lang="less">
3638
37-
</style>
39+
</style>

‎website/src/views/demo/ShowGallery.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,4 +168,4 @@ export default {
168168
width: 96px;
169169
}
170170
}
171-
</style>
171+
</style>

‎website/src/views/gallery/Gallery.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -320,12 +320,10 @@ export default {
320320
overflow-x: hidden;
321321
}
322322
.gallery-fix-anchor {
323-
// float: right;
323+
overflow-x: hidden;
324+
overflow-y: scroll;
324325
width: 120px;
325326
padding: 16px 20px;
326-
/* background: #f4f7fb;
327-
border-left: solid 1px #e6e6e6; */
328-
border-radius: 0px;
329327
330328
-webkit-box-sizing: unset;
331329
box-sizing: unset;
@@ -340,6 +338,22 @@ export default {
340338
padding-inline-start: 40px;
341339
}
342340
}
341+
.gallery-fix-anchor::-webkit-scrollbar {
342+
width: 0px;
343+
}
344+
345+
.gallery-fix-anchor::-webkit-scrollbar-track {
346+
background: #f1f1f1;
347+
}
348+
349+
.gallery-fix-anchor::-webkit-scrollbar-thumb {
350+
background: #9093994d;
351+
border-radius: inherit;
352+
}
353+
354+
.gallery-fix-anchor::-webkit-scrollbar-thumb:hover {
355+
background: #555;
356+
}
343357
.gallery-scroll-content {
344358
height: calc(100vh - 80px);
345359
width: calc(100vw - 220px - 120px);

‎website/src/views/gallery/GalleryAnchor.vue‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
:color="getColor(item.anchor)"
77
:class="{'active': isActive(item.anchor)}"
88
>
9-
<span @click="handleClick(item.anchor)">{{item.name}}</span>
9+
<span @click="handleClick(item.anchor)"
10+
:class="{'active': isActive(item.anchor), 'anchor-text': true}"
11+
>{{item.name}}
12+
</span>
1013
</el-timeline-item>
1114
</el-timeline>
1215
</template>
@@ -48,24 +51,29 @@ export default {
4851
<style lang="scss">
4952
.gallery-fix-anchors {
5053
.active {
51-
color: #33dbe8;
54+
color: #33dbe8 !important;
5255
.el-timeline-item__content {
5356
color: #33dbe8;
5457
}
5558
}
5659
.el-timeline-item__node--normal {
5760
left: -1px;
58-
width: 8px;
59-
height: 8px;
61+
width: 12px;
62+
height: 12px;
6063
}
6164
.el-timeline-item__node {
6265
border: 2px solid #ffffff;
6366
}
6467
.el-timeline-item__content {
6568
color: #303133;
6669
font-size: 12px;
67-
// max-width: 96px;
68-
}
70+
// max-width: 96px;
71+
}
72+
.anchor-text {
73+
color: #303133;
74+
// font-weight: bold;
6975
}
76+
}
77+
7078
</style>
7179

‎website/src/views/layout/components/Header/config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ export const Headers = [
1717
},
1818
{
1919
title: '协议',
20-
links: [['epsg', 'ogc', 'geojson', 'socket']],
21-
hightlights: [[false, false, false, false]],
22-
routes: [['/standard/epsg', '/standard/ogc', '/standard/geojson', '/standard/socket']]
20+
links: [['epsg', 'ogc', 'geojson']],
21+
hightlights: [[false, false, false]],
22+
routes: [['/standard/epsg', '/standard/ogc', '/standard/geojson']]
2323
}
2424
]
2525
},

‎website/src/views/standard/Epsg.vue‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,34 @@
11
<template>
2-
<div>
2+
<div class="webclient-epsg-wrapper">
3+
<el-row type="flex" justify="center">
4+
<el-col :span="mobile? 22 : 18">
5+
<el-link type="primary" href="http://epsg.io/" target="_blank">EPSG官方网址</el-link>
6+
</el-col>
7+
</el-row>
38
<el-row type="flex" justify="center" class="banner">
4-
<el-col :span="18">
9+
<el-col :span="mobile? 22 : 18">
510
<el-tabs type="border-card" tab-position="top" style="height: 100%;">
11+
<el-tab-pane label="高斯大地坐标系_中国2000">
12+
<OgcTable :tableData="gauss_china2000" />
13+
</el-tab-pane>
614
<el-tab-pane label="高斯大地坐标系_西安80">
715
<OgcTable :tableData="gauss_xian80" />
816
</el-tab-pane>
917
<el-tab-pane label="高斯大地坐标系_北京54">
1018
<OgcTable :tableData="gauss_beijing54" />
1119
</el-tab-pane>
12-
<el-tab-pane label="高斯大地坐标系_中国2000">
13-
<OgcTable :tableData="gauss_china2000" />
14-
</el-tab-pane>
1520
<el-tab-pane label="Web墨卡托_WGS1984">
1621
<OgcTable :tableData="web_mecarot" />
1722
</el-tab-pane>
23+
<el-tab-pane label="中国2000国家大地坐标系_度">
24+
<OgcTable :tableData="lonlat_china2000" />
25+
</el-tab-pane>
1826
<el-tab-pane label="地理坐标系(西安)_度">
1927
<OgcTable :tableData="lonlat_xian80" />
2028
</el-tab-pane>
2129
<el-tab-pane label="地理坐标系(北京)_度">
2230
<OgcTable :tableData="lonlat_beijin54" />
2331
</el-tab-pane>
24-
<el-tab-pane label="中国2000国家大地坐标系_度">
25-
<OgcTable :tableData="lonlat_china2000" />
26-
</el-tab-pane>
2732
<el-tab-pane label="WGS1984_度">
2833
<OgcTable :tableData="lonlat_wgs84" />
2934
</el-tab-pane>
@@ -35,6 +40,7 @@
3540

3641
<script>
3742
// import treeTable from '@/components/TreeTable'
43+
import { isMobile } from "@/utils/mobile";
3844
import OgcTable from "@/components/Table/OgcTable";
3945
import epsg from "@/config/config-epsg";
4046
@@ -44,6 +50,7 @@ export default {
4450
},
4551
data() {
4652
return {
53+
mobile: isMobile(),
4754
gauss_xian80: epsg.gauss_xian80,
4855
gauss_beijing54: epsg.gauss_beijing54,
4956
gauss_china2000: epsg.gauss_china2000,
@@ -72,8 +79,11 @@ export default {
7279
</script>
7380

7481
<style rel="stylesheet/scss" lang="scss" scoped>
75-
.banner {
76-
padding-top: 20px;
77-
text-align: center;
82+
.webclient-epsg-wrapper {
83+
margin: 30px 0px;
84+
.banner {
85+
padding-top: 20px;
86+
text-align: center;
87+
}
7888
}
7989
</style>

‎website/src/views/standard/Geojson.vue‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<template>
2-
<div>
2+
<div class="webclient-geojson-wrapper">
3+
<el-row type="flex" justify="center">
4+
<el-col :span="mobile? 22 : 14">
5+
<el-link type="primary" href="https://geojson.org/" target="_blank">GeoJSON官方网址</el-link>
6+
</el-col>
7+
</el-row>
8+
<el-row type="flex" justify="center">
9+
<el-col :span="mobile? 22 : 14">
10+
311
<el-table
412
:data="tableData"
5-
style="width:60%;margin:0 auto;"
613
>
714
<el-table-column
815
label="图解"
@@ -27,14 +34,18 @@
2734
</template>
2835
</el-table-column>
2936
</el-table>
37+
</el-col>
38+
</el-row>
3039
</div>
3140
</template>
3241
<script>
42+
import { isMobile } from "@/utils/mobile";
3343
import geojson from '../../config/config-geojson'
3444
export default {
3545
data(){
3646
return {
37-
tableData:geojson.data
47+
mobile: isMobile(),
48+
tableData:geojson.data,
3849
}
3950
},
4051
methods:{
@@ -43,4 +54,9 @@ export default {
4354
}
4455
}
4556
}
46-
</script>
57+
</script>
58+
<style rel="stylesheet/scss" lang="scss" scoped>
59+
.webclient-geojson-wrapper {
60+
margin: 30px 0px;
61+
}
62+
</style>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="website-bug-commit">
33
<h1>提交BUG说明</h1>
44
<el-row type="flex" justify="center">
5-
<el-col :span="mobile ? 23 : 12">
5+
<el-col :span="mobile ? 22 : 12">
66
<h3>{{subQuestion.title}}</h3>
77
<div class="tip">
88
<p>
@@ -132,6 +132,7 @@ export default {
132132

133133
<style rel="stylesheet/scss" lang="scss" scoped>
134134
.website-bug-commit {
135+
margin: 30px 0px;
135136
h1 {
136137
font-size: 30px;
137138
text-align: center;

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

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
<template>
2-
<div>
2+
<div class="webclient-core-wrapper">
33
<el-row type="flex" justify="center" class="banner">
4-
<el-col :span="16">
5-
<el-tabs tab-position='left' style="height: 100%;">
4+
<el-col :span="mobile? 22: 18">
5+
<el-image
6+
class="framework-style-image"
7+
:src="framework"
8+
:preview-src-list="frameworks">
9+
</el-image>
10+
</el-col>
11+
</el-row>
12+
<el-row type="flex" justify="center" class="banner">
13+
<el-col :span="mobile? 22: 18">
14+
<el-tabs tab-position='top' style="height: 100%;">
615
<el-tab-pane label="DataStore">
716
<el-table :data="datastore" border stripe style="width: 100%">
817
<el-table-column type="index">
@@ -58,9 +67,14 @@
5867
</template>
5968

6069
<script>
70+
import { isMobile } from "@/utils/mobile";
71+
6172
export default {
6273
data() {
6374
return {
75+
mobile: isMobile(),
76+
framework: './static/assets/logo/framework.png',
77+
frameworks: ['./static/assets/logo/framework.png'],
6478
datastore: [{
6579
func: '创建大数据存储-Windows',
6680
detail: '创建大数据存储window版本（postgresql、ES集群、mongoDB集群）',
@@ -231,4 +245,11 @@
231245
padding-top: 20px;
232246
text-align: center;
233247
}
248+
.webclient-core-wrapper {
249+
margin: 30px 0px;
250+
.framework-style-image {
251+
width: 100%;
252+
height: fit-content;
253+
}
254+
}
234255
</style>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div class="webclient-detail-panel">
33
<el-row
44
type="flex"
55
justify="center"
@@ -81,4 +81,7 @@ export default {
8181
padding-top: 20px;
8282
text-align: center;
8383
}
84+
.webclient-detail-panel {
85+
margin: 30px 0px;
86+
}
8487
</style>

0 commit comments

Comments
 (0)