glhcp/business/uni.scss

// default_color是主题色
// minor_color用于渐变色

/* 颜色变量 */
$themes: (
  red_theme: (
    default_color: #FF2C3C,
	minor_color: #F95F2F
  ),
  orange_theme: (
	default_color: #f7971e,
	minor_color: #ffd200
  ),
  pink_theme: (
	default_color: #fa444d,
	minor_color: #fd498f
  ),
  gold_theme: (
	default_color: #e0a356,
	minor_color: #ebc389
  ),
  blue_theme: (
	default_color:#2f80ed,
	minor_color: #56ccf2
  ),
  green_theme: (
	default_color:#2ec840,
	minor_color: #3de650
  )
);
//遍历主题map
@mixin theme_each {
  @each $theme-name, $theme-map in $themes {
    $theme-color: $theme-map !global;
	[data-theme=#{$theme-name}] & {
		@at-root #{&} {
			@content
		}
	}
  }
}

// 获取导出的主题色
@function get_export_color($name) {
	$theme-name: map-get($themes, $name);
	@return map-get($theme-name, 'default_color');
}

// 获取主题色
@function get_color($key) {
	@return map-get($theme-color, $key);
}
//获取背景颜色
@mixin background_color($alpha: 1) {
  @include theme_each {
    background-color: rgba(get_color('default_color'),$alpha);;
  }
}

//获取渐变背景颜色
@mixin background_linear($deg: 90deg, $min: 0%, $max: 100%) {
  @include theme_each {
    background-image: linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
  }
}

//获取渐变背景图片和颜色
@mixin background_image($deg: 90deg, $min: 0%, $max: 100%, $url: '') {
  @include theme_each {
    background-image: url($url),linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
  }
}

// 设置阴影
@mixin box_shadow($x, $y, $blur, $spread: 0, $box: inset) {
  @include theme_each {
    box-shadow: $x $y $blur $spread get_color('default_color') $box;
  }
}

//获取字体颜色
@mixin font_color() {
  @include theme_each {
    color: get_color('default_color');
  }
}

//获取边框颜色
@mixin border_color() {
  @include theme_each {
    border-color: get_color('default_color');
  }
}

$-color-primary: #40AFFA;

//主要边框颜色
$-color-border: #E5E5E5;

//黑色
$-color-black:#101010;

//白色
$-color-white: #ffffff;

//字体主色
$-color-normal: #333333;

//字体浅色
$-color-lighter: #666666;

//字体更浅色
$-color-muted: #999999;

//背景色
$-color-body: #F6F6F6;

/** S Font's size **/
$-font-size-xxs: 22rpx;
$-font-size-xs: 24rpx;
$-font-size-sm: 26rpx;
$-font-size-nr: 28rpx;
$-font-size-md: 30rpx;
$-font-size-lg: 32rpx;
$-font-size-xl: 34rpx;
$-font-size-xxl: 36rpx;
/** E Font's size **/

//边框
$-solid-border: 1px solid $-color-border;
$-dashed-border: 1px dashed $-color-border;
$-dotted-border: 1px dotted $-color-border;

// 引入uview主题
@import "components/uview-ui/theme.scss";

:export {
    red_theme: get_export_color('red_theme');
	orange_theme: get_export_color('orange_theme');
	pink_theme: get_export_color('pink_theme');
	gold_theme: get_export_color('gold_theme');
	blue_theme: get_export_color('blue_theme');
	green_theme: get_export_color('green_theme');
}