common.css

Posted 2022-10-15 黑胡子大叔的小屋

通用样式

• rem

rem

.flex-row
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

.flex-column
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

.flex-row, .flex-column
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;


.flex-between 
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;


.flex-1 
    -webkit-flex-grow: 1;
    flex-grow: 1;


.flex-shrink-0 
    -webkit-flex-shrink: 0;
    flex-shrink: 0;


.flex-start-h 
    -webkit-justify-content: flex-start;
    justify-content: flex-start;


.flex-start-v 
    -webkit-align-items: flex-start;
    align-items: flex-start;


/*font-size*/
.fz-12
    font-size: 1.2rem;

.fz-13
    font-size: 1.3rem;

.fz-14
    font-size: 1.4rem;

.fz-15
    font-size: 1.5rem;

.fz-16
    font-size: 1.6rem;

.fz-18
    font-size: 1.8rem;

.fz-20
    font-size: 2rem;

.fz-22
    font-size: 2.2rem;

.fz-24
    font-size: 2.4rem;

.fz-26
    font-size: 2.6rem;

.fz-28
    font-size: 2.8rem;

.fz-30
    font-size: 3rem;

.fz-32
    font-size: 3.2rem;

.fz-40
    font-size: 4rem;

.fz-50
    font-size: 5rem;


.font-bold 
    font-weight: 700;


/*color*/
.color-main 
    color: #1DA16F;

.color-white 
    color: white;

.color-red 
    color: #ff0000;

.color-black
    color: #000000;

.color-grey
    color: #73817C;

.color-green
    color: #00A854;

.color-blue
    color: #399DFF;

.color-base 
    color: #313B37;

.color-33
    color: #333333;

.color-66
    color: #666666;

.color-99
    color: #999;


/*background-color*/
.bg-white 
    background-color: white;


/** 基础通用 **/
.pt5 
    padding-top: 0.5rem;


.pr5 
    padding-right: 0.5rem;


.pb5 
    padding-bottom: 0.5rem;


.mt5 
    margin-top: 0.5rem;


.mr5 
    margin-right: 0.5rem;


.mb5 
    margin-bottom: 0.5rem;


.mb8 
    margin-bottom: 0.5rem;


.ml5 
    margin-left: 0.5rem;


.ml10 
    margin-left: 1rem;


.ml15 
    margin-left: 1.5rem;


.ml35 
    margin-left: 3.5rem;


.mt10 
    margin-top: 1rem;


.mt15 
    margin-top: 1.5rem;


.mt30 
    margin-top: 3rem;


.mt35 
    margin-top: 3.5rem;


.mt40 
    margin-top: 4rem;


.mt50 
    margin-top: 5rem;


.mt60 
    margin-top: 6rem;


.mr10 
    margin-right: 1rem;


.mr15 
    margin-right: 1.5rem;


.mb10 
    margin-bottom: 1rem;


.mb15 
    margin-bottom: 1.5rem;


.mt20 
    margin-top: 2rem;


.mr20 
    margin-right: 2rem;


.mb20 
    margin-bottom: 2rem;


.m20 
    margin-left: 2rem;


.text-center 
    text-align: center;


.el-dialog:not(.is-fullscreen) 
    margin-top: 6vh !important;


/** 表单布局 **/
.form-header 
    font-size: 1.5rem;
    color: #6379bb;
    border-bottom: 1px solid #ddd;
    margin: 0.8rem 1rem 2.5rem 1rem;
    padding-bottom: 0.5rem;


/** 表格布局 **/
.pagination-container 
    position: relative;
    height: 2.5rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 2rem !important;


/* tree border */
.tree-border 
    margin-top: 0.5rem;
    border: 0.1rem solid #e5e6e7;
    background: #FFFFFF none;
    -webkit-border-radius: 0.4rem;
    -moz-border-radius: 0.4rem;
    border-radius: 0.4rem;


.pagination-container .el-pagination 
    right: 0;
    position: absolute;


.el-table .fixed-width .el-button--mini 
    color: #409EFF;
    padding-left: 0;
    padding-right: 0;
    width: inherit;


.el-tree-node__content > .el-checkbox 
    margin-right: 0.8rem;


.list-group-striped > .list-group-item 
    border-left: 0;
    border-right: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;


.list-group 
    padding-left: 0;
    list-style: none;


.list-group-item 
    border-bottom: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 1.1rem 0px;
    font-size: 1.3rem;


.pull-right 
    float: right !important;


.el-card__header 
    padding: 1.4rem 1.5rem 0.7rem;
    min-height: 4rem;


.el-card__body 
    padding: 1.5rem 2rem 2rem 2rem;


.card-box 
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-bottom: 1rem;


/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active 
    background: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;


.el-button--cyan:focus,
.el-button--cyan:hover 
    background: #48D1CC;
    border-color: #48D1CC;
    color: #FFFFFF;


