个人文档库

Appearance

vue项目less模板样式 ​

less
// 初始化样式
* {
  margin: 0;
  padding: 0;

  &:focus {
    outline: none;
  }
}

html, body, #app {
  font: 14px/1.5 'Hiragino Sans GB', 'microsoft yahei', arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

ul li {
  list-style: none;
}

// ------------------------------------ 弹性盒子布局 相关 ------------------------------------
.flex() {
  display: flex;
}

.flex-num(@num:1) when (@num <= 24) {
  &-@{num} {
    -webkit-box-flex: @num;
    flex: @num;
  }
  .flex-num(@num + 1)
}

// flex布局
.flex {
  .flex();
  .flex-num();
}

// flex-direction属性决定主轴的方向

.flex-direction-row(@dir:row) {
  .flex();
  -webkit-box-orient: horizontal;
  flex-direction: @dir;
}

// 主轴为水平方向，起点在左端
.flex-row {
  .flex-direction-row();
}

// 主轴为水平方向，起点在右端
.flex-row-reverse {
  .flex-direction-row(row-reverse);
}

.flex-direction-column(@dir:column) {
  .flex();
  -webkit-box-orient: vertical;
  flex-direction: @dir;
}

// 主轴为垂直方向，起点在上沿
.flex-column {
  .flex-direction-column();
}

// 主轴为垂直方向，起点在下沿
.flex-column-reverse {
  .flex-direction-column(column-reverse);
}

// flex-wrap 排列换行

// 不换行
.flex-nowrap {
  flex-wrap: nowrap;
}

// 换行，第一行在上方
.flex-wrap {
  flex-wrap: wrap;
}

// 换行，第一行在下方
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

//align-items属性定义项目在交叉轴上如何对齐
.flex-align-items-center() {
  align-items: center;
}

// 交叉轴的起点对齐
.flex-align-start {
  .flex();
  align-items: flex-start;
}

// 交叉轴的终点对齐
.flex-align-start {
  .flex();
  align-items: flex-end;
}

// 交叉轴的中点对齐
.flex-align-center {
  .flex();
  .flex-align-items-center();
}

// 项目的第一行文字的基线对齐
.flex-align-baseline {
  .flex();
  align-items: baseline;
}

// 如果项目未设置高度或设为auto，将占满整个容器的高度
.flex-align-stretch {
  .flex();
  align-items: stretch;
}

// justify-content属性定义了项目在主轴上的对齐方式

// 左对齐
.flex-start {
  .flex();
  .flex-align-items-center();
  justify-content: flex-start;
}

// 右对齐
.flex-end {
  .flex();
  .flex-align-items-center();
  justify-content: flex-end;
}

// 居中
.flex-center {
  .flex();
  .flex-align-items-center();
  justify-content: center;
}

// 两端对齐，项目之间的间隔都相等
.flex-space-between {
  .flex();
  .flex-align-items-center();
  justify-content: space-between;
}

// 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
.flex-space-around {
  .flex();
  .flex-align-items-center();
  justify-content: space-around;
}

// 与交叉轴的起点对齐
.flex-content-start {
  align-content: flex-start;
}

// 与交叉轴的终点对齐
.flex-content-end {
  align-content: flex-end;
}

// 与交叉轴的中点对齐
.flex-content-center {
  align-content: center;
}

// 轴线占满整个交叉轴
.flex-content-stretch {
  align-content: stretch;
}

// 与交叉轴两端对齐，轴线之间的间隔平均分布
.flex-content-space-between {
  align-content: space-between;
}

// 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
.flex-content-space-around {
  align-content: space-around;
}

.txt-more {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  //     /* 规定当内容溢出元素框（容器）时隐藏 */
  // overflow: hidden;
  // /* 规定当文本溢出包含元素（容器）出现省略号 */
  // text-overflow: ellipsis;
  // /* 规定段落中的文本不进行换行 */
  // white-space: nowrap;
}

.txt-more-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.txt-more-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.txt-more-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

