Files
doodle-mini/miniprogram/components3.0/word-picker/word-picker.less
T
2026-05-09 09:56:16 +08:00

93 lines
1.8 KiB
Plaintext

.word-picker-content {
padding: 28rpx;
background-color: #ffffff;
overflow: hidden;
}
.word-picker-title {
font-size: 32rpx;
color: #141414;
font-weight: bold;
text-align: center;
margin-bottom: 28rpx;
}
.nav-class {
// background-color: red;
// width: 890rpx;
}
.tab-class {
// width: 220rpx;
// flex-basis: auto !important;
// display: inline-block;
}
.tab-active-class {
color: #93d333;
}
.wrap-class {
margin-bottom: 28rpx;
// background-color: blue;
}
.word-list-wrapper {
padding: 28rpx 0;
overflow-y: auto;
height: 500rpx;
.word-list {
display: grid;
grid-template-columns: repeat(6, 72rpx);
grid-template-rows: repeat(1, 72rpx);
gap: 40rpx;
justify-content: center;
// box-shadow: 0 0 -10rpx rgba(0, 0, 0, 0.2);
// align-items: flex-start;
.word-item {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
background: rgba(240, 240, 240, 1);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #141414;
&.selected {
background: rgb(147, 211, 51);
color: #ffffff;
box-shadow: 0px 2px 4px rgba(147, 211, 51, 0.15);
}
}
}
.word-item-empty {
height: 28rpx;
width: 100%;
}
}
.selected-words {
height: 66rpx;
padding: 28rpx;
font-size: 28rpx;
color: #141414;
.selected-words-text {
font-weight: bold;
color: #93d333;
}
}
.btn-area {
display: flex;
justify-content: space-between;
// margin-bottom: 96rpx;
padding: 0 28rpx;
}