.date-scroll { width: 100%; } .date-list { display: flex; padding: 8px 12px 12px; } .date-item { width: 76px; min-width: 76px; height: 86px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,0.04); margin-right: 12px; padding: 8px 10px; box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } .date-item .label { margin-bottom: 6px; color: #999; } .date-item .md { margin-bottom: 6px; color: #000; } .date-item .status { font-size: 12px; color: #999; } .date-item.selected { border: 1px solid $theme-color-500; background: $theme-color-50; } .date-item.selected .label, .date-item.selected .md, .date-item.selected .status { color: $theme-color-500; } .date-item.disabled { opacity: 0.45; } .date-item .check { position: absolute; right: 0; bottom: 0; background: $theme-color-500; color: #fff; width: 18px; height: 18px; border-top-left-radius: 10px; border-bottom-right-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; }