1 | <template>
|
2 | <main
|
3 | class="home"
|
4 | :aria-labelledby="data.heroText !== null ? 'main-title' : null"
|
5 | >
|
6 | <header class="hero">
|
7 | <img
|
8 | v-if="data.heroImage"
|
9 | :src="$withBase(data.heroImage)"
|
10 | :alt="data.heroAlt || 'hero'"
|
11 | >
|
12 |
|
13 | <h1
|
14 | v-if="data.heroText !== null"
|
15 | id="main-title"
|
16 | >
|
17 | {{ data.heroText || $title || 'Hello' }}
|
18 | </h1>
|
19 |
|
20 | <p
|
21 | v-if="data.tagline !== null"
|
22 | class="description"
|
23 | >
|
24 | {{ data.tagline || $description || 'Welcome to your VuePress site' }}
|
25 | </p>
|
26 |
|
27 | <p
|
28 | v-if="data.actionText && data.actionLink"
|
29 | class="action"
|
30 | >
|
31 | <NavLink
|
32 | class="action-button"
|
33 | :item="actionLink"
|
34 | />
|
35 | </p>
|
36 | </header>
|
37 |
|
38 | <div
|
39 | v-if="data.features && data.features.length"
|
40 | class="features"
|
41 | >
|
42 | <div
|
43 | v-for="(feature, index) in data.features"
|
44 | :key="index"
|
45 | class="feature"
|
46 | >
|
47 | <h2>{{ feature.title }}</h2>
|
48 | <p>{{ feature.details }}</p>
|
49 | </div>
|
50 | </div>
|
51 |
|
52 | <Content class="theme-default-content custom" />
|
53 |
|
54 | <div
|
55 | v-if="data.footer"
|
56 | class="footer"
|
57 | >
|
58 | {{ data.footer }}
|
59 | </div>
|
60 |
|
61 | <Content
|
62 | v-else
|
63 | slot-key="footer"
|
64 | class="footer"
|
65 | />
|
66 | </main>
|
67 | </template>
|
68 |
|
69 | <script>
|
70 | import NavLink from '@theme/components/NavLink.vue'
|
71 |
|
72 | export default {
|
73 | name: 'Home',
|
74 |
|
75 | components: { NavLink },
|
76 |
|
77 | computed: {
|
78 | data () {
|
79 | return this.$page.frontmatter
|
80 | },
|
81 |
|
82 | actionLink () {
|
83 | return {
|
84 | link: this.data.actionLink,
|
85 | text: this.data.actionText
|
86 | }
|
87 | }
|
88 | }
|
89 | }
|
90 | </script>
|
91 |
|
92 | <style lang="stylus">
|
93 | .home
|
94 | padding $navbarHeight 2rem 0
|
95 | max-width $homePageWidth
|
96 | margin 0px auto
|
97 | display block
|
98 | .hero
|
99 | text-align center
|
100 | img
|
101 | max-width: 100%
|
102 | max-height 280px
|
103 | display block
|
104 | margin 3rem auto 1.5rem
|
105 | h1
|
106 | font-size 3rem
|
107 | h1, .description, .action
|
108 | margin 1.8rem auto
|
109 | .description
|
110 | max-width 35rem
|
111 | font-size 1.6rem
|
112 | line-height 1.3
|
113 | color lighten($textColor, 40%)
|
114 | .action-button
|
115 | display inline-block
|
116 | font-size 1.2rem
|
117 | color #fff
|
118 | background-color $accentColor
|
119 | padding 0.8rem 1.6rem
|
120 | border-radius 4px
|
121 | transition background-color .1s ease
|
122 | box-sizing border-box
|
123 | border-bottom 1px solid darken($accentColor, 10%)
|
124 | &:hover
|
125 | background-color lighten($accentColor, 10%)
|
126 | .features
|
127 | border-top 1px solid $borderColor
|
128 | padding 1.2rem 0
|
129 | margin-top 2.5rem
|
130 | display flex
|
131 | flex-wrap wrap
|
132 | align-items flex-start
|
133 | align-content stretch
|
134 | justify-content space-between
|
135 | .feature
|
136 | flex-grow 1
|
137 | flex-basis 30%
|
138 | max-width 30%
|
139 | h2
|
140 | font-size 1.4rem
|
141 | font-weight 500
|
142 | border-bottom none
|
143 | padding-bottom 0
|
144 | color lighten($textColor, 10%)
|
145 | p
|
146 | color lighten($textColor, 25%)
|
147 | .footer
|
148 | padding 2.5rem
|
149 | border-top 1px solid $borderColor
|
150 | text-align center
|
151 | color lighten($textColor, 25%)
|
152 |
|
153 | @media (max-width: $MQMobile)
|
154 | .home
|
155 | .features
|
156 | flex-direction column
|
157 | .feature
|
158 | max-width 100%
|
159 | padding 0 2.5rem
|
160 |
|
161 | @media (max-width: $MQMobileNarrow)
|
162 | .home
|
163 | padding-left 1.5rem
|
164 | padding-right 1.5rem
|
165 | .hero
|
166 | img
|
167 | max-height 210px
|
168 | margin 2rem auto 1.2rem
|
169 | h1
|
170 | font-size 2rem
|
171 | h1, .description, .action
|
172 | margin 1.2rem auto
|
173 | .description
|
174 | font-size 1.2rem
|
175 | .action-button
|
176 | font-size 1rem
|
177 | padding 0.6rem 1.2rem
|
178 | .feature
|
179 | h2
|
180 | font-size 1.25rem
|
181 | </style>
|