|
|
|
|
@ -1,184 +1,218 @@
|
|
|
|
|
/* 容器样式 */
|
|
|
|
|
.container {
|
|
|
|
|
background: #f4f4f4;
|
|
|
|
|
background: #f4f4f4; /* 设置背景颜色为浅灰色 */
|
|
|
|
|
|
|
|
|
|
.empty {
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #999;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
text-align: center; /* 文本居中对齐 */
|
|
|
|
|
color: #999; /* 文本颜色为灰色 */
|
|
|
|
|
font-size: 26rpx; /* 字体大小为26响应式像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.empty.empty-top {
|
|
|
|
|
margin-top: 300rpx;
|
|
|
|
|
margin-top: 300rpx; /* 顶部外边距为300响应式像素，用于在页面顶部显示空状态时有足够的间距 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 固定定位的盒子样式 */
|
|
|
|
|
.fixed-box {
|
|
|
|
|
position: fixed;
|
|
|
|
|
width: 100%;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
background: #fff;
|
|
|
|
|
position: fixed; /* 固定定位，使盒子始终位于页面顶部 */
|
|
|
|
|
width: 100%; /* 宽度占满整个父元素 */
|
|
|
|
|
top: 0; /* 距离页面顶部0像素 */
|
|
|
|
|
z-index: 999; /* 设置较高的堆叠顺序，确保盒子在其他内容之上 */
|
|
|
|
|
background: #fff; /* 背景颜色为白色 */
|
|
|
|
|
|
|
|
|
|
.tabs {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
padding: 10rpx 0;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
background: #fff;
|
|
|
|
|
width: 100%; /* 宽度占满整个父元素 */
|
|
|
|
|
height: 80rpx; /* 高度为80响应式像素 */
|
|
|
|
|
line-height: 80rpx; /* 行高设置为80响应式像素，确保文本垂直居中 */
|
|
|
|
|
padding: 10rpx 0; /* 上下内边距为10响应式像素 */
|
|
|
|
|
z-index: 999; /* 设置较高的堆叠顺序，确保标签栏在其他内容之上 */
|
|
|
|
|
background: #fff; /* 背景颜色为白色 */
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: '';
|
|
|
|
|
background-color: #e1e1e1;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 1px;
|
|
|
|
|
transform-origin: 50% 100% 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
content: ''; /* 伪元素内容为空 */
|
|
|
|
|
background-color: #e1e1e1; /* 伪元素背景颜色为浅灰色 */
|
|
|
|
|
left: 0; /* 伪元素距离左侧0像素 */
|
|
|
|
|
height: 1px; /* 伪元素高度为1像素 */
|
|
|
|
|
transform-origin: 50% 100% 0; /* 伪元素变换原点为底部中心 */
|
|
|
|
|
bottom: 0; /* 伪元素距离底部0像素 */
|
|
|
|
|
position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
|
|
|
|
|
display: block; /* 确保伪元素作为块级元素显示 */
|
|
|
|
|
width: 100%; /* 伪元素宽度为100%，即占满整个父元素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-item {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 33.33%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
display: inline-block; /* 标签项作为行内块级元素显示 */
|
|
|
|
|
width: 33.33%; /* 每个标签项占据父元素宽度的33.33%，实现三等分 */
|
|
|
|
|
text-align: center; /* 文本居中对齐 */
|
|
|
|
|
font-size: 28rpx; /* 字体大小为28响应式像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-item.on {
|
|
|
|
|
color: #eb2444;
|
|
|
|
|
color: #eb2444; /* 当前选中的标签项文本颜色为红色 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 搜索栏样式 */
|
|
|
|
|
.search-bar {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #777;
|
|
|
|
|
background: #fff;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
padding: 0 30rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
margin: 30rpx 0;
|
|
|
|
|
display: flex; /* 使用弹性布局 */
|
|
|
|
|
align-items: center; /* 垂直居中对齐 */
|
|
|
|
|
justify-content: space-between; /* 内容左右对齐 */
|
|
|
|
|
width: 100%; /* 宽度占满整个父元素 */
|
|
|
|
|
color: #777; /* 搜索栏内文本颜色为浅灰色 */
|
|
|
|
|
background: #fff; /* 搜索栏背景颜色为白色 */
|
|
|
|
|
z-index: 3; /* 设置堆叠顺序，确保搜索栏在其他内容之上 */
|
|
|
|
|
padding: 0 30rpx; /* 左右内边距为30响应式像素 */
|
|
|
|
|
box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
|
|
|
|
|
margin: 30rpx 0; /* 上下外边距为30响应式像素 */
|
|
|
|
|
|
|
|
|
|
.search-box {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
background: #f7f7f7;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
width: 80%;
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
margin-right: 30rpx;
|
|
|
|
|
flex: 1;
|
|
|
|
|
position: relative; /* 相对定位，用于内部元素的绝对定位 */
|
|
|
|
|
height: 60rpx; /* 搜索框高度为60响应式像素 */
|
|
|
|
|
background: #f7f7f7; /* 搜索框背景颜色为浅灰色 */
|
|
|
|
|
z-index: 999; /* 设置较高的堆叠顺序，确保搜索框在其他内容之上 */
|
|
|
|
|
width: 80%; /* 搜索框宽度为父元素宽度的80% */
|
|
|
|
|
border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
|
|
|
|
|
margin-right: 30rpx; /* 右侧外边距为30响应式像素 */
|
|
|
|
|
flex: 1; /* 搜索框占据剩余空间 */
|
|
|
|
|
|
|
|
|
|
.search-img {
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 20rpx;
|
|
|
|
|
top: 14rpx;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 32rpx; /* 搜索图标宽度为32响应式像素 */
|
|
|
|
|
height: 32rpx; /* 搜索图标高度为32响应式像素 */
|
|
|
|
|
position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
|
|
|
|
|
left: 20rpx; /* 搜索图标距离左侧20响应式像素 */
|
|
|
|
|
top: 14rpx; /* 搜索图标距离顶部14响应式像素 */
|
|
|
|
|
display: block; /* 确保图标作为块级元素显示 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-hint {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 30rpx;
|
|
|
|
|
top: 31rpx;
|
|
|
|
|
color: #eb2444;
|
|
|
|
|
font-size: 28rpx; /* 提示文本字体大小为28响应式像素 */
|
|
|
|
|
position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
|
|
|
|
|
right: 30rpx; /* 提示文本距离右侧30响应式像素 */
|
|
|
|
|
top: 31rpx; /* 提示文本距离顶部31响应式像素 */
|
|
|
|
|
color: #eb2444; /* 提示文本颜色为红色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-list-img {
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
font-size: 0;
|
|
|
|
|
width: 40rpx; /* 图标宽度为40响应式像素 */
|
|
|
|
|
height: 40rpx; /* 图标高度为40响应式像素 */
|
|
|
|
|
font-size: 0; /* 移除默认字体大小，防止影响图标显示 */
|
|
|
|
|
image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%; /* 图片宽度为100%，即占满父元素 */
|
|
|
|
|
height: 100%; /* 图片高度为100%，即占满父元素 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 搜索输入框样式 */
|
|
|
|
|
.sear-input {
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
border: 0;
|
|
|
|
|
margin: 0 30rpx 0 64rpx;
|
|
|
|
|
line-height: 48rpx;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
background: #f7f7f7;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
height: 60rpx; /* 输入框高度为60响应式像素 */
|
|
|
|
|
border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
|
|
|
|
|
border: 0; /* 移除默认边框 */
|
|
|
|
|
margin: 0 30rpx 0 64rpx; /* 左右外边距分别为30和64响应式像素 */
|
|
|
|
|
line-height: 48rpx; /* 行高设置为48响应式像素，确保文字垂直居中 */
|
|
|
|
|
vertical-align: top; /* 垂直对齐方式为顶部 */
|
|
|
|
|
background: #f7f7f7; /* 输入框背景颜色为浅灰色 */
|
|
|
|
|
font-size: 28rpx; /* 输入框内的字体大小为28响应式像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 商品展示区域样式 */
|
|
|
|
|
.prod-show {
|
|
|
|
|
background: #fff;
|
|
|
|
|
background: #fff; /* 背景颜色为白色 */
|
|
|
|
|
|
|
|
|
|
.prod-items {
|
|
|
|
|
float: left;
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding-bottom: 20rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
float: left; /* 商品项左浮动，实现水平排列 */
|
|
|
|
|
background: #fff; /* 商品项背景颜色为白色 */
|
|
|
|
|
padding-bottom: 20rpx; /* 底部内边距为20响应式像素 */
|
|
|
|
|
box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.prod-items {
|
|
|
|
|
margin: 0 20rpx;
|
|
|
|
|
margin: 0 20rpx; /* 左右外边距为20响应式像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 热销商品容器样式 */
|
|
|
|
|
.hotsale-item-cont {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
display: flex; /* 使用弹性布局 */
|
|
|
|
|
flex-wrap: wrap; /* 允许换行 */
|
|
|
|
|
justify-content: space-between; /* 内容左右对齐 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 商品列表样式 */
|
|
|
|
|
.prod-list {
|
|
|
|
|
padding-top: 150rpx;
|
|
|
|
|
min-height: calc(100vh - 150rpx);
|
|
|
|
|
padding-top: 150rpx; /* 顶部内边距为150响应式像素，确保与固定头部有足够的间距 */
|
|
|
|
|
min-height: calc(100vh - 150rpx); /* 最小高度为视口高度减去150响应式像素 */
|
|
|
|
|
|
|
|
|
|
.cont-item {
|
|
|
|
|
padding: 0 20rpx 20rpx 20rpx;
|
|
|
|
|
padding: 0 20rpx 20rpx 20rpx; /* 内边距为上下20响应式像素，左右20响应式像素 */
|
|
|
|
|
|
|
|
|
|
.show-item {
|
|
|
|
|
.more-prod-pic {
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: 170rpx;
|
|
|
|
|
height: 170rpx;
|
|
|
|
|
font-size: 0;
|
|
|
|
|
text-align: center; /* 图片文本居中对齐 */
|
|
|
|
|
width: 170rpx; /* 图片容器宽度为170响应式像素 */
|
|
|
|
|
height: 170rpx; /* 图片容器高度为170响应式像素 */
|
|
|
|
|
font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
|
|
|
|
|
|
|
|
|
|
.more-pic {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
background: #fff;
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
|
|
|
|
|
width: 100%; /* 图片宽度为100%，即占满父元素 */
|
|
|
|
|
height: 100%; /* 图片高度为100%，即占满父元素 */
|
|
|
|
|
vertical-align: middle; /* 图片垂直居中对齐 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
position: relative; /* 相对定位，用于内部元素的绝对定位 */
|
|
|
|
|
display: flex; /* 使用弹性布局 */
|
|
|
|
|
justify-content: flex-start; /* 内容左对齐 */
|
|
|
|
|
padding: 20rpx; /* 内边距为20响应式像素 */
|
|
|
|
|
border-radius: 20rpx; /* 圆角边框，半径为20响应式像素 */
|
|
|
|
|
background: #fff; /* 背景颜色为白色 */
|
|
|
|
|
margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
|
|
|
|
|
box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05); /* 添加轻微的阴影效果，增强立体感 */
|
|
|
|
|
|
|
|
|
|
.prod-text-right {
|
|
|
|
|
margin-left: 20rpx;
|
|
|
|
|
width: 75%;
|
|
|
|
|
margin-left: 20rpx; /* 左侧外边距为20响应式像素 */
|
|
|
|
|
width: 75%; /* 占据父元素宽度的75% */
|
|
|
|
|
|
|
|
|
|
.cate-prod-info {
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
color: #999;
|
|
|
|
|
margin: 10rpx 0 20rpx 0;
|
|
|
|
|
font-size: 22rpx; /* 字体大小为22响应式像素 */
|
|
|
|
|
color: #999; /* 文本颜色为灰色 */
|
|
|
|
|
margin: 10rpx 0 20rpx 0; /* 上下外边距分别为10和20响应式像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.go-to-buy {
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
background: #eb2444;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
width: 150rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 8rpx 3rpx;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20rpx;
|
|
|
|
|
bottom: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
font-size: 26rpx; /* 字体大小为26响应式像素 */
|
|
|
|
|
background: #eb2444; /* 背景颜色为红色 */
|
|
|
|
|
color: #fff; /* 文本颜色为白色 */
|
|
|
|
|
border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
|
|
|
|
|
width: 150rpx; /* 宽度为150响应式像素 */
|
|
|
|
|
text-align: center; /* 文本居中对齐 */
|
|
|
|
|
padding: 8rpx 3rpx; /* 内边距为8和3响应式像素 */
|
|
|
|
|
position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
|
|
|
|
|
right: 20rpx; /* 按钮距离右侧20响应式像素 */
|
|
|
|
|
bottom: 20rpx; /* 按钮距离底部20响应式像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.prod-text.more {
|
|
|
|
|
margin: 0;
|
|
|
|
|
height: 78rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
-webkit-line-clamp: 2;
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
margin: 0; /* 移除默认外边距 */
|
|
|
|
|
height: 78rpx; /* 高度为78响应式像素 */
|
|
|
|
|
font-size: 28rpx; /* 字体大小为28响应式像素 */
|
|
|
|
|
display: -webkit-box; /* 使用Webkit的多行文本溢出处理 */
|
|
|
|
|
word-break: break-all; /* 允许单词内断行 */
|
|
|
|
|
overflow: hidden; /* 隐藏超出容器的内容 */
|
|
|
|
|
text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
|
|
|
|
|
display: -webkit-box; /* 重复声明以确保兼容性 */
|
|
|
|
|
-webkit-line-clamp: 2; /* 限制显示两行文本 */
|
|
|
|
|
-webkit-box-orient: vertical; /* 文本方向为垂直 */
|
|
|
|
|
color: #000; /* 文本颜色为黑色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.prod-price.more {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #eb2444;
|
|
|
|
|
font-family: arial;
|
|
|
|
|
font-size: 28rpx; /* 字体大小为28响应式像素 */
|
|
|
|
|
color: #eb2444; /* 文本颜色为红色 */
|
|
|
|
|
font-family: arial; /* 字体系列为Arial */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