.el-button--cyan 
    background-color: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;


/* text color */
.text-navy 
    color: #1ab394;


.text-primary 
    color: inherit;


.text-success 
    color: #1c84c6;


.text-info 
    color: #23c6c8;


.text-warning 
    color: #f8ac59;


.text-danger 
    color: #ed5565;


.text-muted 
    color: #888888;


/* image */
.img-circle 
    border-radius: 50%;


.img-lg 
    width: 12rem;
    height: 12rem;


.avatar-upload-preview 
    position: absolute;
    top: 50%;
    -webkit-transform: translate(50%, -50%);
    -moz-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    -o-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    width: 18rem;
    height: 18rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 4px #ccc;
    -moz-box-shadow: 0 0 4px #ccc;
    -o-box-shadow: 0 0 4px #ccc;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;


/* radio */
.radio-box
    display: inline-block;
    position: relative;
    height: 2rem;
    line-height: 2rem;
    margin-right: 0.5rem;

.radio 
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
    cursor: pointer;
    background-color: #30C0FF;
    border: 1px solid #cccccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

.input-radio 
    display: inline-block;
    position: absolute;
    opacity: 0;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    left: 0;
    outline: none;
    -webkit-appearance: none;

.on 



/* 拖拽列样式 */
.sortable-ghost 
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;


.top-right-btn 
    position: relative;
    float: right;


.line-clamp1, .line-clamp2, .line-clamp3, .line-clamp4 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;

.line-clamp1 
    -webkit-line-clamp: 1;

.line-clamp3 
    -webkit-line-clamp: 3;

.line-clamp2 
    -webkit-line-clamp: 2;

.line-clamp4 
    -webkit-line-clamp: 4;


/*滚动条样式*/
.scrollbar::-webkit-scrollbar 
    /*滚动条整体样式*/
    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;

.scrollbar-h::-webkit-scrollbar 
    width : 1px;
    height: 5px;

.scrollbar::-webkit-scrollbar-thumb,
.scrollbar-h::-webkit-scrollbar-thumb 
    /*滚动条里面小方块*/
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius   : 1rem;
    background-color: #999999;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );

.scrollbar::-webkit-scrollbar-track,
.scrollbar-h::-webkit-scrollbar-track 
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;


.home-warp 
    width: 100%;
    height: 100%;
    background-image: url("../assets/home/ic_home_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;


/*header*/
.wrap-header 
    height: 12rem;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg,#ffffff, #eefff9);
    box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.10);

.wrap-header .wrap-header-title 
    width: 50rem;
    height: 5.6rem;
    margin: 0 5rem;
    background-image: url("../assets/home/ic_home_title.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

.wrap-header .wrap-header-date-icon 
    width: 3rem;
    height: 3rem;

.wrap-header .wrap-header-date 
    color: #596661;

.wrap-header .wrap-header-right 
    width: 200px;
    height: 68px;
    background-image: url("../assets/common/ic_exit.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5rem;


/*center*/
.wrap-center 
    height: calc(100% - 22rem);
    width: 100%;
    padding: 0 5rem;
    box-sizing: border-box;

.wrap-center .handle-block 
    width: 37rem;
    height: 44.8rem;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0.5rem 0.5rem 2rem 0 rgba(54,125,98,0.10);

.wrap-center .handle-block .handle-block-icon 
    width: 25rem;
    height: 25rem;

.wrap-center .handle-block .handle-block-title
    font-size: 5rem;
    font-weight: 700;
    color: #313b37;
    margin-top: 5rem;

.wrap-center .handle-block:last-child 
    margin-left: 20rem;


/*footer*/
.wrap-footer 
    height: 10rem;
    width: 100%;
    padding: 0 5rem;
    box-sizing: border-box;
    background: linear-gradient(180deg,#ffffff, #eefff9);
    box-shadow: 0px -1rem 1.5rem 0px rgba(0,0,0,0.05);

.wrap-footer .wrap-footer-title, .wrap-footer-num 
    color: #596661;

.wrap-footer .wrap-footer-icon 
    width: 3rem;
    height: 3rem;


.step-button-pre, .step-button-next 
    margin: 0 auto;
    display: inline-block;
    min-width: 14rem;
    height: 4.6rem;
    padding: 0 2rem;
    line-height: 4.6rem;
    border-radius: 1rem;
    text-align: center;
    cursor: pointer;
    color: white;
    font-size: 1.8rem;
    box-sizing: border-box;

.step-button-pre
    background: #eafff7;
    color: #1DA16F;
    border: 0.3rem solid #1da16f;
    line-height: 4rem;
    margin-left: 2rem;

.step-button-next 
    background: linear-gradient(90deg,#51cf95, #0ba65a);
    margin-left: 2rem;