fansInfo.css

#fansInfoBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #efefef;
	z-index: 100000000;
	display: none;
	align-items: center;
	color: #333;
}

#fansInfoBox .section {
	padding: 10px 20px;
	/* border: 1px solid #999; */
	background-color: #fff;
	margin: 10px 0;
}

#fansInfoBox .flexBox {
	display: flex;
}

#fansInfoBox .userLogo {
	width: 70px;
	height: 70px;
	border-radius: 4px;
}

#fansInfoBox .userLogo img {
	width: 100%;
	height: 100%;
}

#fansInfoBox .userInfo {
	flex: 1;
}

#fansInfoBox .userInfo>p:first-child {
	margin-bottom: 12px;
	padding-left: 10px;
	box-sizing: border-box;
}

#fansInfoBox .labels span {
	background-color: #b50005;
	color: #fff;
	font-size: 0.8em;
	padding: 1px 8px;
	margin: 2px;
	display: inline-block;
}

#fansInfoBox .noteStyle {
	margin-top: 4px;
	font-size: 0.9em;
	color: #666;
}

#fansInfoBox .noteStyle>div:first-child {
	width: 80px;
	padding-left: 10px;
	box-sizing: border-box;
}

#fansInfoBox .labels {
	flex: 1;
}

#fansInfoBox .labelTitle {
	width: 80px;
}

#fansInfoBox .subSection {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

#fansInfoBox .editStyle {
	justify-content: space-between;
}

#fansInfoBox .editStyle .iconfont {
	color: #333;
	font-size: 1.2em;
}

#fansInfoBox textarea {
	width: 100%;
	height: 80px;
	margin-top: 20px;
	border-radius: 6px;
	resize: none;
	padding: 10px;
	box-sizing: border-box;
	background: none;
	border: 1px solid #eee;
	outline: none;
	-webkit-appearance: none;
}

#fansInfoBox .btnBox {
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	margin-top: 40px;
}

#fansInfoBox button {
	background: none;
	border: none;
	background-color: #b50005;
	color: #fff;
	width: 100%;
	height: 40px;
	border-radius: 2px;
	font-size: 14px;
}

#fansInfoBox #closeLabelFn {
	background-color: #fff;
	margin-top: 10px;
	color: #b50005;
}

#fansInfoBox .editLabels {
	display: flex;
	justify-content: space-between;
	display: none;
}

#fansInfoBox .editLabels input {
	flex: 1;
	height: 100%;
	border: 1px solid #eee;
	margin-right: 8px;
	box-sizing: border-box;
	outline: none;
	-webkit-appearance: none;
}

#fansInfoBox .editLabels .iconfont {
	color: #b50005;
}

#fansInfoBox .telValue,
#fansInfoBox .nameValue {
	width: 100%;
	border: none;
	background: none;
	font-size: 1em;
	padding: 0;
	color: #333;
}

#fansInfoBox .fansInfoBox_label {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #eee;
	display: none;
	box-sizing: border-box;
}

#fansInfoBox .fansInfoBox_label .labelConent {
	background-color: #fff;
	padding: 10px;
	border-bottom: 1px solid #ccc;
}

#fansInfoBox .fansInfoBox_label .tagInput {
	display: flex;
}

#fansInfoBox .fansInfoBox_label .tagInput input {
	height: 24px;
	border: 1px solid #eee;
	box-sizing: border-box;
	padding-left: 10px;
	flex: 1;
}

#fansInfoBox .fansInfoBox_label .tagInput .addTag {
	width: 50px;
	height: 24px;
	font-size: 12px;
	margin-left: 10px;
}

#fansInfoBox .fansInfoBox_label .userTags {
	margin-bottom: 10px;
	background-color: #fff;
}

#fansInfoBox .fansInfoBox_label .userTags span,
.tagListBox span {
	border: 1px solid rgba(181, 0, 5, 0.4);
	border-radius: 20px;
	color: #b50005;
	font-size: 0.8em;
	padding: 2px 8px;
	margin: 2px;
	margin-top: 10px;
	display: inline-block;
}

#fansInfoBox .fansInfoBox_label .tagHistory span.unSelect {
	color: rgba(181, 0, 5, 0.4);
	border: 1px solid #aaa;
}

#fansInfoBox .tagHistory {
	padding: 10px;
	box-sizing: border-box;
}

#fansInfoBox .tagHistory .title {
	color: #999;
}

#fansInfoBox .tagListBox {
	margin-top: 10px;
}

#fansInfoBox .saveTagBtnBox {
	padding: 10px;
	box-sizing: border-box;
	margin-top: 50px;
}

#fansInfoBox .saveTagBtnBox .close {
	background-color: #fff;
	color: #b50005;
	margin-top: 10px;
}