|
|
|
@ -1,8 +1,16 @@
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
.prod-items 类用于设置商品相关元素的样式
|
|
|
|
|
|
|
|
宽度占比为43%，背景颜色为白色，底部外边距为40rpx，并且使用了盒模型为 border-box（使元素的宽高包含内边距和边框）
|
|
|
|
|
|
|
|
*/
|
|
|
|
.prod-items {
|
|
|
|
.prod-items {
|
|
|
|
width: 43%;
|
|
|
|
width: 43%;
|
|
|
|
background: #fff;
|
|
|
|
background: #fff;
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
.hot-imagecont 类用于设置包含商品图片元素的容器样式
|
|
|
|
|
|
|
|
给这个容器设置了圆角、文本居中以及将字体大小设为0（通常用于去除图片下方的空白间隙等情况）
|
|
|
|
|
|
|
|
*/
|
|
|
|
.hot-imagecont {
|
|
|
|
.hot-imagecont {
|
|
|
|
border-radius: 8rpx;
|
|
|
|
border-radius: 8rpx;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
@ -10,17 +18,27 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.hot-text {
|
|
|
|
.hot-text {
|
|
|
|
margin-top: 20rpx;
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
.prod-info 类用于设置商品相关信息文本的样式，比如字体大小、颜色、内边距以及距离顶部的外边距等
|
|
|
|
|
|
|
|
*/
|
|
|
|
.prod-info {
|
|
|
|
.prod-info {
|
|
|
|
font-size: 20rpx;
|
|
|
|
font-size: 20rpx;
|
|
|
|
color: #777;
|
|
|
|
color: #777;
|
|
|
|
padding: 0 20rpx;
|
|
|
|
padding: 0 20rpx;
|
|
|
|
margin-top: 8rpx;
|
|
|
|
margin-top: 8rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
.prod-text-info 类用于设置商品文本信息所在元素的整体样式，定义了高度、行高、字体族等基本样式属性
|
|
|
|
|
|
|
|
并且内部还有针对价格等更具体样式的嵌套类
|
|
|
|
|
|
|
|
*/
|
|
|
|
.prod-text-info {
|
|
|
|
.prod-text-info {
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
height: 50rpx;
|
|
|
|
height: 50rpx;
|
|
|
|
line-height: 70rpx;
|
|
|
|
line-height: 70rpx;
|
|
|
|
font-family: Arial;
|
|
|
|
font-family: Arial;
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
.price 类用于设置商品价格文本的颜色，将其设置为特定的红色（#eb2444），同时设置了左边的内边距
|
|
|
|
|
|
|
|
*/
|
|
|
|
.price {
|
|
|
|
.price {
|
|
|
|
color: #eb2444;
|
|
|
|
color: #eb2444;
|
|
|
|
padding-left: 20rpx;
|
|
|
|
padding-left: 20rpx;
|
|
|
|
@ -28,24 +46,39 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
prod 伪类选择器，用于根据元素的顺序来区分不同的商品元素，分别设置不同的内边距样式
|
|
|
|
|
|
|
|
:nth-child(2n-1) 表示奇数项的商品元素
|
|
|
|
|
|
|
|
*/
|
|
|
|
prod {
|
|
|
|
prod {
|
|
|
|
&:nth-child(2n-1) {
|
|
|
|
&:nth-child(2n-1) {
|
|
|
|
.prod-items {
|
|
|
|
.prod-items {
|
|
|
|
padding: 20rpx 10rpx 10rpx 20rpx;
|
|
|
|
padding: 20rpx 10rpx 10rpx 20rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
:nth-child(2n) 表示偶数项的商品元素
|
|
|
|
|
|
|
|
对偶数项的商品元素中的.prod-items 类设置相应的内边距样式
|
|
|
|
|
|
|
|
*/
|
|
|
|
&:nth-child(2n) {
|
|
|
|
&:nth-child(2n) {
|
|
|
|
.prod-items {
|
|
|
|
.prod-items {
|
|
|
|
padding: 20rpx 20rpx 10rpx 10rpx;
|
|
|
|
padding: 20rpx 20rpx 10rpx 10rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
.hot-imagecont 类下的.hotsaleimg 类用于设置商品图片本身的样式，使其宽度占满父元素，高度为345rpx
|
|
|
|
|
|
|
|
*/
|
|
|
|
.hot-imagecont {
|
|
|
|
.hot-imagecont {
|
|
|
|
.hotsaleimg {
|
|
|
|
.hotsaleimg {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 345rpx;
|
|
|
|
height: 345rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
.hot-text 类下的.hotprod-text 类用于设置商品标题等主要文本的样式
|
|
|
|
|
|
|
|
设置了高度、字体大小、文本的换行显示方式（超出2行显示省略号等）、文本颜色等样式
|
|
|
|
|
|
|
|
*/
|
|
|
|
.hot-text {
|
|
|
|
.hot-text {
|
|
|
|
.hotprod-text {
|
|
|
|
.hotprod-text {
|
|
|
|
height: 76rpx;
|
|
|
|
height: 76rpx;
|
|
|
|
@ -61,6 +94,9 @@ prod {
|
|
|
|
color: #000;
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
.deadline-price 类用于设置特定价格相关文本的字体大小以及右边的外边距样式
|
|
|
|
|
|
|
|
*/
|
|
|
|
.deadline-price {
|
|
|
|
.deadline-price {
|
|
|
|
font-size: 22rpx;
|
|
|
|
font-size: 22rpx;
|
|
|
|
margin-right: 5rpx;
|
|
|
|
margin-right: 5rpx;
|
|
|
|
|
