@import "../../style/index.less";

.user {
  overflow: hidden;
  background-color: @user-background-color;
  &-info {
  	display: flex;
  	justify-content: space-between;
	margin: 31px 26px 28px 28px;
	height: 60px;
	&-account {
	  display: flex;
	  flex-direction: column;
	  span:nth-child(1) {
	  	width: 84px;
		height: 40px;
		line-height: 40px;
		font-size: 28px;
		font-weight: 600;
		color: @black;
	  }
	  span:nth-child(2) {
	  	width: 63px;
		padding: 1px 0 2px;
		line-height: normal;
		text-align: center;
		background: #000000;
		border-radius: 8px;
		opacity: 0.2;
		font-size: @font-size-12;
		font-weight: 400;
		color: @user-module-background-color;
	  }
	}
	&-image {
	  position: relative;
	  width: 60px;
	  height: 60px;
	  &-certification {
	  	position: absolute;
	    right: 0;
	    bottom: 0;
		width: 20px;
	  	height: 20px;
	  }
	}
  }
  &-insurance {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	margin: 0 16px 10px;
  	padding: 0 32px;
  	height: 69px;
  	line-height: 69px;
	background: @orange-light;
	border-radius: @border-radius-md;
  	&-list {
  	  display: flex;
  	  height: 27px;
	  line-height: 27px;
  	  &-icon {
		position: relative;
		margin-right: 8px;
		height: 27px;
	    line-height: 27px;
		width: 27px;
		font-size: 0;
		&-svg {
		  width: 27px;
		  height: 27px;
		}
		&-dot {
		  position: absolute;
		  top: 0;
		  right: 0;
		  width: 6px;
		  height: 6px;
		  border-radius: 100%;
		  background-color: @red;
		}
  	  }
  	  &-title {
  	  	font-size: 16px;
		font-weight: 600;
		color: #000000;
  	  }
	}
  	&-divider {
	  height: 19px;
  	  border-left: solid 1px #010101;
  	}
  }
  &-family {
  	margin: 0 16px 10px;
  	padding: 20px 20px 0 20px;
  	border-radius: @border-radius-md;
  	background: @user-module-background-color;
  	&-title {
  	  margin: 0;
	  font-weight:600;
  	  font-size: 19px;
	  color: #242629;
  	  text-align: left;
  	}
  	&-info {
  	  overflow-x: auto;
  	  display: flex;
  	  margin: 20px 0 24px;
  	  &-item {
  	  	font-size: 0; // 去掉默认间距
  	  	width: 40px;
  	  	&:not(:first-child) {
  	  	  margin-left: 25px;
  	  	}
  	  	&-svg {
  	  	  width: 40px;
  	  	  height: 40px;
  	  	}
  	  	&-name {
  	  	  display: inline-block;
  	  	  margin: 8px 0 6px;
  	  	  width: 40px;
  	  	  text-align: center;
		  font-size: @font-size-12;
		  font-weight: 600;
		  color: @black;
  	  	}
  	  	&-divider {
  	  	  width: 40px;
		  height: 4px;
		  background: @orange-light;
		  border-radius: 3px;
  	  	}
  	  	&_fixed {
  	      position: fixed;
  	      right: 36px;
          height: 71px;
  	      background: #fff;
  	    }
  	  }
  	  &::-webkit-scrollbar {
		display: none;
	  }
  	}
  	&-insurance {
  	  &-item {
  	  	display: flex;
  	  	align-items: center;
  	  	height: 76px;
		&-middle {
		  display: flex;
	      flex-direction: column;
	      justify-content: space-between;
	      box-sizing: border-box;
		  margin: 0 10px 0 8px;
		  padding: 3px 0;
		  width: 169px;
		  .Ufii-middle-main {
		  	margin-bottom: 6px;
		    font-size: 0;
		  	text-align: left;
		  	&-title {
		  	  margin-right: 8px;
			  font-size: @font-size-16;
			  font-weight: 600;
		      color: #242629;
		  	}
		  	&-status {
		  	  display: inline-block;
			  width: 44px;
			  height: 16px;
			  line-height: 16px;
			  text-align: center;
			  background: @tag-warning-light-background-color;
			  border-radius: 8px 2px 8px 2px;
			  font-size: 11px;
              font-weight: 400;
              color: @tag-warning-light-color;
		  	}
		  }
		  .Ufii-middle-footer {
		  	text-align: left;
		  	font-size: @font-size-12;
			font-weight: 400;
			color: @gray-4;
			line-height: 16px;
		  }
		  &_enable {
		  	width: auto;
		  }
		}
		&-left {
  	      width: 72px;
		  padding: 6px 0;
		  line-height: normal;
		  text-align: center;
		  background: @orange-light;
		  border-radius: @border-radius-sm;
		  font-size: @font-size-12;
		  font-weight: 600;
		  color: @black;
  	    }
  	    &:not(:last-child) {
  	      border-bottom: 1px solid #EBEBEB;
  	    }
  	  }
  	}
  }
  &-service {
  	margin: 0 16px 14px;
  	padding: 20px 20px 0 20px;
  	background-color: @user-module-background-color;
  	border-radius: @border-radius-md;
  	&-title {
  	  margin-bottom: 3px;
      text-align: left;
  	  font-size: 18px;
	  font-weight: 600;
	  color: #242629;
  	}
  	&-main {
  	  &-item {
  	  	display: flex;
  	  	align-items: center;
  	  	padding: 0;
		height: 61px;
	  	/deep/ .cr-cell__left-icon {
	  		margin-right: 12px;
	  		height: auto;
	  		line-height: normal;
	  		.cr-icon__image {
		  	  width: 20px;
		  	  height: 20px;
		  	}
	  	}
	  	/deep/ .cr-cell__title {
	  	  flex: 0 1 auto;
	  	  font-size: @font-size-16;
		  font-weight: 400;
		  color: @black;
		  .cr-cell__label {
		  	display: none;
		  }
	  	}
	  	&-svg {
	  	  width: 16px;
	  	  height: 16px;
	  	}
	  	&:not(:last-child):after {
	  	  left: 0;
		  border-bottom: 1px solid #EBEBEB;
		  transform: scaleY(1);
	  	}
  	  }
  	}
  }
  &-logo {
  	display: flex;
    flex-direction: column;
    align-items: center;
  	margin: 0 130px 82.92px;
  	font-size: 0;
  	&-svg {
  	  margin-bottom: 3.08px;
	  width: 116px;
	  height: 43px;
  	}
  	&-desc {
  	  margin: 0;
      width: 100px;
      padding: 1px 0;
      line-height: normal;
	  text-align: center;
	  background: @user-module-background-color;
      border-radius: @border-radius-md;
	  font-size: @font-size-11;
	  font-weight: 400;
	  color: #CCCCCC;
  	}
  }
}
