setPassword.vue
2.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<template>
<div id="app">
<v-app id="inspire">
<v-stepper light v-model="e1"> <br/><br/><br/>
<v-stepper-header>
<v-stepper-step step="1" :complete="e1 > 1">设置密码</v-stepper-step>
<!--
作者：348380751@qq.com
时间：2018-03-15
描述：宽屏才可显示
-->
<v-divider></v-divider>
<v-stepper-step step="2" :complete="e1 > 2">确认密码</v-stepper-step>
</v-stepper-header>
<div>
<p id="setPassword" style="float: left;">设置密码</p>
<p id="currentPassword" style="float:right;">确认密码</p>
</div>
<v-stepper-items>
<v-stepper-content step="1">
<v-btn color="primary" @click.native="e1 = 2">Continue</v-btn>
<v-btn flat>Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="2">
<v-btn color="primary" @click.native="e1 = 3">Continue</v-btn>
<v-btn flat>Cancel</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper> <br/><br/><br/>
<div class="inputPassword">
<label style="float: 40%;">
<input type="password" name="pwd" maxlength="1" value="研" size="3"/>
</label>
<label style="float: 45%;">
<input type="password" name="pwd" maxlength="1" value="发" size="3"/>
</label>
<label style="float: 50%;">
<input type="password" name="pwd" maxlength="1" value="最" size="3"/>
</label>
<label style="float: 55%;">
<input type="password" name="pwd" maxlength="1" value="牛" size="3"/>
</label>
<label style="float: 60%;;">
<input type="password" name="pwd" maxlength="1" value="逼" size="3"/>
</label>
</div>
</v-app>
</div>
</template>
<script>
export default {
data: () => ({
e1: '',
})
}
</script>
<style lang="scss" scoped>
body {
height: 100%;
color: #FAEBD7;
}
input{border:1px solid cornflowerblue;background-color:aliceblue;
text-align: center;
}
</style>