DeXun/klp-mono
9
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(easycode): 更新按钮网格布局和样式

Browse Source 
调整按钮网格布局为3列4行，优化按钮样式支持文字换行
更新版本号至klp 1.3.11
This commit is contained in:
砂糖
2025-11-11 09:18:41 +08:00
parent b699240737
commit 04ab46b44b
2 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apps/hand-factory/pages/easycode/easycode.vue
View File

@@ -503,34 +503,39 @@
/* 按钮网格布局 */
.btn-grid {
display: grid;
grid-template-columns: 200rpx 200rpx;
/* 固定按钮宽度 */
grid-template-rows: repeat(2, 1fr);
gap: 40rpx;
/* 按钮间距 */
margin-bottom: 60rpx;
display: grid;
grid-template-columns: 200rpx 200rpx 200rpx;
/* 固定按钮宽度 */
grid-template-rows: repeat(4, 1fr);
gap: 40rpx;
/* 按钮间距 */
margin-bottom: 60rpx;
}
/* 操作类型按钮样式 */
/* 操作类型按钮样式 - 修改后 */
.type-btn {
width: 200rpx;
height: 150rpx;
line-height: 150rpx;
/* 文字竖直居中 */
font-size: 36rpx;
color: #333;
background-color: #fff;
border-radius: 12rpx;
border: none;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
width: 200rpx;
height: 150rpx;
white-space: normal; /* 允许文字换行 */
line-height: 1.4; /* 适配换行的行高 */
padding: 10rpx 0; /* 上下内边距优化 */
font-size: 30rpx; /* 字体缩小 */
color: #333;
background-color: #fff;
border-radius: 12rpx;
border: none;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.type-btn:active {
background-color: #f0f0f0;
box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
transform: scale(0.98);
background-color: #f0f0f0;
box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
transform: scale(0.98);
}
/* 退出登录按钮容器 */