yzncms_console/public/static/addons/member/css/global.css

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

/* 辅助 */
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-main{width: 1079px; min-height: 600px; margin: 0 auto 15px;}
.layui-badge{height: 20px; line-height: 20px; border-radius: 2px;}
.fly-msg{padding: 10px 15px; line-height: 24px;}
.fly-msg{background-color:#f8f8f8; color:#666;border: 1px solid #eaeaea;}
.fly-msg a{color:#4F99CF}

.fly-marginTop{margin-top: 20px;}
.fly-mid{display: inline-block; height: 10px; width: 1px; margin: 0 10px; vertical-align: middle; background-color: #e2e2e2;}
.fly-right{position: absolute; right: 15px; top: 0;}

/* 图标 */
.icon-vip1{position: relative; color: #FFB800;}

/* 徽章 */
.fly-badge-vip{height: 16px; line-height: 16px; padding: 0 3px; background-color: #FF5722; color: #fff; border-radius: 2px;}
.fly-badge-accept{height: 18px; line-height: 18px; padding: 0 5px !important; background-color: #5FB878; border-radius: 2px;}

/* 头部 */
.fly-header{position: fixed; left: 0; top: 0; z-index: 10000; width: 100%; height: 60px; border-bottom: 1px solid #404553; border-right: 1px solid #404553; border-radius: 0;background-color: #393d49;}
.fly-logo{position: absolute; left: 15px; top: 11px;}
.fly-nav{margin-left: 200px;}
.fly-nav a i{position: absolute; left: 25px; top: 0; padding-right: 10px; font-size: 26px;}
.fly-nav a .icon-shouye, .nav a .icon-shezhi{top: 2px;}
.fly-nav-user{position: absolute; top: 0; right: 0;}
.fly-nav-user .iconfont{position: relative;}
.fly-nav-avatar img{width: 36px; height: 36px; margin-left: 10px; border-radius: 100%;}
.fly-nav-avatar  .icon-vip1{font-size: 18px; top: 3px;}
.fly-nav-avatar .fly-badge-vip{position: relative; margin-left: 10px;}
.fly-nav-user .layui-nav-child a i{position: relative; top: 2px; margin-right: 10px; font-size: 20px;}
.fly-nav-msg{position:absolute; top: 50%; left: -25px; height: 20px; line-height: 20px; margin-top: -10px; padding:0 6px; background-color: #FF7200; color: #fff; border-radius: 2px;}
.fly-nav-msg:hover{color:#fff;}
.fly-header .layui-nav{padding: 0; background: none;}
.fly-header .fly-nav a{padding: 0 25px 0 60px;}
.fly-header .fly-nav-user li a{padding: 0 10px;}
.fly-header .fly-nav-user li .fly-nav-avatar{padding-right: 0;}
.fly-header .fly-nav-user a.iconfont{color: #A9B7B7;}
.fly-header>.layui-nav-item a{color: rgba(255,255,255,0.5);}
.fly-header .layui-this a{color: #fff;}
.fly-header .layui-nav .layui-this:after,
.fly-header .layui-nav .layui-nav-bar,
.fly-header .fly-nav-user .layui-nav-more{display: none !important;}
.fly-header .fly-nav-user .layui-nav-child{left: auto; right: 0; width: 120px; min-width: 0;}

/* 底部 */
.fly-footer {margin: 50px 0 0; padding: 20px 0 30px; line-height: 30px; text-align: center; color: #737573; border-top: 1px solid #e2e2e2;}
.fly-footer a{padding:0 6px; font-weight: 300; color: #333;}
.fly-footer a:hover{color: #777;}

/* 面板 */
.fly-panel{border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}
.fly-panel-title{position: relative; height: 50px; line-height: 50px; padding: 0 15px; border-bottom: 1px dotted #E9E9E9; color: #333; border-radius: 2px 2px 0 0; font-size: 14px;}
.fly-panel-main{padding: 10px 15px;}
.fly-panel-border{border: 1px solid #e6e6e6; box-shadow: none;}
.fly-panel-border .fly-panel-title{border-bottom: 1px solid #e6e6e6;}
.fly-panel .fly-title{border:none !important;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: 5px;height: 20px;top: 50%;left: 0;margin-top: -10px;background: #16baaa;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: 600px;}
.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-none{min-height: 0;}
.fly-user-main .fly-userinfo{text-align: center;background: #fff;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: 100px;width: 100px;}
.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%;}

/* 个人主页 */
.fly-home{position: relative; padding: 30px 0 30px; text-align: center;    border: 1px solid #eaeaea;background: #f8f8f8;}
.fly-home img{width:120px; height:120px; border-radius:100%;}
.fly-home h1{font-size:26px; line-height:2; margin-top:10px;}
.fly-home h1 font{color: #666;font-size: 18px;}
.fly-home h1 span{font-size:14px; color:#999;}
.fly-home h1 .icon-nan{color:#4EBBF9}
.fly-home h1 .icon-nv{color:#F581B1}
.fly-home-sign{padding: 0 10px; color: #999; margin-top:8px;line-height: 1.5;}
.fly-home .icon-vip1{display: inline-block; width: 24px; height: 24px; line-height: 24px; top: 45px; left: -15px; background-color: #FFB800; color: #fff; border-radius: 50%; font-size: 16px;}
.fly-home-info i{padding-right: 5px; padding-left: 10px; color: #666;}
.fly-home-info span{color: #999;}

.layui-card-box .layui-card{background: #f8f8f8;border: 1px solid #eaeaea;}
.layui-card-box .layui-card-header{border-bottom: 1px solid #eaeaea;}
.layui-card-box .layui-card-body{background: #fff;font-size: 14px;}

/* 设置 */
.avatar-add{position:relative; width:373px; height:373px; background-color:#F2F2F5;}
.avatar-add .upload-img{position:absolute; left:50%; top:35px; margin:0 0 0 -56px;}
.avatar-add img{position:absolute; left:50%; top:50%; width:168px; height:168px; margin:-50px 0 0 -84px; border-radius:100%;}
.avatar-add .loading{display:none; position:absolute; width:100%; height:100%; left:0; top:0; padding: 0; background-color:#000; opacity:0.5; filter: Alpha(opacity=50);}
.avatar-add p{position:absolute; top:70px; width:100%; margin-top: 10px;; font-size:12px; text-align:center; color:#999;}

/*即将废弃*/.layui-form-mid2{display: block; padding: 9px 0!important; line-height: 20px; margin-right: 10px; padding-left: 140px !important; }
.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-form-item>label.layui-form-label:after {content: ":"; position: relative; top: -.5px;margin-left: 2px;}

/*白色主题*/
.light-theme .fly-header{border-color: #fff;box-shadow: 0 1px 8px rgb(0 0 0 / 8%);background: #fff;}
.light-theme .fly-user-main>.layui-nav{background-color: #fff;}
.light-theme .layui-nav .layui-nav-item a {color: #000;}
.light-theme .layui-nav {background-color: #fff;}
.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, .light-theme .layui-nav-tree .layui-this>a, .light-theme .layui-nav-tree .layui-this>a:hover {color: #fff;}
.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: #000 !important;}
.light-theme .layui-nav-itemed>.layui-nav-child {background-color: rgb(250 250 250)!important;}

/*重置layui样式*/
.layui-form-label {width: 110px;}
.layui-input-block {margin-left: 140px;max-width:70%;}
.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-tab-title, .layui-tab-title .layui-this:after, .layui-textarea {
    border-color: #dcdfe6;
}
.layui-input[disabled], .layui-textarea[disabled] {background-color: #eee;}
.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;}

@media screen and (max-width: 768px) {
  .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;}
  .fly-panel .layui-card.pd-20 {padding: 12px !important;}
  .fly-user-main .fly-userinfo{display: none!important;}
  .fly-user-main .layui-nav.layui-nav-tree{height: 100%;z-index:9999}
  .layui-form{width: 100%!important}
  .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-home h1 font {display: block;}
  .fly-main{width: 100%;}
  /* 顶边距 */
  .fly-marginTop{margin-top: 15px;}
  /* 头部 */
  .fly-header .fly-nav-user li .fly-nav-avatar{padding-right: 15px;}
  .fly-header .fly-nav-user{margin-right: 5px;}
  /* 页脚 */
  .fly-footer{margin-top: 0; border-top: none;}
  body .fly-user-main{width: auto;}
  .fly-user-main>.fly-panel-user{width: auto;float:none; margin-left: 0; transition: all .3s; -webkit-transition: all .3s;}
  .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;}
}

/*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; }

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