--- /dev/null
+<template>
+ <a id="vs" href="https://vueschool.io/sales/summer-vue/?friend=vuerouter" target="_blank" rel="noreferrer">
+ <div class="vs-iso">
+ <img src="/images/vueschool/vs-iso.svg" alt="Vue School Logo">
+ </div>
+ <div class="vs-logo">
+ <img src="/images/vueschool/vs-logo.svg" alt="Vue School Logo">
+ </div>
+ <div class="vs-core">
+ <div class="vs-backpack">
+ <img src="/images/vueschool/vs-backpack.png" alt="Backpack">
+ </div>
+ <div class="vs-slogan">
+ 3-months Vue School for only $49 <span style="text-decoration: line-through">$75</span>!
+ <span class="vs-slogan-light">
+ Limited Time Offer
+ </span>
+ </div>
+ <div class="vs-button">
+ GET ACCESS
+ </div>
+ </div>
+ <div
+ id="vs-close"
+ class="vs-close"
+ @click.stop.prevent="$emit('close')">
+ <img src="/images/vueschool/close.svg" alt="Close">
+ </div>
+ </a>
+</template>
+
+<style>
+#vs {
+ align-items: center;
+ background-color: #202A5A;
+ box-sizing: border-box;
+ color: #fff;
+ font-family: 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif;
+ justify-content: center;
+ position: fixed;
+ padding: 0 10px;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 100;
+ height: 3.125rem;
+ display: flex;
+}
+
+#vs:hover {
+ text-decoration: none;
+}
+
+@media (min-width: 680px) {
+ #vs {
+ height: 5rem;
+ }
+}
+
+#vs:hover .vs-core .vs-button {
+ background: #f22606;
+}
+
+#vs .vs-iso {
+ position: absolute;
+ left: 20px;
+ height: 26px;
+ display: none;
+}
+
+#vs .vs-iso img {
+ height: 26px;
+}
+
+@media (min-width: 680px) {
+ #vs .vs-iso {
+ left: 40px;
+ height: 40px;
+ display: inline-block;
+ }
+
+ #vs .vs-iso img {
+ height: 40px;
+ }
+}
+
+@media (min-width: 900px) {
+ #vs .vs-iso {
+ display: none;
+ }
+}
+
+#vs .vs-logo {
+ position: absolute;
+ display: none;
+ left: 40px;
+}
+
+@media (min-width: 900px) {
+ #vs .vs-logo {
+ display: block;
+ }
+}
+
+#vs .vs-core {
+ display: flex;
+ align-items: center;
+}
+
+#vs .vs-core .vs-backpack {
+ margin-right: 14px;
+}
+
+#vs .vs-core .vs-backpack img {
+ height: 50px;
+}
+
+@media (min-width: 680px) {
+ #vs .vs-core .vs-backpack img {
+ height: 74px;
+ }
+}
+
+#vs .vs-core .vs-slogan {
+ color: #FFF;
+ font-weight: bold;
+ font-size: 14px;
+ margin-right: 26px;
+}
+
+@media (min-width: 680px) {
+ #vs .vs-core .vs-slogan {
+ margin-right: 0;
+ font-size: 18px;
+ }
+}
+
+#vs .vs-core .vs-slogan > .vs-slogan-light {
+ color: #ff5338;
+ display: block;
+ text-align: left;
+}
+
+@media (min-width: 900px) {
+ #vs .vs-core .vs-slogan > .vs-slogan-light {
+ text-align: center;
+ display: inline;
+ }
+}
+
+#vs .vs-core .vs-button {
+ margin-left: 43px;
+ color: #fff;
+ padding: 13px 24px;
+ border-radius: 40px;
+ display: none;
+ background: #ff5338;
+ font-weight: bold;
+}
+
+@media (min-width: 680px) {
+ #vs .vs-core .vs-button {
+ display: inline-block;
+ }
+}
+
+#vs .vs-close {
+ right: 10px;
+ position: absolute;
+ padding: 10px;
+}
+
+@media (min-width: 680px) {
+ #vs .vs-close {
+ right: 20px;
+ }
+}
+
+#vs .vs-close:hover {
+ color: #56d8ff;
+}
+
+/************************************/
+
+.main-container.has-top-banner #vs {
+ display: flex;
+}
+
+.main-container.has-top-banner {
+ margin-top: 3.125rem;
+}
+
+.main-container.has-top-banner .nav-bar {
+ margin-top: 3.125rem;
+}
+
+.main-container.has-top-banner .sidebar {
+ margin-top: 3.125rem;
+}
+
+.main-container.has-top-banner .page {
+ margin-top: 3.125rem;
+}
+
+@media (min-width: 680px) {
+ .main-container.has-top-banner {
+ margin-top: 5rem;
+ }
+
+ .main-container.has-top-banner .nav-bar {
+ margin-top: 5rem;
+ }
+
+ .main-container.has-top-banner .sidebar {
+ margin-top: 5rem;
+ }
+
+ .main-container.has-top-banner .page {
+ margin-top: 5rem;
+ }
+}
+</style>
<template>
- <ParentLayout>
- <template #sidebar-bottom>
- <div class="sponsors">
- <a
- href="https://github.com/sponsors/posva"
- target="_blank"
- rel="noopener"
- >Sponsors</a
- >
+ <div
+ class="main-container"
+ :class="{ 'has-top-banner': showTopBanner }"
+ >
+ <BannerTop
+ v-if="showTopBanner"
+ @close="closeBannerTop"
+ />
+ <ParentLayout>
+ <template #sidebar-bottom>
+ <div class="sponsors">
+ <a
+ href="https://github.com/sponsors/posva"
+ target="_blank"
+ rel="noopener"
+ >Sponsors</a
+ >
- <a
- v-for="sponsor in sponsors.gold"
- :href="sponsor.href"
- :key="sponsor.href"
- target="_blank"
- rel="noopener"
- >
- <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
- </a>
- </div>
- </template>
- </ParentLayout>
+ <a
+ v-for="sponsor in sponsors.gold"
+ :href="sponsor.href"
+ :key="sponsor.href"
+ target="_blank"
+ rel="noopener"
+ >
+ <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
+ </a>
+ </div>
+ </template>
+ </ParentLayout>
+ </div>
</template>
<script>
+import { defineAsyncComponent } from 'vue'
import DefaultTheme from 'vitepress/dist/client/theme-default'
import sponsors from '../components/sponsors.json'
+const BannerTop = defineAsyncComponent(() => import('../components/BannerTop.vue'))
+
export default {
name: 'Layout',
-
components: {
ParentLayout: DefaultTheme.Layout,
+ BannerTop
},
-
- setup() {
- return { sponsors }
+ data () {
+ return {
+ sponsors,
+ showTopBanner: false
+ }
+ },
+ mounted () {
+ this.showTopBanner = !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')
},
+ methods: {
+ closeBannerTop () {
+ this.showTopBanner = false
+ localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1)
+ }
+ }
}
</script>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+ <g fill="none" fill-rule="evenodd">
+ <g fill="#FFF" fill-rule="nonzero">
+ <path d="M1569.69 33.321c-.415-.414-1.084-.414-1.498 0L1563 38.503l-5.192-5.192c-.414-.415-1.083-.415-1.497 0-.415.414-.415 1.083 0 1.497l5.192 5.192-5.192 5.192c-.415.414-.415 1.083 0 1.497.414.415 1.083.415 1.497 0l5.192-5.192 5.192 5.192c.414.415 1.083.415 1.497 0 .415-.414.415-1.083 0-1.497L1564.497 40l5.192-5.192c.404-.404.404-1.083 0-1.487z" transform="translate(-1556.000000, -33.000000)"/>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="42" viewBox="0 0 37 42">
+ <g fill="none" fill-rule="evenodd">
+ <g fill-rule="nonzero">
+ <g>
+ <g>
+ <path fill="#364FDE" d="M10.648 25.558C7.883 11.884 10.503 2.91 10.503 2.91s-.701 5.463 4.81 14.267c-.07 10.915 2.078 16.609 2.078 16.609l.442-.325-.442.385s-3.267-2.667-6.743-8.288zM23.674 23.622c1.322 1.332 2.555 2.254 3.447 2.692l-.016-.008s1 .36 1.177.12c1.22-1.292 1.519-3.699.705-8.223-4.65-2.656-5.238-6.796-5.238-6.796s-.838 5.748-.075 12.215z" transform="translate(-20 -19) translate(20 19)"/>
+ <path fill="#56D8FF" d="M10.503 2.91s-3.827 13.104 2.65 31.773c.176.539 0 1.137-.472 1.496l-6.829 4.787c-.648.479-1.59.18-1.884-.598C2.143 35.4-2.86 18.946 2.202.935c.235-.718 1-1.137 1.707-.837l6.594 2.812z" transform="translate(-20 -19) translate(20 19)"/>
+ <path fill="#667DFF" d="M23.573 29.238l-6.182 4.548s-3.297-8.736-1.59-25.311c.118-.958 1.119-1.436 1.943-.958l6.005 3.89s-1.177 8.078.53 15.857c.177.777-.118 1.555-.706 1.974zM34.994 19.126l-5.711-3.77c-.353-.24-.883.12-.765.539 1.354 6.043 1.177 9.035-.236 10.53-.176.24-1.177-.119-1.177-.119.942.479 1.177.24 1.177.24.942-.719 4.474-3.292 6.712-4.847.883-.658.883-1.975 0-2.573z" transform="translate(-20 -19) translate(20 19)"/>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40">
+ <g fill="none" fill-rule="evenodd">
+ <g fill-rule="nonzero">
+ <g>
+ <g opacity=".9">
+ <g>
+ <path fill="#364FDE" d="M9.936 24.365C7.355 11.329 9.8 2.775 9.8 2.775s-.654 5.207 4.488 13.6c-.066 10.405 1.939 15.833 1.939 15.833l.412-.31-.412.367s-3.049-2.543-6.291-7.9zM22.09 22.519c1.233 1.27 2.384 2.148 3.215 2.566l-.014-.007s.933.342 1.098.114c1.139-1.232 1.417-3.526.658-7.84-4.34-2.531-4.887-6.478-4.887-6.478s-.782 5.48-.07 11.645z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+ <path fill="#56D8FF" d="M9.8 2.774s-3.57 12.492 2.472 30.29c.165.513 0 1.083-.44 1.426L5.46 39.053c-.604.456-1.483.171-1.757-.57C2 33.748-2.67 18.06 2.055.892c.22-.685.933-1.084 1.593-.799L9.8 2.774z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+ <path fill="#667DFF" d="M21.995 27.873l-5.768 4.335S13.15 23.88 14.744 8.079c.11-.913 1.043-1.369 1.813-.913l5.602 3.708s-1.098 7.7.495 15.116c.165.742-.11 1.483-.66 1.883zM32.651 18.233l-5.328-3.594c-.33-.228-.824.114-.714.513 1.263 5.762 1.099 8.614-.22 10.04-.165.228-1.098-.114-1.098-.114.878.456 1.098.228 1.098.228.88-.685 4.175-3.138 6.262-4.62.824-.628.824-1.883 0-2.453z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+ </g>
+ </g>
+ <path fill="#FFF" d="M54.753 13.93l-3.028-8.623h-2.47l4.287 11.602h2.323L60.17 5.307H57.78l-3.027 8.624zm11.29 2.98h2.079l-.016-.148c-.028-.276-.06-.697-.065-1.167l-.001-6.737h-2.176v4.68c0 .933-.557 1.587-1.522 1.587-1.015 0-1.473-.72-1.473-1.62V8.858h-2.176v5.09c0 1.75 1.112 3.174 3.06 3.174.85 0 1.783-.327 2.225-1.08 0 .327.033.703.066.867zm5.875-4.943c.05-.736.671-1.587 1.8-1.587 1.244 0 1.767.785 1.8 1.587h-3.6zm3.813 2.095c-.262.72-.818 1.227-1.833 1.227-1.08 0-1.98-.769-2.029-1.833h5.76l.024-.366c.005-.095.009-.2.009-.305 0-2.585-1.49-4.172-3.977-4.172-2.061 0-3.96 1.669-3.96 4.238 0 2.716 1.948 4.304 4.157 4.304 1.98 0 3.256-1.162 3.665-2.553l-1.816-.54zM58.22 25.255c-.261-1.31-1.341-3.011-4.156-3.011-2.192 0-4.041 1.57-4.041 3.632 0 1.751 1.194 2.946 3.043 3.322l1.62.327c.9.18 1.408.704 1.408 1.375 0 .818-.671 1.424-1.882 1.424-1.637 0-2.438-1.031-2.537-2.177l-2.094.557c.18 1.652 1.538 3.632 4.614 3.632 2.7 0 4.19-1.8 4.19-3.583 0-1.637-1.13-3.011-3.24-3.42l-1.62-.311c-.851-.164-1.26-.671-1.26-1.31 0-.768.72-1.472 1.816-1.472 1.473 0 1.996.998 2.11 1.636l2.03-.621zm5.466 2.552c1.08 0 1.588.688 1.784 1.358l1.947-.654c-.343-1.358-1.587-2.716-3.78-2.716-2.34 0-4.173 1.783-4.173 4.27 0 2.471 1.866 4.271 4.239 4.271 2.143 0 3.403-1.374 3.763-2.716l-1.914-.638c-.18.622-.737 1.358-1.85 1.358-1.112 0-2.061-.818-2.061-2.275 0-1.456.933-2.258 2.045-2.258zm7.56 1.555c.05-.884.59-1.571 1.506-1.571 1.047 0 1.489.704 1.489 1.604v4.696h2.176v-5.073c0-1.767-.949-3.19-2.994-3.19-.77 0-1.653.261-2.177.883v-4.467h-2.176V34.09h2.176v-4.73zm10.997 2.994c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm9.556 6.561c-1.064 0-2.045-.785-2.045-2.29 0-1.522.981-2.291 2.045-2.291s2.045.769 2.045 2.29c0 1.522-.981 2.291-2.045 2.291zm0-6.561c-2.405 0-4.222 1.783-4.222 4.27 0 2.471 1.817 4.271 4.222 4.271 2.405 0 4.222-1.8 4.222-4.27 0-2.488-1.817-4.271-4.222-4.271zm8.116 8.296V22.244H97.74V34.09h2.176zm15.339-1.735c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm-6.066 8.296v-8.182h-2.176v8.182h2.176zm-2.28-10.386c0-.599.489-1.09 1.085-1.09.608 0 1.097.491 1.097 1.09 0 .6-.489 1.091-1.097 1.091-.596 0-1.085-.491-1.085-1.09zm-4.882 9.011c0-.818.671-1.489 1.49-1.489.834 0 1.505.671 1.505 1.49 0 .818-.671 1.488-1.506 1.488-.818 0-1.489-.67-1.489-1.489z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+ </g>
+ </g>
+ </g>
+</svg>
projects / thirdparty / vuejs / router.git / commitdiff
