feat:开发企业商城首页页面

config/config.ts

@@ -62,6 +62,7 @@ const config: any = {
   metas: [],
   plugins: [],  // 配置项的名字通常是插件名去掉 umi-plugin- 或 @umijs/plugin 前缀。
   proxy,
+  // ssr: {},
   /**
    * 配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的值
    * 当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可以

package.json

@@ -41,6 +41,8 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-image-crop": "^8.6.4",
+    "react-reconciler": "^0.25.1",
+    "rgbaster": "^2.1.1",
     "typescript": "^3.9.7",
     "umi": "^3.2.0",
     "yorkie": "^2.0.0"

src/pages/lxMall/components/FloorLine/banner.tsx

+import React from 'react'
+import { Carousel } from 'antd'
+import classNames from 'classnames'
+import { ConfigConsumer } from '../Generator'
+
+interface FloorBannerProps {
+  className?: string;
+  prefixCls?: string;
+}
+
+export default class FloorBanner extends React.Component<FloorBannerProps, {}> {
+
+  renderComponent = ({ getPrefixCls }: any) => {
+    const { children, className, ...others } = this.props
+    const prefixCls = getPrefixCls('floor-line-banner', this.props.prefixCls);
+    const classString = classNames(prefixCls, className);
+
+    return (
+      <section className={classString} {...others}>
+        <Carousel dotPosition="bottom" autoplay >
+          <div className="floor-line-banner-item">
+            <a href="/">
+              <img className="floor-line-banner-item-img" src="https://img.alicdn.com/simba/img/TB1t7ZcRXXXXXXWaXXXSutbFXXX.jpg" />
+            </a>
+          </div>
+          <div className="floor-line-banner-item">
+            <a href="/">
+              <img className="floor-line-banner-item-img" src=" https://img.alicdn.com/simba/img/TB1tfu_G4D1gK0jSZFKSuwJrVXa.jpg" />
+            </a>
+          </div>
+
+        </Carousel>
+      </section>
+    )
+  }
+
+  render() {
+
+    return <ConfigConsumer>{this.renderComponent}</ConfigConsumer>
+  }
+}
+

src/pages/lxMall/components/FloorLine/brand.tsx

+import React from 'react'
+import classNames from 'classnames'
+import { ConfigConsumer } from '../Generator'
+
+interface BrandProps {
+  className?: string;
+  prefixCls?: string;
+}
+
+export default class Brand extends React.Component<BrandProps, {}> {
+
+  renderComponent = ({ getPrefixCls }: any) => {
+    const { children, className, ...others } = this.props
+    const prefixCls = getPrefixCls('floor-line-brand', this.props.prefixCls);
+    const classString = classNames(prefixCls, className);
+
+    const mockList = []
+
+    return (
+      <section className={classString} {...others}>
+        <div className="brand_list">
+          <div className="brand_list_item">
+            <div className="brand_img_box">
+              <img src="https://img.alicdn.com/i2/2/TB1GJzSbQfb_uJjSsrbXXb6bVXa?abtest=&pos=1&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
+            </div>
+          </div>
+          <div className="brand_list_item">
+            <div className="brand_img_box">
+              <img src="https://img.alicdn.com/i2/2/TB1GJzSbQfb_uJjSsrbXXb6bVXa?abtest=&pos=1&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
+            </div>
+          </div>
+          <div className="brand_list_item">
+            <div className="brand_img_box">
+              <img src="https:////img.alicdn.com/i2/2/TB1pwpNhfBNTKJjy1zdXXaScpXa?abtest=&pos=13&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
+            </div>
+          </div>
+          <div className="brand_list_item">
+            <div className="brand_img_box">
+              <img src="https://img.alicdn.com/i2/2/TB1GJzSbQfb_uJjSsrbXXb6bVXa?abtest=&pos=1&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
+            </div>
+          </div>
+          <div className="brand_list_item">
+            <div className="brand_img_box">
+              <img src="https:////img.alicdn.com/i2/2/TB1pwpNhfBNTKJjy1zdXXaScpXa?abtest=&pos=13&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
+            </div>
+          </div>
+          <div className="brand_list_item">
+            <div className="brand_img_box">
+              <img src="https://img.alicdn.com/i2/2/TB1GJzSbQfb_uJjSsrbXXb6bVXa?abtest=&pos=1&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
+            </div>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  render() {
+
+    return <ConfigConsumer>{this.renderComponent}</ConfigConsumer>
+  }
+}
\ No newline at end of file

src/pages/lxMall/components/FloorLine/category.tsx

+import React from 'react'
+import classNames from 'classnames'
+import { RightOutlined } from '@ant-design/icons'
+import { ConfigConsumer } from '../Generator'
+
+interface CategoryProps {
+  className?: string;
+  prefixCls?: string;
+}
+
+export default class Category extends React.Component<CategoryProps, {}> {
+
+  renderComponent = ({ getPrefixCls }: any) => {
+    const { children, className, ...others } = this.props
+    const prefixCls = getPrefixCls('floor-line-category', this.props.prefixCls);
+    const classString = classNames(prefixCls, className);
+
+    const mockList = [
+      {
+        id: 1,
+        name: '文件柜'
+      },
+      {
+        id: 2,
+        name: '岩板餐桌'
+      },
+      {
+        id: 3,
+        name: '五金'
+      },
+
+    ]
+
+    return (
+      <section className={classString} {...others}>
+        <img className="floor-line-category-banner" src="https://img.alicdn.com/tps/i4/TB1MesKcWmWQ1JjSZPhwu0CJFXa.png" />
+        <div className="recommend_category_list">
+          {
+            mockList.map(item => (
+              <div className="recommend_category_list_item" key={item.id}>
+                <a href="">
+                  <div className="recommend_category_list_item_body">
+                    <span className="text">{item.name}</span>
+                    <RightOutlined className="icon" />
+                  </div>
+                </a>
+              </div>
+
+            ))
+          }
+          <div className="recommend_category_list_item">
+            <a href="">
+              <div className="recommend_category_list_item_body">
+                <span className="text">更多</span>
+                <RightOutlined className="icon" />
+              </div>
+            </a>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  render() {
+
+    return <ConfigConsumer>{this.renderComponent}</ConfigConsumer>
+  }
+}
\ No newline at end of file

src/pages/lxMall/components/FloorLine/floortHeader.tsx

+import React from 'react'
+import classNames from 'classnames'
+import { ConfigConsumer } from '../Generator'
+
+interface FloorHeaderProps {
+  className?: string;
+  prefixCls?: string;
+}
+
+export default class FloorHeader extends React.Component<FloorHeaderProps, {}> {
+
+  renderComponent = ({ getPrefixCls }: any) => {
+    const { children, className, ...others } = this.props
+    const prefixCls = getPrefixCls('floor-line-header', this.props.prefixCls);
+    const classString = classNames(prefixCls, className);
+
+    return (
+      <section className={classString} {...others}>
+        <div className="floor-line-header-count-info">
+          <div className="floor-line-header-count-info-item">
+            <span>156</span>
+            <label>家店铺 &gt;</label>
+          </div>
+          <div className="floor-line-header-count-info-item">
+            <span>2,423</span>
+            <label>个商品 &gt;</label>
+          </div>
+          {children}
+        </div>
+
+      </section>
+    )
+  }
+
+  render() {
+
+    return <ConfigConsumer>{this.renderComponent}</ConfigConsumer>
+  }
+}
+

src/pages/lxMall/components/FloorLine/goods.tsx

+import React from 'react'
+import classNames from 'classnames'
+import { Link } from 'umi'
+import { ConfigConsumer } from '../Generator'
+
+interface GoodsProps {
+  className?: string;
+  prefixCls?: string;
+}
+
+export default class Goods extends React.Component<GoodsProps, {}> {
+
+  renderShowCase = ({ getPrefixCls }: any) => {
+
+    const { children, className, ...others } = this.props
+    const prefixCls = getPrefixCls('floor-line-goods', this.props.prefixCls);
+    const classString = classNames(prefixCls, className);
+
+    let dataList = []
+    for (let i = 0; i < 10; i++) {
+      dataList.push(i)
+    }
+
+    return (
+      <section className={classString} {...others}>
+        <div className="goods_list">
+          {
+            dataList.map(item => (
+
+              <div key={item} className="goods_list_item">
+                <Link to="/">
+                  <div className="goods_img">
+                    <img src="https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg" />
+                  </div>
+                  <div className="goods_name">产地大厂精选尖货</div>
+                  <div className="goods_price"><span>￥</span>79.00</div>
+                </Link>
+              </div>
+
+            ))
+          }
+
+        </div>
+
+      </section>
+    )
+  }
+
+  render() {
+
+    return <ConfigConsumer>{this.renderShowCase}</ConfigConsumer>
+  }
+}
\ No newline at end of file

src/pages/lxMall/components/FloorLine/horizontal.tsx

+import React from 'react'
+import './index.less'
+
+const Horizontal: React.FC = (props) => {
+  return (
+    <div className="floor_line_horizontal">
+      {props.children}
+    </div>
+  )
+}
+
+export default Horizontal
\ No newline at end of file

src/pages/lxMall/components/FloorLine/index.less

+.lingxi-floor_line {
+  position: relative;
+
+
+  .floor_line_container {
+    padding-top: 42px;
+    padding-bottom: 40px;
+    border-bottom: 1px solid #E5E5E5;
+    width: 1200px;
+    margin: 0 auto;
+
+    .floor_line_name {
+      line-height: 20px;
+      margin-bottom: 22px;
+
+      .floor_line_name_text {
+        font-size: 20px;
+        font-weight: bold;
+        color: #333333;
+
+      }
+
+      .floor_line_more {
+        float: right;
+        color: #666666;
+        font-size: 14px;
+      }
+    }
+  }
+
+
+}
+
+// 品类样式
+.lingxi-floor-line-category {
+  position: relative;
+  width: 152px;
+  height: 517px;
+  overflow: hidden;
+
+  .floor-line-category-banner {
+    height: 100%;
+  }
+
+  .recommend_category_list {
+    position: absolute;
+    width: 120px;
+    bottom: 20px;
+
+    left: 0;
+    z-index: 5;
+
+    &_item {
+      padding: 0 10px;
+      background: #ffffff;
+
+      &:hover {
+        background-color: #F5F5F5;
+      }
+
+      &:not(:last-child) {
+        .recommend_category_list_item_body {
+          border-bottom: 1px solid #F5F5F5;
+        }
+      }
+
+      .recommend_category_list_item_body {
+        display: flex;
+        align-items: center;
+        height: 36px;
+        padding-left: 10px;
+
+        &>.text {
+          color: #333333;
+          font-size: 12px;
+          flex: 1;
+        }
+
+        &>.icon {
+          color: rgba(0, 0, 0, .15);
+        }
+      }
+    }
+
+    a {
+      color: #333333;
+    }
+  }
+}
+
+// 楼层头部样式
+.lingxi-floor-line-header {
+  width: 100%;
+  height: 90px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #F5F5F5;
+  padding-left: 21px;
+  display: flex;
+
+  .floor-line-header-count-info {
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    &-item {
+      margin-right: 30px;
+      font-size: 14px;
+      color: #333333;
+
+      &>span {
+        margin-right: 9px;
+        font-size: 16px;
+        font-weight: 500;
+      }
+
+    }
+  }
+}
+
+// 商品列表样式
+.lingxi-floor-line-goods {
+  width: 772px;
+  height: 428px;
+  background: #ffffff;
+
+  .goods_list {
+    display: flex;
+    flex-wrap: wrap;
+
+    &_item {
+      width: 150px;
+      height: 214px;
+      padding-top: 20px;
+
+      a {
+        outline: none;
+      }
+
+      .goods_img {
+        width: 120px;
+        height: 120px;
+        overflow: hidden;
+        margin: 0 auto;
+
+        &>img {
+          height: 100%;
+          display: block;
+          margin: 0 auto;
+        }
+      }
+
+      .goods_name {
+        font-size: 14px;
+        color: #333333;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 14px;
+        margin-top: 15px;
+      }
+
+      .goods_price {
+        text-align: center;
+        color: var(--mall_main_color);
+        margin-top: 16px;
+        line-height: 16px;
+
+        &>span {
+          font-size: 12px;
+
+        }
+      }
+    }
+
+  }
+}
+
+// 店铺列表样式
+.lingxi-floor-line-shop {
+  flex: 1;
+  background-color: #ffffff;
+  border-left: 1px solid #F5F5F5;
+
+  .shop_title {
+    height: 60px;
+    line-height: 60px;
+    font-size: 16px;
+    font-weight: 500;
+    padding-left: 20px;
+    border-bottom: 1px solid #F5F5F5;
+  }
+
+  .shop_list {
+    padding-top: 30px;
+
+    &_item {
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+
+      &:not(:last-child) {
+        margin-bottom: 30px;
+
+      }
+
+      .shop_logo {
+        width: 36px;
+        height: 36px;
+        overflow: hidden;
+        border-radius: 50%;
+        margin-right: 10px;
+
+        &>img {
+          height: 100%;
+          min-width: 100%;
+        }
+      }
+
+      .shop_name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 14px;
+        color: #333333;
+
+      }
+    }
+  }
+}
+
+// 品牌样式
+.lingxi-floor-line-brand {
+  width: 100%;
+  height: 100px;
+  background-color: #ffffff;
+  border-top: 1px solid #F5F5F5;
+
+  .brand_list {
+    display: flex;
+
+    &_item {
+      display: flex;
+      width: 200px;
+      height: 100px;
+      align-items: center;
+      justify-content: center;
+
+      &:not(:last-child) {
+        border-right: 1px solid #F5F5F5;
+      }
+
+      .brand_img_box {
+        width: 120px;
+        height: 60px;
+
+        &>img {
+          width: 100%;
+          height: 60px;
+        }
+      }
+    }
+  }
+}
+
+.lingxi-floor-line-banner {
+  width: 500px;
+  height: 90px;
+  overflow: hidden;
+  margin-left: auto;
+
+  .floor-line-banner-item {
+
+    .floor-line-banner-item-img {
+      height: 100px;
+      width: auto;
+      display: block;
+      margin: 0 auto;
+    }
+  }
+
+  .ant-carousel .slick-dots-bottom {
+    bottom: 0;
+    margin-bottom: 15px;
+    justify-content: flex-start;
+    margin-left: 20px;
+  }
+
+  .ant-carousel .slick-dots li {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: rgba(204, 204, 204, 1);
+    border: 1px solid rgba(204, 204, 204, 1);
+
+    &.slick-active {
+      border: 1px solid #fff;
+      background-color: #fff;
+
+      button {
+        background: transparent;
+      }
+    }
+  }
+
+  .ant-carousel .slick-slide {
+    text-align: center;
+    height: 90px;
+    line-height: 90px;
+    background: #364d79;
+    overflow: hidden;
+  }
+
+  .ant-carousel .slick-slide h3 {
+    color: #fff;
+  }
+}
+
+.floor_line_horizontal {
+  display: flex;
+  flex-direction: row;
+}
+
+
+
+.floor_line_vertical {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
\ No newline at end of file

src/pages/lxMall/components/FloorLine/index.tsx

+
+import React from 'react'
+import { RightOutlined } from '@ant-design/icons'
+import { Link } from 'umi'
+import classNames from 'classnames'
+import { ConfigContext } from '../Generator'
+import Brand from './brand'
+import Goods from './goods'
+import Shops from './shops'
+import Category from './category'
+import FloorHeader from './floortHeader'
+import Horizontal from './horizontal'
+import Vertical from './vertical'
+import Banner from './banner'
+import './index.less'
+
+interface FloorLineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  prefixCls?: string;
+  title?: React.ReactNode | string;
+}
+
+interface FloorLineInterface extends FloorLineProps {
+  Brand?: typeof Brand;
+  Goods?: typeof Goods;
+  Shops?: typeof Shops;
+  Category?: typeof Category;
+  FloorHeader?: typeof FloorHeader;
+  Banner?: typeof Banner;
+  Vertical?: typeof Vertical;
+  Horizontal?: typeof Horizontal;
+}
+
+const FloorLine: FloorLineInterface & React.FC<FloorLineInterface> = (props) => {
+
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { children, title, className, ...others } = props
+  const prefixCls = getPrefixCls('floor_line', props.prefixCls);
+  const classString = classNames(prefixCls, className);
+
+  return (
+    <div className={classString} {...others}>
+      <div className="floor_line_container">
+        <div className="floor_line_name">
+          <span className="floor_line_name_text">{title}</span>
+          <Link to="/" className="floor_line_more">更多好货 <RightOutlined /></Link>
+        </div>
+        <div className="floor_line_body">
+          {children}
+        </div>
+      </div>
+
+    </div>
+  )
+}
+
+FloorLine.Brand = Brand
+FloorLine.Goods = Goods
+FloorLine.Shops = Shops
+FloorLine.Category = Category
+FloorLine.FloorHeader = FloorHeader
+FloorLine.Banner = Banner
+FloorLine.Vertical = Vertical
+FloorLine.Horizontal = Horizontal
+
+export default FloorLine

src/pages/lxMall/components/FloorLine/shops.tsx

+import React from 'react'
+import classNames from 'classnames'
+import defaultLogo from '@/assets/imgs/default_logo.png'
+import { ConfigConsumer } from '../Generator'
+
+interface ShopsProps {
+  className?: string;
+  prefixCls?: string;
+}
+
+export default class Shops extends React.Component<ShopsProps, {}> {
+
+  renderShowCase = ({ getPrefixCls }: any) => {
+
+    const { children, className, ...others } = this.props
+    const prefixCls = getPrefixCls('floor-line-shop', this.props.prefixCls);
+    const classString = classNames(prefixCls, className);
+
+    const mockList = [
+      {
+        title: '无锡市群明钢业有限公司'
+      },
+      {
+        title: '常州市康庄物资有限公司'
+      },
+      {
+        title: '上海美政材料有限公司'
+      },
+      {
+        title: '无锡蓝冰你好皮料有限公司'
+      },
+      {
+        title: '上海赛和皮具材料有限公司'
+      }
+    ]
+
+    return (
+      <section className={classString} {...others}>
+        <div className="shop_title">推荐店铺</div>
+        <div className="shop_list">
+          {
+            mockList.map((item, index) => (
+              <div key={`shop_list_item-${index}`} className="shop_list_item">
+                <div className="shop_logo"><img src={defaultLogo} /></div>
+                <div className="shop_name">{item.title}</div>
+              </div>
+            ))
+          }
+
+        </div>
+      </section>
+    )
+  }
+
+  render() {
+
+    return <ConfigConsumer>{this.renderShowCase}</ConfigConsumer>
+  }
+}
+

src/pages/lxMall/components/FloorLine/vertical.tsx

+import React from 'react'
+import './index.less'
+
+const Vertical: React.FC = (props) => {
+  return (
+    <div className="floor_line_vertical">
+      {props.children}
+    </div>
+  )
+}
+
+export default Vertical
\ No newline at end of file

src/pages/lxMall/components/Generator/index.tsx

+import * as React from 'react';
+
+export const ConfigContext = React.createContext<any>({
+  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
+    if (customizePrefixCls) return customizePrefixCls;
+
+    return suffixCls ? `lingxi-${suffixCls}` : 'lingxi';
+  },
+});
+
+export const ConfigConsumer = ConfigContext.Consumer;
+
+export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefixCls?: string;
+}
+
+export interface GeneratorProps {
+  suffixCls: string;
+  tagName: 'section' | 'nav' | 'div' | 'span';
+  displayName: string;
+}
+
+export const Generator = ({ suffixCls, tagName, displayName }: GeneratorProps) => {
+  return (BasicComponent: any) => {
+    return class Adapter extends React.Component<BasicProps, any> {
+      static displayName: string = displayName;
+
+      renderComponent = ({ getPrefixCls }: any) => {
+        const { prefixCls: customizePrefixCls } = this.props;
+        const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
+
+        return <BasicComponent prefixCls={prefixCls} tagName={tagName} {...this.props} />;
+      };
+
+      render() {
+        return <ConfigConsumer>{this.renderComponent}</ConfigConsumer>;
+      }
+    };
+  };
+}

src/pages/lxMall/components/Information/index.less

+.information {
+  position: relative;
+
+  .information_container {
+    width: 1200px;
+    margin: 0 auto;
+    background: #ffffff;
+
+    .information_header {
+      height: 60px;
+      line-height: 60px;
+      padding-left: 20px;
+
+      &>span {
+        font-size: 16px;
+        font-weight: 500;
+        margin-right: 10px;
+      }
+
+      &>label {
+        font-size: 12px;
+        color: #999999;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/lxMall/components/Information/index.tsx

+import React from 'react'
+import './index.less'
+
+const Information: React.FC = () => {
+
+  return (
+    <div className="information">
+      <div className="information_container">
+        <div className="information_header">
+          <span>行情资讯</span>
+          <label>今日热点 | 行业头条 | 专题报道 | 政策法规 ...</label>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+
+export default Information

src/pages/lxMall/components/QuickNav/index.less

+@import '../../../../theme/style/common.less';
+@import '../../../../theme/style/colors.less';
+
+.quikc_nav {
+  .common_page_container();
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 460px;
+  z-index: 1;
+
+  .quikc_nav_right {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    width: 240px;
+    height: 440px;
+    background: #fff;
+    z-index: 8;
+
+    .member_card {
+      background-color: #FAFAFA;
+      height: 148px;
+
+      .member_no_login {
+
+        .welcome {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 20px 0;
+
+          .welcome_avatar {
+            width: 40px;
+            height: 40px;
+            background: var(--mall_main_color);
+            color: #FFFFFF;
+            border-radius: 50%;
+            line-height: 40px;
+            text-align: center;
+            margin-right: 10px;
+          }
+
+          .welcome_textspan {
+            font-size: 12px;
+            color: #333333;
+          }
+        }
+
+        .btn_group {
+          display: flex;
+          justify-content: center;
+
+          .btn_item {
+            font-size: 14px;
+            height: 28px;
+            border: 1px solid var(--mall_main_color);
+            padding: 0 28px;
+            color: var(--mall_main_color);
+            line-height: 26px;
+            text-align: center;
+            cursor: pointer;
+            margin: 0 10px;
+
+            &.primary {
+              background-color: var(--mall_main_color);
+              color: #FFFFFF;
+            }
+
+            &:hover,
+            &:active {
+              opacity: .8;
+            }
+          }
+        }
+      }
+    }
+
+    .quick_tab {
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &_item {
+        flex: 1;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        color: #999999;
+        font-size: 14px;
+        background-color: #F5F5F5;
+        cursor: pointer;
+
+        &.active {
+          background-color: #FFFFFF;
+          color: #333333;
+        }
+      }
+    }
+
+    .quick_nav_list {
+      display: flex;
+      flex-wrap: wrap;
+      padding-top: 20px;
+
+      &_item {
+        display: flex;
+        width: 33.33%;
+        flex-direction: column;
+        height: 80px;
+        align-items: center;
+        justify-content: center;
+
+        &.bb {
+          border-bottom: 1px solid #F5F5F5;
+        }
+
+        &_icon {
+          width: 24px;
+          height: 24px;
+
+        }
+
+        &_text {
+          font-size: 12px;
+          margin-top: 16px;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/lxMall/components/QuickNav/index.tsx

+import React, { useState, useEffect } from 'react'
+import { Link } from 'umi'
+import cx from 'classnames'
+import editIcon from '@/assets/imgs/edit_icon.png'
+import './index.less'
+
+const QuickNav: React.FC = (props) => {
+
+  const [tabType, setTabType] = useState<number>(1) // 1; 卖家服务；2：买家服务
+
+  const handleChangeTabType = (type: number) => {
+
+    if (tabType !== type) {
+      setTabType(type)
+    }
+
+  }
+
+  // 卖家服务快捷导航
+  const sell_quick_nav_list = [
+    {
+      path: '/memberCenter/home',
+      title: '上传商品',
+    },
+    {
+      path: '/memberCenter/home',
+      title: '报价',
+    },
+    {
+      path: '/memberCenter/home',
+      title: '接单',
+    },
+  ]
+  // 买家服务快捷导航
+  const buy_quick_nav_list = [
+    {
+      path: '/memberCenter/home',
+      title: '我要求购',
+    },
+    {
+      path: '/memberCenter/home',
+      title: '报价信息',
+    },
+    {
+      path: '/memberCenter/home',
+      title: '我的订单',
+    },
+  ]
+  // 公用快捷导航
+  const quick_nav_list = [
+    {
+      path: '/memberCenter/home',
+      title: '找现货',
+    },
+    {
+      path: '/memberCenter/home',
+      title: '找供应',
+    },
+    {
+      path: '/memberCenter/home',
+      title: '去求购',
+    },
+    {
+      path: '/memberCenter/home',
+      title: '找店铺',
+    },
+    {
+      path: '/memberCenter/home',
+      title: '换积分',
+    },
+    {
+      path: '/memberCenter/home',
+      title: '看资讯',
+    },
+  ]
+
+  useEffect(() => {
+    // let arr = document.getElementsByTagName("a")
+    // for (var i = 0; i < arr.length; i++) {
+    //   arr[i].setAttribute("rel", arr[i].href);
+    //   arr[i].removeAttribute("href");
+    // }
+  }, [])
+
+  return (
+    <div className="quikc_nav">
+      <div className="quikc_nav_right">
+        <div className="member_card">
+          <div className="member_no_login">
+            <div className="welcome">
+              <div className="welcome_avatar">Hi</div>
+              <span className="welcome_text">Hi，欢迎来到XX商城</span>
+            </div>
+            <div className="btn_group">
+              <div className="btn_item primary">登陆</div>
+              <div className="btn_item">注册</div>
+            </div>
+          </div>
+        </div>
+        <div className="quick_tab">
+          <div className={cx("quick_tab_item", tabType === 1 ? 'active' : '')} onClick={() => handleChangeTabType(1)}>卖家服务</div>
+          <div className={cx("quick_tab_item", tabType === 2 ? 'active' : '')} onClick={() => handleChangeTabType(2)}>买家服务</div>
+        </div>
+        <div className="quick_nav_list">
+          {
+            tabType === 1 ? sell_quick_nav_list.map((item, index) => (
+              <a href={item.path} className="quick_nav_list_item bb" key={`sell_quick_nav_list_item-${index}`}>
+                <img className="quick_nav_list_item_icon" src={editIcon} />
+                <span className="quick_nav_list_item_text">{item.title}</span>
+              </a>
+            )) : buy_quick_nav_list.map((item, index) => (
+              <a href={item.path} className="quick_nav_list_item bb" key={`buy_quick_nav_list_item-${index}`}>
+                <img className="quick_nav_list_item_icon" src={editIcon} />
+                <span className="quick_nav_list_item_text">{item.title}</span>
+              </a>
+            ))
+          }
+          {
+            quick_nav_list.map((item, index) => (
+              <a href={item.path} className="quick_nav_list_item" key={`quick_nav_list_item-${index}`}>
+                <img className="quick_nav_list_item_icon" src={editIcon} />
+                <span className="quick_nav_list_item_text">{item.title}</span>
+              </a>
+            ))
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default QuickNav

src/pages/lxMall/components/SideNav/index.less

+.side_nav {
+  position: fixed;
+  width: 4px;
+  height: 100%;
+  background-color: #262626;
+  right: 0;
+  top: 0;
+  z-index: 999;
+
+  .side_nav_container {
+    position: relative;
+    height: 100%;
+
+    .side_nav_list {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto 0;
+      height: 270px;
+
+
+      &_item {
+        width: 40px;
+        height: 40px;
+        background-color: #262626;
+        margin-bottom: 5px;
+        color: #FFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+
+        &:hover {
+          cursor: pointer;
+          background-color: var(--mall_main_color);
+        }
+      }
+    }
+  }
+
+}
\ No newline at end of file

src/pages/lxMall/components/SideNav/index.tsx

+import React from 'react'
+import { createFromIconfontCN } from '@ant-design/icons';
+import './index.less'
+
+const MyIcon = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_1971099_fazltoyqwsg.js', // 在 iconfont.cn 上生成
+});
+
+const SideNav: React.FC = () => {
+
+  return (
+    <div className="side_nav">
+      <div className="side_nav_container">
+        <div className="side_nav_list">
+          <div className="side_nav_list_item">
+            <MyIcon type="icon-aixin" />
+          </div>
+          <div className="side_nav_list_item">
+            <MyIcon type="icon-shoucang" />
+          </div>
+          <div className="side_nav_list_item">
+            <MyIcon type="icon-cart" />
+          </div>
+          <div className="side_nav_list_item">
+            <MyIcon type="icon-xiaoxi" />
+          </div>
+          <div className="side_nav_list_item">
+            <MyIcon type="icon-erweima" />
+          </div>
+          <div className="side_nav_list_item">
+            <MyIcon type="icon-zuji" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SideNav
\ No newline at end of file

src/pages/lxMall/components/TopBar/index.less

@@ -4,6 +4,7 @@
   position: relative;
   height: 30px;
   width: 100%;
+  background-color: #FFF;
 
   .topbar_container {
     .common_page_container();

src/pages/lxMall/components/advert/index.less

@@ -2,6 +2,7 @@
   width: 100%;
   height: 70px;
   overflow: hidden;
+  background-color: #ffffff;
 
   img {
     width: 100%;

src/pages/lxMall/components/category/index.less

@@ -28,7 +28,7 @@
 
   .category_content {
     position: absolute;
-    // display: none;
+    display: none;
     width: 190px;
     height: 460px;
     background-color: #ffffff;
@@ -135,12 +135,18 @@
               .second_category_type {
                 margin-top: 30px;
 
+                a {
+                  color: #333333;
+                }
+
                 &>.title {
                   color: #333333;
                   font-size: 14px;
                   line-height: 14px;
                   font-weight: bold;
                   margin-bottom: 5px;
+
+
                 }
 
                 .third_category_type_list {

src/pages/lxMall/components/category/index.tsx

@@ -29,10 +29,14 @@ const Category: React.FC = () => {
                 <div className="category_type_list">
                   <div className="title">成品皮</div>
                   <div className="second_category_type">
-                    <div className="title">牛皮 <RightOutlined /></div>
+                    <div className="title">
+                      <Link to="/">
+                        牛皮 <RightOutlined />
+                      </Link>
+                    </div>
                     <ul className="third_category_type_list">
-                      <li>黄牛皮</li>
-                      <li>水牛皮</li>
+                      <li><Link to="/">黄牛皮</Link></li>
+                      <li><Link to="/">水牛皮</Link></li>
                       <li>奶牛皮</li>
                       <li>牦牛皮</li>
                       <li>黄牛皮</li>

src/pages/lxMall/components/header/index.less

@@ -5,6 +5,8 @@
 
 .header {
   position: relative;
+  background-color: #FFF;
+
   width: 100%;
 
   .header_container {

src/pages/lxMall/components/mainNav/index.less

@@ -6,6 +6,7 @@
 .main_nav {
   position: relative;
   border-bottom: 2px solid @mall_main_color;
+  background-color: #FFF;
 
   &_container {
     .common_page_container();

src/pages/lxMall/components/mainNav/index.tsx

 import React from 'react'
-import Category from '../category'
+import Category from '../Category'
 import './index.less'
 
 const MainNav: React.FC = () => {

src/pages/lxMall/index/index.less

 @import '../../../theme/style/common.less';
+@import '../../../theme/style/colors.less';
 
-.title {
-
-  color: var(--font-color);
+body {
+  background-color: #F5F5F5;
 }
 
 .banner {
   position: relative;
 
-  .banner_container {
-    .common_page_container();
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+  .banner_list {
+
+    .banner_list_item {
+      height: 460px;
+
+      &_img {
         height: 460px;
-    z-index: 2;
-
-    .banner_right {
-      position: absolute;
-      top: 10px;
-      right: 0;
-      width: 240px;
-      height: 440px;
-      background: #fff;
+      }
+
+      .banner_list_item_body {}
     }
   }
 }
@@ -31,11 +25,34 @@
 .ant-carousel .slick-slide {
   text-align: center;
   height: 460px;
-  line-height: 160px;
-  background: #364d79;
   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

-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect } from 'react'
 import { Link } from 'umi'
 import { Carousel } from 'antd'
-import Header from '../components/header'
-import MainNav from '../components/mainNav'
+import defaultImg from '@/assets/imgs/banner_1.png'
+import QuickNav from '../components/QuickNav'
+import FloorLine from '../components/FloorLine'
+import Information from '../components/Information'
+import analyze from 'rgbaster'
 import './index.less'
 
 const ShopCenterIndex: React.FC = () => {
 
+  useEffect(() => {
+    getImgRGB()
+  }, [])
+
+  const getImgRGB = async () => {
+    // 获取图片主题色
+    // const result = await analyze('https://img.alicdn.com/tps/i4/TB1ICgYL.H1gK0jSZSySuttlpXa.jpg')
+    // console.log(`The dominant color is ${result[0].color} with ${result[0].count} occurrence(s)`)
+  }
+
   return (
     <Fragment>
       <div className="banner">
-        <Carousel >
-          <div>
-            <h3>1</h3>
+        <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>
-            <h3>2</h3>
           </div>
-          <div>
-            <h3>3</h3>
+          <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>
-            <h3>4</h3>
           </div>
         </Carousel>
-        <div className="banner_container">
-          <div className="banner_right">
+        <QuickNav />
 
       </div>
+      <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>
+      <FloorLine
+        title="家装建材"
+      >
+        <FloorLine.Horizontal>
+          <FloorLine.Category />
+          <FloorLine.Vertical>
+            <FloorLine.FloorHeader>
+              <FloorLine.Banner />
+            </FloorLine.FloorHeader>
+            <FloorLine.Horizontal>
+              <FloorLine.Goods />
+              <FloorLine.Shops />
+            </FloorLine.Horizontal>
+          </FloorLine.Vertical>
+        </FloorLine.Horizontal>
+        <FloorLine.Brand />
+      </FloorLine>
 
-    </Fragment>
+      <Information />
+    </Fragment >
   )
 }
 

src/pages/lxMall/layouts/LXMallLayout.tsx

 import React from 'react'
 import TopBar from '../components/TopBar'
-import Advert from '../components/advert'
-import Header from '../components/header'
-import MainNav from '../components/mainNav'
+import Advert from '../components/Advert'
+import Header from '../components/Header'
+import MainNav from '../components/MainNav'
+import SideNav from '../components/SideNav'
 import styles from './index.less'
 
 const LXMallLayout: React.FC = (props) => {
@@ -17,6 +18,7 @@ const LXMallLayout: React.FC = (props) => {
         <MainNav />
         {children}
       </div>
+      <SideNav />
     </div>
   )
 }