@cloudbase/weda-ui-mp 0.2.20

package/components/wd-select/select.wxss

@@ -0,0 +1,749 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-form-select-wrap,
+.wd-form-select-option-wrap {
+  --wd-from-select-option-wrap-pd: calc(var(--wd-space-base) * 2);
+  --wd-from-select-option-wrap-border-color: var(--wd-color-gray-4);
+  --wd-from-select-option-wrap-border-radius: var(--wd-border-radius);
+  --wd-from-select-option-wrap-height: 14.75rem;
+  --wd-from-select-option-wrap-box-height: calc(14.75rem - 3.625rem);
+  --wd-from-select-option-wrap-bg: var(--wd-white);
+  --wd-from-select-option-mt: calc(var(--wd-space-base) * 2);
+  --wd-from-select-option-item-label-pd: 0.3125rem 0.5rem;
+  --wd-from-select-option-item-bg-hover: var(--wd-color-gray-1);
+  --wd-from-select-option-item-bg-checked: var(--wd-color-brand-light);
+  --wd-from-select-option-item-border: 0.1875rem;
+  --wd-from-select-option-item-font-weight: var(--wd-font-weight-regular);
+  --wd-from-select-option-item-font-color: var(--wd-color-text-default);
+  --wd-from-select-option-item-font-color-checked: var(--wd-color-brand);
+  --wd-from-select-option-item-font-size: var(--wd-font-size-default);
+  --wd-from-select-option-item-height: 2rem;
+  --wd-from-select-option-item-mt: var(--wd-space-base);
+  --wd-from-select-option-wrap-box-shadow: var(--wd-shadow-default);
+}
+
+.wd-form-select__tag-item {
+  display: flex;
+  line-height: 32px;
+  align-items: center;
+  padding: 0 8px;
+  background: #e7e7e7;
+  border-radius: 3px;
+  margin: 3px 0;
+  font-weight: 400;
+  font-size: 14px;
+  margin-inline-start: 0;
+  margin-inline-end: 8px;
+}
+.wd-form-select__tag-item .t-icon-close {
+  margin-left: 8px;
+  cursor: pointer;
+}
+.wd-form-select__tag-text {
+  color: rgba(0, 0, 0, 0.9);
+  font-weight: 400;
+  font-size: 14px;
+}
+.wd-form-select__tag-group {
+  display: flex;
+  flex-flow: wrap;
+}
+.wd-form-select__tag-group.is-disabled .wd-form-select__tag-item {
+  background: #eeeeee;
+}
+.wd-form-select__tag-group.is-disabled .wd-form-select__tag-item .wd-icon {
+  color: rgba(0, 0, 0, 0.26);
+}
+.wd-form-select__tag-group.is-disabled .wd-form-select__tag-text {
+  color: rgba(0, 0, 0, 0.26);
+}
+.wd-form-select_input {
+  cursor: pointer;
+}
+.wd-form-select_input--range {
+  height: 100%;
+  width: 100%;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.wd-form-select_input-value {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+.wd-form-select_input-split {
+  color: var(--wd-font-gray-3);
+  padding: 0 calc(var(--wd-space-base) * 2);
+}
+.wd-form-select_input-placeholder {
+  color: var(--wd-color-text-placeholder);
+}
+.wd-form-select-wrap {
+  cursor: pointer;
+}
+.wd-form-select-search-box .wd-form-input-wrap {
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--wd-form-input-wrap-border-default);
+}
+.wd-form-select-option {
+  margin-top: var(--wd-from-select-option-mt);
+}
+.wd-form-select-option-wrap {
+  box-shadow: var(--wd-from-select-option-wrap-box-shadow);
+  box-sizing: border-box;
+  max-height: var(--wd-from-select-option-wrap-height);
+  overflow-y: auto;
+  border: 0.5px solid var(--wd-from-select-option-wrap-border-color);
+  padding: var(--wd-from-select-option-wrap-pd);
+  border-radius: var(--wd-from-select-option-wrap-border-radius);
+  background: var(--wd-from-select-option-wrap-bg);
+}
+.wd-form-select-option-loading-box {
+  min-height: var(--wd-from-select-option-wrap-box-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wd-form-select-option-loading-box .wd-empty-retry-text {
+  padding-left: calc(var(--wd-space-base) * 2);
+  color: var(--wd-color-brand);
+  cursor: pointer;
+}
+.wd-form-select-option-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: var(--wd-from-select-option-item-height);
+}
+.wd-form-select-option-item .wd-checkbox-wrap {
+  cursor: pointer;
+  margin: 0 0 0 8px;
+  width: auto;
+}
+.wd-form-select-option-item .wd-checkbox-inner {
+  margin: 0;
+}
+.wd-form-select-option-item:hover:not(.is-checked) {
+  background: var(--wd-from-select-option-item-bg-hover);
+  border-radius: var(--wd-from-select-option-item-border);
+}
+.wd-form-select-option-item.is-checked {
+  color: var(--wd-from-select-option-item-font-color-checked);
+  background: var(--wd-from-select-option-item-bg-checked);
+  border-radius: var(--wd-from-select-option-item-border);
+}
+.wd-form-select-option-item.is-checked .wd-form-select-option-item__label {
+  color: var(--wd-from-select-option-item-font-color-checked);
+}
+.wd-form-select-option-item__label {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  font-weight: var(--wd-from-select-option-item-font-weight);
+  font-size: var(--wd-from-select-option-item-font-size);
+  color: var(--wd-from-select-option-item-font-color);
+  padding: var(--wd-from-select-option-item-label-pd);
+}
+.wd-form-select-option-item + .wd-form-select-option-item {
+  margin-top: var(--wd-from-select-option-item-mt);
+}
+
+.wd-form-select-option-wrap.size-font-sm {
+  font: var(--wd-typography-body-sm);
+}
+.wd-form-select-option-wrap.size-height-sm {
+  height: var(--wd-form-height-sm);
+}
+.wd-form-select-option-wrap.size-width-sm {
+  width: var(--wd-form-width-sm);
+}
+.wd-form-select-option-wrap.size-font-md {
+  font: var(--wd-typography-body-md);
+}
+.wd-form-select-option-wrap.size-height-md {
+  height: var(--wd-form-item-height-md);
+}
+.wd-form-select-option-wrap.size-width-md {
+  width: var(--wd-form-width-md);
+}
+.wd-form-select-option-wrap.size-font-lg {
+  font: var(--wd-typography-body-lg);
+}
+.wd-form-select-option-wrap.size-height-lg {
+  height: var(--wd-form-item-height-lg);
+}
+.wd-form-select-option-wrap.size-width-lg {
+  width: var(--wd-form-width-lg);
+}
+.wd-form-select-option-wrap.size-width-hundred {
+  width: 100%;
+}
+
+.wd-custom-backdrop {
+  position: fixed;
+  /* 与weui-mask 一致 */
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.wd-custom-search {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin: 16px 16px 8px 16px;
+  /* 获取焦点后 */
+}
+.wd-custom-search-box {
+  display: flex;
+  align-items: center;
+  flex: 1 1 0px;
+  background-color: #f1f2f5;
+  border-radius: 4px;
+  height: 100%;
+  position: relative;
+  transition: all 0.5s linear;
+}
+.wd-custom-search-box__label {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.4);
+  left: 12px;
+  transform: translateX(0);
+  font-size: 16px;
+}
+.wd-custom-search-box__search-icon {
+  color: rgba(0, 0, 0, 0.9);
+  margin-right: 4px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc2NTUgMTUuMzI3OUMxMy41Mzc4IDE2LjMyMjEgMTEuOTc0MSAxNi45MTc2IDEwLjI3MTQgMTYuOTE3NkM2LjMyNDUzIDE2LjkxNzYgMy4xMjUgMTMuNzE4MSAzLjEyNSA5Ljc3MTMyQzMuMTI1IDUuODI0NTEgNi4zMjQ1MyAyLjYyNSAxMC4yNzE0IDIuNjI1QzE0LjIxODIgMi42MjUgMTcuNDE3NyA1LjgyNDUxIDE3LjQxNzcgOS43NzEzMkMxNy40MTc3IDExLjQ3NDEgMTYuODIyMSAxMy4wMzc4IDE1LjgyOCAxNC4yNjU1TDIxLjEyNSAxOS41NjI1TDIwLjA2MjYgMjAuNjI1TDE0Ljc2NTUgMTUuMzI3OVpNMTUuOTE1MiA5Ljc3MTMyQzE1LjkxNTIgNi42NTQzNCAxMy4zODg0IDQuMTI3NTIgMTAuMjcxNCA0LjEyNzUyQzcuMTU0MzUgNC4xMjc1MiA0LjYyNzUyIDYuNjU0MzQgNC42Mjc1MiA5Ljc3MTMyQzQuNjI3NTIgMTIuODg4MyA3LjE1NDM1IDE1LjQxNTEgMTAuMjcxNCAxNS40MTUxQzEzLjM4ODQgMTUuNDE1MSAxNS45MTUyIDEyLjg4ODMgMTUuOTE1MiA5Ljc3MTMyWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC40Ii8+Cjwvc3ZnPgo=);
+  background-repeat: no-repeat;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+}
+.wd-custom-search-box__dismiss-icon {
+  position: absolute;
+  right: 12px;
+  color: rgba(0, 0, 0, 0.9);
+}
+.wd-custom-search__btn-cancle {
+  flex: 0 0 auto;
+  display: none;
+  margin-left: 16px;
+  color: rgba(0, 0, 0, 0.6);
+  background-color: transparent;
+  border: none;
+  font-weight: 400;
+  font-size: 16px;
+}
+.wd-custom-search.is-focused .wd-custom-search__btn-cancle {
+  display: inline-flex;
+}
+.wd-custom-search.is-focused .wd-custom-search-box__label {
+  left: 12px;
+  transform: translateX(0);
+}
+.wd-custom-search.is-focused .wd-custom-search-box__search-placeholder {
+  display: none;
+}
+.wd-custom-search .wd-input {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  font-size: 16px;
+  line-height: 24px;
+  background-color: inherit;
+  padding: 0 40px 0 40px;
+  caret-color: var(--wd-color-brand);
+  color: rgba(0, 0, 0, 0.9);
+  border-radius: 4px;
+}
+.wd-custom-picker {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  /* 普通列表 */
+}
+.wd-custom-picker__region-box {
+  padding: 16px;
+  height: 56px;
+  font-weight: 600;
+  font-size: 16px;
+  border-bottom: 1px solid #e7e7e7;
+}
+.wd-custom-picker__region-item + .wd-custom-picker__region-item {
+  margin-left: 24px;
+}
+.wd-custom-picker__region-select {
+  color: rgba(0, 0, 0, 0.4);
+}
+.wd-custom-picker__box {
+  min-height: 328px;
+}
+.wd-custom-picker__box--month {
+  padding: 55px 0;
+  min-height: 328px;
+}
+.wd-custom-picker__inner {
+  background-color: #fff;
+  border-radius: 10px 10px 0 0;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+}
+.wd-custom-picker__inner.is-full {
+  height: 100vh;
+}
+.wd-custom-picker__inner.is-no-border {
+  border-radius: 0;
+}
+.wd-custom-picker__header {
+  height: 48px;
+  flex: 0 0 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e3e6eb;
+}
+.wd-custom-picker__header-confirm, .wd-custom-picker__header-cancle {
+  flex: 0 0 auto;
+  padding: 0 20px;
+  font: var(--wd-typography-body-md);
+  color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+}
+.wd-custom-picker__header-confirm {
+  color: var(--wd-color-brand);
+}
+.wd-custom-picker__header-confirm .wd-icon {
+  color: rgba(0, 0, 0, 0.9);
+}
+.wd-custom-picker__header-confirm.is-disable {
+  color: #bbd3fb;
+}
+.wd-custom-picker__header-title {
+  flex: 1 1 0px;
+  display: flex;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.9);
+}
+.wd-custom-picker__body {
+  flex: 1 1 0px;
+  overflow: hidden;
+}
+.wd-custom-picker__select {
+  border-top: 1px solid #e7e7e7;
+  border-bottom: 1px solid #e7e7e7;
+  padding: 8px 16px;
+}
+.wd-custom-picker__select-date {
+  min-height: 368px;
+}
+.wd-custom-picker__select-time {
+  min-height: 368px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wd-custom-picker__select-item {
+  display: inline-block;
+  padding: 8px 16px;
+  background-color: #f3f3f3;
+  color: rgba(0, 0, 0, 0.9);
+  border-radius: 4px;
+  margin-left: 8px;
+  line-height: 24px;
+  font-weight: 400;
+  font-size: 16px;
+}
+.wd-custom-picker__select-item:first-child {
+  margin-left: 0;
+}
+.wd-custom-picker__select-item.is-current {
+  color: var(--wd-color-brand);
+}
+.wd-custom-picker__columns {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  padding: 0 60px;
+  height: 200px;
+  overflow: hidden;
+  flex: auto;
+}
+.wd-custom-picker__columns.is-no-data {
+  align-items: center;
+}
+.wd-custom-picker__columns.is-no-data::after {
+  display: none;
+}
+.wd-custom-picker__columns.size-s {
+  height: 200px;
+}
+.wd-custom-picker__columns--basics {
+  margin: 16px 0;
+  height: 200px;
+}
+.wd-custom-picker__columns--basics::after {
+  content: "";
+  position: absolute;
+  /* width: 100%; */
+  height: 40px;
+  background-color: #f3f3f3;
+  backdrop-filter: 100%;
+  left: 16px;
+  right: 16px;
+  top: 80px;
+  z-index: 1000;
+  border-radius: 6px;
+}
+.wd-custom-picker__columns--select {
+  padding: 0 16px;
+  height: 310px;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column {
+  scroll-behavior: "smooth";
+  height: 280px;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column .weda-list-view__empty {
+  top: 160px;
+  position: relative;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item {
+  height: 56px;
+  justify-content: flex-start;
+  color: rgba(0, 0, 0, 0.9);
+  position: relative;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  background-color: #e7e7e7;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item.is-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item.is-selected {
+  color: var(--wd-color-brand);
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item.is-selected::after {
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: block;
+  position: absolute;
+  right: 16px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNjUwNTMgMTQuODgyM0wxOC45ODQ1IDUuNTQ4MzRMMjAuMzYzNCA2LjkyNzJMOS42NTA1MyAxNy42NEwyLjk2MTQ5IDEwLjk1MUw0LjM0MDM0IDkuNTcyMTVMOS42NTA1MyAxNC44ODIzWiIgZmlsbD0iIzAwNTJEOSIvPgo8L3N2Zz4K);
+  background-repeat: no-repeat;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item-multiple::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  display: block;
+  position: absolute;
+  left: 0px;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item-multiple .wd-custom-picker__column-item-text-multiple {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 30px;
+  width: 100%;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item-multiple.is-selected::after {
+  content: "";
+  width: 21px;
+  height: 21px;
+  border: none;
+  border-radius: 3px;
+  display: block;
+  position: absolute;
+  left: 0px;
+  background-color: var(--wd-color-brand);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNDAxNDYgNy45NDI3QzMuNDAxNCA3Ljk0MjY0IDMuNDAxNTMgNy45NDI3NiAzLjQwMTQ2IDcuOTQyN0wwLjc1IDUuMjkxMjNMMi41NDM0OSAzLjU0OTE5TDUuMTcyMSA2LjE3NzhMMTEuMzY4NyAwTDEzLjEyNDQgMS43NTU3TDYuOTI3OCA3LjkzMzVMNi45MzcxOCA3Ljk0Mjg5TDYuOTExMDkgNy45NjgyM0M2Ljg1NyA4LjAyMDc3IDYuODAxMTQgOC4wNzAzNyA2Ljc0MzcxIDguMTE3MDRMNi4wNDEyMyA4LjgxNzM4QzUuNTUyODYgOS4zMDQyNyA0Ljc2MjQ0IDkuMzAzNjcgNC4yNzQ4MSA4LjgxNjA0TDMuNDAxNDYgNy45NDI3WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC45Ii8+Cjwvc3ZnPg==);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item--department {
+  display: flex;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item--department .wd-custom-picker__column-item-text {
+  width: 100%;
+  line-height: 1.5;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item--results {
+  display: flex;
+  padding: 16px 0;
+  height: auto;
+  align-items: flex-start;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item--results .wd-custom-picker__column-item-text {
+  width: 100%;
+  line-height: 1.5;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item--results .wd-custom-picker__column-item-text-title {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item--results .wd-custom-picker__column-item-text-title-results {
+  color: var(--wd-color-brand);
+}
+.wd-custom-picker__columns--select .wd-custom-picker__column-item--results .wd-custom-picker__column-item-text-subtitle {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.4);
+}
+.wd-custom-picker__column {
+  flex: 1 1 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: auto;
+  height: 200px;
+  z-index: 1001;
+}
+.wd-custom-picker__column-mask-top, .wd-custom-picker__column-mask-bottom {
+  position: absolute;
+  background: transparent;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  z-index: 1001;
+}
+.wd-custom-picker__column-mask-top {
+  top: 0;
+  background-image: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0) 100%);
+}
+.wd-custom-picker__column-mask-bottom {
+  bottom: 0;
+  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 120%);
+}
+.wd-custom-picker__column::-webkit-scrollbar {
+  display: none;
+}
+.wd-custom-picker__column-item {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(0, 0, 0, 0.26);
+  white-space: pre-wrap;
+}
+.wd-custom-picker__column-item.is-basics {
+  color: rgba(0, 0, 0, 0.6);
+}
+.wd-custom-picker__column-item.is-current {
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.9);
+}
+.wd-custom-picker__column-item-text {
+  width: 100%;
+}
+.wd-custom-picker__checked-box {
+  height: 56px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}
+.wd-custom-picker__checked-label {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  flex: none;
+  margin-right: 16px;
+}
+.wd-custom-picker__checked-tag {
+  width: 100%;
+}
+.wd-custom-picker__checked-tag .wd-form-select__tag-item {
+  border-radius: 6px;
+}
+.wd-custom-picker__checked-count {
+  flex: none;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: right;
+  color: rgba(0, 0, 0, 0.4);
+}
+.wd-custom-picker__list {
+  padding: 0 16px;
+  margin-bottom: 34px;
+  max-height: 280px;
+  overflow: auto;
+}
+.wd-custom-picker__list-item {
+  padding: 16px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: inset 0px -1px 0px #e7e7e7;
+}
+.wd-custom-picker__list-label {
+  font-size: 16px;
+  line-height: 24px;
+}
+.wd-custom-picker__list-dismiss {
+  cursor: pointer;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOC43NSAxMEMxOC43NSA1LjE2NzUxIDE0LjgzMjUgMS4yNSAxMCAxLjI1QzUuMTY3NTEgMS4yNSAxLjI1IDUuMTY3NTEgMS4yNSAxMEMxLjI1IDE0LjgzMjUgNS4xNjc1MSAxOC43NSAxMCAxOC43NUMxNC44MzI1IDE4Ljc1IDE4Ljc1IDE0LjgzMjUgMTguNzUgMTBaTTcuMDg4NjMgNi4xODQ0MkwxMCA5LjExMzQ0TDEyLjkxMTQgNi4xODQ0MkwxMy43OTc5IDcuMDY1NjNMMTAuODgxMiAxMEwxMy43OTc5IDEyLjkzNDRMMTIuOTExNCAxMy44MTU2TDEwIDEwLjg4NjZMNy4wODg2NCAxMy44MTU2TDYuMjAyMSAxMi45MzQ0TDkuMTE4NzkgMTBMNi4yMDIwOCA3LjA2NTYzTDcuMDg4NjMgNi4xODQ0MloiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNCIvPgo8L3N2Zz4K);
+}
+
+/* 几个图标 */
+.wd-icon-arrow-right {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-left: 10px;
+  background-position: center;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguMDc0ODMgMTUuNTc0N0w2LjkyNTc4IDE0LjQyNTdMMTEuMzUxMyAxMC4wMDAyTDYuOTI1NzggNS41NzQ3MUw4LjA3NDgzIDQuNDI1NjZMMTIuOTQyMiA5LjI5MzA4QzEzLjMzMjggOS42ODM2IDEzLjMzMjggMTAuMzE2OCAxMi45NDIyIDEwLjcwNzNMOC4wNzQ4MyAxNS41NzQ3WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC45Ii8+PC9zdmc+);
+}
+
+.wd-icon-turn-pre {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-position: center;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjkyNTIgMTUuNTc0N0wxMy4wNzQyIDE0LjQyNTdMOC42NDg3NCAxMC4wMDAyTDEzLjA3NDIgNS41NzQ3MUwxMS45MjUyIDQuNDI1NjZMNy4wNTc3NSA5LjI5MzA4QzYuNjY3MjMgOS42ODM2IDYuNjY3MjMgMTAuMzE2OCA3LjA1Nzc1IDEwLjcwNzNMMTEuOTI1MiAxNS41NzQ3WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC45Ii8+PC9zdmc+);
+}
+
+.wd-icon-turn-next {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-position: center;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguMDc0ODMgMTUuNTc0N0w2LjkyNTc4IDE0LjQyNTdMMTEuMzUxMyAxMC4wMDAyTDYuOTI1NzggNS41NzQ3MUw4LjA3NDgzIDQuNDI1NjZMMTIuOTQyMiA5LjI5MzA4QzEzLjMzMjggOS42ODM2IDEzLjMzMjggMTAuMzE2OCAxMi45NDIyIDEwLjcwNzNMOC4wNzQ4MyAxNS41NzQ3WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC45Ii8+PC9zdmc+);
+}
+
+/* 年/月份操作区的样式 */
+.wd-custom-calendar-op {
+  line-height: 24px;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+}
+.wd-custom-calendar-op__start {
+  display: flex;
+  align-items: center;
+}
+.wd-custom-calendar-op__end {
+  display: flex;
+  align-items: center;
+}
+.wd-custom-calendar-op__select {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.9);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+.wd-custom-calendar-op__select.is-active {
+  color: var(--wd-color-brand);
+}
+.wd-custom-calendar-op__select.is-active .wd-icon-arrow-right {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNDI1NzggOC4wNzQzNEw1LjU3NDgzIDYuOTI1MjlMMTAuMDAwMyAxMS4zNTA4TDE0LjQyNTggNi45MjUyOUwxNS41NzQ4IDguMDc0MzRMMTAuNzA3NCAxMi45NDE4QzEwLjMxNjkgMTMuMzMyMyA5LjY4MzcyIDEzLjMzMjMgOS4yOTMyIDEyLjk0MThMNC40MjU3OCA4LjA3NDM0WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC45Ii8+PC9zdmc+);
+}
+
+.wd-custom-calendar-op__end .wd-icon-turn-next {
+  margin-left: 16px;
+}
+
+/* 日历展开模式 */
+.wd-custom-calendar {
+  display: flex;
+  flex-direction: column;
+}
+.wd-custom-calendar__weeks {
+  display: flex;
+  color: rgba(0, 0, 0, 0.6);
+  padding: 0 16px;
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: space-between;
+}
+.wd-custom-calendar__weeks-item {
+  /* flex: 1; */
+  line-height: 40px;
+  min-width: 45px;
+  display: flex;
+  justify-content: center;
+}
+
+.wd-custom-calendar__days-row {
+  display: flex;
+  color: rgba(0, 0, 0, 0.9);
+  padding: 4px 16px;
+  width: 100%;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.wd-custom-calendar__days-item {
+  /* flex: 1; */
+  min-width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 16px;
+}
+.wd-custom-calendar__days-item:hover {
+  background-color: #f3f3f3;
+}
+
+.wd-custom-calendar__days-item.is-current {
+  background-color: var(--wd-color-brand);
+  color: #fff;
+}
+
+.wd-custom-calendar__days-item.no-select {
+  color: #c1c1c1;
+  cursor: not-allowed;
+}
+
+.wd-mp-form-item .wd-form-select_input {
+  cursor: unset;
+}