/* 
.container 类的样式规则，通常用于页面的整体布局容器
设置为弹性盒子布局，子元素按行方向排列（横向排列），并且高度占满父元素（一般是整个页面可视区域等情况）
*/
.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

/* 
.main 类的样式规则，常用于页面主体部分的布局
设置为固定定位，使其脱离文档流，方便进行一些特定的布局操作
同时设置为弹性盒子布局，并且当内容超出容器时隐藏超出部分，高度占满父元素（比如占满整个页面可视区域等）
*/
.main {
  position: fixed;
  display: flex;
  overflow: hidden;
  height: 100%;
}

/* 
.search-bar 类的样式规则，用于搜索栏部分的整体样式设置
宽度占满父元素（一般是所在的布局区域），设置为固定定位，使其固定在页面顶部（top: 0; left: 0;）
文字颜色为灰色（#777），背景颜色为白色（#fff），添加了一个淡淡的阴影效果，层级（z-index）为3，确保显示在合适的层级上
内部还有一些内边距（padding）用于调整内部元素的布局空间
*/
.search-bar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  color: #777;
  background: #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
  z-index: 3;
  padding: 20rpx 0;
  /* 
 .arrow 类是 search-bar 内部的一个元素样式，用于一个箭头形状的样式设置（可能是返回箭头等）
  设置了宽度、高度以及边框样式来构成箭头形状（通过 border-bottom 和 border-left 绘制，并旋转 45 度）
  同时设置了绝对定位，指定了在父元素（search-bar）中的具体位置（left: 30rpx; top: 41rpx;）
  */
  .arrow {
    width: 20rpx;
    height: 20rpx;
    border-bottom: 2rpx solid #777;
    border-left: 2rpx solid #777;
    transform: rotate(45deg);
    position: absolute;
    left: 30rpx;
    top: 41rpx;
  }
  /* 
 .search-box 类用于搜索框部分的样式设置，设置为弹性盒子布局，使其内部子元素能方便地居中对齐等
  高度为 60rpx，背景颜色为浅灰色（#f7f7f7），层级（z-index）设置为较高的 999，保证显示在其他元素之上
  宽度占父元素的 92%，设置了圆角效果（border-radius）使其看起来更圆润，文本居中对齐，并且通过 margin: auto 使其在父元素（search-bar）中水平居中
  */
  .search-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60rpx;
    background: #f7f7f7;
    z-index: 999;
    width: 92%;
    border-radius: 50rpx;
    text-align: center;
    margin: auto;
    /* 
   .search-img 类是 search-box 内部的图片元素样式，设置了宽度、高度以及右边距，用于调整图片在搜索框内的显示效果
    */
    .search-img {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
  }
  /* 
 .search-hint 类用于搜索栏提示文字的样式设置，设置了字体大小，并通过绝对定位将其放置在父元素（search-bar）的右上角位置（right: 30rpx; top: 32rpx;）
  */
  .search-hint {
    font-size: 28rpx;
    position: absolute;
    right: 30rpx;
    top: 32rpx;
  }
}

/* 
.sear-input 类可能用于搜索输入框的文字样式设置，这里只设置了字体大小，也许在实际应用中还会有其他相关样式设置
*/
.sear-input {
  font-size: 28rpx;
}

/* 
.leftmenu 类用于左侧菜单部分的样式设置，设置了宽度、高度以及盒子模型属性（box-sizing），背景颜色为浅灰色（#f5f6f7）
设置了超出内容可滚动（overflow: scroll），并且设置了层级（z-index）为 2，使其显示在合适的层级上
*/
.leftmenu {
  width: 200rpx;
  height: 100%;
  box-sizing: border-box;
  background-color: #f5f6f7;
  overflow: scroll;
  z-index: 2;
  /* 
 .ca-empty 类是 leftmenu 内部在菜单为空时显示的提示样式，设置了顶部内边距、文本对齐方式、文字颜色和字体大小，用于提示用户当前菜单无内容等情况
  */
  .ca-empty {
    padding-top: 400rpx;
    text-align: center;
    color: #aaa;
    font-size: 24rpx;
  }
}

/* 
.menu-item 类用于左侧菜单中每个菜单项的样式设置，设置了行高、高度、文本对齐方式、底部边框样式、文字颜色和字体大小等基本样式
同时内部有一个.tips-num 类的子元素，用于显示一些提示数字（比如未读消息数量等），设置了绝对定位以及具体的样式，如背景颜色、文字颜色、字体大小、圆角效果等
*/
.menu-item {
  line-height: 90rpx;
  height: 90rpx;
  text-align: center;
  border-bottom: 2rpx silid #e3e3e3;
  position: relative;
  color: #777;
  font-size: 28rpx;

  text.tips-num {
    position: absolute;
    top: 20rpx;
    right: 15rpx;
    border-radius: 15rpx;
    width: 30rpx;
    height: 30rpx;
    background: red;
    color: #fff;
    font-size: 25rpx;
    line-height: 30rpx;
  }
}

/* 
.menu-item.active 类用于左侧菜单中被激活（选中）的菜单项的样式设置，改变了文字颜色为红色（#eb2444），字体加粗，背景颜色为白色（#fff）
并且通过伪元素 ::before 在菜单项左侧添加了一个红色的竖条（用于视觉上突出选中状态），设置了该竖条的位置、宽度、高度等样式属性
*/
.menu-item.active {
  color: #eb2444;
  font-size: 28rpx;
  font-weight: bold;
  position: relative;
  background: #fff;

  &:before {
    position: absolute;
    left: 0;
    content: "";
    width: 8rpx;
    height: 32rpx;
    top: 29rpx;
    background: #eb2444;
  }
}

