erp-ui-m/uni.scss

/**
 * uni-app内置的常用样式变量
 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#e5e5e5;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;

/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
/* 颜色变量 */
$uni-color-red: #ff4141;
$uni-color-yellow: #f5b951;
$uni-color-green: #26ae7e;
$uni-color-grey: #f4f4f4;
$uni-color-darkgrey: #828282;
$uni-color-primary: #5677fc;
$uni-color-success: #55be75;
$uni-color-warning: #ff7900;
$uni-color-error: #EB0909;
$uni-color-blue: #416792;
$uni-color-black: #000000;
$uni-color-white: #ffffff;
$uni-color-pink:#f74d54;
$uni-color-link:#586c94;

/* 背景色 */
.uni-bg-red {
	background: $uni-color-red !important;
}

.uni-bg-green {
	background: $uni-color-green !important;
}

.uni-bg-blue {
	background: $uni-color-white !important;
}

.uni-bg-white {
	background: $uni-color-white !important;
}

.uni-bg-grey {
	background: $uni-color-grey !important;
}

.uni-bg-darkgrey {
	background: $uni-color-darkgrey !important;
}

.uni-color-darkgrey {
	color: $uni-color-darkgrey;
}
.uni-color-green {
	color: $uni-color-green;
}
.uni-color-yellow {
	color: $uni-color-yellow;
}
.uni-color-blue {
	color: $uni-color-blue;
}
.uni-color-white {
	color: $uni-color-white;
}
.color-999{
	color: #999;
}
.color-888{
	color: #888;
}
.color-777{
	color: #777;
}
.color-333{
	color: #333;
}
.color-666{
	color: #666;
}
.color-000{
	color: #000;
}
.color-blue {
			color: #58688a;
}
.borb-eee{
	position: relative;
	&:before{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #e5e5e5;
	}

	&:last-child:before {
		display: none;
	}
}
.bort-eee{
	border-top: 1rpx solid #eee;
}
.bor-eee{
	border: 1rpx solid #eee;
}
.uni-text-red, .uni-color-red {
	color: $uni-color-red !important;
}

/* 文字基本颜色 */
$uni-text-color:#000000;//基本色
$uni-text-color-inverse:#ffffff;//反色
$uni-text-color-grey:#828282;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #bfbfbf;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#f4f4f4;
$uni-bg-white:#fff;
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

.page-floor{
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.page-menu {
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	right: 0;
}
.page-btn-fixed {
	height: 140rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.btn-fixed {
		position: fixed;
		z-index: 10;
		left: 0;
		right: 0;
		bottom: 0;
		height: 140rpx;
		padding: 0 30rpx;
		background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff 50%);
		// background-color: #ffffff;
		border-bottom: constant(safe-area-inset-bottom) solid #ffffff;
		border-bottom: env(safe-area-inset-bottom) solid #ffffff;
		display: flex;
		align-items: center;
		.btn-other {
			flex: 1;
			height: 88rpx;
			background-color: #ffffff;
			border: 1px solid #888888;
			color: #999999;
			border-radius: 80rpx;
		}
		.btn-save{
			flex: 1;
			height: 88rpx;
			background-color: #5677fc;
			border: 1px solid #5677fc;
			color: #fff;
			border-radius: 80rpx;
		}
		.btn {
			flex: 1;
			height: 88rpx;
			background-color: #bc271b;
			border: 1px solid #bc271b;
			color: #ffffff;
			border-radius: 80rpx;
		}
		.btn-box{
			border-radius: 80rpx;
			box-shadow: 0 0 12rpx 12rpx rgba(0,0,0,0.04);
			overflow: hidden;
			display: flex;
			align-items: center;
			.btn-other{
				background-color: #f4f4f4;
			}
			.btn-save{
				background-color: #5677fc;
			}
			.btn-other,.btn,.btn-save{
				border-radius: 0;
				border: none;
			}
		}
	}
}

