|
@@ -5,7 +5,9 @@
|
|
|
<view class="digit-button-box">
|
|
<view class="digit-button-box">
|
|
|
<template v-for="(digit, index) in digits">
|
|
<template v-for="(digit, index) in digits">
|
|
|
<!-- <view :key="index" class="enl-key-button enl-digit" @tap="typing('.')" v-if="index === 9">.</view> -->
|
|
<!-- <view :key="index" class="enl-key-button enl-digit" @tap="typing('.')" v-if="index === 9">.</view> -->
|
|
|
- <view :key="index" class="enl-key-button enl-digit" @tap="typing(digit)">{{digit}}</view>
|
|
|
|
|
|
|
+ <view :key="index" class="enl-key-button enl-digit" @tap="typing(digit)">
|
|
|
|
|
+ <text>{{digit}}</text>
|
|
|
|
|
+ </view>
|
|
|
</template>
|
|
</template>
|
|
|
<view class="enl-key-button enl-digit" v-if="!digital">
|
|
<view class="enl-key-button enl-digit" v-if="!digital">
|
|
|
<!-- <i class="iconfont icon-shouqijianpan enl-middle" @tap="deactivate"></i> -->
|
|
<!-- <i class="iconfont icon-shouqijianpan enl-middle" @tap="deactivate"></i> -->
|
|
@@ -16,7 +18,7 @@
|
|
|
<view class="enl-key-button special-button enl-gray" @tap="backspace"><i class="iconfont icon-backspace enl-large"></i></view>
|
|
<view class="enl-key-button special-button enl-gray" @tap="backspace"><i class="iconfont icon-backspace enl-large"></i></view>
|
|
|
<view class="enl-key-button special-button enl-gray" @tap="enter">
|
|
<view class="enl-key-button special-button enl-gray" @tap="enter">
|
|
|
<!-- <i class="iconfont icon-huiche enl-large"></i> -->
|
|
<!-- <i class="iconfont icon-huiche enl-large"></i> -->
|
|
|
- 确定
|
|
|
|
|
|
|
+ <text>确定</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -24,7 +26,9 @@
|
|
|
<view class="line" v-for="(letters, index) in lines" :key="index">
|
|
<view class="line" v-for="(letters, index) in lines" :key="index">
|
|
|
<view class="enl-letter enl-key-button special-key enl-gray" v-if="index === 3 && mode === 'letter'" @tap="toggleCase"><i
|
|
<view class="enl-letter enl-key-button special-key enl-gray" v-if="index === 3 && mode === 'letter'" @tap="toggleCase"><i
|
|
|
:class="'iconfont ' + (lowercase ? 'icon-xiaoxie' : 'icon-daxie')"></i></view>
|
|
:class="'iconfont ' + (lowercase ? 'icon-xiaoxie' : 'icon-daxie')"></i></view>
|
|
|
- <view class="enl-letter enl-key-button normal" v-for="letter in letters" @tap="typing(letter)" :key="letter">{{letter}}</view>
|
|
|
|
|
|
|
+ <view class="enl-letter enl-key-button normal" v-for="letter in letters" @tap="typing(letter)" :key="letter">
|
|
|
|
|
+ <text>{{letter}}</text>
|
|
|
|
|
+ </view>
|
|
|
<view class="enl-letter enl-key-button special-key enl-gray" v-if="index === 3" @tap="backspace"><i class="iconfont icon-backspace"></i></view>
|
|
<view class="enl-letter enl-key-button special-key enl-gray" v-if="index === 3" @tap="backspace"><i class="iconfont icon-backspace"></i></view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="line special-line">
|
|
<view class="line special-line">
|
|
@@ -67,6 +71,10 @@
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
default: true
|
|
default: true
|
|
|
},
|
|
},
|
|
|
|
|
+ isEffect:{
|
|
|
|
|
+ type:Boolean,
|
|
|
|
|
+ default: false
|
|
|
|
|
+ }
|
|
|
/* ,
|
|
/* ,
|
|
|
value: String */
|
|
value: String */
|
|
|
},
|
|
},
|
|
@@ -166,7 +174,9 @@
|
|
|
this.lines = temp;
|
|
this.lines = temp;
|
|
|
},
|
|
},
|
|
|
visible(val) {
|
|
visible(val) {
|
|
|
- this.cls = val ? 'slideup' : 'slidedown';
|
|
|
|
|
|
|
+ if(this.isEffect) {
|
|
|
|
|
+ this.cls = val ? 'slideup' : 'slidedown';
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
@@ -187,14 +197,15 @@
|
|
|
|
|
|
|
|
.iconfont {
|
|
.iconfont {
|
|
|
font-family: "iconfont" !important;
|
|
font-family: "iconfont" !important;
|
|
|
- font-size: 40upx;
|
|
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
font-style: normal;
|
|
font-style: normal;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.enl-size {
|
|
.enl-size {
|
|
|
- font-size: 40rpx;
|
|
|
|
|
|
|
+ // font-size: 24rpx;
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
.enl-size_custom {
|
|
.enl-size_custom {
|
|
|
// width: 700rpx!important;
|
|
// width: 700rpx!important;
|
|
@@ -203,7 +214,7 @@
|
|
|
.enl-key-button {
|
|
.enl-key-button {
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- vertical-align: middle;
|
|
|
|
|
|
|
+ // vertical-align: middle;
|
|
|
border: 1px solid #e6e6e6;
|
|
border: 1px solid #e6e6e6;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
@@ -213,7 +224,6 @@
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
user-select: none;
|
|
user-select: none;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
-
|
|
|
|
|
&:active {
|
|
&:active {
|
|
|
background: #d6d6d6;
|
|
background: #d6d6d6;
|
|
|
scale: 0.7;
|
|
scale: 0.7;
|
|
@@ -226,43 +236,46 @@
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
background: #f5f5f5;
|
|
background: #f5f5f5;
|
|
|
- padding: .2em 0;
|
|
|
|
|
|
|
+ padding: 1% 0;
|
|
|
|
|
+ height: 100%;
|
|
|
z-index: 100;
|
|
z-index: 100;
|
|
|
/*全键盘*/
|
|
/*全键盘*/
|
|
|
.full-keyboard {
|
|
.full-keyboard {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 100%;
|
|
|
.line {
|
|
.line {
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
-
|
|
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ width: 100%;
|
|
|
&:not(:last-child) {
|
|
&:not(:last-child) {
|
|
|
- margin-bottom: 0.5em;
|
|
|
|
|
|
|
+ // margin-bottom: 1%;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
.enl-letter {
|
|
.enl-letter {
|
|
|
- height: 1.7em;
|
|
|
|
|
- line-height: 1.7em;
|
|
|
|
|
- font-size: 1em;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ height: 95%;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ padding: 0rpx 0rpx;
|
|
|
&:not(:last-child) {
|
|
&:not(:last-child) {
|
|
|
- margin-right: 0.12em;
|
|
|
|
|
- // margin-right: 0.2em;
|
|
|
|
|
|
|
+ margin-right: 1%;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.normal {
|
|
.normal {
|
|
|
// width: 1.73em;
|
|
// width: 1.73em;
|
|
|
- width: 1.65em;
|
|
|
|
|
|
|
+ width: 9%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.special-key {
|
|
.special-key {
|
|
|
- width: 2.6em;
|
|
|
|
|
|
|
+ width: 9%;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.special-line {
|
|
.special-line {
|
|
|
- padding: 0 0.35em;
|
|
|
|
|
|
|
+ padding: 0 1%;
|
|
|
display: flex !important;
|
|
display: flex !important;
|
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
|
-
|
|
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
.space {
|
|
.space {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -271,7 +284,8 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.swith-key {
|
|
.swith-key {
|
|
|
- width: 2.6em;
|
|
|
|
|
|
|
+ width: 13%;
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.enl-logo {
|
|
.enl-logo {
|
|
@@ -284,40 +298,51 @@
|
|
|
.digit-keyboard {
|
|
.digit-keyboard {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
flex-direction: row;
|
|
|
- font-size: 28rpx;
|
|
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
|
+ height: 100%;
|
|
|
.digit-button-box {
|
|
.digit-button-box {
|
|
|
- padding: 0 .2em;
|
|
|
|
|
- max-width: 420rpx;
|
|
|
|
|
|
|
+ padding: 0 1%;
|
|
|
|
|
+ flex: 80;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
.enl-digit {
|
|
.enl-digit {
|
|
|
- width: 4.46em;
|
|
|
|
|
- height: 2.5em;
|
|
|
|
|
- line-height: 2.5em;
|
|
|
|
|
- margin-bottom: .35em;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ width: 32%;
|
|
|
|
|
+ height: 23%;
|
|
|
|
|
+ // line-height: 20%;
|
|
|
|
|
+ margin-bottom: 1%;
|
|
|
|
|
+ // vertical-align: middle;
|
|
|
|
|
+ // display: flex;
|
|
|
|
|
+ // align-items: center;
|
|
|
&:nth-child(10),
|
|
&:nth-child(10),
|
|
|
&:nth-child(11),
|
|
&:nth-child(11),
|
|
|
&:nth-child(12) {
|
|
&:nth-child(12) {
|
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
&:not(:last-child) {
|
|
&:not(:last-child) {
|
|
|
- margin-right: .35em;
|
|
|
|
|
|
|
+ margin-right: 1%;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ & .enl-key-button {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.special-button-box {
|
|
.special-button-box {
|
|
|
- flex: 0;
|
|
|
|
|
- padding: 0 .35em 0 0;
|
|
|
|
|
|
|
+ flex: 20;
|
|
|
|
|
+ padding: 0 3% 0 0;
|
|
|
.special-button {
|
|
.special-button {
|
|
|
- display: block;
|
|
|
|
|
- line-height: 5.5em;
|
|
|
|
|
- height: 5.5em;
|
|
|
|
|
- width: 4em;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ line-height: 20%;
|
|
|
|
|
+ height: 45%;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
&:not(:last-child) {
|
|
&:not(:last-child) {
|
|
|
- margin-bottom: .35em;
|
|
|
|
|
|
|
+ margin-bottom: 3%;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -332,11 +357,11 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.enl-large {
|
|
.enl-large {
|
|
|
- font-size: 2em !important;
|
|
|
|
|
|
|
+ font-size: 24rpx !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.enl-middle {
|
|
.enl-middle {
|
|
|
- font-size: 1.2em !important;
|
|
|
|
|
|
|
+ font-size: 24rpx !important;
|
|
|
display: block;
|
|
display: block;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|