自己常用的CSS样式-global.css

/*更新时间 3.0版*/
/*@import "./appConfig/global.css";*/
/*.display{*/
/*display:block; !*转换为块级*!*/
/*display:inline; !*转换为行内*!*/
/*display:inline-block; !* 仍未行内元素，但是可以设置width及height属性等*!*/
/*时间栏的安全区域：height: var(--status-bar-height);*/
/*获取上安全距离： env(safe-area-inset-top)*/
/*获取左安全距离：env(safe-area-inset-left)*/
/*获取右安全距离：env(safe-area-inset-right)*/
/*获取下安全距离：env(safe-area-inset-bottom)*/
/*解决多端tabbar定位：bottom:var(--window-bottom)*/
/*--window-top https://ask.dcloud.net.cn/question/77013*/
/*}*/

/*字母或数字强制换行*/
.a-text-Auto{
    white-space:normal;
    word-break:break-all;
    word-wrap: break-word;
}
/*识别/n*/
.a-auto-br{
    white-space:pre-wrap;
}
/*设置富文本下的image间隙*/
.a-rich /deep/img {
    display: block;
}

/*阻止默认事件*/
/** { touch-action: none; }*/

html,body{
    margin: 0 0 0 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    /*font-family: PingFang-SC-Regular; !*字体*!*/
}

/*<editor-fold desc="去除input的边框">*/
input {
    outline: none;
    border: none;
    height: 100%;
    flex: 1;
    box-sizing: border-box;
}
/*</editor-fold>*/

/*<!--<editor-fold desc="去除a标签的样式">-->*/
a {
    text-decoration: none;
}
/*下划线*/
a:link {
    text-decoration: none;
}
/*正常的未被访问过的链接*/
a:visited {
    text-decoration: none;
}
/*已经访问过的链接*/
a:hover {
    text-decoration: none;
}
/*鼠标划过(停留)*/
a:active {
    text-decoration: none;
}

/*<!--</editor-fold>-->*/

