|
|
/* 导入上级目录下的 app.wxss 文件，用于引入一些全局样式或基础样式设置，使当前样式文件可以复用其中的样式规则 */
|
|
|
@import "../../app.wxss";
|
|
|
|
|
|
/* 商品展示项（prod-items）的样式类，用于设置商品展示区域整体的样式，如宽度、布局、背景色、内边距等 */
|
|
|
.prod-items {
|
|
|
/* 设置宽度为 375rpx（rpx 是微信小程序中的自适应单位，会根据屏幕宽度自动换算） */
|
|
|
width: 375rpx;
|
|
|
/* 设置左浮动，使其在水平方向上按照浮动规则排列 */
|
|
|
float: left;
|
|
|
/* 设置背景颜色为白色 */
|
|
|
background: #fff;
|
|
|
/* 设置底部内边距为 20rpx，用于和内部元素隔开一定距离等 */
|
|
|
padding-bottom: 20rpx;
|
|
|
/* 设置盒模型为 border-box，这样设置内边距和边框不会增加元素的整体宽度 */
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/* 选择奇数位置（2n - 1）的 prod 元素下的 prod-items 元素的样式规则，用于对奇数位置商品展示项设置不同的内边距样式 */
|
|
|
prod:nth-child(2n - 1).prod-items {
|
|
|
/* 设置上、右、下、左的内边距分别为 20rpx、10rpx、10rpx、20rpx，以调整内部元素布局和间距 */
|
|
|
padding: 20rpx 10rpx 10rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
/* 选择偶数位置（2n）的 prod 元素下的 prod-items 元素的样式规则，用于对偶数位置商品展示项设置不同的内边距样式 */
|
|
|
prod:nth-child(2n).prod-items {
|
|
|
/* 设置上、右、下、左的内边距分别为 20rpx、20rpx、10rpx、10rpx，以调整内部元素布局和间距 */
|
|
|
padding: 20rpx 20rpx 10rpx 10rpx;
|
|
|
}
|
|
|
|
|
|
/* 商品展示项中热门图片容器（hot-imagecont）里图片（hotsaleimg）的样式类，用于设置商品图片的尺寸大小 */
|
|
|
.hot-imagecont.hotsaleimg {
|
|
|
/* 设置图片宽度为 345rpx */
|
|
|
width: 345rpx;
|
|
|
/* 设置图片高度为 345rpx */
|
|
|
height: 345rpx;
|
|
|
}
|
|
|
|
|
|
/* 商品展示项中热门文本（hot-text）里商品名称（hotprod-text）的样式类，用于设置商品名称相关的文本样式，如高度、字体大小、文本溢出处理等 */
|
|
|
.hot-text.hotprod-text {
|
|
|
/* 设置高度为 76rpx */
|
|
|
height: 76rpx;
|
|
|
/* 设置字体大小为 28rpx */
|
|
|
font-size: 28rpx;
|
|
|
/* 使用-webkit-box 布局方式，这是一种弹性盒子布局的旧浏览器兼容写法，用于实现多行文本溢出省略显示的效果 */
|
|
|
display: -webkit-box;
|
|
|
/* 允许单词在边界处断开换行，避免文本过长出现显示问题 */
|
|
|
word-break: break-all;
|
|
|
/* 超出部分隐藏 */
|
|
|
overflow: hidden;
|
|
|
/* 超出部分用省略号显示 */
|
|
|
text-overflow: ellipsis;
|
|
|
/* 再次声明使用-webkit-box 布局方式，这是兼容写法的一部分 */
|
|
|
display: -webkit-box;
|
|
|
/* 设置显示的行数为 2 行，结合前面的属性实现文本最多显示 2 行并溢出省略的效果 */
|
|
|
-webkit-line-clamp: 2;
|
|
|
/* 设置盒子的排列方向为垂直方向，用于多行文本的布局控制 */
|
|
|
-webkit-box-orient: vertical;
|
|
|
/* 设置文本颜色为黑色 */
|
|
|
color: #000;
|
|
|
}
|
|
|
|
|
|
/* 商品展示项中热门图片容器（hot-imagecont）的样式类，用于设置图片容器的样式，如圆角、文本对齐、字体大小等 */
|
|
|
.prod-items.hot-imagecont {
|
|
|
/* 设置圆角半径为 8rpx，使图片容器看起来更圆润 */
|
|
|
border-radius: 8rpx;
|
|
|
/* 设置文本居中对齐，对于图片容器内可能有的文本元素生效 */
|
|
|
text-align: center;
|
|
|
/* 设置字体大小为 0，通常用于消除图片与其他内联元素之间的默认间距问题等 */
|
|
|
font-size: 0;
|
|
|
}
|
|
|
|
|
|
/* 商品展示项中热门文本（hot-text）的样式类，用于设置热门文本区域整体的外边距等样式，使其与上面的图片容器隔开一定距离 */
|
|
|
.prod-items.hot-text {
|
|
|
/* 设置上边距为 20rpx，与上面的图片容器拉开距离 */
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
/* 商品展示项中热门文本（hot-text）里商品评价信息（prod-info）的样式类，用于设置商品评价相关的文本样式，如字体大小、颜色、外边距等 */
|
|
|
.prod-items.hot-text.prod-info {
|
|
|
/* 设置字体大小为 20rpx */
|
|
|
font-size: 20rpx;
|
|
|
/* 设置文本颜色为灰色系，用于和其他主要信息区分开来，体现辅助信息的感觉 */
|
|
|
color: #777;
|
|
|
/* 设置上边距为 8rpx，与上面的商品名称等信息隔开一定距离 */
|
|
|
margin-top: 8rpx;
|
|
|
}
|
|
|
|
|
|
/* 商品展示项中热门文本（hot-text）里商品价格信息（prod-text-info）的样式类，用于设置商品价格信息区域整体的样式，如位置、高度、行高等 */
|
|
|
.prod-items.hot-text.prod-text-info {
|
|
|
/* 设置相对定位，方便其内部元素基于它进行定位 */
|
|
|
position: relative;
|
|
|
/* 设置高度为 50rpx */
|
|
|
height: 50rpx;
|
|
|
/* 设置行高为 70rpx，用于调整文本在垂直方向上的位置等 */
|
|
|
line-height: 70rpx;
|
|
|
/* 设置字体为 Arial 字体 */
|
|
|
font-family: Arial;
|
|
|
}
|
|
|
|
|
|
/* 商品展示项中热门文本（hot-text）里商品价格信息（prod-text-info）中价格（price）的样式类，用于设置价格文本的颜色，使其突出显示 */
|
|
|
.prod-items.hot-text.prod-text-info.price {
|
|
|
/* 设置文本颜色为红色系，通常用于醒目地展示价格信息 */
|
|
|
color: #eb2444;
|
|
|
}
|
|
|
|
|
|
/* 商品展示项中限时价（deadline-price）的样式类，用于设置限时价文本的字体大小、外边距等样式 */
|
|
|
.deadline-price {
|
|
|
/* 设置字体大小为 22rpx */
|
|
|
font-size: 22rpx;
|
|
|
/* 设置右边距为 5rpx，使其与旁边的价格等文本隔开一定距离 */
|
|
|
margin-right: 5rpx;
|
|
|
} |
