/* 用户信息区域 */
.user-info-box {
  height: 240px;
  background: #fff;
  position: relative;
}

/* 用户信息面板 */
.user-info-box .user-info-main {
  width: 782px;
  height: 206px;
  margin: 0 auto;
  background: url(/images/img/user/user_info_bg.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

/* 用户头像 */
.user-info-box .user-info-main .user-avatar {
  width: 80px;
  height: 80px;
  margin: 35px auto 12px;
  position: relative;
}

/* 头像图片 */
.user-info-box .user-info-main .user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

/* level */
.user-info-box .user-info-main .user-avatar .level {
  position: absolute;
  left: 45%;
  bottom: -12px;
  background-image: url(/images/icon/PLUS.svg);
  background-repeat: no-repeat;
  width: 56px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-left: -25px;
  color: #fff;
}

/* 手机号码 */
.user-info-box .user-info-main .phone {
  display: block;
  font-size: 16px;
  text-align: center;
  padding-top: 7px;
}

/* 其他信息 */
.user-info-box .user-info-main .other-info {
  color: #666;
  margin-top: 20px;
}

.user-info-box .user-info-main .other-info p {
  *display: inline;
  display: inline-block;
  zoom: 1;
  width: 33%;
  text-align: center;
  /* font-size: 12px; */
  height: 40px;
  line-height: 40px;
}

.user-info-box .user-info-main .other-info p label {
  margin-right: 20px;
}

/* 设置 */
.user-info-box .setup {
  position: absolute;
  top: 25px;
  right: 25px;
  color: #5898cd;
  height: 24px;
  line-height: 24px;
  padding-left: 24px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAABMUlEQVQ4T8XVvU7DMBAH8P/FzKB2hpGugLLwAJ0YQUCkDkxAXgGJEamvENqJoVIAwcjEA7BEwAojzCCY6xy6KEFplDgWGOHROv/O50+CRdu+YCVhlzuk28LJFCCQ93Y/IPCxxDHoJO2uTUxwLViBlitJn03wDNgAZYCg+UyLBLVwBpqgcok2cRkYRMkTAGPmctlNcBz6vQLkfNH32ha9AT6T/jj0aQaUjvKA3dFDj1I9BNDP+2/ZU0fnB6tS0XcLoiSbkBHMsTsAncouv7On1suoFRhEyRWATQLdeEodCppqfcrgDQDXcehvFYlswQ8A80rNLU32V15l8GD8uKj19AXAZxz6C/8Oui3Z+abI+vz62DDI2cF2e/VsLr3tI/I3z1f11Xb2wLbAP/8C6mDbT+oLsgpcJmEzBYMAAAAASUVORK5CYII=)
    0 no-repeat;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/* 用户信息区域结束 */

/* 信息总结区域 */
.self-container .summary-info {
  margin-top: 20px;
}

/* 左侧订单数据 */
.order-info-box {
  float: left;
  width: 680px;
}

/* 订单导航 */
.order-info-box .order-number {
  background: #fff;
  height: 180px;
  padding: 0 25px;
}

/* 订单标题 */
.order-info-box .order-number h3 {
  font-weight: 500;
  padding: 20px 0 33px;
  font-size: 16px;
}

/* 订单导航每项 */
.order-info-box .order-number .order-number-item {
  display: inline-block;
  zoom: 1;
  width: 19%;
  height: 70px;
  text-align: center;
}

.order-info-box .order-number .order-number-item a {
  display: block;
}

/* 导航状态图标 */
.order-info-box .order-number .order-number-item i {
  display: block;
  font-style: normal;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  background-repeat: no-repeat;
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.order-info-box .order-number .order-number-item i.icon-status-1 {
  background-image: url(/images/order/101.png);
}

.order-info-box .order-number .order-number-item:hover .icon-status-1 {
  background-image: url(/images/order/101Hover.png);
}

.order-info-box .order-number .order-number-item i.icon-status-2 {
  background-image: url(/images/order/102.png);
}

.order-info-box .order-number .order-number-item:hover .icon-status-2 {
  background-image: url(/images/order/102Hover.png);
}

.order-info-box .order-number .order-number-item i.icon-status-3 {
  background-image: url(/images/order/199.png);
}

.order-info-box .order-number .order-number-item:hover .icon-status-3 {
  background-image: url(/images/order/199Hover.png);
}

.order-info-box .order-number .order-number-item i.icon-status-4 {
  background-image: url(/images/order/449.png);
}

.order-info-box .order-number .order-number-item:hover .icon-status-4 {
  background-image: url(/images/order/449Hover.png);
}

.order-info-box .order-number .order-number-item i.icon-status-5 {
  background-image: url(/images/order/order.png);
}

.order-info-box .order-number .order-number-item:hover .icon-status-5 {
  background-image: url(/images/order/orderHover.png);
}

/* 订单数据列表 */
.order-info-box .order-list {
  background: #fff;
}

/* 每行数据 */
.order-info-box .order-list ul li {
  padding: 21px 30px;
  border-top: 1px solid #dedede;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}

/* 订单号 */
.order-info-box .order-list ul li h4 {
  font-weight: 400;
  color: #999;
  margin-bottom: 15px;
}

/* 详细信息 */
.order-info-box .order-list ul li .main-info {
  overflow: hidden;
}

/* 信息图片 */
.order-info-box .order-list ul li .main-info img {
  float: left;
  width: 45px;
  height: 45px;
  margin-right: 15px;
}

/* 信息名称 */
.order-info-box .order-list ul li .main-info .goodsName {
  float: left;
  width: 380px;
  color: #666;
  line-height: 16px;
}

/* 订单状态 */
.order-info-box .order-list ul li .main-info .status {
  float: right;
  text-align: right;
}

/* 右侧其他内容 */
.other-info-box {
  float: right;
  width: 270px;
}

/* 其他内容统计 */
.other-info-box .other-number {
  height: 180px;
  background: #fff;
  padding: 0 30px;
}

.other-info-box .other-number .other-number-item {
  display: inline-block;
  zoom: 1;
  width: 49%;
  text-align: center;
  margin-top: 28px;
}

.other-info-box .other-number .other-number-item a {
  color: #333;
}

.other-info-box .other-number .other-number-item strong {
  font-size: 24px;
}

.other-info-box .other-number .other-number-item p {
  color: #666;
  margin-top: 10px;
}

/* 广告 */
.other-info-box .other-ad {
  height: 326px;
  margin-top: 19px;
}

/* 广告图片 */
.other-info-box .other-ad img {
  width: 100%;
  height: 100%;
}

/* 信息总结区域结束 */

/* 用户信息修改区域 */
.self-edit-container {
  position: relative;
}

.self-edit-container .edit-main {
  background: #fff;
  padding: 40px 260px 50px;
}

/* 修改头像区域 */
.edit-avatar {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

/* 头像图片 */
.edit-avatar i,
.edit-avatar img {
  width: 100%;
  height: 100%;
}

.edit-avatar i {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  color: #fff;
  background: #000;
  opacity: 0.4;
  text-align: center;
  font-size: 13px;
  display: none;
}

.edit-avatar input[type="file"] {
  display: none;
}

.edit-avatar:hover i {
  display: block;
}

/* 手机号 邮箱 微信 */
.component-form-field {
  height: 40px;
  line-height: 40px;
}

/* 内容标题 */
.component-form-field .form-title {
  display: inline-block;
  width: 80px;
}

/* 内容数据 */
.component-form-field .form-text {
  padding-left: 10px;
}

.component-form-field .binding {
  cursor: pointer;
  color: var(--main-color);
  position: relative;
  padding-left: 20px;
}

.component-form-field .binding::before {
  position: absolute;
  content: "\e629";
  font-size: 14px;
  right: -30%;
}

/* 数据绑定结束 */

/* 邀请链接 */
.component-user-invitation {
  *display: inline;
  display: inline-block;
  zoom: 1;
  height: 44px;
  line-height: 44px;
  border: 1px solid #dedede;
  border-radius: 100px;
  background: #fff;
  overflow: hidden;
}

.self-edit-container .component-user-invitation {
  position: absolute;
  top: 40px;
  right: 30px;
}

.component-user-invitation span {
  float: left;
  width: 127px;
  text-align: center;
  color: #666;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/* 当前元素的最后一个兄弟元素 */
.component-user-invitation span + span {
  border-left: 1px solid #dedede;
}

/* 数据表单 */
.layui-form {
  margin-top: 0px;
}

.layui-form .component-form-field {
  margin-top: 10px;
}

.layui-form .component-form-field .form-text {
  float: right;
  display: inline-block;
  width: 364px;
}

/* 表单输入框 */
.layui-form .component-form-field .form-text input {
  width: 364px;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  border: 1px solid #dedede;
  /* border-radius: 10px; */
}

/* 输入框聚焦 */
.layui-form .component-form-field .form-text input:focus {
  border-color: var(--main-color);
}

.component-form-field .layui-input-block {
  text-align: center;
  margin-top: 30px;
}

.layui-form .component-form-field .form-text .layui-select-title {
  width: 120px;
}

.layui-form .component-form-field .layui-unselect {
  margin-top: 5px;
  width: 120px;
}

.layui-form .component-form-field .form-text input.layui-unselect {
  width: 120px;
}

/* 性别下拉选择 */
.layui-form-select dl dd.layui-this {
  background-color: var(--main-color);
  color: #fff;
}

/* address select */
.layui-form .component-form-field .form-text.address_select {
  display: flex;
  justify-content: space-between;
}

.layui-form
  .component-form-field
  .form-text.address_select
  .layui-select-title {
  width: 100px;
}

.layui-form .form-text.address_select .layui-unselect {
  margin-top: 5px;
  width: 100px;
}

.layui-form
  .component-form-field
  .form-text.address_select
  input.layui-unselect {
  width: 100px;
  font-size: 13px;
}

/* 地址搜索框 */
.address_select .layui-form-select .layui-input {
  width: 100px !important;
}

/* 提交按钮 */
.component-form-field .layui-btn {
  background-color: var(--main-color);
  border-radius: 6px;
}