/** * 头部 */ .header { background-repeat: no-repeat; background-position: center; background-size: cover; border-bottom-left-radius: 100rpx; border-bottom-right-radius: 100rpx; height: 310rpx; /* #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU */ height: 360rpx; /* #endif */ } /** * 顶部 */ .header-top { padding-right: 250rpx; /* #ifdef MP-ALIPAY || MP-TOUTIAO */ padding-top: 20rpx !important; padding-right: 20rpx; /* #endif */ /* #ifdef H5 || APP */ padding-right: 20rpx; /* #endif */ padding-bottom: 10px; } .nav-back { width: 30px; background: rgb(0 0 0 / 60%); height: 30px; line-height: 30px; } .nav-search { width: calc(100% - 90rpx); /* #ifdef MP-ALIPAY || MP-TOUTIAO || H5 || APP */ width: 100%; /* #endif */ } /** * 头部内容 */ .header-content { top: 140rpx; /* #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU */ top: 200rpx; /* #endif */ width: calc(100% - 80rpx); box-shadow: 0 0 8px rgb(0 0 0 / 6%); } .header-content .address-content { width: calc(100% - 220rpx); } .header-content .icon-list { right: 20rpx; bottom: 20rpx; } .header-content .icon-list .icon-item { width: 50rpx; height: 50rpx; line-height: 50rpx; } .header-content .icon-item .badge-icon { top: -10px; right: 2px; } .header-content .icon-list .icon-item:not(:last-child) { margin-right: 15rpx; } .header-content .logo { width: 110rpx; height: 110rpx !important; } .header-content .base-right { width: calc(100% - 130rpx); } .header-content .base-right .title-length-limit { width: calc(100% - 110rpx); } .header-content .base-right .use-type-icon { border-top-left-radius: 50rpx; border-bottom-left-radius: 50rpx; top: 20rpx; right: -1px; padding: 5rpx 20rpx; box-shadow: -1px 1px 3px rgb(0 0 0 / 10%); } /** * 桌码 */ .tablecode { background: rgb(255 255 255 / 60%); padding: 2rpx 20rpx; /* #ifdef MP-ALIPAY || MP-TOUTIAO */ margin-top: 15rpx; /* #endif */ } /** * 中间内容 */ .content { margin-top: 80rpx; height: calc(100vh - 440rpx); /* #ifdef H5 || APP */ height: calc(100vh - 390rpx); /* #endif */ /* #ifdef MP-ALIPAY || MP-TOUTIAO */ height: calc(100vh - 400rpx); /* #endif */ } /** * 左侧导航 */ .left-content-actual { padding-bottom: 120rpx; } .left-content { width: 180rpx; } .left-content .item { height: 80rpx; line-height: 80rpx; padding: 0 10rpx; border-left: 3px solid #fff; border-right: 3px solid #fff; overflow: hidden; } .left-content .item:not(:last-child) { border-bottom: 1px solid #f1f1f1 !important; } .left-content .active { background: #f5f5f5; border-width: 0 0 0 3px; border-right: 3px solid #f5f5f5 !important; } .left-content .badge-icon { top: -16rpx; right: 26rpx; } /** * 右侧内容 */ .right-content-actual { padding-bottom: calc(105rpx + env(safe-area-inset-bottom)); } .right-content { width: calc(100% - 220rpx); } .right-content-actual .word-list { position: sticky; top: 0; right: 0; background: #f5f5f5; z-index: 1; padding: 0 1px 20rpx 1px; } .goods-list .goods-img { width: 160rpx; height: 160rpx !important; } .goods-list .goods-base { width: calc(100% - 180rpx); } .goods-list .goods-base-content { min-height: 100rpx; } .goods-list .goods-base .simple-desc { line-height: 30rpx; min-height: 30rpx; max-height: 58rpx; } .goods-list .goods-base .sales-price { width: calc(100% - 160rpx); } .goods-list .goods-base .buy-number { min-width: 32rpx; } /** * 底部导航 */ .botton-nav { width: calc(100% - 40rpx); left: auto; bottom: calc(20rpx + env(safe-area-inset-bottom)); line-height: 80rpx; z-index: 6; max-width: calc(800px - 40rpx); margin-left: 20rpx; } .botton-nav .cart .badge-icon { top: -20rpx; right: -2rpx; } .botton-nav .cart-total-price { width: calc(100% - 260rpx); } .botton-nav button { top: 0; right: 0; line-height: 88rpx; height: 88rpx; border: 0; /* #ifdef MP-QQ */ padding-top: 0; padding-bottom: 0; /* #endif */ } /** * 购物车 */ .cart-mask { left: 0; top: 0; background: rgb(0, 0, 0, 0.6); z-index: 5; } .cart-content { left: 20rpx; bottom: calc(130rpx + env(safe-area-inset-bottom)); width: calc(100% - 40rpx); z-index: 6; max-width: calc(800px - 40rpx); } .cart-content .cart-list { max-height: 60vh; } .cart-content .cart-list .goods-img { width: 120rpx; height: 120rpx !important; } .cart-content .cart-list .goods-base { width: calc(100% - 140rpx); } .cart-content .cart-list .goods-base-content { min-height: 60rpx; }