rsmonitoring-app/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;

/* 颜色变量 */
// @import '@/uni_modules/uview-ui/theme.scss';
/**
 * 自定义颜色
 */
 $brand-theme-color:#EC544F;      //品牌主体红色
 $brand-theme-color-aux:#576b95;  //品牌辅助色
 $page-bg-color:#F7F7F7;          //页面背景色
 $border-color:#e0e0e0;           //边框颜色
 $border-color-light:#efefef;     //边框亮色
 
 
 $text-font-color-1:#000;         //文字主色
 $text-font-color-2:#676767;      //副标题颜色
 $text-font-color-3:#a7a7a7;      //浅色
 
 @mixin flex-box {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 @mixin flex-box-set($jc:center,$ai:center) {
     @include flex-box();
     @if($jc == center){
         justify-content: center;
     }
     @if($jc == start){
         justify-content: flex-start;
     }
     @if($jc == end){
         justify-content: flex-end;
     }
     @if($jc == between){
         justify-content: space-between;
     }
     @if($ai == center){
         align-items: center;
     }
     @if($ai == start){
         align-items: flex-start;
     }
     @if($ai == end){
         align-items: flex-end;
     }
 }
 
 @mixin ellipsis($row:1){
     text-overflow: -o-ellipsis-lastline;
     overflow: hidden;				//溢出内容隐藏
     text-overflow: ellipsis;		//文本溢出部分用省略号表示
     display: -webkit-box;			//特别显示模式
     -webkit-line-clamp: $row;			//行数
     line-clamp: $row;					
     -webkit-box-orient: vertical;	//盒子中内容竖直排列	
 }