forked from FoundKeyGang/FoundKey
wip
This commit is contained in:
parent
c869883d76
commit
7664354187
2 changed files with 22 additions and 9 deletions
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<form class="form" @submit.prevent="onSubmit" autocomplete="off">
|
||||
<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off">
|
||||
<label class="username">
|
||||
<p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
|
||||
<input v-model="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required @keyup="onChangeUsername"/>
|
||||
|
@ -24,7 +24,7 @@
|
|||
</label>
|
||||
<label class="retype-password">
|
||||
<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
|
||||
<input v-model="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required @keyup="onChangePasswordRetype"/>
|
||||
<input v-model="retypedPassword" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required @keyup="onChangePasswordRetype"/>
|
||||
<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p>
|
||||
<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p>
|
||||
</label>
|
||||
|
@ -145,12 +145,12 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.form
|
||||
.mk-signup
|
||||
min-width 302px
|
||||
|
||||
label
|
||||
display block
|
||||
margin 16px 0
|
||||
margin 0 0 16px 0
|
||||
|
||||
> .caption
|
||||
margin 0 0 4px 0
|
||||
|
@ -260,7 +260,7 @@ export default Vue.extend({
|
|||
color #555
|
||||
|
||||
button
|
||||
margin 0 0 32px 0
|
||||
margin 0
|
||||
padding 16px
|
||||
width 100%
|
||||
font-size 1em
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="root">
|
||||
<div class="mk-welcome">
|
||||
<main>
|
||||
<div>
|
||||
<h1>Share<br>Everything!</h1>
|
||||
|
@ -17,8 +17,9 @@
|
|||
<p class="c">{ _COPYRIGHT_ }</p>
|
||||
</div>
|
||||
</footer>
|
||||
<modal name="signup">
|
||||
<mk-signup></mk-signup>
|
||||
<modal name="signup" width="500px" height="auto" scrollable>
|
||||
<header :class="$style.signupFormHeader">新規登録</header>
|
||||
<mk-signup :class="$style.signupForm"></mk-signup>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -43,7 +44,7 @@ export default Vue.extend({
|
|||
</style>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root
|
||||
.mk-welcome
|
||||
display flex
|
||||
flex-direction column
|
||||
flex 1
|
||||
|
@ -127,3 +128,15 @@ export default Vue.extend({
|
|||
font-size 10px
|
||||
|
||||
</style>
|
||||
|
||||
<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
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue