feat(shop): 使用白色购物车图标替换文本图标
- 引入了 base64 格式的白色购物车 SVG 图标常量 - 将购物车按钮内的文本符号替换为可自适应大小的 Image 组件 - 保持图标外观和布局一致,增强视觉统一性 - 提升图标加载性能,适配绿色浮动按钮主题
This commit is contained in:
1
src/assets/icons/cart.svg
Normal file
1
src/assets/icons/cart.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
||||
|
After Width: | Height: | Size: 316 B |
3
src/assets/icons/index.ts
Normal file
3
src/assets/icons/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
// 白色购物车 SVG 图标(base64,用于绿色浮动按钮)
|
||||
export const CART_ICON_WHITE =
|
||||
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjkiIGN5PSIyMSIgcj0iMSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMSIgcj0iMSI+PC9jaXJjbGU+PHBhdGggZD0iTTEgMWg0bDIuNjggMTMuMzlhMiAyIDAgMCAwIDIgMS42MWg5LjcyYTIgMiAwIDAgMCAyLTEuNjFMMjMgNkg2Ij48L3BhdGg+PC9zdmc+'
|
||||
@@ -14,6 +14,7 @@ import { useShare } from '@/hooks/useShare'
|
||||
import EmptyState from '@/components/common/EmptyState'
|
||||
import LoadMore from '@/components/common/LoadMore'
|
||||
import Price from '@/components/common/Price'
|
||||
import { CART_ICON_WHITE } from '@/assets/icons'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '商品分类',
|
||||
@@ -360,7 +361,11 @@ const ShopPage: React.FC = () => {
|
||||
}}
|
||||
onClick={() => Taro.navigateTo({ url: '/pages/shop/cart' })}
|
||||
>
|
||||
<Text className='text-white text-xl'>🛒</Text>
|
||||
<Image
|
||||
className='w-7 h-7'
|
||||
src={CART_ICON_WHITE}
|
||||
mode='aspectFit'
|
||||
/>
|
||||
{totalCount > 0 && (
|
||||
<View
|
||||
className='flex items-center justify-center'
|
||||
|
||||
Reference in New Issue
Block a user