Merge branch 'qjh' of https://bdgit.educoder.net/pvtfxms7o/yudao

front-end/mall4uni/src/pages/category/category.scss

@@ -1,14 +1,31 @@
+/* 
+.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;
@@ -19,6 +36,11 @@
   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;
@@ -29,6 +51,11 @@
     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;
@@ -40,12 +67,18 @@
     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;
@@ -53,9 +86,18 @@
     top: 32rpx;
   }
 }
+
+/* 
+.sear-input 类可能用于搜索输入框的文字样式设置，这里只设置了字体大小，也许在实际应用中还会有其他相关样式设置
+*/
 .sear-input {
   font-size: 28rpx;
 }
+
+/* 
+.leftmenu 类用于左侧菜单部分的样式设置，设置了宽度、高度以及盒子模型属性（box-sizing），背景颜色为浅灰色（#f5f6f7）
+设置了超出内容可滚动（overflow: scroll），并且设置了层级（z-index）为 2，使其显示在合适的层级上
+*/
 .leftmenu {
   width: 200rpx;
   height: 100%;
@@ -63,6 +105,9 @@
   background-color: #f5f6f7;
   overflow: scroll;
   z-index: 2;
+  /* 
+ .ca-empty 类是 leftmenu 内部在菜单为空时显示的提示样式，设置了顶部内边距、文本对齐方式、文字颜色和字体大小，用于提示用户当前菜单无内容等情况
+  */
   .ca-empty {
     padding-top: 400rpx;
     text-align: center;
@@ -70,6 +115,11 @@
     font-size: 24rpx;
   }
 }
+
+/* 
+.menu-item 类用于左侧菜单中每个菜单项的样式设置，设置了行高、高度、文本对齐方式、底部边框样式、文字颜色和字体大小等基本样式
+同时内部有一个.tips-num 类的子元素，用于显示一些提示数字（比如未读消息数量等），设置了绝对定位以及具体的样式，如背景颜色、文字颜色、字体大小、圆角效果等
+*/
 .menu-item {
   line-height: 90rpx;
   height: 90rpx;
@@ -78,6 +128,7 @@
   position: relative;
   color: #777;
   font-size: 28rpx;
+
   text.tips-num {
     position: absolute;
     top: 20rpx;
@@ -91,12 +142,18 @@
     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;
@@ -107,30 +164,48 @@
     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;
@@ -138,6 +213,7 @@
         height: 150rpx;
         line-height: 150rpx;
         font-size: 0;
+
         .more-pic {
           max-width: 100%;
           max-height: 100%;
@@ -145,10 +221,12 @@
           vertical-align: middle;
         }
       }
+
       position: relative;
       display: flex;
       justify-content: flex-start;
       padding: 20rpx 0;
+
       &::after {
         content: '';
         background-color: #f4f4f4;
@@ -161,9 +239,13 @@
         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;
@@ -173,6 +255,9 @@
           -webkit-line-clamp: 1;
           overflow: hidden;
         }
+        /* 
+       .prod-text.more 类用于产品名称等主要文本的样式设置，设置了外边距、字体大小、文本超出一行时的显示方式（通过 -webkit-box 相关属性设置只显示一行并超出部分隐藏，以及换行等处理），文字颜色为黑色（#000）
+        */
         .prod-text.more {
           margin: 0;
           font-size: 28rpx;
@@ -185,6 +270,9 @@
           -webkit-box-orient: vertical;
           color: #000;
         }
+        /* 
+       .prod-price.more 类用于产品价格文本的样式设置，设置了字体大小、文字颜色（红色，#eb2444）以及字体类型（arial）
+        */
         .prod-price.more {
           font-size: 28rpx;
           color: #eb2444;
@@ -194,10 +282,19 @@
     }
   }
 }
+
+/* 
+.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;
@@ -206,17 +303,27 @@
   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;