334 lines
4.1 KiB
Plaintext
334 lines
4.1 KiB
Plaintext
::after,
|
||
::before,
|
||
* {
|
||
word-wrap: break-word;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: #000;
|
||
}
|
||
|
||
.mx-auto {
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
.bs {
|
||
color: #fff;
|
||
}
|
||
|
||
.f(@e, @u) {
|
||
font-size: unit(@e, @u);
|
||
}
|
||
|
||
.r(@e, @u) {
|
||
border-radius: unit(@e, @u);
|
||
}
|
||
|
||
.mt(@e, @u) {
|
||
margin-top: unit(@e, @u);
|
||
}
|
||
|
||
.mb(@e, @u) {
|
||
margin-bottom: unit(@e, @u);
|
||
}
|
||
|
||
.b_k {
|
||
background: #fff;
|
||
}
|
||
|
||
.b {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.y50 {
|
||
border-radius: 50%;
|
||
object-fit: cover !important;
|
||
}
|
||
|
||
.w(@e, @u) {
|
||
width: unit(@e, @u);
|
||
}
|
||
|
||
.w {
|
||
width: 100%;
|
||
}
|
||
|
||
.h {
|
||
height: 100%;
|
||
}
|
||
|
||
.w100 {
|
||
width: 100% !important;
|
||
|
||
img {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
|
||
.p-r {
|
||
position: relative;
|
||
}
|
||
|
||
.p-a {
|
||
position: absolute;
|
||
}
|
||
|
||
.p-f {
|
||
position: fixed;
|
||
}
|
||
|
||
.div_chao {
|
||
white-space: nowrap;
|
||
overflow-x: auto;
|
||
|
||
.inline {
|
||
display: inline-block !important;
|
||
}
|
||
}
|
||
|
||
.dis {
|
||
display: none;
|
||
}
|
||
|
||
.dis-l {
|
||
display: block;
|
||
}
|
||
|
||
.songti {
|
||
font-family: 宋体;
|
||
}
|
||
|
||
.b_l {
|
||
float: left;
|
||
}
|
||
|
||
.b_r {
|
||
float: right;
|
||
}
|
||
|
||
.r {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.b_l_w {
|
||
width: 100%;
|
||
float: left;
|
||
}
|
||
|
||
.w1 {
|
||
width: 100%;
|
||
float: left;
|
||
}
|
||
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.text-left {
|
||
text-align: left;
|
||
}
|
||
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.text-hide(@line) {
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box !important;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: @line;
|
||
}
|
||
|
||
.text-hide-1 {
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.gray(@a, @b) {
|
||
filter: grayscale(@a) invert(@b);
|
||
}
|
||
|
||
.brightness(@a, @b) {
|
||
filter: brightness(@a) invert(@b);
|
||
}
|
||
|
||
/*伸缩盒子模型*/
|
||
.box {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
/*从左至右*/
|
||
|
||
.box-lr {
|
||
flex-direction: row;
|
||
}
|
||
|
||
|
||
/*从右至左*/
|
||
|
||
.box-rl {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
|
||
/*从上至下*/
|
||
|
||
.box-tb {
|
||
flex-direction: column;
|
||
}
|
||
|
||
|
||
/*从下至上*/
|
||
|
||
.box-bt {
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
|
||
/*主轴居中*/
|
||
|
||
.box-pack-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.middle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
/*justify-content: space-evenly;*/
|
||
}
|
||
|
||
.middle::before,
|
||
.middle::after {
|
||
content: '';
|
||
display: block;
|
||
}
|
||
|
||
/*主轴居左*/
|
||
|
||
.box-pack-start {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
|
||
/*主轴居右*/
|
||
|
||
.box-pack-end {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
|
||
/*主轴左右不留白*/
|
||
|
||
.box-pack-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
|
||
/*主轴左右留白*/
|
||
|
||
.box-pack-around {
|
||
justify-content: space-around;
|
||
}
|
||
|
||
/*自动间隔，每个元素的间隔相等*/
|
||
|
||
.box-middle {
|
||
justify-content: space-evenly;
|
||
}
|
||
|
||
/*交叉轴居中对齐*/
|
||
|
||
.box-align-center {
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/*交叉轴居左对齐*/
|
||
|
||
.box-align-start {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
/*交叉轴居右对齐*/
|
||
|
||
.box-align-end {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
|
||
/**单个指定的子元素自定义对齐方式，可以不同于其他子元素对齐方式**/
|
||
|
||
|
||
/**指定子元素居中对齐**/
|
||
|
||
.self-align-center {
|
||
align-self: center;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
|
||
/**指定子元素顶部对齐**/
|
||
|
||
.self-align-start {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
|
||
/**指定子元素底部对齐**/
|
||
|
||
.self-align-end {
|
||
align-self: flex-end;
|
||
}
|
||
|
||
|
||
/**指定子元素拉伸**/
|
||
|
||
.self-align-stretch {
|
||
align-self: stretch;
|
||
}
|
||
|
||
|
||
/**子元素换行**/
|
||
|
||
.box-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
|
||
/**子元素不换行**/
|
||
|
||
.box-nowrap {
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
|
||
/*允许子元素伸展（1倍）*/
|
||
|
||
.flex {
|
||
flex-grow: 1;
|
||
/*如果值是2 那么当前元素就是其他元素宽的2倍了*/
|
||
}
|
||
|
||
/* flex:1 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况：
|
||
flex-grow:0表示不会拉伸 flex-shrink:1表示 可以缩小
|
||
flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto*/
|
||
|
||
/*允许子元素收缩(1倍)*/
|
||
|
||
.shrink {
|
||
flex-shrink: 1;
|
||
}
|
||
|
||
/**水平居中*/
|
||
|
||
.box-center-center {
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
} |