// 字体颜色
.color {
  &-pink {
    color: #e46bbb;
  }

  &-red {
    color: #ed3e13;
  }

  &-yellow {
    color: #f69900;
  }

  &-green {
    color: #54be6b;
  }

  &-primary {
    color: #2d8cf0;
  }
}

// 背景颜色
.bg {
  &-pink {
    background-color: #e46bbb;
  }

  &-red {
    background-color: #ed3e13;
  }

  &-yellow {
    background-color: #f69900;
  }

  &-green {
    background-color: #54be6b;
  }

  &-primary {
    background-color: #2d8cf0;
  }
}

// 设置 margin 和 padding class
.setMarginPadding(@num:5,@key:margin) {

  &-@{num} {
      @{key}: ~'@{num}px';
  }

  &-col {
    &-@{num} {
        @{key}: 0 ~'@{num}px';
    }
  }

  &-row {
    &-@{num} {
        @{key}: ~'@{num}px' 0;
    }
  }

  &-t {
    &-@{num} {
        @{key}-top: ~'@{num}px';
    }
  }

  &-r {
    &-@{num} {
        @{key}-right: ~'@{num}px';
    }
  }

  &-b {
    &-@{num} {
        @{key}-bottom: ~'@{num}px';
    }
  }

  &-l {
    &-@{num} {
        @{key}-left: ~'@{num}px';
    }
  }
}

.mapSetMarginPadding(@i:5,@key:margin) when (@i <= 60) {
  .setMarginPadding(@i, @key);
  .mapSetMarginPadding((@i + 1), @key);
}

.m {
  .mapSetMarginPadding(5, margin);
}

.p {
  .mapSetMarginPadding(5, padding);
}

// 底部边框线
.hr {
  border-bottom: 1px solid #e5e5e5;
}

.noselect {

  -webkit-touch-callout: none; /* iOS Safari */

  -webkit-user-select: none; /* Chrome/Safari/Opera */

  -khtml-user-select: none; /* Konqueror */

  -moz-user-select: none; /* Firefox */

  -ms-user-select: none; /* Internet Explorer/Edge */

  user-select: none;
  /* Non-prefixed version, currently

 not supported by any browser */

}

/*******定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {
  width: 4px; /*对垂直流动条有效*/
  height: 4px; /*对水平流动条有效*/
  background-color: transparent;
  -webkit-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
}

::-webkit-scrollbar:hover {
  background-color: transparent;
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 4px rgba(225, 225, 225, 1);
  background-color: #e1e1e1;
}

::-webkit-scrollbar-track:hover {
  //background-color: transparent;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  height: 50px;
  -webkit-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background-color: #d1d1d1;
}

///*定义两端按钮的样式*/
//::-webkit-scrollbar-button {
//  background-color: cyan;
//}
//
///*定义右下角汇合处的样式*/
//::-webkit-scrollbar-corner {
//  background: khaki;
//}

/**
统一table 表格样式，用于数据展示
 */
.md-table {
  width: 100%;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: collapse;

  td {
    border: 1px solid #e8eaec;
    height: 40px;
    padding: 8px 15px;
    word-wrap: break-word;
  }

  th {
    width: 180px;
    padding: 0px 15px;
    background-color: #f8f8f9;
    color: #515a6e;
    text-align: right;
    border: 1px solid #e8eaec;
    font-weight: normal;
  }

  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/*文字加粗*/
.bold {
  font-weight: 600;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

// 图片居中
.img-block {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  img {
    max-width: 100%;
  }
}

.h100 {
  height: 100%;
}

// 文字强制换行
.word-break {
  word-break: break-all;
}

// 文档样式
.word {
  line-height: 1.74;
  letter-spacing: 0.008em;
  color: #404040;
  font-size: 15px;
  padding: 24px;

  .h1 {
    font-size: 36px;
    line-height: 1.389;
    font-weight: 700;
    color: #262626;
  }

  .h3 {
    font-size: 20px;
    line-height: 1.389;
    font-weight: 700;
    color: #262626;
    padding: 15px 0;
  }

  .h4 {
    font-size: 16px;
    line-height: 1.389;
    font-weight: 700;
    color: #262626;
    padding-top: 15px;
  }

  .red {
    color: #ed3e13;
  }
}