.ms-content { font-family: arial, "Microsoft Yahei", "Hiragino Sans GB", sans-serif; width: 1200px; margin: auto; .ms-content-main { margin: 20px 0; .ms-content-left { width: 230px; height: 270px; background-color: #fff; text-align: center; margin-right: 20px; float: left; .ms-content-left-info { img { width: 100px; height: 100px; border-radius: 50%; margin: 20px 0 10px 0; } div { border-bottom: 1px solid #f1f1f1; padding-bottom: 10px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #555555; } } .ms-content-left-list { .active { color: #0099ff; } a:link { color: #999; text-decoration: none } a:hover{ color: #0099ff; } .ms-content-left-list-info { margin-top: 20px; cursor: pointer; color: #999999; } .ms-content-left-list-pass { margin: 20px 0; color: #999999; cursor: pointer; } } } .ms-content-right { background-color: #fff; width: 950px; min-height: 653px; overflow: hidden; .ms-content-right-title { color: #555555; border-bottom: 1px solid #eeeeee; padding: 20px 0; margin: 0 20px; } /*修改密码*/ .ms-content-right-form { input::-webkit-input-placeholder { color: #999; } .ms-content-old-password, .ms-content-data { .span{ display: inline-block; } font-size: 14px; color: #999999; .ms-error-hide { opacity: 0; color: #FF0000; transition: all .2s; } .ms-error-show { opacity: 1; } span { min-width: 70px; max-width: 300px; /*display: inline-block;*/ } img { vertical-align: middle; } input { width: 220px; height: 20px; padding: 5px 10px; border: 1px solid #eeeeee; border-radius: 4px; margin-top: 20px; background-color: #fafafa; } } form { margin-left: 67px; } .ms-content-click { pointer-events:none; background-color:#fafafa; color:#ddd; /*color: white;*/ width: 120px; /*background-color: #0099ff;*/ padding: 6px 0; border-radius: 4px; text-align: center; margin-left: 141px; margin-top: 20px; cursor: pointer; opacity: .9; &:hover { opacity: 1; } } .ms-content-click-password { margin-left: 141px; } } /*基本资料*/ .ms-content-right-form { .ms-content-data { .ms-error-hide { opacity: 0; color: #FF0000; transition: all .2s; } .ms-error-show { opacity: 1; } input { background-color: #ffffff; height: 20px; padding: 5px 10px; margin-right: 18px; transition: all .6s; color: #999; &:focus { color: #000; border-color: #0099ff; } } .ms-content-head-img { width: 64px; height: 64px; position: relative; &:hover { #browse { display: block; } } img { width: 100%; height: 100%; border-radius: 50%; background: white; } .ms-content-head-upload { width: 100%; height: 100%; line-height: 64px; position: absolute; top: 0px; left: 0px; font-size: 12px; color: #fff; border-radius: 50%; text-align: center; span { margin: auto; } } } } .ms-content-data-head { text-align: left; display: flex; align-items: center; margin-top: 20px; cursor: pointer; } } } } } .ms-content-head-upload { .display-img { width: 64px; height: 64px; display: block !important; } span { display: none ; } &:hover { #browse { opacity: 1; } } #browse { background: rgba(89, 89, 89, 0.5); min-width: 64px; width: 64px; height: 64px; transition: .3s; position: absolute; z-index: 1; top: 0; left: 0; border-radius: 50%; opacity: 0; } }