xinjiang/SGGL/FineUIPro.Web/res/homecss/layout.css

/* 模块框 */
.site_500 {
    height: 100%;
    width: 6.25rem;
    background: linear-gradient(183deg, rgba(1, 32, 56, 0) 0%, rgba(10, 58, 92, 0.7) 100%);
    border: 2px solid;
    border-image: linear-gradient(180deg, rgba(78, 167, 203, 0), rgba(78, 167, 203, 1)) 1 2;
    border-top: none;
}

.site_500>h2 {
    height: 0.4125rem;
    background-image: url(../images/site_tit_500.png);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.625rem;
}

.site_460>h2>span:nth-of-type(1),.site_500>h2>span:nth-of-type(1) {
    font-weight: bold;
    font-size: 0.2rem;
    line-height: 0.2rem;

}
.site_460{
    height: 100%;
    width: 4.7125rem;
    background: linear-gradient(183deg, rgba(1, 32, 56, 0) 0%, rgba(10, 58, 92, 0.7) 100%);
    border: 2px solid;
    border-image: linear-gradient(180deg, rgba(78, 167, 203, 0), rgba(78, 167, 203, 1)) 1 2;
    border-top: none;
}
.site_460>h2{
    height: 0.4125rem;
    background-image: url(../images/site_tit_382.png);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.625rem;
}
.site_288{
    height: 100%;
    width: 3.6rem;
    background: linear-gradient(183deg, rgba(1, 32, 56, 0) 0%, rgba(10, 58, 92, 0.7) 100%);
    border: 2px solid;
    border-image: linear-gradient(180deg, rgba(78, 167, 203, 0), rgba(78, 167, 203, 1)) 1 2;
    border-top: none;
}
.site_288>h2{
    height: 0.4125rem;
    background-image: url(../images/site_tit_288.png);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.625rem;
    font-size: 0.2rem;
}
.site_768{
    height: 100%;
    width: 9.6rem;
    background: linear-gradient(183deg, rgba(1, 32, 56, 0) 0%, rgba(10, 58, 92, 0.7) 100%);
    border: 2px solid;
    border-image: linear-gradient(180deg, rgba(78, 167, 203, 0), rgba(78, 167, 203, 1)) 1 2;
    border-top: none;
}
.site_768>h2{
    height: 0.4125rem;
    background-image: url(../images/site_tit_768.png);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.625rem;
    font-size: 0.2rem;
}
.site_content {
    padding: 0.025rem;
    height: calc(100% - 0.4125rem);
}

.box_768{
    width: 9.6rem;
    padding: 0.25rem;
    box-shadow: inset 0px 0px 13px 0px rgba(66,155,211,0.8);
}
.box_768>h2{
    height: 0.4125rem;
    background-image: url(../images/site_tit_768.png);
    display: flex;
    font-size: 0.2rem;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.625rem;
    position: relative;
}
.box_768>.box_content{
    height: calc(100% - 0.4125rem);
}
/* tabs 切换 */
.tabs{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0.05rem 0;
}
.tabs>span{
    padding: 0.0625rem 0.125rem;
    font-size: 0.2rem;
    color: #ffffff;
}
.tabs>.checked{
    background: linear-gradient( 180deg, rgba(38,144,181,0.1) 0%, #00A5DB 100%);
}

/* 总布局 */
.container {
    width: 24rem;
    height: 12.5rem;
    display: grid;
    grid-template-columns: 6.25rem 9.6rem 6.25rem;
    column-gap: 0.45rem;
    padding: 0.15rem 0.5rem 0.7rem;
}

.center{
    width: 100%;
}
/* 渐变自提提样式 */
/* 白定蓝底 */
.gradient_white_blue {
    font-weight: bold;
    background: linear-gradient(180deg, #ffffff 0%, #8CEEFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 白顶黄底 */
.gradient_white_yellow {
    font-weight: bold;
    background: linear-gradient(180deg, #ffffff 0%, #FFEB3B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 白定深绿色底 */
.gradient_white_bottlegreen {
    font-weight: bold;
    background: linear-gradient(180deg, #FFFFFF 0%, #05937B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/*  */
.gradient_white_red{
    font-weight: bold;
    background: linear-gradient(180deg, #FFFFFF 0%, #FC6D49  100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* margin */
.margin_left_10 {
    margin-left: 0.125rem;
}

.margin_right_10 {
    margin-right: 0.125rem;
}
.margin_top_10 {
    margin-top: 0.125rem;
}
/* flex 布局 */
.flex_row_start_center {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.flex_row_end_center {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.flex_row_center_center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.flex_row_start_start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex_row_end_start {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}
.flex_row_between_center {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.flex_row_between_end {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.flex_column_start_start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex_column_between_start{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.flex_column_between_center{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.flex_column_between_end{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
}
.flex_column_center_center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex_column_center_start{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.progress {
    width: 100%;
    height: 0.075rem;
    position: relative;
    background-color: #173A55;
}

.progress>.propress_bar {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #1478AD 0%, #34ECFE 100%);
}

.navs{
    width: 100%;
    height: 0.375rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.navs>div{
    text-align: center;
    line-height: 0.375rem;
}
.navs>div>span{
    font-weight: bold;
    background: linear-gradient(180deg, #ffffff 0%, #8CEEFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.navs>div:nth-child(1){
    height: 0.375rem;
    width: 2.45rem;
    background-image: url(../images/m05a.png);
}
.navs>div:nth-child(2){
    height: 0.375rem;
    width: 2.25rem;
    background-image: url(../images/m06a.png);
}
.navs>div:nth-child(3){
    height: 0.375rem;
    width: 2.45rem;
    background-image: url(../images/m07a.png);
}


.navs>.checked>span{
    font-weight: bold;
    background: linear-gradient(180deg, #ffffff 0%, #FFEB3B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.navs>.checked:nth-child(1){
    height: 0.375rem;
    width: 2.45rem;
    background-image: url(../images/m05b.png);
}
.navs>.checked:nth-child(2){
    height: 0.375rem;
    width: 2.25rem;
    background-image: url(../images/m06b.png);
}
.navs>.checked:nth-child(3){
    height: 0.375rem;
    width: 2.45rem;
    background-image: url(../images/m07b.png);
}


.tit{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.tit>span{
    margin-left: 0.125rem;
    font-size: 0.175rem;
    color: #FFFFFF;
}
.tit::before{
    content: '';
    width: 0.05rem;
    height: 0.175rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FCC349 100%);
}