diff --git a/src/components/sp-image/index.scss b/src/components/sp-image/index.scss index fb85457bf..922860391 100644 --- a/src/components/sp-image/index.scss +++ b/src/components/sp-image/index.scss @@ -5,7 +5,7 @@ .sp-image-container { position: relative; overflow: hidden; /* 防止圆角溢出 */ - background-color: #fff; + background-color: transparent; height: 100%; display: flex; align-items: center; diff --git a/src/subpages/store/comps/comp-shopbrand.scss b/src/subpages/store/comps/comp-shopbrand.scss index e2adc6254..78e277c58 100644 --- a/src/subpages/store/comps/comp-shopbrand.scss +++ b/src/subpages/store/comps/comp-shopbrand.scss @@ -9,23 +9,36 @@ padding-bottom: 20px; .shop-brand-hd { display: flex; + align-items: flex-start; padding: 16px; - height: 80px; + min-height: 80px; } .store-logo { position: relative; top: -60px; + flex-shrink: 0; background: #ffffff; border-radius: 16px; overflow: hidden; } .store-info { flex: 1; + min-width: 0; margin-left: 16px; .store-name { + min-width: 0; font-size: 32px; font-weight: 600; color: #222222; + height: 64px; + line-height: 32px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; } } .store-score-desc { @@ -43,6 +56,7 @@ } .btn-attention { + flex-shrink: 0; padding: 0 10px; height: 44px; line-height: 44px; diff --git a/src/subpages/store/index.js b/src/subpages/store/index.js index 342707a74..cbbe50da9 100644 --- a/src/subpages/store/index.js +++ b/src/subpages/store/index.js @@ -9,11 +9,11 @@ import Taro, { useDidShow, getCurrentInstance } from '@tarojs/taro' -import { View, Text } from '@tarojs/components' +import { View, Text, ScrollView } from '@tarojs/components' import { useSelector, useDispatch } from 'react-redux' import { SG_ROUTER_PARAMS } from '@/consts' import S from '@/spx' -import { SpFloatMenuItem, SpPage, SpSearch, SpRecommend, SpSkuSelect, SpLogin } from '@/components' +import { SpFloatMenuItem, SpPage, SpSearch, SpRecommend, SpSkuSelect, SpLogin, SpPoweredBy } from '@/components' import api from '@/api' import doc from '@/doc' import * as shopDoc from '@/doc/shop' @@ -53,7 +53,9 @@ const initState = { selectType: 'picker', statusBarHeight: '', open: false, - hideClose: true + hideClose: true, + /** 页面滚动超过 20px 时搜索条白底 */ + searchSolidBg: false } function StoreIndex() { @@ -77,7 +79,7 @@ function StoreIndex() { selectType, statusBarHeight, open, - hideClose + searchSolidBg } = state const dispatch = useDispatch() @@ -345,23 +347,9 @@ function StoreIndex() { loading={loading} scrollToTopBtn ref={pageRef} + showpoweredBy={false} // navigateMantle pageConfig={pageData?.base} - // renderTitle={ - // fixedTop && ( - // <> - // { - // Taro.navigateTo({ - // url: `/subpages/store/item-list?dtid=${distributorId}` - // }) - // }} - // /> - // - - // ) - // } renderFloat={ } > + { + const st = e?.detail?.scrollTop ?? 0 + setState((draft) => { + draft.searchSolidBg = st > 15 + }) + }} + > {searchComp && ( - + )} - + + + {/* Sku选择器 */} + ) } diff --git a/src/subpages/store/index.scss b/src/subpages/store/index.scss index 07bb4325c..0d395941d 100644 --- a/src/subpages/store/index.scss +++ b/src/subpages/store/index.scss @@ -2,25 +2,24 @@ * Copyright © ShopeX （http://www.shopex.cn）. All rights reserved. * See LICENSE file for license details. */ + .sp-page.ipx .sp-page__footer { height: 160px !important; } -// .at-float-layout .layout-body { -// font-size: 28px; -// padding:0; -// height: 556px; -// } -.sale-price { -} + + + .sale-price { .sp-price__symbol { color: var(--color-primary); font-size: 28px; } + .sp-price__int { color: var(--color-primary); font-size: 42px; } + .sp-price__decimal { color: var(--color-primary); font-size: 28px; @@ -28,40 +27,71 @@ } .page-store-index { + .sp-page__body-children { + height: 100%; + + .search-scroll { + height: 100%; + } + } + .search { width: 100%; position: fixed; left: 0; right: 0; z-index: 2; - background: transparent; + height: 120px; + transition: background-color 0.2s ease; + background: transparent !important; + + &--solid { + background: #fff !important; + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1) !important; + + .sp-search { + padding: 0 15px; + + &-block { + border: 1PX solid #000; + box-sizing: border-box; + } + } + } } .sp-search { width: 100%; padding: 0 15px; } + .header-block { padding-top: 150px; // background: transparent; // box-shadow: inset 0px -242px 700px 0px rgba(255, 255, 255, 0.4); } + .header-block-pad { padding-top: 80px; } + .icon-huiyuanzhongxin { font-size: 38px; } + .icon-gouwuche { font-size: 38px; } + .title-container { justify-content: flex-start !important; + .sp-search { width: 75%; background: transparent; } } + .switchs { position: sticky; z-index: 99; @@ -72,55 +102,67 @@ color: #222222; line-height: 50px; padding: 20px 24px; + .switching { font-weight: 500; // font-size: 28px; color: #444444; } + .switchings { border-bottom: 8px solid var(--color-primary); } + .switched { margin-left: 60px; } } + .cart-layout { .sp-price__symbol { color: #e50113; font-size: 28px; } + .sp-price__int { color: #e50113; font-size: 42px; } + .sp-price__decimal { color: #e50113; font-size: 28px; } } + .sp-page__footer { .sp-price__symbol { color: #e50113; font-weight: 600; } + .sp-price__int { color: #e50113; font-weight: 600; } + .sp-price__decimal { color: #e50113; font-weight: 600; } } + .comp-shop-brand-cart { .sp-price__symbol { color: #e50113; font-weight: 600; } + .sp-price__int { color: #e50113; font-weight: 600; } + .sp-price__decimal { color: #e50113; font-weight: 600;