第一次提交
This commit is contained in:
106
style/mixin.scss
Normal file
106
style/mixin.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
@charset "utf-8";
|
||||
//主题色
|
||||
$themeColor: #54a966;
|
||||
|
||||
@mixin theme($type,$path:''){
|
||||
@if $type == "btn_bg" {
|
||||
background-image: linear-gradient(90deg, #54a966 0%, #117e4c 100%);
|
||||
} @else if $type == "unselected_img" {
|
||||
background-image: url($path + "static/icon/ic_gender_unselected.png");
|
||||
} @else if $type == "check_img" {
|
||||
background-image: url($path + "static/icon/ic_agreed.png");
|
||||
} @else if $type == "radio_img" {
|
||||
background-image: url($path + "static/icon/ic_gender_selected.png");
|
||||
}
|
||||
}
|
||||
|
||||
// 背景图片地址和大小
|
||||
@mixin bis($url, $size: cover) {
|
||||
background-image: url($url);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: $size;
|
||||
}
|
||||
|
||||
// 头像
|
||||
@mixin ic($width, $height) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
// 单行省略号
|
||||
@mixin toe() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
// 多行省略号
|
||||
@mixin bov($num:2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $num;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* uni.scss */
|
||||
@import 'uview-ui/theme.scss';
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 主要颜色 */
|
||||
|
||||
$dominantHue:#54a966;//主色调 蓝
|
||||
|
||||
$lightBlue:#ECF3FD;//淡蓝
|
||||
|
||||
//背景浅灰
|
||||
$bgLightGray:#f7f7f7; //浅灰
|
||||
|
||||
/* 文本颜色 */
|
||||
$blackAll: #333333; //主文字颜色 黑
|
||||
$mediumGrey: #666777;//副文字颜色 中灰
|
||||
$lightGray: #a4a6bf;//副文字颜色 浅灰
|
||||
$redAll:#FF5050;// 文本红色
|
||||
|
||||
|
||||
$bleed:30upx;//屏幕左右边距
|
||||
|
||||
//屏幕适配数值
|
||||
$barTopHeight:0; //XR系列状态栏高度
|
||||
$navBoxHeight:34px; //XR系列底部 HOME 健预留高
|
||||
$navHeight:65px; //底部导航栏高度
|
||||
$barHeight:44px; //顶部标题栏高度
|
||||
$classifyTopH:44px; //分类顶部选项卡高
|
||||
$stairTop: 68px;// 一级页面头部距离
|
||||
$stairTopTow: 92px;// XR系列一级页面头部距离
|
||||
|
||||
/* 其它颜色 */
|
||||
$skeletonColor:#eaeaea; //骨架背景色 图片为加载完成的背景颜色
|
||||
$rippleBg:#EEEEEE;//全局分割线颜色
|
||||
$brimColor:#EAEAEA; //书架复选框颜色
|
||||
$starColor:#FFB32F;//星星 黄
|
||||
Reference in New Issue
Block a user