qm-ui/style/common.less

千米公有云管理端UI基础组件库

@charset "UTF-8";
html,
body {
  height: 100%;
  text-rendering: optimizeLegibility;
  //-webkit-font-smoothing: antialiased;
  //-moz-osx-font-smoothing: grayscale;
  // overflow: hidden;
}

input[readonly] {
  background-color: @input-disabled-bg;
}

.ant-calendar-picker input[readonly] {
  background-color: #fff;
}

//去除safari-input自带的图标
input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

//相对定位
.pos-relative {
  position: relative;
}

//字体大小
.font-12 {
  font-size: 12px;
}

.font-14 {
  font-size: 14px;
}

.font-16 {
  font-size: 16px;
}

.font-18 {
  font-size: 18px;
}

.font-20 {
  font-size: 20px;
}

.font-22 {
  font-size: 22px;
}

.font-24 {
  font-size: 24px;
}

.font-26 {
  font-size: 26px;
}

.font-28 {
  font-size: 28px;
}

//字体颜色
.t-text {
  color: @text-color;
}

.t-primary {
  color: @primary-color;
}

.t-red {
  color: @error-color;
}

.t-green {
  color: @success-color;
}

.t-orange {
  color: @warning-color;
}

.t-grayer {
  color: #999;
}

.t-price {
  color: @price-color;
}

.inline-tips {
  color: #999;
}

//字体水平对齐
.t-left {
  text-align: left;
}

.t-center {
  text-align: center;
}

.t-right {
  text-align: right;
}

.t-indent {
  text-indent: 2em;
}

.t-hanging {
  text-indent: hanging;
}

.t-pointer {
  cursor: pointer;
}

//垂直对齐方式
//顶部对齐
.va-t {
  vertical-align: top;
}
//底部对齐
.va-b {
  vertical-align: bottom;
}
//居中对齐
.va-m {
  vertical-align: middle;
}

//行高
.lh-default {
  line-height: 18px;
}

.lh20 {
  line-height: 20px;
}

.lh22 {
  line-height: 22px;
}

.lh24 {
  line-height: 24px;
}

.lh28 {
  line-height: 28px;
}

.lh32 {
  line-height: 32px;
}

.lh36 {
  line-height: 36px;
}

.lh50 {
  line-height: 50px;
}

.lh60 {
  line-height: 60px;
}

//间距
.push {
  margin: 10px;
}

.no-push {
  margin: 0;
}

.pusht {
  margin-top: 10px;
}

.pushtt {
  margin-top: 20px;
}

.no-pusht {
  margin-top: 0;
}

.pushr {
  margin-right: 10px;
}

.no-pushr {
  margin-right: 0;
}

.pushb {
  margin-bottom: 10px;
}

.no-pushb {
  margin-bottom: 0;
}

.pushl {
  margin-left: 10px;
}

.no-pushl {
  margin-left: 0;
}

.ml5 {
  margin-left: 5px;
}

.fill {
  padding: 10px;
}

.no-fill {
  padding: 0;
}

.fillt {
  padding-top: 10px;
}

.no-fillt {
  padding-top: 0;
}

.fillr {
  padding-right: 10px;
}

.no-fillr {
  padding-right: 0;
}

.fillb {
  padding-bottom: 10px;
}

.no-fillb {
  padding-bottom: 0;
}

.filll {
  padding-left: 10px;
}

.fillll {
  padding-left: 20px;
}

.no-filll {
  padding-left: 0;
}

//浮动
.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

//隐藏与显示
.show {
  display: block;
}
.hide {
  display: none;
}

//鼠标形状
.cursor-d {
  cursor: default;
}

.cursor-p {
  cursor: pointer;
}

.cursor-n {
  cursor: none;
}

//宽度相关
.min-w100 {
  min-width: 100px;
}

//form表单项默认宽度
.w240 {
  width: 240px;
}

.w360 {
  width: 360px;
}

.w300 {
  width: 300px;
}

//图片相关
.img-response {
  img {
    width: 100%;
    vertical-align: middle;
  }
}

//删除按钮样式一
.btn-remove {
  position: relative;
  top: 3px;
  font-size: 18px;
  color: #ccc;
  cursor: pointer;
}

//分页相关
.pagination-right {
  padding: 15px;
  .clearfix;

  .ant-pagination {
    float: right;
  }
}

.ant-form-text {
  margin-left: 5px;
}

//简单搜索标签提示
.addon-label {
  display: inline-block;
  position: relative;
  height: 28px;
  line-height: 28px;
  padding: 0 13px 0 10px;
  margin: -1px -3px 0 0;
  vertical-align: middle;
  color: #666;
  background-color: #fcfcfc;
  border: 1px solid @border-color-base;
  .border-radius(@border-radius-base);

  &.addon-label-lg {
    height: 32px;
    line-height: 32px;
    padding: 0 18px 0 15px;
  }
}

//标签状态
.tag-Aqua {
  color: #fff;
  background: #3fc9d4;

  a,
  a:hover,
  .anticon-cross,
  .anticon-cross:hover {
    color: #fff;
  }
}

//数字加亮
.number-light {
  padding: 0 5px;
  color: #fff;
  background-color: #b94a48;
}

//五等分
.row-col {
  position: relative;
  margin-left: 0;
  margin-right: 0;
  height: auto;
  zoom: 1;
  display: block;
  .clearfix;

  .col-5 {
    display: block;
    float: left;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
    width: 20%;
  }
}

//帮助提示
.help-tips {
  font-size: 12px;
  color: #999;
  font-weight: normal;
  vertical-align: baseline;
  margin: 0 3px;
}

//页面级标题
.page-title {
  font-weight: normal;
  margin: 10px 0;

  .qmIcon {
    color: #666;
    padding: 0 10px;
    cursor: pointer;
  }
}

//列表样式相关
.list-inline {
  .clearfix;

  .list-item {
    float: left;
    display: inline-block;
  }
}

//项目图标
/**
* 店铺类型：
*  云分销：yfx
*  云商城：ysc
*  社区店：sqd
*  云小店：yxd-store
*  云采购：ycg-store
*  全员开店：qykd
*  推广达人：tgdr
*  积分商城：jfsc
*  礼品卡：lpk
*  达人升级：talent-upgrade
*  多人拼团：drpt
*/
.pro-logo-img {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url('//pic.qianmi.com/qmui/v0.2/img/logo-pros.png') no-repeat;
  -webkit-background-size: 410px auto;
  background-size: 410px auto;

  &.w64 {
    width: 64px;
    height: 64px;
    -webkit-background-size: 330px auto;
    background-size: 330px auto;
  }

  &.w60 {
    width: 60px;
    height: 60px;
    -webkit-background-size: 301px auto;
    background-size: 301px auto;
  }

  &.w40 {
    width: 40px;
    height: 40px;
    -webkit-background-size: 205px auto;
    background-size: 205px auto;
  }

  /* 原云订货  后面不再使用 改名为云分销*/
  &.ydh,
  &.yfx {
    background-position: 0 0;
  }

  /* 店铺类型 云商城*/
  &.ysc {
    background-position: 25% 0;
  }

  /* 原云小店 logo已经更改 见yxd-store*/
  &.yxd {
    background-position: 50% 0;
  }

  /*E生活*/
  &.elife {
    background-position: 75% 0;
  }

  /*线下收银*/
  &.cashier-role {
    background-position: 100% 0;
  }

  /* 云采购 logo和名称都已换*/
  &.ycg {
    background-position: 0 25%;
  }

  /*销售助手*/
  &.xszs {
    background-position: 25% 25%;
  }

  /* 店铺类型 全员开店*/
  &.qykd {
    background-position: 50% 25%;
  }

  /*网店管家*/
  &.wdgj,
  &.FW_GOODS-10001137 {
    background-position: 75% 25%;
  }

  /*小能客服*/
  &.xxkf,
  &.FW_GOODS-10001148 {
    background-position: 100% 25%;
  }

  /*达人升级*/
  &.talent-upgrade {
    background-position: 0 50%;
  }

  /*多人拼团*/
  &.drpt {
    background-position: 25% 50%;
  }

  /*聚水潭*/
  &.jst,
  &.FW_GOODS-10001163 {
    background-position: 50% 50%;
  }

  /*旺店通ERP*/
  &.wdt,
  &.FW_GOODS-10001154 {
    background-position: 75% 50%;
  }

  /*管家婆分销ERP*/
  &.gjpfx,
  &.FW_GOODS-10001159 {
    background-position: 100% 50%;
  }

  /*短信*/
  &.sms {
    background-position: 0 75%;
  }

  /*OMS*/
  &.oms {
    background-position: 25% 75%;
  }

  /*云商城 C端logo*/
  &.ysc2c {
    background-position: 50% 75%;
  }

  /*云商城 C端 PC版logo*/
  &.ysc2c-pc {
    background-position: 75% 75%;
  }

  /*社区店*/
  &.sqd {
    background-position: 100% 75%;
  }

  /*店铺类型 云小店*/
  &.yxd-store {
    background-position: 0 100%;
  }

  /*店铺类型 云采购*/
  &.ycg-store {
    background-position: 25% 100%;
  }

  /*营销类型 推广达人*/
  &.tgdr {
    background-position: 50% 100%;
  }

  /*营销类型 积分商城*/
  &.jfsc {
    background-position: 75% 100%;
  }

  /*营销类型 礼品卡*/
  &.lpk {
    background-position: 100% 100%;
  }
}

