vue-ant-patterns/es/d-card-layout/style/index.css

vue-ant-patterns

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* 
命名规则, 三部分 className
.flex-侧轴
.flex-主轴
.flex-侧轴-主轴
*/
.depot-layout-card {
  /* 无间隔的flex布局 */
  /*栅格断点区间*/
}
.depot-layout-card-inner-flex {
  flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  position: relative;
}
.depot-layout-card-inner-flex:first-child .depot-dcard-inner {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.depot-layout-card-inner-flex:last-child {
  margin-right: 0;
}
.depot-layout-card-inner-flex:last-child .depot-dcard-inner {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.depot-layout-card-inner-flex::after {
  content: '';
  position: absolute;
  display: block;
  height: 75%;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.04);
  top: 12.5%;
  right: 0;
}
.depot-layout-card-inner-flex:last-child::after {
  display: none;
}
.depot-layout-card-inner-grid {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  float: left;
  position: relative;
  min-height: 1px;
  margin-bottom: 16px;
}
.depot-layout-card-inner-col-sm {
  width: 100%;
}
.depot-layout-card-inner-col-md {
  width: 50%;
}
.depot-layout-card-inner-col-lg {
  width: 33.3%;
}
.depot-layout-card-inner-col-xl {
  width: 25%;
}
.depot-layout-card-inner-col-xxl {
  width: 16.66666667%;
}
/*工作中心布局-特殊的一种卡片布局，卡片大小为240*148px*/
.depot-layout-card-workdashboard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.depot-layout-card-inner-workdashboard {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  position: relative;
  width: 248px;
  height: 148px;
  margin-bottom: 8px;
}