front/java-mall-app
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 调整店铺分类UI

Browse Source
This commit is contained in:
mixtan 2025-09-08 14:48:59 +08:00
parent 76ce8a51d4
commit e714b00177
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages.json
View File

@ -80,7 +80,7 @@
{ {
"path": "pages/category/storeCategory", "path": "pages/category/storeCategory",
"style": { "style": {
"navigationBarTitleText": "分类", "navigationBarTitleText": "店铺分类",
"app-plus": { "app-plus": {
"titleNView": false "titleNView": false
} }

30
pages/category/storeCategory.vue
View File

@ -81,43 +81,45 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 12rpx; left: 0;
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
background: #fff;
.item { .item {
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: #222; color: #333;
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; padding: 16rpx 0;
padding: 16rpx; box-sizing: border-box;
text-align: center;
&.current { &.current {
color: #fe411b; color: #fe411b;
background: #f4f4f4;
font-weight: bold;
} }
} }
} }
.category_right { .category_right {
width: calc(100vw - 232rpx - 20rpx); width: calc(100vw - 212rpx - 10rpx);
position: absolute; position: absolute;
top: 20rpx; top: 12rpx;
bottom: 0; bottom: 12rpx;
left: 232rpx; left: 212rpx;
z-index: 1; z-index: 1;
.box { .box {
min-height: 180rpx; min-height: 180rpx;
padding: 16rpx; padding: 24rpx 12rpx 24rpx 30rpx;
border-radius: 12rpx; border-radius: 12rpx;
margin-bottom: 12rpx; margin-bottom: 12rpx;
background: #fff; background: #fff;
.list{ .list{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10rpx; gap: 30rpx;
} }
.tit{ .tit{
padding-bottom: 10rpx; padding-bottom: 10rpx;
@ -129,8 +131,8 @@ export default {
flex-direction: column; flex-direction: column;
width: 140rpx; width: 140rpx;
.img{ .img{
width: 120rpx; width: 140rpx;
height: 120rpx; height: 140rpx;
border-radius: 8rpx; border-radius: 8rpx;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }