Skip to content

Commit e0ac0d4

Browse files
author
潘卓然ParnDeedlit
committed
【站点】【新增】【新增站点示例的hover提示和对齐样式】
1 parent 48358a0 commit e0ac0d4

File tree

3 files changed

+130
-166
lines changed

3 files changed

+130
-166
lines changed

‎website/public/static/demo/config/config-headers.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,14 +87,14 @@
8787
"StoryBook-MapboxGL"
8888
]
8989
],
90-
"hightlights": [[false, false, false]],
90+
"hightlights": [[true, false, false]],
9191
"routes": [["/gallery/vue-cesium#raster", "/gallery/vue-mapboxgl#vue-vector", "/storybook/index.html"]]
9292
},
9393
{
9494
"title": "开发API",
9595
"icon": "iconsanfangAPI",
9696
"links": [["Cesium-API", "MapboxGL-API"]],
97-
"hightlights": [[false, false]],
97+
"hightlights": [[true, false]],
9898
"routes": [["http://120.78.82.242:8891", "http://120.78.82.242:8892"]]
9999
}
100100
]

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

Lines changed: 126 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,194 +1,158 @@
11
<template>
2-
<div :class="{'gallery-image-col':true, 'gallery-image-col-mobile':mobile}">
3-
<div
4-
v-for="(item, i) in list"
5-
:key="i"
6-
class="gallyer-image-wrapper"
7-
>
8-
<div
9-
class="gallyer-image-select"
10-
v-if="isCurrent(item.file)"
11-
v-on:click="changeUrl(item.file)"
12-
>
13-
<el-card
14-
:body-style="{ padding: '0px'}"
15-
shadow="hover"
16-
>
17-
<img
18-
:src="nullImg"
19-
v-lazy="getImageUrl(item.icon)"
20-
class="image"
21-
/>
22-
</el-card>
23-
</div>
24-
<div
25-
class="gallyer-image-unselect"
26-
v-else
27-
v-on:click="changeUrl(item.file)"
28-
>
29-
<el-card
30-
:body-style="{ padding: '0px'}"
31-
shadow="hover"
32-
>
33-
<img
34-
:src="nullImg"
35-
v-lazy="getImageUrl(item.icon)"
36-
class="image"
37-
/>
38-
</el-card>
39-
</div>
2+
<div :class="{ 'gallery-image-col': true, 'gallery-image-col-mobile': mobile }">
3+
<div v-for="(item, i) in list" :key="i" class="gallyer-image-wrapper">
4+
<el-tooltip effect="light" placement="top">
5+
<template slot="content">
6+
<span>{{ item.name }}</span>
7+
</template>
8+
<div class="gallyer-image-select" v-if="isCurrent(item.file)" v-on:click="changeUrl(item.file)">
9+
<el-card :body-style="{ padding: '0px' }" shadow="hover">
10+
<img :src="nullImg" v-lazy="getImageUrl(item.icon)" class="image" />
11+
</el-card>
12+
</div>
13+
<div class="gallyer-image-unselect" v-else v-on:click="changeUrl(item.file)">
14+
<el-card :body-style="{ padding: '0px' }" shadow="hover">
15+
<img :src="nullImg" v-lazy="getImageUrl(item.icon)" class="image" />
16+
</el-card>
17+
</div>
18+
</el-tooltip>
19+
</div>
4020
</div>
41-
</div>
4221
</template>
4322

4423
<script>
45-
import { isMobile } from "@/utils/mobile";
24+
import { isMobile } from '@/utils/mobile';
4625
4726
export default {
48-
name: "layout",
49-
components: {},
50-
data () {
51-
return {
52-
mobile: isMobile(),
53-
nullImg: "./static/assets/components/CardGroup/null-img.png",
54-
current: this.getCurrentKind()
55-
};
56-
},
57-
props: {
58-
list: {
59-
type: Array,
60-
required: true
61-
}
62-
},
63-
watch: {
64-
"$route.path" () {
65-
this.getCurrentKind();
66-
}
67-
},
68-
methods: {
69-
getImageUrl (icon) {
70-
let anchors = location.href.split("#");
71-
if (!anchors || anchors.length < 2) return;
72-
73-
let hrefs = anchors[1].split("/").slice(2);
74-
var baseUrl = "./static/demo/";
75-
var imageUrl;
76-
if (hrefs.length <= 3) {
77-
imageUrl = baseUrl + hrefs[0] + "/gallery/" + hrefs[1] + "/" + icon;
78-
} else {
79-
imageUrl =
80-
baseUrl +
81-
hrefs[0] +
82-
"/gallery/" +
83-
hrefs[1] +
84-
"/" +
85-
hrefs[2] +
86-
"/" +
87-
icon;
88-
}
89-
return imageUrl;
27+
name: 'layout',
28+
components: {},
29+
data() {
30+
return {
31+
mobile: isMobile(),
32+
nullImg: './static/assets/components/CardGroup/null-img.png',
33+
current: this.getCurrentKind()
34+
};
9035
},
91-
getCurrentKind () {
92-
let anchors = location.href.split("#");
93-
if (!anchors || anchors.length < 2) return;
94-
95-
let hrefs = anchors[1].split("/").slice(2);
96-
let kind = hrefs[hrefs.length - 1];
97-
this.current = kind;
98-
return kind;
36+
props: {
37+
list: {
38+
type: Array,
39+
required: true
40+
}
9941
},
100-
isCurrent (file) {
101-
if (file == this.current) return true;
102-
return false;
42+
watch: {
43+
'$route.path'() {
44+
this.getCurrentKind();
45+
}
10346
},
104-
getLinkUrl (file) {
105-
let anchors = location.href.split("#");
106-
if (!anchors || anchors.length < 2) return;
47+
methods: {
48+
getImageUrl(icon) {
49+
let anchors = location.href.split('#');
50+
if (!anchors || anchors.length < 2) return;
10751
108-
let hrefs = anchors[1].split("/").slice(2);
109-
var baseUrl = "/demo/" + hrefs[0] + "/" + hrefs[1];
110-
if (hrefs.length > 3) {
111-
baseUrl = baseUrl + "/" + hrefs[2] + "/" + file;
112-
} else {
113-
baseUrl = baseUrl + "/" + file;
114-
}
115-
window.console.log("link", hrefs, baseUrl);
116-
return baseUrl;
117-
},
118-
changeUrl (file) {
119-
let url = this.getLinkUrl(file);
120-
this.$router.push(url);
52+
let hrefs = anchors[1].split('/').slice(2);
53+
var baseUrl = './static/demo/';
54+
var imageUrl;
55+
if (hrefs.length <= 3) {
56+
imageUrl = baseUrl + hrefs[0] + '/gallery/' + hrefs[1] + '/' + icon;
57+
} else {
58+
imageUrl = baseUrl + hrefs[0] + '/gallery/' + hrefs[1] + '/' + hrefs[2] + '/' + icon;
59+
}
60+
return imageUrl;
61+
},
62+
getCurrentKind() {
63+
let anchors = location.href.split('#');
64+
if (!anchors || anchors.length < 2) return;
65+
66+
let hrefs = anchors[1].split('/').slice(2);
67+
let kind = hrefs[hrefs.length - 1];
68+
this.current = kind;
69+
return kind;
70+
},
71+
isCurrent(file) {
72+
if (file == this.current) return true;
73+
return false;
74+
},
75+
getLinkUrl(file) {
76+
let anchors = location.href.split('#');
77+
if (!anchors || anchors.length < 2) return;
78+
79+
let hrefs = anchors[1].split('/').slice(2);
80+
var baseUrl = '/demo/' + hrefs[0] + '/' + hrefs[1];
81+
if (hrefs.length > 3) {
82+
baseUrl = baseUrl + '/' + hrefs[2] + '/' + file;
83+
} else {
84+
baseUrl = baseUrl + '/' + file;
85+
}
86+
window.console.log('link', hrefs, baseUrl);
87+
return baseUrl;
88+
},
89+
changeUrl(file) {
90+
let url = this.getLinkUrl(file);
91+
this.$router.push(url);
92+
}
12193
}
122-
}
12394
};
12495
</script>
12596

12697
<style lang="less" scoped>
12798
.gallery-image-col-mobile {
128-
margin: 6px 0px !important;
129-
.image {
130-
height: 64px !important;
131-
width: 64px !important;
132-
}
99+
margin: 6px 0px !important;
100+
.image {
101+
height: 64px !important;
102+
width: 64px !important;
103+
}
133104
}
134105
.gallery-image-col {
135-
display: flex;
136-
margin: 10px 0px;
137-
overflow-x: overlay;
138-
//overflow-y: hidden;
106+
display: flex;
107+
margin: 10px 0px;
108+
overflow-x: overlay;
109+
//overflow-y: hidden;
139110
140-
.gallyer-image-wrapper {
141-
margin-right: 6px;
142-
margin-left: 6px;
143-
margin-bottom: 6px;
144-
}
111+
.gallyer-image-wrapper {
112+
margin-right: 6px;
113+
margin-left: 6px;
114+
margin-bottom: 6px;
115+
}
145116
146-
.gallyer-image-select {
147-
border-radius: 3px;
148-
/* box-shadow: 0 0 10px #409eff;
117+
.gallyer-image-select {
118+
border-radius: 3px;
119+
/* box-shadow: 0 0 10px #409eff;
149120
margin-top: 3px; */
150-
padding: 4px;
151-
background: linear-gradient(
152-
90deg,
153-
rgba(71, 148, 250, 1),
154-
rgba(49, 225, 230, 1)
155-
);
156-
// border: 3px solid #409eff;
157-
}
121+
padding: 4px;
122+
background: linear-gradient(90deg, rgba(71, 148, 250, 1), rgba(49, 225, 230, 1));
123+
// border: 3px solid #409eff;
124+
}
158125
159-
.gallyer-image-unselect {
160-
border-radius: 3px;
161-
background: transparent;
162-
padding: 4px;
163-
//border: 3px solid transparent;
164-
}
126+
.gallyer-image-unselect {
127+
border-radius: 3px;
128+
background: transparent;
129+
padding: 4px;
130+
//border: 3px solid transparent;
131+
}
165132
166-
.image {
167-
height: 64px;
168-
width: 64px;
169-
}
133+
.image {
134+
height: 64px;
135+
width: 64px;
136+
}
170137
}
171138
172-
.gallery-image-col::-webkit-scrollbar
173-
{
174-
width: 4px;
175-
height: 4px;
176-
background-color: #F5F5F5;
139+
.gallery-image-col::-webkit-scrollbar {
140+
width: 4px;
141+
height: 4px;
142+
background-color: #f5f5f5;
177143
}
178-
144+
179145
/*定义滚动条轨道 内阴影+圆角*/
180-
.gallery-image-col::-webkit-scrollbar-track
181-
{
182-
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
183-
border-radius: 2px;
184-
background-color: #F5F5F5;
146+
.gallery-image-col::-webkit-scrollbar-track {
147+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
148+
border-radius: 2px;
149+
background-color: #f5f5f5;
185150
}
186-
151+
187152
/*定义滑块 内阴影+圆角*/
188-
.gallery-image-col::-webkit-scrollbar-thumb
189-
{
190-
border-radius: 2px;
191-
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
192-
background-color: #555;
153+
.gallery-image-col::-webkit-scrollbar-thumb {
154+
border-radius: 2px;
155+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
156+
background-color: #555;
193157
}
194158
</style>

‎website/src/views/layout/components/Header/Menu.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
<div class="header-menu-link" v-for="(l, j) in link" :key="j">
1313
<div class="header-menu-link-text" v-if="isLink(menu.routes[i][j])">
1414
<el-badge type="success" :is-dot="menu.hightlights[i][j]" class="menu-badge">
15-
<a class="header-menu-link-text" :href="menu.routes[i][j]" target="_blank">
15+
<a :href="menu.routes[i][j]" target="_blank">
1616
<span :class="{ 'light-subtitle': light }">{{ l }}</span>
1717
</a>
1818
</el-badge>
1919
</div>
2020
<div class="header-menu-link-text" v-else-if="isDocs(menu.routes[i][j])">
2121
<el-badge type="success" :is-dot="menu.hightlights[i][j]" class="menu-badge">
22-
<a class="header-menu-link-text" :href="menu.routes[i][j]">
22+
<a :href="menu.routes[i][j]">
2323
<span :class="{ 'light-subtitle': light }">{{ l }}</span>
2424
</a>
2525
</el-badge>

0 commit comments

Comments
 (0)