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

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

@@ -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%;
+        .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;
+            .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;
+        }
+    }
+}

CoreCms.Net.Web.Admin/wwwroot/views/shop/setting/index.html

@@ -10,8 +10,8 @@
 <style>
     /* 重写样式 */
     .layui-form-item label { width: 140px; }
-    .classifyimg { margin-bottom: 20px; width: 672px !important; }
+    .classifyimg { margin-bottom: 20px; width: 900px !important; }
-    .classifyimg-item { display: inline-block; width: 140px; }
+    .classifyimg-item { display: inline-block; width: 160px; }
     .classifyimg img { width: 100px; display: block; }
     .classifyimg .layui-form-radio { vertical-align: top; display: block; margin-bottom: 10px; }
     .image_storage_type .item { display: none; }
@@ -301,6 +301,10 @@
                                                     <input type="radio" lay-filter="cateStyle" name="cateStyle" value="4" title="仿点餐模式" {{d.data.configs['cateStyle']['sValue']==="4" ? 'checked':''}}>
                                                     <img src="/static/images/common/diancan.png" onclick="layui.coreHelper.viewImage('/static/images/common/diancan.png')">
                                                 </div>
+                                                <div class="classifyimg-item">
+                                                    <input type="radio" lay-filter="cateStyle" name="cateStyle" value="5" title="三级分类仿叮咚买菜" {{d.data.configs['cateStyle']['sValue']==="5" ? 'checked':''}}>
+                                                    <img src="/static/images/common/dingdong.png" onclick="layui.coreHelper.viewImage('/static/images/common/dingdong.png')">
+                                                </div>
                                                 <div class="layui-form-mid layui-word-aux list-tag">
                                                     1、一级大图分类图标尺寸建议：350px*150px<br />
                                                     2、一级小图分类图标尺寸建议：105px*105px<br />