Skip to content

G
groupPurchase-miniapp
Commit 362a6f9b authored by zhangjinyang's avatar zhangjinyang
Browse files
Options

wot icon

parent 8f20cbd2
Show whitespace changes
Inline Side-by-side
Showing with 3664 additions and 0 deletions
src/Components/wd-icon-local/common/AbortablePromise.ts 0 → 100644
View file @ 362a6f9b
/* eslint-disable */
export class AbortablePromise<T> {
promise: Promise<T>
private _reject: ((res?: any) => void) | null = null
constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void) {
this.promise = new Promise<T>((resolve, reject) => {
executor(resolve, reject)
this._reject = reject // 保存reject方法的引用，以便在abort时调用
})
}
// 提供abort方法来中止Promise
abort(error?: any) {
if (this._reject) {
this._reject(error) // 调用reject方法来中止Promise
}
}
then<TResult1 = T, TResult2 = never>(
onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,
onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null
): Promise<TResult1 | TResult2> {
return this.promise.then(onfulfilled, onrejected)
}
catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult> {
return this.promise.catch(onrejected)
}
}
src/Components/wd-icon-local/common/abstracts/_config.scss 0 → 100644
View file @ 362a6f9b
/**
* SCSS 配置项：命名空间以及BEM
*/
$namespace: 'wd';
$elementSeparator: '__';
$modifierSeparator: '--';
$state-prefix: 'is-';
\ No newline at end of file
src/Components/wd-icon-local/common/abstracts/_function.scss 0 → 100644
View file @ 362a6f9b
/**
* 辅助函数
*/
@import 'config';
$default-theme: #4d80f0 !default; // 正常色
/* 转换成字符串 */
@function selectorToString($selector) {
$selector: inspect($selector);
$selector: str-slice($selector, 2, -2);
@return $selector;
}
/* 判断是否存在 Modifier */
@function containsModifier($selector) {
$selector: selectorToString($selector);
@if str-index($selector, $modifierSeparator) {
@return true;
}
@else {
@return false;
}
}
/* 判断是否存在伪类 */
@function containsPseudo($selector) {
$selector: selectorToString($selector);
@if str-index($selector, ':') {
@return true;
}
@else {
@return false;
}
}
/**
* 主题色切换
* @params $theme-color 主题色
* @params $type 变暗’dark‘ 变亮 'light'
* @params $mix-color 自己设置的混色
*/
@function themeColor($theme-color, $type: "", $mix-color: "") {
@if $default-theme !=#4d80f0 {
@if $type=="dark" {
@return darken($theme-color, 10%);
}
@else if $type=="light" {
@return lighten($theme-color, 10%);
}
@else {
@return $theme-color;
}
}
@else {
@return $mix-color;
}
}
/**
* 颜色结果切换， 如果开启线性渐变色 使用渐变色，如果没有开启，那么使用主题色
* @params $open-linear 是否开启线性渐变色
* @params $deg 渐变色角度
* @params $theme-color 当前配色
* @params [Array] $set 主题色明暗设置，与 $color-list 数量对应
* @params [Array] $color-list 渐变色顺序， $color-list 和 $per-list 数量相同
* @params [Array] $per-list 渐变色比例
*/
@function resultColor($deg, $theme-color, $set, $color-list, $per-list) {
// 开启渐变
$len: length($color-list);
$arg: $deg;
@for $i from 1 through $len {
$arg: $arg + ","+ themeColor($theme-color, nth($set, $i), nth($color-list, $i)) + " "+ nth($per-list, $i);
}
@return linear-gradient(unquote($arg));
}
\ No newline at end of file
src/Components/wd-icon-local/common/abstracts/_mixin.scss 0 → 100644
View file @ 362a6f9b
/**
* 混合宏
*/
@import "config";
@import "function";
/**
* BEM，定义块（b)
*/
@mixin b($block) {
$B: $namespace + "-"+ $block !global;
.#{$B} {
@content;
}
}
/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
@mixin e($element...) {
$selector: &;
$selectors: "";
@if containsPseudo($selector) {
@each $item in $element {
$selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","};
}
@at-root {
#{$selector} {
#{$selectors} {
@content;
}
}
}
}
@else {
@each $item in $element {
$selectors: #{$selectors + $selector + $elementSeparator + $item + ","};
}
@at-root {
#{$selectors} {
@content;
}
}
}
}
/* 此方法用于生成穿透样式 */
/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
@mixin edeep($element...) {
$selector: &;
$selectors: "";
@if containsPseudo($selector) {
@each $item in $element {
$selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","};
}
@at-root {
#{$selector} {
:deep() {
#{$selectors} {
@content;
}
}
}
}
}
@else {
@each $item in $element {
$selectors: #{$selectors + $selector + $elementSeparator + $item + ","};
}
@at-root {
:deep() {
#{$selectors} {
@content;
}
}
}
}
}
/* 定义状态（m） */
@mixin m($modifier...) {
$selectors: "";
@each $item in $modifier {
$selectors: #{$selectors + & + $modifierSeparator + $item + ","};
}
@at-root {
#{$selectors} {
@content;
}
}
}
/* 对于需要需要嵌套在 m 底下的 e，调用这个混合宏，一般在切换整个组件的状态，如切换颜色的时候 */
@mixin me($element...) {
$selector: &;
$selectors: "";
@if containsModifier($selector) {
@each $item in $element {
$selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","};
}
@at-root {
#{$selector} {
#{$selectors} {
@content;
}
}
}
}
@else {
@each $item in $element {
$selectors: #{$selectors + $selector + $elementSeparator + $item + ","};
}
@at-root {
#{$selectors} {
@content;
}
}
}
}
/* 状态，生成 is-$state 类名 */
@mixin when($states...) {
@at-root {
@each $state in $states {
&.#{$state-prefix + $state} {
@content;
}
}
}
}
/**
* 常用混合宏
*/
/* 单行超出隐藏 */
@mixin lineEllipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 多行超出隐藏 */
@mixin multiEllipsis($lineNumber: 3) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lineNumber;
overflow: hidden;
}
/* 清除浮动 */
@mixin clearFloat {
&::after {
display: block;
content: "";
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
}
/* 0.5px 边框 指定方向*/
@mixin halfPixelBorder($direction: "bottom", $left: 0, $color: $-color-border-light) {
position: relative;
&::after {
position: absolute;
display: block;
content: "";
@if ($left==0) {
width: 100%;
}
@else {
width: calc(100% - #{$left});
}
height: 1px;
left: $left;
@if ($direction=="bottom") {
bottom: 0;
}
@else {
top: 0;
}
transform: scaleY(0.5);
background: $color;
}
}
/* 0.5px 边框 环绕 */
@mixin halfPixelBorderSurround($color: $-color-border-light) {
position: relative;
&::after {
position: absolute;
display: block;
content: ' ';
pointer-events: none;
width: 200%;
height: 200%;
left: 0;
top: 0;
border: 1px solid $color;
transform: scale(0.5);
box-sizing: border-box;
transform-origin: left top;
}
}
@mixin buttonClear {
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
background: transparent;
}
/**
* 三角形实现尖角样式，适用于背景透明情况
* @param $size 三角形高，底边为 $size * 2
* @param $bg 三角形背景颜色
*/
@mixin triangleArrow($size, $bg) {
@include e(arrow) {
position: absolute;
width: 0;
height: 0;
}
@include e(arrow-down) {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $bg;
transform: translateX(-50%);
bottom: calc(-1 * $size)
}
@include e(arrow-up) {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $bg;
transform: translateX(-50%);
top: calc(-1 * $size)
}
@include e(arrow-left) {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $bg;
transform: translateY(-50%);
left: calc(-1 * $size)
}
@include e(arrow-right) {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $bg;
transform: translateY(-50%);
right: calc(-1 * $size)
}
}
/**
* 正方形实现尖角样式，适用于背景不透明情况
* @param $size 正方形边长
* @param $bg 正方形背景颜色
* @param $z-index z-index属性值，不得大于外部包裹器
* @param $box-shadow 阴影
*/
@mixin squareArrow($size, $bg, $z-index, $box-shadow) {
@include e(arrow) {
position: absolute;
width: $size;
height: $size;
z-index: $z-index;
}
@include e(arrow-down) {
transform: translateX(-50%);
bottom: 0;
&:after {
content: "";
width: $size;
height: $size;
background-color: $bg;
position: absolute;
left: 0;
bottom: calc(-1 * $size / 2);
transform: rotateZ(45deg);
box-shadow: $box-shadow;
}
}
@include e(arrow-up) {
transform: translateX(-50%);
top: 0;
&:after {
content: "";
width: $size;
height: $size;
background-color: $bg;
position: absolute;
left: 0;
top: calc(-1 * $size / 2);
transform: rotateZ(45deg);
box-shadow: $box-shadow;
}
}
@include e(arrow-left) {
transform: translateY(-50%);
left: 0;
&:after {
content: "";
width: $size;
height: $size;
background-color: $bg;
position: absolute;
left: calc(-1 * $size / 2);
top: 0;
transform: rotateZ(45deg);
box-shadow: $box-shadow;
}
}
@include e(arrow-right) {
transform: translateY(-50%);
right: 0;
&:after {
content: "";
width: $size;
height: $size;
background-color: $bg;
position: absolute;
right: calc(-1 * $size / 2);
top: 0;
transform: rotateZ(45deg);
box-shadow: $box-shadow;
}
}
}
\ No newline at end of file
src/Components/wd-icon-local/common/abstracts/variable.scss 0 → 100644
View file @ 362a6f9b
@import './function';
/**
* UI规范基础变量
*/
/*----------------------------------------- Theme color. start ----------------------------------------*/
/* 主题颜色 */
$-color-theme: var(--wot-color-theme, $default-theme) !default; // 主题色
$-color-white: var(--wot-color-white, rgb(255, 255, 255)) !default; // 用于mix的白色
$-color-black: var(--wot-color-black, rgb(0, 0, 0)) !default; // 用于mix的黑色
/* 辅助色 */
$-color-success: var(--wot-color-success, #34d19d) !default; // 成功色
$-color-warning: var(--wot-color-warning, #f0883a) !default; // 警告色
$-color-danger: var(--wot-color-danger, #fa4350) !default; // 危险出错色
$-color-purple: var(--wot-color-purple, #8268de) !default; // 紫色
$-color-yellow: var(--wot-color-yellow, #f0cd1d) !default; // 黄色
$-color-blue: var(--wot-color-blue, #2bb3ed) !default; // 蓝色
$-color-info: var(--wot-color-info, #909399) !default;
$-color-gray-1: var(--wot-color-gray-1, #f7f8fa) !default;
$-color-gray-2: var(--wot-color-gray-2, #f2f3f5) !default;
$-color-gray-3: var(--wot-color-gray-3, #ebedf0) !default;
$-color-gray-4: var(--wot-color-gray-4, #dcdee0) !default;
$-color-gray-5: var(--wot-color-gray-5, #c8c9cc) !default;
$-color-gray-6: var(--wot-color-gray-6, #969799) !default;
$-color-gray-7: var(--wot-color-gray-7, #646566) !default;
$-color-gray-8: var(--wot-color-gray-8, #323233) !default;
$-font-gray-1: var(--wot-font-gray-1, rgba(0, 0, 0, 0.9));
$-font-gray-2: var(--wot-font-gray-2, rgba(0, 0, 0, 0.6));
$-font-gray-3: var(--wot-font-gray-3, rgba(0, 0, 0, 0.4));
$-font-gray-4: var(--wot-font-gray-4, rgba(0, 0, 0, 0.26));
$-font-white-1: var(--wot-font-white-1, rgba(255, 255, 255, 1));
$-font-white-2: var(--wot-font-white-2, rgba(255, 255, 255, 0.55));
$-font-white-3: var(--wot-font-white-3, rgba(255, 255, 255, 0.35));
$-font-white-4: var(--wot-font-white-4, rgba(255, 255, 255, 0.22));
/* 文字颜色（默认浅色背景下 */
$-color-title: var(--wot-color-title, $-color-black) !default; // 模块标题/重要正文 000
$-color-content: var(--wot-color-content, #262626) !default; // 普通正文 262626
$-color-secondary: var(--wot-color-secondary, #595959) !default; // 次要信息，注释/补充/正文 595959
$-color-aid: var(--wot-color-aid, #8c8c8c) !default; // 辅助文字字号，弱化信息，引导性/不可点文字 8c8c8c
$-color-tip: var(--wot-color-tip, #bfbfbf) !default; // 失效、默认提示文字 bfbfbf
$-color-border: var(--wot-color-border, #d9d9d9) !default; // 控件边框线 d9d9d9
$-color-border-light: var(--wot-color-border-light, #e8e8e8) !default; // 分割线颜色 e8e8e8
$-color-bg: var(--wot-color-bg, #f5f5f5) !default; // 背景色、禁用填充色 f5f5f5
/* 暗黑模式 */
$-dark-background: var(--wot-dark-background, #131313) !default;
$-dark-background2: var(--wot-dark-background2, #1b1b1b) !default;
$-dark-background3: var(--wot-dark-background3, #141414) !default;
$-dark-background4: var(--wot-dark-background4, #323233) !default;
$-dark-background5: var(--wot-dark-background5, #646566) !default;
$-dark-background6: var(--wot-dark-background6, #380e08) !default;
$-dark-background7: var(--wot-dark-background7, #707070) !default;
$-dark-color: var(--wot-dark-color, $-color-white) !default;
$-dark-color2: var(--wot-dark-color2, #f2270c) !default;
$-dark-color3: var(--wot-dark-color3, rgba(232, 230, 227, 0.8)) !default;
$-dark-color-gray: var(--wot-dark-color-gray, $-color-secondary) !default;
$-dark-border-color: var(--wot-dark-border-color, #3a3a3c) !default;
/* 图形颜色 */
$-color-icon: var(--wot-color-icon, #d9d9d9) !default; // icon颜色
$-color-icon-active: var(--wot-color-icon-active, #eee) !default; // icon颜色hover
$-color-icon-disabled: var(--wot-color-icon-disabled, #a7a7a7) !default; // icon颜色disabled
/*----------------------------------------- Theme color. end -------------------------------------------*/
/*-------------------------------- Theme color application size. start --------------------------------*/
/* 文字字号 */
$-fs-big: var(--wot-fs-big, 24px) !default; // 大型标题
$-fs-important: var(--wot-fs-important, 19px) !default; // 重要数据
$-fs-title: var(--wot-fs-title, 16px) !default; // 标题字号/重要正文字号
$-fs-content: var(--wot-fs-content, 14px) !default; // 普通正文
$-fs-secondary: var(--wot-fs-secondary, 12px) !default; // 次要信息，注释/补充/正文
$-fs-aid: var(--wot-fs-aid, 10px) !default; // 辅助文字字号，弱化信息，引导性/不可点文字
/* 文字字重 */
$-fw-medium: var(--wot-fw-medium, 500) !default; // PingFangSC-Medium
$-fw-semibold: var(--wot-fw-semibold, 600) !default; // PingFangSC-Semibold
/* 尺寸 */
$-size-side-padding: var(--wot-size-side-padding, 15px) !default; // 屏幕两边留白
/*-------------------------------- Theme color application size. end --------------------------------*/
/* action-sheet */
$-action-sheet-weight: var(--wot-action-sheet-weight, 500) !default; // 面板字重
$-action-sheet-radius: var(--wot-action-sheet-radius, 16px) !default; // 面板圆角大小
$-action-sheet-action-height: var(--wot-action-sheet-action-height, 48px) !default; // 单条菜单高度
$-action-sheet-color: var(--wot-action-sheet-color, rgba(0, 0, 0, 0.85)) !default; // 选项名称颜色
$-action-sheet-fs: var(--wot-action-sheet-fs, $-fs-title) !default; // 选项名称字号
$-action-sheet-active-color: var(--wot-action-sheet-active-color, $-color-bg) !default; // 点击高亮颜色
$-action-sheet-subname-fs: var(--wot-action-sheet-subname-fs, $-fs-secondary) !default; // 描述信息字号
$-action-sheet-subname-color: var(--wot-action-sheet-subname-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息颜色
$-action-sheet-disabled-color: var(--wot-action-sheet-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色
$-action-sheet-bg: var(--wot-action-sheet-bg, $-color-white) !default; // 菜单容器颜色（取消按钮上方的颜色）
$-action-sheet-title-height: var(--wot-action-sheet-title-height, 64px) !default; // 标题高度
$-action-sheet-title-fs: var(--wot-action-sheet-title-fs, $-fs-title) !default; // 标题字号
$-action-sheet-close-fs: var(--wot-action-sheet-close-fs, $-fs-title) !default; // 关闭按钮大小
$-action-sheet-close-color: var(--wot-action-sheet-close-color, rgba(0, 0, 0, 0.65)) !default; // 关闭按钮颜色
$-action-sheet-close-top: var(--wot-action-sheet-close-top, 25px) !default; // 关闭按钮距离标题顶部距离
$-action-sheet-close-right: var(--wot-action-sheet-close-right, 15px) !default; // 关闭按钮距离标题右侧距离
$-action-sheet-cancel-color: var(--wot-action-sheet-cancel-color, #131415) !default; // 取消按钮颜色
$-action-sheet-cancel-height: var(--wot-action-sheet-cancel-height, 44px) !default; // 取消按钮高度
$-action-sheet-cancel-bg: var(--wot-action-sheet-cancel-bg, rgba(240, 240, 240, 1)) !default; // 取消按钮背景色
$-action-sheet-cancel-radius: var(--wot-action-sheet-cancel-radius, 22px) !default; // 取消按钮圆角大小
$-action-sheet-panel-padding: var(--wot-action-sheet-panel-padding, 12px 0 11px) !default; // 自定义面板内边距大小
$-action-sheet-panel-img-fs: var(--wot-action-sheet-panel-img-fs, 40px) !default; // 自定义面板图片大小
$-action-sheet-panel-img-radius: var(--wot-action-sheet-panel-img-radius, 4px) !default; // 自定义面板图片圆角大小
/* badge */
$-badge-bg: var(--wot-badge-bg, $-color-danger) !default; // 背景填充颜色
$-badge-color: var(--wot-badge-color, #fff) !default; // 文字颜色
$-badge-fs: var(--wot-badge-fs, 12px) !default; // 文字字号
$-badge-padding: var(--wot-badge-padding, 0 5px) !default; // padding
$-badge-height: var(--wot-badge-height, 16px) !default; // 高度
$-badge-primary: var(--wot-badge-primary, $-color-theme) !default;
$-badge-success: var(--wot-badge-success, $-color-success) !default;
$-badge-warning: var(--wot-badge-warning, $-color-warning) !default;
$-badge-danger: var(--wot-badge-danger, $-color-danger) !default;
$-badge-info: var(--wot-badge-info, $-color-info) !default;
$-badge-dot-size: var(--wot-badge-dot-size, 6px) !default; // dot 类型大小
$-badge-border: var(--wot-badge-border, 2px solid $-badge-color) !default; // 边框样式
/* button */
$-button-disabled-opacity: var(--wot-button-disabled-opacity, 0.6) !default; // button禁用透明度
$-button-small-height: var(--wot-button-small-height, 28px) !default; // 小型按钮高度
$-button-small-padding: var(--wot-button-small-padding, 0 12px) !default; // 小型按钮padding
$-button-small-fs: var(--wot-button-small-fs, $-fs-secondary) !default; // 小型按钮字号
$-button-small-radius: var(--wot-button-small-radius, 2px) !default; // 小型按钮圆角大小
$-button-small-loading: var(--wot-button-small-loading, 14px) !default; // 小型按钮loading图标大小
$-button-medium-height: var(--wot-button-medium-height, 36px) !default; // 中型按钮高度
$-button-medium-padding: var(--wot-button-medium-padding, 0 16px) !default; // 中型按钮padding
$-button-medium-fs: var(--wot-button-medium-fs, $-fs-content) !default; // 中型按钮字号
$-button-medium-radius: var(--wot-button-medium-radius, 4px) !default; // 中型按钮圆角大小
$-button-medium-loading: var(--wot-button-medium-loading, 18px) !default; // 中型按钮loading图标大小
$-button-medium-box-shadow-size: var(--wot-button-medium-box-shadow-size, 0px 2px 4px 0px) !default; // 中尺寸阴影尺寸
$-button-large-height: var(--wot-button-large-height, 44px) !default; // 大型按钮高度
$-button-large-padding: var(--wot-button-large-padding, 0 36px) !default; // 大型按钮padding
$-button-large-fs: var(--wot-button-large-fs, $-fs-title) !default; // 大型按钮字号
$-button-large-radius: var(--wot-button-large-radius, 8px) !default; // 大型按钮圆角大小
$-button-large-loading: var(--wot-button-large-loading, 24px) !default; // 大小按钮loading图标大小
$-button-large-box-shadow-size: var(--wot-button-large-box-shadow-size, 0px 4px 8px 0px) !default; // 大尺寸阴影尺寸
$-button-icon-fs: var(--wot-button-icon-fs, 1.18em) !default; // 带图标的按钮的图标大小
$-button-icon-size: var(--wot-button-icon-size, 40px) !default; // icon 类型按钮尺寸
$-button-icon-color: var(--wot-button-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon 类型按钮颜色
$-button-icon-disabled-color: var(--wot-button-icon-disabled-color, $-color-icon-disabled) !default; // icon 类型按钮禁用颜色
$-button-normal-color: var(--wot-button-normal-color, $-color-title) !default; // 文字颜色
$-button-normal-disabled-color: var(--wot-button-normal-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 默认按钮禁用文字色
$-button-plain-bg-color: var(--wot-button-plain-bg-color, $-color-white) !default; // 幽灵按钮背景色
$-button-primary-color: var(--wot-button-primary-color, $-color-white) !default; // 主要按钮颜色
$-button-primary-bg-color: var(--wot-button-primary-bg-color, $-color-theme) !default; // 主要按钮背景颜色
$-button-primary-box-shadow-color: var(--wot-button-primary-box-shadow-color, rgba($-color-theme, 0.25)) !default; // 主要按钮阴影颜色
$-button-success-color: var(--wot-button-success-color, $-color-white) !default; // 成功按钮文字颜色
$-button-success-bg-color: var(--wot-button-success-bg-color, $-color-success) !default; // 成功按钮颜色
$-button-success-box-shadow-color: var(--wot-button-success-box-shadow-color, rgba($-color-success, 0.25)) !default; // 主要按钮阴影颜色
$-button-info-color: var(--wot-button-info-color, $-color-title) !default; // 信息按钮颜色
$-button-info-bg-color: var(--wot-button-info-bg-color, #F0F0F0) !default; // 信息按钮背景颜色
$-button-info-plain-border-color: var(--wot-button-info-plain-border-color, rgba(0, 0, 0, 0.45)) !default; // 信息按钮禁用颜色
$-button-info-plain-normal-color: var(--wot-button-info-plain-normal-color, rgba(0, 0, 0, 0.85)) !default; // 信息幽灵按钮默认颜色
$-button-warning-color: var(--wot-button-warning-color, $-color-white) !default; // 警告按钮字体颜色
$-button-warning-bg-color: var(--wot-button-warning-bg-color, $-color-warning) !default; // 警告按钮背景颜色
$-button-warning-box-shadow-color: var(--wot-button-warning-box-shadow-color, rgba($-color-warning, 0.25)) !default; // 主要按钮阴影颜色
$-button-error-color: var(--wot-button-error-color, $-color-white) !default; // 错误按钮颜色
$-button-error-bg-color: var(--wot-button-error-bg-color, $-color-danger) !default; // 错误按钮背景颜色
$-button-error-box-shadow-color: var(--wot-button-error-box-shadow-color, rgba($-color-danger, 0.25)) !default; // 主要按钮阴影颜色
$-button-text-hover-opacity: var(--wot-button-text-hover-opacity, 0.7) !default; // 文字button激活时透明度
/* cell */
$-cell-padding: var(--wot-cell-padding, $-size-side-padding) !default; // cell 左右padding距离
$-cell-line-height: var(--wot-cell-line-height, 24px) !default; // 行高
$-cell-group-title-fs: var(--wot-cell-group-title-fs, $-fs-title) !default; // 组标题字号
$-cell-group-padding: var(--wot-cell-group-padding, 13px $-cell-padding) !default; // 组padding
$-cell-group-title-color: var(--wot-cell-group-title-color, rgba(0, 0, 0, 0.85)) !default; // 组标题文字颜色
$-cell-group-value-fs: var(--wot-cell-group-value-fs, $-fs-content) !default; // 组值字号
$-cell-group-value-color: var(--wot-cell-group-value-color, $-color-content) !default; // 组值文字颜色
$-cell-wrapper-padding: var(--wot-cell-wrapper-padding, 10px) !default; // cell 容器padding
$-cell-wrapper-padding-large: var(--wot-cell-wrapper-padding-large, 12px) !default; // large类型cell容器padding
$-cell-wrapper-padding-with-label: var(--wot-cell-wrapper-padding-with-label, 16px) !default; // cell 容器上下padding（有label情况下）
$-cell-icon-right: var(--wot-cell-icon-right, 4px) !default; // 图标距离右边缘
$-cell-icon-size: var(--wot-cell-icon-size, 16px) !default; // 图标大小
$-cell-title-fs: var(--wot-cell-title-fs, 14px) !default; // 标题字号
$-cell-title-color: var(--wot-cell-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
$-cell-label-fs: var(--wot-cell-label-fs, 12px) !default; // 描述信息字号
$-cell-label-color: var(--wot-cell-label-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息文字颜色
$-cell-value-fs: var(--wot-cell-value-fs, 14px) !default; // 右侧内容字号
$-cell-value-color: var(--wot-cell-value-color, rgba(0, 0, 0, 0.85)) !default; // 右侧内容文字颜色
$-cell-arrow-size: var(--wot-cell-arrow-size, 18px) !default; // 右箭头大小
$-cell-arrow-color: var(--wot-cell-arrow-color, rgba(0, 0, 0, 0.25)) !default; // 右箭头颜色
$-cell-tap-bg: var(--wot-cell-tap-bg, rgba(0, 0, 0, 0.06)) !default; // 点击态背景色
$-cell-title-fs-large: var(--wot-cell-title-fs-large, 16px) !default; // 大尺寸标题字号
$-cell-label-fs-large: var(--wot-cell-label-fs-large, 14px) !default; // 描述信息字号
$-cell-icon-size-large: var(--wot-cell-icon-size-large, 18px) !default; // 图标大小
$-cell-required-color: var(--wot-cell-required-color, $-color-danger) !default; // 要求必填*颜色
$-cell-required-size: var(--wot-cell-required-size, 18px) !default; // 必填*字号
$-cell-vertical-top: var(--wot-cell-vertical-top, 16px) !default; // 表单类型-上下结构的间距
/* calendar */
$-calendar-fs: var(--wot-calendar-fs, 16px) !default;
$-calendar-panel-padding: var(--wot-calendar-panel-padding, 0 12px) !default;
$-calendar-panel-title-fs: var(--wot-calendar-panel-title-fs, 14px) !default;
$-calendar-panel-title-color: var(--wot-calendar-panel-title-color, rgba(0, 0, 0, 0.85)) !default;
$-calendar-week-color: var(--wot-calendar-week-color, rgba(0, 0, 0, 0.85)) !default;
$-calendar-week-height: var(--wot-calendar-week-height, 36px) !default;
$-calendar-week-fs: var(--wot-calendar-week-fs, 12px) !default;
$-calendar-day-fs: var(--wot-calendar-day-fs, 16px) !default;
$-calendar-day-color: var(--wot-calendar-day-color, rgba(0, 0, 0, 0.85)) !default;
$-calendar-day-fw: var(--wot-calendar-day-fw, 500) !default;
$-calendar-day-height: var(--wot-calendar-day-height, 64px) !default;
$-calendar-month-width: var(--wot-calendar-month-width, 50px) !default;
$-calendar-active-color: var(--wot-calendar-active-color, $-color-theme) !default;
$-calendar-disabled-color: var(--wot-calendar-disabled-color, rgba(0, 0, 0, 0.25)) !default;
$-calendar-range-color: var(--wot-calendar-range-color, rgba(#4d80f0, 0.09)) !default;
$-calendar-active-border: var(--wot-calendar-active-border, 8px) !default;
$-calendar-info-fs: var(--wot-calendar-info-fs, 10px) !default;
/* checkbox */
$-checkbox-margin: var(--wot-checkbox-margin, 10px) !default; // 多个复选框距离
$-checkbox-bg: var(--wot-checkbox-bg, $-color-white) !default; // 多个复选框距离
$-checkbox-label-margin: var(--wot-checkbox-label-margin, 9px) !default; // 右侧文字与左侧图标距离
$-checkbox-size: var(--wot-checkbox-size, 16px) !default; // 左侧图标尺寸
$-checkbox-icon-size: var(--wot-checkbox-icon-size, 14px) !default; // 左侧图标尺寸
$-checkbox-border-color: var(--wot-checkbox-border-color, #dcdcdc) !default; // 左侧图标边框颜色
$-checkbox-check-color: var(--wot-checkbox-check-color, $-color-white) !default; // 左侧图标边框颜色
$-checkbox-label-fs: var(--wot-checkbox-label-fs, 14px) !default; // 右侧文字字号
$-checkbox-label-color: var(--wot-checkbox-label-color, rgba(0, 0, 0, 0.85)) !default; // 右侧文字颜色
$-checkbox-checked-color: var(--wot-checkbox-checked-color, $-color-theme) !default; // 选中颜色
$-checkbox-disabled-color: var(--wot-checkbox-disabled-color, rgba(0, 0, 0, 0.04)) !default; // 禁用背景颜色
$-checkbox-disabled-label-color: var(--wot-checkbox-disabled-label-color, rgba(0, 0, 0, 0.25)) !default; // 禁用文字颜色
$-checkbox-disabled-check-color: var(--wot-checkbox-disabled-check-color, rgba(0, 0, 0, 0.15)) !default; // 禁用图标颜色
$-checkbox-disabled-check-bg: var(--wot-checkbox-disabled-check-bg, rgba(0, 0, 0, 0.15)) !default; // 禁用边框背景颜色
$-checkbox-square-radius: var(--wot-checkbox-square-radius, 4px) !default; // 方型圆角大小
$-checkbox-large-size: var(--wot-checkbox-large-size, 18px) !default; // 左侧图标尺寸
$-checkbox-large-label-fs: var(--wot-checkbox-large-label-fs, 16px) !default; // 右侧文字字号
$-checkbox-button-height: var(--wot-checkbox-button-height, 32px) !default; // 按钮模式复选框高
$-checkbox-button-min-width: var(--wot-checkbox-button-min-width, 78px) !default; // 按钮模式最小宽
$-checkbox-button-radius: var(--wot-checkbox-button-radius, 16px) !default; // 按钮圆角大小
$-checkbox-button-bg: var(--wot-checkbox-button-bg, rgba(0, 0, 0, 0.04)) !default; // 按钮模式背景颜色
$-checkbox-button-font-size: var(--wot-checkbox-button-font-size, 14px) !default; // 按钮模式字号
$-checkbox-button-border: var(--wot-checkbox-button-border, #f5f5f5) !default; // 按钮边框颜色
$-checkbox-button-disabled-border: var(--wot-checkbox-button-disabled-border, rgba(0, 0, 0, 0.15)) !default; // 按钮禁用边框颜色
/* collapse */
$-collapse-side-padding: var(--wot-collapse-side-padding, $-size-side-padding) !default; // 左右间距
$-collapse-body-padding: var(--wot-collapse-body-padding, 14px 25px) !default; // body padding
$-collapse-header-padding: var(--wot-collapse-header-padding, 13px $-size-side-padding) !default; // 头部padding
$-collapse-title-color: var(--wot-collapse-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
$-collapse-title-fs: var(--wot-collapse-title-fs, 16px) !default; // 标题字号
$-collapse-arrow-size: var(--wot-collapse-arrow-size, 18px) !default; // 箭头大小
$-collapse-arrow-color: var(--wot-collapse-arrow-color, #d8d8d8) !default; // 箭头颜色
$-collapse-body-fs: var(--wot-collapse-body-fs, 14px) !default; // 内容字号
$-collapse-body-color: var(--wot-collapse-body-color, rgba(0, 0, 0, 0.65)) !default; // 内容颜色
$-collapse-disabled-color: var(--wot-collapse-disabled-color, rgba(0, 0, 0, 0.15)) !default; // 禁用颜色
$-collapse-retract-fs: var(--wot-collapse-retract-fs, 14px) !default; // 更多 字号
$-collapse-more-color: var(--wot-collapse-more-color, $-color-theme) !default; // 更多 颜色
/* divider */
$-divider-padding: var(--wot-divider-padding, 0 $-size-side-padding) !default; // 两边间距
$-divider-color: var(--wot-divider-color, rgba(0, 0, 0, 0.45)) !default; // 字体颜色
$-divider-line-color: var(--wot-divider-line-color, rgba(0, 0, 0, 0.15)) !default; // 线条颜色
$-divider-fs: var(--wot-divider-fs, 14px) !default; // 字体大小
/* drop-menu */
$-drop-menu-height: var(--wot-drop-menu-height, 48px) !default; // 展示选中项的高度
$-drop-menu-color: var(--wot-drop-menu-color, $-color-content) !default; // 展示选中项的颜色
$-drop-menu-fs: var(--wot-drop-menu-fs, $-fs-content) !default; // 展示选中项的字号
$-drop-menu-side-padding: var(--wot-drop-menu-side-padding, $-size-side-padding) !default; // 两边留白间距
$-drop-menu-disabled-color: var(--wot-drop-menu-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色
$-drop-menu-item-height: var(--wot-drop-menu-item-height, 48px) !default; // 选项高度
$-drop-menu-item-color: var(--wot-drop-menu-item-color, $-color-content) !default; // 选项颜色
$-drop-menu-item-fs: var(--wot-drop-menu-item-fs, $-fs-content) !default; // 选项字号
$-drop-menu-item-color-active: var(--wot-drop-menu-item-color-active, $-color-theme) !default; // 选中颜色
$-drop-menu-item-color-tip: var(--wot-drop-menu-item-color-tip, rgba(0, 0, 0, 0.45)) !default; // 提示文字颜色
$-drop-menu-item-fs-tip: var(--wot-drop-menu-item-fs-tip, $-fs-secondary) !default; // 提示文字字号
$-drop-menu-option-check-size: var(--wot-drop-menu-option-check-size, 20px) !default; // check 图标大小
$-drop-menu-line-color: var(--wot-drop-menu-line-color, $-color-theme) !default; // 下划线颜色
$-drop-menu-line-height: var(--wot-drop-menu-line-height, 3px) !default; // 下划线高度
/* input-number */
$-input-number-color: var(--wot-input-number-color, #262626) !default; // 文字颜色
$-input-number-border-color: var(--wot-input-number-border-color, #e8e8e8) !default; // 边框颜色
$-input-number-disabled-color: var(--wot-input-number-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色
$-input-number-height: var(--wot-input-number-height, 24px) !default; // 加减号按钮高度
$-input-number-btn-width: var(--wot-input-number-btn-width, 26px) !default; // 加减号按钮宽度
$-input-number-input-width: var(--wot-input-number-input-width, 36px) !default; // 输入框宽度
$-input-number-radius: var(--wot-input-number-radius, 4px) !default; // 加减号按钮圆角大小
$-input-number-fs: var(--wot-input-number-fs, 12px) !default; // 输入框字号
$-input-number-icon-size: var(--wot-input-number-icon-size, 14px) !default; // 加减号图标大小
$-input-number-icon-color: var(--wot-input-number-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon颜色
/* input */
$-input-padding: var(--wot-input-padding, $-size-side-padding) !default; // input 左右padding距离
$-input-border-color: var(--wot-input-border-color, #dadada) !default; // 无label边框颜色
$-input-not-empty-border-color: var(--wot-input-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色
$-input-fs: var(--wot-input-fs, $-cell-title-fs) !default; // 字号
$-input-fs-large: var(--wot-input-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号
$-input-icon-margin: var(--wot-input-icon-margin, 8px) !default; // 图标距离
$-input-color: var(--wot-input-color, #262626) !default; // 文字颜色
$-input-placeholder-color: var(--wot-input-placeholder-color, #bfbfbf) !default; // 占位符颜色
$-input-disabled-color: var(--wot-input-disabled-color, #d9d9d9) !default; // 输入框禁用颜色
$-input-error-color: var(--wot-input-error-color, $-color-danger) !default; // 输入框错误颜色
$-input-icon-color: var(--wot-input-icon-color, #bfbfbf) !default; // 图标颜色
$-input-clear-color: var(--wot-input-clear-color, #585858) !default; // 关闭按钮颜色
$-input-count-color: var(--wot-input-count-color, #bfbfbf) !default; // 计数文字颜色
$-input-count-current-color: var(--wot-input-count-current-color, #262626) !default; // 当前长度颜色
$-input-bg: var(--wot-input-bg, $-color-white) !default; // 默认背景颜色
$-input-cell-bg: var(--wot-input-cell-bg, $-color-white) !default; // cell 类型背景色
$-input-cell-border-color: var(--wot-input-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色
$-input-cell-padding: var(--wot-input-cell-padding, 10px) !default; // cell 容器padding
$-input-cell-padding-large: var(--wot-input-cell-padding-large, 12px) !default; // large类型cell容器padding
$-input-cell-height: var(--wot-input-cell-height, 24px) !default; // cell 高度
$-input-cell-label-width: var(--wot-input-cell-label-width, 33%) !default; // cell 下 label 的宽度
$-input-inner-height: var(--wot-input-inner-height, 34px) !default; // 非cell和textarea下的高度
$-input-inner-height-no-border: var(--wot-input-inner-height-no-border, 24px) !default; // 无边框下的高度
$-input-count-fs: var(--wot-input-count-fs, 14px) !default; // 计数字号
$-input-count-fs-large: var(--wot-input-count-fs-large, 14px) !default; // 大尺寸计数字号
$-input-icon-size: var(--wot-input-icon-size, 16px) !default; // 图标大小
$-input-icon-size-large: var(--wot-input-icon-size-large, 18px) !default; // 大尺寸图标大小
/* textarea */
$-textarea-padding: var(--wot-textarea-padding, $-size-side-padding) !default; // textarea 左右padding距离
$-textarea-border-color: var(--wot-textarea-border-color, #dadada) !default; // 无label边框颜色
$-textarea-not-empty-border-color: var(--wot-textarea-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色
$-textarea-fs: var(--wot-textarea-fs, $-cell-title-fs) !default; // 字号
$-textarea-fs-large: var(--wot-textarea-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号
$-textarea-icon-margin: var(--wot-textarea-icon-margin, 8px) !default; // 图标距离
$-textarea-color: var(--wot-textarea-color, #262626) !default; // 文字颜色
$-textarea-icon-color: var(--wot-textarea-icon-color, #bfbfbf) !default; // 图标颜色
$-textarea-clear-color: var(--wot-textarea-clear-color, #585858) !default; // 关闭按钮颜色
$-textarea-count-color: var(--wot-textarea-count-color, #bfbfbf) !default; // 计数文字颜色
$-textarea-count-current-color: var(--wot-textarea-count-current-color, #262626) !default; // 当前长度颜色
$-textarea-bg: var(--wot-textarea-bg, $-color-white) !default; // 默认背景颜色
$-textarea-cell-border-color: var(--wot-textarea-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色
$-textarea-cell-padding: var(--wot-textarea-cell-padding, 10px) !default; // cell 容器padding
$-textarea-cell-padding-large: var(--wot-textarea-cell-padding-large, 12px) !default; // large类型cell容器padding
$-textarea-cell-height: var(--wot-textarea-cell-height, 24px) !default; // cell 高度
$-textarea-count-fs: var(--wot-textarea-count-fs, 14px) !default; // 计数字号
$-textarea-count-fs-large: var(--wot-textarea-count-fs-large, 14px) !default; // 大尺寸计数字号
$-textarea-icon-size: var(--wot-textarea-icon-size, 16px) !default; // 图标大小
$-textarea-icon-size-large: var(--wot-textarea-icon-size-large, 18px) !default; // 大尺寸图标大小
/* loadmore */
$-loadmore-height: var(--wot-loadmore-height, 48px) !default; // 高度
$-loadmore-color: var(--wot-loadmore-color, rgba(0, 0, 0, 0.45)) !default; // 颜色
$-loadmore-fs: var(--wot-loadmore-fs, 14px) !default; // 字号
$-loadmore-error-color: var(--wot-loadmore-error-color, $-color-theme) !default; // 点击重试颜色
/* message-box */
$-message-box-width: var(--wot-message-box-width, 300px) !default; // 宽度
$-message-box-bg: var(--wot-message-box-bg, $-color-white) !default; // 默认背景颜色
$-message-box-radius: var(--wot-message-box-radius, 16px) !default; // 圆角大小
$-message-box-padding: var(--wot-message-box-padding, 25px 24px 0) !default; // 主体内容padding
$-message-box-title-fs: var(--wot-message-box-title-fs, 16px) !default; // 标题字号
$-message-box-title-color: var(--wot-message-box-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
$-message-box-content-fs: var(--wot-message-box-content-fs, 14px) !default; // 内容字号
$-message-box-content-color: var(--wot-message-box-content-color, #666666) !default; // 内容颜色
$-message-box-content-max-height: var(--wot-message-box-content-max-height, 264px) !default; // 内容最大高度
$-message-box-content-scrollbar-width: var(--wot-message-box-content-scrollbar-width, 4px) !default; // 内容滚动条宽度
$-message-box-content-scrollbar-color: var(--wot-message-box-content-scrollbar-color, rgba(0, 0, 0, 0.1)) !default; // 内容滚动条颜色
$-message-box-input-error-color: var(--wot-message-box-input-error-color, $-input-error-color) !default; // 输入框错误颜色
/* notice-bar */
$-notice-bar-fs: var(--wot-notice-bar-fs, 12px) !default; // 字号
$-notice-bar-line-height: var(--wot-notice-bar-line-height, 18px) !default; // 行高
$-notice-bar-border-radius: var(--wot-notice-bar-border-radius, 8px) !default; // 圆角
$-notice-bar-padding: var(--wot-notice-bar-padding, 9px 20px 9px 15px) !default; // 非换行下的padding
$-notice-bar-warning-bg: var(--wot-notice-bar-warning-bg, #fff6c8) !default; // 背景色
$-notice-bar-info-bg: var(--wot-notice-bar-info-bg, #f4f9ff) !default; // 背景色
$-notice-bar-danger-bg: var(--wot-notice-bar-danger-bg, #feeced) !default; // 背景色
$-notice-bar-warning-color: var(--wot-notice-bar-warning-color, $-color-warning) !default; // 文字和图标颜色
$-notice-bar-info-color: var(--wot-notice-bar-info-color, $-color-theme) !default; // 文字和图标颜色
$-notice-bar-danger-color: var(--wot-notice-bar-danger-color, $-color-danger) !default; // 文字和图标颜色
$-notice-bar-prefix-size: var(--wot-notice-bar-prefix-size, 18px) !default; // 图标大小
$-notice-bar-close-bg: var(--wot-notice-bar-close-bg, rgba(0, 0, 0, 0.15)) !default; // 右侧关闭按钮背景颜色
$-notice-bar-close-size: var(--wot-notice-bar-close-size, 18px) !default; // 右侧关闭按钮背景颜色
$-notice-bar-close-color: var(--wot-notice-bar-close-color, $-color-white) !default; // 右侧关闭按钮颜色
$-notice-bar-wrap-padding: var(--wot-notice-bar-wrap-padding, 14px $-size-side-padding) !default; // 换行下的padding
/* pagination */
$-pagination-content-padding: var(--wot-pagination-content-padding, 10px 15px) !default;
$-pagination-message-padding: var(--wot-pagination-message-padding, 1px 0 16px 0) !default;
$-pagination-message-fs: var(--wot-pagination-message-fs, 12px) !default;
$-pagination-message-color: var(--wot-pagination-message-color, rgba(0, 0, 0, 0.69)) !default;
$-pagination-nav-border: var(--wot-pagination-nav-border, 1px solid rgba(0, 0, 0, 0.45)) !default;
$-pagination-nav-border-radius: var(--wot-pagination-nav-border-radius, 16px) !default;
$-pagination-nav-fs: var(--wot-pagination-nav-fs, 12px) !default;
$-pagination-nav-width: var(--wot-pagination-nav-width, 60px) !default;
$-pagination-nav-color: var(--wot-pagination-nav-color, rgba(0, 0, 0, 0.85)) !default;
$-pagination-nav-content-fs: var(--wot-pagination-nav-content-fs, 12px) !default;
$-pagination-nav-sepatator-padding: var(--wot-pagination-nav-sepatator-padding, 0 4px) !default;
$-pagination-nav-current-color: var(--wot-pagination-nav-current-color, $-color-theme) !default;
/* picker */
$-picker-toolbar-height: var(--wot-picker-toolbar-height, 54px) !default; // toolbar 操作条的高度
$-picker-action-height: var(--wot-picker-action-height, 16px) !default; // toolbar 操作条的高度
$-picker-toolbar-finish-color: var(--wot-picker-toolbar-finish-color, $-color-theme) !default; // toolbar 操作条完成按钮的颜色
$-picker-toolbar-cancel-color: var(--wot-picker-toolbar-cancel-color, #666666) !default; // toolbar 操作条的边框颜色
$-picker-toolbar-fs: var(--wot-picker-toolbar-fs, $-fs-title) !default; // toolbar 操作条的字号
$-picker-toolbar-title-color: var(--wot-picker-toolbar-title-color, rgba(0, 0, 0, 0.85)) !default; // toolbar 操作台的标题颜色
$-picker-column-fs: var(--wot-picker-column-fs, 16px) !default; // 选择器选项的字号
$-picker-bg: var(--wot-picker-bg, $-color-white) !default; // 选择器选项的字号
$-picker-column-active-fs: var(--wot-picker-column-active-fs, 18px) !default; // 选择器选项被选中的字号
$-picker-column-color: var(--wot-picker-column-color, rgba(0, 0, 0, 0.85)) !default; // 选择器选项的颜色
$-picker-column-height: var(--wot-picker-column-height, 210px) !default; // 列高 滚筒外部的高度
$-picker-column-item-height: var(--wot-picker-column-item-height, 35px) !default; // 列高 滚筒外部的高度
$-picker-column-select-bg: var(--wot-picker-column-select-bg, #f5f5f5) !default;
$-picker-loading-button-color: var(--wot-picker-loading-button-color, rgba(0, 0, 0, 0.25)) !default; // loading 背景颜色
$-picker-column-padding: var(--wot-picker-column-padding, 0 $-size-side-padding) !default; // 选项内间距
$-picker-column-disabled-color: var(--wot-picker-column-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 选择器选项禁用的颜色
$-picker-mask: var(--wot-picker-mask, linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)), ) linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)) !default; // 上下阴影
$-picker-loading-bg: var(--wot-picker-loading-bg, rgba($-color-white, 0.8)) !default; // loading 背景颜色
$-picker-region-separator-color: var(--wot-picker-region-separator-color, rgba(0, 0, 0, 0.65)) !default; // 区域选择文字颜色
$-picker-cell-arrow-size-large: var(--wot-picker-cell-arrow-size-large, $-cell-icon-size) !default; // cell 类型的大尺寸 右侧icon尺寸
$-picker-region-color: var(--wot-picker-region-color, rgba(0, 0, 0, 0.45)) !default; // 区域选择文字颜色
$-picker-region-bg-active-color: var(--wot-picker-region-bg-active-color, $-color-theme) !default; // 区域选择激活选中背景颜色
$-picker-region-fs: var(--wot-picker-region-fs, 14px) !default; // 区域选择文字字号
/* col-picker */
$-col-picker-selected-height: var(--wot-col-picker-selected-height, 44px) !default; // 弹框顶部值高度
$-col-picker-selected-padding: var(--wot-col-picker-selected-padding, 0 16px) !default; // 弹框顶部值左右间距
$-col-picker-selected-fs: var(--wot-col-picker-selected-fs, 14px) !default; // 弹框顶部值字号
$-col-picker-selected-color: var(--wot-col-picker-selected-color, rgba(0, 0, 0, 0.85)) !default; // 弹框顶部值文字颜色
$-col-picker-selected-fw: var(--wot-col-picker-selected-fw, 700) !default; // 弹框顶部值高亮字重
$-col-picker-line-width: var(--wot-col-picker-line-width, 16px) !default; // 弹框顶部值高亮线条宽度
$-col-picker-line-height: var(--wot-col-picker-line-height, 3px) !default; // 弹框顶部值高亮线条高度
$-col-picker-line-color: var(--wot-col-picker-line-color, linear-gradient(315deg, rgba(81, 124, 240, 1), rgba(118, 158, 245, 1))) !default; // 弹框顶部值高亮线条颜色
$-col-picker-line-box-shadow: var(--wot-col-picker-line-box-shadow, 0px 1px 2px 0px rgba(1, 87, 255, 0.2)) !default; // 弹框顶部值高亮线条阴影
$-col-picker-list-height: var(--wot-col-picker-list-height, 53vh) !default; // 弹框列表高度
$-col-picker-list-padding-bottom: var(--wot-col-picker-list-padding-bottom, 30px) !default; // 弹框列表底部间距
$-col-picker-list-color: var(--wot-col-picker-list-color, rgba(0, 0, 0, 0.85)) !default; // 弹框列表文字颜色
$-col-picker-list-color-disabled: var(--wot-col-picker-list-color-disabled, rgba(0, 0, 0, 0.15)) !default; // 弹框列表文字禁用颜色
$-col-picker-list-color-tip: var(--wot-col-picker-list-color-tip, rgba(0, 0, 0, 0.45)) !default; // 弹框列表提示文字颜色
$-col-picker-list-fs: var(--wot-col-picker-list-fs, 14px) !default; // 弹框列表文字字号
$-col-picker-list-fs-tip: var(--wot-col-picker-list-fs-tip, 12px) !default; // 弹框列表提示文字字号
$-col-picker-list-item-padding: var(--wot-col-picker-list-item-padding, 12px 15px) !default; // 弹框列表选项间距
$-col-picker-list-checked-icon-size: var(--wot-col-picker-list-checked-icon-size, 18px) !default; // 弹框列表选中箭头大小
$-col-picker-list-color-checked: var(--wot-col-picker-list-color-checked, $-color-theme) !default; // 弹框列表选中选项颜色
/* overlay */
$-overlay-bg: var(--wot-overlay-bg, rgba(0, 0, 0, 0.65)) !default;
$-overlay-bg-dark: var(--wot-overlay-bg-dark, rgba(0, 0, 0, 0.75)) !default;
/* popup */
$-popup-close-size: var(--wot-popup-close-size, 24px) !default; // 关闭按钮尺寸
$-popup-close-color: var(--wot-popup-close-color, #666) !default; // 关闭按钮颜色
/* progress */
$-progress-padding: var(--wot-progress-padding, 9px 0 8px) !default; // 进度条内边距
$-progress-bg: var(--wot-progress-bg, rgba(229, 229, 229, 1)) !default; // 进度条底色
$-progress-danger-color: var(--wot-progress-danger-color, $-color-danger) !default; // 进度条danger颜色
$-progress-success-color: var(--wot-progress-success-color, $-color-success) !default; // 进度条success进度条颜色
$-progress-color: var(--wot-progress-color, resultColor(315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条渐变色
$-progress-linear-success-color: var(--wot-progress-linear-success-color, resultColor(315deg, $-color-theme, "dark""light", #20B080 #2BD69D, 0% 100%)) !default; // success进度条渐变色
$-progress-linear-danger-color: var(--wot-progress-linear-danger-color, resultColor(315deg, $-color-theme, "dark""light", #E04350 #FF5964, 0% 100%)) !default; // danger进度条渐变色
$-progress-height: var(--wot-progress-height, 3px) !default; // 进度条高度
$-progress-label-color: var(--wot-progress-label-color, #333) !default; // 文字颜色
$-progress-label-fs: var(--wot-progress-label-fs, 14px) !default; // 文字字号
$-progress-icon-fs: var(--wot-progress-icon-fs, 18px) !default; // 图标字号
/* radio */
$-radio-margin: var(--wot-radio-margin, $-checkbox-margin) !default; // 多个单选框距离
$-radio-label-margin: var(--wot-radio-label-margin, $-checkbox-label-margin) !default; // 右侧文字与左侧图标距离
$-radio-size: var(--wot-radio-size, 16px) !default; // 左侧图标尺寸
$-radio-bg: var(--wot-radio-bg, $-checkbox-bg) !default; // 左侧图标尺寸
$-radio-label-fs: var(--wot-radio-label-fs, $-checkbox-label-fs) !default; // 右侧文字字号
$-radio-label-color: var(--wot-radio-label-color, $-checkbox-label-color) !default; // 右侧文字颜色
$-radio-checked-color: var(--wot-radio-checked-color, $-checkbox-checked-color) !default; // 选中颜色
$-radio-disabled-color: var(--wot-radio-disabled-color, $-checkbox-disabled-color) !default; // 禁用颜色
$-radio-disabled-label-color: var(--wot-radio-disabled-label-color, $-checkbox-disabled-label-color) !default; // 禁用文字颜色
$-radio-large-size: var(--wot-radio-large-size, $-checkbox-large-size) !default; // 左侧图标尺寸
$-radio-large-label-fs: var(--wot-radio-large-label-fs, $-checkbox-large-label-fs) !default; // 右侧文字字号
$-radio-button-height: var(--wot-radio-button-height, $-checkbox-button-height) !default; // 按钮模式复选框高
$-radio-button-min-width: var(--wot-radio-button-min-width, 60px) !default; // 按钮模式最小宽
$-radio-button-max-width: var(--wot-radio-button-max-width, 144px) !default; // 按钮模式最大宽
$-radio-button-radius: var(--wot-radio-button-radius, $-checkbox-button-radius) !default; // 按钮圆角大小
$-radio-button-bg: var(--wot-radio-button-bg, $-checkbox-button-bg) !default; // 按钮模式背景颜色
$-radio-button-fs: var(--wot-radio-button-fs, $-checkbox-button-font-size) !default; // 按钮模式字号
$-radio-button-border: var(--wot-radio-button-border, $-checkbox-button-border) !default; // 按钮边框颜色
$-radio-button-disabled-border: var(--wot-radio-button-disabled-border, $-checkbox-button-disabled-border) !default; // 按钮禁用边框颜色
$-radio-dot-size: var(--wot-radio-dot-size, 8px) !default; // 单选dot模式圆点尺寸
$-radio-dot-large-size: var(--wot-radio-dot-large-size, 10px) !default; // 单选dot模式大尺寸圆点尺寸
$-radio-dot-checked-bg: var(--wot-radio-dot-checked-bg, $-color-theme) !default; // 单选dot模式选中背景色
$-radio-dot-checked-border-color: var(--wot-radio-dot-checked-border-color, $-color-theme) !default; // 单选dot模式选中边框色
$-radio-dot-border-color: var(--wot-radio-dot-border-color, #dcdcdc) !default; // 单选dot模式边框色
$-radio-dot-disabled-border: var(--wot-radio-dot-disabled-border, #d9d9d9) !default; // 单选dot模式禁用边框颜色
$-radio-dot-disabled-bg: var(--wot-radio-dot-disabled-bg, #d9d9d9) !default; // 单选dot模式禁用背景颜色
/* search */
$-search-side-padding: var(--wot-search-side-padding, $-size-side-padding) !default; // 左右间距
$-search-padding: var(--wot-search-padding, 10px 0 10px $-search-side-padding) !default; // 不包含取消按钮的间距
$-search-input-radius: var(--wot-search-input-radius, 15px) !default; // 输入框圆角大小
$-search-input-bg: var(--wot-search-input-bg, $-color-bg) !default; // 输入框背景色
$-search-input-height: var(--wot-search-input-height, 30px) !default; // 输入框高度
$-search-input-padding: var(--wot-search-input-padding, 0 32px 0 42px) !default; // 输入框间距
$-search-input-fs: var(--wot-search-input-fs, $-fs-content) !default; // 输入框字号
$-search-input-color: var(--wot-search-input-color, #262626) !default; // 输入框文字颜色
$-search-icon-color: var(--wot-search-icon-color, $-color-icon) !default; // 图标颜色
$-search-placeholder-color: var(--wot-search-placeholder-color, #bfbfbf) !default; // placeholder 颜色
$-search-cancel-padding: var(--wot-search-cancel-padding, 0 $-search-side-padding 0 10px) !default; // 取消按钮间距
$-search-cancel-fs: var(--wot-search-cancel-fs, $-fs-title) !default; // 取消按钮字号
$-search-cancel-color: var(--wot-search-cancel-color, rgba(0, 0, 0, 0.65)) !default; // 取消按钮颜色
$-search-light-bg: var(--wot-search-light-bg, $-color-bg) !default; // light 类型的容器背景色
/* slider */
$-slider-fs: var(--wot-slider-fs, $-fs-content) !default; // 字体大小
$-slider-handle-radius: var(--wot-slider-handle-radius, 12px) !default; // 滑块半径
$-slider-handle-bg: var(--wot-slider-handle-bg, resultColor(139deg, $-color-theme, "dark""light", #FFFFFF #F7F7F7, 0% 100%)) !default; // 滑块背景
$-slider-axie-height: var(--wot-slider-axie-height, 3px) !default; // 滑轴高度
$-slider-color: var(--wot-slider-color, #333) !default; // 字体颜色
$-slider-axie-bg: var(--wot-slider-axie-bg, #E5E5E5) !default; // 滑轴的默认背景色
$-slider-line-color: var(--wot-slider-line-color, resultColor(315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条颜色
$-slider-disabled-color: var(--wot-slider-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用状态下字体颜色
/* sort-button */
$-sort-button-fs: var(--wot-sort-button-fs, $-fs-content) !default; // 字号
$-sort-button-color: var(--wot-sort-button-color, $-color-content) !default; // 颜色
$-sort-button-height: var(--wot-sort-button-height, 48px) !default; // 高度
$-sort-button-line-height: var(--wot-sort-button-line-height, 3px) !default; // 下划线高度
$-sort-button-line-color: var(--wot-sort-button-line-color, $-color-theme) !default; // 下划线颜色
/* steps */
$-steps-icon-size: var(--wot-steps-icon-size, 22px) !default; // 图标尺寸
$-steps-inactive-color: var(--wot-steps-inactive-color, rgba(0, 0, 0, 0.25)) !default; // 等待状态文字颜色
$-steps-finished-color: var(--wot-steps-finished-color, $-color-theme) !default; // 完成文字颜色
$-steps-icon-text-fs: var(--wot-steps-icon-text-fs, $-fs-content) !default; // 数字图标文字字号
$-steps-error-color: var(--wot-steps-error-color, $-color-danger) !default; // 异常颜色
$-steps-title-fs: var(--wot-steps-title-fs, $-fs-content) !default; // 标题字号
$-steps-title-fw: var(--wot-steps-title-fw, $-fw-medium) !default; // 标题字重
$-steps-label-fs: var(--wot-steps-label-fs, $-fs-secondary) !default; // 描述信息字号
$-steps-description-color: var(--wot-steps-description-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息颜色
$-steps-is-icon-width: var(--wot-steps-is-icon-width, 30px) !default; // 自定义图标的宽度，给左右留白
$-steps-line-color: var(--wot-steps-line-color, rgba(0, 0, 0, 0.15)) !default; // 线条颜色
$-steps-dot-size: var(--wot-steps-dot-size, 7px) !default; // 点状大小
$-steps-dot-active-size: var(--wot-steps-dot-active-size, 9px) !default; // 点状高亮大小
/* switch */
$-switch-size: var(--wot-switch-size, 28px) !default; // switch大小
$-switch-width: var(--wot-switch-width, calc(1.8em + 4px)) !default; // 宽度
$-switch-height: var(--wot-switch-height, calc(1em + 4px)) !default; // 高度
$-switch-circle-size: var(--wot-switch-circle-size, 1em) !default; // 圆点大小
$-switch-border-color: var(--wot-switch-border-color, #e5e5e5) !default; // 边框颜色选中状态背景颜色
$-switch-active-color: var(--wot-switch-active-color, $-color-theme) !default; // 选中状态背景
$-switch-active-shadow-color: var(--wot-switch-active-shadow-color, rgba(0, 83, 162, 0.5)) !default; // 选中状态shadow颜色
$-switch-inactive-color: var(--wot-switch-inactive-color, #EAEAEA) !default; // 非选中背景颜色
$-switch-inactive-shadow-color: var(--wot-switch-inactive-shadow-color, rgba(155, 155, 155, 0.5)) !default; // 非选中状态shadow颜色
/* tabs */
$-tabs-nav-arrow-fs: var(--wot-tabs-nav-arrow-fs, 18px) !default; // 全部Icon字号
$-tabs-nav-arrow-open-fs: var(--wot-tabs-nav-arrow-open-fs, 14px) !default; // 展开Icon字号
$-tabs-nav-width: var(--wot-tabs-nav-width, 100vw) !default; // tabs 头部切换宽度
$-tabs-nav-height: var(--wot-tabs-nav-height, 42px) !default; // 头部切换高度
$-tabs-nav-fs: var(--wot-tabs-nav-fs, $-fs-content) !default; // 头部切换文字大小
$-tabs-nav-color: var(--wot-tabs-nav-color, rgba(0, 0, 0, 0.85)) !default; // 头部切换文字颜色
$-tabs-nav-bg: var(--wot-tabs-nav-bg, $-color-white) !default; // 背景颜色
$-tabs-nav-active-color: var(--wot-tabs-nav-active-color, $-color-theme) !default; // 头部高亮颜色
$-tabs-nav-disabled-color: var(--wot-tabs-nav-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 头部禁用颜色
$-tabs-nav-line-height: var(--wot-tabs-nav-line-height, 3px) !default; // 高亮边框高度
$-tabs-nav-line-bg-color: var(--wot-tabs-nav-line-bg-color, $-color-theme) !default; // 底部条颜色
$-tabs-nav-map-fs: var(--wot-tabs-nav-map-fs, $-fs-content) !default; // map 类型按钮字号
$-tabs-nav-map-color: var(--wot-tabs-nav-map-color, rgba(0, 0, 0, 0.85)) !default; // map 类型按钮文字颜色
$-tabs-nav-map-arrow-color: var(--wot-tabs-nav-map-arrow-color, rgba(0, 0, 0, 0.65)) !default; // map 类型箭头颜色
$-tabs-nav-map-btn-before-bg: var(--wot-tabs-nav-map-btn-before-bg, linear-gradient(270deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0) 100%)) !default; // 左侧map遮罩阴影
$-tabs-nav-map-button-back-color: var(--wot-tabs-nav-map-button-back-color, rgba(0, 0, 0, 0.04)) !default; // map 类型按钮边框颜色
$-tabs-nav-map-button-radius: var(--wot-tabs-nav-map-button-radius, 16px) !default; // map 类型按钮圆角大小
$-tabs-nav-map-modal-bg: var(--wot-tabs-nav-map-modal-bg, $-overlay-bg) !default; // map 类型蒙层背景色
/* tag */
$-tag-fs: var(--wot-tag-fs, $-fs-secondary) !default; // 字号
$-tag-color: var(--wot-tag-color, $-color-white) !default; // 字体颜色
$-tag-small-fs: var(--wot-tag-small-fs, $-fs-aid) !default; // 小尺寸字号
$-tag-info-color: var(--wot-tag-info-color, #585858) !default; // info 颜色
$-tag-primary-color: var(--wot-tag-primary-color, $-color-theme) !default; // 主颜色
$-tag-danger-color: var(--wot-tag-danger-color, $-color-danger) !default; // danger 颜色
$-tag-warning-color: var(--wot-tag-warning-color, $-color-warning) !default; // warning 颜色
$-tag-success-color: var(--wot-tag-success-color, $-color-success) !default; // success 颜色
$-tag-info-bg: var(--wot-tag-info-bg, resultColor(49deg, $-color-black, "dark""light", #808080 #999999, 0% 100%)) !default; // info 背景颜色
$-tag-primary-bg: var(--wot-tag-primary-bg, $-color-theme) !default; // 主背景颜色
$-tag-danger-bg: var(--wot-tag-danger-bg, $-color-danger) !default; // danger 背景颜色
$-tag-warning-bg: var(--wot-tag-warning-bg, $-color-warning) !default; // warning 背景颜色
$-tag-success-bg: var(--wot-tag-success-bg, $-color-success) !default; // success 背景颜色
$-tag-round-color: var(--wot-tag-round-color, rgba(102, 102, 102, 1)) !default; // round 字体颜色
$-tag-round-border-color: var(--wot-tag-round-border-color, rgba(225, 225, 225, 1)) !default; // round 边框颜色
$-tag-round-radius: var(--wot-tag-round-radius, 12px) !default; // round 圆角大小
$-tag-mark-radius: var(--wot-tag-mark-radius, 6px 2px 6px 2px) !default; // mark 圆角大小
$-tag-close-size: var(--wot-tag-close-size, 14px) !default; // 关闭按钮字号
$-tag-close-color: var(--wot-tag-close-color, $-tag-info-color) !default; // 关闭按钮颜色
$-tag-close-active-color: var(--wot-tag-close-active-color, rgba(0, 0, 0, 0.45)) !default; // 关闭按钮 active 颜色
/* toast */
$-toast-padding: var(--wot-toast-padding, 16px 24px) !default; // padding
$-toast-max-width: var(--wot-toast-max-width, 300px) !default; // 最大宽度
$-toast-radius: var(--wot-toast-radius, 8px) !default; // 圆角大小
$-toast-bg: var(--wot-toast-bg, $-overlay-bg) !default; // 背景色
$-toast-fs: var(--wot-toast-fs, $-fs-content) !default; // 字号
$-toast-with-icon-min-width: var(--wot-toast-with-icon-min-width, 150px) !default; // 有图标的情况下最小宽度
$-toast-icon-size: var(--wot-toast-icon-size, 39px) !default; // 图标大小
$-toast-loading-padding: var(--wot-toast-loading-padding, 10px) !default; // loading 下的padding
$-toast-box-shadow: var(--wot-toast-box-shadow, 0px 6px 16px 0px rgba(0, 0, 0, 0.08)) !default; // 外部阴影
/* tooltip */
$-tooltip-bg: var(--wot-tooltip-bg, rgba(38, 39, 40, 0.8)) !default; // 背景色
$-tooltip-color: var(--wot-tooltip-color, $-color-white) !default; // 文字颜色
$-tooltip-radius: var(--wot-tooltip-radius, 8px) !default; // 圆角大小
$-tooltip-arrow-size: var(--wot-tooltip-arrow-size, 9px) !default; // 箭头大小
$-tooltip-fs: var(--wot-tooltip-fs, $-fs-content) !default; // 字号
$-tooltip-blur: var(--wot-tooltip-blur, 10px) !default; // 背景高斯模糊效果
$-tooltip-padding: var(--wot-tooltip-padding, 9px 20px) !default; // 间距
$-tooltip-close-size: var(--wot-tooltip-close-size, 6px) !default; // 背景高斯模糊效果
$-tooltip-z-index: var(--wot-tooltip-z-index, 500) !default;
$-tooltip-line-height: var(--wot-tooltip-line-height, 18px) !default; // 行高
/* popover */
$-popover-bg: var(--wot-popover-bg, $-color-white) !default; // 背景色
$-popover-color: var(--wot-popover-color, rgba(0, 0, 0, 0.85)) !default; // 文字颜色
$-popover-box-shadow: var(--wot-popover-box-shadow, 0px 2px 10px 0px rgba(0, 0, 0, 0.1)) !default; // 阴影颜色
$-popover-arrow-box-shadow: var(--wot-popover-arrow-box-shadow, 0px 2px 10px 0px rgba(0, 0, 0, 0.2)) !default; // 阴影颜色
$-popover-border-color: var(--wot-popover-border-color, rgba(0, 0, 0, 0.09)) !default; // 阴影颜色
$-popover-radius: var(--wot-popover-radius, 4px) !default; // 圆角大小
$-popover-arrow-size: var(--wot-popover-arrow-size, 6px) !default; // 箭头大小
$-popover-fs: var(--wot-popover-fs, $-fs-content) !default; // 字号
$-popover-padding: var(--wot-popover-padding, 15px) !default; // 间距
$-popover-line-height: var(--wot-popover-line-height, 18px) !default; // 行高
$-popover-z-index: var(--wot-popover-z-index, $-tooltip-z-index) !default;
/* grid-item */
$-grid-item-fs: var(--wot-grid-item-fs, 12px) !default; // 字号
$-grid-item-bg: var(--wot-grid-item-bg, $-color-white) !default; // 字号
$-grid-item-padding: var(--wot-grid-item-padding, 14px 0px) !default; // 内容的 padding
$-grid-item-border-color: var(--wot-grid-item-border-color, $-color-border-light) !default; // 边框颜色
/* statustip */
$-statustip-fs: var(--wot-statustip-fs, $-fs-content) !default; // 字号
$-statustip-color: var(--wot-statustip-color, rgba(0, 0, 0, 0.45)) !default; // 文字颜色
$-statustip-line-height: var(--wot-statustip-line-height, 16px) !default; // 文字行高
$-statustip-padding: var(--wot-statustip-padding, 5px 10px) !default; // 间距
/* card */
$-card-bg: var(--wot-card-bg, $-color-white) !default; // 背景色
$-card-fs: var(--wot-card-fs, $-fs-content) !default; // 卡片字号
$-card-padding: var(--wot-card-padding, 0 $-size-side-padding) !default; // 内边距
$-card-footer-padding: var(--wot-card-footer-padding, 12px 0 16px) !default; // 底部内边距
$-card-shadow-color: var(--wot-card-shadow-color, 0px 4px 8px 0px rgba(0, 0, 0, 0.02)) !default; // 阴影
$-card-radius: var(--wot-card-radius, 8px) !default; // 圆角大小
$-card-line-height: var(--wot-card-line-height, 1.1) !default; // 行高
$-card-margin: var(--wot-card-margin, 0 $-size-side-padding) !default; // 外边距
$-card-title-color: var(--wot-card-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
$-card-title-fs: var(--wot-card-title-fs, $-fs-title) !default; // 矩形卡片标题字号
$-card-content-border-color: var(--wot-card-content-border-color, rgba(0, 0, 0, 0.09)) !default; // 内容边框
$-card-rectangle-title-padding: var(--wot-card-rectangle-title-padding, 15px 15px 12px) !default; // 矩形卡片头部内边距
$-card-rectangle-content-padding: var(--wot-card-rectangle-content-padding, 16px 0) !default; // 矩形卡片内容内边距
$-card-rectangle-footer-padding: var(--wot-card-rectangle-footer-padding, 12px 0) !default; // 矩形卡片底部内边距
$-card-content-color: var(--wot-card-content-color, rgba(0, 0, 0, 0.45)) !default; // 文本内容颜色
$-card-content-line-height: var(--wot-card-content-line-height, 1.428) !default; // 文本内容行高
$-card-content-margin: var(--wot-card-content-margin, 13px 0 12px) !default; // 内容外边距
$-card-content-rectangle-margin: var(--wot-card-content-rectangle-margin, 14px 0 12px) !default; // 矩形卡片内容外边距
/* upload */
$-upload-size: var(--wot-upload-size, 80px) !default; // upload的外边框默认尺寸
$-upload-evoke-icon-size: var(--wot-upload-evoke-icon-size, 32px) !default; // 唤起项的图标大小
$-upload-evoke-bg: var(--wot-upload-evoke-bg, rgba(0, 0, 0, 0.04)) !default; // 唤起项的背景色
$-upload-evoke-color: var(--wot-upload-evoke-color, rgba(0, 0, 0, 0.25)) !default; // 唤起项的图标颜色
$-upload-evoke-disabled-color: var(--wot-upload-evoke-disabled-color, rgba(0, 0, 0, 0.09)) !default; // 唤起项禁用颜色
$-upload-close-icon-size: var(--wot-upload-close-icon-size, 16px) !default; // 移除按钮尺寸
$-upload-close-icon-color: var(--wot-upload-close-icon-color, rgba(0, 0, 0, 0.65)) !default; // 移除按钮颜色
$-upload-progress-fs: var(--wot-upload-progress-fs, 14px) !default; // 进度文字字号
$-upload-preview-name-fs: var(--wot-upload-preview-name-fs, 12px) !default; // 预览图片名字号
$-upload-preview-icon-size: var(--wot-upload-preview-icon-size, 24px) !default; // 预览内部图标尺寸
$-upload-preview-name-bg: var(--wot-upload-preview-name-bg, rgba(0, 0, 0, 0.6)) !default; // 预览文件名背景色
$-upload-preview-name-height: var(--wot-upload-preview-name-height, 22px) !default; // 预览文件名背景高度
/* curtain */
$-curtain-content-radius: var(--wot-curtain-content-radius, 24px) !default; // 内容圆角
$-curtain-content-close-color: var(--wot-curtain-content-close-color, $-color-white) !default; // 关闭按钮颜色
$-curtain-content-close-fs: var(--wot-curtain-content-close-fs, $-fs-big) !default; // 关闭按钮大小
/* notify */
$-notify-text-color: var(--wot-notify-text-color, $-color-white) !default;
$-notify-padding: var(--wot-notify-padding, 8px 16px) !default;
$-notify-font-size: var(--wot-notify-font-size, $-fs-content) !default;
$-notify-line-height: var(--wot-notify-line-height, 20px) !default;
$-notify-primary-background: var(--wot-notify-primary-background, $-color-theme) !default;
$-notify-success-background: var(--wot-notify-success-background, $-color-success) !default;
$-notify-danger-background: var(--wot-notify-danger-background, $-color-danger) !default;
$-notify-warning-background: var(--wot-notify-warning-background, $-color-warning) !default;
/* skeleton */
$-skeleton-background-color: var(--wot-skeleton-background-color, #eee) !default;
$-skeleton-animation-gradient: var(--wot-skeleton-animation-gradient, rgba(0, 0, 0, 0.04)) !default;
$-skeleton-animation-flashed: var(--wot-skeleton-animation-flashed, rgba(230, 230, 230, 0.3)) !default;
$-skeleton-text-height-default: var(--wot-skeleton-text-height-default, 16px) !default;
$-skeleton-rect-height-default: var(--wot-skeleton-rect-height-default, 16px) !default;
$-skeleton-circle-height-default: var(--wot-skeleton-circle-height-default, 48px) !default;
$-skeleton-row-margin-bottom: var(--wot-skeleton-row-margin-bottom, 16px) !default;
$-skeleton-border-radius-text: var(--wot-skeleton-border-radius-text, 2px) !default;
$-skeleton-border-radius-rect: var(--wot-skeleton-border-radius-rect, 4px) !default;
$-skeleton-border-radius-circle: var(--wot-skeleton-border-radius-circle, 50%) !default;
/* circle */
$-circle-text-color: var(--wot-circle-text-color, $-color-content) !default; // circle文字颜色
/* swiper */
$-swiper-radius: var(--wot-swiper-radius, 8px);
$-swiper-item-padding: var(--wot-swiper-item-padding, 0);
/* swiper-nav */
// dot & dots-bar
$-swiper-nav-dot-color: var(--wot-swiper-nav-dot-color, $-font-white-2) !default;
$-swiper-nav-dot-active-color: var(--wot-swiper-nav-dot-active-color, $-font-white-1) !default;
$-swiper-nav-dot-size: var(--wot-swiper-nav-dot-size, 12rpx) !default;
$-swiper-nav-dots-bar-active-width: var(--wot-swiper-nav-dots-bar-active-width, 40rpx) !default;
// fraction
$-swiper-nav-fraction-color: var(--wot-swiper-nav-fraction-color, $-font-white-1) !default;
$-swiper-nav-fraction-bg-color: var(--wot-swiper-nav-fraction-bg-color, $-font-gray-3) !default;
$-swiper-nav-fraction-height: var(--wot-swiper-nav-fraction-height, 48rpx) !default;
$-swiper-nav-fraction-font-size: var(--wot-swiper-nav-fraction-font-size, 24rpx) !default;
// button
$-swiper-nav-btn-color: var(--wot-swiper-nav-btn-color, $-font-white-1) !default;
$-swiper-nav-btn-bg-color: var(--wot-swiper-nav-btn-bg-color, $-font-gray-3) !default;
$-swiper-nav-btn-size: var(--wot-swiper-nav-btn-size, 48rpx) !default;
/* segmented */
$-segmented-padding: var(--wot-segmented-padding, 4px) !default; // 分段器padding
$-segmented-item-bg-color: var(--wot-segmented-item-bg-color, #eeeeee) !default;
$-segmented-item-color: var(--wot-segmented-item-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
$-segmented-item-acitve-bg: var(--wot-segmented-item-acitve-bg, #FFFFFF) !default; // 标题文字颜色
$-segmented-item-disabled-color: var(--wot-segmented-item-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 标题文字禁用颜色
/* tabbar */
$-tabbar-height: var(--wot-tabbar-height, 50px) !default;
$-tabbar-box-shadow: var(--wot-tabbar-box-shadow, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)) !default; // round类型tabbar阴影
/* tabbar-item */
$-tabbar-item-title-font-size: var(--wot-tabbar-item-title-font-size, 10px) !default; // tabbar选项文字大小
$-tabbar-item-title-line-height: var(--wot-tabbar-item-title-line-height, initial) !default; // tabbar选项标题文字行高
$-tabbar-inactive-color: var(--wot-tabbar-inactive-color, $-color-title) !default; // 标题文字和图标颜色
$-tabbar-active-color: var(--wot-tabbar-active-color, $-color-theme) !default; // 选中文字和图标颜色
/* navbar */
$-navbar-height: var(--wot-navbar-height, 44px) !default; // navbar高度
$-navbar-color: var(--wot-navbar-color, $-font-gray-1) !default; // navbar字体颜色
$-navbar-background: var(--wot-navbar-background, $-color-white) !default; // navbar背景颜色
$-navbar-arrow-size: var(--wot-navbar-arrow-size, 24px) !default; // navbar左箭头图标大小
$-navbar-desc-font-size: var(--wot-navbar-desc-font-size, 16px); // navbar 左箭头字体大小
$-navbar-desc-font-color: var(--wot-navbar-desc-font-color, $-font-gray-1) !default; // navbar左右两侧字体颜色
$-navbar-title-font-size: var(--wot-navbar-title-font-size, 18px); // navbar title字体大小
$-navbar-title-font-weight: var(--wot-navbar-title-font-weight, 600); // navbar title字重
$-navbar-disabled-opacity: var(--wot-navbar-disabled-opacity, 0.6) !default; // navbar左右两侧字体禁用
$-navbar-hover-color :var(--wot-navbar-hover-color, #eee) !default; // navbar hover样式
/* navbar-capsule */
$-navbar-capsule-border-color: var(--wot-navbar-capsule-border-color, #e7e7e7) !default;
$-navbar-capsule-border-radius: var(--wot-navbar-capsule-border-radius, 16px) !default;
$-navbar-capsule-width: var(--wot-navbar-capsule-width, 88px) !default;
$-navbar-capsule-height: var(--wot-navbar-capsule-height, 32px) !default;
/* table */
$-table-color: var(--wot-table-color, $-font-gray-1) !default; // 表格字体颜色
$-table-bg: var(--wot-table-bg, #FFFFFF) !default; // 表格背景颜色
$-table-stripe-bg: var(--wot-table-stripe-bg, #f3f3f3) !default; // 表格背景颜色
$-table-border-color: var(--wot-table-border-color, #ececec) !default; // 表格边框颜色
$-table-font-size: var(--wot-table-font-size, 13px) !default; // 表格字体大小
/* sidebar */
$-sidebar-bg: var(--wot-sidebar-bg, $-color-gray-1) !default; // 侧边栏背景色
$-sidebar-width: var(--wot-sidebar-width, 104px) !default; // 侧边栏宽度
$-sidebar-height: var(--wot-sidebar-height, 100%) !default; // 侧边栏高度
/* sidebar-item */
$-sidebar-color: var(--wd-sidebar-color, $-font-gray-1) !default;
$-sidebar-item-height: var(--wd-sidebar-item-height, 56px) !default;
$-sidebar-item-line-height: var(--wd-sidebar-item-line-height, 24px) !default;
$-sidebar-disabled-color: var(--wd-side-bar-disabled-color, $-font-gray-4) !default;
$-sidebar-active-color: var(--wd-sidebar-active-color, $-color-theme) !default; // 激活项字体颜色
$-sidebar-active-bg: var(--wot-sidebar-active-bg, $-color-white) !default; // 激活项背景颜色
$-sidebar-hover-bg: var(--wot-sidebar-hover-bg, $-color-gray-2) !default; // 激活项点击背景颜色
$-sidebar-border-radius: var(--wd-sidebar-border-radius, 8px) !default;
$-sidebar-font-size: var(--wd-sidebar-font-size, 16px) !default;
$-sidebar-icon-size: var(--wd-sidebar-icon-size, 20px) !default;
$-sidebar-active-border-width: var(--wd-sidebar-active-border-width, 4px) !default;
$-sidebar-active-border-height: var(--wd-sidebar-active-border-height, 16px) !default;
/* fab */
$-fab-trigger-height: var(--wd-fab-trigger-height, 56px) !default;
$-fab-trigger-width: var(--wd-fab-trigger-width, 56px) !default;
$-fab-actions-padding: var(--wd-actions-padding, 12px) !default;
/* count-down */
$-count-down-text-color: var(--wd-count-down-text-color, $-color-gray-8) !default;
$-count-down-font-size: var(--wd-count-down-font-size, $-fs-content) !default;
$-count-down-line-height: var(--wd-count-down-line-height, 20px) !default;
/* number-keyboard */
$-number-keyboard-key-height: var(--wd-number-keyboard-key-height, 48px) !default;
$-number-keyboard-key-font-size: var(--wd-number-keyboard-key-font-size, 28px) !default;
$-number-keyboard-key-background: var(--wd-number-keyboard-key-background, $-color-white) !default;
$-number-keyboard-key-border-radius: var(--wot-number-keyboard-key-border-radius, 8px) !default;
$-number-keyboard-delete-font-size: var(--wot-number-keyboard-delete-font-size, 16px) !default;
$-number-keyboard-key-active-color: var(--wot-number-keyboard-key-active-color, $-color-gray-3) !default;
$-number-keyboard-button-text-color: var(--wot-number-keyboard-button-text-color, $-color-white) !default;
$-number-keyboard-button-background: var(--wot-number-keyboard--button-background, $-color-theme) !default;
$-number-keyboard-button-active-opacity: var(--wot-number-keyboard-button-active-opacity, 0.6) !default;
$-number-keyboard-background: var(--wot-number-keyboard-background, $-color-gray-2) !default;
$-number-keyboard-title-height: var(--wot-number-keyboard-title-height, 34px) !default;
$-number-keyboard-title-color: var(--wot-number-keyboard-title-color, $-color-gray-7) !default;
$-number-keyboard-title-font-size: var(--wot-number-keyboard-title-font-size, 16px) !default;
$-number-keyboard-close-padding: var(--wot-number-keyboard-title-font-size, 0 16px) !default;
$-number-keyboard-close-color: var(--wot-number-keyboard-close-color, $-color-theme) !default;
$-number-keyboard-close-font-size: var(--wot-number-keyboard-close-font-size, 14px) !default;
/* passwod-input */
$-password-input-height: var(--wd-password-input-height, 50px);
$-password-input-margin: var(--wd-password-input-margin, 16px);
$-password-input-font-size: var(--wd-password-input-margin, 20px);
$-password-input-radius: var(--wd-password-input-radius, 6px);
$-password-input-background: var(--wd-password-input-background, #fff);
$-password-input-info-color: var(--wd-password-input-info-color, $-color-info);
$-password-input-info-font-size: var(--wd-password-input-info-font-size, $-fs-content);
$-password-input-border-color: var(--wd-password-border-color, #ebedf0);
$-password-input-error-info-color: var(--wd-password-input-error-info-color, $-color-danger);
$-password-input-dot-size: var(--wd-password-input-dot-size, 10px);
$-password-input-dot-color: var(--wd-password-input-dot-color, $-color-gray-8);
$-password-input-text-color: var(--wd-password-input-text-color, $-color-gray-8);
$-password-input-cursor-color: var(--wd-password-input-cursor-color, $-color-gray-8);
$-password-input-cursor-width: var(--wd-password-input-cursor-width, 1px);
$-password-input-cursor-height: var(--wd-password-input-cursor-height, 40%);
$-password-input-cursor-duration: var(--wd-password-input-cursor-duration, 1s);
/* form-item */
$-form-item-error-message-color: var(--wot-form-item-error-message-color, $-color-danger) !default;
$-form-item-error-message-font-size: var(--wot-form-item-error-message-font-size, $-fs-secondary) !default;
$-form-item-error-message-line-height: var(--wot-form-item-error-message-line-height, 24px) !default;
/* backtop */
$-backtop-bg: var(--wot-backtop-bg, #e1e1e1) !default;
/* index-bar */
$-index-bar-index-font-size: var(--wot-index-bar-index-font-size, $-fs-aid) !default;
src/Components/wd-icon-local/common/base64.ts 0 → 100644
View file @ 362a6f9b
/* eslint-disable */
const _b64chars: string[] = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/']
const _mkUriSafe = (src: string): string => src.replace(/[+/]/g, (m0: string) => (m0 === '+' ? '-' : '_')).replace(/=+\$/m, '')
const fromUint8Array = (src: Uint8Array, rfc4648 = false): string => {
let b64 = ''
for (let i = 0, l = src.length; i < l; i += 3) {
const [a0, a1, a2] = [src[i], src[i + 1], src[i + 2]]
const ord = (a0 << 16) | (a1 << 8) | a2
b64 += _b64chars[ord >>> 18]
b64 += _b64chars[(ord >>> 12) & 63]
b64 += typeof a1 !== 'undefined' ? _b64chars[(ord >>> 6) & 63] : '='
b64 += typeof a2 !== 'undefined' ? _b64chars[ord & 63] : '='
}
return rfc4648 ? _mkUriSafe(b64) : b64
}
const _btoa: (s: string) => string =
typeof btoa === 'function'
? (s: string) => btoa(s)
: (s: string) => {
if (s.charCodeAt(0) > 255) {
throw new RangeError('The string contains invalid characters.')
}
return fromUint8Array(Uint8Array.from(s, (c: string) => c.charCodeAt(0)))
}
const utob = (src: string): string => unescape(encodeURIComponent(src))
export default function encode(src: string, rfc4648 = false): string {
const b64 = _btoa(utob(src))
return rfc4648 ? _mkUriSafe(b64) : b64
}
src/Components/wd-icon-local/common/canvasHelper.ts 0 → 100644
View file @ 362a6f9b
/* eslint-disable */
/**
* 适配 canvas 2d 上下文
* @param ctx canvas 2d 上下文
* @returns
*/
export function canvas2dAdapter(ctx: CanvasRenderingContext2D): UniApp.CanvasContext {
return Object.assign(ctx, {
setFillStyle(color: string | CanvasGradient) {
ctx.fillStyle = color
},
setStrokeStyle(color: string | CanvasGradient | CanvasPattern) {
ctx.strokeStyle = color
},
setLineWidth(lineWidth: number) {
ctx.lineWidth = lineWidth
},
setLineCap(lineCap: 'butt' | 'round' | 'square') {
ctx.lineCap = lineCap
},
setFontSize(font: string) {
ctx.font = font
},
setGlobalAlpha(alpha: number) {
ctx.globalAlpha = alpha
},
setLineJoin(lineJoin: 'bevel' | 'round' | 'miter') {
ctx.lineJoin = lineJoin
},
setTextAlign(align: 'left' | 'center' | 'right') {
ctx.textAlign = align
},
setMiterLimit(miterLimit: number) {
ctx.miterLimit = miterLimit
},
setShadow(offsetX: number, offsetY: number, blur: number, color: string) {
ctx.shadowOffsetX = offsetX
ctx.shadowOffsetY = offsetY
ctx.shadowBlur = blur
ctx.shadowColor = color
},
setTextBaseline(textBaseline: 'top' | 'bottom' | 'middle') {
ctx.textBaseline = textBaseline
},
createCircularGradient() {},
draw() {},
addColorStop() {}
}) as unknown as UniApp.CanvasContext
}
src/Components/wd-icon-local/common/clickoutside.ts 0 → 100644
View file @ 362a6f9b
/* eslint-disable */
/*
* @Author: weisheng
* @Date: 2023-07-02 22:51:06
* @LastEditTime: 2024-03-16 19:59:07
* @LastEditors: weisheng
* @Description:
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/common/clickoutside.ts
* 记得注释
*/
let queue: any[] = []
export function pushToQueue(comp: any) {
queue.push(comp)
}
export function removeFromQueue(comp: any) {
queue = queue.filter((item) => {
return item.$.uid !== comp.$.uid
})
}
export function closeOther(comp: any) {
queue.forEach((item) => {
if (item.$.uid !== comp.$.uid) {
item.$.exposed.close()
}
})
}
export function closeOutside() {
queue.forEach((item) => {
item.$.exposed.close()
})
}
src/Components/wd-icon-local/common/dayjs.ts 0 → 100644
View file @ 362a6f9b
/* eslint-disable */
import { isDate } from './util'
/* eslint-disable */
class Dayjs {
utc: boolean
date: Date
timeZone: number
timeZoneString: any
mYear: any
mMonth: any
mDay: any
mWeek: any
mHour: any
mMinute: any
mSecond: any
constructor(dateStr?: string | number | Date) {
this.utc = false
const parsedDate = this.parseConfig(dateStr)
this.date = new Date(parsedDate)
this.timeZone = this.date.getTimezoneOffset() / 60
this.timeZoneString = this.padNumber(String(-1 * this.timeZone).replace(/^(.)?(\d)/, '$10$200'), 5, '+')
this.mYear = this.date.getFullYear()
this.mMonth = this.date.getMonth()
this.mDay = this.date.getDate()
this.mWeek = this.date.getDay()
this.mHour = this.date.getHours()
this.mMinute = this.date.getMinutes()
this.mSecond = this.date.getSeconds()
}
parseConfig(dateStr?:string | number | Date) {
if (!dateStr) return new Date()
if (isDate(dateStr)) return dateStr
if (/^(\d){8}$/.test(dateStr as string)) {
this.utc = true
return `${(dateStr as string).substr(0, 4)}-${(dateStr as string).substr(4, 2)}-${(dateStr as string).substr(6, 2)}`
}
return dateStr
}
padNumber(num:string, length:number, padChar:string) {
return !num || num.length >= length ? num : `${Array(length + 1 - num.length).join(padChar)}${num}`
}
year() {
return this.mYear
}
month() {
return this.mMonth
}
unix() {
const timeZoneOffset = this.utc ? 60 * this.timeZone * 60 * 1000 : 0
return Math.floor((this.date.getTime() + timeZoneOffset) / 1000)
}
toString() {
return this.date.toUTCString()
}
startOf(unit:string) {
switch (unit) {
case 'year':
return new Dayjs(new Date(this.year(), 0, 1))
case 'month':
return new Dayjs(new Date(this.year(), this.month(), 1))
default:
return this
}
}
add(amount:number, unit:string) {
let interval
switch (unit) {
case 'm':
case 'minutes':
interval = 60
break
case 'h':
case 'hours':
interval = 60 * 60
break
case 'd':
case 'days':
interval = 24 * 60 * 60
break
case 'w':
case 'weeks':
interval = 7 * 24 * 60 * 60
break
default:
interval = 1
}
const newUnixTime = this.unix() + amount * interval
return new Dayjs(1000 * newUnixTime)
}
subtract(amount:number, unit:string) {
return this.add(-1 * amount, unit)
}
format(formatStr = 'YYYY-MM-DDTHH:mm:ssZ') {
const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
return formatStr.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|H{1,2}|m{1,2}|s{1,2}|Z{1,2}/g, (match) => {
switch (match) {
case 'YY':
return String(this.mYear).slice(-2)
case 'YYYY':
return String(this.mYear)
case 'M':
return String(this.mMonth + 1)
case 'MM':
return this.padNumber(String(this.mMonth + 1), 2, '0')
case 'D':
return String(this.mDay)
case 'DD':
return this.padNumber(String(this.mDay), 2, '0')
case 'd':
return String(this.mWeek)
case 'dddd':
return weekdays[this.mWeek]
case 'H':
return String(this.mHour)
case 'HH':
return this.padNumber(String(this.mHour), 2, '0')
case 'm':
return String(this.mMinute)
case 'mm':
return this.padNumber(String(this.mMinute), 2, '0')
case 's':
return String(this.mSecond)
case 'ss':
return this.padNumber(String(this.mSecond), 2, '0')
case 'Z':
return `${this.timeZoneString.slice(0, -2)}:00`
case 'ZZ':
return this.timeZoneString
default:
return match
}
})
}
}
export function dayjs(dateStr?: string | number | Date) {
return new Dayjs(dateStr)
}
src/Components/wd-icon-local/common/event.ts 0 → 100644
View file @ 362a6f9b
/* eslint-disable */
export const UPDATE_MODEL_EVENT = 'update:modelValue'
export const CHANGE_EVENT = 'change'
export const INPUT_EVENT = 'input'
export const CLICK_EVENT = 'click'
export const CLOSE_EVENT = 'close'
export const OPEN_EVENT = 'open'
export const CONFIRM_EVENT = 'confirm'
export const CANCEL_EVENT = 'cancel'
src/Components/wd-icon-local/common/props.ts 0 → 100644
View file @ 362a6f9b
/* eslint-disable */
import type { PropType } from 'vue'
export const unknownProp = null as unknown as PropType<unknown>
export const numericProp = [Number, String]
export const truthProp = {
type: Boolean,
default: true as const
}
export const makeRequiredProp = <T>(type: T) => ({
type,
required: true as const
})
export const makeArrayProp = <T>() => ({
type: Array as PropType<T[]>,
default: () => []
})
export const makeBooleanProp = <T>(defaultVal: T) => ({
type: Boolean,
default: defaultVal
})
export const makeNumberProp = <T>(defaultVal: T) => ({
type: Number,
default: defaultVal
})
export const makeNumericProp = <T>(defaultVal: T) => ({
type: numericProp,
default: defaultVal
})
export const makeStringProp = <T>(defaultVal: T) => ({
type: String as unknown as PropType<T>,
default: defaultVal
})
export const baseProps = {
/**
* 自定义根节点样式
*/
customStyle: makeStringProp(''),
/**
* 自定义根节点样式类
*/
customClass: makeStringProp('')
}
src/Components/wd-icon-local/common/util.ts 0 → 100644
View file @ 362a6f9b
/* eslint-disable */
import { AbortablePromise } from './AbortablePromise'
/**
* 生成uuid
* @returns string
*/
export function uuid() {
return s4() + s4() + s4() + s4() + s4() + s4() + s4() + s4()
}
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1)
}
/**
* @description 对num自动填充px
* @param {Number} num
* @return {string} num+px
*/
export function addUnit(num: number | string) {
return Number.isNaN(Number(num)) ? num : `${num}px`
}
/**
* @description 判断target是否对象
* @param value
* @return {boolean}
*/
export function isObj(value: any): value is object {
return Object.prototype.toString.call(value) === '[object Object]' || typeof value === 'object'
}
/**
* 获取目标原始类型
* @param target 任意类型
* @returns {string} type 数据类型
*/
export function getType(target: unknown): string {
// 得到原生类型
const typeStr = Object.prototype.toString.call(target)
// 拿到类型值
const match = typeStr.match(/\[object (\w+)\]/)
const type = match && match.length ? match[1].toLowerCase() : ''
// 类型值转小写并返回
return type
}
/**
* @description 默认的外部格式化函数 - picker 组件
* @param items - 要格式化的数据项数组或单个数据项
* @param kv - 配置对象，包含 labelKey 作为键值
* @returns 格式化后的字符串
*/
export const defaultDisplayFormat = function (items: any[] | Record<string, any>, kv?: { labelKey?: string }): string {
const labelKey: string = kv?.labelKey || 'value'
if (Array.isArray(items)) {
return items.map((item) => item[labelKey]).join(', ')
} else {
return items[labelKey]
}
}
/**
* @description 默认函数占位符 - pickerView组件
* @param value 值
* @return value
*/
export const defaultFunction = <T>(value: T): T => value
/**
* @description 检查值是否不为空
* @param value 值
* @return {Boolean} 是否不为空
*/
export const isDef = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null
/**
* @description 防止数字小于零
* @param {number} num
* @param {string} label 标签
*/
export const checkNumRange = (num: number, label: string = 'value'): void => {
if (num < 0) {
throw new Error(`${label} shouldn't be less than zero`)
}
}
/**
* @description 防止 pixel 无意义
* @param {number} num
* @param {string} label 标签
*/
export const checkPixelRange = (num: number, label: string = 'value'): void => {
if (num <= 0) {
throw new Error(`${label} should be greater than zero`)
}
}
/**
* 将 RGB 值转换为十六进制颜色代码。
* @param {number} r - 红色分量 (0-255)。
* @param {number} g - 绿色分量 (0-255)。
* @param {number} b - 蓝色分量 (0-255)。
* @returns {string} 十六进制颜色代码 (#RRGGBB)。
*/
export function rgbToHex(r: number, g: number, b: number): string {
// 将 RGB 分量组合成一个十六进制数。
const hex = ((r << 16) | (g << 8) | b).toString(16)
// 使用零填充十六进制数，确保它有 6 位数字（RGB 范围）。
const paddedHex = '#' + '0'.repeat(Math.max(0, 6 - hex.length)) + hex
return paddedHex
}
/**
* 将十六进制颜色代码转换为 RGB 颜色数组。
* @param hex 十六进制颜色代码（例如：'#RRGGBB'）
* @returns 包含红、绿、蓝三个颜色分量的数组
*/
function hexToRgb(hex: string): number[] {
const rgb: number[] = []
// 从第一个字符开始，每两个字符代表一个颜色分量
for (let i = 1; i < 7; i += 2) {
// 将两个字符的十六进制转换为十进制，并添加到 rgb 数组中
rgb.push(parseInt('0x' + hex.slice(i, i + 2), 16))
}
return rgb
}
/**
* 计算渐变色的中间变量数组。
* @param {string} startColor 开始颜色
* @param {string} endColor 结束颜色
* @param {number} step 获取渲染位置，默认为中间位置
* @returns {string[]} 渐变色中间颜色变量数组
*/
export const gradient = (startColor: string, endColor: string, step: number = 2): string[] => {
// 将hex转换为rgb
const sColor: number[] = hexToRgb(startColor)
const eColor: number[] = hexToRgb(endColor)
// 计算R\G\B每一步的差值
const rStep: number = (eColor[0] - sColor[0]) / step
const gStep: number = (eColor[1] - sColor[1]) / step
const bStep: number = (eColor[2] - sColor[2]) / step
const gradientColorArr: string[] = []
for (let i = 0; i < step; i++) {
// 计算每一步的hex值
gradientColorArr.push(
rgbToHex(parseInt(String(rStep * i + sColor[0])), parseInt(String(gStep * i + sColor[1])), parseInt(String(bStep * i + sColor[2])))
)
}
return gradientColorArr
}
/**
* 确保数值不超出指定范围。
* @param {number} num 要限制范围的数值
* @param {number} min 最小范围
* @param {number} max 最大范围
* @returns {number} 在指定范围内的数值
*/
export const range = (num: number, min: number, max: number): number => {
// 使用 Math.min 和 Math.max 保证 num 不会超出指定范围
return Math.min(Math.max(num, min), max)
}
/**
* 比较两个值是否相等。
* @param {any} value1 第一个值
* @param {any} value2 第二个值
* @returns {boolean} 如果值相等则为 true，否则为 false
*/
export const isEqual = (value1: any, value2: any): boolean => {
// 使用严格相等运算符比较值是否相等
if (value1 === value2) {
return true
}
// 如果其中一个值不是数组，则认为值不相等
if (!Array.isArray(value1) || !Array.isArray(value2)) {
return false
}
// 如果数组长度不相等，则认为值不相等
if (value1.length !== value2.length) {
return false
}
// 逐个比较数组元素是否相等
for (let i = 0; i < value1.length; ++i) {
if (value1[i] !== value2[i]) {
return false
}
}
// 所有比较均通过，则认为值相等
return true
}
/**
* 在数字前补零，使其达到指定长度。
* @param {number | string} number 要补零的数字
* @param {number} length 目标长度，默认为 2
* @returns {string} 补零后的结果
*/
export const padZero = (number: number | string, length: number = 2): string => {
// 将输入转换为字符串
let numStr: string = number.toString()
// 在数字前补零，直到达到指定长度
while (numStr.length < length) {
numStr = '0' + numStr
}
return numStr
}
/** @description 全局变量id */
export const context = {
id: 1000
}
export type RectResultType<T extends boolean> = T extends true ? UniApp.NodeInfo[] : UniApp.NodeInfo
/**
* 获取节点信息
* @param selector 节点选择器 #id,.class
* @param all 是否返回所有 selector 对应的节点
* @param scope 作用域（支付宝小程序无效）
* @returns 节点信息或节点信息数组
*/
export function getRect<T extends boolean>(selector: string, all: T, scope?: any): Promise<RectResultType<T>> {
return new Promise<RectResultType<T>>((resolve, reject) => {
let query: UniNamespace.SelectorQuery | null = null
if (scope) {
query = uni.createSelectorQuery().in(scope)
} else {
query = uni.createSelectorQuery()
}
query[all ? 'selectAll' : 'select'](selector)
.boundingClientRect((rect) => {
if (all && isArray(rect) && rect.length > 0) {
resolve(rect as RectResultType<T>)
} else if (!all && rect) {
resolve(rect as RectResultType<T>)
} else {
reject(new Error('No nodes found'))
}
})
.exec()
})
}
/**
* 将驼峰命名转换为短横线命名。
* @param {string} word 待转换的词条
* @returns {string} 转换后的结果
*/
export function kebabCase(word: string): string {
// 使用正则表达式匹配所有大写字母，并在前面加上短横线，然后转换为小写
const newWord: string = word
.replace(/[A-Z]/g, function (match) {
return '-' + match
})
.toLowerCase()
return newWord
}
/**
* 将短横线链接转换为驼峰命名
* @param word 需要转换的短横线链接
* @returns 转换后的驼峰命名字符串
*/
export function camelCase(word: string): string {
return word.replace(/-(\w)/g, (_, c) => c.toUpperCase())
}
/**
* 检查给定值是否为数组。
* @param {any} value 要检查的值
* @returns {boolean} 如果是数组则返回 true，否则返回 false
*/
export function isArray(value: any): value is Array<any> {
// 如果 Array.isArray 函数可用，直接使用该函数检查
if (typeof Array.isArray === 'function') {
return Array.isArray(value)
}
// 否则，使用对象原型的 toString 方法进行检查
return Object.prototype.toString.call(value) === '[object Array]'
}
/**
* 检查给定值是否为函数。
* @param {any} value 要检查的值
* @returns {boolean} 如果是函数则返回 true，否则返回 false
*/
// eslint-disable-next-line @typescript-eslint/ban-types
export function isFunction<T extends Function>(value: any): value is T {
return getType(value) === 'function'
}
/**
* 检查给定值是否为字符串。
* @param {unknown} value 要检查的值
* @returns {value is string} 如果是字符串则返回 true，否则返回 false
*/
export function isString(value: unknown): value is string {
return getType(value) === 'string'
}
/**
* 否是数值
* @param {*} value
*/
export function isNumber(value: any): value is number {
return getType(value) === 'number'
}
/**
* 检查给定值是否为 Promise 对象。
* @param {unknown} value 要检查的值
* @returns {value is Promise<any>} 如果是 Promise 对象则返回 true，否则返回 false
*/
export function isPromise(value: unknown): value is Promise<any> {
// 先将 value 断言为 object 类型
if (isObj(value) && isDef(value)) {
// 然后进一步检查 value 是否具有 then 和 catch 方法，并且它们是函数类型
return isFunction((value as Promise<any>).then) && isFunction((value as Promise<any>).catch)
}
return false // 如果 value 不是对象类型，则肯定不是 Promise
}
/**
* 检查给定的值是否为布尔类型
* @param value 要检查的值
* @returns 如果值为布尔类型，则返回true，否则返回false
*/
export function isBoolean(value: any): value is boolean {
return typeof value === 'boolean'
}
/**
* 检查给定的值是否为奇数
* @param value 要检查的值
* @returns
*/
export function isOdd(value: number): boolean {
if (typeof value !== 'number') {
throw new Error('输入必须为数字')
}
// 使用取模运算符来判断是否为奇数
// 如果 number 除以 2 的余数为 1，就是奇数
// 否则是偶数
return value % 2 === 1
}
/**
* 是否为base64图片
* @param {string} url
* @return
*/
export function isBase64Image(url: string) {
// 使用正则表达式检查URL是否以"data:image"开头，这是Base64图片的常见前缀
return /^data:image\/(png|jpg|jpeg|gif|bmp);base64,/.test(url)
}
/**
* 将外部传入的样式格式化为可读的 CSS 样式。
* @param {object | object[]} styles 外部传入的样式对象或数组
* @returns {string} 格式化后的 CSS 样式字符串
*/
export function objToStyle(styles: Record<string, any> | Record<string, any>[]): string {
// 如果 styles 是数组类型
if (isArray(styles)) {
// 使用过滤函数去除空值和 null 值的元素
// 对每个非空元素递归调用 objToStyle，然后通过分号连接
return styles
.filter(function (item) {
return item != null && item !== ''
})
.map(function (item) {
return objToStyle(item)
})
.join(';')
}
if (isString(styles)) {
return styles
}
// 如果 styles 是对象类型
if (isObj(styles)) {
// 使用 Object.keys 获取所有属性名
// 使用过滤函数去除值为 null 或空字符串的属性
// 对每个属性名和属性值进行格式化，通过分号连接
return Object.keys(styles)
.filter(function (key) {
return styles[key] != null && styles[key] !== ''
})
.map(function (key) {
// 使用 kebabCase 函数将属性名转换为 kebab-case 格式
// 将属性名和属性值格式化为 CSS 样式的键值对
return [kebabCase(key), styles[key]].join(':')
})
.join(';')
}
// 如果 styles 不是对象也不是数组，则直接返回
return ''
}
export const requestAnimationFrame = (cb = () => {}) => {
return new AbortablePromise((resolve) => {
const timer = setInterval(() => {
clearInterval(timer)
resolve(true)
cb()
}, 1000 / 30)
})
}
/**
* 深拷贝函数，用于将对象进行完整复制。
* @param obj 要深拷贝的对象
* @param cache 用于缓存已复制的对象，防止循环引用
* @returns 深拷贝后的对象副本
*/
export function deepClone<T>(obj: T, cache: Map<any, any> = new Map()): T {
// 如果对象为 null 或者不是对象类型，则直接返回该对象
if (obj === null || typeof obj !== 'object') {
return obj
}
// 处理特殊对象类型：日期、正则表达式、错误对象
if (isDate(obj)) {
return new Date(obj.getTime()) as any
}
if (obj instanceof RegExp) {
return new RegExp(obj.source, obj.flags) as any
}
if (obj instanceof Error) {
const errorCopy = new Error(obj.message) as any
errorCopy.stack = obj.stack
return errorCopy
}
// 检查缓存中是否已存在该对象的复制
if (cache.has(obj)) {
return cache.get(obj)
}
// 根据原始对象的类型创建对应的空对象或数组
const copy: any = Array.isArray(obj) ? [] : {}
// 将当前对象添加到缓存中
cache.set(obj, copy)
// 递归地深拷贝对象的每个属性
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
copy[key] = deepClone(obj[key], cache)
}
}
return copy as T
}
/**
* 深度合并两个对象。
* @param target 目标对象，将合并的结果存放在此对象中
* @param source 源对象，要合并到目标对象的对象
* @returns 合并后的目标对象
*/
export function deepMerge<T extends Record<string, any>>(target: T, source: Record<string, any>): T {
// 深拷贝目标对象，避免修改原始对象
target = deepClone(target)
// 检查目标和源是否都是对象类型
if (typeof target !== 'object' || typeof source !== 'object') {
throw new Error('Both target and source must be objects.')
}
// 遍历源对象的属性
for (const prop in source) {
// eslint-disable-next-line no-prototype-builtins
if (!source.hasOwnProperty(prop))
continue
// 使用类型断言，告诉 TypeScript 这是有效的属性
;(target as Record<string, any>)[prop] = source[prop]
}
return target
}
/**
* 深度合并两个对象。
* @param target
* @param source
* @returns
*/
export function deepAssign(target: Record<string, any>, source: Record<string, any>): Record<string, any> {
Object.keys(source).forEach((key) => {
const targetValue = target[key]
const newObjValue = source[key]
if (isObj(targetValue) && isObj(newObjValue)) {
deepAssign(targetValue, newObjValue)
} else {
target[key] = newObjValue
}
})
return target
}
/**
* 构建带参数的URL
* @param baseUrl 基础URL
* @param params 参数对象，键值对表示要添加到URL的参数
* @returns 返回带有参数的URL
*/
export function buildUrlWithParams(baseUrl: string, params: Record<string, string>) {
// 将参数对象转换为查询字符串
const queryString = Object.entries(params)
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
.join('&')
// 检查基础URL是否已包含查询字符串，并选择适当的分隔符
const separator = baseUrl.includes('?') ? '&' : '?'
// 返回带有参数的URL
return `${baseUrl}${separator}${queryString}`
}
type DebounceOptions = {
leading?: boolean // 是否在延迟时间开始时调用函数
trailing?: boolean // 是否在延迟时间结束时调用函数
}
export function debounce<T extends (...args: any[]) => any>(func: T, wait: number, options: DebounceOptions = {}): T {
let timeoutId: ReturnType<typeof setTimeout> | null = null
let lastArgs: any[] | undefined
let lastThis: any
let result: ReturnType<T> | undefined
const leading = isDef(options.leading) ? options.leading : false
const trailing = isDef(options.trailing) ? options.trailing : true
function invokeFunc() {
if (lastArgs !== undefined) {
result = func.apply(lastThis, lastArgs)
lastArgs = undefined
}
}
function startTimer() {
timeoutId = setTimeout(() => {
timeoutId = null
if (trailing) {
invokeFunc()
}
}, wait)
}
function cancelTimer() {
if (timeoutId !== null) {
clearTimeout(timeoutId)
timeoutId = null
}
}
function debounced(this: any, ...args: Parameters<T>): ReturnType<T> | undefined {
lastArgs = args
lastThis = this
if (timeoutId === null) {
if (leading) {
invokeFunc()
}
startTimer()
} else if (trailing) {
cancelTimer()
startTimer()
}
return result
}
return debounced as T
}
// eslint-disable-next-line @typescript-eslint/ban-types
export function throttle(func: Function, wait: number): Function {
let timeout: ReturnType<typeof setTimeout> | null = null
let previous: number = 0
const throttled = function (this: any, ...args: any[]) {
const now = Date.now()
const remaining = wait - (now - previous)
if (remaining <= 0) {
if (timeout) {
clearTimeout(timeout)
timeout = null
}
previous = now
func.apply(this, args)
} else if (!timeout) {
timeout = setTimeout(() => {
previous = Date.now()
timeout = null
func.apply(this, args)
}, remaining)
}
}
return throttled
}
/**
* 根据属性路径获取对象中的属性值
* @param obj 目标对象
* @param path 属性路径，可以是字符串或字符串数组
* @returns 属性值，如果属性不存在或中间的属性为 null 或 undefined，则返回 undefined
*/
export const getPropByPath = (obj: any, path: string): any => {
const keys: string[] = path.split('.')
try {
return keys.reduce((acc: any, key: string) => (acc !== undefined && acc !== null ? acc[key] : undefined), obj)
} catch (error) {
return undefined
}
}
/**
* 检查一个值是否为Date类型
* @param val 要检查的值
* @returns 如果值是Date类型，则返回true，否则返回false
*/
export const isDate = (val: unknown): val is Date => Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN((val as Date).getTime())
/**
* 判断环境是否是H5
*/
export const isH5 = process.env.UNI_PLATFORM === 'h5'
src/Components/wd-icon-local/index.scss 0 → 100644
View file @ 362a6f9b
@import 'common/abstracts/variable';
@import 'common/abstracts/mixin';
@font-face {
font-family: 'wd-icons';
src: url('1.woff2') format('woff2'),
url('2.woff') format('woff'),
url('3.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* #ifdef APP-PLUS */
@font-face {
font-family: 'wd-icons';
src:
url('./wd-icons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* #endif */
@include b(icon) {
display: inline-block;
font-family: 'wd-icons' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@include m(image) {
width: 1em;
height: 1em;
}
@include e(image) {
width: 100%;
height: 100%;
}
}
.wd-icon-usergroup-clear:before {
content: "\e739";
}
.wd-icon-user-circle:before {
content: "\e73a";
}
.wd-icon-user-talk:before {
content: "\e73b";
}
.wd-icon-user-clear:before {
content: "\e73c";
}
.wd-icon-user:before {
content: "\e73d";
}
.wd-icon-usergroup-add:before {
content: "\e73e";
}
.wd-icon-usergroup:before {
content: "\e73f";
}
.wd-icon-user-add:before {
content: "\e740";
}
.wd-icon-user-avatar:before {
content: "\e741";
}
.wd-icon-pointing-hand:before {
content: "\e742";
}
.wd-icon-cursor:before {
content: "\e743";
}
.wd-icon-fullsreen:before {
content: "\e72c";
}
.wd-icon-cloud-download:before {
content: "\e72d";
}
.wd-icon-chevron-down-rectangle:before {
content: "\e72e";
}
.wd-icon-edit:before {
content: "\e72f";
}
.wd-icon-fullscreen-exit:before {
content: "\e730";
}
.wd-icon-circle1:before {
content: "\e731";
}
.wd-icon-close-normal:before {
content: "\e732";
}
.wd-icon-browse:before {
content: "\e733";
}
.wd-icon-browse-off:before {
content: "\e734";
}
.wd-icon-chevron-up-rectangle:before {
content: "\e735";
}
.wd-icon-add-rectangle:before {
content: "\e736";
}
.wd-icon-add1:before {
content: "\e737";
}
.wd-icon-add-circle1:before {
content: "\e738";
}
.wd-icon-download1:before {
content: "\e71c";
}
.wd-icon-link:before {
content: "\e71d";
}
.wd-icon-edit-1:before {
content: "\e71e";
}
.wd-icon-jump:before {
content: "\e71f";
}
.wd-icon-chevron-down-circle:before {
content: "\e720";
}
.wd-icon-delete1:before {
content: "\e721";
}
.wd-icon-filter-clear:before {
content: "\e722";
}
.wd-icon-check-rectangle-filled:before {
content: "\e723";
}
.wd-icon-minus-circle-filled:before {
content: "\e724";
}
.wd-icon-play:before {
content: "\e725";
}
.wd-icon-pause-circle-filled:before {
content: "\e726";
}
.wd-icon-filter1:before {
content: "\e727";
}
.wd-icon-move:before {
content: "\e728";
}
.wd-icon-login:before {
content: "\e729";
}
.wd-icon-minus-circle:before {
content: "\e72a";
}
.wd-icon-close-circle:before {
content: "\e72b";
}
.wd-icon-logout:before {
content: "\e70b";
}
.wd-icon-search1:before {
content: "\e70c";
}
.wd-icon-pause-circle:before {
content: "\e70d";
}
.wd-icon-play-circle:before {
content: "\e70e";
}
.wd-icon-more1:before {
content: "\e70f";
}
.wd-icon-minus-rectangle:before {
content: "\e710";
}
.wd-icon-stop:before {
content: "\e711";
}
.wd-icon-scan1:before {
content: "\e712";
}
.wd-icon-close-rectangle:before {
content: "\e713";
}
.wd-icon-rollback:before {
content: "\e714";
}
.wd-icon-a-order-adjustmentcolumn:before {
content: "\e715";
}
.wd-icon-pause:before {
content: "\e716";
}
.wd-icon-ellipsis:before {
content: "\e717";
}
.wd-icon-cloud-upload:before {
content: "\e718";
}
.wd-icon-stop-circle-filled:before {
content: "\e719";
}
.wd-icon-clear:before {
content: "\e71a";
}
.wd-icon-remove:before {
content: "\e71b";
}
.wd-icon-zoom-out:before {
content: "\e6fb";
}
.wd-icon-thumb-down:before {
content: "\e6fc";
}
.wd-icon-setting1:before {
content: "\e6fd";
}
.wd-icon-save:before {
content: "\e6fe";
}
.wd-icon-unfold-more:before {
content: "\e6ff";
}
.wd-icon-zoom-in:before {
content: "\e700";
}
.wd-icon-thumb-up:before {
content: "\e701";
}
.wd-icon-unfold-less:before {
content: "\e702";
}
.wd-icon-play-circle-filled:before {
content: "\e703";
}
.wd-icon-poweroff:before {
content: "\e704";
}
.wd-icon-share:before {
content: "\e705";
}
.wd-icon-refresh1:before {
content: "\e706";
}
.wd-icon-link-unlink:before {
content: "\e707";
}
.wd-icon-upload:before {
content: "\e708";
}
.wd-icon-rectangle:before {
content: "\e709";
}
.wd-icon-stop-circle:before {
content: "\e70a";
}
.wd-icon-backtop-rectangle:before {
content: "\e6ea";
}
.wd-icon-caret-down:before {
content: "\e6eb";
}
.wd-icon-arrow-left1:before {
content: "\e6ec";
}
.wd-icon-help-circle:before {
content: "\e6ed";
}
.wd-icon-help-circle-filled:before {
content: "\e6ee";
}
.wd-icon-time-filled:before {
content: "\e6ef";
}
.wd-icon-close-circle-filled:before {
content: "\e6f0";
}
.wd-icon-info-circle:before {
content: "\e6f1";
}
.wd-icon-info-circle-filled:before {
content: "\e6f2";
}
.wd-icon-check1:before {
content: "\e6f3";
}
.wd-icon-help:before {
content: "\e6f4";
}
.wd-icon-error:before {
content: "\e6f5";
}
.wd-icon-check-circle:before {
content: "\e6f6";
}
.wd-icon-error-circle-filled:before {
content: "\e6f7";
}
.wd-icon-error-circle:before {
content: "\e6f8";
}
.wd-icon-check-rectangle:before {
content: "\e6f9";
}
.wd-icon-check-circle-filled:before {
content: "\e6fa";
}
.wd-icon-chevron-up:before {
content: "\e6da";
}
.wd-icon-chevron-up-circle:before {
content: "\e6db";
}
.wd-icon-chevron-right:before {
content: "\e6dc";
}
.wd-icon-arrow-down-rectangle:before {
content: "\e6dd";
}
.wd-icon-caret-up-small:before {
content: "\e6de";
}
.wd-icon-chevron-right-rectangle:before {
content: "\e6df";
}
.wd-icon-caret-right-small:before {
content: "\e6e0";
}
.wd-icon-arrow-right1:before {
content: "\e6e1";
}
.wd-icon-backtop:before {
content: "\e6e2";
}
.wd-icon-arrow-up1:before {
content: "\e6e3";
}
.wd-icon-caret-up:before {
content: "\e6e4";
}
.wd-icon-backward:before {
content: "\e6e5";
}
.wd-icon-arrow-down1:before {
content: "\e6e6";
}
.wd-icon-chevron-left:before {
content: "\e6e7";
}
.wd-icon-caret-right:before {
content: "\e6e8";
}
.wd-icon-caret-left:before {
content: "\e6e9";
}
.wd-icon-page-last:before {
content: "\e6c9";
}
.wd-icon-next:before {
content: "\e6ca";
}
.wd-icon-swap:before {
content: "\e6cb";
}
.wd-icon-round:before {
content: "\e6cc";
}
.wd-icon-previous:before {
content: "\e6cd";
}
.wd-icon-enter:before {
content: "\e6ce";
}
.wd-icon-chevron-down:before {
content: "\e6cf";
}
.wd-icon-caret-down-small:before {
content: "\e6d0";
}
.wd-icon-swap-right:before {
content: "\e6d1";
}
.wd-icon-chevron-left-circle:before {
content: "\e6d2";
}
.wd-icon-caret-left-small:before {
content: "\e6d3";
}
.wd-icon-chevron-right-circle:before {
content: "\e6d4";
}
.wd-icon-a-chevron-leftdouble:before {
content: "\e6d5";
}
.wd-icon-chevron-left-rectangle:before {
content: "\e6d6";
}
.wd-icon-a-chevron-rightdouble:before {
content: "\e6d7";
}
.wd-icon-page-first:before {
content: "\e6d8";
}
.wd-icon-forward:before {
content: "\e6d9";
}
.wd-icon-view-column:before {
content: "\e6b9";
}
.wd-icon-view-module:before {
content: "\e6ba";
}
.wd-icon-format-vertical-align-right:before {
content: "\e6bb";
}
.wd-icon-view-list:before {
content: "\e6bc";
}
.wd-icon-order-descending:before {
content: "\e6bd";
}
.wd-icon-format-horizontal-align-bottom:before {
content: "\e6be";
}
.wd-icon-queue:before {
content: "\e6bf";
}
.wd-icon-menu-fold:before {
content: "\e6c0";
}
.wd-icon-menu-unfold:before {
content: "\e6c1";
}
.wd-icon-format-horizontal-align-top:before {
content: "\e6c2";
}
.wd-icon-a-rootlist:before {
content: "\e6c3";
}
.wd-icon-order-ascending:before {
content: "\e6c4";
}
.wd-icon-format-vertical-align-left:before {
content: "\e6c5";
}
.wd-icon-format-horizontal-align-center:before {
content: "\e6c6";
}
.wd-icon-format-vertical-align-center:before {
content: "\e6c7";
}
.wd-icon-swap-left:before {
content: "\e6c8";
}
.wd-icon-flag:before {
content: "\e6aa";
}
.wd-icon-code:before {
content: "\e6ab";
}
.wd-icon-cart:before {
content: "\e6ac";
}
.wd-icon-attach:before {
content: "\e6ad";
}
.wd-icon-chart:before {
content: "\e6ae";
}
.wd-icon-creditcard:before {
content: "\e6af";
}
.wd-icon-calendar:before {
content: "\e6b0";
}
.wd-icon-app:before {
content: "\e6b1";
}
.wd-icon-books:before {
content: "\e6b2";
}
.wd-icon-barcode:before {
content: "\e6b3";
}
.wd-icon-chart-pie:before {
content: "\e6b4";
}
.wd-icon-chart-bar:before {
content: "\e6b5";
}
.wd-icon-chart-bubble:before {
content: "\e6b6";
}
.wd-icon-bulletpoint:before {
content: "\e6b7";
}
.wd-icon-bianjiliebiao:before {
content: "\e6b8";
}
.wd-icon-image:before {
content: "\e69a";
}
.wd-icon-laptop:before {
content: "\e69b";
}
.wd-icon-hourglass:before {
content: "\e69c";
}
.wd-icon-call:before {
content: "\e69d";
}
.wd-icon-mobile-vibrate:before {
content: "\e69e";
}
.wd-icon-mail:before {
content: "\e69f";
}
.wd-icon-notification-filled:before {
content: "\e6a0";
}
.wd-icon-desktop:before {
content: "\e6a1";
}
.wd-icon-history:before {
content: "\e6a2";
}
.wd-icon-discount-filled:before {
content: "\e6a3";
}
.wd-icon-dashboard:before {
content: "\e6a4";
}
.wd-icon-discount:before {
content: "\e6a5";
}
.wd-icon-heart-filled:before {
content: "\e6a6";
}
.wd-icon-chat1:before {
content: "\e6a7";
}
.wd-icon-a-controlplatform:before {
content: "\e6a8";
}
.wd-icon-gift:before {
content: "\e6a9";
}
.wd-icon-photo:before {
content: "\e692";
}
.wd-icon-play-circle-stroke:before {
content: "\e693";
}
.wd-icon-notification:before {
content: "\e694";
}
.wd-icon-cloud:before {
content: "\e695";
}
.wd-icon-gender-female:before {
content: "\e696";
}
.wd-icon-fork:before {
content: "\e697";
}
.wd-icon-layers:before {
content: "\e698";
}
.wd-icon-lock-off:before {
content: "\e699";
}
.wd-icon-location:before {
content: "\e68a";
}
.wd-icon-mobile:before {
content: "\e68b";
}
.wd-icon-qrcode:before {
content: "\e68c";
}
.wd-icon-home1:before {
content: "\e68d";
}
.wd-icon-time:before {
content: "\e68e";
}
.wd-icon-heart:before {
content: "\e68f";
}
.wd-icon-lock-on:before {
content: "\e690";
}
.wd-icon-print:before {
content: "\e691";
}
.wd-icon-slash:before {
content: "\e67a";
}
.wd-icon-usb:before {
content: "\e67b";
}
.wd-icon-tools:before {
content: "\e67c";
}
.wd-icon-wifi:before {
content: "\e67d";
}
.wd-icon-star-filled:before {
content: "\e67e";
}
.wd-icon-server:before {
content: "\e67f";
}
.wd-icon-sound:before {
content: "\e680";
}
.wd-icon-a-precisemonitor:before {
content: "\e681";
}
.wd-icon-service:before {
content: "\e682";
}
.wd-icon-tips:before {
content: "\e683";
}
.wd-icon-pin:before {
content: "\e684";
}
.wd-icon-secured:before {
content: "\e685";
}
.wd-icon-star:before {
content: "\e686";
}
.wd-icon-gender-male:before {
content: "\e687";
}
.wd-icon-shop:before {
content: "\e688";
}
.wd-icon-money-circle:before {
content: "\e689";
}
.wd-icon-file-word:before {
content: "\e66a";
}
.wd-icon-file-unknown:before {
content: "\e66b";
}
.wd-icon-folder-open:before {
content: "\e66c";
}
.wd-icon-file-pdf:before {
content: "\e66d";
}
.wd-icon-folder:before {
content: "\e66e";
}
.wd-icon-folder-add:before {
content: "\e66f";
}
.wd-icon-file:before {
content: "\e670";
}
.wd-icon-file-image:before {
content: "\e671";
}
.wd-icon-file-powerpoint:before {
content: "\e672";
}
.wd-icon-file-add:before {
content: "\e673";
}
.wd-icon-file-icon:before {
content: "\e674";
}
.wd-icon-file-paste:before {
content: "\e675";
}
.wd-icon-file-excel:before {
content: "\e676";
}
.wd-icon-file-copy:before {
content: "\e677";
}
.wd-icon-video1:before {
content: "\e678";
}
.wd-icon-wallet:before {
content: "\e679";
}
.wd-icon-ie:before {
content: "\e65d";
}
.wd-icon-logo-codepen:before {
content: "\e65e";
}
.wd-icon-github-filled:before {
content: "\e65f";
}
.wd-icon-ie-filled:before {
content: "\e660";
}
.wd-icon-apple:before {
content: "\e661";
}
.wd-icon-windows-filled:before {
content: "\e662";
}
.wd-icon-internet:before {
content: "\e663";
}
.wd-icon-github:before {
content: "\e664";
}
.wd-icon-windows:before {
content: "\e665";
}
.wd-icon-apple-filled:before {
content: "\e666";
}
.wd-icon-chrome-filled:before {
content: "\e667";
}
.wd-icon-chrome:before {
content: "\e668";
}
.wd-icon-android:before {
content: "\e669";
}
.wd-icon-edit-outline:before {
content: "\e64a";
}
.wd-icon-detection:before {
content: "\e64b";
}
.wd-icon-check-outline:before {
content: "\e64c";
}
.wd-icon-close:before {
content: "\e64d";
}
.wd-icon-check:before {
content: "\e64e";
}
.wd-icon-arrow-left:before {
content: "\e64f";
}
.wd-icon-computer:before {
content: "\e650";
}
.wd-icon-clock:before {
content: "\e651";
}
.wd-icon-check-bold:before {
content: "\e652";
}
.wd-icon-bags:before {
content: "\e653";
}
.wd-icon-arrow-down:before {
content: "\e654";
}
.wd-icon-arrow-right:before {
content: "\e655";
}
.wd-icon-circle:before {
content: "\e656";
}
.wd-icon-arrow-thin-down:before {
content: "\e657";
}
.wd-icon-camera:before {
content: "\e658";
}
.wd-icon-close-bold:before {
content: "\e659";
}
.wd-icon-add-circle:before {
content: "\e65a";
}
.wd-icon-arrow-thin-up:before {
content: "\e65b";
}
.wd-icon-add:before {
content: "\e65c";
}
.wd-icon-keyboard-delete:before {
content: "\e634";
}
.wd-icon-transfer:before {
content: "\e635";
}
.wd-icon-eye-close:before {
content: "\e61f";
}
.wd-icon-delete:before {
content: "\e61e";
}
.wd-icon-download:before {
content: "\e636";
}
.wd-icon-picture:before {
content: "\e637";
}
.wd-icon-refresh:before {
content: "\e638";
}
.wd-icon-read:before {
content: "\e639";
}
.wd-icon-note:before {
content: "\e63a";
}
.wd-icon-phone:before {
content: "\e63b";
}
.wd-icon-lenovo:before {
content: "\e63c";
}
.wd-icon-home:before {
content: "\e63d";
}
.wd-icon-search:before {
content: "\e63e";
}
.wd-icon-fill-camera:before {
content: "\e63f";
}
.wd-icon-fill-arrow-down:before {
content: "\e640";
}
.wd-icon-arrow-up:before {
content: "\e61d";
}
.wd-icon-delete-thin:before {
content: "\e641";
}
.wd-icon-filter:before {
content: "\e642";
}
.wd-icon-evaluation:before {
content: "\e643";
}
.wd-icon-close-outline:before {
content: "\e644";
}
.wd-icon-dong:before {
content: "\e645";
}
.wd-icon-error-fill:before {
content: "\e646";
}
.wd-icon-chat:before {
content: "\e647";
}
.wd-icon-decrease:before {
content: "\e648";
}
.wd-icon-copy:before {
content: "\e649";
}
.wd-icon-setting:before {
content: "\e621";
}
.wd-icon-subscribe:before {
content: "\e622";
}
.wd-icon-jdm:before {
content: "\e620";
}
.wd-icon-spool:before {
content: "\e623";
}
.wd-icon-warning:before {
content: "\e624";
}
.wd-icon-wifi-error:before {
content: "\e625";
}
.wd-icon-star-on:before {
content: "\e626";
}
.wd-icon-rotate:before {
content: "\e627";
}
.wd-icon-translate-bold:before {
content: "\e628";
}
.wd-icon-keyboard-collapse:before {
content: "\e629";
}
.wd-icon-keywords:before {
content: "\e62a";
}
.wd-icon-scan:before {
content: "\e62b";
}
.wd-icon-view:before {
content: "\e62c";
}
.wd-icon-phone-compute:before {
content: "\e62d";
}
.wd-icon-video:before {
content: "\e62e";
}
.wd-icon-thin-arrow-left:before {
content: "\e62f";
}
.wd-icon-goods:before {
content: "\e630";
}
.wd-icon-list:before {
content: "\e631";
}
.wd-icon-warn-bold:before {
content: "\e632";
}
.wd-icon-more:before {
content: "\e633";
}
\ No newline at end of file
src/Components/wd-icon-local/types.ts 0 → 100644
View file @ 362a6f9b
/* eslint-disable */
import { baseProps, makeRequiredProp, makeStringProp } from './common/props'
export const iconProps = {
...baseProps,
/**
* 使用的图标名字，可以使用链接图片
*/
name: makeRequiredProp(String),
/**
* 图标的颜色
*/
color: String,
/**
* 图标的字体大小
*/
size: String,
/**
* 类名前缀，用于使用自定义图标
*/
classPrefix: makeStringProp('wd-icon')
}
src/Components/wd-icon-local/wd-icon.vue 0 → 100644
View file @ 362a6f9b
<!-- eslint-disable -->
<template>
<view @click="handleClick" :class="rootClass" :style="rootStyle">
<image v-if="isImageUrl" class="wd-icon__image" :src="name"></image>
</view>
</template>
<script lang="ts">
/* eslint-disable */
export default {
name: 'wd-icon',
options: {
virtualHost: true,
addGlobalClass: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
/* eslint-disable */
import { computed, ref, watch } from 'vue'
import { objToStyle } from './common/util'
import { iconProps } from './types'
const props = defineProps(iconProps)
const emit = defineEmits(['click'])
const isImageUrl = ref<boolean>(false)
watch(
() => props.name,
(val) => {
isImageUrl.value = val.indexOf('/') > -1
},
{ deep: true, immediate: true }
)
const rootClass = computed(() => {
const prefix = props.classPrefix
return `${prefix} ${props.customClass} ${isImageUrl.value ? 'wd-icon--image' : prefix + '-' + props.name}`
})
const rootStyle = computed(() => {
const style: Record<string, any> = {}
if (props.color) {
style['color'] = props.color
}
if (props.size) {
style['font-size'] = props.size
}
return `${objToStyle(style)}; ${props.customStyle}`
})
function handleClick(event: any) {
emit('click', event)
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
src/pages/index/index.vue
View file @ 362a6f9b
<template>
<view class="container">
<my-icon name="add-circle" color="#0083ff" />
<view class="top">
<!-- 搜索 -->
<Search background="rgba(255, 255, 255, 0.8)" backIcon="black" @toSearch="toSearch">
......@@ -148,6 +149,7 @@
</template>
<script setup>
import myIcon from '../../components/wd-icon-local/wd-icon.vue';
import { onMounted, reactive, ref } from 'vue';
import { useCountStore } from '@/store';
import Search from '../../components/index/Search.vue';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment