diff --git a/front-end/mall4uni/src/pages/category/category.scss b/front-end/mall4uni/src/pages/category/category.scss index 47b86c2..12d5ffb 100644 --- a/front-end/mall4uni/src/pages/category/category.scss +++ b/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 { + > .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;