126 lines
3.0 KiB
SCSS
126 lines
3.0 KiB
SCSS
.text-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.font-13 {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.font-12 {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.font-11 {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.text-grey1 {
|
||
color: #888;
|
||
}
|
||
.text-grey2 {
|
||
color: #aaa;
|
||
}
|
||
|
||
.list-cell-arrow::before {
|
||
content: ' ';
|
||
height: 10px;
|
||
width: 10px;
|
||
border-width: 2px 2px 0 0;
|
||
border-color: #c0c0c0;
|
||
border-style: solid;
|
||
-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||
transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||
position: absolute;
|
||
top: 50%;
|
||
margin-top: -6px;
|
||
right: 30rpx;
|
||
}
|
||
|
||
.list-cell {
|
||
position: relative;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
color: #333;
|
||
padding: 26rpx 30rpx;
|
||
}
|
||
|
||
.list-cell:first-child {
|
||
border-radius: 8rpx 8rpx 0 0;
|
||
}
|
||
|
||
.list-cell:last-child {
|
||
border-radius: 0 0 8rpx 8rpx;
|
||
}
|
||
|
||
.list-cell::after {
|
||
content: '';
|
||
position: absolute;
|
||
border-bottom: 1px solid #eaeef1;
|
||
-webkit-transform: scaleY(0.5) translateZ(0);
|
||
transform: scaleY(0.5) translateZ(0);
|
||
transform-origin: 0 100%;
|
||
bottom: 0;
|
||
right: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
|
||
.menu-list {
|
||
margin: 15px 15px;
|
||
|
||
.menu-item-box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.menu-icon {
|
||
color: #007AFF;
|
||
font-size: 16px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.text-right {
|
||
margin-left: auto;
|
||
margin-right: 34rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
/* 极简版（无CSS变量） */
|
||
.mini-btn {
|
||
margin-left: 10rpx !important;
|
||
font-size: 12px !important;
|
||
padding: 5rpx 15rpx !important;
|
||
border-width: 1px !important;
|
||
border-style: solid !important;
|
||
}
|
||
.btn-left .mini-btn:first-child {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
/* 默认按钮 */
|
||
.mini-btn { color: #fff !important; background: #1890ff !important; border-color: #1890ff !important; }
|
||
/* 新增按钮 */
|
||
.add-btn { color: #1890ff !important; background: #e8f4ff !important; border-color: #a3d3ff !important; }
|
||
/* 删除按钮 */
|
||
.del-btn { color: #71e2a3 !important; background: #e7faf0 !important; border-color: #d0f5e0 !important; }
|
||
/* 编辑按钮 */
|
||
.edit-btn { color: #ff9292 !important; background: #ffeded !important; border-color: #ffdbdb !important; }
|
||
.cancel-btn { color: #333 !important; background: #f5f5f5 !important; border-color: #f5f5f5 !important; height: 55rpx; line-height: 55rpx; font-size: 14px !important; }
|
||
.confirm-btn { color: #fff !important; background: #1890ff !important; border-color: #1890ff !important; height: 55rpx; line-height: 55rpx; font-size: 14px !important; }
|
||
|
||
/* hover统一样式 */
|
||
.is-hover {
|
||
color: #fff !important;
|
||
/* 按按钮类型匹配背景色 */
|
||
&.add-btn { background: #1890ff !important; border-color: #1890ff !important; }
|
||
&.del-btn { background: #71e2a3 !important; border-color: #71e2a3 !important; }
|
||
&.edit-btn { background: #ff9292 !important; border-color: #ff9292 !important; }
|
||
&:not(.add-btn):not(.del-btn):not(.edit-btn) { background: #1682e6 !important; border-color: #1682e6 !important; }
|
||
} |