/* 定义容器样式 */
.container {
  /* 设置背景颜色 */
  background-color: #f7f7f7;
  /* 设置底部内边距，以确保内容与底部有适当的空间 */
  padding-bottom: 60rpx;
}

/* 用户信息模块样式 */
.userinfo {
  /* 设置相对定位，以便其子元素可以使用绝对定位 */
  position: relative;
  /* 占满整个宽度 */
  width: 100%;
  /* 设置白色背景 */
  background: #fff;
  /* 文本居中显示 */
  text-align: center;
  /* 上下内边距，左右无内边距 */
  padding: 30rpx 0;

  .userinfo-con {
    /* 设置固定宽度，使用户信息框在页面中心对齐 */
    width: 240rpx;
    /* 水平居中 */
    margin: auto;

    .userinfo-avatar {
      /* 确保超出部分不显示 */
      overflow: hidden;
      /* 块级显示 */
      display: block;
      /* 设置头像的尺寸 */
      width: 160rpx;
      height: 160rpx;
      /* 圆形头像 */
      border-radius: 50%;
      /* 添加阴影效果 */
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
      /* 水平居中 */
      margin: auto;

      image {
        /* 设置图像的尺寸 */
        width: 160rpx;
        height: 160rpx;
      }
    }

    .userinfo-name {
      /* 设置字体大小 */
      font-size: 30rpx;
      /* 加粗字体 */
      font-weight: bold;
      /* 与头像保持一定间距 */
      margin-top: 20rpx;
      /* 处理文本溢出 */
      overflow: hidden;
      /* 使用 WebKit 独有的多行文本截断 */
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      /* 当文本溢出时用省略号表示 */
      text-overflow: ellipsis;
      /* 允许单词内部断行 */
      word-break: break-all;
    }
  }
}

/* 未登录用户的提示信息样式 */
.userinfo-none {
  /* 使用 Flexbox 布局，使子元素垂直和水平居中 */
  display: flex;
  /* 内边距 */
  padding: 30rpx;
  /* 白色背景 */
  background: #fff;
  /* 子元素垂直居中 */
  align-items: center;

  .default-pic {
    /* 右侧内边距 */
    padding-right: 30rpx;

    image {
      /* 设置图像的尺寸 */
      width: 160rpx;
      height: 160rpx;
    }
  }
}

/* 未登录状态下的按钮和文本样式 */
.none-login {
  button {
    /* 按钮背景色为白色 */
    background: #fff;

    &::after {
      /* 移除默认的按钮边框 */
      border: 0;
    }
  }

  .unlogin {
    /* 设置字体大小 */
    font-size: 30rpx;
    /* 文本左对齐 */
    text-align: left;
    /* 移除上下内边距 */
    padding: 0;
  }

  .click-login {
    /* 设置较小的字体大小 */
    font-size: 26rpx;
    /* 颜色较深 */
    color: #777;
    /* 文本左对齐 */
    text-align: left;
    /* 移除上下内边距 */
    padding: 0;
  }
}

/* 绑定手机号的样式 */
.binding-phone {
  /* 相对定位 */
  position: relative;
  /* 白色背景 */
  background: #fff;
  /* 固定高度 */
  height: 80rpx;
  /* 行高与高度相同，使文本垂直居中 */
  line-height: 80rpx;
  /* 内边距 */
  padding: 0 30rpx;
  /* 上下边框 */
  border-top: 2rpx solid #f7f7f7;
  border-bottom: 2rpx solid #f7f7f7;

  .show-tip {
    /* 设置字体大小 */
    font-size: 26rpx;
  }

  .gotobinding {
    /* 设置圆角 */
    border-radius: 8rpx;
    /* 字体大小 */
    font-size: 28rpx;
    /* 颜色为红色 */
    color: #e24b42;
    /* 加粗字体 */
    font-weight: bold;
  }
}

