mschool/src/component-ui/index.less

// 公用变量
@import './global.less';
// :global {
// 单元格
.van-cell-group--inset {
  margin: 0 var(--k-padding-page);
  border-radius: var(--k-radius-xl);
}
.van-cell {
  font-size: 15px;
  padding: 12px 18px;
  color: var(--k-gray-1);
}

// 导航 - ✅
.van-nav-bar__left,
.van-nav-bar__right {
  padding: 0 var(--k-padding-md);
}

// 选项卡 侧边导航栏(分类选择) - ✅
.van-tabs--card {
  padding: 0;
  .van-tabs__nav {
    background-color: transparent;
  }
  .van-tabs__nav--card {
    border-radius: var(--k-radius-max);
    border: 0;
  }
  .van-tab--card {
    margin-right: var(--k-padding-md);
    border-right: 0;
    color: var(--k-gray-1);
    background-color: #fff;
    border-radius: var(--k-radius-max);
    &.van-tab--active {
      color: #fff;
      background-color: var(--k-primary);
    }
    &:last-child {
      margin-right: 0;
    }
  }
  .van-tab--shrink {
    padding: 0 var(--k-padding-lg);
  }
}

// 宫格 - ✅
// 步骤条 - ✅
// 按钮 - ✅
.van-button {
  font-weight: 500;
  &:active:before {
    opacity: 0.2;
  }
}
.van-button--disabled {
  position: relative;
  opacity: 1;
  &:active:before {
    opacity: 0.6;
  }
  &:before {
    content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #fff;
    border: inherit;
    border-color: #fff;
    border-radius: inherit;
    transform: translate(-50%, -50%);
    opacity: 0.6;
  }
}

// 搜索框 - 【不处理】
.van-search__field {
  padding: 0 var(--van-padding-xs) 0 0;
}

// 气泡弹出框 - 【不处理】
// 对话框 - ✅
// 轻提示 - 【不处理】
// 通知栏 - ✅
// 遮罩/基础样式 - ✅
// 定义了基础变量，如果需要对应的引入； --k-overlay-background-dark, --k-overlay-background-shallow

// 单元格滑动 - 【不处理】
// 协议 - 【不处理】
// 缺省图 - 【不处理】
// 输入框 - ✅
.van-field__label {
  color: var(--k-gray-2);
  font-size: 15px;
}
.van-field__control {
  font-size: 15px;
}
.van-field__control::placeholder {
  color: var(--k-gray-5);
}
.van-cell__right-icon {
  font-size: 13px;
  font-weight: bold;
  color: #d8d8d8;
}
.van-field__label--top.border {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 10px;
  &::after {
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: var(--van-padding-md);
    bottom: 0;
    left: var(--van-padding-md);
    border-bottom: 0.02667rem solid var(--van-cell-border-color);
    transform: scaleY(0.5);
  }
}

// 选择框
// 上拉选择 - ✅
// 选择器 - ✅
.van-picker {
  --van-picker-toolbar-height: 44px !important;
  .van-picker__toolbar {
    position: relative;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: var(--van-padding-md);
      bottom: 0;
      left: var(--van-padding-md);
      border-bottom: 1px solid var(--van-cell-border-color);
      transform: scaleY(0.5);
    }
  }
  .van-picker__columns {
    padding: 0 24px;
  }
  .van-picker-column {
    position: relative;
    z-index: 1;
  }
  .van-picker__frame {
    z-index: 0;
    &::after {
      background: var(--k-bg-4);
      border-radius: 8px;
    }
  }
  .van-picker__cancel,
  .van-picker__confirm {
    font-size: 14px;
  }
  .van-picker__cancel {
    color: var(--k-gray-3);
  }
  .van-picker__confirm {
    color: var(--k-font-primary);
  }
  .van-picker-column__item {
    color: var(--k-gray-1);
    font-size: 16px;
  }
  .van-picker-column__item--selected {
    font-weight: 600;
  }
}

// 日历选择器 - ✅

// 上拉菜单-分享面板 - 【不处理】
// 下拉菜单/搜索样式框 - 【不处理】

// 文件上传 - 【不处理】
// 图片展示 - 【不处理】
// 图片全屏展示 - ✅
.van-image-preview {
  .van-image-preview__close-icon,
  .van-image-preview__index {
    top: calc(var(--van-padding-md) + env(safe-area-inset-bottom));
  }
}
// 弹出层 - 【不处理】
// 开关 / 基础样式 / 禁用样式

// 折叠面板 - ✅
// 标签样式

.van-tag {
  padding-top: 1px;
  .van-tag__close {
    margin-top: -2px;
  }
}
.van-tag--large {
  padding-top: calc(var(--van-padding-base) + 1px);
}
.van-tag--medium {
  padding-top: 3px;
}
// 轮播 - 【不处理】
// 骨架屏 - 【不处理】
// 进度条 - 【不处理】
// }