/*<editor-fold desc="元素定位方式">*/
.a-position-sticky{/*粘性布局*/
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.a-position-absolute {
    position: absolute;
}
.a-position-relative {
    position: relative;
}
.a-position-fixed {
    position: fixed !important;
}
/*</editor-fold>*/

/*<editor-fold desc="弹性布局 外加兼容写法">*/
.a-flex {
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-A { /*分散对齐*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-B { /*两端对齐*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    -ms-justify-content:space-between;
    -o-justify-content:space-between;
    justify-content:space-between;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-C { /*居中对齐*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content:center;
    -o-justify-content:center;
    justify-content:center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-R { /*靠右对齐*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-justify-content:flex-end;
    -moz-justify-content:flex-end;
    -ms-justify-content:flex-end;
    -o-justify-content:flex-end;
    justify-content:flex-end;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-column { /**垂直布局*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction:column;
}
.a-flex-column-A { /**垂直 自动间距*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;
}
.a-flex-column-B { /**垂直 两端*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    -ms-justify-content:space-between;
    -o-justify-content:space-between;
    justify-content:space-between;
}
.a-flex-column-C { /**垂直居中，位于容器的中心*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content:center;
    -o-justify-content:center;
    justify-content:center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-no-align { /**不要上下居中*/
    -webkit-box-align: normal!important;
    -ms-flex-align: normal!important;
    -webkit-align-items:normal!important;
    -moz-align-items:normal!important;
    -ms-align-items:normal!important;
    -o-align-items:normal!important;
    align-items: normal !important;
}
.a-end-align { /**直接尾部*/
    align-items:  flex-end !important;
}
.a-flex-wrap { /**换行*/
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap:wrap;
}
.a-flex-1 {
    flex: 1 !important;
}
.a-flex-shrink { /*不要变形*/
    flex-shrink: 0;
}
/*</editor-fold>*/

/*<editor-fold desc="字体颜色">*/
.a-color-w {
    color: white !important;
}
.a-color-green {
    color: green !important;
}
.a-color-red {
    color: red !important;
}
.a-color-hui {
    color: #989898 !important;
}
.a-color-jinse {
    color: gold !important;
}
/*</editor-fold>*/

/*<editor-fold desc="字体大小">*/
.a-font-18 {font-size: 18rpx !important;}
.a-font-20 {font-size: 20rpx !important;}
.a-font-22 {font-size: 22rpx !important;}
.a-font-24 {font-size: 24rpx !important;}
.a-font-26 {font-size: 26rpx !important;}
.a-font-28 {font-size: 28rpx !important;}
.a-font-30 {font-size: 30rpx !important;}
.a-font-32 {font-size: 32rpx !important;}
.a-font-34 {font-size: 34rpx !important;}
.a-font-36 {font-size: 36rpx !important;}
.a-font-38 {font-size: 38rpx !important;}
.a-font-40 {font-size: 40rpx !important;}
.a-font-42 {font-size: 42rpx !important;}
.a-font-44 {font-size: 44rpx !important;}
.a-font-46 {font-size: 46rpx !important;}
.a-font-48 {font-size: 48rpx !important;}
.a-font-50 {font-size: 50rpx !important;}
.a-font-weight {font-weight: bolder;}
/*</editor-fold>*/

/*<editor-fold desc="文字对齐方式">*/
.a-text-L {text-align: left;}
.a-text-R {text-align: right;}
.a-text-C {text-align: center;}
/*</editor-fold>*/

/*<!--<editor-fold desc="基础背景色">-->*/
.a-back-w {background: white!important;}
.a-back-reds {
    background-image: linear-gradient(0deg, #f30000 0%, #ff1800 100%), linear-gradient(#e00f00, #e00f00);
    background-blend-mode: normal, normal;
}
/*<!--</editor-fold>-->*/

/*<editor-fold desc="背景图">*/
.a-maxPic { /*背景图片最大化*/
    background-repeat: no-repeat !important; /*图像的平铺模式*/
    background-size: 100% 100% !important; /*背景图像扩展至足够大（center、cover、100%等）*/
    background-position: 100% 100% !important; /*背景图像的起始位置（center、100%）*/
}
.a-maxPic-auto { /*背景图片居中自动大小*/
    background-repeat: no-repeat !important; /*图像的平铺模式*/
    background-size: cover !important; /*背景图像扩展至足够大（center、cover、contain等）*/
    background-position: center center !important; /*背景图像的起始位置（center、100%）*/
}
/*</editor-fold>*/

/*<editor-fold desc="零散的样式">*/
.a-title-shu { /* |标题左侧的竖线*/
    width: 1px;
    height: 30rpx;
    border-radius: 8rpx;
    background: #9d9d9d;
    margin-right: 10rpx;
}

.a-pageEnd-title {
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    color: #b7b7b7;
    font-size: 24rpx;
}

.a-click:active {
    cursor: pointer !important;
    border: solid 1px rgba(153, 153, 153, 0.54) !important;
    box-shadow: 0 0 5px rgba(153, 153, 153, 0.49) inset !important;
}

.a-margin-LR28 { /*父级框架宽*/
    margin: auto 28rpx;
}

.a-margin-LR20 { /*父级框架宽*/
    margin: auto 20rpx;
}

.a-padding-noBig { /*padding 不撑大*/
    -moz-box-sizing: border-box; /*Firefox3.5+*/
    -webkit-box-sizing: border-box; /*Safari3.2+*/
    -o-box-sizing: border-box; /*Opera9.6*/
    -ms-box-sizing: border-box; /*IE8*/
    box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合度box-sizing的w3c标准语法)*/
}

.a-noShow {
    display: none !important;
    z-index: -1 !important;
}

.a-yinying{
    box-shadow: 6rpx 10rpx 40rpx rgba(0, 0, 0, 0.05);
}
.a-transition-05s{
    transition: 0.5s;
}

.a-noColor{
    /*grayscale(val):val值越大灰度就越深*/
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

/*</editor-fold>*/

/*<editor-fold desc="按钮样式">*/
.a-appBtn-frame{
    /*height: 300rpx;*/
    width: 750rpx;
    padding: 40rpx 60rpx 60rpx 60rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: 0 0 10rpx 10rpx #e2e2e2;
    background: white;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
}
.a-appBtn-frame .a-appBtn{
    margin:0 auto auto auto!important;
}
.a-appBtn {
    font-size: 32rpx;
    width: 622rpx;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 20rpx;
    text-align: center;
    cursor: pointer;
    margin: 60rpx auto auto auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #00479c;
    color: white;
}
.a-appBtn:active {
    cursor: pointer !important;
    border: solid 1px rgba(0, 71, 156, 0.44) !important;
    box-shadow: 0 0 5px rgba(0, 71, 156, 0.44) inset !important;
}
/*</editor-fold>*/

/*<editor-fold desc="超过部分，省略号显示">*/
.a-onLine { /*单行，禁止换行*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /*禁止换行*/
}
.a-onLine-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;/*限制行数为2行*/
    line-clamp: 2;/*限制行数为2行*/
}
.a-onLine-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;/*限制行数为2行*/
    line-clamp: 4;/*限制行数为2行*/
}
.a-onLine-6{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;/*限制行数为2行*/
    line-clamp: 6;/*限制行数为2行*/
}
/*</editor-fold>*/

/*<editor-fold desc="过渡动画 view">*/
.a-transitionOpacity{
    animation: 0.5s transitionOpacity ;
}
@keyframes transitionOpacity{
    0%{opacity:0;}
    100%{opacity:1;}
}
/*</editor-fold>*/

/*<editor-fold desc="隐藏滚动条">*/
.a-scrollNoShow div::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}
.a-scrollNoShow div::-webkit-scrollbar-track {
    background-color: transparent !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.a-scrollNoShow div::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0) !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
