/* 
.container 类用于设置页面整体容器的样式。
设置了背景颜色为浅灰色（#f4f4f4），顶部添加了一条 2rpx 宽的灰色边框（#e9eaec），并且设置最小高度为视口高度（100vh），确保页面在内容较少时也能占满整个屏幕高度。
*/
.container {
  background-color: #f4f4f4;
  border-top: 2rpx solid #e9eaec;
  min-height: 100vh;
}

/* 
.main 类用于页面主体部分的样式设置。
设置了顶部外边距为 20rpx，底部内边距为 150rpx，通过这两个属性来调整主体内容在页面中的位置以及预留底部空间（可能用于放置其他固定在底部的元素等情况）。
*/
.main {
  margin-top: 20rpx;
  padding-bottom: 150rpx;
}

/* 
.address 类用于地址相关区域的整体样式设置，该区域宽度占满父元素（100%），背景颜色为白色（#fff），底部有一条 2rpx 宽的灰色边框（#e9eaec），并且设置了底部外边距为 15rpx，用于与下方元素隔开一定距离。
其内部还有多个子元素的样式设置，用于更细致地布局和展示地址相关信息。
*/
.address {
  margin-bottom: 15rpx;
  width: 100%;
  background-color: #fff;
  border-bottom: 2rpx solid #e9eaec;
  /* 
.personal 类是 address 内部用于个人信息相关部分的样式设置，设置了相对定位，方便内部的一些元素基于该元素进行定位，同时设置了上下和左右的内边距，并且底部添加了一条 3rpx 宽的虚线边框（#e9eaec），用于视觉上区分不同部分的信息。
  其内部还有更细化的子元素样式设置。
  */
  .personal {
    position: relative;
    padding: 20rpx 30rpx;
    border-bottom: 3rpx dashed #e9eaec;
    /* 
  .info-tit 类用于个人信息标题部分的样式设置，内部包含姓名（.name）、电话（.tel）等信息以及一个图片元素的样式设置，用于展示相关图标等情况，通过不同的样式属性来控制它们的布局、字体大小、显示方式等。
    */
    .info-tit {
      .name {
        margin-right: 30rpx;
        font-size: 32rpx;
        display: inline-block;
      }

      .tel {
        font-size: 30rpx;
      }

      image {
        position: absolute;
        right: 30rpx;
        top: 46rpx;
        width: 40rpx;
        height: 40rpx;
        margin-left: 50rpx;
        vertical-align: middle;
      }
    }
  }
  /* 
.select-btn 类用于地址选择按钮相关部分的样式设置，设置了上下和左右的内边距，通过弹性盒子布局（display: flex），使其内部子元素能方便地实现水平对齐（align-items: center）以及两端对齐（justify-content: space-between），一般用于放置如选择、编辑等按钮之类的元素，并且对内部的文本元素（.box）设置了字体大小。
  */
  .select-btn {
    padding: 15rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .box {
      font-size: 26rpx;
    }
  }
}

/* 
.personal 类下的.addr 类用于地址详细内容部分的样式设置，设置了字体大小以及上下外边距，其中顶部外边距相对大一些（20rpx），用于调整与上方元素的间距，并且内部的.addr-get 类用于具体地址文本的样式设置，设置为行内块元素（display: inline-block），文字颜色为灰色（#999），宽度占满父元素（100%），并设置了文本换行方式（word-break: break-word），确保长地址文本能正确换行显示。
这里出现了两次.personal 类，可能在 HTML 结构中有不同的嵌套层级对应不同的样式应用场景，具体要结合 HTML 来看。
*/
.personal {
  .addr {
    font-size: 26rpx;
    margin: 10rpx 0;
    margin-top: 20rpx;

    .addr-get {
      display: inline-block;
      color: #999;
      width: 100%;
      word-break: break-word;
    }
  }
}

/* 
.footer 类用于页面底部固定栏的样式设置，设置为固定定位（position: fixed），使其固定在页面底部（bottom: 0），宽度占满父元素（100%），高度为 100rpx，并且设置了行高与高度相等，使内部文本垂直居中，文本对齐方式为居中对齐（text-align: center），背景颜色为白色（#fff），添加了一个淡淡的阴影效果，用于在视觉上与页面主体区分开，内部文本元素（text）设置了字体大小和颜色（红色，#eb2444）。
*/
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05);

  text {
    font-size: 32rpx;
    color: #eb2444;
  }
}

/* 
.empty 类用于当某个区域内容为空时的整体样式设置，内部包含图片（.img）和文本（.txt）两部分的样式设置，用于展示提示信息，告知用户该区域暂无内容等情况。
*/
.empty {
  /* 
.img 类用于空内容提示区域中图片部分的样式设置，设置文本对齐方式为居中对齐，顶部外边距为 130rpx，使图片在垂直方向上处于合适位置，内部的图片元素（image）设置了宽度、高度以及显示方式（display: block 和 margin: auto），确保图片能在该区域内水平居中显示。
  */
  .img {
    text-align: center;
    margin-top: 130rpx;

    image {
      width: 100rpx;
      height: 100rpx;
      display: block;
      margin: auto;
    }
  }
  /* 
.txt 类用于空内容提示区域中文本部分的样式设置，设置了顶部外边距为 30rpx，字体大小以及文本对齐方式为居中对齐，文字颜色为灰色（#999），用于展示相应的提示文字内容。
  */
  .txt {
    margin-top: 30rpx;
    font-size: 24rpx;
    text-align: center;
    color: #999;
  }
}
