pvtfxms7o
/
yudao
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
qjh
秦佳浩 2 months ago
parent 220d7795d9 0696a7d423
commit 3bc455aa1f
1 changed files with 108 additions and 1 deletions
Show Stats Download Patch File Download Diff File

109
front-end/mall4uni/src/pages/category/category.scss
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save