refactor(index): 重构首页网格布局并移除快速操作组件
- 移除 Divider 组件依赖并调整 Grid 组件样式配置 - 将网格列数从 3 列改为 4 列,调整内边距和字体大小 - 在 QuickActions 组件中添加 Avatar 组件支持 - 更新快速操作项的标题和图标显示逻辑 - 将 QuickActions 组件替换为 Grid 组件在首页中的位置 - 调整网格项目的间距和头像样式配置
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
import {useEffect, useState} from 'react'
|
import {useEffect, useState} from 'react'
|
||||||
import {Grid} from '@nutui/nutui-react-taro'
|
import {Grid} from '@nutui/nutui-react-taro'
|
||||||
import {Avatar, Divider} from '@nutui/nutui-react-taro'
|
import {Avatar} from '@nutui/nutui-react-taro'
|
||||||
import {View, Text} from '@tarojs/components'
|
import {View, Text} from '@tarojs/components'
|
||||||
import {listCmsNavigation} from "@/api/cms/cmsNavigation";
|
import {listCmsNavigation} from "@/api/cms/cmsNavigation";
|
||||||
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
|
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
|
||||||
@@ -29,22 +29,20 @@ const MyGrid = () => {
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View className={'p-4'}>
|
<View className={'p-0'}>
|
||||||
<View className={' bg-white rounded-2xl py-4'}>
|
<View className={' bg-white py-1'}>
|
||||||
<View className={'title font-medium px-4'}>功能菜单</View>
|
<Grid columns={4} square style={{
|
||||||
<Divider />
|
|
||||||
<Grid columns={3} square style={{
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
'--nutui-grid-border-color': 'transparent',
|
'--nutui-grid-border-color': 'transparent',
|
||||||
}}>
|
}}>
|
||||||
{
|
{
|
||||||
list.map((item) => (
|
list.map((item) => (
|
||||||
<Grid.Item key={item.navigationId} onClick={() => navTo(`${item.path}`,true)}>
|
<Grid.Item key={item.navigationId} onClick={() => navTo(`${item.path}`,true)}>
|
||||||
<Avatar src={item.icon} className={'mb-2'} shape="square" style={{
|
<Avatar src={item.icon} className={'mb-1'} shape="square" style={{
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
}}/>
|
}}/>
|
||||||
<Text className={'text-gray-600'} style={{
|
<Text className={'text-gray-600'} style={{
|
||||||
fontSize: '16px'
|
fontSize: '14px'
|
||||||
}}>{item.title}</Text>
|
}}>{item.title}</Text>
|
||||||
</Grid.Item>
|
</Grid.Item>
|
||||||
))
|
))
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { View, Text } from '@tarojs/components'
|
import { View, Text } from '@tarojs/components'
|
||||||
|
import {Avatar} from '@nutui/nutui-react-taro'
|
||||||
import Taro from '@tarojs/taro'
|
import Taro from '@tarojs/taro'
|
||||||
import {
|
import {
|
||||||
Star,
|
Star,
|
||||||
@@ -15,9 +16,10 @@ const QuickActions: React.FC = () => {
|
|||||||
const actions = [
|
const actions = [
|
||||||
{
|
{
|
||||||
icon: <Star size={22} />,
|
icon: <Star size={22} />,
|
||||||
title: '我要推荐',
|
title: '我要推荐2',
|
||||||
path: '/dealer/index',
|
path: '/dealer/index',
|
||||||
iconClass: 'qa-icon--orange'
|
iconClass: 'qa-icon--orange',
|
||||||
|
avatar: 'https://oss.wsdns.cn/20260330/5f54527123864193b0a2078f812b117f.png?x-oss-process=image/resize,m_fixed,w_200/quality,Q_90'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: <People size={22} />,
|
icon: <People size={22} />,
|
||||||
@@ -60,7 +62,9 @@ const QuickActions: React.FC = () => {
|
|||||||
onClick={() => handleClick(action)}
|
onClick={() => handleClick(action)}
|
||||||
>
|
>
|
||||||
<View className={`quick-actions__icon ${action.iconClass}`}>
|
<View className={`quick-actions__icon ${action.iconClass}`}>
|
||||||
{React.cloneElement(action.icon as React.ReactElement, { color: '#ffffff' })}
|
<Avatar src={action.avatar} className={'mb-2'} shape="square" style={{
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
}}/>
|
||||||
</View>
|
</View>
|
||||||
<Text className='quick-actions__label'>{action.title}</Text>
|
<Text className='quick-actions__label'>{action.title}</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ import Banner from "./Banner";
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
import Grid from "@/pages/index/Grid";
|
import Grid from "@/pages/index/Grid";
|
||||||
import PopUpAd from "@/pages/index/PopUpAd";
|
import PopUpAd from "@/pages/index/PopUpAd";
|
||||||
import QuickActions from "./QuickActions";
|
|
||||||
import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
|
import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
|
||||||
import type {Config} from "@/api/cms/cmsWebsiteField/model";
|
import type {Config} from "@/api/cms/cmsWebsiteField/model";
|
||||||
|
|
||||||
@@ -123,10 +122,10 @@ function Home() {
|
|||||||
<View className={'flex flex-col mt-1'}>
|
<View className={'flex flex-col mt-1'}>
|
||||||
<Menu/>
|
<Menu/>
|
||||||
<Banner/>
|
<Banner/>
|
||||||
<QuickActions/>
|
{/*<QuickActions/>*/}
|
||||||
|
<Grid />
|
||||||
<NoticeBar content={config?.NoticeBar || '主营直购电售电业务,以更优惠电价、更全面的服务,致力为工商企业创造更优越经营环境,帮助企业减负排压,深度赋能'} />
|
<NoticeBar content={config?.NoticeBar || '主营直购电售电业务,以更优惠电价、更全面的服务,致力为工商企业创造更优越经营环境,帮助企业减负排压,深度赋能'} />
|
||||||
<BestSellers/>
|
<BestSellers/>
|
||||||
<Grid />
|
|
||||||
</View>
|
</View>
|
||||||
<PopUpAd />
|
<PopUpAd />
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user