文件管理列表zfile CSS美化代码

zfile CSS美化代码

/*背景图
background-repeat: no-repeat !important;
background-size: cover !important;
overflow-y: scroll;
*/
body {
background-image: url(http://nas.laoknas.com:5588) !important;
background-size: cover !important;
background-position: center top !important;
background-attachment: fixed !important;
}

/*#app{background-image: url(https://pic.rmb.bdstatic.com/bjh/385ebf106a287bb0b739116fd27bbfcc.png);}*/

/*导航 透明*/
.zfile-header {background: rgba(255, 255, 255, 0.4) !important;}
/*选择器透明*/
.el-input__inner {background-color: rgba(255, 255, 255, 0.4) !important;}
.el-select-dropdown {background-color: rgba(255, 255, 255, 0.9) !important;}
/*列表 透明*/
.el-table, .el-table__expanded-cell {
    background-color: rgba(255, 255, 255, 0.4) !important;}
.el-table th, .el-table tr {
    background-color: rgba(255, 255, 255, 0) !important;}
/*列表 字体颜色*/
.el-table thead {
    color: rgba(0, 0, 0) !important;}
.el-table {
    color: rgba(0, 0, 0) !important;
    margin: 0 !important;
    padding-right: 0 !important;
}
.el-row{margin: 10px;}
/*列表按钮颜色*/
.operator-btn{
    color: rgba(0, 0, 0) !important;}
.operator-btn {
    color: rgba(0, 0, 0) !important;}
/*readme透明*/
.el-card {
    background-color: rgba(255, 255, 255, 0.4) !important;}
/*导航字体颜色*/
.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, .el-breadcrumb__item:last-child 
.el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
    color: rgba(0, 0, 0);}
/*右键 透明*/
.v-contextmenu {
    background-color: rgba(255, 255, 255, 0.9) !important;}
/*公告 透明*/
.alert {
    background-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(0, 0, 0) !important;}
/*公告 透明*/
.zfile-header-announcement{background-color: #f4f4f530;

}
/*列表高度自适应*/
.el-table__body-wrapper.is-scrolling-none{height: auto !important;;}
div#ListTable{height:auto !important;;}

/*首页文档区显示修改*/ 
#main{height:-webkit-fill-available;}
.zfile-markdown-body{height:auto}
.el-card{margin:20px 30px;}
/*#ListTable{height:88vh !important;}*/ 
/*手机显示修改*/ 
/*body {background-size: auto !important;background-position: center !important;}*/ 
@media only screen and (max-width: 767px){
.el-table_1_column_2.hidden-xs-only,.el-table_1_column_3.hidden-xs-only{display:table-cell !important}
.el-table_1_column_2.hidden-xs-only>div,.el-table_1_column_3.hidden-xs-only>div{display: none;}
}

/*隐藏 中间路径 显示最后一个*/
@media screen and (max-width:767px) {  
/*.el-breadcrumb>*{ display: none;}*/
/*.el-breadcrumb>span:last-child{display: block !important;}*/
}

/*屏蔽驱动器 字*/
span[style="margin-right: 10px;"] {
    display: none;}

/*驱动器选项缩小*/
.el-select {width: 40px !important;position: relative;}

/*图片预览时上下页按钮*/
.layui-layer-imgprev,.layui-layer-imgnext {width:40%;top:20%;height: 80%;margin-top: 0;}
.layui-layer-iconext{background:none}

.footer,
.footer a {
    text-align: center;
    background-color: transparent;
    color: #555;
}

js放到js栏

$("#List").append("<div class='footer'>&copy 2020-2022 <a href='https://www.laoknas.com'>Laoknas网络技术</a> | <a href='https://beian.miit.gov.cn/' target='_blank'>你的备案号</a></div>")

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片