wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 19:03:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

【新增】商品分类增加【三级分类仿叮咚买菜】界面风格。

Browse Source
This commit is contained in:
jianweie
2024-02-29 21:33:31 +08:00
parent b7cda465f4
commit 64a5d1875b
4 changed files with 938 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
CoreCms.Net.Uni-App/CoreShop/pages/category/index/index.scss
View File

@@ -19,7 +19,7 @@
}
.main { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; }
.main {position: relative; width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; }
.nav { width: 100%; height: 212rpx; flex-shrink: 0; display: flex; flex-direction: column;
.header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20rpx; background-color: #ffffff; height: 140rpx;
@@ -47,16 +47,44 @@
}
.content { flex: 1; overflow: hidden; width: 100%; display: flex;
.menus { width: 200rpx; overflow: hidden; background-color: #F5F5F5;
.wrapper { width: 100%; height: 100%;
.menu { display: flex; align-items: center; justify-content: flex-start; padding: 30rpx 20rpx; font-size: 26rpx; color: #919293; position: relative;
.wrapper { width: 100%; height: 100%; background-color: #fafafa;
.menu {
display: flex; align-items: center; justify-content: flex-start; padding: 30rpx 20rpx; font-size: 26rpx; color: #919293; position: relative;
&:nth-last-child(1) { margin-bottom: 130rpx; }
&.current { background-color: #ffffff; color: #5A5B5C; }
&.current {
position: relative;
background-color: #ffffff; color: #1aad19;
&::before{
display: block;
content: "";
width: 8rpx;
height: 70%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #1aad19;
border-radius: 0 5rpx 5rpx 0;
}
}
.tit-box{
display: flex;
align-items: center;
margin: auto;
}
.tip{
width: 25rpx;
height: 25rpx;
display: inline-block;
margin-right: 5rpx;
}
.dot { position: absolute; width: 34rpx; height: 34rpx; line-height: 34rpx; font-size: 22rpx; background-color: #ADB838; color: #ffffff; top: 16rpx; right: 10rpx; border-radius: 100%; text-align: center; }
}
}
}
.goods { flex: 1; overflow: hidden; background-color: #ffffff;
.goods {position: relative; flex: 1; overflow: hidden; background-color: #ffffff;
.wrapper { width: 100%; height: 100%; padding: 20rpx;
.ads { height: calc(300 / 550 * 510rpx);
image { width: 100%; height: 100%; border-radius: 8rpx; }
@@ -94,7 +122,7 @@
}
.cart-box { position: fixed; bottom: 30rpx; left: 30rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 10;
.cart-box { position: fixed; bottom: 30rpx; left: 30rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 99;
.cart-img { width: 96rpx; height: 96rpx; position: relative; margin-top: -48rpx; }
.pay-btn { height: 100%; padding: 0 30rpx; color: #FFFFFF; border-radius: 0 50rpx 50rpx 0; display: flex; align-items: center; font-size: 28rpx; }
.mark { padding-left: 46rpx; margin-right: 30rpx; position: relative;
@@ -103,7 +131,17 @@
.price { flex: 1; color: #5A5B5C; }
}
// .main-icon{
// position: absolute;
// left: 0;
// top: -5px;
// width: 0;
// height: 0;
// border-left: 5px solid transparent;
// border-right: 5px solid transparent;
// border-bottom: 5px solid #fff;
// }
.text-color-base { color: #5A5B5C; }
text-color-assist { color: #919293; }
@@ -111,3 +149,222 @@ text-color-assist { color: #919293; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col3Box { width: 33%; padding: 5px; float: left; }
.primary-classification{
height: 90px;
padding: 10px 0 0;
display: flex;
justify-content: space-between;
background-color: #e9f6ec;
.primary-view{
width: 90%;
white-space: nowrap;
.menu-box{
display: inline-block;
width: 140rpx;
.img{
display: block;
margin: 0 auto;
width: 80rpx;
height: 80rpx;
border-radius: 15px;
margin-bottom: 5rpx;
border: 2px solid #fff;
}
.name{
padding: 5rpx 0;
margin: 0 5rpx;
font-size: 25rpx;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowap;
}
}
.active{
.img{
border: 2px solid #1aad19;
}
.name{
background-color: #1aad19;
border-radius: 20rpx;
color: #fff;
}
}
}
.primary-classification-all{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 15rpx;
margin-top: -15rpx;
.tit{
writing-mode:vertical-rl;
font-size: 27rpx;
color: #1aad19;
margin-right: 2rpx;
letter-spacing: 5rpx;
}
.close{
padding: 20rpx;
}
}
}
.all-primary-popup{
position: fixed;
left: 0;
top: 88px;
z-index: 1000;
width: 100%;
height: 100%;
.mask{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.list-box{
padding: 10px;
background-color: #fff;
position: relative;
z-index: 9999;
.title-box{
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
.tit{
font-size: 30rpx;
color: #5A5B5C;
}
}
.menu-layout{
display: flex;
flex-wrap: wrap;
.menu-box{
display: inline-block;
width: 140rpx;
margin-bottom: 25rpx;
.img{
display: block;
margin: 0 auto;
width: 80rpx;
height: 80rpx;
border-radius: 15px;
margin-bottom: 10rpx;
}
.name{
padding: 5rpx 0;
margin: 0 5rpx;
font-size: 25rpx;
text-align: center;
}
}
.active{
.img{
border: 2px solid #1aad19;
}
.name{
background-color: #1aad19;
border-radius: 20rpx;
color: #fff;
}
}
}
}
}
.sticky-box{
display: flex;
justify-content:space-between;
padding: 20rpx;
background-color: #fff;
.sticky-view{
width: 90%;
white-space: nowrap;
height: 50rpx;
.item{
display: inline-block;
width: 156rpx;
height: 50rpx;
line-height: 50rpx;
font-size: 27rpx;
background-color: #f7f7f7;
text-align: center;
border-radius: 5rpx;
margin-right:20rpx ;
padding: 0 5rpx;
.name{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
.active{
background-color: #edf8f2;
color: #1aad19;
}
}
.icon{
position: relative;
width: 10%;
height: 50rpx;
line-height: 50rpx;
display: flex;
justify-content: center;
&::before{
display: block;
content: "";
width: 1rpx;
height: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #f7f7f7;
box-shadow: -1px 0 5rpx rgba(0,0,0,.2);
}
}
}
.sticky-popup-box{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 44px;
z-index: 999;
.mask{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
}
.popup-layout{
position: relative;
padding: 10px;
display: flex;
flex-wrap: wrap;
background-color: #fff;
gap: 20rpx;
.popup{
width: 156rpx;
height: 50rpx;
line-height: 50rpx;
font-size: 27rpx;
background-color: #f7f7f7;
text-align: center;
border-radius: 5rpx;
}
.active{
background-color: #edf8f2;
color: #1aad19;
}
}
}

1077
CoreCms.Net.Uni-App/CoreShop/pages/category/index/index.vue
View File

File diff suppressed because it is too large Load Diff