|
|
@@ -116,42 +116,48 @@
|
|
|
<view class="keyboard-body_box">
|
|
|
<view class="numpad">
|
|
|
<view class="numpad-grid-wrap">
|
|
|
- <view class="numpad-main-band">
|
|
|
- <view class="numpad-digits">
|
|
|
- <view class="numpad-row">
|
|
|
- <view class="numpad-key" data-char="1" @tap="onNumpadTap">1</view>
|
|
|
- <view class="numpad-key" data-char="2" @tap="onNumpadTap">2</view>
|
|
|
- <view class="numpad-key" data-char="3" @tap="onNumpadTap">3</view>
|
|
|
- </view>
|
|
|
- <view class="numpad-row">
|
|
|
- <view class="numpad-key" data-char="4" @tap="onNumpadTap">4</view>
|
|
|
- <view class="numpad-key" data-char="5" @tap="onNumpadTap">5</view>
|
|
|
- <view class="numpad-key" data-char="6" @tap="onNumpadTap">6</view>
|
|
|
- </view>
|
|
|
- <view class="numpad-row">
|
|
|
- <view class="numpad-key" data-char="7" @tap="onNumpadTap">7</view>
|
|
|
- <view class="numpad-key" data-char="8" @tap="onNumpadTap">8</view>
|
|
|
- <view class="numpad-key" data-char="9" @tap="onNumpadTap">9</view>
|
|
|
- </view>
|
|
|
- <view class="numpad-row">
|
|
|
- <view class="numpad-key numpad-key-muted" data-char="." @tap="onNumpadTap">.</view>
|
|
|
- <view class="numpad-key" data-char="0" @tap="onNumpadTap">0</view>
|
|
|
- <view class="numpad-key" data-char="00" @tap="onNumpadTap">00</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="numpad-op-col">
|
|
|
+ <view class="numpad-keyboard-grid">
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="1" @tap="onNumpadTap">1</view></view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="2" @tap="onNumpadTap">2</view></view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="3" @tap="onNumpadTap">3</view></view>
|
|
|
+ <view class="numpad-cell numpad-cell-mul">
|
|
|
<view class="numpad-key numpad-key-op" data-action="calc-mul" @tap="onNumpadTap">×</view>
|
|
|
- <view class="numpad-key numpad-key-op" data-action="calc-add" @tap="onNumpadTap">+</view>
|
|
|
+ </view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="4" @tap="onNumpadTap">4</view></view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="5" @tap="onNumpadTap">5</view></view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="6" @tap="onNumpadTap">6</view></view>
|
|
|
+ <view class="numpad-cell numpad-cell-add">
|
|
|
+ <view class="numpad-key numpad-key-op numpad-key-op-add" data-action="calc-add" @tap="onNumpadTap">+</view>
|
|
|
+ </view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="7" @tap="onNumpadTap">7</view></view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="8" @tap="onNumpadTap">8</view></view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="9" @tap="onNumpadTap">9</view></view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key numpad-key-muted" data-char="." @tap="onNumpadTap">.</view></view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="0" @tap="onNumpadTap">0</view></view>
|
|
|
+ <view class="numpad-cell"><view class="numpad-key" data-char="00" @tap="onNumpadTap">00</view></view>
|
|
|
+ <view class="numpad-cell numpad-cell-sub">
|
|
|
<view class="numpad-key numpad-key-op" data-action="calc-sub" @tap="onNumpadTap">−</view>
|
|
|
- <view class="numpad-key numpad-key-op" data-action="calc-div" @tap="onNumpadTap">÷</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="numpad-row numpad-row-actions numpad-row-full">
|
|
|
- <view class="numpad-key numpad-key-action-dual numpad-key-op-muted" data-action="calc-clear" @tap="onNumpadTap">
|
|
|
- <text class="numpad-key-text numpad-key-text-clear">清空</text>
|
|
|
+ <view class="numpad-cell numpad-cell-actions">
|
|
|
+ <view class="numpad-key-actions-pair">
|
|
|
+ <view
|
|
|
+ class="numpad-key numpad-key-danger numpad-key-action-dual"
|
|
|
+ data-action="calc-clear"
|
|
|
+ @tap="onNumpadTap"
|
|
|
+ >
|
|
|
+ <text class="numpad-key-text numpad-key-text-clear">清空</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="numpad-key numpad-key-danger numpad-key-action-dual"
|
|
|
+ data-action="backspace"
|
|
|
+ @tap="onNumpadTap"
|
|
|
+ >
|
|
|
+ <text class="numpad-key-text">删除</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="numpad-key numpad-key-danger numpad-key-action-dual" data-action="backspace" @tap="onNumpadTap">
|
|
|
- <text class="numpad-key-text">删除</text>
|
|
|
+ <view class="numpad-cell numpad-cell-div">
|
|
|
+ <view class="numpad-key numpad-key-op" data-action="calc-div" @tap="onNumpadTap">÷</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="numpad-row numpad-row-cancelrow numpad-row-full">
|
|
|
@@ -1915,61 +1921,103 @@ export default {
|
|
|
flex-direction: column;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
-.numpad-main-band {
|
|
|
+/* 5 行 × 4 列，与示意图一致；不用 gap，用单元格外边距（兼容 nvue） */
|
|
|
+.numpad-keyboard-grid {
|
|
|
flex: 1;
|
|
|
min-height: 0;
|
|
|
+ min-width: 0;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 26%;
|
|
|
+ grid-template-rows: repeat(5, minmax(0, 1fr));
|
|
|
+ align-items: stretch;
|
|
|
+ justify-items: stretch;
|
|
|
+ margin-right: -8upx;
|
|
|
+ margin-bottom: -8upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.numpad-keyboard-grid > .numpad-cell {
|
|
|
+ margin-right: 8upx;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-width: 0;
|
|
|
+ min-height: 0;
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
+ flex-direction: column;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
-.numpad-digits {
|
|
|
+.numpad-keyboard-grid .numpad-cell > .numpad-key,
|
|
|
+.numpad-keyboard-grid .numpad-cell > .numpad-key-actions-pair {
|
|
|
flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 0;
|
|
|
min-width: 0;
|
|
|
+ margin-left: 0;
|
|
|
+ align-self: stretch;
|
|
|
+}
|
|
|
+.numpad-cell-mul {
|
|
|
+ grid-column: 4;
|
|
|
+ grid-row: 1;
|
|
|
+}
|
|
|
+.numpad-cell-add {
|
|
|
+ grid-column: 4;
|
|
|
+ grid-row: 2 / span 2;
|
|
|
+}
|
|
|
+.numpad-cell-sub {
|
|
|
+ grid-column: 4;
|
|
|
+ grid-row: 4;
|
|
|
+}
|
|
|
+.numpad-cell-div {
|
|
|
+ grid-column: 4;
|
|
|
+ grid-row: 5;
|
|
|
+}
|
|
|
+.numpad-cell-actions {
|
|
|
+ grid-column: 1 / span 3;
|
|
|
+ grid-row: 5;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- min-height: 0;
|
|
|
+ align-items: stretch;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
-.numpad-digits .numpad-row {
|
|
|
- flex: 1;
|
|
|
+.numpad-key-actions-pair {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: stretch;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ min-width: 0;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
-.numpad-op-col {
|
|
|
- width: 26%;
|
|
|
- flex-shrink: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-left: 8upx;
|
|
|
+.numpad-key-actions-pair > .numpad-key {
|
|
|
+ flex: 1 1 0;
|
|
|
+ min-width: 0;
|
|
|
+ margin-left: 0;
|
|
|
}
|
|
|
-.numpad-op-col .numpad-key {
|
|
|
- margin-left: 0;
|
|
|
+.numpad-key-actions-pair > .numpad-key + .numpad-key {
|
|
|
+ margin-left: 8upx;
|
|
|
}
|
|
|
-.numpad-op-col .numpad-key-op {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- min-height: 44upx;
|
|
|
- line-height: normal;
|
|
|
- font-size: 22upx;
|
|
|
- font-weight: 600;
|
|
|
+
|
|
|
+.numpad-keyboard-grid .numpad-key.numpad-key-op {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 22upx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: normal;
|
|
|
+ min-height: 0;
|
|
|
}
|
|
|
-.numpad-op-col .numpad-key-op + .numpad-key-op {
|
|
|
- margin-top: 8upx;
|
|
|
+.numpad-keyboard-grid .numpad-key.numpad-key-op-add {
|
|
|
+ background: #09c567;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 600;
|
|
|
+ box-shadow: 0 2upx 0 #078a4a;
|
|
|
}
|
|
|
-.numpad-key-op-muted {
|
|
|
- font-size: 14upx;
|
|
|
- font-weight: 600;
|
|
|
- background: #e8e8e8;
|
|
|
- box-shadow: 0 2upx 0 #bdbdbd;
|
|
|
+.numpad-keyboard-grid .numpad-key.numpad-key-op-add:active {
|
|
|
+ background: #08b35d;
|
|
|
}
|
|
|
+
|
|
|
.numpad-key-text-clear {
|
|
|
color: #d32f2f;
|
|
|
-}
|
|
|
-.keyboard-body_box .numpad-op-col .numpad-key-op {
|
|
|
- min-height: 0;
|
|
|
-}
|
|
|
-.keyboard-body_box .numpad-row {
|
|
|
- flex: 1;
|
|
|
- min-height: 40upx;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
.numpad-row {
|
|
|
display: flex;
|
|
|
@@ -2007,10 +2055,9 @@ export default {
|
|
|
box-shadow: 0 1upx 0 #bbbbbb;
|
|
|
}
|
|
|
}
|
|
|
-.numpad-key-muted {
|
|
|
- font-size: 22upx;
|
|
|
- font-weight: 400;
|
|
|
- color: #555555;
|
|
|
+.numpad-keyboard-grid .numpad-key {
|
|
|
+ height: auto;
|
|
|
+ line-height: normal;
|
|
|
}
|
|
|
.numpad-key-text {
|
|
|
font-size: 14upx;
|
|
|
@@ -2034,9 +2081,6 @@ export default {
|
|
|
.numpad-key-danger .numpad-key-text {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
-.numpad-row-actions {
|
|
|
- margin-top: 10upx;
|
|
|
-}
|
|
|
.numpad-key-action-dual {
|
|
|
flex: 1;
|
|
|
}
|