/* 
.rightcontent 类用于右侧内容区域的样式设置，设置了宽度、高度、盒子模型属性（box-sizing）以及背景颜色，层级（z-index）为 1
*/
.rightcontent {
  width: 550rpx;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 1;
  /* 
 .adver-map 类用于右侧内容区域中广告地图之类的部分样式设置，宽度自适应父元素（auto），设置了盒子模型属性，超出内容隐藏，并且设置了相对定位方便内部元素进行定位布局
  还有一些外边距设置用于调整与周边元素的间距，内部的.item-a 类用于包裹图片等元素，设置图片最大宽度为 100%，保证图片能自适应显示在该区域内
  */
  .adver-map {
    width: auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    margin: 30rpx 20rpx 0;

    .item-a {
      display: block;
      font-size: 0;
      width: 100%;

      image {
        max-width: 100%;
      }
    }
  }
  /* 
 .cont-item 类用于右侧内容区域中具体内容项的样式设置，设置了内边距，用于调整内部元素的布局空间，并且设置了底部内边距较大（94rpx），可能是为了预留底部其他元素的空间等情况
  内部还有多个子元素样式用于更细致的布局和样式设置
  */
  .cont-item {
    padding: 0 20rpx 20rpx 20rpx;
    padding-bottom: 94rpx;
    /* 
   .show-item 类用于每个具体展示内容项的样式设置，设置了一些基本的布局样式，如文本对齐方式、内边距等，并且通过伪元素 ::after 添加了一条底部的分割线（用于视觉上区分不同内容项），设置了分割线的样式属性，如颜色、宽度、位置等
    内部还有左右两部分的布局样式，分别用于展示图片和文字等信息
    */
    .show-item {
      .more-prod-pic {
        text-align: center;
        width: 150rpx;
        height: 150rpx;
        line-height: 150rpx;
        font-size: 0;

        .more-pic {
          max-width: 100%;
          max-height: 100%;
          border-radius: 8rpx;
          vertical-align: middle;
        }
      }

      position: relative;
      display: flex;
      justify-content: flex-start;
      padding: 20rpx 0;

      &::after {
        content: '';
        background-color: #f4f4f4;
        left: 0;
        height: 1px;
        transform-origin: 50% 100% 0;
        bottom: 0;
        position: absolute;
        display: block;
        width: 510rpx;
        padding-left: 20rpx;
      }

      .prod-text-right {
        margin-left: 20rpx;
        width: 75%;
        /* 
       .cate-prod-info 类用于展示产品分类相关的信息文本样式设置，设置了字体大小、文字颜色、外边距以及文本超出一行时的显示方式（通过 -webkit-box 相关属性设置只显示一行并超出部分隐藏）
        */
        .cate-prod-info {
          font-size: 22rpx;
          color: #999;
          margin: 10rpx 0 20rpx 0;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
        /* 
       .prod-text.more 类用于产品名称等主要文本的样式设置，设置了外边距、字体大小、文本超出一行时的显示方式（通过 -webkit-box 相关属性设置只显示一行并超出部分隐藏，以及换行等处理），文字颜色为黑色（#000）
        */
        .prod-text.more {
          margin: 0;
          font-size: 28rpx;
          display: -webkit-box;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          color: #000;
        }
        /* 
       .prod-price.more 类用于产品价格文本的样式设置，设置了字体大小、文字颜色（红色，#eb2444）以及字体类型（arial）
        */
        .prod-price.more {
          font-size: 28rpx;
          color: #eb2444;
          font-family: arial;
        }
      }
    }
  }
}

/* 
.th-cate-con 类用于设置一个可以自动换行的弹性盒子布局，一般用于多个分类元素的排列，使其能根据父元素宽度自动换行展示
*/
.th-cate-con {
  display: flex;
  flex-wrap: wrap;
}

/* 
.sub-category 类用于子分类元素的样式设置，设置了宽度占父元素的三分之一（33.33%），使其可以在一行内均匀排列三个（如果父元素宽度合适）
设置为纵向的弹性盒子布局（flex-direction: column），用于内部元素的上下排列，还有内边距以及水平居中对齐等样式设置
*/
.sub-category {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  box-sizing: border-box;
  align-items: center;
}

/* 
.sub-category-item 类用于子分类中每个具体项的样式设置，内部的.more-pic 类用于设置图片元素的样式，设置了宽度、高度以及底部内边距
文本元素（text）设置了字体大小以及文本换行方式（word-break: break-word）
*/
.sub-category-item {
  > .more-pic {
    width: 120rpx;
    height: 120rpx;
    padding-bottom: 10rpx;
  }

  text {
    font-size: 25rpx;
    word-break: break-word;
  }
}

/* 
.cont-item.empty 类用于右侧内容区域中当内容项为空时的样式设置，设置了显示方式（display: block）、字体大小、文字颜色以及文本对齐方式，用于提示用户该区域无内容等情况
*/
.cont-item.empty {
  display: block;
  font-size: 24rpx;
  color: #aaa;
  text-align: center;
}
