Skip to content

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

feat:店铺关于我们页面

parent 6e0574f7
Hide whitespace changes
Inline Side-by-side
Showing with 479 additions and 10 deletions
config/shopRoutes/index.ts
View file @ 4ffe9dc2
......@@ -19,6 +19,13 @@ const shopRoute = {
component: '@/pages/lxMall/commodity',
},
{
// 关于我们
path: `/shop/about`,
name: 'shopAbout',
key: 'shopAbout',
component: '@/pages/lxMall/shopAbout',
},
{
// 商品详情
path: `/shop/commodity/detail`,
name: 'commodityDetail',
......@@ -34,7 +41,7 @@ const shopRoute = {
{
component: '@/pages/404',
},
],
}
......
src/locales/zh-CN/menu.ts
View file @ 4ffe9dc2
......@@ -15,6 +15,7 @@ export default {
'menu.purchaseOnline': '在线求购',
'menu.pointsMall': '积分商城',
'menu.shops': '店铺',
'menu.shopAbout': '关于我们',
'menu.infomation': '资讯',
'menu.admin': '管理页',
'menu.admin.sub-page': '二级管理页',
......
src/pages/lxMall/components/MainNav/index.tsx
View file @ 4ffe9dc2
......@@ -2,7 +2,7 @@ import React from 'react'
import { Link } from 'umi'
import cx from 'classnames'
import Category from '../Category'
import './index.less'
import styles from './index.less'
interface MainNavPropsType {
menuData: any;
......@@ -15,13 +15,13 @@ const MainNav: React.FC<MainNavPropsType> = (props) => {
console.log(type, "type")
return (
<div className={cx("main_nav", type === "shop" ? "shop" : "")}>
<div className="main_nav_container">
<div className={cx(styles.main_nav, type === "shop" ? styles.shop : "")}>
<div className={styles.main_nav_container}>
<Category />
<ul className="nav">
<ul className={styles.nav}>
{
menuData && menuData.map(item => !item.hide && (
<li className={cx("nav_item", item.path === pathname ? 'active' : '')} key={item.key}>
<li className={cx(styles.nav_item, item.path === pathname ? styles.active : '')} key={item.key}>
<Link to={item.path}>{item.name}</Link>
</li>
))
......
src/pages/lxMall/order/index.less
View file @ 4ffe9dc2
@import './common.less';
.order {
background-color: #FFF;
padding-bottom: 60px;
&_container {
width: 1200px;
......@@ -89,6 +91,7 @@
}
}
}
.settlement_box {
height: 50px;
margin-top: 30px;
......
src/pages/lxMall/purchaseOrder/index.less
View file @ 4ffe9dc2
body {
background: #FFF;
}
.purchase_order {
background: #FFF;
padding-bottom: 60px;
position: relative;
&_container {
......
src/pages/lxMall/shopAbout/index.less 0 → 100644
View file @ 4ffe9dc2
.shop_about {
background-color: #ffffff;
padding-bottom: 60px;
&_container {
width: 1200px;
margin: 0 auto;
padding-top: 40px;
.shop_about_info {
display: flex;
&_item {
flex: 1;
&_character {
position: relative;
left: -8px;
display: block;
font-size: 80px;
color: #C0C4CC;
line-height: 1;
font-family: Helvetica;
height: 40px;
}
.shop_about_info_title {
font-size: 24px;
line-height: 24px;
color: #333333;
font-weight: 500;
margin-bottom: 20px;
&_about {
display: flex;
margin-top: 4px;
&_item {
display: flex;
align-items: center;
margin-right: 25px;
&>.rate {
font-size: 14px;
}
&>span {
font-size: 14px;
color: #333333;
line-height: 20px;
&.red {
color: #D32F2F;
margin-right: 4px;
}
}
&>.icon {
position: relative;
top: -1px;
overflow: hidden;
margin-right: 5px;
&>img {
width: 20px;
height: 20px;
}
}
}
}
}
}
}
.channel_info_about {
padding-top: 36px;
&_container {
width: 1200px;
margin: 0 auto;
position: relative;
display: flex;
.channel_info_about_img {
width: 600px;
&_list {
position: relative;
height: 460px;
// background-color: cyan;
}
.channel_info_about_img_item {
&_body {
.channel_info_about_img_item_img {
width: 600px;
height: 400px;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}
}
}
:global {
.ant-carousel .slick-dots li button {
background: rgba(0, 0, 0, 0.2);
}
.ant-carousel .slick-dots li {
&.slick-active {
button {
background: rgba(0, 0, 0, 1);
}
}
}
.ant-carousel .slick-dots li {
width: 30px;
}
}
}
.channel_info_about_info {
position: relative;
margin-left: 55px;
flex: 1;
width: 0;
padding-right: 68px;
&_tabs {
display: flex;
&_item {
width: 100px;
height: 36px;
line-height: 34px;
text-align: center;
border: 1px solid #FFF;
margin-right: 20px;
cursor: pointer;
&.active {
border: 1px solid rgba(238, 238, 238, 1);
}
}
}
&_title {
font-size: 24px;
font-weight: 500;
margin-top: 48px;
margin-bottom: 20px;
}
&_brief {
color: #666666;
}
&_more {
margin-top: 25px;
&>span {
cursor: pointer;
margin-right: 8px;
}
}
}
}
}
.shop_about_card_list {
display: flex;
padding: 30px 0;
margin: 0 -10px;
&_item {
margin: 0 10px;
flex: 1;
background-color: #fafafa;
padding: 40px 0 40px 22px;
&_content {
margin-top: 40px;
&>label {
font-size: 48px;
}
&>span {
font-size: 14px;
margin-left: 15px;
}
}
}
}
.shop_about_split {
display: flex;
align-items: center;
padding: 20px 0;
&_line {
flex: 1;
height: 4px;
background-color: #F5F5F5;
}
&_text {
margin: 0 20px;
font-size: 24px;
}
}
.exhibition_toolbar {
position: relative;
height: 256px;
width: 100%;
display: flex;
margin-top: 20px;
align-items: center;
.exhibition_tool_item {
position: absolute;
width: 24px;
height: 64px;
background: #FFF;
line-height: 60px;
text-align: center;
color: #C0C4CC;
cursor: pointer;
border: 1px solid rgba(244, 245, 247, 1);
&:hover {
background: #F5F5F5;
;
}
&.prev {
left: -44px;
}
&.next {
right: -44px;
}
}
.exhibition_list_contaner {
position: relative;
flex: 1;
overflow: hidden;
.exhibition_list {
position: relative;
white-space: nowrap;
transition: all .3s;
&_item {
position: relative;
display: inline-block;
width: 386px;
height: 256px;
overflow: hidden;
cursor: pointer;
margin-right: 20px;
&>img {
width: 100%;
display: block;
}
}
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/shopAbout/index.tsx 0 → 100644
View file @ 4ffe9dc2
import React, { useState } from 'react'
import { Rate, Carousel } from 'antd'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import cx from 'classnames'
import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png'
import companyImg from '@/assets/imgs/company_img.png'
import styles from './index.less'
const imgList = [
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-5.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-3.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-2.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg"
}
]
const ShopAbout: React.FC = () => {
const [offSetLeft, setOffSetLeft] = useState<number>(0)
const unitDistance = 406
const handlePrev = () => {
if (offSetLeft < 0) {
setOffSetLeft(offSetLeft + unitDistance)
}
}
const handleNext = () => {
let imgLength = imgList.length
let maxDistance = (imgLength - 3) * unitDistance
if (maxDistance > Math.abs(offSetLeft)) {
setOffSetLeft(offSetLeft - unitDistance)
}
}
return (
<div className={styles.shop_about}>
<div className={styles.shop_about_container}>
<div className={styles.shop_about_info}>
<div className={styles.shop_about_info_item}>
<div className={styles.shop_about_info_title}>广州白马灯具有限公司</div>
<div className={styles.shop_about_info_title_about}>
<div className={styles.shop_about_info_title_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>2</span>
<span>年</span>
</div>
<div className={styles.shop_about_info_title_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>1288</span>
</div>
<div className={styles.shop_about_info_title_about_item}>
<label>满意度：</label>
<Rate className={styles.rate} disabled defaultValue={2} />
</div>
</div>
</div>
<div className={styles.shop_about_info_item}>
<i className={styles.shop_about_info_item_character}>“</i>
<p>经营全粒面牛皮，修面皮，漆色皮，打腊皮，水腊皮，疯马皮，珠光变色，大小荔枝纹，打腊水腊皮生产销售</p>
</div>
</div>
<div className={styles.channel_info_about}>
<div className={styles.channel_info_about_container}>
<div className={styles.channel_info_about_img}>
<Carousel className={styles.channel_info_about_img_list} pauseOnDotsHover>
<div className={styles.channel_info_about_img_item} >
<div className={styles.channel_info_about_img_item_body}>
<a href="">
<div className={styles.channel_info_about_img_item_img} style={{ backgroundImage: `url(${companyImg})` }}></div>
</a>
</div>
</div>
<div className={styles.channel_info_about_img_item} >
<div className={styles.channel_info_about_img_item_body}>
<a href="">
<div className={styles.channel_info_about_img_item_img} style={{ backgroundImage: `url(${companyImg})` }}></div>
</a>
</div>
</div>
</Carousel>
</div>
<div className={styles.channel_info_about_info}>
<div className={styles.channel_info_about_info_title}>温州市龙昌皮具有限公司</div>
<p className={styles.channel_info_about_info_brief}>
公司位于温州，多年行业经验，专业经营各种成品真皮，包括全粒面牛皮，修面皮，漆色皮，打腊皮，水腊皮……二层皮胚，硅胶二层等,产品主要用于时尚女鞋、男鞋、箱包、皮带、服装、汽车内饰等高端皮具制品行业。
本着质量保证，品种多样，现货充足，款式新颖的经营特色和薄利多销的原则，为客户提供长期优质的服务！
</p>
<p>
同时公司长期寻找各皮厂合作，要求皮厂有自已的生产线及高性价比特色产品，可作为普通供应商合作，也可作为其核心经销商战略合作。欢迎来人来样，当面洽谈。
</p>
</div>
</div>
</div>
<div className={styles.shop_about_card_list}>
<div className={styles.shop_about_card_list_item}>
<div className={styles.shop_about_card_list_item_title}>店铺年龄</div>
<div className={styles.shop_about_card_list_item_content}>
<label>2</label>
<span>年</span>
</div>
</div>
<div className={styles.shop_about_card_list_item}>
<div className={styles.shop_about_card_list_item_title}>本店信用</div>
<div className={styles.shop_about_card_list_item_content}>
<label>1288</label>
<span>分</span>
</div>
</div>
<div className={styles.shop_about_card_list_item}>
<div className={styles.shop_about_card_list_item_title}>本店满意率</div>
<div className={styles.shop_about_card_list_item_content}>
<label>94</label>
<span>%</span>
</div>
</div>
<div className={styles.shop_about_card_list_item}>
<div className={styles.shop_about_card_list_item_title}>注册资本</div>
<div className={styles.shop_about_card_list_item_content}>
<label>5000</label>
<span>万元</span>
</div>
</div>
</div>
<div className={styles.shop_about_split}>
<div className={styles.shop_about_split_line}></div>
<div className={styles.shop_about_split_text}>资质荣誉</div>
<div className={styles.shop_about_split_line}></div>
</div>
<div className={styles.exhibition_toolbar}>
<div className={cx(styles.exhibition_tool_item, styles.prev)} onClick={() => handlePrev()}><LeftOutlined /></div>
<div className={styles.exhibition_list_contaner}>
<div className={styles.exhibition_list} style={{ left: offSetLeft }}>
{
imgList.map((item, index) => (
<div key={index} className={cx(styles.exhibition_list_item)}>
<img src={item.url} />
</div>
))
}
</div>
</div>
<div className={cx(styles.exhibition_tool_item, styles.next)} onClick={() => handleNext()}><RightOutlined /></div>
</div>
</div>
</div>
)
}
export default ShopAbout
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