/* 列表内容样式 */
.list-cont {
  /* 占满整个宽度 */
  width: 100%;
  /* 背景颜色 */
  background: #f7f7f7;
  /* 顶部外边距 */
  margin-top: 20rpx;

  .total-order {
    /* 白色背景 */
    background: #fff;

    .order-tit {
      /* 使用 Flexbox 布局 */
      display: flex;
      /* 两端对齐 */
      justify-content: space-between;
      /* 固定高度 */
      height: 80rpx;
      /* 行高与高度相同，使文本垂直居中 */
      line-height: 80rpx;
      /* 字体大小 */
      font-size: 30rpx;
      /* 下边框 */
      border-bottom: 1px solid #f7f7f7;
      /* 内边距 */
      padding: 0 30rpx;

      .checkmore {
        /* 较小的字体大小 */
        font-size: 22rpx;
        /* 颜色较暗 */
        color: #80848f;
        /* 使用 Flexbox 布局 */
        display: flex;
        /* 垂直居中 */
        align-items: center;
      }
    }

    .procedure {
      /* 使用 Flexbox 布局 */
      display: flex;
      /* 项目均匀分布 */
      justify-content: space-around;
      /* 项目垂直居中 */
      align-items: center;
      /* 字体大小 */
      font-size: 25rpx;
      /* 固定高度 */
      height: 160rpx;

      .items {
        /* 相对定位 */
        position: relative;
        /* 使用 Flexbox 布局 */
        display: flex;
        /* 项目垂直排列 */
        flex-direction: column;
        /* 项目水平居中 */
        align-items: center;

        image {
          /* 设置图像的尺寸 */
          width: 70rpx;
          height: 70rpx;
          /* 与下方文字保持间距 */
          margin-bottom: 20rpx;
        }

        .num-badge {
          /* 绝对定位 */
          position: absolute;
          /* 设置徽章位置 */
          top: -15rpx;
          right: -12rpx;
          /* 颜色为红色 */
          color: #eb2444;
          /* 边框颜色为红色 */
          border: 3rpx solid #eb2444;
          /* 圆形 */
          border-radius: 50rpx;
          /* 白色背景 */
          background: #fff;
          /* 最小宽度 */
          min-width: 30rpx;
          /* 固定高度 */
          height: 30rpx;
          /* 行高与高度相同，使文本垂直居中 */
          line-height: 30rpx;
          /* 文本水平居中 */
          text-align: center;
          /* 内边距 */
          padding: 2rpx;
          /* 块级显示 */
          display: block;
        }
      }
    }
  }

  .my-menu {
    /* 白色背景 */
    background-color: #fff;
    /* 顶部外边距 */
    margin-top: 20rpx;

    .memu-item {
      /* 使用 Flexbox 布局 */
      display: flex;
      /* 项目垂直居中 */
      align-items: center;
      /* 项目两端对齐 */
      justify-content: space-between;
      /* 固定高度 */
      height: 100rpx;
      /* 下边框 */
      border-bottom: 2rpx solid #f7f7f7;
      /* 内边距 */
      padding: 0 30rpx;

      &:nth-child(1) {
        /* 第一个项目的上边框 */
        border-top: 2rpx solid #f7f7f7;
      }

      &:last-child {
        /* 最后一个项目的下边框移除 */
        border-bottom: none;
      }

      text {
        /* 字体大小 */
        font-size: 28rpx;
      }

      image {
        /* 设置图像的尺寸 */
        width: 50rpx;
        height: 50rpx;
        /* 与右侧文本保持间距 */
        margin-right: 20rpx;
      }

      .i-name {
        /* 使用 Flexbox 布局 */
        display: flex;
        /* 项目垂直居中 */
        align-items: center;
      }
    }
  }
}

/* 箭头样式 */
.arrowhead {
  /* 设置箭头的尺寸 */
  width: 15rpx;
  height: 15rpx;
  /* 上边框 */
  border-top: 2rpx solid #999;
  /* 右边框 */
  border-right: 2rpx solid #999;
  /* 旋转45度形成箭头形状 */
  transform: rotate(45deg);
  /* 左侧外边距 */
  margin-left: 10rpx;
}

/* 产品栏样式 */
.prod-col {
  /* 顶部外边距 */
  margin-top: 20rpx;
  /* 白色背景 */
  background: #fff;
  /* 使用 Flexbox 布局 */
  display: flex;
  /* 项目均匀分布 */
  justify-content: space-around;
  /* 内边距 */
  padding: 30rpx 0 10rpx 0;
  /* 字体大小 */
  font-size: 12px;

  .col-item {
    /* 文本居中 */
    text-align: center;

    .num {
      /* 字体较大且加粗 */
      font-size: 16px;
      font-weight: 700;
      /* 颜色为蓝色 */
      color: #3a86b9;
    }

    .tit {
      /* 行高 */
      line-height: 34px;
    }
  }
}

/* 登出按钮样式 */
.log-out {
  /* 内边距 */
  padding: 20rpx;
  /* 文本居中 */
  text-align: center;
  /* 顶部外边距 */
  margin-top: 20rpx;
}

.log-out-n {
  /* 字体大小 */
  font-size: 30rpx;
  /* 水平居中 */
  margin: auto;
  /* 固定宽度 */
  width: 200rpx;
  /* 内边距 */
  padding: 20rpx;
  /* 圆角 */
  border-radius: 10rpx;
  /* 红色背景 */
  background: #e43130;
  /* 白色文字 */
  color: #ffffff;
}

/* 自定义菜单按钮样式 */
button.memu-btn.memu-item {
  /* 白色背景 */
  background-color: #fff;

  &:after {
    /* 移除默认的按钮边框 */
    border: 0;
  }
}
