diff --git a/index.html b/index.html index 030a6ff51bfc6f6adcc472f6d8c02db92ce947a8..f157df42ca54c16bb53525c25eb73a032620e9f4 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Vite App diff --git a/src/App.vue b/src/App.vue index e864195002371619c22d0454351235745b2a4f3f..1f91d853a31bee0aee1f377a995bc63134f552ad 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,82 +4,11 @@ import HelloWorld from './components/HelloWorld.vue' diff --git a/src/assets/main.css b/src/assets/main.css index c133f9156b43080992482c4805bb9d6ad813c187..a8c9a058a021f6cce4b88dd205c0aa1ca1601174 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,35 +1,84 @@ -@import "./base.css"; +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; + text-decoration: none; +} -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} - font-weight: normal; +ol, ul { + list-style: none; } -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; +blockquote, q { + quotes: none; } -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } +table { + border-collapse: collapse; + border-spacing: 0; +} + +a { + color: var(--el-color-primary); +} + +/*scroll*/ +/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/ +::-webkit-scrollbar { + width: 8px; + height: 8px; + background-color: transparent; +} - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } +body { + overflow-x: hidden; +} + +::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.2); + border-radius: 5px; + transition: background-color ease 1s; +} + +::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 1); +} + +/*定义滚动条的轨道，内阴影及圆角*/ +::-webkit-scrollbar-track { + background-color: transparent; +} + +#app { + height: 100vh; + width: 100vw; } diff --git a/src/router/index.js b/src/router/index.js index 6114818a88b41ac48d97d9cb25241e7128c5cd33..ac8b2e0b507856c1db66ae80ca6e06f101ea124a 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,15 +7,7 @@ const router = createRouter({ { path: '/', name: 'home', - component: HomeView - }, - { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') + component: () => import('../views/TMap/index.vue') } ] }) diff --git a/src/views/TMap/InfoWindow.vue b/src/views/TMap/InfoWindow.vue new file mode 100644 index 0000000000000000000000000000000000000000..6d6d9589a84bb612ea1259408823efa7ae32faf9 --- /dev/null +++ b/src/views/TMap/InfoWindow.vue @@ -0,0 +1,133 @@ + + + + + diff --git a/src/views/TMap/index.vue b/src/views/TMap/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..4e767b0c0eb8a264913019e08c09655063656077 --- /dev/null +++ b/src/views/TMap/index.vue @@ -0,0 +1,466 @@ + + + + +