mirror of
https://github.com/strapi/strapi.git
synced 2025-11-03 19:36:20 +00:00
135 lines
3.0 KiB
Vue
135 lines
3.0 KiB
Vue
<template>
|
|
<div class="home">
|
|
<div class="hero">
|
|
<img v-if="data.heroImage" :src="$withBase(data.heroImage)" alt="hero">
|
|
<h1>{{ data.heroText || $title || 'Hello' }}</h1>
|
|
<p class="description">
|
|
{{ data.tagline || $description || 'Welcome to your VuePress site' }}
|
|
</p>
|
|
<p class="action" v-if="data.actionText && data.actionLink">
|
|
<NavLink class="action-button" :item="actionLink"/>
|
|
</p>
|
|
</div>
|
|
<div class="features" v-if="data.features && data.features.length">
|
|
<div class="feature" v-for="feature in data.features">
|
|
<h2>{{ feature.title }}</h2>
|
|
<p>{{ feature.details }}</p>
|
|
</div>
|
|
</div>
|
|
<Content custom/>
|
|
<div class="footer" v-if="data.footer">
|
|
{{ data.footer }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NavLink from './NavLink.vue'
|
|
|
|
export default {
|
|
components: { NavLink },
|
|
computed: {
|
|
data () {
|
|
return this.$page.frontmatter
|
|
},
|
|
actionLink () {
|
|
return {
|
|
link: this.data.actionLink,
|
|
text: this.data.actionText
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
@import './styles/config.styl'
|
|
|
|
.home
|
|
padding $navbarHeight 2rem 0
|
|
max-width 960px
|
|
margin 0px auto
|
|
.hero
|
|
text-align center
|
|
img
|
|
max-height 280px
|
|
display block
|
|
margin 3rem auto 1.5rem
|
|
h1
|
|
font-size 3rem
|
|
h1, .description, .action
|
|
margin 1.8rem auto
|
|
.description
|
|
max-width 35rem
|
|
font-size 1.6rem
|
|
line-height 1.3
|
|
color lighten($textColor, 40%)
|
|
.action-button
|
|
display inline-block
|
|
font-size 1.2rem
|
|
color #fff
|
|
background-color $accentColor
|
|
padding 0.8rem 1.6rem
|
|
border-radius 4px
|
|
transition background-color .1s ease
|
|
box-sizing border-box
|
|
border-bottom 1px solid darken($accentColor, 10%)
|
|
&:hover
|
|
background-color lighten($accentColor, 10%)
|
|
.features
|
|
border-top 1px solid $borderColor
|
|
padding 1.2rem 0
|
|
margin-top 2.5rem
|
|
display flex
|
|
flex-wrap wrap
|
|
align-items flex-start
|
|
align-content stretch
|
|
justify-content space-between
|
|
.feature
|
|
flex-grow 1
|
|
flex-basis 30%
|
|
max-width 30%
|
|
h2
|
|
font-size 1.4rem
|
|
font-weight 500
|
|
border-bottom none
|
|
padding-bottom 0
|
|
color lighten($textColor, 10%)
|
|
p
|
|
color lighten($textColor, 25%)
|
|
.footer
|
|
padding 2.5rem
|
|
border-top 1px solid $borderColor
|
|
text-align center
|
|
color lighten($textColor, 25%)
|
|
|
|
@media (max-width: $MQMobile)
|
|
.home
|
|
.features
|
|
flex-direction column
|
|
.feature
|
|
max-width 100%
|
|
padding 0 2.5rem
|
|
|
|
@media (max-width: $MQMobileNarrow)
|
|
.home
|
|
padding-left 1.5rem
|
|
padding-right 1.5rem
|
|
.hero
|
|
img
|
|
max-height 210px
|
|
margin 2rem auto 1.2rem
|
|
h1
|
|
font-size 2rem
|
|
h1, .description, .action
|
|
margin 1.2rem auto
|
|
.description
|
|
font-size 1.2rem
|
|
.action-button
|
|
font-size 1rem
|
|
padding 0.6rem 1.2rem
|
|
.feature
|
|
h2
|
|
font-size 1.25rem
|
|
</style>
|