$i: 60;
@mixin font-x {
	@while ($i >= 0) {
		.font-#{$i} { font-size: #{$i}rpx !important; }
		.padding-#{$i} { padding: #{$i}rpx;}
		.margin-#{$i} { margin: #{$i}rpx;}
		.mt-#{$i} { margin-top: #{$i}rpx !important; }
		.mr-#{$i} { margin-right: #{$i}rpx !important; }
		.mb-#{$i} { margin-bottom: #{$i}rpx !important; }
		.ml-#{$i} { margin-left: #{$i}rpx !important; }
		.pt-#{$i} { padding-top: #{$i}rpx !important; }
		.pr-#{$i} { padding-right: #{$i}rpx !important; }
		.pb-#{$i} { padding-bottom: #{$i}rpx !important; }
		.pl-#{$i} { padding-left: #{$i}rpx !important; }
		.br-#{$i} { border-radius: #{$i}rpx !important; overflow: hidden; }
		$i: $i - 2;
	}
}
@include font-x;

$i: 12;
@mixin col-x {
	@while ($i >= 0) {
		.col-#{$i} { width: #{$i*100/12}% !important; }
		.flex-#{$i} { flex: #{$i} !important; }
		$i: $i - 1;
	}
}
@include col-x;

.over-h {
	overflow: hidden;
}

.df {
	display: -webkit-flex !important;
	display: flex !important;
}

.df-column{
	flex-direction: column !important;
}

.ai-center {
	/* 垂直居中 */
	align-items: center !important;
}

.ai-flex-start {
	/* 起点对齐 */
	align-items: flex-start !important;
}

.ai-flex-end {
	/* 底部对齐 */
	align-items: flex-end !important;
}

.ai-baseline {
	/* 中间文字对齐 */
	align-items: baseline !important;
}

.jc-center {
	justify-content: center !important;
}

.jc-flex-start {
	justify-content: flex-start !important;
}

.jc-flex-end {
	justify-content: flex-end !important;
}

.jc-space-between {
	justify-content: space-between !important;
}

.jc-space-around {
	justify-content: space-around !important;
}

.fw-nowrap {
	flex-wrap: nowrap !important;
}

.fw-wrap {
	flex-wrap: wrap !important;
}

.fw-wr {
	flex-wrap: wrap-reverse !important;
}

.position-abs {
	position: absolute !important;
}

.position-rel {
	position: relative !important;
}

.position-fix {
	position: fixed;
}

.omit-1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.omit-2 {
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-height: 100rpx;
}

.omit-3 {
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	max-height: 200rpx;
}

.omit-5 {
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	max-height: 300rpx;
}

//gui样式

.gui-select {
	font-size: 24rpx;
	color: #26ae7e;
	background-color: #ffffff;
	height: 52rpx;
	border: 1px solid #26ae7e;
	padding: 0 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50rpx;
	overflow: hidden;
	.text {
		flex: 1;
	}	
	&::after{
		content: " ";
		height: 10px;
		width: 10px;
		border-width: 0px 2px 2px 0;
		border-color: #c0c0c0;
		border-style: solid;
		-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
		transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
		margin-left: 20rpx;
	}
}

.uni-btn {
	background-color: #bc271b !important;
	border-color: #bc271b !important;
	margin: 0;
	// border: 1rpx solid #26ae7e !important;
	border-radius: 80rpx;
	color: #ffffff;
	font-size: 32rpx;
	&::after{
		// display: none !important;
		// border-radius: 80rpx !important;
	}
	&:active {
		background-color: #bc271b !important;
		border-color: #bc271b !important;
		color: #eee;
	}
	&.disabled {
		background-color: #e1847c !important;
		border-color: #e1847c !important;
		color: #dddddd;
	}
}

.uni-btn-line {
	background-color: #ffffff !important;
	border-color: #bc271b !important;
	margin: 0;
	// border: 1rpx solid #26ae7e !important;
	border-radius: 80rpx;
	color: #bc271b;
	font-size: 32rpx;
	&::after{
		// display: none !important;
		// border-radius: 80rpx !important;
	}
	&:active {
		background-color: #ffffff !important;
		border-color: #bc271b !important;
		color: #bc271b;
	}
	&.disabled {
		background-color: #ffffff !important;
		border-color: #e1847c !important;
		color: #dddddd;
	}
}
.uni-input {
	text-align: right;
	font-size: 26rpx;
	height: 88rpx;
	min-height: 88rpx;
	line-height: 88rpx;
}
.font-bold{
	font-weight: bold;
}
.text-center{
	text-align: center;
}
.text-right{
	text-align: right;
}
.text-left{
	text-align: left;
}
.text-justify{
	text-align: justify;
}