menber-center/uni.scss

/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

// 引入uView UI全局 scss 变量文件
@import '@/uni_modules/vk-uview-ui/theme.scss';

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #006af4;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #FA5151;

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

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

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

/* 标题尺寸 */
$uni-title-font-size-1: 36rpx;
$uni-title-font-size-2: 26rpx;
$uni-title-font-size-3: 24rpx;

/* 文字尺寸 */
$uni-font-size-1: 24rpx;
$uni-font-size-2: 20rpx;
$uni-font-size-3: 18rpx;
$uni-font-size-4: 16rpx;
$uni-font-size-5: 14rpx;
$uni-font-size-6: 12rpx;

/* 卡片圆角 */
$uni-card-border-radius: 20rpx;

// 全尺寸背景图片
@mixin backgroundImg($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

// 滚动条梅花
@mixin scrollbar() {
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }
  // 滚动条的轨道（里面装有Thumb）
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  // 滚动条的轨道（里面装有Thumb）
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }
  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.3);
    cursor: pointer;
    border-radius: 4px;
  }
  // 边角，即两个滚动条的交汇处
  &::-webkit-scrollbar-corner {
    display: none;
  }
  // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  &::-webkit-resizer {
    display: none;
  }
}

// 单行文字溢出
@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文字溢出
@mixin text-line-overflow($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

// 顶部悬停
@mixin topMagnet() {
	position: sticky;
	top: 0;
	z-index: 999;
}

/**
 * 底部悬停
 * 使用该样式，会使元素脱离文档高度，致使出现内容被遮挡。需在其同层条件下新增一个元素，与其高度保持一致，保证高度不会丢失
 */
@mixin bottomMagnet() {
	position: fixed;
	bottom: 0;
	width: 100%;
}