/*</editor-fold>*/

/*<editor-fold desc="美化滚动条">*/

/*滚动条的宽度*/
.a-min-scrollbar::-webkit-scrollbar {
    width:4px;
    height:4px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
.a-min-scrollbar::-webkit-scrollbar-track {
    width: 4px;
    background-color: #d0d0d0;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}

/*滚动条的设置*/
.a-min-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    background-clip:padding-box;
    min-height:28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}
/*滚动条移上去的背景*/

.a-min-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #9f9f9f;
}
/*===============不显示scrollbar==============*/

.a-scrollNoBackground::-webkit-scrollbar-track {
    background: rgba(0,0,0,0)!important;
}
.a-scrollNoBackground::-webkit-scrollbar-thumb {
    background:rgba(0,0,0,0)!important;
}

.a-scrollNoBackground::-webkit-scrollbar-thumb:hover{
    background:rgba(0,0,0,0)!important;
}
/*</editor-fold>*/

/*<editor-fold desc="选择栏底部的下划线 新">*/
.a-select-this-item{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-size: 40rpx!important;
    font-weight: bold;
}
.a-select-this-item:before {
    content: " ";
    position: absolute;
    top: auto;
    bottom: 8rpx;
    width: 22rpx;
    height: 10rpx;
    background:#C22221;
    border-radius: 4px;
    transform-origin: left;
    animation:transform0to1 1s ease;
}
@keyframes transform0to1 {
    0% {
        transform: scale3d(0, 1, 1);
        webkit-transform: translate3d(0,1,1);
        -moz-transform: translate3d(0,1,1);
        -ms-transform: translate3d(0,1,1);
        -o-transform: translate3d(0,1,1);
    }
    100% {
        transform: scale3d(1, 1, 1);
        webkit-transform: translate3d(1,1,1);
        -moz-transform: translate3d(1,1,1);
        -ms-transform: translate3d(1,1,1);
        -o-transform: translate3d(1,1,1);
    }
}
/*</editor-fold>*/

/*<editor-fold desc="无样式button (用于伪submit)">*/
.a-no-button {
    display: block;
    margin: 0;
    padding: 0;
    line-height: normal;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-size: unset;
    text-align: unset;
    overflow: visible;
    color: inherit;
}
.a-no-button:after {
    content: none;
    border: none;
}
/*</editor-fold>*/

/*<editor-fold desc="20201127 是否允许选择文本">*/
/*none：文本不能被选择*/
.a-textCopy-none{
    /* Keyword values */
    user-select: none!important;
    /* Mozilla-specific values */
    -moz-user-select: none!important;
    /* WebKit-specific values */
    -webkit-user-select: none!important;
    /* Microsoft-specific values */
    -ms-user-select: none!important;
}
/*text：可以选择文本*/
.a-textCopy-text{
    /* Keyword values */
    user-select: text!important;
    /* Mozilla-specific values */
    -moz-user-select: text!important;
    /* WebKit-specific values */
    -webkit-user-select: text!important;
    /* Microsoft-specific values */
    -ms-user-select: text!important;
}
/*all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。*/
.a-textCopy-all{
    /* Keyword values */
    user-select: all!important;
    /* Mozilla-specific values */
    -moz-user-select: all!important;
    /* WebKit-specific values */
    -webkit-user-select: all!important;
    /* Microsoft-specific values */
    -ms-user-select: all!important;
}
/*element：可以选择文本，但选择范围受元素边界的约束*/
.a-textCopy-element{
    /* Keyword values */
    user-select: element!important;
    /* Mozilla-specific values */
    -moz-user-select: element!important;
    /* WebKit-specific values */
    -webkit-user-select: element!important;
    /* Microsoft-specific values */
    -ms-user-select: element!important;
}
/*</editor-fold>*/