Skip to content

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

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

parent de38f643
Hide whitespace changes
Inline Side-by-side
Showing with 851 additions and 57 deletions
config/shopRoutes/index.ts → config/mallRoutes/index.ts
View file @ b59db045
......@@ -2,13 +2,14 @@
const shopRoute = {
path: '/',
component: '@/pages/lxMall/layouts/LXMallLayout',
routes: [
{
// 首页
path: `/`,
name: 'home',
key: 'home',
component: '@/pages/shopCenter/index',
component: '@/pages/lxMall/index',
},
{
// 资讯
......
config/router.ts
View file @ b59db045
import memberCenterRoute from './routes'
import shopRoute from './shopRoutes'
import shopRoute from './mallRoutes'
/**
* @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes
......
src/pages/lxMall/components/TopBar/index.less 0 → 100644
View file @ b59db045
@import '../../../../theme/style/common.less';
.topbar {
position: relative;
height: 30px;
width: 100%;
.topbar_container {
.common_page_container();
.topbar_menu {
padding: 0;
margin: 0;
height: 30px;
line-height: 30px;
font-size: 12px;
&.right {
position: absolute;
right: 0;
top: 0;
}
.topbar_menu_item {
position: relative;
display: inline-block;
list-style: none;
padding: 0 16px;
color: #333333;
&.nopad {
padding: 0;
}
&.pad_left_0 {
padding-left: 0;
}
&>a {
color: #333333;
}
.icon {
margin-right: 6px;
}
&:not(:last-child) {
&::after {
content: '';
position: absolute;
width: 1px;
height: 12px;
background-color: #E5E5E5;
right: 0;
top: 0;
bottom: 0;
margin: auto 0;
}
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/components/TopBar/index.tsx 0 → 100644
View file @ b59db045
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 = () => {
return (
<div className="topbar">
<div className="topbar_container">
<ul className="topbar_menu left">
<li className="topbar_menu_item pad_left_0">
<span>XX商城欢迎你!</span>
</li>
<li className="topbar_menu_item">
<EnvironmentOutlined className="icon" />
<span>广州</span>
</li>
</ul>
<ul className="topbar_menu right">
<li className="topbar_menu_item">
<Link to="/user/login">请登录</Link>
</li>
<li className="topbar_menu_item">
<Link to="/user/register">注册</Link>
</li>
<li className="topbar_menu_item">
<Link to="/memberCenter/home">会员中心</Link>
</li>
<li className="topbar_menu_item">我的消息</li>
<li className="topbar_menu_item">客户服务</li>
<li className="topbar_menu_item nopad"><SelectLang /></li>
</ul>
</div>
</div>
)
}
export default TopBar
\ No newline at end of file
src/pages/lxMall/components/advert/index.less 0 → 100644
View file @ b59db045
.advert {
width: 100%;
height: 70px;
overflow: hidden;
img {
width: 100%;
}
}
\ No newline at end of file
src/pages/lxMall/components/advert/index.tsx 0 → 100644
View file @ b59db045
import React from 'react'
import default_ad_img from '@/assets/imgs/default_ad_img.png'
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>
)
}
export default Advert
src/pages/lxMall/components/category/index.less 0 → 100644
View file @ b59db045
@import '../../../../theme/style/colors.less';
@mall_main_color: var(--mall_main_color);
@mall_sub_color: var(--mall_sub_color);
.category {
position: relative;
.category_type {
position: relative;
float: left;
width: 190px;
height: 40px;
background-color: @mall_main_color;
color: #FFF;
line-height: 40px;
&>.icon {
margin: 0 20px;
}
&:hover {
+.category_content {
display: block;
}
}
}
.category_content {
position: absolute;
// display: none;
width: 190px;
height: 460px;
background-color: #ffffff;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
top: 40px;
left: 0;
z-index: 5;
&:hover {
display: block;
}
.category_type_panel {
position: relative;
width: 100%;
height: 100%;
.category_nav_list {
padding: 0;
margin: 0;
&_item {
padding-left: 20px;
padding: 12px 19px 8px 20px;
list-style: none;
cursor: pointer;
&:hover {
background-color: @mall_sub_color;
border-left: 2px solid @mall_main_color;
.main_category,
.sub_category a,
.right_icon {
color: @mall_main_color;
}
.category_type_content {
display: block;
}
}
.main_category {
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
.sub_category {
font-size: 12px;
line-height: 12px;
margin-top: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
a {
color: #666666;
&:not(:last-child) {
margin-right: 10px;
}
}
}
.right_icon {
position: absolute;
right: 19px;
color: rgba(0, 0, 0, 0.25);
top: 20px;
font-size: 14px;
}
.category_type_content {
position: absolute;
display: none;
top: 0;
left: 188px;
border: 2px solid @mall_main_color;
height: 460px;
width: 750px;
background-color: #FFF;
z-index: 2;
white-space: nowrap;
&:hover {
display: block;
}
.category_type_list {
display: inline-block;
height: 100%;
padding: 26px 0 26px 38px;
width: 500px;
&>.title {
font-size: 16px;
color: #666666;
line-height: 14px;
}
.second_category_type {
margin-top: 30px;
&>.title {
color: #333333;
font-size: 14px;
line-height: 14px;
font-weight: bold;
margin-bottom: 5px;
}
.third_category_type_list {
padding: 0;
margin: 0 -10px;
white-space: pre-wrap;
&>li {
list-style: none;
display: inline-block;
margin-top: 15px;
padding: 0 10px;
line-height: 12px;
font-size: 12px;
}
}
}
}
.category_type_right_wrap {
float: right;
width: 240px;
height: 100%;
border-left: 1px solid #F5F5F5;
.category_advert {
padding: 20px;
border-bottom: 1px solid #F5F5F5;
.category_advert_item {
width: 200px;
height: 100px;
// background-color: #F5F5F5;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
&:not(:last-child) {
margin-bottom: 20px;
}
&>img {
display: block;
height: auto;
width: 100%;
}
}
}
.category_brand {
flex-wrap: wrap;
display: flex;
padding: 15px 9px;
.category_brand_item {
width: 100px;
height: 50px;
// background-color: #F5F5F5;
margin: 2.5px 5px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
&>img {
display: block;
max-height: 40px;
max-width: 80px;
}
}
}
}
}
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/components/category/index.tsx 0 → 100644
View file @ b59db045
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'
const Category: React.FC = () => {
return (
<div className="category">
<div className="category_type">
<MenuOutlined className="icon" />
<span>全部商品分类</span>
</div>
<div className="category_content">
<div className="category_type_panel">
<ul className="category_nav_list">
<li className="category_nav_list_item">
<div className="main_category">成品皮</div>
<div className="sub_category">
<Link to="/">牛皮</Link>
<Link to="/">羊皮</Link>
<Link to="/">猪皮</Link>
</div>
<RightOutlined className="right_icon" />
<div className="category_type_content">
<div className="category_type_list">
<div className="title">成品皮</div>
<div className="second_category_type">
<div className="title">牛皮 <RightOutlined /></div>
<ul className="third_category_type_list">
<li>黄牛皮</li>
<li>水牛皮</li>
<li>奶牛皮</li>
<li>牦牛皮</li>
<li>黄牛皮</li>
<li>水牛皮</li>
<li>奶牛皮</li>
<li>牦牛皮</li>
<li>黄牛皮</li>
<li>水牛皮</li>
<li>奶牛皮</li>
<li>牦牛皮</li>
</ul>
</div>
<div className="second_category_type">
<div className="title">猪皮 <RightOutlined /></div>
<ul className="third_category_type_list">
<li>头层</li>
<li>二层</li>
</ul>
</div>
<div className="second_category_type">
<div className="title">猪皮 <RightOutlined /></div>
<ul className="third_category_type_list">
<li>头层</li>
<li>二层</li>
</ul>
</div>
<div className="second_category_type">
<div className="title">马皮 <RightOutlined /></div>
<ul className="third_category_type_list">
<li>头层</li>
<li>二层</li>
</ul>
</div>
</div>
<div className="category_type_right_wrap">
<div className="category_advert">
<div className="category_advert_item"><img src={defaultImg} /></div>
<div className="category_advert_item"><img src={defaultImg} /></div>
</div>
<div className="category_brand">
<div className="category_brand_item"><img src={defaultBrand} /></div>
<div className="category_brand_item"><img src={defaultBrand} /></div>
<div className="category_brand_item"><img src={defaultBrand} /></div>
<div className="category_brand_item"><img src={defaultBrand} /></div>
<div className="category_brand_item"><img src={defaultBrand} /></div>
<div className="category_brand_item"><img src={defaultBrand} /></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Category
\ No newline at end of file
src/pages/lxMall/components/header/index.less 0 → 100644
View file @ b59db045
@import '../../../../theme/style/common.less';
@import '../../../../theme/style/colors.less';
@mall_main_color: var(--mall_main_color);
.header {
position: relative;
width: 100%;
.header_container {
.common_page_container();
height: 110px;
.logo {
display: inline-block;
padding: 32px 95px 0 17px;
&>img {
width: 145px;
height: 50px;
}
}
.mall_search {
display: inline-block;
width: 632px;
vertical-align: top;
padding-top: 24px;
.mall_search_tags {
.mall_search_tags_item {
display: inline-block;
height: 24px;
line-height: 24px;
color: @mall_main_color;
font-size: 12px;
padding: 0 9px;
cursor: pointer;
&.active {
background-color: @mall_main_color;
color: #FFF;
}
}
}
.mall_search_box {
.commone_input_placeholder();
position: relative;
width: 100%;
border: 2px solid @mall_main_color;
height: 40px;
.mall_search_input {
display: inline-block;
width: 521px;
height: 36px;
line-height: 36px;
outline: none;
border: none;
text-indent: 12px;
}
.search_btn {
position: absolute;
background-color: @mall_main_color;
color: #FFF;
width: 120px;
height: 100%;
line-height: 36px;
text-align: center;
font-size: 14px;
z-index: 1;
right: 0;
top: 0;
cursor: pointer;
}
}
}
.shopping_cart {
position: relative;
vertical-align: top;
margin-top: 48px;
margin-left: 66px;
display: inline-block;
width: 110px;
height: 40px;
border: 1px solid rgba(204, 204, 204, 1);
line-height: 38px;
color: @mall_main_color;
text-align: center;
cursor: pointer;
.card_icon {
margin-right: 14px;
}
.badge {
position: absolute;
width: 16px;
height: 16px;
left: 26px;
top: 4px;
border-radius: 50%;
overflow: hidden;
line-height: 16px;
font-size: 12px;
color: #FFF;
background-color: @mall_main_color;
}
}
}
}
\ No newline at end of file
src/pages/lxMall/components/header/index.tsx 0 → 100644
View file @ b59db045
import React, { useState } from 'react'
import cx from 'classnames'
import { FileTextOutlined } from '@ant-design/icons'
import logo from '@/theme/imgs/logo_w.png'
import './index.less'
const Header: React.FC = (props) => {
const [searchType, setSearchType] = useState<number>(1) // 1:商品； 2：店铺
const handleChangeSearchType = (type: number) => {
if (searchType !== type) {
setSearchType(type)
}
}
return (
<div className="header">
<div className="header_container">
<div className="logo">
<img src={logo} />
</div>
<div className="mall_search">
<div className="mall_search_tags">
<div className={cx("mall_search_tags_item", searchType === 1 ? 'active' : '')} onClick={() => handleChangeSearchType(1)}>商品</div>
<div className={cx("mall_search_tags_item", searchType === 2 ? 'active' : '')} onClick={() => handleChangeSearchType(2)}>店铺</div>
</div>
<div className="mall_search_box">
<input className="mall_search_input" placeholder="请输入关键词" />
<div className="search_btn">搜索</div>
</div>
</div>
<div className="shopping_cart">
<div className="badge">0</div>
<FileTextOutlined className="card_icon" />
<span>进货单</span>
</div>
</div>
</div>
)
}
export default Header
src/pages/lxMall/components/mainNav/index.less 0 → 100644
View file @ b59db045
@import '../../../../theme/style/common.less';
@import '../../../../theme/style/colors.less';
@mall_main_color: var(--mall_main_color);
.main_nav {
position: relative;
border-bottom: 2px solid @mall_main_color;
&_container {
.common_page_container();
height: 40px;
&>.nav {
padding: 0;
margin: 0;
position: relative;
float: left;
margin-left: 20px;
.nav_item {
list-style: none;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
font-weight: bold;
&.active {
color: @mall_main_color;
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/components/mainNav/index.tsx 0 → 100644
View file @ b59db045
import React from 'react'
import Category from '../category'
import './index.less'
const MainNav: React.FC = () => {
return (
<div className="main_nav">
<div className="main_nav_container">
<Category />
<ul className="nav">
<li className="nav_item active">首页</li>
<li className="nav_item">商品商城</li>
<li className="nav_item">在线求购</li>
<li className="nav_item">积分商城</li>
<li className="nav_item">店铺</li>
<li className="nav_item">资讯</li>
</ul>
</div>
</div>
)
}
export default MainNav
src/pages/lxMall/index/index.less 0 → 100644
View file @ b59db045
@import '../../../theme/style/common.less';
.title {
color: var(--font-color);
}
.banner {
position: relative;
.banner_container {
.common_page_container();
position: absolute;
top: 0;
left: 0;
right: 0;
height: 460px;
z-index: 2;
.banner_right {
position: absolute;
top: 10px;
right: 0;
width: 240px;
height: 440px;
background: #fff;
}
}
}
.ant-carousel .slick-slide {
text-align: center;
height: 460px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
\ No newline at end of file
src/pages/lxMall/index/index.tsx 0 → 100644
View file @ b59db045
import React, { Fragment } from 'react'
import { Link } from 'umi'
import { Carousel } from 'antd'
import Header from '../components/header'
import MainNav from '../components/mainNav'
import './index.less'
const ShopCenterIndex: React.FC = () => {
return (
<Fragment>
<div className="banner">
<Carousel >
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>
<div className="banner_container">
<div className="banner_right">
</div>
</div>
</div>
</Fragment>
)
}
export default ShopCenterIndex
src/pages/lxMall/layouts/LXMallLayout.tsx 0 → 100644
View file @ b59db045
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 styles from './index.less'
const LXMallLayout: React.FC = (props) => {
const { children } = props
return (
<div className={styles.lxmall_page}>
<TopBar />
<Advert />
<div className={styles.content}>
<Header />
<MainNav />
{children}
</div>
</div>
)
}
export default LXMallLayout
src/pages/lxMall/layouts/index.less 0 → 100644
View file @ b59db045
.lxmall_page {
position: relative;
.content {
position: relative;
}
}
\ No newline at end of file
src/pages/shopCenter/index/index.less deleted 100644 → 0
View file @ de38f643
.title {
color: var(--font-color);
}
\ No newline at end of file
src/pages/shopCenter/index/index.tsx deleted 100644 → 0
View file @ de38f643
import React from 'react'
import { SettingDrawer } from '@ant-design/pro-layout'
import { Link } from 'umi'
import { Button } from 'antd'
import styles from './index.less'
const ShopCenterIndex: React.FC = () => {
return (
<div>
<p className={styles.title}>ShopCenterIndex</p>
<Button type="primary">TEST Theme</Button>
<div>
<Link to="/memberCenter/home">会员中心</Link>
</div>
<SettingDrawer />
</div>
)
}
export default ShopCenterIndex
src/store/theme/index.ts
View file @ b59db045
......@@ -2,7 +2,7 @@ import { observable } from 'mobx'
import { IThemeModule } from '@/types/ThemeStoreType'
class ThemeStore implements IThemeModule {
@observable public themeName: string = 'science';
@observable public themeName: string = 'science'; // fresh:清新类模板；science：科技类模板
}
......
src/theme/default/styles/colors.less deleted 100644 → 0
View file @ de38f643
@default_btn_color: green;
@default_text_color: green;
\ No newline at end of file
src/theme/fresh/styles/colors.less 0 → 100644
View file @ b59db045
@default_btn_color: red;
@default_text_color: red;
.theme-mall-fresh {
// fresh下的全局变量在此定义
--mall_main_color: #464552;
--font-color: cyan;
--bg-color: #ffffff;
}
\ No newline at end of file
src/theme/science/styles/colors.less 0 → 100644
View file @ b59db045
@default_btn_color: green;
@default_text_color: green;
.theme-mall-science {
// science下的全局变量在此定义
--mall_main_color: #D32F2F;
--mall_sub_color: rgba(211, 47, 47, 0.1);
--font-color: red;
--bg-color: #011313;
}
\ No newline at end of file
src/theme/style/colors.less
View file @ b59db045
.body-wrap-theme1 {
// theme1下的全局变量在此定义
--font-color: red;
--bg-color: #011313;
}
.body-wrap-theme2 {
// theme2下的全局变量在此定义
--font-color: cyan;
--bg-color: #ffffff;
}
@import '../science/styles/colors.less';
@import '../fresh/styles/colors.less';
\ No newline at end of file
src/theme/style/common.less 0 → 100644
View file @ b59db045
@page_body_minWidth: 1200px;
.common_page_container() {
position: relative;
width: @page_body_minWidth;
margin: 0 auto
}
.commone_input_placeholder() {
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #CCCCCC;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #CCCCCC;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #CCCCCC;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #CCCCCC;
}
}
\ No newline at end of file
src/theme/style/login.less
View file @ b59db045
.theme-default {
@import './default/styles/login.less';
}
.theme-template2 {
@import './template2/styles/login.less';
}
\ No newline at end of file
src/theme/template2/styles/colors.less deleted 100644 → 0
View file @ de38f643
@default_btn_color: red;
@default_text_color: red;
\ No newline at end of file
src/wrappers/getSiteConfig.tsx
View file @ b59db045
......@@ -28,7 +28,7 @@ const GetSiteConfig: React.FC<AuthComponentPropsType> = (props) => {
styleLink.rel = 'stylesheet';
styleLink.id = 'theme-style';
styleLink.href = `/theme/${themeName}.css`;
body.className = `body-wrap-${themeName}`;
body.className = `theme-mall-${themeName}`;
document.body.append(styleLink);
}, 100);
......
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