Sharkey/src/web/app/desktop/views/pages/welcome.vue

197 lines
3.5 KiB
Vue
Raw Normal View History

2018-02-10 07:56:33 +02:00
<template>
2018-02-10 12:57:37 +02:00
<div class="mk-welcome">
2018-02-10 07:56:33 +02:00
<main>
2018-03-16 20:33:36 +02:00
<div class="top">
<div>
<div>
<h1>Share<br>Everything!</h1>
<p>ようこそ <b>Misskey</b>はTwitter風ミニブログSNSです思ったことや皆と共有したいことを投稿しましょうタイムラインを見れば皆の関心事をすぐにチェックすることもできます<a>詳しく...</a></p>
<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
</div>
<div>
<div>
<header>%fa:comments R% タイムライン</header>
<mk-welcome-timeline/>
</div>
</div>
</div>
2018-02-10 07:56:33 +02:00
</div>
</main>
<mk-forkit/>
<footer>
<div>
2018-02-11 05:42:02 +02:00
<mk-nav :class="$style.nav"/>
<p class="c">{{ copyright }}</p>
2018-02-10 07:56:33 +02:00
</div>
</footer>
2018-02-10 12:57:37 +02:00
<modal name="signup" width="500px" height="auto" scrollable>
<header :class="$style.signupFormHeader">新規登録</header>
2018-02-11 05:08:43 +02:00
<mk-signup :class="$style.signupForm"/>
</modal>
<modal name="signin" width="500px" height="auto" scrollable>
<header :class="$style.signinFormHeader">ログイン</header>
<mk-signin :class="$style.signinForm"/>
2018-02-10 09:22:14 +02:00
</modal>
2018-02-10 07:56:33 +02:00
</div>
</template>
2018-02-10 09:22:14 +02:00
<script lang="ts">
import Vue from 'vue';
2018-02-11 05:42:02 +02:00
import { copyright } from '../../../config';
2018-02-10 09:22:14 +02:00
export default Vue.extend({
2018-02-11 05:42:02 +02:00
data() {
return {
copyright
};
},
2018-02-10 09:22:14 +02:00
methods: {
signup() {
this.$modal.show('signup');
2018-02-11 05:08:43 +02:00
},
signin() {
this.$modal.show('signin');
2018-02-10 09:22:14 +02:00
}
2018-02-10 07:56:33 +02:00
}
2018-02-10 09:22:14 +02:00
});
</script>
<style>
#wait {
right: auto;
left: 15px;
}
2018-02-10 07:56:33 +02:00
</style>
<style lang="stylus" scoped>
2018-03-03 06:47:55 +02:00
@import '~const.styl'
2018-02-10 12:57:37 +02:00
.mk-welcome
2018-02-10 09:22:14 +02:00
display flex
flex-direction column
flex 1
background #eee
$width = 1000px
> main
2018-02-10 07:56:33 +02:00
display flex
flex 1
2018-03-16 20:33:36 +02:00
> .top
display flex
width 100%
background-image url('/assets/welcome.svg')
background-size cover
background-position top center
> div
display flex
max-width $width
margin 0 auto
padding 80px 0 0 0
> div:first-child
margin 0 48px 0 0
color #777
> h1
margin 0
font-weight normal
font-variant small-caps
letter-spacing 12px
> p
margin 0.5em 0
line-height 2em
button
padding 8px 16px
font-size inherit
.signup
color $theme-color
border solid 2px $theme-color
border-radius 4px
&:focus
box-shadow 0 0 0 3px rgba($theme-color, 0.2)
&:hover
color $theme-color-foreground
background $theme-color
&:active
color $theme-color-foreground
background darken($theme-color, 10%)
border-color darken($theme-color, 10%)
.signin
&:focus
color #444
&:hover
color #444
&:active
color #333
> div:last-child
> div
width 410px
background #fff
border-radius 8px
overflow hidden
> header
z-index 1
padding 12px 16px
color #888d94
box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
> .mk-welcome-timeline
max-height 350px
overflow auto
2018-02-10 07:56:33 +02:00
2018-02-10 09:22:14 +02:00
> footer
2018-03-16 20:33:36 +02:00
color #949ea5
2018-02-10 09:22:14 +02:00
background #fff
2018-02-10 07:56:33 +02:00
2018-02-10 09:22:14 +02:00
> div
max-width $width
margin 0 auto
2018-02-11 05:42:02 +02:00
padding 42px 0
2018-02-10 09:22:14 +02:00
text-align center
2018-02-10 07:56:33 +02:00
2018-02-10 09:22:14 +02:00
> .c
2018-02-11 05:42:02 +02:00
margin 16px 0 0 0
2018-02-10 09:22:14 +02:00
font-size 10px
2018-02-10 07:56:33 +02:00
</style>
2018-02-10 12:57:37 +02:00
<style lang="stylus" module>
.signupForm
padding 24px 48px 48px 48px
.signupFormHeader
padding 48px 0 12px 0
margin: 0 48px
font-size 1.5em
color #777
border-bottom solid 1px #eee
2018-02-11 05:08:43 +02:00
.signinForm
padding 24px 48px 48px 48px
.signinFormHeader
padding 48px 0 12px 0
margin: 0 48px
font-size 1.5em
color #777
border-bottom solid 1px #eee
2018-02-11 05:42:02 +02:00
.nav
a
color #666
2018-02-10 12:57:37 +02:00
</style>