前端base级响应式专用样式

前端base级响应式专用样式

概述

base级样式，即项目切换的时候，这里的内容不再随项目的主题配色圆角直角等改变。

初始化

常用操作

裁切

响应式

.hand{
    cursor: pointer;
}
.default{
    cursor: default;
}
.bor,.border {/* 测试用*/
    border: 1px solid red;
}
.mb10{
	margin-bottom: 10px!important;
}
.ml10{
	margin-left: 10px!important;
}
.ml20{
	margin-left: 20px!important;
}
.jCenter{
	display: flex;
	justify-content: center;
}
.hide{
  display:none;
}
.hideI{
  display:none!impportant;
}

/* wap */
@media (max-width:750px) {
    .xs-hide {
        display: none;
    }

    .xs-hideI {
        display: none !important;
    }

    .xs-show {
        display: block;
    }

    .xs-showI {
        display: block !important;
    }

    /* wap 端加回车，即显示为多行 */
    .xs-br {
        display: block;
    }

    /* wap端居中 */
    .xs-center {
        text-align: center;
    }
}

/*  web */
@media (min-width:768px) {
    .sm-hide {
        display: none;
    }

    .sm-hideI {
        display: none !important;
    }

    .sm-show {
        display: block;
    }

    /* web 端加回车，即显示为多行 */
    .sm-br {
        display: block;
    }

    /* wap端居中 */
    .sm-center {
        text-align: center;
    }
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}

/* 单行裁切 */
.text_e-1 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
}

/* 多行裁切 */
.text_e {
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    display: inline-block;
    display: -webkit-box;
    -webkit-box-orient: vertical;

    &-2 {
        -webkit-line-clamp: 2;
    }

    &-3 {
        -webkit-line-clamp: 3;
    }

    &-4 {
        -webkit-line-clamp: 4;
    }

    &-5 {
        -webkit-line-clamp: 5;
    }
    &-6 {
        -webkit-line-clamp: 6;
    }
    &-7 {
        -webkit-line-clamp: 7;
    }
    &-8 {
        -webkit-line-clamp: 8;
    }
}
/* 必填 */
.required{
    &:before{
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
    }
}