Commit e0ac0d4
潘卓然ParnDeedlit
【站点】【新增】【新增站点示例的hover提示和对齐样式】
1 parent 48358a0 commit e0ac0d4
3 files changed
Lines changed: 130 additions & 166 deletions
File tree
- website
- public/static/demo/config
- src/views
- demo
- layout/components/Header
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -87,14 +87,14 @@ | |||
| 87 | 87 | "StoryBook-MapboxGL" | |
| 88 | 88 | ] | |
| 89 | 89 | ], | |
| 90 | - "hightlights": [[false, false, false]], | ||
| 90 | + "hightlights": [[true, false, false]], | ||
| 91 | 91 | "routes": [["/gallery/vue-cesium#raster", "/gallery/vue-mapboxgl#vue-vector", "/storybook/index.html"]] | |
| 92 | 92 | }, | |
| 93 | 93 | { | |
| 94 | 94 | "title": "开发API", | |
| 95 | 95 | "icon": "iconsanfangAPI", | |
| 96 | 96 | "links": [["Cesium-API", "MapboxGL-API"]], | |
| 97 | - "hightlights": [[false, false]], | ||
| 97 | + "hightlights": [[true, false]], | ||
| 98 | 98 | "routes": [["http://120.78.82.242:8891", "http://120.78.82.242:8892"]] | |
| 99 | 99 | } | |
| 100 | 100 | ] | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,194 +1,158 @@ | |||
| 1 | 1 | <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> | ||
| 40 | 20 | </div> | |
| 41 | - </div> | ||
| 42 | 21 | </template> | |
| 43 | 22 | ||
| 44 | 23 | <script> | |
| 45 | - import { isMobile } from "@/utils/mobile"; | ||
| 24 | + import { isMobile } from '@/utils/mobile'; | ||
| 46 | 25 | ||
| 47 | 26 | 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 | + }; | ||
| 90 | 35 | }, | |
| 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 | + } | ||
| 99 | 41 | }, | |
| 100 | - isCurrent (file) { | ||
| 101 | - if (file == this.current) return true; | ||
| 102 | - return false; | ||
| 42 | + watch: { | ||
| 43 | + '$route.path'() { | ||
| 44 | + this.getCurrentKind(); | ||
| 45 | + } | ||
| 103 | 46 | }, | |
| 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; | ||
| 107 | 51 | ||
| 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 | + } | ||
| 121 | 93 | } | |
| 122 | - } | ||
| 123 | 94 | }; | |
| 124 | 95 | </script> | |
| 125 | 96 | ||
| 126 | 97 | <style lang="less" scoped> | |
| 127 | 98 | .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 | + } | ||
| 133 | 104 | } | |
| 134 | 105 | .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; | ||
| 139 | 110 | ||
| 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 | + } | ||
| 145 | 116 | ||
| 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; | ||
| 149 | 120 | 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 | + } | ||
| 158 | 125 | ||
| 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 | + } | ||
| 165 | 132 | ||
| 166 | - .image { | ||
| 167 | - height: 64px; | ||
| 168 | - width: 64px; | ||
| 169 | - } | ||
| 133 | + .image { | ||
| 134 | + height: 64px; | ||
| 135 | + width: 64px; | ||
| 136 | + } | ||
| 170 | 137 | } | |
| 171 | 138 | ||
| 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; | ||
| 177 | 143 | } | |
| 178 | - | ||
| 144 | + | ||
| 179 | 145 | /*定义滚动条轨道 内阴影+圆角*/ | |
| 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; | ||
| 185 | 150 | } | |
| 186 | - | ||
| 151 | + | ||
| 187 | 152 | /*定义滑块 内阴影+圆角*/ | |
| 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; | ||
| 193 | 157 | } | |
| 194 | 158 | </style> | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -12,14 +12,14 @@ | |||
| 12 | 12 | <div class="header-menu-link" v-for="(l, j) in link" :key="j"> | |
| 13 | 13 | <div class="header-menu-link-text" v-if="isLink(menu.routes[i][j])"> | |
| 14 | 14 | <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"> | ||
| 16 | 16 | <span :class="{ 'light-subtitle': light }">{{ l }}</span> | |
| 17 | 17 | </a> | |
| 18 | 18 | </el-badge> | |
| 19 | 19 | </div> | |
| 20 | 20 | <div class="header-menu-link-text" v-else-if="isDocs(menu.routes[i][j])"> | |
| 21 | 21 | <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]"> | ||
| 23 | 23 | <span :class="{ 'light-subtitle': light }">{{ l }}</span> | |
| 24 | 24 | </a> | |
| 25 | 25 | </el-badge> | |
0 commit comments