计算器

ghsApp/src/admin/tools/calculator.vue

@@ -12,7 +12,7 @@
 							<view class="discount-entry" @tap.stop="openDiscountPopup" hover-class="discount-entry-hover">
 								<text class="discount-entry-glyph">折</text>
 							</view>
-							<text class="calc-section-title">金额累加</text>
+							<text class="calc-section-title">计算器</text>
 							<view class="history-entry" @tap.stop="openCalcHistory" hover-class="history-entry-hover">
 								<text class="iconfont iconmingxi1 history-entry-icon"></text>
 							</view>
@@ -111,53 +111,49 @@
 		<view class="numpad-dock safe-area-padding">
 				<view class="numpad">
 					<view class="numpad-grid-wrap">
-						<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 class="numpad-row numpad-row-actions">
-								<view
-									class="numpad-key numpad-key-action-dual numpad-key-action-muted"
-									@tap.stop="tapClearCalculator"
-								>
-									<text class="numpad-key-text">清空</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 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-op numpad-cell-mul">
+							<view class="numpad-key numpad-key-op" data-action="calc-mul" @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-op 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-op-col">
-							<view class="numpad-key numpad-key-op" data-action="calc-mul" @tap="onNumpadTap">×</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-op numpad-cell-sub">
+							<view class="numpad-key numpad-key-op" data-action="calc-sub" @tap="onNumpadTap">−</view>
+						</view>
+
+						<view class="numpad-cell numpad-cell-actions-row">
 							<view
-								class="numpad-key numpad-key-op numpad-key-op-add"
-								data-action="calc-add"
+								class="numpad-key numpad-key-action-dual numpad-key-action-muted"
+								@tap.stop="tapClearCalculator"
+							>
+								<text class="numpad-key-text">清空</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 class="numpad-key numpad-key-op" data-action="calc-sub" @tap="onNumpadTap">−</view>
+						</view>
+						<view class="numpad-cell numpad-cell-op numpad-cell-div">
 							<view class="numpad-key numpad-key-op" data-action="calc-div" @tap="onNumpadTap">÷</view>
 						</view>
 					</view>
@@ -1598,77 +1594,74 @@ export default {
 
 .numpad-grid-wrap {
 	flex: 1;
+	min-width: 0;
 	min-height: 0;
-	display: flex;
-	flex-direction: row;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 25%;
+	grid-template-rows: repeat(5, minmax(0, 1fr));
+	box-sizing: border-box;
 	align-items: stretch;
+	justify-items: stretch;
+	width: 100%;
 }
 
-.numpad-digits {
-	flex: 1;
+/* 小程序端 grid 子项 margin 常与 100% 宽高组合失效 → 用 cell 的内边距留白，不配 gap，兼容微信与 App */
+.numpad-cell {
+	box-sizing: border-box;
 	min-width: 0;
 	min-height: 0;
+	overflow: visible;
 	display: flex;
 	flex-direction: column;
+	align-items: stretch;
+	padding-right: 10upx;
+	padding-bottom: 8upx;
 }
 
-.numpad-row {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: row;
-	align-items: stretch;
+.numpad-cell-op {
+	padding-right: 0;
 }
 
-.numpad-row + .numpad-row {
-	margin-top: 8upx;
+.numpad-cell-mul {
+	grid-column: 4;
+	grid-row: 1;
 }
 
-.numpad-op-col {
-	width: 25%;
-	flex-shrink: 0;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	margin-left: 10upx;
+.numpad-cell-add {
+	grid-column: 4;
+	grid-row: 2 / span 2;
 }
 
-.numpad-op-col .numpad-key {
-	margin-left: 0;
+.numpad-cell-sub {
+	grid-column: 4;
+	grid-row: 4;
 }
 
-.numpad-op-col .numpad-key-op + .numpad-key-op {
-	margin-top: 8upx;
+.numpad-cell-div {
+	grid-column: 4;
+	grid-row: 5;
 }
 
-.numpad-key-op {
+.numpad-cell-actions-row {
+	grid-column: 1 / span 3;
+	grid-row: 5;
+	flex-direction: row;
+	align-items: stretch;
+}
+
+.numpad-grid-wrap .numpad-cell-actions-row > .numpad-key {
 	flex: 1;
+	width: auto;
+	min-width: 0;
 	min-height: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 44upx;
-	font-weight: 600;
-	line-height: 1;
-	border-radius: 12upx;
-	background: linear-gradient(180deg, #fff 0%, #f0f2f5 100%);
-	color: #1a2430;
-	box-shadow: 0 3upx 0 #bdc3c9;
-	border: none;
-	box-sizing: border-box;
-	padding: 0;
+	align-self: stretch;
 }
 
-/* + 纵向约占两格，浅色略偏主色、不抢眼 */
-.numpad-key-op-add {
-	flex: 2;
-	background: linear-gradient(180deg, #f7fcfa 0%, #e9f4ee 100%);
-	color: #178a5c;
-	box-shadow: 0 3upx 0 #b5d9c8;
+.numpad-grid-wrap .numpad-cell-actions-row > .numpad-key + .numpad-key {
+	margin-left: 10upx;
 }
 
 .numpad-key {
-	flex: 1;
 	min-width: 0;
 	min-height: 0;
 	display: flex;
@@ -1677,21 +1670,41 @@ export default {
 	text-align: center;
 	font-size: 42upx;
 	font-weight: 600;
-	margin-left: 10upx;
+	margin-left: 0;
 	color: #1a2430;
 	background: linear-gradient(180deg, #fff 0%, #f5f7fa 100%);
 	border-radius: 12upx;
 	box-shadow: 0 3upx 0 #bdc3c9;
 }
 
+.numpad-grid-wrap .numpad-cell > .numpad-key {
+	flex: 1;
+	width: 100%;
+	min-width: 0;
+	min-height: 0;
+	align-self: stretch;
+}
+
 .numpad-key:active {
 	opacity: 0.88;
 	transform: translateY(1px);
 	box-shadow: 0 1upx 0 #a8afb8;
 }
 
-.numpad-row .numpad-key:first-child {
-	margin-left: 0;
+.numpad-grid-wrap .numpad-key.numpad-key-op:not(.numpad-key-op-add) {
+	font-size: 44upx;
+	font-weight: 600;
+	background: linear-gradient(180deg, #fff 0%, #f0f2f5 100%);
+	color: #1a2430;
+	box-shadow: 0 3upx 0 #bdc3c9;
+}
+
+.numpad-grid-wrap .numpad-key.numpad-key-op-add {
+	font-size: 48upx;
+	font-weight: 700;
+	background: #91e3bc;
+	color: #0d6f4f;
+	box-shadow: 0 4upx 0 #4abf86;
 }
 
 .numpad-key-muted {