Skip to content

J
jinfa-platform
Commit 59fae481 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:商城页面组件

parent f63ba8f5
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 133 deletions
src/pages/lxMall/components/QuickNav/index.less
View file @ 59fae481
@import '../../../../theme/style/common.less';
@import '../../../../theme/style/colors.less';
.quikc_nav {
.common_page_container();
position: relative;
width: 1200px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
......
src/pages/lxMall/components/QuickNav/index.tsx
View file @ 59fae481
import React, { useState, useEffect } from 'react'
import { Link } from 'umi'
import cx from 'classnames'
import editIcon from '@/assets/imgs/edit_icon.png'
import editIcon from './edit_icon.png'
import './index.less'
const QuickNav: React.FC = (props) => {
......
src/pages/lxMall/components/TopBar/index.tsx
View file @ 59fae481
import React from 'react'
import { EnvironmentOutlined } from '@ant-design/icons'
import SelectLang from '@/layouts/components/SelectLang';
import { Link } from 'umi'
import './index.less'
const TopBar: React.FC = () => {
interface TopBarPropsType {
langComponent?: React.ReactNode
}
const TopBar: React.FC<TopBarPropsType> = (props) => {
const { langComponent } = props
return (
<div className="topbar">
......@@ -20,17 +23,19 @@ const TopBar: React.FC = () => {
</ul>
<ul className="topbar_menu right">
<li className="topbar_menu_item">
<Link to="/user/login">请登录</Link>
<a href="/user/login">请登录</a>
</li>
<li className="topbar_menu_item">
<Link to="/user/register">注册</Link>
<a href="/user/register">注册</a>
</li>
<li className="topbar_menu_item">
<Link to="/memberCenter/home">会员中心</Link>
<a href="/memberCenter/home">会员中心</a>
</li>
<li className="topbar_menu_item">我的消息</li>
<li className="topbar_menu_item">客户服务</li>
<li className="topbar_menu_item nopad"><SelectLang /></li>
{
langComponent && (<li className="topbar_menu_item nopad">{langComponent}</li>)
}
</ul>
</div>
</div>
......
src/pages/lxMall/components/advert/index.less
View file @ 59fae481
.advert {
.lingxi-advert {
width: 100%;
height: 70px;
overflow: hidden;
......@@ -7,4 +7,54 @@
img {
width: 100%;
}
}
.lingxi-banner {
position: relative;
.banner_list {
.banner_list_item {
height: 460px;
&_img {
height: 460px;
}
}
}
.ant-carousel .slick-slide {
text-align: center;
height: 460px;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
}
.lingxi-interact_list {
display: flex;
width: 1200px;
margin: 20px auto;
margin-bottom: 0;
justify-content: space-between;
.interact_list_item {
width: 285px;
height: 120px;
overflow: hidden;
&>a {
outline: none;
text-decoration: none;
&>img {
width: 100%;
height: auto;
}
}
}
}
\ No newline at end of file
src/pages/lxMall/components/advert/index.tsx
View file @ 59fae481
import React from 'react'
import default_ad_img from '@/assets/imgs/default_ad_img.png'
import { Carousel } from 'antd'
import default_ad_img from './default_ad_img.png'
import default_banner from './banner_1.png'
import classNames from 'classnames'
import { ConfigConsumer } from '../Generator'
import './index.less'
const Advert: React.FC = () => {
return (
<div className="advert">
<a href="https://www.tmall.com/" target="_blank">
<img src={default_ad_img} />
</a>
</div>
)
interface AdvertPropsType {
className?: string;
prefixCls?: string;
type?: 'top' | 'banner' | 'interact'; // top: 顶部广告；banner:轮播广告;interact:banner下的广告
}
const Advert: React.FC<AdvertPropsType> = (props) => {
const renderAdvert = ({ getPrefixCls }: any) => {
const { type = 'top', children, className, ...others } = props
switch (type) {
case 'top':
const topPrefixCls = getPrefixCls('advert', props.prefixCls);
const topClassString = classNames(topPrefixCls, className);
return (
<div className={topClassString}>
<Carousel className="topAdvert_list" autoplay pauseOnDotsHover pauseOnHover>
<div className="topAdvert_list_item">
<a href="javascript:;" >
<img src={default_ad_img} />
</a>
</div>
</Carousel>
</div>
)
case 'banner':
const bannerPrefixCls = getPrefixCls('banner', props.prefixCls);
const bannerClassString = classNames(bannerPrefixCls, className);
return (
<div className={bannerClassString}>
<Carousel className="banner_list" autoplay pauseOnDotsHover>
<div className="banner_list_item" >
<div className="banner_list_item_body" style={{ backgroundColor: 'rgb(193, 193, 195)' }}>
<a href="">
<div className="banner_list_item_img" style={{ background: `url(https://img.alicdn.com/tps/i4/TB1ICgYL.H1gK0jSZSySuttlpXa.jpg) center center no-repeat` }}></div>
</a>
</div>
</div>
<div className="banner_list_item" >
<div className="banner_list_item_body" style={{ backgroundColor: 'rgb(170, 0, 239)' }}>
<a href="">
<div className="banner_list_item_img" style={{ background: `url(https://img.alicdn.com/imgextra/i4/81/O1CN01VT5ViO1CT8h4sY7qc_!!81-0-luban.jpg_q100.jpg_.webp) center center no-repeat` }}></div>
</a>
</div>
</div>
</Carousel>
{children}
</div>
)
case 'interact':
const interactPrefixCls = getPrefixCls('interact_list', props.prefixCls);
const interactClassString = classNames(interactPrefixCls, className);
return (
<div className={interactClassString}>
<div className="interact_list_item">
<a href="/">
<img src={default_banner} />
</a>
</div>
<div className="interact_list_item">
<a href="/">
<img src={default_banner} />
</a>
</div>
<div className="interact_list_item">
<a href="/">
<img src={default_banner} />
</a>
</div>
<div className="interact_list_item">
<a href="/">
<img src={default_banner} />
</a>
</div>
</div>
)
default:
return null
}
}
return <ConfigConsumer>{renderAdvert}</ConfigConsumer>
}
export default Advert
src/pages/lxMall/components/category/index.tsx
View file @ 59fae481
import React from 'react'
import { MenuOutlined, RightOutlined } from '@ant-design/icons'
import defaultImg from '@/assets/imgs/template_default_img.png'
import defaultBrand from '@/theme/imgs/logo_w.png'
import './index.less'
import { Link } from 'umi'
......
src/pages/lxMall/components/header/index.less
View file @ 59fae481
@import '../../../../theme/style/common.less';
@import '../../../../theme/style/colors.less';
@mall_main_color: var(--mall_main_color);
.header {
position: relative;
background-color: #FFF;
width: 100%;
.header_container {
......
src/pages/lxMall/index/index.less
View file @ 59fae481
......@@ -3,54 +3,4 @@
body {
background-color: #F5F5F5;
}
.banner {
position: relative;
.banner_list {
.banner_list_item {
height: 460px;
&_img {
height: 460px;
}
}
}
}
.ant-carousel .slick-slide {
text-align: center;
height: 460px;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
.interact_list {
display: flex;
width: 1200px;
margin: 20px auto;
margin-bottom: 0;
justify-content: space-between;
&_item {
width: 285px;
height: 120px;
overflow: hidden;
&>a {
outline: none;
text-decoration: none;
&>img {
width: 100%;
height: auto;
}
}
}
}
\ No newline at end of file
src/pages/lxMall/index/index.tsx
View file @ 59fae481
import React, { Fragment, useEffect } from 'react'
import { Link } from 'umi'
import { Carousel, Anchor } from 'antd'
import defaultImg from '@/assets/imgs/banner_1.png'
import Advert from '../components/Advert'
import QuickNav from '../components/QuickNav'
import FloorLine from '../components/FloorLine'
import Information from '../components/Information'
......@@ -18,7 +16,8 @@ const MallIndex: React.FC = () => {
const getImgRGB = async () => {
// 获取图片主题色
// const result = await analyze('https://img.alicdn.com/tps/i4/TB1ICgYL.H1gK0jSZSySuttlpXa.jpg')
const result = await analyze('https://img.alicdn.com/tps/i4/TB1ICgYL.H1gK0jSZSySuttlpXa.jpg')
console.log(result[0])
// console.log(`The dominant color is ${result[0].color} with ${result[0].count} occurrence(s)`)
}
......@@ -39,48 +38,11 @@ const MallIndex: React.FC = () => {
return (
<Fragment>
<div className="banner">
<Carousel className="banner_list" autoplay pauseOnDotsHover>
<div className="banner_list_item" >
<div className="banner_list_item_body" style={{ backgroundColor: 'rgb(193, 193, 195)' }}>
<a href="">
<div className="banner_list_item_img" style={{ background: `url(https://img.alicdn.com/tps/i4/TB1ICgYL.H1gK0jSZSySuttlpXa.jpg) center center no-repeat` }}></div>
</a>
</div>
</div>
<div className="banner_list_item" >
<div className="banner_list_item_body" style={{ backgroundColor: 'rgb(170, 0, 239)' }}>
<a href="">
<div className="banner_list_item_img" style={{ background: `url(https://img.alicdn.com/imgextra/i4/81/O1CN01VT5ViO1CT8h4sY7qc_!!81-0-luban.jpg_q100.jpg_.webp) center center no-repeat` }}></div>
</a>
</div>
</div>
</Carousel>
<Advert type="banner">
<QuickNav />
</div>
</Advert>
<FloorAnchor anchorList={category_list} type="mall" />
<div className="interact_list">
<div className="interact_list_item">
<Link to="/">
<img src={defaultImg} />
</Link>
</div>
<div className="interact_list_item">
<Link to="/">
<img src={defaultImg} />
</Link>
</div>
<div className="interact_list_item">
<Link to="/">
<img src={defaultImg} />
</Link>
</div>
<div className="interact_list_item">
<Link to="/">
<img src={defaultImg} />
</Link>
</div>
</div>
<Advert type="interact" />
{
category_list.map(item => (
<FloorLine
......
src/pages/lxMall/layouts/LXMallLayout.tsx
View file @ 59fae481
import React from 'react'
import React, { useEffect } from 'react'
import {
BasicLayoutProps as ProLayoutProps,
getMenuData
} from '@ant-design/pro-layout';
import SelectLang from '@/layouts/components/SelectLang'
import { useIntl } from 'umi';
import TopBar from '../components/TopBar'
import Advert from '../components/Advert'
......@@ -31,12 +32,15 @@ const LXMallLayout: React.FC<LXMallLayoutPropsType> = (props) => {
const basicInfo = getMenuData(props.route.routes, { locale: true }, formatMessage)
const menuData = basicInfo.menuData ? basicInfo.menuData.filter(item => !item.redirect) : []
// const menuRouter = getMenuRouter(menuData, location.pathname)
useEffect(() => {
let body = document.getElementsByTagName('body')[0];
body.className = `theme-mall-science`;
}, [])
return (
<div className={styles.lxmall_page}>
<TopBar />
<Advert />
<TopBar langComponent={<SelectLang />} />
<Advert type="top" />
<div className={styles.content}>
<Header type="mall" />
<MainNav menuData={menuData} pathname={location.pathname} />
......
src/theme/science/styles/colors.less
View file @ 59fae481
@default_btn_color: green;
@default_text_color: green;
.theme-mall-science {
// science下的全局变量在此定义
--mall_main_color: #D32F2F;
......@@ -19,6 +16,4 @@
--category_content_title_text: #FFFFFF;
--category_content_sub_title_text: rgba(255, 255, 255, .45);
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment