修改样式

src/main/webapp/resources/h-ui/css/new-wrap.css

@@ -27,7 +27,7 @@ body .layui-table{background: none;color:#fff;}
 .layui-table td, .layui-table th, .layui-table-fixed-r, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row]{
     border-color:#000
 }
-body .layui-laypage button,body .layui-laypage input,body select,body option{background: rgba(0, 0, 0, 0.3) !important;color:#fff;}
+body .layui-laypage button,body .layui-laypage input,body select{background: rgba(0, 0, 0, 0.3) !important;color:#fff;}
 input::-webkit-input-placeholder {     /* placeholder颜色  */ color: #fff;}
 body .Hui-aside{border-right:1px solid #fff;border-color: rgba(255,255,255,0.55);}
 body .layui-form-pane .layui-form-label{background: rgba(0, 0, 0, 0.3);}
@@ -62,13 +62,160 @@ body .layui-laypage .layui-laypage-curr .layui-laypage-em{background-color:#1E9F
 body .x-nav .layui-btn{background-color:#1E9FFF;}
 .layui-layer-shade{background: rgba(0, 0, 0, 0.3)!important;}
 body input.code-icon{ background: rgba(0,0,0,0.3) url(../../image/code.gif) no-repeat right center;cursor: pointer;}
+body .layui-anim-upbit>dd,body option{color:#000 !important;background: #fff !important;}
 /*个人资料*/
-.grzl-mp{width:400px;border:1px solid #ccc;}
-.mp-photo{width:100%;height:400px;background: rgba(0,0,0,0.3);}
+.grzl-mp{width:400px;border:1px solid #ccc;box-shadow: 2px 2px 12px rgba(0,0,0,0.4);float: left}
+.mp-photo{width:100%;height:150px;background: rgba(0,0,0,0.3);position: relative;margin-bottom: 40px;}
 .grzl-mp p{line-height: 40px;}
-.photo-img{}
+.photo-img{width:120px;position: absolute;left:50%;margin-left:-60px;bottom:-39px;}
+.mp-name{ display:inline-block; width:120px;text-align: right;}
 .layui-layer-page span{color:#666!important;}
 .color1{color:red !important;margin:0 15px;cursor: pointer;}
 .color2{color:#feb305 !important;margin:0 5px;cursor: pointer;}
 body .layui-layer-dialog{color:#666;}
 body .layui-layer-btn1{color:#666 !important;}
+.mp-value{}
+.photo-img:hover { -webkit-animation-name: tada;  animation-name: tada;}
+/****个人资料权限*****/
+.flowChart {
+    background-color: rgba(0, 0, 0,0.3);
+    width:540px;
+    float: left;
+    padding: 12px;
+    display: flex;
+}
+.flowChart-left {
+    width: 50px;
+    flex-shrink: 0;
+}
+.flowChart .dashed {
+    width: 0px;
+    height: 100%;
+    margin-left: 50%;
+    border-left-style: dashed;
+    border-left-color: darkgray;
+    border-left-width: 2px;
+}
+.flowChart-right {
+    flex-grow: 1;
+}
+.flowChart .oneNode {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 14px;
+}
+.flowChart .check {
+    width: 40px;
+    height: 40px;
+    border-radius: 50px;
+    line-height: 40px;
+    color: white;
+    font-size: 12px;
+    text-align: center;
+    position: relative;
+    left: -49px;
+    flex-shrink: 0;
+    background-color: rgb(125, 122, 117);
+    border: 4px solid rgb(173,168,163);
+}
+.flowChart .check-success {
+    background-color: rgb(87, 194, 64);
+    border: 4px solid rgba(198, 228, 177,0.9);
+}
+.flowChart .check-danger {
+    background-color: rgb(228,108,35);
+    border: 4px solid rgb(250, 166, 122);
+}
+.flowChart .check-prime {
+    background-color: rgb(0, 136, 165);
+    border: 4px solid rgb(88, 191, 243);
+}
+.flowChart .check-warning {
+    background-color: rgb(248, 144,2);
+    border: 4px solid rgba(255, 208, 122,1);
+}
+.flowChart .NodeDetail {
+    background-color: white;
+    margin-left: -60px;
+    flex-grow: 1;
+    border: 1px solid gainsboro;
+    border-radius: 3px;
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 1px 1px 3px gainsboro;
+}
+.flowChart img {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+}
+.NodeDetail .details {
+    flex-grow: 1;
+    padding-left: 8px;
+    margin-left: 8px;
+    border-left: 4px solid rgb(72, 108, 160);
+}
+.details p {
+    color: rgb(154, 154, 154);
+    font-size: 14px;
+    font-weight: 100;
+}
+.NodeDetail-title {
+    display: flex;
+    margin-bottom: 10px;
+}
+.NodeDetail-content {
+    flex-grow: 1;
+}
+.NodeDetail-content p {
+    text-indent: 2em;
+    text-align: justify;
+    font-size: 14px;
+}
+.NodeDetail-footer {
+    margin-top: 10px;
+}
+.NodeDetail-footer span {
+    font-size: 12px;
+    font-weight: 100;
+    color: rgb(104, 104, 104);
+    float: right;
+}
+.badge {
+    padding: 2px 5px;
+    font-size: 12px;
+    background-color: rgb(72, 108, 160);
+    border-radius: 10px;
+    font-weight: 100;
+    color: white;
+    letter-spacing: 2px;
+    box-shadow: 1px 1px 1px gainsboro;
+}
+.BadgeGray {
+    background-color: rgb(104, 108, 104);
+}
+.tag {
+    width: 0;
+    height: 0;
+    border: 14px solid;
+    border-style: dashed;
+    border-color: transparent white transparent transparent;
+    position: absolute;
+    left: -13px;
+    top: -14px;
+}
+.tag-boder {
+    width: 0;
+    height: 0;
+    border: 12px solid;
+    border-style: dashed;
+    border-color: transparent gainsboro transparent transparent;
+    position: relative;
+    left: -59px;
+}
+.NodeDetail-content p{
+    margin-top: 7px;
+}
+