/*框类型*/
.blk {
  display: block;
}

.inline-blk {
  display: inline-block;
}

/*width 100%*/
.percent100 {
  width: 100%;
}

.modal-padding {
  padding: 20px;
}

.modal-padding-lr {
  padding: 0 20px;
}

/*云商城分页*/
.pagination-retail {
  padding: 10px 12px;
  //border: 1px solid @border-color-split;
  background-color: #fff;
}

//行内元素间距用
.mr3 {
  margin-right: 3px;
}

//公用图片上传处理
.upload-qm {
  .ant-upload.ant-upload-select-picture-card {
    width: 75px;
    height: 75px;

    i.anticon-plus {
      font-size: 28px;
      color: #999;
      padding-top: 5px;
    }
  }
  .ant-upload-list-picture-card .ant-upload-list-item {
    width: 75px;
    height: 75px;
    padding: 0;
    margin-bottom: 0;
    .ant-upload-list-item-info .anticon-eye-o {
      margin-left: -22px;
    }
    .ant-upload-list-item-info .anticon-delete {
      display: inline-block;
    }
  }
  &.un-deletable {
    .ant-upload-list-picture-card .ant-upload-list-item {
      .ant-upload-list-item-info .anticon-eye-o {
        margin-left: -8px;
      }
      .ant-upload-list-item-info .anticon-delete {
        display: none;
      }
    }
  }
}

//公用的成功失败页面提示//结构参照商城-营销-券验证
.page-tips {
  position: relative;
  margin: 30px 0;
  font-size: 14px;
  .clearfix;

  > .danduduihao,
  > .close {
    float: left;
    display: inline-block;
    width: 40px;
    height: 40px;
    font-size: 22px;
    color: #fff;
    text-align: center;
    padding: 8px;
    margin: 0 10px;
    .border-radius(50%);
    background-color: @primary-color;

    &:before {
      position: relative;
      top: -3px;
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  > .danduduihao {
    background-color: @success-color;
  }
  > .close {
    background-color: @error-color;
  }

  .text {
    float: left;
  }
}

//页面内加载
.page-inner-loading {
  padding: 150px 0 30px;
  text-align: center;
}

//页面内提示信息
.page-in-content {
  max-width: 295px;

  p {
    margin: 8px 0;
  }
}
.page-in-help-tips {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  color: #999;
  line-height: 1;
  z-index: 10;
  padding: 15px 15px 0 15px;

  &.inline {
    position: relative;
    top: 2px;
    padding: 0 5px 0 5px;
  }
}

.dashed-line {
  border-top: 1px dashed @border-color-split;
}

//徽标数样式
.badge-box {
  .ant-scroll-number-only {
    p {
      height: 18px;
    }
  }
}
.qm-self-level-icon {
  display: inline-block;
  width: 60px;
  height: 24px;
  position: relative;
  font-size: 12px;
  line-height: 18px;
  vertical-align: text-bottom;
  .type-name {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid #f1c40f;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    span {
      padding: 3px 4px;
      line-height: 21px;
    }
  }
  .level-name {
    display: inline-block;
    background: #f1c40f;
    position: absolute;
    margin: 4px 0px 0px 11px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    span {
      padding: 3px 6px 0 13px;
      line-height: 18px;
    }
  }
}
.qm-level-icon-talent {
  color: #f1c40f;
  .type-name {
    border: 1px solid #f1c40f;
  }
  .level-name {
    background: #f1c40f;
    color: #fff;
  }
}
.qm-level-icon-partner {
  color: #f55c54;
  .type-name {
    border: 1px solid #f55c54;
  }
  .level-name {
    background: #f55c54;
    color: #fff;
  }
}