/** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 辅助色颜色 */ $uni-color-primary: #1E92F0;/*#007aff;*/ $uni-color-primary-light: #D9EEFF; $uni-color-primary-deep: #0A508C; $uni-color-orange: #FD9F48; $uni-color-green: #00B578; $uni-color-blue: #4384F3; $uni-color-blue-light: #30DFF3; /* 行为相关颜色 */ $uni-color-success: #00B578;/*4cd964;*/ $uni-color-warning :#FF9624;/* #f0ad4e;*/ $uni-color-error: #E63633;/*#dd524d;*/ /* 文字基本颜色 */ $uni-text-color:#363A44;/*#333;基本色,文本颜色、行动点图标与文字*/ /* $uni-text-color-inverse:#fff;//反色*/ $uni-text-color-grey:#686B73;/*#999;//弱化文本*/ $uni-text-color-light:#B3B5B9;/*水印文本*/ /* $uni-text-color-placeholder: #808080;*/ $uni-text-color-disable:#B9BCBF;/*#c0c0c0;不可用颜色*/ /* 背景颜色 */ $uni-bg-color:#ffffff; $uni-bg-color-grey:#F6F7F8;/*#f8f8f8;*/ /* $uni-bg-color-hover:#f1f1f1;点击状态颜色*/ $uni-bg-color-mask:rgba(0, 0, 0, 0.5);/*遮罩颜色*/ $uni-bg-icon:#F5F8FD;/*遮罩颜色*/ /* 边框颜色 */ $uni-border-color:#E8E9EC;/*#c8c7cc;*/ /* 尺寸变量 */ /* 文字尺寸 */ $uni-font-size-ss:20rpx;/*备注*/ $uni-font-size-sm:24rpx;/*水印文本\辅助说明*/ $uni-font-size-base:28rpx;/*正文*/ $uni-font-size-lg:32rpx;/*标题 小\TAB Title*/ $uni-font-size-xl:36rpx;/*标题 中*/ $uni-font-size-xxl:40rpx;/*标题 大*/ $uni-font-size-xxxl:48rpx;/*主标题/页面强调内容*/ $uni-font-size-xxxxl:72rpx;/*用于最大数据文字/卡片标题文字*/ /* 行高 一般为字号的1.4倍*/ $uni-line-height-ss:28rpx;/*备注*/ $uni-line-height-sm:34rpx;/*水印文本\辅助说明*/ $uni-line-height-base:40rpx;/*正文*/ $uni-line-height-lg:44rpx;/*标题 小\TAB Title*/ $uni-line-height-xl:50rpx;/*标题 中*/ $uni-line-height-xxl:56rpx;/*标题 大*/ $uni-line-height-xxxl:67rpx;/*主标题/页面强调内容*/ /* 图片尺寸 */ /* $uni-img-size-sm:20px; // $uni-img-size-base:26px; // $uni-img-size-lg:40px;*/ /* Border Radius */ $uni-border-radius-r1: 4rpx; $uni-border-radius-r2: 8rpx; $uni-border-radius-r3: 12rpx; $uni-border-radius-r4: 16rpx; $uni-border-radius-circle: 50%; /* 水平间距 */ $uni-spacing-row-s1: 8rpx; $uni-spacing-row-s2: 16rpx; $uni-spacing-row-s3: 24rpx; $uni-spacing-row-s4: 32rpx; $page-row-spacing: 32rpx; /* 垂直间距 */ $uni-spacing-col-s1: 8rpx; $uni-spacing-col-s2: 16rpx; $uni-spacing-col-s3: 24rpx; $uni-spacing-col-s4: 32rpx; /* 透明度 */ /**/ $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;*/ /* 公共样式 */ @mixin flex { display: flex; align-items: center; } //居中 @mixin flex-center { display: flex; justify-content: center; align-items: center; } @mixin flex-between { display: flex; align-items: center; justify-content: space-between; } @mixin text-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @mixin text-ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @mixin text-ellipsis-3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }