xtu_mall/public/assets/css/frontend.css

@import url("../libs/layui/css/layui.css");
@import url("../libs/toastr/toastr.min.css");
@import url("../fonts/iconfont/iconfont.css");
@import url("./header.css");

/*登录*/
#mydiv{padding-top: 5%;}
.login-main {margin: 0 auto;border: 1px solid #ddd;background: #fff;padding: 0 20px; width: 400px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; 
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    -webkit-box-shadow: 0 26px 50px -20px rgba(0,36,100,0.3);-moz-box-shadow: 0 26px 50px -20px rgba(0,36,100,0.3);box-shadow: 0 26px 50px -20px rgba(0,36,100,0.3);}
.login-main .layui-elip {margin-top: 10%;height: 35px; line-height: 35px; font-size: 30px; font-weight: 100; text-align: center; }
.login-main .layui-elip span.version {font-size: 12px; }
.login-main form .layui-input-inline,.login-main form .layui-input-inline button{width: 100%; }
.login-main form .verify-box input {display: inline-block; width: 60%; }
.login-main .layui-elip{margin-bottom: 15px; }
.login-main form .verify-box img {display: inline-block; margin-left: 2%; width: 36%; height: 38px; }
.lay-user-jump-change {float: right; }
.lay-link {color: #1e9fff!important; }

.lay-user-login-other>* {display: inline-block; vertical-align: middle; margin-right: 10px; font-size: 14px }
.lay-user-login-other {font-size: 0; line-height: 38px; }
.lay-user-login-other .layui-icon {position: relative; top: 2px; font-size: 26px }
.lay-user-login-other a:hover {opacity: .8 }

@media screen and (max-width: 450px) {
    .layui-form-item .layui-input-inline {
        left: 0;
        margin: 0 0 10px 0px;
    }
    .login-main .layui-elip {
        font-size: 20px;
    }
    .login-main {
        border:none;
        width: 90%;
        padding:15px;
    }
}

/*公共*/
.text-start {text-align: left !important;}
.text-end {text-align: right !important;}
.text-center {text-align: center !important; }

.float-start {float: left !important;}
.float-end {float: right !important;}
.float-none {float: none !important;}

.position-static {position: static !important;}
.position-relative {position: relative !important;}
.position-absolute {position: absolute !important;}
.position-fixed {position: fixed !important;}
.position-sticky {position: -webkit-sticky !important;position: sticky !important;}

.d-inline {display: inline !important;}
.d-inline-block {display: inline-block !important;}
.d-block {display: block !important;}
.d-none {display: none !important;}
.d-flex {display: flex !important;}
.d-inline-flex {display: inline-flex !important;}

.flex-fill {flex: 1 1 auto !important; }
.flex-row {flex-direction: row !important; }
.flex-column {flex-direction: column !important; }
.flex-row-reverse {flex-direction: row-reverse !important; }
.flex-column-reverse {flex-direction: column-reverse !important; }
.flex-grow-0 {flex-grow: 0 !important; }
.flex-grow-1 {flex-grow: 1 !important; }
.flex-shrink-0 {flex-shrink: 0 !important; }
.flex-shrink-1 {flex-shrink: 1 !important; }
.flex-wrap {flex-wrap: wrap !important; }
.flex-nowrap {flex-wrap: nowrap !important; }
.flex-wrap-reverse {flex-wrap: wrap-reverse !important; }
.justify-content-start {justify-content: flex-start !important; }
.justify-content-end {justify-content: flex-end !important; }
.justify-content-center {justify-content: center !important; }
.justify-content-between {justify-content: space-between !important; }
.justify-content-around {justify-content: space-around !important; }
.justify-content-evenly {justify-content: space-evenly !important; }
.align-items-start {align-items: flex-start !important; }
.align-items-end {align-items: flex-end !important; }
.align-items-center {align-items: center !important; }
.align-items-baseline {align-items: baseline !important; }
.align-items-stretch {align-items: stretch !important; }
.align-content-start {align-content: flex-start !important; }
.align-content-end {align-content: flex-end !important; }
.align-content-center {align-content: center !important; }
.align-content-between {align-content: space-between !important; }
.align-content-around {align-content: space-around !important; }
.align-content-stretch {align-content: stretch !important; }
.align-self-auto {align-self: auto !important; }
.align-self-start {align-self: flex-start !important; }
.align-self-end {align-self: flex-end !important; }
.align-self-center {align-self: center !important; }
.align-self-baseline {align-self: baseline !important; }
.align-self-stretch {align-self: stretch !important; }

.m-0 {margin: 0 !important; }
.m-1 {margin: 4px !important; }
.m-2 {margin: 8px !important; }
.m-3 {margin: 16px !important; }
.m-4 {margin: 24px !important; }
.m-5 {margin: 48px !important; }
.m-auto {margin: auto !important; }

.mx-0 {margin-right: 0 !important; margin-left: 0 !important; }
.mx-1 {margin-right: 4px !important; margin-left: 4px !important; }
.mx-2 {margin-right: 8px !important; margin-left: 8px !important; }
.mx-3 {margin-right: 16px !important; margin-left: 16px !important; }
.mx-4 {margin-right: 24px !important; margin-left: 24px !important; }
.mx-5 {margin-right: 48px !important; margin-left: 48px !important; }
.mx-auto {margin-right: auto !important; margin-left: auto !important; }

.my-0 {margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 {margin-top: 4px !important; margin-bottom: 4px !important; }
.my-2 {margin-top: 8px !important; margin-bottom: 8px !important; }
.my-3 {margin-top: 16px !important; margin-bottom: 16px !important; }
.my-4 {margin-top: 24px !important; margin-bottom: 24px !important; }
.my-5 {margin-top: 48px !important; margin-bottom: 48px !important; }
.my-auto {margin-top: auto !important; margin-bottom: auto !important; }

.mt-0 {margin-top: 0 !important; }
.mt-1 {margin-top: 4px !important; }
.mt-2 {margin-top: 8px !important; }
.mt-3 {margin-top: 16px !important; }
.mt-4 {margin-top: 24px !important; }
.mt-5 {margin-top: 48px !important; }
.mt-auto {margin-top: auto !important; }

.me-0 {margin-right: 0 !important; }
.me-1 {margin-right: 4px !important; }
.me-2 {margin-right: 8px !important; }
.me-3 {margin-right: 16px !important; }
.me-4 {margin-right: 24px !important; }
.me-5 {margin-right: 48px !important; }
.me-auto {margin-right: auto !important; }

.mb-0 {margin-bottom: 0 !important; }
.mb-1 {margin-bottom: 4px !important; }
.mb-2 {margin-bottom: 8px !important; }
.mb-3 {margin-bottom: 16px !important; }
.mb-4 {margin-bottom: 24px !important; }
.mb-5 {margin-bottom: 48px !important; }
.mb-auto {margin-bottom: auto !important; }

.ms-0 {margin-left: 0 !important; }
.ms-1 {margin-left: 4px !important; }
.ms-2 {margin-left: 8px !important; }
.ms-3 {margin-left: 16px !important; }
.ms-4 {margin-left: 24px !important; }
.ms-5 {margin-left: 48px !important; }
.ms-auto {margin-left: auto !important; }

.p-0 {padding: 0 !important; }
.p-1 {padding: 4px !important; }
.p-2 {padding: 8px !important; }
.p-3 {padding: 16px !important; }
.p-4 {padding: 24px !important; }
.p-5 {padding: 48px !important; }

.px-0 {padding-right: 0 !important; padding-left: 0 !important; }
.px-1 {padding-right: 4px !important; padding-left: 4px !important; }
.px-2 {padding-right: 8px !important; padding-left: 8px !important; }
.px-3 {padding-right: 16px !important; padding-left: 16px !important; }
.px-4 {padding-right: 24px !important; padding-left: 24px !important; }
.px-5 {padding-right: 48px !important; padding-left: 48px !important; }

.py-0 {padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 {padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 {padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 {padding-top: 16px !important; padding-bottom: 16px !important; }
.py-4 {padding-top: 24px !important; padding-bottom: 24px !important; }
.py-5 {padding-top: 48px !important; padding-bottom: 48px !important; }

.pt-0 {padding-top: 0 !important; }
.pt-1 {padding-top: 4px !important; }
.pt-2 {padding-top: 8px !important; }
.pt-3 {padding-top: 16px !important; }
.pt-4 {padding-top: 24px !important; }
.pt-5 {padding-top: 48px !important; }

.pe-0 {padding-right: 0 !important; }
.pe-1 {padding-right: 4px !important; }
.pe-2 {padding-right: 8px !important; }
.pe-3 {padding-right: 16px !important; }
.pe-4 {padding-right: 24px !important; }
.pe-5 {padding-right: 48px !important; }

.pb-0 {padding-bottom: 0 !important; }
.pb-1 {padding-bottom: 4px !important; }
.pb-2 {padding-bottom: 8px !important; }
.pb-3 {padding-bottom: 16px !important; }
.pb-4 {padding-bottom: 24px !important; }
.pb-5 {padding-bottom: 48px !important; }

.ps-0 {padding-left: 0 !important; }
.ps-1 {padding-left: 4px !important; }
.ps-2 {padding-left: 8px !important; }
.ps-3 {padding-left: 16px !important; }
.ps-4 {padding-left: 24px !important; }
.ps-5 {padding-left: 48px !important; }

/*全局*/
html,body{overflow-x: hidden;}
.body{margin-top: 61px;}
html{background-color: #f4f6f8;}
.layui-container{max-width:1200px;}
i{font-style: normal;}
.layui-btn-sm i {font-size: 14px !important;}

/*辅助*/
a:hover{color: #009688; transition: all .3s;}
pre{padding: 10px 15px; margin: 10px 0; font-size: 12px; border-left: 6px solid #009688;  background-color: #f8f8f8; font-family: Courier New;}

/*面板大间距样式*/
.fly-panel .fly-title{margin-bottom: 6px;}
.fly-panel .fly-title h2{color: #333;display: block;line-height: 44px;font-size: 18px;padding-left:15px;position: relative;font-weight: normal;}
.fly-panel .fly-title h2:before {width: 3px;height: 18px;top: 50%;left: 0;margin-top: -9px;background: #1e9fff;content: "";display: block;position: absolute;border-radius: 2px;}
.fly-panel .layui-card.pd-20{padding: 20px !important}
.fly-panel .layui-card.no-shadow{box-shadow: none;}

/*用户中心*/
.fly-user-main{position: relative; min-height: calc(100vh - 176px);margin-top: 15px}
.fly-user-main:after{clear: both;content: " ";display:block;}
.fly-user-main>.layui-nav{}
.fly-user-main .fly-aside{width: 240px;float: left;}
.fly-user-main .layui-nav.layui-nav-tree{width:100%;}
.fly-user-main>.fly-panel{min-height: 575px;float:right;width: calc(100% - 260px);}
.fly-user-main .fly-userinfo{text-align: center;background:#2f363c;align-items: center;display: flex;flex-wrap: wrap;justify-content: center;padding: 20px 0;}
.fly-user-main .fly-avatar{border-radius: 50%;display: block;height: 90px;width: 90px;}
.fly-user-main .fly-avatar-img{position: relative;}
.fly-user-main .fly-avatar-img i{align-items: center;background-color:#fff;border-radius: 50%;bottom: 0;display: flex;height: 22px;justify-content: center;position: absolute;right: 10px;width: 22px;}
.fly-user-main .fly-username{display: block;font-size: 16px;font-weight: 700;padding: 10px 0;text-align: center;width: 100%;color:#fff}

/*个人主页*/
.user-baseinfo {display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.user-baseinfo .layui-card{margin-bottom: 0; }
.user-baseinfo .layui-card h3{color:#2d3748; }
.user-baseinfo .layui-card-body, .user-baseinfo .layui-card-header {padding: 15px 20px; }
.user-baseinfo .full-width {grid-column: 1 / -1; }
.user-baseinfo .info-item {margin-bottom: 12px; }
.user-baseinfo .info-label {font-size: 13px; color: #718096; margin-bottom: 4px; }
.user-baseinfo .info-value {font-size: 15px; font-weight: 600; color: #2d3748; }

/*白色主题*/
.light-theme .fly-user-main>.layui-nav{background-color: #fff;}
.light-theme .layui-nav .layui-nav-item a{color:#666}
.light-theme .layui-nav-tree .layui-this{background: #fff !important}
.light-theme .layui-nav-tree .layui-nav-child dd.layui-this, .light-theme .layui-nav-tree .layui-nav-child dd.layui-this a, .light-theme .layui-nav-tree .layui-this>a, .light-theme .layui-nav-tree .layui-this>a:hover {font-weight: 700;border-left: 1px solid #1e9fff;}
.light-theme .layui-nav-itemed>a,.light-theme .layui-nav-tree .layui-nav-title a,.light-theme .layui-nav-tree .layui-nav-title a:hover {color: #666 !important;}
.light-theme .layui-nav-itemed>.layui-nav-child {background-color: #fff !important;}
.light-theme .layui-nav {background-color: #fff;}
.light-theme .fly-user-main .fly-userinfo{background: #fff;}
.light-theme .fly-user-main .fly-username{color:#000}
.light-theme .fly-user-main .layui-nav .layui-this a {background-color: rgba(30, 159, 255, 0.1) !important;color: #1e9fff !important;}
.light-theme .fly-user-main .layui-nav .layui-nav-item a:hover{background-color: rgba(30, 159, 255, 0.05) !important;color: #1e9fff;}

/*表格*/
.layui-table-tool .yzn-btn-primary{color: #fff; background-color: #2c3e50; }
.layui-table-tool .layui-btn + .layui-btn {margin-left: 2px !important;}

.text-danger {color: #d26a5c; }
.text-info {color: #70b9eb; }
.text-warning {color: #f3b760; }
.text-success {color: #46c37b; }
.text-primary {color: #5c90d2; }

.fieldlist dd {display: block;margin: 5px 0;}
.fieldlist dd input {display: inline-block;width: 300px;}
.fieldlist dd input:first-child {width: 110px;}
.fieldlist dd ins {width: 110px;display: inline-block;text-decoration: none;font-weight: bold;margin-right: 10px;line-height: 38px;}

/*alert*/
.alert {padding: 15px; margin-bottom: 17px; border: 1px solid transparent; border-radius: 3px;}
.alert h4 {font-weight: 600; }
.alert .icon {margin-right: 10px; }
.alert .close {color: #000; opacity: 0.2; filter: alpha(opacity=20); }
.alert .close:hover {opacity: 0.5; filter: alpha(opacity=50); }
.alert a {color: #fff; text-decoration: underline; }
.alert-success {border-color: #15a589; }
.alert-danger, .alert-error {border-color: #e43725; }
.alert-warning {border-color: #e08e0b; }
.alert-info {border-color: #258cd1; }
.alert-primary-light {background-color: #E2E5E8; border-color: #D0D4D8; color: #85878A; }
.alert-primary-light a {color: #787a7d; }
.alert-success-light {background-color: #dff0d8; border-color: #d1eac8; color: #468847; }
.alert-success-light a {color: #3d773e; }
.alert-danger-light, .alert-error-light {background-color: #f2dede; border-color: #ebcdcd; color: #b94a48; }
.alert-danger-light a, .alert-error-light a {color: #a74240; }
.alert-warning-light {background-color: #fcf8e3; border-color: #faf3cd; color: #c09853; }
.alert-warning-light a {color: #b78c43; }
.alert-info-light {background-color: #d9edf7; border-color: #c6e4f3; color: #3a87ad; }
.alert-info-light a {color: #34789a; }

.layui-form-mid.no-float{float: none !important;margin-left: 140px !important;padding-bottom: 0 !important;}
.layui-form-item-required:before {display: inline-block; margin-right: 4px; color: #f5222d; font-size: 14px; font-family: SimSun,sans-serif; line-height: 1; content: "*"; }
.layui-badge {height: 22px;line-height: 22px;}

/*重置layui样式*/
.layui-btn-disabled, .layui-btn-disabled:active{pointer-events: none; }
.layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-input-split, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-textarea {border-color: #dcdfe6;}
.layui-table .layui-btn+.layui-btn {margin-left: 5px;}
.layui-form-label {width: 110px;}
.layui-input-block {margin-left: 140px;max-width:70%;}
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {border-color: #e6e6e6;}
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {background-color: #f2f2f2;}
.layui-elem-quote{background-color: #f2f2f2;}
.layui-tabs-header .layui-this, .layui-tabs-header li:hover {color: #1e9fff;}
.layui-form-radio:hover>*, .layui-form-radioed, .layui-form-radioed>i {color: #1e9fff;}
.layui-nav-tree .layui-nav-bar {background-color: #1e9fff;}
.layui-input:focus:not(.layui-form-danger), .layui-textarea:focus:not(.layui-form-danger) {border-color: #1e9fff !important;}
.layui-form-select dl dd.layui-this {color: #1e9fff;}
.layui-btn{background: #1e9fff;}
.layui-btn-primary {background: 0 0 !important;}
.layui-btn-danger {background-color: #ff5722 !important;}
.layui-laypage .layui-laypage-curr .layui-laypage-em {background-color: #1e9fff;}
.layui-laydate .layui-this, .layui-laydate .layui-this>div {background-color: #1e9fff !important;}
.layui-form-checked[lay-skin=primary]>i {border-color: #1e9fff !important;background-color: #1e9fff;}
.layui-form-checkbox[lay-skin=primary]:hover>i {border-color: #1e9fff;}
.layui-laydate-header i:hover, .layui-laydate-header span:hover {color: #1e9fff;}
.layui-laydate-footer span:hover {color: #1e9fff;}
.layui-nav-tree .layui-nav-child {background-color: #fff !important;}
.layui-nav-tree .layui-nav-child a{color: #718096 !important}
.layui-nav-tree .layui-nav-bar {display: none;}

/*图片上传缩略图*/
.file-item.thumbnail .file-panel {position: absolute; width: 100%; height: 30px; line-height: 30px; left: 0; right: 0; top: -30px; background: rgba(0, 0, 0, 0.4); z-index: 3; transition: 400ms ease-in-out; -moz-transition: 400ms ease-in-out; -webkit-transition: 400ms ease-in-out; -o-transition: 400ms ease-in-out; }
.file-item.thumbnail:hover .file-panel {top: 0; transition: 400ms ease-in-out; -moz-transition: 400ms ease-in-out; -webkit-transition: 400ms ease-in-out; -o-transition: 400ms ease-in-out; }
.file-item.thumbnail { width: 100px; margin-right: 10px; text-align: center; display: block; margin-top: 15px; line-height: 100px;   display: inline-block;  }
.file-item.thumbnail a{background-color: #fff;overflow: hidden; display: block;margin-bottom:10px;height: 100px;border: 1px solid #ddd; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out;position: relative; padding: 5px;}
.file-item.thumbnail a img {cursor: zoom-in; max-height: 100%; max-width: 100%; display: inline-block; vertical-align: middle; }
.file-item.thumbnail .info {display: none; }
.file-item.thumbnail .file-panel i {font-size: 18px; color: #fff; width: 16px; height: 16px; line-height: 16px; z-index: 5; cursor: pointer; }
.file-item.thumbnail .file-panel i.move-picture {cursor: move; }

@media screen and (max-width: 768px) {
    .layui-form{width: 100%!important}
    .fly-panel .layui-card.pd-20 {padding: 5px !important;}
    .fly-user-main{width: auto;}
    .fly-user-main .fly-userinfo{display: none!important;}
    .fly-user-main .layui-nav.layui-nav-tree{height: 100%;z-index:9999}
    .fly-user-main .fly-aside{position: absolute; left: 0; top: 50px; height: 100%;z-index: 9999;padding: 10px 0;}
    .fly-user-main .fly-aside{left: -300px; transition: all .3s; -webkit-transition: all .3s;position: fixed;}
    .fly-user-main>.fly-panel-user{width: auto;float:none; margin-left: 0; transition: all .3s; -webkit-transition: all .3s;}
    .user-baseinfo {grid-template-columns: 1fr;}

    .site-tree-mobile{display: block!important; position: fixed; z-index: 100000; bottom: 20px; left: 10px; width: 50px; height: 50px; line-height: 50px; border-radius: 2px; text-align: center; background-color: rgba(0,0,0,.7); color: #fff;}
    .site-mobile .site-tree-mobile{display: none !important;}
    .site-mobile .fly-user-main .fly-aside{left: 0;}
    .site-mobile .site-mobile-shade{content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.9); z-index: 999;}

    .layui-form-label {width: auto;float: none;text-align: left;padding: 9px 0px;}
    .layui-input-block {margin-left: 0;max-width:100%;}
    .layui-form-item .layui-input-inline {margin: 0 0 10px 0 !important;}
    .layui-form-item .layui-input-inline+.layui-form-mid {margin-left: 0 !important;}
    .layui-form-item .layui-form-mid.no-float {margin-left: 0 !important;}
}