Commit 48c1320e by 肖康

commit

parent 59043f9b
Showing with 0 additions and 5665 deletions
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
#/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
{
"files": {
"main.css": "/static/css/main.1539bebd.css",
"main.js": "/static/js/main.0bfb798f.js",
"static/media/contactUsBanner.png": "/static/media/contactUsBanner.3589d483b42e3df320a1.png",
"static/media/aboutUsBanner.png": "/static/media/aboutUsBanner.6aff9a629cca34f2447b.png",
"static/media/p404.png": "/static/media/p404.d99ce38b3c2654c5e3f5.png",
"static/media/iconfont.ttf?t=1719816191916": "/static/media/iconfont.e5c9229afc1da3904712.ttf",
"static/media/iconfont.woff?t=1719816191916": "/static/media/iconfont.e42dedab476e8fa9b144.woff",
"static/media/iconfont.woff2?t=1719816191916": "/static/media/iconfont.f461f4d34035e6bf1175.woff2",
"index.html": "/index.html",
"main.1539bebd.css.map": "/static/css/main.1539bebd.css.map",
"main.0bfb798f.js.map": "/static/js/main.0bfb798f.js.map"
},
"entrypoints": [
"static/css/main.1539bebd.css",
"static/js/main.0bfb798f.js"
]
}
\ No newline at end of file
No preview for this file type
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="keywords" content=""><meta name="description" content=""/><link rel="manifest" href="/manifest.json"/><title>麒麟电子商城</title><script defer="defer" src="/static/js/main.0bfb798f.js"></script><link href="/static/css/main.1539bebd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
\ No newline at end of file
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
@charset "utf-8";a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,input,label,li,mark,menu,nav,object,ol,p,pre,section,span,strong,textarea,time,ul,video{border:0;font-size:100%;font:inherit;font-weight:400;list-style:none;margin:0;outline:none;padding:0;resize:none;vertical-align:initial}table,tbody,td,tfoot,th,thead,tr{font-size:100%;font:inherit;margin:0;padding:0}a{text-decoration:none}a:hover{color:#ff9a00}table{border-color:#ccc!important}body,button,html,input{font-family:Arial,helvetica,PingFangSC-Regular,PingFang SC,微软雅黑}input::-webkit-input-placeholder{color:grey}.clr:after{display:block;font-size:0;height:0;visibility:hidden}.clr{clear:both;display:block;min-height:1%}.clr:after{clear:both;content:" ";display:table}.fl{float:left}.fr{float:right}.fw{font-weight:700}.ta-c{text-align:center}.ta-r{text-align:right}.ta-l{text-align:left}.column,.flex{display:flex}.column{flex-direction:column}.row{display:flex;flex-direction:row}.boxsiz{box-sizing:border-box}.bothSide{justify-content:space-between}.avarage{justify-content:space-around}.rowCenter{justify-content:center}.verCenter{align-items:center}body,html{background:#fafafa;color:#333;font-size:14px}.w1226{margin:0 auto;width:1226px}.ant-pagination{display:flex;justify-content:end}.ant-pagination .ant-pagination-item{padding:0 7px}.ant-pagination .ant-pagination-options{box-sizing:border-box;height:25px;min-height:25px;min-width:25px}.ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper{box-sizing:border-box;height:25px;line-height:25px;min-height:25px;min-width:25px}.ant-pagination .ant-pagination-options input{border-radius:1px;box-sizing:border-box;height:25px;min-height:25px;min-width:25px}.ant-pagination .ant-pagination-item,.ant-pagination .ant-pagination-jump-next,.ant-pagination .ant-pagination-jump-prev,.ant-pagination .ant-pagination-next,.ant-pagination .ant-pagination-prev{background:#fbfbfb;border:1px solid #e8e8e8;border-radius:2px;border-radius:1px;box-sizing:border-box;color:#616161;display:block;font-size:12px;height:25px;line-height:25px;min-height:25px;min-width:25px;position:relative;text-align:center;transition:all .5s}.ant-pagination .ant-pagination-item a,.ant-pagination .ant-pagination-item button,.ant-pagination .ant-pagination-item span,.ant-pagination .ant-pagination-jump-next a,.ant-pagination .ant-pagination-jump-next button,.ant-pagination .ant-pagination-jump-next span,.ant-pagination .ant-pagination-jump-prev a,.ant-pagination .ant-pagination-jump-prev button,.ant-pagination .ant-pagination-jump-prev span,.ant-pagination .ant-pagination-next a,.ant-pagination .ant-pagination-next button,.ant-pagination .ant-pagination-next span,.ant-pagination .ant-pagination-prev a,.ant-pagination .ant-pagination-prev button,.ant-pagination .ant-pagination-prev span{border-radius:0!important;padding:0!important}.ant-pagination .ant-pagination-item button,.ant-pagination .ant-pagination-jump-next button,.ant-pagination .ant-pagination-jump-prev button,.ant-pagination .ant-pagination-next button,.ant-pagination .ant-pagination-prev button{line-height:23px}.ant-pagination .ant-pagination-item.ant-pagination-item-active,.ant-pagination .ant-pagination-item:hover,.ant-pagination .ant-pagination-jump-next.ant-pagination-item-active,.ant-pagination .ant-pagination-jump-next:hover,.ant-pagination .ant-pagination-jump-prev.ant-pagination-item-active,.ant-pagination .ant-pagination-jump-prev:hover,.ant-pagination .ant-pagination-next.ant-pagination-item-active,.ant-pagination .ant-pagination-next:hover,.ant-pagination .ant-pagination-prev.ant-pagination-item-active,.ant-pagination .ant-pagination-prev:hover{background-color:none;background:linear-gradient(180deg,#fdfdfd,#e2e2e2)!important;border:1px solid #a1a1a1!important;color:#313131}.ant-pagination .ant-pagination-item.ant-pagination-item-active a,.ant-pagination .ant-pagination-item:hover a,.ant-pagination .ant-pagination-jump-next.ant-pagination-item-active a,.ant-pagination .ant-pagination-jump-next:hover a,.ant-pagination .ant-pagination-jump-prev.ant-pagination-item-active a,.ant-pagination .ant-pagination-jump-prev:hover a,.ant-pagination .ant-pagination-next.ant-pagination-item-active a,.ant-pagination .ant-pagination-next:hover a,.ant-pagination .ant-pagination-prev.ant-pagination-item-active a,.ant-pagination .ant-pagination-prev:hover a{background:none;color:#313131}@font-face{font-family:iconfont;src:url(/static/media/iconfont.f461f4d34035e6bf1175.woff2) format("woff2"),url(/static/media/iconfont.e42dedab476e8fa9b144.woff) format("woff"),url(/static/media/iconfont.e5c9229afc1da3904712.ttf) format("truetype")}.iconfont{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:iconfont!important;font-size:16px;font-style:normal}.icon-B-fuxuankuang:before{content:"\e728"}.icon-email:before{content:"\e693"}.icon-phone:before{content:"\e694"}.icon-sanjiaoxing:before{content:"\e637"}.icon-iconfontsousuo:before{content:"\e610"}.icon-xiangshang2:before{content:"\e76e"}.icon-xiangxia2:before{content:"\e772"}.icon-xiangyou1:before{content:"\e775"}.icon-xiangzuo:before{content:"\eb15"}.mv-home-page .banner-box{padding-left:234px}.mv-home-page .banner-box .swipers{background:#ccc;height:460px}.mv-home-page .banner-box .swipers img{height:460px;width:992px}.mv-home-page .banner-box .swipers .slick-dots{bottom:17px;justify-content:end;left:auto;right:10px}.mv-home-page .banner-box .swipers .slick-dots li{border:1px solid #fff;border-radius:6px;height:6px;width:6px}.mv-home-page .banner-box .swipers .slick-dots li.slick-active,.mv-home-page .banner-box .swipers .slick-dots li:hover{background:#fff}.mv-home-page .floor1{margin-top:20px}.mv-home-page .floor1 .cons{height:252px}.mv-home-page .floor1 .item{background:linear-gradient(155deg,#f6f6f6,#e9f6fc);border:1px solid #edefef;cursor:pointer;height:252px;padding:35px 20px;transition:all .5s;width:398px}.mv-home-page .floor1 .item:hover{box-shadow:4px 6px 7px 1px #9a97952e;transform:translateY(-1px)}.mv-home-page .floor1 .item:first-child{background:linear-gradient(155deg,#f6f6f6,#fcf5e9)}.mv-home-page .floor1 .item:last-child{background:linear-gradient(147deg,#f6f6f6,#fce9e9)}.mv-home-page .floor1 .item img{height:182px;width:182px}.mv-home-page .floor1 .item .rt{height:182px;padding:20px 0;width:158px}.mv-home-page .floor1 .item .rt .gos{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#000;display:-webkit-box;font-size:14px;height:50px;line-height:25px;margin-bottom:40px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.mv-home-page .floor1 .item .rt .nam{color:#000;font-size:16px;font-weight:400;height:18px;line-height:18px;overflow:hidden;text-overflow:ellipsis}.mv-home-page .floor1 .item .rt .prs{color:#ff0006;font-size:16px;line-height:18px;margin-top:12px}.mv-home-page .floor1 .floor1ad{display:block;height:118px;margin-top:20px}.mv-home-page .floor1 .floor1ad img{height:118px;width:1226px}.mv-home-page .floor2{margin-top:50px}.mv-home-page .floor2 .title{margin-bottom:30px}.mv-home-page .floor2 .title span{color:#000;font-size:24px;line-height:31px}.mv-home-page .floor2 .title .more{color:#888;font-size:16px}.mv-home-page .floor2 .title .more:hover{color:#ff9a00}.mv-home-page .floor2 .itembox{flex-wrap:wrap}.mv-home-page .floor2 .itembox .item{background:#fff;height:330px;padding:34px 18px;transition:all .5s;width:233px}.mv-home-page .floor2 .itembox .item:hover{box-shadow:4px 6px 7px 1px #9a97952e;transform:translateY(-1px)}.mv-home-page .floor2 .itembox .item img{display:block;height:109px;margin:0 auto 60px;width:150px}.mv-home-page .floor2 .itembox .item .gos{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#000;display:-webkit-box;font-size:14px;height:50px;line-height:25px;margin-bottom:30px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.mv-home-page .floor2 .itembox .item .nam{color:#000;font-size:16px;font-weight:400;height:18px;line-height:18px;max-width:110px;overflow:hidden;text-overflow:ellipsis}.mv-home-page .floor2 .itembox .item .prs{color:#ff0006;font-size:16px;line-height:18px}.mv-home-page .floor3{margin-bottom:65px;margin-top:50px}.mv-home-page .floor3 .title{margin-bottom:30px}.mv-home-page .floor3 .title span{color:#000;font-size:24px;line-height:31px}.mv-home-page .floor3 .title .more{color:#888;font-size:16px}.mv-home-page .floor3 .title .more:hover{color:#ff9a00}.mv-home-page .floor3 .itembox{flex-wrap:wrap}.mv-home-page .floor3 .itembox .item{height:80px;margin-bottom:15px;transition:all .5s;width:233px}.mv-home-page .floor3 .itembox .item:hover{box-shadow:4px 6px 7px 1px #9a97952e;transform:translateY(-1px)}.mv-home-page .floor3 .itembox .item img{height:80px;object-fit:contain;width:233px}.mv-search-page{margin-bottom:70px}.mv-search-page .shift-box{background:#fff;padding:24px 30px 6px}.mv-search-page .shift-box .shift-group{border-bottom:1px solid #e7e7e7;margin-bottom:18px}.mv-search-page .shift-box .shift-group span{color:#888;font-size:12px;font-weight:700;padding-top:2px}.mv-search-page .shift-box .shift-group:last-child{border-bottom:0;margin-bottom:0}.mv-search-page .shift-box .shift-group .item-box{flex-wrap:wrap;min-height:40px;width:1000px}.mv-search-page .shift-box .shift-group .item-box.overflowheight{height:40px;overflow:hidden}.mv-search-page .shift-box .shift-group .item-box .item{border:1px solid #0000;box-sizing:border-box;color:#000;cursor:pointer;font-size:12px;height:22px;line-height:20px;margin-bottom:18px;margin-left:45px;padding:0 15px;text-align:center}.mv-search-page .shift-box .shift-group .item-box .item.act{background:#fffbf5;border:1px solid #ff9a00}.mv-search-page .shift-box .shift-group .shitrankbox{justify-content:flex-end;width:130px}.mv-search-page .shift-box .shift-group .shitrank{border:1px solid #b0b0b0;box-sizing:border-box;color:#919191;cursor:pointer;font-size:12px;height:22px;margin-left:5px;width:58px}.mv-search-page .shift-box .shift-group .shitrank.shows{display:flex}.mv-search-page .shift-box .shift-group .shitrank.hides{display:none}.mv-search-page .shift-box .shift-group .shitrank:first-child{margin-left:0}.mv-search-page .shift-box .shift-group .shitrank i{color:#919191;font-size:12px}.mv-search-page .databox{min-height:290px;padding-top:24px}.mv-search-page .databox .data-group-supplier{border:1px solid #edefef;margin-bottom:30px}.mv-search-page .databox .data-group-supplier .search-list-datas .list-group-one-item:first-child .cons{border-top:0}.mv-search-page .databox .data-group-supplier .data-list-title{background:#f6f6f6;color:#000;font-size:16px;height:50px;line-height:50px;padding:0 33px}.mv-search-page .databox .data-group-supplier .data-list-more{background:#fff;color:#000;font-size:12px;height:48px;line-height:48px;text-align:center}.mv-search-page .databox .data-group-supplier .data-list-more b{color:#ff9a00;cursor:pointer}.breadcrumbs{color:#000;font-size:12px;height:47px;line-height:47px}.breadcrumbs a{color:#000;margin:0 10px}.breadcrumbs a:first-child{margin-left:0}.breadcrumbs a:hover{color:#ff9a00}.breadcrumbs i{color:#000;font-size:12px}.breadcrumbs strong{color:#919191;font-weight:400!important;margin:0 10px}.sort-ranksx{color:#000;font-size:14px;padding:20px 0}.sort-ranksx .left .item{border-left:1px solid #d1d1d1;cursor:pointer;height:18px;line-height:18px;padding:0 30px;position:relative}.sort-ranksx .left .item:first-child{border-left:0;padding-left:0}.sort-ranksx .left .item i.icon-bottom{border:6px solid #0000;border-top-color:#d8d8d8;height:0;position:absolute;right:14px;top:10px;width:0}.sort-ranksx .left .item i.icon-top{border:6px solid;border-color:#0000 #0000 #d8d8d8;height:0;position:absolute;right:14px;top:-4px;width:0}.sort-ranksx .left .item.act{color:#ff9a00}.sort-ranksx .left .item.act.top i.icon-top{border-color:#0000 #0000 #ff9a00}.sort-ranksx .left .item.act.bottom i.icon-bottom{border-color:#ff9a00 #0000 #0000}.sort-ranksx .right .checkbox{background:#fff;border:1px solid #ededed;border-radius:2px;cursor:pointer;height:18px;line-height:18px;margin-right:6px;position:relative;text-align:center;top:2px;width:18px}.sort-ranksx .right .checkbox i{color:#0000;font-size:21px;left:-1px;position:relative;top:1px}.sort-ranksx .right .checkbox.act{border-color:#ff9a00}.sort-ranksx .right .checkbox.act i{color:#ff9a00}.sort-ranksx .right span{cursor:pointer;margin-left:6px}.sort-ranksx .right span.act{color:#ff9a00;cursor:pointer}.list-group-one-item{background:#fff;padding:0 27px}.list-group-one-item .cons{border-top:1px solid #e7e7e7;padding:10px 0}.list-group-one-item .cons .item{box-sizing:border-box;flex-shrink:0;margin-right:20px}.list-group-one-item .cons .item:last-child{margin-right:0}.list-group-one-item .cons .item .goods-img{height:92px;width:92px}.list-group-one-item .cons .item .goods-name{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#000;display:-webkit-box;font-size:14px;font-weight:700;height:38px;line-height:19px;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.list-group-one-item .cons .item .goods-name:hover{color:#ff9a00;cursor:pointer}.list-group-one-item .cons .item .jtgroup,.list-group-one-item .cons .item p{color:#000;font-size:12px;line-height:23px}.list-group-one-item .cons .item .jtgroup span,.list-group-one-item .cons .item .jtgroup strong{width:33.33%}.list-group-one-item .cons .item .ljxunj{background:#ff9a00;color:#fff;cursor:pointer;font-size:14px;height:30px;line-height:30px;margin-right:30px;text-align:center;width:80px}.list-group-one-item .cons .item.pt48{padding-top:48px}.list-group-one-item .cons .item.w-198{width:198px}.list-group-one-item .cons .item.w-345{width:345px}.list-group-one-item .cons .item.w-322{width:322px}.lists-no-datax{background:#fff;height:auto;padding:40px;text-align:center}.lists-no-datax img{display:block;height:116px;margin:0 auto;width:116px}.lists-no-datax p{color:#313131;font-size:14px;font-weight:700;margin-top:32px}.mv-brand-page{margin-bottom:98px;padding-top:63px}.mv-brand-page .section{margin-bottom:70px}.mv-brand-page .section .title{color:#000;font-size:24px;line-height:31px;margin-bottom:45px;text-align:center}.mv-brand-page .section .title img{display:block;margin:2px auto 0}.mv-brand-page .section .itembox{flex-wrap:wrap}.mv-brand-page .section .itembox .item{height:80px;margin-bottom:15px;margin-right:15px;transition:all .5s;width:233px}.mv-brand-page .section .itembox .item:nth-child(5n){margin-right:0}.mv-brand-page .section .itembox .item:hover{box-shadow:4px 6px 7px 1px #9a97952e;transform:translateY(-1px)}.mv-brand-page .section .itembox .item img{height:80px;object-fit:contain;transform:scale(.8);width:233px}.mv-class-page{margin-bottom:30px;min-height:520px}.mv-class-page h1{color:#313131;font-size:20px;font-weight:700;line-height:26px;padding:30px 0}.mv-class-page .itembox{background:#fff;margin-bottom:5px;padding:32px 28px}.mv-class-page .itembox .itemtitle{color:#000;font-size:16px;font-weight:700;height:35px;line-height:35px}.mv-class-page .itembox .itemtitle:hover{color:#ff9a00}.mv-class-page .itembox .itemcons{flex-wrap:wrap}.mv-class-page .itembox .itemlink{color:#000;font-size:14px;margin-right:20px;margin-top:15px}.mv-class-page .itembox .itemlink:hover{color:#ff9a00}.mv-about-page .banner{background:url(/static/media/aboutUsBanner.6aff9a629cca34f2447b.png) no-repeat top;height:231px}.mv-about-page .section{background:#fff}.mv-about-page .section .cons{padding:111px 143px 119px}.mv-about-page .section .cons .left{width:267px}.mv-about-page .section .cons .left .title{border-bottom:1px solid #e7e7e7;color:#313131;font-size:20px;font-weight:700}.mv-about-page .section .cons .left .title span{border-bottom:3px solid #00c69f;display:inline-block;padding-bottom:22px;position:relative;top:2px}.mv-about-page .section .cons .left p{color:#000;font-size:14px;font-weight:400;line-height:30px;padding-top:22px}.mv-about-page .section .cons img{height:245px;position:relative;top:58px;width:296px}.mv-contact-page .banner{background:url(/static/media/contactUsBanner.3589d483b42e3df320a1.png) no-repeat top;height:231px}.mv-contact-page .section{background:#fff}.mv-contact-page .section .cons{padding:111px 143px 119px}.mv-contact-page .section .cons .left{width:267px}.mv-contact-page .section .cons .left .title{border-bottom:1px solid #e7e7e7;color:#313131;font-size:20px;font-weight:700}.mv-contact-page .section .cons .left .title span{border-bottom:3px solid #00c69f;display:inline-block;padding-bottom:22px;position:relative;top:2px}.mv-contact-page .section .cons .left .lxbox{margin-bottom:25px;padding-top:30px}.mv-contact-page .section .cons .left .lxbox span{border:1px solid #00c69f;height:44px;margin-right:33px;width:44px}.mv-contact-page .section .cons .left .lxbox span i{color:#00c69f;font-size:40px}.mv-contact-page .section .cons .left .lxbox .rxs{color:#888;font-size:16px}.mv-contact-page .section .cons .left .lxbox .rxs p{color:#000;font-weight:700;margin-top:7px}.mv-contact-page .section .cons img{height:245px;position:relative;top:58px;width:296px}.mv-notice-page{margin-bottom:54px}.mv-notice-page h1{color:#000;font-size:20px;font-weight:700;height:26px;line-height:26px;padding:35px 0}.mv-notice-page .itembox .item{background:#fff;margin-bottom:20px;min-height:224px;padding:34px 40px}.mv-notice-page .itembox .item .date{height:156px;padding-right:68px}.mv-notice-page .itembox .item .date span{color:#000;font-size:32px;line-height:42px}.mv-notice-page .itembox .item .date p{color:grey;font-size:14px;line-height:19px;margin-left:10px}.mv-notice-page .itembox .item .sxc{border-left:1px solid #e7e7e7;min-height:156px;padding-left:40px;width:990px}.mv-notice-page .itembox .item .sxc .titleo{color:#000;font-size:16px;height:21px;line-height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-notice-page .itembox .item .sxc .htmlbox{color:#888;font-size:14px;height:75px;line-height:30px;margin:20px 0;overflow:hidden;padding:7px 0}.mv-notice-page .itembox .item .sxc .htmlbox img{max-width:990px}.mv-notice-page .itembox .item .sxc .htmlbox.auto{color:#000;height:auto}.mv-notice-page .itembox .item .sxc .ckmore{color:#ff9a00;cursor:pointer;font-size:14px;line-height:19px}.mv-detail-page{margin-bottom:47px;min-height:500px}.mv-detail-page .detail-headers{background:#fff;min-height:304px;padding:40px 35px}.mv-detail-page .detail-headers .goodsimg{height:222px;margin-right:20px;width:222px}.mv-detail-page .detail-headers .info .box{height:192px;width:420px}.mv-detail-page .detail-headers .info .box h1{color:#313131;font-size:18px;font-weight:700;line-height:24px;margin-bottom:12px}.mv-detail-page .detail-headers .info .box p{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#000;display:-webkit-box;font-size:12px;line-height:25px;max-height:50px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.mv-detail-page .detail-headers .info .handle .btn{background:#ff9a00;color:#fff;height:30px;line-height:30px;text-align:center;width:80px}.mv-detail-page .detail-headers .r{background:#fffcf8;min-height:222px;padding:10px 50px;width:452px}.mv-detail-page .detail-headers .r .mb23{margin-bottom:24px}.mv-detail-page .detail-headers .r .items{color:#000;font-size:12px;line-height:25px;width:50%}.mv-detail-page .detail-headers .r .items span{width:50%}.mv-detail-page .detail-section{margin-top:20px}.mv-detail-page .detail-section .secl{background:#fff;min-height:330px;padding:30px;width:978px}.mv-detail-page .detail-section .secl .lilist-box{border-left:1px solid #e5e5e5;border-top:1px solid #e5e5e5;color:#313131;flex-shrink:0;flex-wrap:wrap;font-size:14px}.mv-detail-page .detail-section .secl .lilist-box p{border-bottom:1px solid #e5e5e5;border-right:1px solid #e5e5e5;box-sizing:border-box;height:36px;line-height:36px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:50%}.mv-detail-page .detail-section .secl .lilist-box p b{background:#f5f5f5;border-right:1px solid #e5e5e5;display:block;float:left;margin-right:1px;overflow:hidden;padding-left:20px;text-overflow:ellipsis;white-space:nowrap;width:130px}.mv-detail-page .detail-section .secl .lilist-box p span{padding-left:10px}.mv-detail-page .detail-section .secl .lilist-box p .ple0 span{padding-left:0!important}.mv-detail-page .detail-section .secl .goods-mask{color:#313131;font-size:14px;height:60px;line-height:30px}.mv-detail-page .detail-section .secl .goods-mask div{background:#f5f5f5;border-bottom:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;float:left;height:90px;padding-left:20px;width:130px}.mv-detail-page .detail-section .secl .goods-mask h4{-webkit-box-orient:vertical;-webkit-line-clamp:3;background:#fff;border-bottom:1px solid #e5e5e5;border-right:1px solid #e5e5e5;display:-webkit-box;height:90px;overflow:hidden;padding-left:10px;padding-right:10px;text-overflow:ellipsis;width:745px;word-break:break-all}.mv-detail-page .detail-section .secr .item{background:#fff;display:block;height:330px;margin-bottom:20px;padding:34px 18px;transition:all .5s;width:233px}.mv-detail-page .detail-section .secr .item:last-child{margin-bottom:0}.mv-detail-page .detail-section .secr .item:hover{box-shadow:4px 6px 7px 1px #9a97952e;transform:translateY(-1px)}.mv-detail-page .detail-section .secr .item img{display:block;height:109px;margin:0 auto 60px;width:150px}.mv-detail-page .detail-section .secr .item .gos{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#000;display:-webkit-box;font-size:14px;height:50px;line-height:25px;margin-bottom:30px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.mv-detail-page .detail-section .secr .item .nam{color:#000;font-size:16px;font-weight:400;height:18px;line-height:18px;max-width:110px;overflow:hidden;text-overflow:ellipsis}.mv-detail-page .detail-section .secr .item .prs{color:#ff0006;font-size:16px;line-height:18px}.mv-detail-page .datanos{background:#fff;padding:80px 0}.mv-detail-page .datanos img{display:block;height:296px;margin:0 auto;width:360px}.mv-category-page{padding-bottom:54px}.mv-category-page .categoryHead{background:#fff;min-height:245px;padding:30px 50px}.mv-category-page .categoryHead h2{color:#000;font-size:22px;font-weight:700;line-height:29px;margin-bottom:20px;text-align:center}.mv-category-page .categoryHead .textBf{-webkit-box-orient:vertical;-webkit-line-clamp:4;color:#000;display:-webkit-box;font-size:14px;height:100px;line-height:25px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.mv-category-page .categoryHead .brandbox span{color:#000;flex-shrink:0;font-size:14px;font-weight:700;line-height:20px;width:80px}.mv-category-page .categoryHead .brandbox .itembox{flex-wrap:wrap}.mv-category-page .categoryHead .brandbox .itembox .item{color:#000;font-size:14px;height:20px;line-height:20px;margin-bottom:15px;margin-right:40px}.mv-category-page .databox .data-group-supplier{background:#fff;min-height:400px;padding-bottom:20px}.mv-category-page .databox .data-group-supplier .sortbixjk{padding:25px 27px 0}.mv-brandlist-page{margin-bottom:56px}.mv-brandlist-page .brandheadsl{background:#fff;min-height:275px;padding:26px 60px}.mv-brandlist-page .brandheadsl .brandimg{background:#fff;border:1px solid #edefef;height:222px;margin-right:60px;width:222px}.mv-brandlist-page .brandheadsl .brand-info{width:822px}.mv-brandlist-page .brandheadsl .brand-info h2{color:#000;font-size:22px;font-weight:700;line-height:29px;margin-bottom:20px;text-align:center}.mv-brandlist-page .brandheadsl .brand-info .textBf{-webkit-box-orient:vertical;-webkit-line-clamp:4;color:#000;display:-webkit-box;font-size:14px;height:100px;line-height:25px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.mv-brandlist-page .brandheadsl .brand-info .brandbox span{color:#888;flex-shrink:0;font-size:12px;line-height:20px;width:80px}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox{flex-wrap:wrap}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox .item{color:#000;font-size:12px;height:20px;line-height:20px;margin-bottom:15px;margin-right:40px}.mv-brandlist-page .databox{padding-top:24px}.mv-brandlist-page .databox .data-group-supplier{background:#fff;min-height:400px;padding-bottom:20px}.mv-brandlist-page .databox .data-group-supplier .sortbixjk{padding:25px 27px 0}.page-404{background:#fff;padding:80px 0}.page-404 img{display:block;height:296px;margin:0 auto;width:360px}.mv-top-box{background:#f4f4f4;height:40px}.mv-top-box .con{height:40px;margin:0 auto;width:1226px}.mv-top-box .con .line{background:#d1d1d1;height:18px;margin:0 15px;width:1px}.mv-top-box .con a{color:#666;font-size:12px}.mv-top-box .con a:hover{color:#ff9a00}.mv-top-box .con .rqq{margin-left:25px}.mv-search-box{background:#fff;height:146px}.mv-search-box .cons{margin:0 auto;padding-top:22px;width:1226px}.mv-search-box .cons img{height:97px;width:117px}.mv-search-box .cons .search-input-box{background:#fff;border:1px solid #ff9a00;border-radius:2px;height:40px;margin-top:13px;width:794px}.mv-search-box .cons .search-input-box .input-goods{border-right:1px solid #ff9a00;height:38px;line-height:38px;padding:0 15px;width:588px}.mv-search-box .cons .search-input-box .input-nums{border-right:1px solid #ff9a00;height:38px;line-height:38px;padding:0 15px;width:133px}.mv-search-box .cons .search-input-box .searchbtn{color:#ff9a00;cursor:pointer;height:38px;width:71px}.mv-search-box .cons .search-input-box .searchbtn i{font-size:26px}.mv-nav-big{background:#fff;border-bottom:1px solid #ff9a00;height:38px}.mv-nav-big .navbox{margin:0 auto;width:1226px}.mv-nav-big .navbox .class-boxs{height:38px;position:relative}.mv-nav-big .navbox .class-boxs .title-lc{background:#ff9a00;box-sizing:border-box;color:#fff;cursor:pointer;display:block;font-size:18px;font-weight:700;height:38px;line-height:38px;padding-left:14px;width:234px}.mv-nav-big .navbox .class-boxs .box-one-left{background:#fffffffa;border-left:1px solid #fff0;box-sizing:border-box;display:none;height:460px;left:0;position:absolute;top:39px;width:234px;z-index:3}.mv-nav-big .navbox .class-boxs .box-one-left.index-pages{display:block}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons{box-sizing:border-box;padding:20px 0;position:relative;width:234px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group{color:#313131;font-size:14px;padding-left:17px;padding-right:17px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link{cursor:pointer;display:block;padding-bottom:5px;width:100%}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann{color:#000;display:block;font-size:16px;height:35px;line-height:35px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span{display:inline-block;overflow:hidden;transition:all .5s;vertical-align:middle;width:0}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span i{color:#ff9a00;font-size:11px;position:relative;top:-2px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann{color:#ff9a00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann span{width:25px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right{background:#fff;border-left:0;box-sizing:border-box;display:block;display:none;height:460px;left:234px;padding-top:25px;position:absolute;top:0;width:775px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk{box-sizing:border-box;height:410px;overflow-y:auto;padding:0 24px;width:775px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar{width:8px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-thumb{background:#fff;border-radius:6px;-webkit-box-shadow:inset 0 0 8px #0003}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-track{background:#f4f4f4;border-radius:0}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group{margin-bottom:10px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link{box-sizing:border-box;color:#000;flex-shrink:0;font-size:14px;font-weight:700;height:35px;line-height:35px;overflow:hidden;padding-right:10px;text-overflow:ellipsis;white-space:nowrap;width:130px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link:hover{color:#ff9a00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group{flex-wrap:wrap;margin-bottom:5px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link{box-sizing:border-box;color:#888;flex-shrink:0;font-size:12px;height:30px;line-height:30px;margin-bottom:5px;overflow:hidden;padding-right:20px;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link:hover{color:#ff9a00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .box-two-right,.mv-nav-big .navbox .class-boxs:hover .box-one-left{display:block}.mv-nav-big .navbox .haed-nav-box{height:38px;line-height:38px}.mv-nav-big .navbox .haed-nav-box ul{box-sizing:border-box;padding-left:34px}.mv-nav-big .navbox .haed-nav-box li{margin-right:75px}.mv-nav-big .navbox .haed-nav-box li a{color:#000;font-size:18px}.mv-nav-big .navbox .haed-nav-box li.act a,.mv-nav-big .navbox .haed-nav-box li:hover a{color:#ff9a00}.mv-footer-box{background:#f4f4f4;height:160px}.mv-footer-box .cons{height:120px;margin:0 auto;padding-top:25px;width:1226px}.mv-footer-box .cons img{border-radius:70px;height:70px;width:70px}.mv-footer-box .cons .navlink{margin-top:24px}.mv-footer-box .cons .navlink a{border-left:1px solid #d1d1d1;color:#000;font-size:14px;height:19px;padding:0 40px}.mv-footer-box .cons .navlink a:hover{color:#ff9a00}.mv-footer-box .cons .navlink a:first-child{border-left:0}.mv-footer-box .cons .navlink a:last-child{padding-right:0}.mv-footer-box .footer-bot{background:#ff9a00;height:40px}.mv-footer-box .footer-bot .consp{color:#ff9a00;color:#fff;font-size:14px;height:40px;line-height:40px;margin:0 auto;width:1226px}.mv-footer-box .footer-bot .consp a{color:#fff;margin-left:30px}
/*# sourceMappingURL=main.1539bebd.css.map*/
\ No newline at end of file
{"version":3,"file":"static/css/main.1539bebd.css","mappings":"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","sources":["styles/base.min.css","styles/font/iconfont.css","pages/Home/index.min.css","pages/Search/index.min.css","components/BreadNav/index.min.css","components/ListSort/index.min.css","components/ListOneItem/index.min.css","components/ListNoData/index.min.css","pages/BrandMap/index.min.css","pages/ClassMap/index.min.css","pages/About/index.min.css","pages/Contact/index.min.css","pages/Notice/index.min.css","pages/GoodsDetail/index.min.css","pages/Category/index.min.css","pages/Brand/index.min.css","pages/Page404/index.min.css","components/Header/components/TopH/index.min.css","components/Header/components/SearchH/index.min.css","components/Header/components/NavBig/index.min.css","components/Footer/index.min.css"],"sourcesContent":["@charset \"utf-8\";html,body,div,iframe,em,img,p,a,strong,b,i,form,label,span,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,applet,object,blockquote,big,cite,code,del,dfn,abbr,acronym,address,pre,time,mark,audio,video,article,aside,canvas,details,embed,figure,figcaption,footer,header,nav,section,menu,button,input,textarea{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-weight:normal;list-style:none;outline:none;resize:none}table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;font-size:100%;font:inherit}a{text-decoration:none}a:hover{color:#FF9A00}table{border-color:#ccc !important}body,html,button,input{font-family:Arial,helvetica,PingFangSC-Regular,PingFang SC,\"微软雅黑\"}input::-webkit-input-placeholder{color:#808080}.fw{font-weight:bold}.clr:after{visibility:hidden;display:block;font-size:0;content:\" \";clear:both;height:0}.clr{display:block;min-height:1%}.clr{clear:both}.clr:after{content:\" \";display:table;clear:both}.fl{float:left}.fr{float:right}.fw{font-weight:bold}.ta-c{text-align:center}.ta-r{text-align:right}.ta-l{text-align:left}.flex{display:flex}.column{display:flex;flex-direction:column}.row{display:flex;flex-direction:row}.boxsiz{-webkit-box-sizing:border-box;box-sizing:border-box}.bothSide{justify-content:space-between}.avarage{justify-content:space-around}.rowCenter{justify-content:center}.verCenter{align-items:center}body,html{background:#fafafa;font-size:14px;color:#333}.w1226{width:1226px;margin:0 auto}.ant-pagination{display:flex;justify-content:end}.ant-pagination .ant-pagination-item{padding:0 7px}.ant-pagination .ant-pagination-options{height:25px;min-width:25px;min-height:25px;box-sizing:border-box}.ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper{height:25px;min-width:25px;min-height:25px;box-sizing:border-box;line-height:25px}.ant-pagination .ant-pagination-options input{height:25px;min-width:25px;min-height:25px;border-radius:1px;box-sizing:border-box}.ant-pagination .ant-pagination-item,.ant-pagination .ant-pagination-prev,.ant-pagination .ant-pagination-next,.ant-pagination .ant-pagination-jump-next,.ant-pagination .ant-pagination-jump-prev{display:block;box-sizing:border-box;height:25px;min-width:25px;min-height:25px;background:#FBFBFB;border-radius:2px;border:1px solid #E8E8E8;text-align:center;line-height:25px;color:#616161;position:relative;transition:all .5s;border-radius:1px;font-size:12px}.ant-pagination .ant-pagination-item a,.ant-pagination .ant-pagination-prev a,.ant-pagination .ant-pagination-next a,.ant-pagination .ant-pagination-jump-next a,.ant-pagination .ant-pagination-jump-prev a,.ant-pagination .ant-pagination-item button,.ant-pagination .ant-pagination-prev button,.ant-pagination .ant-pagination-next button,.ant-pagination .ant-pagination-jump-next button,.ant-pagination .ant-pagination-jump-prev button,.ant-pagination .ant-pagination-item span,.ant-pagination .ant-pagination-prev span,.ant-pagination .ant-pagination-next span,.ant-pagination .ant-pagination-jump-next span,.ant-pagination .ant-pagination-jump-prev span{padding:0px!important;border-radius:0px!important}.ant-pagination .ant-pagination-item button,.ant-pagination .ant-pagination-prev button,.ant-pagination .ant-pagination-next button,.ant-pagination .ant-pagination-jump-next button,.ant-pagination .ant-pagination-jump-prev button{line-height:23px}.ant-pagination .ant-pagination-item.ant-pagination-item-active,.ant-pagination .ant-pagination-prev.ant-pagination-item-active,.ant-pagination .ant-pagination-next.ant-pagination-item-active,.ant-pagination .ant-pagination-jump-next.ant-pagination-item-active,.ant-pagination .ant-pagination-jump-prev.ant-pagination-item-active,.ant-pagination .ant-pagination-item:hover,.ant-pagination .ant-pagination-prev:hover,.ant-pagination .ant-pagination-next:hover,.ant-pagination .ant-pagination-jump-next:hover,.ant-pagination .ant-pagination-jump-prev:hover{background-color:none;background:linear-gradient(180deg, #FDFDFD 0%, #E2E2E2 100%) !important;border:1px solid #A1A1A1 !important;color:#313131}.ant-pagination .ant-pagination-item.ant-pagination-item-active a,.ant-pagination .ant-pagination-prev.ant-pagination-item-active a,.ant-pagination .ant-pagination-next.ant-pagination-item-active a,.ant-pagination .ant-pagination-jump-next.ant-pagination-item-active a,.ant-pagination .ant-pagination-jump-prev.ant-pagination-item-active a,.ant-pagination .ant-pagination-item:hover a,.ant-pagination .ant-pagination-prev:hover a,.ant-pagination .ant-pagination-next:hover a,.ant-pagination .ant-pagination-jump-next:hover a,.ant-pagination .ant-pagination-jump-prev:hover a{color:#313131;background:none}","@font-face {\n font-family: \"iconfont\"; /* Project id 4599756 */\n src: url('iconfont.woff2?t=1719816191916') format('woff2'),\n url('iconfont.woff?t=1719816191916') format('woff'),\n url('iconfont.ttf?t=1719816191916') format('truetype');\n}\n\n.iconfont {\n font-family: \"iconfont\" !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.icon-B-fuxuankuang:before {\n content: \"\\e728\";\n}\n\n.icon-email:before {\n content: \"\\e693\";\n}\n\n.icon-phone:before {\n content: \"\\e694\";\n}\n\n.icon-sanjiaoxing:before {\n content: \"\\e637\";\n}\n\n.icon-iconfontsousuo:before {\n content: \"\\e610\";\n}\n\n.icon-xiangshang2:before {\n content: \"\\e76e\";\n}\n\n.icon-xiangxia2:before {\n content: \"\\e772\";\n}\n\n.icon-xiangyou1:before {\n content: \"\\e775\";\n}\n\n.icon-xiangzuo:before {\n content: \"\\eb15\";\n}\n\n",".mv-home-page .banner-box{padding-left:234px}.mv-home-page .banner-box .swipers{height:460px;background:#ccc}.mv-home-page .banner-box .swipers img{height:460px;width:992px}.mv-home-page .banner-box .swipers .slick-dots{justify-content:end;bottom:17px;right:10px;left:auto}.mv-home-page .banner-box .swipers .slick-dots li{width:6px;height:6px;border:1px solid #FFFFFF;border-radius:6px}.mv-home-page .banner-box .swipers .slick-dots li.slick-active,.mv-home-page .banner-box .swipers .slick-dots li:hover{background:#FFFFFF}.mv-home-page .floor1{margin-top:20px}.mv-home-page .floor1 .cons{height:252px}.mv-home-page .floor1 .item{width:398px;height:252px;background:linear-gradient(155deg, #F6F6F6 0%, #E9F6FC 100%);border:1px solid #EDEFEF;cursor:pointer;transition:all .5s;padding:35px 20px}.mv-home-page .floor1 .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor1 .item:first-child{background:linear-gradient(155deg, #F6F6F6 0%, #FCF5E9 100%)}.mv-home-page .floor1 .item:last-child{background:linear-gradient(147deg, #F6F6F6 0%, #FCE9E9 100%)}.mv-home-page .floor1 .item img{width:182px;height:182px}.mv-home-page .floor1 .item .rt{width:158px;height:182px;padding:20px 0}.mv-home-page .floor1 .item .rt .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:40px}.mv-home-page .floor1 .item .rt .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px}.mv-home-page .floor1 .item .rt .prs{font-size:16px;color:#FF0006;line-height:18px;margin-top:12px}.mv-home-page .floor1 .floor1ad{display:block;height:118px;margin-top:20px}.mv-home-page .floor1 .floor1ad img{width:1226px;height:118px}.mv-home-page .floor2{margin-top:50px}.mv-home-page .floor2 .title{margin-bottom:30px}.mv-home-page .floor2 .title span{font-size:24px;color:#000000;line-height:31px}.mv-home-page .floor2 .title .more{font-size:16px;color:#888888}.mv-home-page .floor2 .title .more:hover{color:#FF9A00}.mv-home-page .floor2 .itembox{flex-wrap:wrap}.mv-home-page .floor2 .itembox .item{padding:34px 18px;width:233px;height:330px;background:#FFFFFF;transition:all .5s}.mv-home-page .floor2 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor2 .itembox .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-home-page .floor2 .itembox .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-home-page .floor2 .itembox .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-home-page .floor2 .itembox .item .prs{font-size:16px;color:#FF0006;line-height:18px}.mv-home-page .floor3{margin-top:50px;margin-bottom:65px}.mv-home-page .floor3 .title{margin-bottom:30px}.mv-home-page .floor3 .title span{font-size:24px;color:#000000;line-height:31px}.mv-home-page .floor3 .title .more{font-size:16px;color:#888888}.mv-home-page .floor3 .title .more:hover{color:#FF9A00}.mv-home-page .floor3 .itembox{flex-wrap:wrap}.mv-home-page .floor3 .itembox .item{width:233px;height:80px;transition:all .5s;margin-bottom:15px}.mv-home-page .floor3 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor3 .itembox .item img{width:233px;height:80px;object-fit:contain}",".mv-search-page{margin-bottom:70px}.mv-search-page .shift-box{padding:24px 30px;background:#fff;padding-bottom:6px}.mv-search-page .shift-box .shift-group{border-bottom:1px solid #E7E7E7;margin-bottom:18px}.mv-search-page .shift-box .shift-group span{font-weight:bold;font-size:12px;color:#888888;padding-top:2px}.mv-search-page .shift-box .shift-group:last-child{border-bottom:0px;margin-bottom:0px}.mv-search-page .shift-box .shift-group .item-box{width:1000px;flex-wrap:wrap;min-height:40px}.mv-search-page .shift-box .shift-group .item-box.overflowheight{height:40px;overflow:hidden}.mv-search-page .shift-box .shift-group .item-box .item{height:22px;border:1px solid rgba(0,0,0,0);line-height:20px;box-sizing:border-box;margin-left:45px;margin-bottom:18px;font-size:12px;color:#000;cursor:pointer;text-align:center;padding:0 15px}.mv-search-page .shift-box .shift-group .item-box .item.act{background:#FFFBF5;border:1px solid #FF9A00}.mv-search-page .shift-box .shift-group .shitrankbox{width:130px;justify-content:flex-end}.mv-search-page .shift-box .shift-group .shitrank{margin-left:5px;height:22px;width:58px;border:1px solid #B0B0B0;box-sizing:border-box;color:#919191;font-size:12px;cursor:pointer}.mv-search-page .shift-box .shift-group .shitrank.shows{display:flex}.mv-search-page .shift-box .shift-group .shitrank.hides{display:none}.mv-search-page .shift-box .shift-group .shitrank:first-child{margin-left:0px}.mv-search-page .shift-box .shift-group .shitrank i{color:#919191;font-size:12px}.mv-search-page .databox{padding-top:24px;min-height:290px}.mv-search-page .databox .data-group-supplier{border:1px solid #EDEFEF;margin-bottom:30px}.mv-search-page .databox .data-group-supplier .search-list-datas .list-group-one-item:first-child .cons{border-top:0px}.mv-search-page .databox .data-group-supplier .data-list-title{padding:0 33px;height:50px;line-height:50px;font-size:16px;color:#000000;background:#f6f6f6}.mv-search-page .databox .data-group-supplier .data-list-more{height:48px;line-height:48px;color:#000;font-size:12px;text-align:center;background:#fff}.mv-search-page .databox .data-group-supplier .data-list-more b{color:#FF9A00;cursor:pointer}",".breadcrumbs{height:47px;line-height:47px;font-size:12px;color:#000000}.breadcrumbs a{margin:0 10px;color:#000000}.breadcrumbs a:first-child{margin-left:0}.breadcrumbs a:hover{color:#FF9A00}.breadcrumbs i{color:#000000;font-size:12px}.breadcrumbs strong{margin:0 10px;color:#919191;font-weight:normal !important}",".sort-ranksx{font-size:14px;color:#000000;padding:20px 0px}.sort-ranksx .left .item{height:18px;line-height:18px;padding:0 30px;border-left:1px solid #d1d1d1;cursor:pointer;position:relative}.sort-ranksx .left .item:first-child{padding-left:0px;border-left:0px}.sort-ranksx .left .item i.icon-bottom{width:0px;height:0px;border-style:solid;border-width:6px;border-color:#D8D8D8 transparent transparent transparent;position:absolute;top:10px;right:14px}.sort-ranksx .left .item i.icon-top{width:0px;height:0px;border-style:solid;border-width:6px;border-color:transparent transparent #D8D8D8 transparent;position:absolute;top:-4px;right:14px}.sort-ranksx .left .item.act{color:#FF9A00}.sort-ranksx .left .item.act.top i.icon-top{border-color:transparent transparent #FF9A00 transparent}.sort-ranksx .left .item.act.bottom i.icon-bottom{border-color:#FF9A00 transparent transparent transparent}.sort-ranksx .right .checkbox{height:18px;width:18px;border-radius:2px;background:#FFF;border:1px solid #ededed;position:relative;top:2px;margin-right:6px;text-align:center;line-height:18px;cursor:pointer}.sort-ranksx .right .checkbox i{font-size:21px;position:relative;top:1px;left:-1px;color:rgba(0,0,0,0)}.sort-ranksx .right .checkbox.act{border-color:#FF9A00}.sort-ranksx .right .checkbox.act i{color:#FF9A00}.sort-ranksx .right span{margin-left:6px;cursor:pointer}.sort-ranksx .right span.act{color:#FF9A00;cursor:pointer}",".list-group-one-item{padding:0px 27px;background:#fff}.list-group-one-item .cons{border-top:1px solid #e7e7e7;padding:10px 0px}.list-group-one-item .cons .item{margin-right:20px;box-sizing:border-box;flex-shrink:0}.list-group-one-item .cons .item:last-child{margin-right:0px}.list-group-one-item .cons .item .goods-img{width:92px;height:92px}.list-group-one-item .cons .item .goods-name{font-weight:bold;font-size:14px;color:#000000;line-height:19px;height:38px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-bottom:10px}.list-group-one-item .cons .item .goods-name:hover{color:#FF9A00;cursor:pointer}.list-group-one-item .cons .item p{font-size:12px;color:#000000;line-height:23px}.list-group-one-item .cons .item .jtgroup{font-size:12px;color:#000000;line-height:23px}.list-group-one-item .cons .item .jtgroup span,.list-group-one-item .cons .item .jtgroup strong{width:33.33%}.list-group-one-item .cons .item .ljxunj{cursor:pointer;width:80px;height:30px;background:#FF9A00;color:#fff;font-size:14px;margin-right:30px;text-align:center;line-height:30px}.list-group-one-item .cons .item.pt48{padding-top:48px}.list-group-one-item .cons .item.w-198{width:198px}.list-group-one-item .cons .item.w-345{width:345px}.list-group-one-item .cons .item.w-322{width:322px}",".lists-no-datax{background:#fff;text-align:center;padding:40px;height:auto}.lists-no-datax img{width:116px;height:116px;display:block;margin:0 auto}.lists-no-datax p{font-size:14px;font-weight:bold;color:#313131;margin-top:32px}",".mv-brand-page{padding-top:63px;margin-bottom:98px}.mv-brand-page .section{margin-bottom:70px}.mv-brand-page .section .title{text-align:center;font-size:24px;color:#000000;line-height:31px;margin-bottom:45px}.mv-brand-page .section .title img{display:block;margin:0 auto;margin-top:2px}.mv-brand-page .section .itembox{flex-wrap:wrap}.mv-brand-page .section .itembox .item{width:233px;height:80px;margin-bottom:15px;transition:all .5s;margin-right:15px}.mv-brand-page .section .itembox .item:nth-child(5n){margin-right:0px}.mv-brand-page .section .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-brand-page .section .itembox .item img{width:233px;height:80px;object-fit:contain;transform:scale(.8)}",".mv-class-page{margin-bottom:30px;min-height:520px}.mv-class-page h1{font-weight:bold;font-size:20px;color:#313131;line-height:26px;padding:30px 0px}.mv-class-page .itembox{margin-bottom:5px;background:#fff;padding:32px 28px}.mv-class-page .itembox .itemtitle{font-weight:bold;font-size:16px;color:#000000;line-height:35px;height:35px}.mv-class-page .itembox .itemtitle:hover{color:#FF9A00}.mv-class-page .itembox .itemcons{flex-wrap:wrap}.mv-class-page .itembox .itemlink{font-size:14px;color:#000000;margin-right:20px;margin-top:15px}.mv-class-page .itembox .itemlink:hover{color:#FF9A00}",".mv-about-page .banner{height:231px;background:url(../../images/aboutUsBanner.png) no-repeat top center}.mv-about-page .section{background:#fff}.mv-about-page .section .cons{padding:0 143px;padding-top:111px;padding-bottom:119px}.mv-about-page .section .cons .left{width:267px}.mv-about-page .section .cons .left .title{border-bottom:1px solid #E7E7E7;font-weight:bold;font-size:20px;color:#313131}.mv-about-page .section .cons .left .title span{display:inline-block;position:relative;border-bottom:3px solid #00C69F;padding-bottom:22px;top:2px}.mv-about-page .section .cons .left p{padding-top:22px;font-weight:400;font-size:14px;color:#000000;line-height:30px}.mv-about-page .section .cons img{width:296px;height:245px;position:relative;top:58px}",".mv-contact-page .banner{height:231px;background:url(../../images/contactUsBanner.png) no-repeat top center}.mv-contact-page .section{background:#fff}.mv-contact-page .section .cons{padding:0 143px;padding-top:111px;padding-bottom:119px}.mv-contact-page .section .cons .left{width:267px}.mv-contact-page .section .cons .left .title{border-bottom:1px solid #E7E7E7;font-weight:bold;font-size:20px;color:#313131}.mv-contact-page .section .cons .left .title span{display:inline-block;position:relative;border-bottom:3px solid #00C69F;padding-bottom:22px;top:2px}.mv-contact-page .section .cons .left .lxbox{padding-top:30px;margin-bottom:25px}.mv-contact-page .section .cons .left .lxbox span{width:44px;height:44px;border:1px solid #00C69F;margin-right:33px}.mv-contact-page .section .cons .left .lxbox span i{color:#00C69F;font-size:40px}.mv-contact-page .section .cons .left .lxbox .rxs{font-size:16px;color:#888888}.mv-contact-page .section .cons .left .lxbox .rxs p{color:#000000;font-weight:bold;margin-top:7px}.mv-contact-page .section .cons img{width:296px;height:245px;position:relative;top:58px}",".mv-notice-page{margin-bottom:54px}.mv-notice-page h1{font-weight:bold;font-size:20px;color:#000000;line-height:26px;height:26px;padding:35px 0}.mv-notice-page .itembox .item{margin-bottom:20px;background:#fff;min-height:224px;padding:34px 40px}.mv-notice-page .itembox .item .date{height:156px;padding-right:68px}.mv-notice-page .itembox .item .date span{font-size:32px;color:#000000;line-height:42px}.mv-notice-page .itembox .item .date p{font-size:14px;color:#808080;line-height:19px;margin-left:10px}.mv-notice-page .itembox .item .sxc{padding-left:40px;min-height:156px;border-left:1px solid #E7E7E7;width:990px}.mv-notice-page .itembox .item .sxc .titleo{font-size:16px;color:#000000;line-height:21px;height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-notice-page .itembox .item .sxc .htmlbox{margin:20px 0px;height:75px;padding:7px 0;overflow:hidden;font-size:14px;color:#888888;line-height:30px}.mv-notice-page .itembox .item .sxc .htmlbox img{max-width:990px}.mv-notice-page .itembox .item .sxc .htmlbox.auto{height:auto;color:#000000}.mv-notice-page .itembox .item .sxc .ckmore{font-size:14px;color:#FF9A00;line-height:19px;cursor:pointer}",".mv-detail-page{margin-bottom:47px;min-height:500px}.mv-detail-page .detail-headers{min-height:304px;padding:40px 35px;background:#fff}.mv-detail-page .detail-headers .goodsimg{width:222px;height:222px;margin-right:20px}.mv-detail-page .detail-headers .info .box{height:192px;width:420px}.mv-detail-page .detail-headers .info .box h1{font-weight:bold;font-size:18px;color:#313131;line-height:24px;margin-bottom:12px}.mv-detail-page .detail-headers .info .box p{font-size:12px;color:#000000;line-height:25px;max-height:50px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mv-detail-page .detail-headers .info .handle .btn{width:80px;height:30px;background:#FF9A00;line-height:30px;text-align:center;color:#fff}.mv-detail-page .detail-headers .r{width:452px;min-height:222px;background:#FFFCF8;padding:10px 50px}.mv-detail-page .detail-headers .r .mb23{margin-bottom:24px}.mv-detail-page .detail-headers .r .items{width:50%;font-size:12px;color:#000000;line-height:25px}.mv-detail-page .detail-headers .r .items span{width:50%}.mv-detail-page .detail-section{margin-top:20px}.mv-detail-page .detail-section .secl{width:978px;min-height:330px;background:#FFFFFF;padding:30px}.mv-detail-page .detail-section .secl .lilist-box{border-top:1px solid #e5e5e5;font-size:14px;color:#313131;flex-shrink:0;flex-wrap:wrap;border-left:1px solid #e5e5e5}.mv-detail-page .detail-section .secl .lilist-box p{line-height:36px;width:50%;box-sizing:border-box;height:36px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p b{width:130px;float:left;display:block;border-right:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;margin-right:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p span{padding-left:10px}.mv-detail-page .detail-section .secl .lilist-box p .ple0 span{padding-left:0px !important}.mv-detail-page .detail-section .secl .goods-mask{height:60px;line-height:30px;color:#313131;font-size:14px}.mv-detail-page .detail-section .secl .goods-mask div{width:130px;float:left;border-right:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;height:90px}.mv-detail-page .detail-section .secl .goods-mask h4{background:#fff;width:745px;height:90px;padding-left:10px;padding-right:10px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.mv-detail-page .detail-section .secr .item{padding:34px 18px;width:233px;height:330px;transition:all .5s;background:#fff;display:block;margin-bottom:20px}.mv-detail-page .detail-section .secr .item:last-child{margin-bottom:0px}.mv-detail-page .detail-section .secr .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-detail-page .detail-section .secr .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-detail-page .detail-section .secr .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-detail-page .detail-section .secr .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-detail-page .detail-section .secr .item .prs{font-size:16px;color:#FF0006;line-height:18px}.mv-detail-page .datanos{background:#fff;padding:80px 0}.mv-detail-page .datanos img{height:296px;width:360px;display:block;margin:0 auto}",".mv-category-page{padding-bottom:54px}.mv-category-page .categoryHead{min-height:245px;background:#fff;padding:30px 50px}.mv-category-page .categoryHead h2{font-weight:bold;font-size:22px;color:#000000;line-height:29px;text-align:center;margin-bottom:20px}.mv-category-page .categoryHead .textBf{font-size:14px;color:#000000;line-height:25px;height:100px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.mv-category-page .categoryHead .brandbox span{font-weight:bold;font-size:14px;color:#000000;line-height:20px;width:80px;flex-shrink:0}.mv-category-page .categoryHead .brandbox .itembox{flex-wrap:wrap}.mv-category-page .categoryHead .brandbox .itembox .item{height:20px;line-height:20px;font-size:14px;color:#000000;margin-right:40px;margin-bottom:15px}.mv-category-page .databox .data-group-supplier{padding-bottom:20px;background:#fff;min-height:400px}.mv-category-page .databox .data-group-supplier .sortbixjk{padding:0 27px;padding-top:25px}",".mv-brandlist-page{margin-bottom:56px}.mv-brandlist-page .brandheadsl{min-height:275px;background:#fff;padding:26px 60px}.mv-brandlist-page .brandheadsl .brandimg{width:222px;height:222px;background:#FFFFFF;border:1px solid #EDEFEF;margin-right:60px}.mv-brandlist-page .brandheadsl .brand-info{width:822px}.mv-brandlist-page .brandheadsl .brand-info h2{font-weight:bold;font-size:22px;color:#000000;line-height:29px;text-align:center;margin-bottom:20px}.mv-brandlist-page .brandheadsl .brand-info .textBf{font-size:14px;color:#000000;line-height:25px;height:100px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.mv-brandlist-page .brandheadsl .brand-info .brandbox span{font-size:12px;color:#888;line-height:20px;width:80px;flex-shrink:0}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox{flex-wrap:wrap}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox .item{height:20px;line-height:20px;font-size:12px;color:#000000;margin-right:40px;margin-bottom:15px}.mv-brandlist-page .databox{padding-top:24px}.mv-brandlist-page .databox .data-group-supplier{padding-bottom:20px;background:#fff;min-height:400px}.mv-brandlist-page .databox .data-group-supplier .sortbixjk{padding:0 27px;padding-top:25px}",".page-404{background:#fff;padding:80px 0}.page-404 img{height:296px;width:360px;display:block;margin:0 auto}",".mv-top-box{height:40px;background:#F4F4F4}.mv-top-box .con{width:1226px;margin:0 auto;height:40px}.mv-top-box .con .line{height:18px;background:#d1d1d1;width:1px;margin:0px 15px}.mv-top-box .con a{font-size:12px;color:#666}.mv-top-box .con a:hover{color:#FF9A00}.mv-top-box .con .rqq{margin-left:25px}",".mv-search-box{height:146px;background:#FFFFFF}.mv-search-box .cons{width:1226px;margin:0 auto;padding-top:22px}.mv-search-box .cons img{width:117px;height:97px}.mv-search-box .cons .search-input-box{width:794px;height:40px;background:#FFFFFF;border-radius:2px;border:1px solid #FF9A00;margin-top:13px}.mv-search-box .cons .search-input-box .input-goods{width:588px;height:38px;line-height:38px;padding:0 15px;border-right:1px solid #FF9A00}.mv-search-box .cons .search-input-box .input-nums{width:133px;height:38px;line-height:38px;padding:0 15px;border-right:1px solid #FF9A00}.mv-search-box .cons .search-input-box .searchbtn{width:71px;height:38px;cursor:pointer;color:#FF9A00}.mv-search-box .cons .search-input-box .searchbtn i{font-size:26px}",".mv-nav-big{height:38px;border-bottom:1px solid #FF9A00;background:#fff}.mv-nav-big .navbox{margin:0 auto;width:1226px}.mv-nav-big .navbox .class-boxs{position:relative;height:38px}.mv-nav-big .navbox .class-boxs .title-lc{line-height:38px;width:234px;height:38px;background:#FF9A00;color:#fff;font-weight:bold;font-size:18px;cursor:pointer;box-sizing:border-box;padding-left:14px;display:block}.mv-nav-big .navbox .class-boxs .box-one-left{width:234px;height:460px;position:absolute;left:0px;top:39px;background:rgba(255,255,255,0.98);display:none;box-sizing:border-box;z-index:3;border-left:1px solid rgba(255,255,255,0)}.mv-nav-big .navbox .class-boxs .box-one-left.index-pages{display:block}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons{width:234px;padding:20px 0;box-sizing:border-box;position:relative}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group{color:#313131;font-size:14px;padding-left:17px;padding-right:17px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link{display:block;width:100%;cursor:pointer;padding-bottom:5px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann{color:#000;font-size:16px;display:block;height:35px;line-height:35px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span{transition:all .5s;display:inline-block;vertical-align:middle;width:0px;overflow:hidden}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span i{font-size:11px;color:#FF9A00;position:relative;top:-2px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann span{width:25px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right{background:#fff;display:block;height:460px;width:775px;position:absolute;left:234px;padding-top:25px;box-sizing:border-box;top:0px;display:none;border-left:0px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk{width:775px;height:410px;box-sizing:border-box;overflow-y:auto;padding:0 24px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar{width:8px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-thumb{border-radius:6px;background:#fff;-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.2)}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-track{border-radius:0;background:#f4f4f4}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group{margin-bottom:10px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link{width:130px;color:#000;font-weight:bold;font-size:14px;height:35px;line-height:35px;flex-shrink:0;padding-right:10px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link:hover{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group{flex-wrap:wrap;margin-bottom:5px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link{flex-shrink:0;padding-right:20px;box-sizing:border-box;margin-bottom:5px;height:30px;line-height:30px;color:#888888;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link:hover{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .box-two-right{display:block}.mv-nav-big .navbox .class-boxs:hover .box-one-left{display:block}.mv-nav-big .navbox .haed-nav-box{height:38px;line-height:38px}.mv-nav-big .navbox .haed-nav-box ul{box-sizing:border-box;padding-left:34px}.mv-nav-big .navbox .haed-nav-box li{margin-right:75px}.mv-nav-big .navbox .haed-nav-box li a{font-size:18px;color:#000}.mv-nav-big .navbox .haed-nav-box li.act a,.mv-nav-big .navbox .haed-nav-box li:hover a{color:#FF9A00}",".mv-footer-box{height:160px;background:#F4F4F4}.mv-footer-box .cons{width:1226px;height:120px;margin:0 auto;padding-top:25px}.mv-footer-box .cons img{height:70px;width:70px;border-radius:70px}.mv-footer-box .cons .navlink{margin-top:24px}.mv-footer-box .cons .navlink a{padding:0 40px;border-left:1px solid #d1d1d1;font-size:14px;color:#000;height:19px}.mv-footer-box .cons .navlink a:hover{color:#FF9A00}.mv-footer-box .cons .navlink a:first-child{border-left:0px}.mv-footer-box .cons .navlink a:last-child{padding-right:0px}.mv-footer-box .footer-bot{height:40px;background:#FF9A00}.mv-footer-box .footer-bot .consp{width:1226px;margin:0 auto;height:40px;line-height:40px;color:#FF9A00;font-size:14px;color:#fff}.mv-footer-box .footer-bot .consp a{color:#fff;margin-left:30px}"],"names":[],"sourceRoot":""}
\ No newline at end of file
This diff could not be displayed because it is too large.
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @remix-run/router v1.17.0
*
* Copyright (c) Remix Software Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
/**
* React Router DOM v6.24.0
*
* Copyright (c) Remix Software Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
/**
* React Router v6.24.0
*
* Copyright (c) Remix Software Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
/**![check](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkxMiAxOTBoLTY5LjljLTkuOCAwLTE5LjEgNC41LTI1LjEgMTIuMkw0MDQuNyA3MjQuNSAyMDcgNDc0YTMyIDMyIDAgMDAtMjUuMS0xMi4ySDExMmMtNi43IDAtMTAuNCA3LjctNi4zIDEyLjlsMjczLjkgMzQ3YzEyLjggMTYuMiAzNy40IDE2LjIgNTAuMyAwbDQ4OC40LTYxOC45YzQuMS01LjEuNC0xMi44LTYuMy0xMi44eiIgLz48L3N2Zz4=) */
/**![close-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdmlld0JveD0iNjQgNjQgODk2IDg5NiIgZm9jdXNhYmxlPSJmYWxzZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTEyIDY0YzI0Ny40IDAgNDQ4IDIwMC42IDQ0OCA0NDhTNzU5LjQgOTYwIDUxMiA5NjAgNjQgNzU5LjQgNjQgNTEyIDI2NC42IDY0IDUxMiA2NHptMTI3Ljk4IDI3NC44MmgtLjA0bC0uMDguMDZMNTEyIDQ2Ni43NSAzODQuMTQgMzM4Ljg4Yy0uMDQtLjA1LS4wNi0uMDYtLjA4LS4wNmEuMTIuMTIgMCAwMC0uMDcgMGMtLjAzIDAtLjA1LjAxLS4wOS4wNWwtNDUuMDIgNDUuMDJhLjIuMiAwIDAwLS4wNS4wOS4xMi4xMiAwIDAwMCAuMDd2LjAyYS4yNy4yNyAwIDAwLjA2LjA2TDQ2Ni43NSA1MTIgMzM4Ljg4IDYzOS44NmMtLjA1LjA0LS4wNi4wNi0uMDYuMDhhLjEyLjEyIDAgMDAwIC4wN2MwIC4wMy4wMS4wNS4wNS4wOWw0NS4wMiA0NS4wMmEuMi4yIDAgMDAuMDkuMDUuMTIuMTIgMCAwMC4wNyAwYy4wMiAwIC4wNC0uMDEuMDgtLjA1TDUxMiA1NTcuMjVsMTI3Ljg2IDEyNy44N2MuMDQuMDQuMDYuMDUuMDguMDVhLjEyLjEyIDAgMDAuMDcgMGMuMDMgMCAuMDUtLjAxLjA5LS4wNWw0NS4wMi00NS4wMmEuMi4yIDAgMDAuMDUtLjA5LjEyLjEyIDAgMDAwLS4wN3YtLjAyYS4yNy4yNyAwIDAwLS4wNS0uMDZMNTU3LjI1IDUxMmwxMjcuODctMTI3Ljg2Yy4wNC0uMDQuMDUtLjA2LjA1LS4wOGEuMTIuMTIgMCAwMDAtLjA3YzAtLjAzLS4wMS0uMDUtLjA1LS4wOWwtNDUuMDItNDUuMDJhLjIuMiAwIDAwLS4wOS0uMDUuMTIuMTIgMCAwMC0uMDcgMHoiIC8+PC9zdmc+) */
/**![close](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdmlld0JveD0iNjQgNjQgODk2IDg5NiIgZm9jdXNhYmxlPSJmYWxzZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNzk5Ljg2IDE2Ni4zMWMuMDIgMCAuMDQuMDIuMDguMDZsNTcuNjkgNTcuN2MuMDQuMDMuMDUuMDUuMDYuMDhhLjEyLjEyIDAgMDEwIC4wNmMwIC4wMy0uMDIuMDUtLjA2LjA5TDU2OS45MyA1MTJsMjg3LjcgMjg3LjdjLjA0LjA0LjA1LjA2LjA2LjA5YS4xMi4xMiAwIDAxMCAuMDdjMCAuMDItLjAyLjA0LS4wNi4wOGwtNTcuNyA1Ny42OWMtLjAzLjA0LS4wNS4wNS0uMDcuMDZhLjEyLjEyIDAgMDEtLjA3IDBjLS4wMyAwLS4wNS0uMDItLjA5LS4wNkw1MTIgNTY5LjkzbC0yODcuNyAyODcuN2MtLjA0LjA0LS4wNi4wNS0uMDkuMDZhLjEyLjEyIDAgMDEtLjA3IDBjLS4wMiAwLS4wNC0uMDItLjA4LS4wNmwtNTcuNjktNTcuN2MtLjA0LS4wMy0uMDUtLjA1LS4wNi0uMDdhLjEyLjEyIDAgMDEwLS4wN2MwLS4wMy4wMi0uMDUuMDYtLjA5TDQ1NC4wNyA1MTJsLTI4Ny43LTI4Ny43Yy0uMDQtLjA0LS4wNS0uMDYtLjA2LS4wOWEuMTIuMTIgMCAwMTAtLjA3YzAtLjAyLjAyLS4wNC4wNi0uMDhsNTcuNy01Ny42OWMuMDMtLjA0LjA1LS4wNS4wNy0uMDZhLjEyLjEyIDAgMDEuMDcgMGMuMDMgMCAuMDUuMDIuMDkuMDZMNTEyIDQ1NC4wN2wyODcuNy0yODcuN2MuMDQtLjA0LjA2LS4wNS4wOS0uMDZhLjEyLjEyIDAgMDEuMDcgMHoiIC8+PC9zdmc+) */
/**![double-left](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI3Mi45IDUxMmwyNjUuNC0zMzkuMWM0LjEtNS4yLjQtMTIuOS02LjMtMTIuOWgtNzcuM2MtNC45IDAtOS42IDIuMy0xMi42IDYuMUwxODYuOCA0OTIuM2EzMS45OSAzMS45OSAwIDAwMCAzOS41bDI1NS4zIDMyNi4xYzMgMy45IDcuNyA2LjEgMTIuNiA2LjFINTMyYzYuNyAwIDEwLjQtNy43IDYuMy0xMi45TDI3Mi45IDUxMnptMzA0IDBsMjY1LjQtMzM5LjFjNC4xLTUuMi40LTEyLjktNi4zLTEyLjloLTc3LjNjLTQuOSAwLTkuNiAyLjMtMTIuNiA2LjFMNDkwLjggNDkyLjNhMzEuOTkgMzEuOTkgMCAwMDAgMzkuNWwyNTUuMyAzMjYuMWMzIDMuOSA3LjcgNi4xIDEyLjYgNi4xSDgzNmM2LjcgMCAxMC40LTcuNyA2LjMtMTIuOUw1NzYuOSA1MTJ6IiAvPjwvc3ZnPg==) */
/**![double-right](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUzMy4yIDQ5Mi4zTDI3Ny45IDE2Ni4xYy0zLTMuOS03LjctNi4xLTEyLjYtNi4xSDE4OGMtNi43IDAtMTAuNCA3LjctNi4zIDEyLjlMNDQ3LjEgNTEyIDE4MS43IDg1MS4xQTcuOTggNy45OCAwIDAwMTg4IDg2NGg3Ny4zYzQuOSAwIDkuNi0yLjMgMTIuNi02LjFsMjU1LjMtMzI2LjFjOS4xLTExLjcgOS4xLTI3LjkgMC0zOS41em0zMDQgMEw1ODEuOSAxNjYuMWMtMy0zLjktNy43LTYuMS0xMi42LTYuMUg0OTJjLTYuNyAwLTEwLjQgNy43LTYuMyAxMi45TDc1MS4xIDUxMiA0ODUuNyA4NTEuMUE3Ljk4IDcuOTggMCAwMDQ5MiA4NjRoNzcuM2M0LjkgMCA5LjYtMi4zIDEyLjYtNi4xbDI1NS4zLTMyNi4xYzkuMS0xMS43IDkuMS0yNy45IDAtMzkuNXoiIC8+PC9zdmc+) */
/**![down](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg4NCAyNTZoLTc1Yy01LjEgMC05LjkgMi41LTEyLjkgNi42TDUxMiA2NTQuMiAyMjcuOSAyNjIuNmMtMy00LjEtNy44LTYuNi0xMi45LTYuNmgtNzVjLTYuNSAwLTEwLjMgNy40LTYuNSAxMi43bDM1Mi42IDQ4Ni4xYzEyLjggMTcuNiAzOSAxNy42IDUxLjcgMGwzNTIuNi00ODYuMWMzLjktNS4zLjEtMTIuNy02LjQtMTIuN3oiIC8+PC9zdmc+) */
/**![left](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcyNCAyMTguM1YxNDFjMC02LjctNy43LTEwLjQtMTIuOS02LjNMMjYwLjMgNDg2LjhhMzEuODYgMzEuODYgMCAwMDAgNTAuM2w0NTAuOCAzNTIuMWM1LjMgNC4xIDEyLjkuNCAxMi45LTYuM3YtNzcuM2MwLTQuOS0yLjMtOS42LTYuMS0xMi42bC0zNjAtMjgxIDM2MC0yODEuMWMzLjgtMyA2LjEtNy43IDYuMS0xMi42eiIgLz48L3N2Zz4=) */
/**![loading](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTk4OCA1NDhjLTE5LjkgMC0zNi0xNi4xLTM2LTM2IDAtNTkuNC0xMS42LTExNy0zNC42LTE3MS4zYTQ0MC40NSA0NDAuNDUgMCAwMC05NC4zLTEzOS45IDQzNy43MSA0MzcuNzEgMCAwMC0xMzkuOS05NC4zQzYyOSA4My42IDU3MS40IDcyIDUxMiA3MmMtMTkuOSAwLTM2LTE2LjEtMzYtMzZzMTYuMS0zNiAzNi0zNmM2OS4xIDAgMTM2LjIgMTMuNSAxOTkuMyA0MC4zQzc3Mi4zIDY2IDgyNyAxMDMgODc0IDE1MGM0NyA0NyA4My45IDEwMS44IDEwOS43IDE2Mi43IDI2LjcgNjMuMSA0MC4yIDEzMC4yIDQwLjIgMTk5LjMuMSAxOS45LTE2IDM2LTM1LjkgMzZ6IiAvPjwvc3ZnPg==) */
/**![right](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTc2NS43IDQ4Ni44TDMxNC45IDEzNC43QTcuOTcgNy45NyAwIDAwMzAyIDE0MXY3Ny4zYzAgNC45IDIuMyA5LjYgNi4xIDEyLjZsMzYwIDI4MS4xLTM2MCAyODEuMWMtMy45IDMtNi4xIDcuNy02LjEgMTIuNlY4ODNjMCA2LjcgNy43IDEwLjQgMTIuOSA2LjNsNDUwLjgtMzUyLjFhMzEuOTYgMzEuOTYgMCAwMDAtNTAuNHoiIC8+PC9zdmc+) */
/**![search](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkwOS42IDg1NC41TDY0OS45IDU5NC44QzY5MC4yIDU0Mi43IDcxMiA0NzkgNzEyIDQxMmMwLTgwLjItMzEuMy0xNTUuNC04Ny45LTIxMi4xLTU2LjYtNTYuNy0xMzItODcuOS0yMTIuMS04Ny45cy0xNTUuNSAzMS4zLTIxMi4xIDg3LjlDMTQzLjIgMjU2LjUgMTEyIDMzMS44IDExMiA0MTJjMCA4MC4xIDMxLjMgMTU1LjUgODcuOSAyMTIuMUMyNTYuNSA2ODAuOCAzMzEuOCA3MTIgNDEyIDcxMmM2NyAwIDEzMC42LTIxLjggMTgyLjctNjJsMjU5LjcgMjU5LjZhOC4yIDguMiAwIDAwMTEuNiAwbDQzLjYtNDMuNWE4LjIgOC4yIDAgMDAwLTExLjZ6TTU3MC40IDU3MC40QzUyOCA2MTIuNyA0NzEuOCA2MzYgNDEyIDYzNnMtMTE2LTIzLjMtMTU4LjQtNjUuNkMyMTEuMyA1MjggMTg4IDQ3MS44IDE4OCA0MTJzMjMuMy0xMTYuMSA2NS42LTE1OC40QzI5NiAyMTEuMyAzNTIuMiAxODggNDEyIDE4OHMxMTYuMSAyMy4yIDE1OC40IDY1LjZTNjM2IDM1Mi4yIDYzNiA0MTJzLTIzLjMgMTE2LjEtNjUuNiAxNTguNHoiIC8+PC9zdmc+) */
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
{
"name": "react-ts-demos",
"version": "0.1.0",
"private": true,
"proxy": "http://erpweb.liexindev.net",
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.101",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"antd": "^5.18.3",
"axios": "^1.7.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
"react-router-dom": "^6.24.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
No preview for this file type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="">
<meta name="description" content="" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>麒麟电子商城</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
\ No newline at end of file
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
import './styles/base.min.css'
import './styles/font/iconfont.css'
import { createHashRouter, Outlet, RouterProvider } from "react-router-dom"
import { useEffect, useState } from 'react';
import { CommonConfigDataContext } from "./contexts/CommonConfigDataContext";
import Home from './pages/Home';
import Search from './pages/Search';
import BrandMap from './pages/BrandMap';
import ClassMap from './pages/ClassMap';
import About from './pages/About';
import Contact from './pages/Contact';
import Notice from './pages/Notice';
import GoodsDetail from "./pages/GoodsDetail";
import Category from "./pages/Category";
import Brand from "./pages/Brand";
import Page404 from "./pages/Page404";
import Header from "./components/Header";
import Footer from "./components/Footer";
const Index = () => {
sessionStorage.removeItem('HOME_PAGE_DATAS')
sessionStorage.removeItem('BRANDMAP_PAGE_DATAS')
sessionStorage.removeItem('CLASSMAP_PAGE_DATAS')
return (
<>
<Header />
<Outlet />
<Footer />
</>
);
}
const router = createHashRouter([
{
path: '',
element: <Index />,
children: [
{
path: '/',
element: <Home />
},
{
path: '/search',
element: <Search />
},
{
path: '/detail/:sku_id',
element: <GoodsDetail />
},
{
path: '/brandMap',
element: <BrandMap />
},
{
path: '/brand/:brand_id',
element: <Brand />
},
{
path: '/classMap',
element: <ClassMap />
},
{
path: '/category/:class_id1/:class_id2?',
element: <Category />
},
{
path: '/about',
element: <About />
},
{
path: '/notice',
element: <Notice />
},
{
path: '/contact',
element: <Contact />
}
,
{
path: '*',
element: <Page404 />
}
]
},
]);
const App = () => {
const [commonConfigData, setCommonConfigData] = useState({
qqurl: '',
});
useEffect(() => {
setCommonConfigData({
qqurl: 'https://url.cn/uia2no5Z?_type=wpa&amp;qidian=true'
})
}, []);
return (
<>
<CommonConfigDataContext.Provider value={commonConfigData}>
<RouterProvider router={router} ></RouterProvider>
</CommonConfigDataContext.Provider>
</>
);
}
export default App;
.breadcrumbs{
height:47px;
line-height: 47px;
font-size: 12px;
color: #000000;
a {
margin: 0 10px;
color: #000000;
&:first-child {
margin-left: 0;
}
&:hover{
color:#FF9A00;
}
}
i{
color: #000000;
font-size: 12px;
}
strong {
margin: 0 10px;
color: #919191;
font-weight: normal !important;
}
}
.breadcrumbs{height:47px;line-height:47px;font-size:12px;color:#000000}.breadcrumbs a{margin:0 10px;color:#000000}.breadcrumbs a:first-child{margin-left:0}.breadcrumbs a:hover{color:#FF9A00}.breadcrumbs i{color:#000000;font-size:12px}.breadcrumbs strong{margin:0 10px;color:#919191;font-weight:normal !important}
\ No newline at end of file
import { ReactNode } from 'react'
import './index.min.css'
import { Link } from "react-router-dom"
const BreadNav = (props:{children:ReactNode}) => {
return (
<>
<div className="breadcrumbs w1226">
<Link to='/'>首页</Link>
<i className="icon iconfont icon-xiangyou1"></i>
{props.children}
</div>
</>
)
}
export default BreadNav
\ No newline at end of file
.mv-footer-box{
height: 160px;
background: #F4F4F4;
.cons{
width:1226px;
height:120px;
margin: 0 auto;
padding-top: 25px;
img{
height:70px;
width:70px;
border-radius: 70px;
}
.navlink{
margin-top: 24px;
a{
padding:0 40px;
border-left:1px solid #d1d1d1;
font-size: 14px;
color:#000;
height:19px;
&:hover{color:#FF9A00;}
&:first-child{
border-left:0px;
}
&:last-child{
padding-right: 0px;
}
}
}
}
.footer-bot{
height: 40px;
background: #FF9A00;
.consp{
width: 1226px;
margin: 0 auto;
height: 40px;
line-height: 40px;
color: #FF9A00;
font-size: 14px;
color:#fff;
a{
color:#fff;
margin-left: 30px;
}
}
}
}
\ No newline at end of file
.mv-footer-box{height:160px;background:#F4F4F4}.mv-footer-box .cons{width:1226px;height:120px;margin:0 auto;padding-top:25px}.mv-footer-box .cons img{height:70px;width:70px;border-radius:70px}.mv-footer-box .cons .navlink{margin-top:24px}.mv-footer-box .cons .navlink a{padding:0 40px;border-left:1px solid #d1d1d1;font-size:14px;color:#000;height:19px}.mv-footer-box .cons .navlink a:hover{color:#FF9A00}.mv-footer-box .cons .navlink a:first-child{border-left:0px}.mv-footer-box .cons .navlink a:last-child{padding-right:0px}.mv-footer-box .footer-bot{height:40px;background:#FF9A00}.mv-footer-box .footer-bot .consp{width:1226px;margin:0 auto;height:40px;line-height:40px;color:#FF9A00;font-size:14px;color:#fff}.mv-footer-box .footer-bot .consp a{color:#fff;margin-left:30px}
\ No newline at end of file
import { Link } from 'react-router-dom'
import './index.min.css'
const Footer = () => {
return (
<>
<div className='mv-footer-box'>
<div className='cons boxsiz row bothSide'>
<img src={require('../../images/qq.png')} alt='' />
<div className='row navlink'>
<Link to='/brandMap'>品牌馆</Link>
<Link to='/about'>关于我们</Link>
<Link to='/contact'>联系我们</Link>
</div>
</div>
<div className='footer-bot'>
<div className='consp row bothSide'>
<span>©2021深圳市猎芯科技有限公司 ALL RIGHTS RESERVED <a rel='noopener noreferrer' target='_blank' href='https://beian.miit.gov.cn/#/Integrated/index'>粤ICP备17064931号</a></span>
<span>增值电信业务经营许可证:粤B2-20160350</span>
</div>
</div>
</div>
</>
)
}
export default Footer
\ No newline at end of file
export type ResponseType = {
success: boolean,
data: Array<{
shopId: string,
shopName: string,
cartList: Array<{
productId: string,
imgUrl: string,
weight: string,
title: string,
price: number,
count: number
}>
}>
}
\ No newline at end of file
.mv-nav-big {
height:38px;
border-bottom: 1px solid #FF9A00;
background: #fff;
.navbox {
margin : 0 auto;
width : 1226px;
.class-boxs {
position: relative;
height : 38px;
.title-lc {
line-height : 38px;
height : 38px;
width : 234px;
height : 38px;
background : #FF9A00;
color : #fff;
font-weight : bold;
font-size : 18px;
cursor : pointer;
box-sizing : border-box;
padding-left: 14px;
display: block;
}
.box-one-left {
width : 234px;
height : 460px;
position : absolute;
left : 0px;
top : 39px;
background: rgba(255, 255, 255, 0.98);
display : none;
box-sizing : border-box;
z-index : 3;
border-left: 1px solid rgba(255, 255, 255, 0);
&.index-pages{
display: block;
}
.classleftcons {
width : 234px;
padding : 20px 0;
box-sizing: border-box;
position : relative;
.one-class-group {
color : #313131;
font-size : 14px;
padding-left : 17px;
padding-right: 17px;
.one-class-link {
display : block;
width : 100%;
cursor : pointer;
padding-bottom: 5px;
.spann {
color : #000;
font-size : 16px;
display : block;
height : 35px;
line-height : 35px;
overflow : hidden;
text-overflow: ellipsis;
white-space : nowrap;
span {
transition : all 0.5s;
display : inline-block;
vertical-align: middle;
width : 0px;
overflow : hidden;
i {
font-size: 11px;
color : #FF9A00;
position : relative;
top : -2px;
}
}
}
}
&:hover {
.spann {
color: #FF9A00;
span {
width: 25px;
}
}
}
.box-two-right {
background : #fff;
box-sizing : border-box;
display : block;
height : 460px;
width : 775px;
position : absolute;
left : 234px;
padding-top: 25px;
box-sizing : border-box;
top : 0px;
display : none;
border-left: 0px;
.classconsjk {
width : 775px;
height : 410px;
box-sizing : border-box;
overflow-y : auto;
padding:0 24px;
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-thumb {
border-radius : 6px;
background : #fff;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2)
}
&::-webkit-scrollbar-track {
border-radius: 0;
background : #f4f4f4
}
}
.two-class-group {
margin-bottom: 10px;
.two-class-link {
width : 130px;
color : #000;
font-weight : bold;
font-size : 14px;
height : 35px;
line-height : 35px;
flex-shrink : 0;
padding-right: 10px;
box-sizing : border-box;
overflow : hidden;
text-overflow: ellipsis;
white-space : nowrap;
&:hover {
color: #FF9A00;
}
}
.three-class-group {
flex-wrap : wrap;
margin-bottom: 5px;
.three-class-link {
flex-shrink : 0;
// width:120px;
padding-right: 20px;
box-sizing : border-box;
margin-bottom: 5px;
height : 30px;
line-height : 30px;
color : #888888;
font-size : 12px;
&:hover {
color: #FF9A00;
}
overflow : hidden;
text-overflow: ellipsis;
white-space : nowrap;
}
}
}
}
&:hover {
.box-two-right {
display: block;
}
}
}
}
}
&:hover {
.box-one-left {
display: block;
}
}
}
.haed-nav-box {
height : 38px;
line-height: 38px;
ul {
box-sizing : border-box;
padding-left: 34px;
}
li {
margin-right: 75px;
a {
font-size: 18px;
color : #000;
}
&.act,
&:hover {
a {
color: #FF9A00;
}
}
}
}
}
}
\ No newline at end of file
.mv-nav-big{height:38px;border-bottom:1px solid #FF9A00;background:#fff}.mv-nav-big .navbox{margin:0 auto;width:1226px}.mv-nav-big .navbox .class-boxs{position:relative;height:38px}.mv-nav-big .navbox .class-boxs .title-lc{line-height:38px;width:234px;height:38px;background:#FF9A00;color:#fff;font-weight:bold;font-size:18px;cursor:pointer;box-sizing:border-box;padding-left:14px;display:block}.mv-nav-big .navbox .class-boxs .box-one-left{width:234px;height:460px;position:absolute;left:0px;top:39px;background:rgba(255,255,255,0.98);display:none;box-sizing:border-box;z-index:3;border-left:1px solid rgba(255,255,255,0)}.mv-nav-big .navbox .class-boxs .box-one-left.index-pages{display:block}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons{width:234px;padding:20px 0;box-sizing:border-box;position:relative}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group{color:#313131;font-size:14px;padding-left:17px;padding-right:17px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link{display:block;width:100%;cursor:pointer;padding-bottom:5px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann{color:#000;font-size:16px;display:block;height:35px;line-height:35px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span{transition:all .5s;display:inline-block;vertical-align:middle;width:0px;overflow:hidden}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .one-class-link .spann span i{font-size:11px;color:#FF9A00;position:relative;top:-2px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .spann span{width:25px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right{background:#fff;display:block;height:460px;width:775px;position:absolute;left:234px;padding-top:25px;box-sizing:border-box;top:0px;display:none;border-left:0px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk{width:775px;height:410px;box-sizing:border-box;overflow-y:auto;padding:0 24px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar{width:8px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-thumb{border-radius:6px;background:#fff;-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.2)}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .classconsjk::-webkit-scrollbar-track{border-radius:0;background:#f4f4f4}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group{margin-bottom:10px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link{width:130px;color:#000;font-weight:bold;font-size:14px;height:35px;line-height:35px;flex-shrink:0;padding-right:10px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .two-class-link:hover{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group{flex-wrap:wrap;margin-bottom:5px}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link{flex-shrink:0;padding-right:20px;box-sizing:border-box;margin-bottom:5px;height:30px;line-height:30px;color:#888888;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group .box-two-right .two-class-group .three-class-group .three-class-link:hover{color:#FF9A00}.mv-nav-big .navbox .class-boxs .box-one-left .classleftcons .one-class-group:hover .box-two-right{display:block}.mv-nav-big .navbox .class-boxs:hover .box-one-left{display:block}.mv-nav-big .navbox .haed-nav-box{height:38px;line-height:38px}.mv-nav-big .navbox .haed-nav-box ul{box-sizing:border-box;padding-left:34px}.mv-nav-big .navbox .haed-nav-box li{margin-right:75px}.mv-nav-big .navbox .haed-nav-box li a{font-size:18px;color:#000}.mv-nav-big .navbox .haed-nav-box li.act a,.mv-nav-big .navbox .haed-nav-box li:hover a{color:#FF9A00}
\ No newline at end of file
import { Link, useLocation } from 'react-router-dom'
import './index.min.css'
import type { ResponseTypeCateList,classListType } from './types'
import { useEffect, useState } from 'react'
import useRequest from '../../../../hooks/useRequest'
const NavBig = () => {
const location=useLocation()
const items = [{
url: '/',
name: '首页'
}, {
url: '/brandMap',
name: '品牌馆'
}, {
url: '/about',
name: '关于我们'
}, {
url: '/contact',
name: '联系我们'
}]
const { request:classListRequest } = useRequest<ResponseTypeCateList>({manual:true})
const [classLists,setClassLists]=useState<classListType[]>([])
useEffect(()=>{
classListRequest({url: '/api/home/getCateList'}).then(res=>{
if(res?.code===0){
setClassLists(res.data?.nav_list||[])
}
})
},[classListRequest])
return (
<>
<div className='mv-nav-big'>
<div className='navbox row'>
<div className='class-boxs'>
<Link className='title-lc' to='/classMap'>查看全部</Link>
<div className={location.pathname==='/'?'box-one-left index-pages':'box-one-left'} >
<div className='classleftcons'>
{
classLists.map(item => {
return (
<div className='one-class-group' key={item.goods_type_id}>
<div className='one-class-link'>
<Link className='spann' to={`/category/${item.goods_type_id}`}>
<span><i className='icon iconfont icon-sanjiaoxing'></i></span>
{item.goods_type_name}
</Link>
</div>
<div className='box-two-right '>
<div className='classconsjk'>
<div className='two-class-group '>
<Link to={`/category/${item.goods_type_id}`} key={item.goods_type_id} className='two-class-link'>{item.goods_type_name}</Link>
<div className='three-class-group row'>
{
(item.child||[]).map((itemChild,index)=>{
return (
<Link key={itemChild.goods_type_id+index} className='three-class-link' to={`/category/${item.goods_type_id}/${itemChild.goods_type_id}`}>{itemChild.goods_type_name}</Link>
)
})
}
</div>
</div>
</div>
</div>
</div>
)
})
}
</div>
</div>
</div>
<div className='haed-nav-box'>
<ul className='row'>
{
items.map((item, index) => {
return (
<li className={location.pathname === item.url ? 'act' : ''} key={item.name + index}>
<Link to={item.url}>{item.name}</Link>
</li>
)
})
}
</ul>
</div>
</div>
</div>
</>
)
}
export default NavBig
\ No newline at end of file
export type ResponseTypeCateList = {
code: number | string,
data: {
nav_list: Array<classListType>
} | null,
msg: string
}
export type classListType = {
goods_type_id: string,
goods_type_name: string,
child?: Array<{
goods_type_id: string,
goods_type_name: string,
}>
}
.mv-search-box{
height: 146px;
background: #FFFFFF;
.cons{
width:1226px;
margin:0 auto;
padding-top: 22px;
img{
width: 117px;
height: 97px;
}
.search-input-box{
width: 794px;
height: 40px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #FF9A00;
margin-top: 13px;
.input-goods{
width:588px;
height:38px;
line-height: 38px;
padding: 0 15px;
border-right: 1px solid #FF9A00;
}
.input-nums{
width:133px;
height:38px;
line-height: 38px;
padding: 0 15px;
border-right: 1px solid #FF9A00;
}
.searchbtn{
width:71px;
height:38px;
cursor: pointer;
i{
font-size: 26px;
}
color:#FF9A00;
}
}
}
}
\ No newline at end of file
.mv-search-box{height:146px;background:#FFFFFF}.mv-search-box .cons{width:1226px;margin:0 auto;padding-top:22px}.mv-search-box .cons img{width:117px;height:97px}.mv-search-box .cons .search-input-box{width:794px;height:40px;background:#FFFFFF;border-radius:2px;border:1px solid #FF9A00;margin-top:13px}.mv-search-box .cons .search-input-box .input-goods{width:588px;height:38px;line-height:38px;padding:0 15px;border-right:1px solid #FF9A00}.mv-search-box .cons .search-input-box .input-nums{width:133px;height:38px;line-height:38px;padding:0 15px;border-right:1px solid #FF9A00}.mv-search-box .cons .search-input-box .searchbtn{width:71px;height:38px;cursor:pointer;color:#FF9A00}.mv-search-box .cons .search-input-box .searchbtn i{font-size:26px}
\ No newline at end of file
import { Link, useLocation, useNavigate} from 'react-router-dom'
import './index.min.css'
import { useEffect, useState } from 'react'
import { useToast } from '../../../../hooks/useToast'
const SearchH = () => {
const location = useLocation();
let keywords=''
let nums ='';
if(location.pathname==='/search'){
const params = new URLSearchParams(location.search);
keywords=params.get('keyword')||''
nums = params.get('num')||''
}
const [key,setKey]=useState(keywords)
const [num,setNum]=useState(nums)
useEffect(()=>{
if(location.pathname!=='/search'){
setKey('')
setNum('')
}
},[location.pathname])
const navigate=useNavigate()
const {message}=useToast()
const goSearch=()=>{
if(key.trim().length<2){
message("请输入至少2个字符")
return
}
navigate(`/search?keyword=${key}&num=${num}`)
}
const changeNum=((e:React.ChangeEvent<HTMLInputElement>)=>{
const value = e.target.value;
const numericValue = value.replace(/[^0-9]/g, '');
setNum(numericValue)
})
return (
<>
<div className='mv-search-box'>
<div className='cons row bothSide boxsiz'>
<Link to='/'><img src={require('../../../../images/qq.png')} alt='' /></Link>
<div className='search-input-box boxsiz row'>
<input type='text' className='input-goods boxsiz' value={key} onChange={(e)=>{setKey(e.target.value)}} placeholder='请输入元器件型号、参数查找' />
<input type='text' className='input-nums boxsiz' value={num} placeholder='需求数量' onChange={(e)=>{changeNum(e)}}/>
<div className='searchbtn row rowCenter verCenter' onClick={goSearch}><i className='icon iconfont icon-iconfontsousuo '></i></div>
</div>
</div>
</div>
</>
)
}
export default SearchH
\ No newline at end of file
.mv-top-box{
height: 40px;
background: #F4F4F4;
.con{
width:1226px;
margin:0 auto;
height:40px;
.line {
height: 18px;
background: #d1d1d1;
width: 1px;
margin: 0px 15px;
}
a{
font-size: 12px;
color:#666;
&:hover{
color: #FF9A00;
}
}
.rqq{
margin-left: 25px;
}
}
}
\ No newline at end of file
.mv-top-box{height:40px;background:#F4F4F4}.mv-top-box .con{width:1226px;margin:0 auto;height:40px}.mv-top-box .con .line{height:18px;background:#d1d1d1;width:1px;margin:0px 15px}.mv-top-box .con a{font-size:12px;color:#666}.mv-top-box .con a:hover{color:#FF9A00}.mv-top-box .con .rqq{margin-left:25px}
\ No newline at end of file
import './index.min.css'
import { Link } from 'react-router-dom'
import QqIcon from '../../../QqIcon'
const TopH=()=>{
return (
<>
<div className='mv-top-box'>
<div className='con row bothSide verCenter'>
<div className='f'></div>
<div className='r row verCenter'>
<Link to='/about'>关于我们</Link>
<span className='line'></span>
<Link to='/contact'>联系我们</Link>
<span className='line'></span>
<Link to='/notice'>公告</Link>
<span className='rqq'><QqIcon /></span>
</div>
</div>
</div>
</>
)
}
export default TopH
\ No newline at end of file
import TopH from "./components/TopH"
import SearchH from "./components/SearchH"
import NavBig from "./components/NavBig"
import { useSeoTitle } from "../../hooks/useSeoTitle"
const Header = () => {
const seoTitle=useSeoTitle()
return (
<>
{seoTitle}
<div className="head-box">
<TopH />
<SearchH />
<NavBig />
</div>
</>
)
}
export default Header
\ No newline at end of file
export type ResponseType = {
success: boolean,
data: Array<{
shopId: string,
shopName: string,
cartList: Array<{
productId: string,
imgUrl: string,
weight: string,
title: string,
price: number,
count: number
}>
}>
}
\ No newline at end of file
.lists-no-datax{
background: #fff;
text-align: center;
padding: 40px;
height: auto;
img{
width: 116px;
height: 116px;
display: block;
margin: 0 auto;
}
p{
font-size: 14px;
font-weight: bold;
color: #313131;
margin-top: 32px;
}
}
\ No newline at end of file
.lists-no-datax{background:#fff;text-align:center;padding:40px;height:auto}.lists-no-datax img{width:116px;height:116px;display:block;margin:0 auto}.lists-no-datax p{font-size:14px;font-weight:bold;color:#313131;margin-top:32px}
\ No newline at end of file
import './index.min.css'
const ListNoData=()=>{
return (
<>
<div className='lists-no-datax'>
<img src={require('../../images/nodata.png')} alt="" />
<p>很抱歉!暂无数据</p>
</div>
</>
)
}
export default ListNoData
\ No newline at end of file
.list-group-one-item{
padding:0px 27px;
background: #fff;
.cons{
border-top: 1px solid #e7e7e7;
padding:10px 0px;
.item{
margin-right: 20px;
box-sizing: border-box;
flex-shrink: 0;
&:last-child{margin-right: 0px;}
.goods-img{
width: 92px;
height: 92px;
}
.goods-name{
font-weight: bold;
font-size: 14px;
color: #000000;
line-height: 19px;
height:38px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
&:hover{
color:#FF9A00;
cursor: pointer;
}
margin-bottom: 10px;
}
p{
font-size: 12px;
color: #000000;
line-height: 23px;
}
.jtgroup{
font-size: 12px;
color: #000000;
line-height: 23px;
span,strong{width:33.33%;}
}
.ljxunj{
cursor: pointer;
width: 80px;
height: 30px;
background: #FF9A00;
color:#fff;
font-size: 14px;
margin-right: 30px;
text-align: center;
line-height: 30px;
}
&.pt48{padding-top: 48px;}
&.w-198{width:198px;}
&.w-345{width:345px;}
&.w-322{width:322px;}
}
}
}
\ No newline at end of file
.list-group-one-item{padding:0px 27px;background:#fff}.list-group-one-item .cons{border-top:1px solid #e7e7e7;padding:10px 0px}.list-group-one-item .cons .item{margin-right:20px;box-sizing:border-box;flex-shrink:0}.list-group-one-item .cons .item:last-child{margin-right:0px}.list-group-one-item .cons .item .goods-img{width:92px;height:92px}.list-group-one-item .cons .item .goods-name{font-weight:bold;font-size:14px;color:#000000;line-height:19px;height:38px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-bottom:10px}.list-group-one-item .cons .item .goods-name:hover{color:#FF9A00;cursor:pointer}.list-group-one-item .cons .item p{font-size:12px;color:#000000;line-height:23px}.list-group-one-item .cons .item .jtgroup{font-size:12px;color:#000000;line-height:23px}.list-group-one-item .cons .item .jtgroup span,.list-group-one-item .cons .item .jtgroup strong{width:33.33%}.list-group-one-item .cons .item .ljxunj{cursor:pointer;width:80px;height:30px;background:#FF9A00;color:#fff;font-size:14px;margin-right:30px;text-align:center;line-height:30px}.list-group-one-item .cons .item.pt48{padding-top:48px}.list-group-one-item .cons .item.w-198{width:198px}.list-group-one-item .cons .item.w-345{width:345px}.list-group-one-item .cons .item.w-322{width:322px}
\ No newline at end of file
import { Link } from 'react-router-dom'
import QqIcon from '../QqIcon'
import './index.min.css'
import { useContext } from 'react'
import { CommonConfigDataContext } from '../../contexts/CommonConfigDataContext'
import type {dataListItemType} from './types'
const ListOneItem = (props:dataListItemType) => {
const itemInfo={...props!}
const commonConfigData=useContext(CommonConfigDataContext)
return (
<>
<div className='list-group-one-item'>
<div className='cons row'>
<div className='item'>
<Link to={`/detail/${itemInfo.goods_id}`}><img
src={itemInfo.goods_images||'http://static.ichunt.com//dist/res/home/images/goods_default.png'}
className='goods-img' alt=""
onError={(e) => {
e.currentTarget.src = 'http://static.ichunt.com//dist/res/home/images/goods_default.png';
}}
/>
</Link>
</div>
<div className='item w-198'>
<Link className='goods-name' to={`/detail/${itemInfo.goods_id}`}>{itemInfo.goods_name}</Link>
<p>品牌:{itemInfo.brand_name}</p>
<p>参数:{itemInfo.class_name}</p>
</div>
<div className='item w-345 pt48'>
<p>库存:{itemInfo.stock}</p>
<p>起订量:{itemInfo.moq} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 递增:{itemInfo.multiple}</p>
</div>
<div className='item w-322 '>
{
itemInfo.ladder_price.map((item,index)=>{
return (
<div key={index+item.price_cn} className='jtgroup row'><span>{item.purchases}+</span><strong>¥{item.price_cn||'--'}</strong><strong>¥{item.price_us||'--'}</strong></div>
)
})
}
</div>
<div className='item row'>
<a href={commonConfigData.qqurl} rel="noreferrer" className='ljxunj' target='_blank'>立即询价</a>
<QqIcon />
</div>
</div>
</div>
</>
)
}
export default ListOneItem
\ No newline at end of file
export type dataListItemType = {
sku_name: string;
brand_name: string;
brand_id: string|number;
class_id2?:string|number;
class_id1?:string|number;
class_name2?:string;
class_name: string;
cn_delivery_time: string;
hk_delivery_time: string;
goods_id: string;
goods_images: string;
goods_name: string;
moq: number;
multiple: number;
stock: number;
supplier_name: string;
ladder_price: Array<{
price_cn: number;
price_cost_cn: number;
price_us: number;
purchases: number;
price_cost_us: number;
}>
}
.sort-ranksx {
font-size: 14px;
color : #000000;
padding : 20px 0px;
.left {
.item {
height : 18px;
line-height: 18px;
padding : 0 30px;
border-left: 1px solid #d1d1d1;
cursor : pointer;
position : relative;
&:first-child {
padding-left: 0px;
border-left : 0px;
}
i.icon-bottom {
width : 0px;
height : 0px;
border-style: solid;
border-width: 6px;
border-color: #D8D8D8 transparent transparent transparent;
position : absolute;
top : 10px;
right : 14px;
}
i.icon-top {
width : 0px;
height : 0px;
border-style: solid;
border-width: 6px;
border-color: transparent transparent #D8D8D8 transparent;
position : absolute;
top : -4px;
right : 14px;
}
&.act {
color: #FF9A00;
&.top {
i.icon-top {
border-color: transparent transparent #FF9A00 transparent;
}
}
&.bottom {
i.icon-bottom {
border-color: #FF9A00 transparent transparent transparent;
}
}
}
}
}
.right {
.checkbox {
height : 18px;
width : 18px;
border-radius: 2px;
background : #FFF;
border : 1px solid #ededed;
position : relative;
top : 2px;
margin-right : 6px;
text-align : center;
line-height : 18px;
cursor : pointer;
i {
font-size: 21px;
position : relative;
top : 1px;
left : -1px;
color : rgba(0, 0, 0, 0)
}
&.act {
i {
color: #FF9A00;
}
border-color:#FF9A00;
}
}
span {
margin-left: 6px;
cursor : pointer;
&.act {
color : #FF9A00;
cursor: pointer;
}
}
}
}
\ No newline at end of file
.sort-ranksx{font-size:14px;color:#000000;padding:20px 0px}.sort-ranksx .left .item{height:18px;line-height:18px;padding:0 30px;border-left:1px solid #d1d1d1;cursor:pointer;position:relative}.sort-ranksx .left .item:first-child{padding-left:0px;border-left:0px}.sort-ranksx .left .item i.icon-bottom{width:0px;height:0px;border-style:solid;border-width:6px;border-color:#D8D8D8 transparent transparent transparent;position:absolute;top:10px;right:14px}.sort-ranksx .left .item i.icon-top{width:0px;height:0px;border-style:solid;border-width:6px;border-color:transparent transparent #D8D8D8 transparent;position:absolute;top:-4px;right:14px}.sort-ranksx .left .item.act{color:#FF9A00}.sort-ranksx .left .item.act.top i.icon-top{border-color:transparent transparent #FF9A00 transparent}.sort-ranksx .left .item.act.bottom i.icon-bottom{border-color:#FF9A00 transparent transparent transparent}.sort-ranksx .right .checkbox{height:18px;width:18px;border-radius:2px;background:#FFF;border:1px solid #ededed;position:relative;top:2px;margin-right:6px;text-align:center;line-height:18px;cursor:pointer}.sort-ranksx .right .checkbox i{font-size:21px;position:relative;top:1px;left:-1px;color:rgba(0,0,0,0)}.sort-ranksx .right .checkbox.act{border-color:#FF9A00}.sort-ranksx .right .checkbox.act i{color:#FF9A00}.sort-ranksx .right span{margin-left:6px;cursor:pointer}.sort-ranksx .right span.act{color:#FF9A00;cursor:pointer}
\ No newline at end of file
import { Dispatch, SetStateAction } from 'react';
import './index.min.css'
import type { ListSortType } from './types'
interface ListSortProps {
sortObj: ListSortType;
onChangeSort?: (T: ListSortType) => void; //自定义函数
setSortObj?: Dispatch<SetStateAction<ListSortType>>
}
const ListSort = (props: ListSortProps) => {
const { sortType, isStock, stockSort, priceSort } = props.sortObj
const changeSort = (sortType?: number) => {
const obj_ = { ...props.sortObj }
if (sortType) {
obj_.sortType = sortType
}
if (sortType === 2) {
if (obj_.stockSort === 'top') {
obj_.stockSort = 'bottom'
} else {
obj_.stockSort = 'top'
}
}
if (sortType === 3) {
if (obj_.priceSort === 'top') {
obj_.priceSort = 'bottom'
} else {
obj_.priceSort = 'top'
}
}
if (!sortType) {
obj_.isStock = !obj_.isStock
}
props.setSortObj && props.setSortObj(obj_)
props.onChangeSort && props.onChangeSort(obj_)
}
return (
<>
<div className='sort-ranksx row bothSide'>
<div className='left row'>
<div className={sortType === 1 ? 'item act' : 'item'} onClick={() => { changeSort(1) }}>综合排序</div>
<div className={sortType === 2 ? (stockSort === 'top' ? 'item act top' : 'item act bottom') : 'item'} onClick={() => { changeSort(2) }}>库存<i className="icon-top"></i><i className="icon-bottom"></i></div>
<div className={sortType === 3 ? (priceSort === 'top' ? 'item act top' : 'item act bottom') : 'item'} onClick={() => { changeSort(3) }}>价格<i className="icon-top"></i><i className="icon-bottom"></i></div>
</div>
<div className='right row verCenter'>
<div className={isStock ? 'checkbox act' : 'checkbox '} onClick={() => { changeSort() }}>
<i className='icon iconfont icon-B-fuxuankuang'></i>
</div>
<span className={isStock ? 'act' : ''} onClick={() => { changeSort() }}>仅显示有货</span>
</div>
</div>
</>
)
}
export default ListSort
\ No newline at end of file
export type ListSortType = {
sortType:number,//1 综合排序 2库存排序 3价格排序
isStock:boolean,//true 仅有货 false 全部
stockSort?:string, // top 升序 bottom 降序
priceSort?:string // top 升序 bottom 降序
}
import { useContext } from "react";
import { CommonConfigDataContext } from "../../contexts/CommonConfigDataContext";
const QqIcon = () => {
const commonConfigData = useContext(CommonConfigDataContext);
return (
<>
<a href={commonConfigData.qqurl} rel="noreferrer" target='_blank' title='QQ咨询'><img style={{width:'25px',height:'25px'}} src={require('../../images/qq.png')} alt='' /></a>
</>
)
}
export default QqIcon
\ No newline at end of file
import { createContext} from 'react';
export const CommonConfigDataContext = createContext({qqurl:''})
\ No newline at end of file
export const useCookies = () => {
const setCookie = (
name: string,
value: string | number,
time: number,
domain?: string
) => {
let domainStr = domain ? `;domain=${domain}` : '';
const exp = new Date(); // 当前时间
exp.setTime(exp.getTime() + time * 24 * 60 * 60 * 1000); // 设置过期时间
document.cookie = `${name}=${encodeURIComponent(value)};expires=${exp.toUTCString()};path=/${domainStr}`;
return true;
}
const getCookie = (name: string): string | null => {
const cookiesArray = document.cookie.split(';');
for (let i = 0; i < cookiesArray.length; i++) {
let cookiePair = cookiesArray[i].trim();
let cookieRegex = new RegExp(`${name}=`);
if (cookieRegex.test(cookiePair)) {
return decodeURIComponent(cookiePair.replace(cookieRegex, ''));
}
}
return null;
}
return { setCookie, getCookie }
}
import { useCallback, useEffect, useRef, useState } from 'react';
import axios, { AxiosRequestConfig } from "axios"
import { useToast } from './useToast';
// 默认请求参数
const defaultRequestConfig = {
url: '/', method: 'GET', data: {}, params: {}
}
function useRequest<T>(options: AxiosRequestConfig & { manual?: boolean,loading?:boolean|undefined } = defaultRequestConfig) {
const [data, setData] = useState<T | null>(null)
const [loaded, setLoaded] = useState(false)
const {loading,message}=useToast()
const loadingRef = useRef(loading);
const messageRef = useRef(message);
const controllerRef = useRef(new AbortController())
const cancel = () => {
controllerRef.current.abort()
}
const request = useCallback((requestOption?: AxiosRequestConfig) => {
setData(null)
setLoaded(false)
if(options.loading!==false){
loadingRef.current()
}
return axios.request<T>({
baseURL:'http://erpweb.liexindev.net',
...requestOption,
signal: controllerRef.current.signal,
headers: localStorage.getItem("token") ? {
token: localStorage.getItem("token")
} : {}
}).then((response) => {
setData(response.data)
return response.data
}).catch((e: any) => {
messageRef.current(e.message)
}).finally(() => {
loadingRef.current(false)
setLoaded(true)
})
}, [options.loading])
useEffect(() => {
if (!options.manual) {
request(options).catch(e=> {
messageRef.current(e.message)
})
}
}, [options, request])
return { data,loaded, request, cancel }
}
export default useRequest
\ No newline at end of file
import { useLocation } from "react-router-dom"
export const useSeoTitle = () => {
const Helmet = require('react-helmet').Helmet;
const location = useLocation()
let titlestr='404'
const titleKeywords:any = {
'/': { title: '首页', keyword: '' },
'/search': { title: '搜索结果' },
'/detail': { title: '商品详情' },
'/brandMap': { title: '品牌馆' },
'/Brand': { title: '品牌结果' },
'/classMap': { title: '分类地图' },
'/category': { title: '分类结果' },
'/about': { title: '关于我们' },
'/contact': { title: '联系我们' },
'/notice': { title: '公告' },
}
if (Object.keys(titleKeywords).indexOf(location.pathname) !== -1) {
titlestr=titleKeywords[location.pathname]['title']
}
if(location.pathname.indexOf('/detail/')!==-1){
titlestr='商品详情'
}
if(location.pathname.indexOf('/brand/')!==-1){
titlestr='品牌结果'
}
if(location.pathname.indexOf('/category/')!==-1){
titlestr='分类结果'
}
return <Helmet><title>麒麟电子商城-{titlestr}</title></Helmet>
}
import { createRoot } from "react-dom/client";
const tipStyle = {
textAlign: 'center' as const,
fontSize: '14px',
lineHeight: '32px',
fontWeight: 'bold',
position: 'fixed' as const,
top: '170px',
color: '#fff',
zIndex: '99999',
width: '500px',
left: '50%',
marginLeft: '-250px'
}
const tipTextStyle = {
background: 'rgba(0,0,0,0.5)',
paddingLeft: '20px',
paddingRight: '20px',
minWidth: '84px'
}
const loadindStyle={
position: 'fixed' as const,
top:'0px',
left:'0px',
right:'0px',
bottom:'0px',
zIndex: '999999'
}
const loadindImgStyle={
position: 'absolute' as const,
top:'50%',
left:'50%',
marginLeft:'-18px',
marginTop:'-18px',
}
const elementMessage = document.createElement('div');
const rootMessage = createRoot(elementMessage)
const elementLoading = document.createElement('div');
const rootLoading = createRoot(elementLoading)
export const useToast = () => {
const message = (message: string, timeout = 2000) => {
rootMessage.render(
<div style={tipStyle} className="row rowCenter">
<div style={tipTextStyle}>{message}</div>
</div>
);
if (!elementMessage.parentNode) {
document.body.appendChild(elementMessage);
setTimeout(() => {
document.body.removeChild(elementMessage);
}, timeout);
}
}
const loading = ((show=true) => {
rootLoading.render(
<div style={loadindStyle} >
<img src={require('../images/loading.gif')} alt="" style={loadindImgStyle}/>
</div>
);
if(show){
if (!elementLoading.parentNode) {
document.body.appendChild(elementLoading);
}
}else{
if (elementLoading.parentNode) {
document.body.removeChild(elementLoading);
}
}
})
return { message, loading }
}
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<App />
);
.mv-about-page{
.banner{
height:231px;
background: url(../../images/aboutUsBanner.png) no-repeat top center;
}
.section{
background: #fff;
.cons{
padding: 0 143px;
padding-top: 111px;
padding-bottom: 119px;
.left{
width: 267px;
.title{
border-bottom: 1px solid #E7E7E7;
font-weight: bold;
font-size: 20px;
color: #313131;
span{
display: inline-block;
position: relative;
border-bottom: 3px solid #00C69F;
padding-bottom: 22px;
top:2px;
}
}
p{
padding-top: 22px;
font-weight: 400;
font-size: 14px;
color: #000000;
line-height: 30px;
}
}
img{
width: 296px;
height: 245px;
position: relative;
top:58px;
}
}
}
}
\ No newline at end of file
.mv-about-page .banner{height:231px;background:url(../../images/aboutUsBanner.png) no-repeat top center}.mv-about-page .section{background:#fff}.mv-about-page .section .cons{padding:0 143px;padding-top:111px;padding-bottom:119px}.mv-about-page .section .cons .left{width:267px}.mv-about-page .section .cons .left .title{border-bottom:1px solid #E7E7E7;font-weight:bold;font-size:20px;color:#313131}.mv-about-page .section .cons .left .title span{display:inline-block;position:relative;border-bottom:3px solid #00C69F;padding-bottom:22px;top:2px}.mv-about-page .section .cons .left p{padding-top:22px;font-weight:400;font-size:14px;color:#000000;line-height:30px}.mv-about-page .section .cons img{width:296px;height:245px;position:relative;top:58px}
\ No newline at end of file
import './index.min.css'
const About = () => {
return (
<>
<div className='mv-about-page'>
<div className='banner'></div>
<div className='section'>
<div className='cons boxsiz w1226 row bothSide'>
<div className='left'>
<div className='title boxsiz'><span>关于我们</span></div>
<p>
麒麟电子商城(www.chiplinks.net)<br/>
我们是一家小型的电子元器件商城 <br/>
我们是龙年诞生哒!<br/>
我们想为朋友们提供一些帮助,<br/>
虽然可能只是一点点,<br/>
但请给予我们小小的机会,<br/>
请相信我们,<br/>
我们会竭尽全力地成长,<br/>
成为你们希望的模样哦!
</p>
</div>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</div>
</div>
</div>
</>
)
}
export default About
\ No newline at end of file
export type ResponseType = {
success: boolean,
data: Array<{
shopId: string,
shopName: string,
cartList: Array<{
productId: string,
imgUrl: string,
weight: string,
title: string,
price: number,
count: number
}>
}>
}
\ No newline at end of file
.mv-brandlist-page{
margin-bottom: 56px;
.brandheadsl{
min-height: 275px;
background: #fff;
padding:26px 60px;
.brandimg{
width: 222px;
height: 222px;
background: #FFFFFF;
border: 1px solid #EDEFEF;
margin-right: 60px;
}
.brand-info{
width:822px;
h2{
font-weight: bold;
font-size: 22px;
color: #000000;
line-height: 29px;
text-align: center;
margin-bottom: 20px;
}
.textBf{
font-size: 14px;
color: #000000;
line-height: 25px;
height: 100px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.brandbox{
span{
font-size: 12px;
color: #888;
line-height: 20px;
width:80px;
flex-shrink: 0;
}
.itembox{
flex-wrap: wrap;
.item{
height:20px;
line-height: 20px;
font-size: 12px;
color: #000000;
margin-right: 40px;
margin-bottom: 15px;
}
}
}
}
}
.databox{
padding-top: 24px;
.data-group-supplier{
padding-bottom: 20px;
background: #fff;
min-height: 400px;
.sortbixjk{
padding:0 27px;
padding-top: 25px;
}
}
}
}
\ No newline at end of file
.mv-brandlist-page{margin-bottom:56px}.mv-brandlist-page .brandheadsl{min-height:275px;background:#fff;padding:26px 60px}.mv-brandlist-page .brandheadsl .brandimg{width:222px;height:222px;background:#FFFFFF;border:1px solid #EDEFEF;margin-right:60px}.mv-brandlist-page .brandheadsl .brand-info{width:822px}.mv-brandlist-page .brandheadsl .brand-info h2{font-weight:bold;font-size:22px;color:#000000;line-height:29px;text-align:center;margin-bottom:20px}.mv-brandlist-page .brandheadsl .brand-info .textBf{font-size:14px;color:#000000;line-height:25px;height:100px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.mv-brandlist-page .brandheadsl .brand-info .brandbox span{font-size:12px;color:#888;line-height:20px;width:80px;flex-shrink:0}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox{flex-wrap:wrap}.mv-brandlist-page .brandheadsl .brand-info .brandbox .itembox .item{height:20px;line-height:20px;font-size:12px;color:#000000;margin-right:40px;margin-bottom:15px}.mv-brandlist-page .databox{padding-top:24px}.mv-brandlist-page .databox .data-group-supplier{padding-bottom:20px;background:#fff;min-height:400px}.mv-brandlist-page .databox .data-group-supplier .sortbixjk{padding:0 27px;padding-top:25px}
\ No newline at end of file
import './index.min.css'
import BreadNav from '../../components/BreadNav';
import ListSort from '../../components/ListSort';
import { useEffect, useRef, useState } from 'react';
import type { ListSortType } from '../../components/ListSort/types'
import type { dataListItemType } from '../../components/ListOneItem/types'
import type { brandResponseType, requestDataType,brandInfoResponseType ,brandInfoType} from './types'
import ListOneItem from '../../components/ListOneItem';
import useRequest from '../../hooks/useRequest';
import { useParams } from 'react-router-dom';
import { Pagination } from 'antd';
import ListNoData from '../../components/ListNoData';
const Brand = () => {
const params = useParams()
const [shouNoData, setShouNoData] = useState(false)
const [page, setPage] = useState(1)
const [total, setTotal] = useState(0)
const [dataList, setDataList] = useState<dataListItemType[]>([])
const [brandInfo,setBrandInfo]=useState<brandInfoType>()
const [sortObj, setSortObj] = useState<ListSortType>({
sortType: 1,
isStock: false,
stockSort: '',
priceSort: ''
})
const { request: brandListRequest } = useRequest<brandResponseType>({ manual: true })
const { request: brandInfoRequest } = useRequest<brandInfoResponseType>({ manual: true })
const shouldResetPage = useRef(false);
useEffect(() => {
shouldResetPage.current = true;
setPage(1);
}, [sortObj]);
useEffect(() => {
brandInfoRequest({
url: '/api/brand/getBrandDetail',
method: 'get',
params: {brand_id:params.brand_id},
}).then(res => {
if (res?.code === 0) {
setBrandInfo(res?.data)
}
})
}, [params.brand_id,brandInfoRequest]);
useEffect(() => {
if (shouldResetPage.current && page !== 1) {
return
}
shouldResetPage.current = false;
let obj_: requestDataType = { page_size: 10, page: page, standard_brand_id: params.brand_id }
if (sortObj.isStock) {
obj_['stock/gt'] = 0
}
if (sortObj.sortType === 2) {
obj_['stock/sort'] = sortObj.stockSort === 'top' ? 'asc' : 'desc'
}
if (sortObj.sortType === 3) {
obj_['single_price/sort'] = sortObj.priceSort === 'top' ? 'asc' : 'desc'
}
brandListRequest({
url: '/api/search/searchByBrand',
method: 'post',
data: obj_,
}).then(res => {
if (res?.code === 0) {
setTotal(Number(res.data?.total))
setDataList(res.data?.lists || [])
if (res.data?.lists.length > 0) {
setShouNoData(false)
} else {
setShouNoData(true)
}
} else {
setShouNoData(true)
}
})
}, [brandListRequest, params.brand_id, page, sortObj])
const onChange = (page: number) => {
setPage(page)
}
return (
<>
<BreadNav><strong>"{brandInfo?.brand_name}"的型号搜索结果</strong></BreadNav>
<div className='mv-brandlist-page w1226' >
<div className='brandheadsl row boxsiz'>
<img src={brandInfo?.brand_logo||'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" className='brandimg' />
<div className='brand-info'>
<h2>{brandInfo?.brand_name}</h2>
<div className='textBf'>
{brandInfo?.brand_desc}
</div>
{/* <div className='brandbox row '>
<span>分类:</span>
<div className='itembox row'>
<div className='item'>逻辑芯片(200)</div>
<div className='item'>逻辑芯片(200)</div>
</div>
</div> */}
</div>
</div>
<div className='databox'>
<div className='data-group-supplier'>
<div className='sortbixjk'>
<ListSort sortObj={sortObj} setSortObj={setSortObj} />
</div>
{
dataList.map(item => {
return (
<ListOneItem key={item.goods_id} {...item} />
)
})
}
{shouNoData ? <ListNoData /> : ''}
</div>
<Pagination style={{ 'marginTop': '30px' }} current={page} hideOnSinglePage={true} onChange={onChange} total={total} pageSize={10} showSizeChanger={false} />
</div>
</div>
</>
)
}
export default Brand
\ No newline at end of file
import type { dataListItemType } from '../../components/ListOneItem/types'
export type brandResponseType = {
code: number | string,
data: {
lists: Array<dataListItemType>,
total: number|string
},
msg: string
}
export type requestDataType = {
page_size: number,
page: number,
standard_brand_id: string | undefined,
'stock/gt'?: number | string,
'stock/sort'?: 'asc' | 'desc',
'single_price/sort'?: 'asc' | 'desc'
}
export type brandInfoResponseType = {
code: number | string,
data: brandInfoType,
msg: string
}
export type brandInfoType = {
"goods_brand_id": string | number,
"brand_name": string,
"brand_logo": string,
"brand_name_cn": string,
"brand_code": string,
"region": 1,
"brand_desc": string
}
.mv-brand-page{
padding-top: 63px;
margin-bottom: 98px;
.section{
margin-bottom: 70px;
.title{
text-align: center;
font-size: 24px;
color: #000000;
line-height: 31px;
margin-bottom: 45px;
img{
display: block;
margin:0 auto;
margin-top: 2px;
}
}
.itembox{
flex-wrap: wrap;
.item{
width: 233px;
height: 80px;
margin-bottom: 15px;
transition: all 0.5s;
margin-right: 15px;
&:nth-child(5n){
margin-right: 0px;
}
&:hover{
box-shadow: 4px 6px 7px 1px rgba(154,151,149,0.18);
transform: translateY(-1px);
}
img{
width: 233px;
height: 80px;
object-fit: contain;
transform: scale(0.8);
}
}
}
}
}
\ No newline at end of file
.mv-brand-page{padding-top:63px;margin-bottom:98px}.mv-brand-page .section{margin-bottom:70px}.mv-brand-page .section .title{text-align:center;font-size:24px;color:#000000;line-height:31px;margin-bottom:45px}.mv-brand-page .section .title img{display:block;margin:0 auto;margin-top:2px}.mv-brand-page .section .itembox{flex-wrap:wrap}.mv-brand-page .section .itembox .item{width:233px;height:80px;margin-bottom:15px;transition:all .5s;margin-right:15px}.mv-brand-page .section .itembox .item:nth-child(5n){margin-right:0px}.mv-brand-page .section .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-brand-page .section .itembox .item img{width:233px;height:80px;object-fit:contain;transform:scale(.8)}
\ No newline at end of file
import { useEffect, useState } from 'react';
import useRequest from '../../hooks/useRequest';
import './index.min.css'
import { Link } from 'react-router-dom';
import type { brandMapResponseType, brandItenType } from './types';
const BrandMap = () => {
const {request:brandMapRequest} = useRequest<brandMapResponseType>({manual:true})
const [more_brand_list,set_more_brand_list]=useState<Array<brandItenType>>([])
const [popular_brand_list,set_popular_brand_list]=useState<Array<brandItenType>>([])
useEffect(()=>{
if(sessionStorage.getItem('BRANDMAP_PAGE_DATAS')){
set_more_brand_list(JSON.parse(sessionStorage.getItem('BRANDMAP_PAGE_DATAS')!).data.more_brand_list)
set_popular_brand_list(JSON.parse(sessionStorage.getItem('BRANDMAP_PAGE_DATAS')!).data.popular_brand_list)
return
}
brandMapRequest({url:'/api/brand/getBrandList'}).then(res=>{
if(res?.code===0){
set_more_brand_list(res.data.more_brand_list)
set_popular_brand_list(res.data.popular_brand_list)
sessionStorage.setItem('BRANDMAP_PAGE_DATAS',JSON.stringify(res))
}
})
},[brandMapRequest])
return (
<>
<div className='mv-brand-page'>
<div className='section w1226'>
<div className='title'>
热门品牌
<img src={require('../../images/Popular.png')} alt="" />
</div>
<div className='itembox row '>
{
more_brand_list.map((item, index) => {
return (
<Link to={`/brand/${item.goods_brand_id}`} className='item' key={index + String(item.goods_brand_id)}>
<img src={item.brand_logo} alt={item.brand_name} />
</Link>
)
})
}
</div>
</div>
<div className='section w1226'>
<div className='title'>
更多品牌
<img src={require('../../images/More.png')} alt="" />
</div>
<div className='itembox row '>
{
popular_brand_list.map((item, index) => {
return (
<Link to={`/brand/${item.goods_brand_id}`} className='item' key={index + String(item.goods_brand_id)}>
<img src={item.brand_logo} alt={item.brand_name} />
</Link>
)
})
}
</div>
</div>
</div>
</>
)
}
export default BrandMap
\ No newline at end of file
export type brandMapResponseType = {
code: number|string,
data: {
more_brand_list:Array<brandItenType>,
popular_brand_list:Array<brandItenType>
},
msg:string
}
export type brandItenType={
goods_brand_id:number|string,
brand_logo:string,
brand_name:string
}
.mv-category-page{
padding-bottom: 54px;
.categoryHead{
min-height:245px;
background: #fff;
padding:30px 50px;
h2{
font-weight: bold;
font-size: 22px;
color: #000000;
line-height: 29px;
text-align: center;
margin-bottom: 20px;
}
.textBf{
font-size: 14px;
color: #000000;
line-height: 25px;
height: 100px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.brandbox{
span{
font-weight: bold;
font-size: 14px;
color: #000000;
line-height: 20px;
width:80px;
flex-shrink: 0;
}
.itembox{
flex-wrap: wrap;
.item{
height:20px;
line-height: 20px;
font-size: 14px;
color: #000000;
margin-right: 40px;
margin-bottom: 15px;
}
}
}
}
.databox{
.data-group-supplier{
padding-bottom: 20px;
background: #fff;
min-height: 400px;
.sortbixjk{
padding:0 27px;
padding-top: 25px;
}
}
}
}
\ No newline at end of file
.mv-category-page{padding-bottom:54px}.mv-category-page .categoryHead{min-height:245px;background:#fff;padding:30px 50px}.mv-category-page .categoryHead h2{font-weight:bold;font-size:22px;color:#000000;line-height:29px;text-align:center;margin-bottom:20px}.mv-category-page .categoryHead .textBf{font-size:14px;color:#000000;line-height:25px;height:100px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.mv-category-page .categoryHead .brandbox span{font-weight:bold;font-size:14px;color:#000000;line-height:20px;width:80px;flex-shrink:0}.mv-category-page .categoryHead .brandbox .itembox{flex-wrap:wrap}.mv-category-page .categoryHead .brandbox .itembox .item{height:20px;line-height:20px;font-size:14px;color:#000000;margin-right:40px;margin-bottom:15px}.mv-category-page .databox .data-group-supplier{padding-bottom:20px;background:#fff;min-height:400px}.mv-category-page .databox .data-group-supplier .sortbixjk{padding:0 27px;padding-top:25px}
\ No newline at end of file
import './index.min.css'
import BreadNav from '../../components/BreadNav';
import ListSort from '../../components/ListSort';
import { useEffect, useRef, useState } from 'react';
import type { ListSortType } from '../../components/ListSort/types'
import type { dataListItemType } from '../../components/ListOneItem/types'
import type { classResponseType, requestDataType } from './types'
import ListOneItem from '../../components/ListOneItem';
import useRequest from '../../hooks/useRequest';
import { useParams } from 'react-router-dom';
import { Pagination } from 'antd';
import ListNoData from '../../components/ListNoData';
const Category = () => {
const params = useParams()
const [shouNoData, setShouNoData] = useState(false)
const [page, setPage] = useState(1)
const [total, setTotal] = useState(0)
const [dataList, setDataList] = useState<dataListItemType[]>([])
const [sortObj, setSortObj] = useState<ListSortType>({
sortType: 1,
isStock: false,
stockSort: '',
priceSort: ''
})
const { request: classInfoRequest } = useRequest<classResponseType>({ manual: true })
const shouldResetPage = useRef(false);
useEffect(() => {
shouldResetPage.current = true;
setPage(1);
}, [sortObj]);
useEffect(() => {
if(shouldResetPage.current&&page!==1){
return
}
shouldResetPage.current = false;
let obj_: requestDataType = { page_size: 10, page: page, class_id1: params.class_id1, class_id2: (params.class_id2 || '') }
if (sortObj.isStock) {
obj_['stock/gt'] = 0
}
if (sortObj.sortType === 2) {
obj_['stock/sort'] = sortObj.stockSort === 'top' ? 'asc' : 'desc'
}
if (sortObj.sortType === 3) {
obj_['single_price/sort'] = sortObj.priceSort === 'top' ? 'asc' : 'desc'
}
classInfoRequest({
url: '/api/search/searchByClass',
method: 'post',
data: obj_,
}).then(res => {
if (res?.code === 0) {
setTotal(Number(res.data?.total))
setDataList(res.data?.lists || [])
if (res.data?.lists.length > 0) {
setShouNoData(false)
} else {
setShouNoData(true)
}
} else {
setShouNoData(true)
}
})
}, [classInfoRequest, params.class_id2, params.class_id1, page,sortObj])
const onChange = (page: number) => {
setPage(page)
}
return (
<>
<BreadNav><strong>分类搜索结果</strong></BreadNav>
<div className='mv-category-page w1226' >
{/* <div className='categoryHead boxsiz'>
<h2>陶瓷电容</h2>
<div className='textBf'>
Lorem ipsum dolor sit amet, ci, sed rhoncus pronin sapien nunc accuan eget.
</div>
<div className='brandbox row '>
<span>品牌:</span>
<div className='itembox row'>
<div className='item'>ON</div>
<div className='item'>NPX</div>
</div>
</div>
</div> */}
<div className='databox w1226'>
<div className='data-group-supplier'>
<div className='sortbixjk'>
<ListSort sortObj={sortObj} setSortObj={setSortObj} />
</div>
{
dataList.map(item => {
return (
<ListOneItem key={item.goods_id} {...item} />
)
})
}
{shouNoData ? <ListNoData /> : ''}
</div>
<Pagination style={{ 'marginTop': '30px' }} current={page} hideOnSinglePage={true} onChange={onChange} total={total} pageSize={10} showSizeChanger={false} />
</div>
</div>
</>
)
}
export default Category
\ No newline at end of file
import type { dataListItemType } from '../../components/ListOneItem/types'
export type classResponseType = {
code: number|string,
data: {
lists:Array<dataListItemType>,
total:number|string
},
msg:string
}
export type requestDataType={
page_size:number,
page:number,
class_id1:string|undefined,
class_id2?:string|undefined,
'stock/gt'?:number|string,
'stock/sort'?:'asc'|'desc',
'single_price/sort'?:'asc'|'desc'
}
.mv-class-page{
margin-bottom: 30px;
min-height: 520px;
h1{
font-weight: bold;
font-size: 20px;
color: #313131;
line-height: 26px;
padding:30px 0px;
}
.itembox{
margin-bottom: 5px;
background: #fff;
padding:32px 28px;
.itemtitle{
font-weight: bold;
font-size: 16px;
color: #000000;
line-height: 35px;
height:35px;
&:hover{
color:#FF9A00;
}
}
.itemcons{
flex-wrap: wrap;
}
.itemlink{
font-size: 14px;
color: #000000;
margin-right: 20px;
margin-top: 15px;
&:hover{
color:#FF9A00;
}
}
}
}
\ No newline at end of file
.mv-class-page{margin-bottom:30px;min-height:520px}.mv-class-page h1{font-weight:bold;font-size:20px;color:#313131;line-height:26px;padding:30px 0px}.mv-class-page .itembox{margin-bottom:5px;background:#fff;padding:32px 28px}.mv-class-page .itembox .itemtitle{font-weight:bold;font-size:16px;color:#000000;line-height:35px;height:35px}.mv-class-page .itembox .itemtitle:hover{color:#FF9A00}.mv-class-page .itembox .itemcons{flex-wrap:wrap}.mv-class-page .itembox .itemlink{font-size:14px;color:#000000;margin-right:20px;margin-top:15px}.mv-class-page .itembox .itemlink:hover{color:#FF9A00}
\ No newline at end of file
import { useEffect, useState } from 'react';
import useRequest from '../../hooks/useRequest';
import './index.min.css'
import { Link } from 'react-router-dom';
import type { classMapResponseType ,classItemType} from './types';
const ClassMap = () => {
const [list,setList]=useState<classItemType[]>([])
const {request:classmapRequest} = useRequest<classMapResponseType>({manual:true})
useEffect(()=>{
if(sessionStorage.getItem('CLASSMAP_PAGE_DATAS')){
setList(JSON.parse(sessionStorage.getItem('CLASSMAP_PAGE_DATAS')!).data)
return
}
classmapRequest({url:'/api/goods/getGoodsType'}).then(res=>{
if(res?.code===0){
setList(res.data)
sessionStorage.setItem('CLASSMAP_PAGE_DATAS',JSON.stringify(res))
}
})
},[classmapRequest])
return (
<>
<div className='mv-class-page'>
<div className='w1226'>
<h1>全部商品</h1>
{
list.map((item, index) => {
return (
<div className='itembox boxsiz' key={String(item.goods_type_id) + index}>
<Link to={`/category/${item.goods_type_id}`} className='itemtitle'>{item.goods_type_name}</Link>
<div className='itemcons flex'>
{
(item.child || []).map((itemChild, indexChild) => {
return (
<Link key={String(itemChild.goods_type_id) + indexChild} to={`/category/${item.goods_type_id}/${itemChild.goods_type_id}`} className='itemlink'>{itemChild.goods_type_name}</Link>
)
})
}
</div>
</div>
)
})
}
</div>
</div>
</>
)
}
export default ClassMap
\ No newline at end of file
export type classMapResponseType = {
code: number | string,
data:classItemType[],
msg: string
}
export type classItemType = {
"goods_type_id": string | number,
"goods_type_name": string,
child?:classItemType[]
}
\ No newline at end of file
.mv-contact-page{
.banner{
height:231px;
background: url(../../images/contactUsBanner.png) no-repeat top center;
}
.section{
background: #fff;
.cons{
padding: 0 143px;
padding-top: 111px;
padding-bottom: 119px;
.left{
width: 267px;
.title{
border-bottom: 1px solid #E7E7E7;
font-weight: bold;
font-size: 20px;
color: #313131;
span{
display: inline-block;
position: relative;
border-bottom: 3px solid #00C69F;
padding-bottom: 22px;
top:2px;
}
}
.lxbox{
padding-top: 30px;
margin-bottom: 25px;
span{
width:44px;
height:44px;
border:1px solid #00C69F;
i{
color:#00C69F;
font-size: 40px;
}
margin-right: 33px;
}
.rxs{
font-size: 16px;
color: #888888;
p{
color:#000000;
font-weight: bold;
margin-top: 7px;
}
}
}
}
img{
width: 296px;
height: 245px;
position: relative;
top:58px;
}
}
}
}
\ No newline at end of file
.mv-contact-page .banner{height:231px;background:url(../../images/contactUsBanner.png) no-repeat top center}.mv-contact-page .section{background:#fff}.mv-contact-page .section .cons{padding:0 143px;padding-top:111px;padding-bottom:119px}.mv-contact-page .section .cons .left{width:267px}.mv-contact-page .section .cons .left .title{border-bottom:1px solid #E7E7E7;font-weight:bold;font-size:20px;color:#313131}.mv-contact-page .section .cons .left .title span{display:inline-block;position:relative;border-bottom:3px solid #00C69F;padding-bottom:22px;top:2px}.mv-contact-page .section .cons .left .lxbox{padding-top:30px;margin-bottom:25px}.mv-contact-page .section .cons .left .lxbox span{width:44px;height:44px;border:1px solid #00C69F;margin-right:33px}.mv-contact-page .section .cons .left .lxbox span i{color:#00C69F;font-size:40px}.mv-contact-page .section .cons .left .lxbox .rxs{font-size:16px;color:#888888}.mv-contact-page .section .cons .left .lxbox .rxs p{color:#000000;font-weight:bold;margin-top:7px}.mv-contact-page .section .cons img{width:296px;height:245px;position:relative;top:58px}
\ No newline at end of file
import './index.min.css'
const Contact = () => {
return (
<>
<div className='mv-contact-page'>
<div className='banner'></div>
<div className='section'>
<div className='cons boxsiz w1226 row bothSide'>
<div className='left'>
<div className='title boxsiz'><span>联系我们</span></div>
<div className='lxbox flex'>
<span className='row verCenter rowCenter'><i className='icon iconfont icon-phone '></i></span>
<div className='rxs'>
热线<p>010-53680391</p>
</div>
</div>
<div className='lxbox flex'>
<span className='row verCenter rowCenter'><i className='icon iconfont icon-email '></i></span>
<div className='rxs'>
邮箱<p>sales@chiplinks.net</p>
</div>
</div>
</div>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</div>
</div>
</div>
</>
)
}
export default Contact
\ No newline at end of file
export type ResponseType = {
success: boolean,
data: Array<{
shopId: string,
shopName: string,
cartList: Array<{
productId: string,
imgUrl: string,
weight: string,
title: string,
price: number,
count: number
}>
}>
}
\ No newline at end of file
import QqIcon from "../../../components/QqIcon"
import type { DetailResponseType } from '../types'
import { CommonConfigDataContext } from "../../../contexts/CommonConfigDataContext";
import { useContext } from "react";
const DetailHead = (props: DetailResponseType) => {
const commonConfigData = useContext(CommonConfigDataContext);
const sku_info = props!.data?.sku_info!
return (
<>
<div className='detail-headers w1226 row bothSide boxsiz'>
<div className='l row'>
<img src={sku_info.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} className='goodsimg' alt="" />
<div className='info'>
<div className='box'>
<h1>{sku_info.sku_name}</h1>
<p> 品牌: {sku_info.brand_name}</p>
<p>商品类别:低压差线性稳压(LDO)</p>
<p>封装规格:{sku_info.encap}</p>
<p>描述:{sku_info.remark}</p>
</div>
<div className='handle row bothSide verCenter'>
<QqIcon />
<a href={commonConfigData.qqurl} rel="noreferrer" className='btn' target='_blank'>立即询价</a>
</div>
</div>
</div>
<div className='r boxsiz'>
<p className='row'>
<span className='items'>库存:{sku_info.stock} </span>
<span className='items'>交期:HK {sku_info.hk_delivery_time}</span>
</p>
<p className='row'>
<span className='items'> 批次:{sku_info.batch_sn}</span>
<span className='items'>交期:大陆 {sku_info.cn_delivery_time}</span>
</p>
<p className='row mb23'>
<span className='items'> 起订量: {sku_info.moq}</span>
<span className='items'>递增: {sku_info.multiple}</span>
</p>
{
sku_info.ladder_price.map((item,index) => {
return (
<p className='row' key={index}>
<span className='items'> {item.purchase}+</span>
<span className='items row'><span>¥ {item.price_cn||0}</span><span>$ {item.price_us||0}</span></span>
</p>
)
})
}
</div>
</div>
</>
)
}
export default DetailHead
\ No newline at end of file
import { Link } from "react-router-dom"
import type { DetailResponseType } from '../types'
const DetailSection = (props: DetailResponseType) => {
const attrs = props.data?.sku_info!.attrs || []
const other_sku_list = props!.data?.other_sku_list || []
const goods_details=props.data?.sku_info!.goods_details
return (
<>
<div className='detail-section w1226 row bothSide'>
<div className='secl boxsiz'>
<div className='lilist-box row'>
{
attrs.map((item, index) => {
return (
<p key={item.name + index}>
<b>{item.name}</b>
<span className='ple0'>
<span>{item.value}</span>
</span>
</p>
)
})
}
{attrs.length % 2 === 1 &&
<p >
<b></b>
<span className='ple0'>
<span></span>
</span>
</p>
}
</div>
<div className='row goods-mask goods-mask-two'>
<div>介绍:</div>
<h4 >{goods_details}</h4>
</div>
</div>
<div className="secr">
{
other_sku_list.map(item => {
return (
<Link to={`/detail/${item.sku_id}`} className='item boxsiz' key={item.sku_id}>
<img src={item.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" />
<div className='gos'>{item.sku_name}</div>
<div className='row bothSide'>
<div className='nam'>{item.brand_name}</div>
<div className='prs'>¥{item.single_price}</div>
</div>
</Link>
)
})
}
</div>
</div>
</>
)
}
export default DetailSection
\ No newline at end of file
.mv-detail-page{
margin-bottom: 47px;
min-height: 500px;
.detail-headers{
min-height: 304px;
padding:40px 35px;
background: #fff;
.goodsimg{
width:222px;
height:222px;
margin-right: 20px;
}
.info{
.box{
height:192px;
width: 420px;
h1{
font-weight: bold;
font-size: 18px;
color: #313131;
line-height: 24px;
margin-bottom: 12px;
}
p{
font-size: 12px;
color: #000000;
line-height: 25px;
max-height: 50px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
.handle{
.btn{
width: 80px;
height: 30px;
background: #FF9A00;
line-height: 30px;
text-align: center;
color:#fff;
}
}
}
.r{
width: 452px;
min-height: 222px;
background: #FFFCF8;
padding: 10px 50px;
.mb23{
margin-bottom: 24px;
}
.items{
width: 50%;
font-size: 12px;
color: #000000;
line-height: 25px;
span{
width:50%;
}
}
}
}
.detail-section{
margin-top: 20px;
.secl{
width: 978px;
min-height: 330px;
background: #FFFFFF;
padding:30px;
.lilist-box {
border-top: 1px solid #e5e5e5;
font-size : 14px;
color:#313131;
flex-shrink: 0;
flex-wrap: wrap;
border-left: 1px solid #e5e5e5;
p {
line-height : 36px;
width : 50%;
box-sizing: border-box;
height : 36px;
border-right : 1px solid #e5e5e5;
border-bottom : 1px solid #e5e5e5;
overflow : hidden;
text-overflow: ellipsis;
white-space : nowrap;
b {
width : 130px;
float : left;
display : block;
border-right : 1px solid #e5e5e5;
padding-left : 20px;
background : #F5F5F5;
margin-right : 1px;
overflow : hidden;
text-overflow: ellipsis;
white-space : nowrap;
}
span {
padding-left: 10px;
}
.ple0 span {
padding-left: 0px !important;
}
}
}
.goods-mask {
height: 60px;
line-height: 30px;
color: #313131;
font-size: 14px;
div {
width: 130px;
float: left;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
padding-left: 20px;
background: #F5F5F5;
height: 90px;
}
h4 {
background: #fff;
width: 745px;
height: 90px;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
}
}
.secr{
.item{
padding: 34px 18px;
width: 233px;
height: 330px;
transition: all 0.5s;
background: #fff;
display: block;
margin-bottom: 20px;
&:last-child{margin-bottom: 0px;}
&:hover{
box-shadow: 4px 6px 7px 1px rgba(154,151,149,0.18);
transform: translateY(-1px);
}
img{
width: 150px;
height: 109px;
display: block;
margin: 0 auto;
margin-bottom: 60px;
}
.gos{
font-size: 14px;
color: #000000;
line-height: 25px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height:50px;
margin-bottom: 30px;
}
.nam{
font-weight: normal;
font-size: 16px;
color: #000000;
line-height: 18px;
text-overflow: ellipsis;
overflow: hidden;
height:18px;
max-width: 110px;
}
.prs{
font-size: 16px;
color: #FF0006;
line-height: 18px;
}
}
}
}
.datanos{
background: #fff;
padding:80px 0;
img{
height:296px;
width:360px;
display: block;
margin:0 auto;
}
}
}
\ No newline at end of file
.mv-detail-page{margin-bottom:47px;min-height:500px}.mv-detail-page .detail-headers{min-height:304px;padding:40px 35px;background:#fff}.mv-detail-page .detail-headers .goodsimg{width:222px;height:222px;margin-right:20px}.mv-detail-page .detail-headers .info .box{height:192px;width:420px}.mv-detail-page .detail-headers .info .box h1{font-weight:bold;font-size:18px;color:#313131;line-height:24px;margin-bottom:12px}.mv-detail-page .detail-headers .info .box p{font-size:12px;color:#000000;line-height:25px;max-height:50px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mv-detail-page .detail-headers .info .handle .btn{width:80px;height:30px;background:#FF9A00;line-height:30px;text-align:center;color:#fff}.mv-detail-page .detail-headers .r{width:452px;min-height:222px;background:#FFFCF8;padding:10px 50px}.mv-detail-page .detail-headers .r .mb23{margin-bottom:24px}.mv-detail-page .detail-headers .r .items{width:50%;font-size:12px;color:#000000;line-height:25px}.mv-detail-page .detail-headers .r .items span{width:50%}.mv-detail-page .detail-section{margin-top:20px}.mv-detail-page .detail-section .secl{width:978px;min-height:330px;background:#FFFFFF;padding:30px}.mv-detail-page .detail-section .secl .lilist-box{border-top:1px solid #e5e5e5;font-size:14px;color:#313131;flex-shrink:0;flex-wrap:wrap;border-left:1px solid #e5e5e5}.mv-detail-page .detail-section .secl .lilist-box p{line-height:36px;width:50%;box-sizing:border-box;height:36px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p b{width:130px;float:left;display:block;border-right:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;margin-right:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p span{padding-left:10px}.mv-detail-page .detail-section .secl .lilist-box p .ple0 span{padding-left:0px !important}.mv-detail-page .detail-section .secl .goods-mask{height:60px;line-height:30px;color:#313131;font-size:14px}.mv-detail-page .detail-section .secl .goods-mask div{width:130px;float:left;border-right:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;height:90px}.mv-detail-page .detail-section .secl .goods-mask h4{background:#fff;width:745px;height:90px;padding-left:10px;padding-right:10px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.mv-detail-page .detail-section .secr .item{padding:34px 18px;width:233px;height:330px;transition:all .5s;background:#fff;display:block;margin-bottom:20px}.mv-detail-page .detail-section .secr .item:last-child{margin-bottom:0px}.mv-detail-page .detail-section .secr .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-detail-page .detail-section .secr .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-detail-page .detail-section .secr .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-detail-page .detail-section .secr .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-detail-page .detail-section .secr .item .prs{font-size:16px;color:#FF0006;line-height:18px}.mv-detail-page .datanos{background:#fff;padding:80px 0}.mv-detail-page .datanos img{height:296px;width:360px;display:block;margin:0 auto}
\ No newline at end of file
import './index.min.css'
import DetailHead from './components/DetailHead';
import DetailSection from './components/DetailSection';
import BreadNav from '../../components/BreadNav';
import { useNavigate, useParams } from 'react-router-dom';
import useRequest from '../../hooks/useRequest';
import { useEffect, useRef, useState } from 'react';
import type { DetailResponseType } from './types'
const GoodsDetail = () => {
const navigate = useNavigate()
const isReq=useRef(0)
const params = useParams()
const [detailData, setDetailData] = useState<DetailResponseType>()
const { request: detailRequest } = useRequest<DetailResponseType>({ manual: true })
useEffect(() => {
isReq.current=0
detailRequest({ url: '/api/goodsSku/getGoodsSkuDetail', params: { sku_id: params.sku_id } }).then(res => {
if (res?.code === 0) {
setDetailData(res)
// if( res?.data?.sku_info===null){
// navigate('/404')
// }
} else {
// navigate('/404')
}
isReq.current=1
})
}, [detailRequest, params.sku_id, navigate])
return (
<>
<div className="mv-detail-page">
{
detailData && detailData.data?.sku_info ?
<>
<BreadNav > <strong>{detailData.data?.sku_info?.sku_name}</strong></BreadNav>
<DetailHead {...detailData} />
<DetailSection {...detailData} />
</>
:
<>
{
isReq.current===1&&
<>
<BreadNav > <strong>找不到型号数据</strong></BreadNav>
<div className='datanos w1226'>
<img src={require('../../images/p404.png')} alt="" />
</div>
</>
}
</>
}
</div>
</>
)
}
export default GoodsDetail
\ No newline at end of file
export type DetailResponseType = {
code: number|string,
data: {
sku_info:skuInfoResponseType|null,
other_sku_list:Array<{
sku_name:string,
sku_id:string|number,
brand_name:string,
goods_images:string,
single_price:string
}>
}|null,
msg:string
}
export type skuInfoResponseType = {
sku_name:string,
brand_name?:string,
goods_images:string,
encap:string,
batch_sn:string,
remark:string,
goods_type_name:string,
moq:number,
multiple:number,
stock:number,
cn_delivery_time:string,
hk_delivery_time:string,
goods_details:string;
attrs:Array<{name:string;value:string}>;
ladder_price:Array<{
price_cn:number,
price_us:number,
purchase:number
}>
}
\ No newline at end of file
import { Carousel } from 'antd';
import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
import { memo } from 'react';
const HomeBanner=memo(function HomeBanner(){
const bannerList = [
{
title: '图片1',
url: '/',
image: 'https://img.ichunt.com/test/images/cms/202405/30/3b8eeac7cba38f1361586f25b0f95a6b.jpg',
},
{
title: '图片2',
url: '/',
image: 'https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg',
},
]
return (
<>
<div className='banner-box w1226 boxsiz'>
<div className='swipers'>
<StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
<Carousel >
{
bannerList.map((item, index) => {
return (
<a href={item.url} key={index + item.title}>
<img src={item.image} alt={item.title} loading="lazy"/>
</a>
)
})
}
</Carousel>
</StyleProvider>
</div>
</div>
</>
)
})
export default HomeBanner
\ No newline at end of file
import { Link } from "react-router-dom"
import type { ResponseTypeHome } from '../types';
const HomeFloor1 = (props: ResponseTypeHome) => {
const on_sale_list = props!.data?.on_sale_list || []
return (
<>
<div className='w1226 floor1 bothSide'>
<div className="row bothSide cons">
{
on_sale_list.map(item => {
return (
<Link to={`/detail/${item.sku_id}`} key={item.sku_id} className='item boxsiz row bothSide'>
<img src={item.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" />
<div className='rt boxsiz '>
<div className='gos'>{item.sku_name}</div>
<div className='nam'>{item.brand_name}</div>
<div className='prs'>¥{item.single_price}</div>
</div>
</Link>
)
})
}
</div>
<a href='/' className='floor1ad'>
<img src="https://img.ichunt.com/test/images/cms/202405/30/a263b85bf297ae7d85f68a01b5db320d.jpg" alt="" />
</a>
</div>
</>
)
}
export default HomeFloor1
\ No newline at end of file
import { Link } from "react-router-dom"
import type { ResponseTypeHome } from '../types';
const HomeFloor2 = (props: ResponseTypeHome) => {
const recommend_goods_list = props!.data?.recommend_goods_list || []
return (
<>
<div className='w1226 floor2 boxsiz'>
<div className="title row bothSide verCenter">
<span>力推型号</span>
{/* <Link to='/' className="more">更多<i className="icon iconfont icon-xiangyou1"></i></Link> */}
</div>
<div className='boxsiz itembox row bothSide'>
{
recommend_goods_list.map(item => {
return (
<Link to={`/detail/${item.sku_id}`} className='item boxsiz' key={item.sku_id}>
<img src={item.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" />
<div className='gos'>{item.sku_name}</div>
<div className='row bothSide'>
<div className='nam'>{item.brand_name}</div>
<div className='prs'>¥{item.single_price}</div>
</div>
</Link>
)
})
}
</div>
</div>
</>
)
}
export default HomeFloor2
\ No newline at end of file
import { Link } from "react-router-dom"
import type { ResponseTypeHome } from '../types';
const HomeFloor3 = (props: ResponseTypeHome) => {
const recommend_brand_list = props!.data?.recommend_brand_list || []
return (
<>
<div className='w1226 floor3 boxsiz'>
<div className="title row bothSide verCenter">
<span>推荐品牌</span>
<Link to='/brandMap' className="more">更多<i className="icon iconfont icon-xiangyou1"></i></Link>
</div>
<div className='boxsiz itembox row bothSide'>
{
recommend_brand_list.map(item => {
return (
<Link to={`/brand/${item.goods_brand_id}`} className='item' key={item.goods_brand_id}>
<img src={item.brand_logo} alt="" />
</Link>
)
})
}
</div>
</div>
</>
)
}
export default HomeFloor3
\ No newline at end of file
.mv-home-page{
.banner-box{
padding-left: 234px;
.swipers{
height:460px;
background: #ccc;
img{
height:460px;
width:992px;
}
.slick-dots{
justify-content: end;
bottom:17px;
right:10px;
left:auto;
li{
width: 6px;
height: 6px;
border: 1px solid #FFFFFF;
border-radius: 6px;
&.slick-active,&:hover{
background: #FFFFFF;
}
}
}
}
}
.floor1{
margin-top: 20px;
.cons{
height:252px;
}
.item{
width: 398px;
height: 252px;
background: linear-gradient( 155deg, #F6F6F6 0%, #E9F6FC 100%);
border: 1px solid #EDEFEF;
cursor: pointer;
transition: all 0.5s;
&:hover{
box-shadow: 4px 6px 7px 1px rgba(154,151,149,0.18);
transform: translateY(-1px);
}
&:first-child{
background: linear-gradient( 155deg, #F6F6F6 0%, #FCF5E9 100%);
}
&:last-child{
background: linear-gradient( 147deg, #F6F6F6 0%, #FCE9E9 100%);
}
padding:35px 20px;
img{
width:182px;
height:182px;
}
.rt{
width:158px;
height:182px;
padding:20px 0;
.gos{
font-size: 14px;
color: #000000;
line-height: 25px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height:50px;
margin-bottom: 40px;
}
.nam{
font-weight: normal;
font-size: 16px;
color: #000000;
line-height: 18px;
text-overflow: ellipsis;
overflow: hidden;
height:18px;
}
.prs{
font-size: 16px;
color: #FF0006;
line-height: 18px;
margin-top: 12px;
}
}
}
.floor1ad{
display: block;
height: 118px;
margin-top: 20px;
img{
width:1226px;
height: 118px;
}
}
}
.floor2{
margin-top: 50px;
.title{
margin-bottom: 30px;
span{
font-size: 24px;
color: #000000;
line-height: 31px;
}
.more{
font-size: 16px;
color: #888888;
&:hover{
color:#FF9A00;
}
}
}
.itembox{
flex-wrap: wrap;
.item{
padding: 34px 18px;
width: 233px;
height: 330px;
background: #FFFFFF;
transition: all 0.5s;
&:hover{
box-shadow: 4px 6px 7px 1px rgba(154,151,149,0.18);
transform: translateY(-1px);
}
img{
width: 150px;
height: 109px;
display: block;
margin: 0 auto;
margin-bottom: 60px;
}
.gos{
font-size: 14px;
color: #000000;
line-height: 25px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height:50px;
margin-bottom: 30px;
}
.nam{
font-weight: normal;
font-size: 16px;
color: #000000;
line-height: 18px;
text-overflow: ellipsis;
overflow: hidden;
height:18px;
max-width: 110px;
}
.prs{
font-size: 16px;
color: #FF0006;
line-height: 18px;
}
}
}
}
.floor3{
margin-top: 50px;
margin-bottom: 65px;
.title{
margin-bottom: 30px;
span{
font-size: 24px;
color: #000000;
line-height: 31px;
}
.more{
font-size: 16px;
color: #888888;
&:hover{
color:#FF9A00;
}
}
}
.itembox{
flex-wrap: wrap;
.item{
width: 233px;
height: 80px;
transition: all 0.5s;
margin-bottom: 15px;
&:hover{
box-shadow: 4px 6px 7px 1px rgba(154,151,149,0.18);
transform: translateY(-1px);
}
img{
width: 233px;
height: 80px;
object-fit: contain;
}
}
}
}
}
.mv-home-page .banner-box{padding-left:234px}.mv-home-page .banner-box .swipers{height:460px;background:#ccc}.mv-home-page .banner-box .swipers img{height:460px;width:992px}.mv-home-page .banner-box .swipers .slick-dots{justify-content:end;bottom:17px;right:10px;left:auto}.mv-home-page .banner-box .swipers .slick-dots li{width:6px;height:6px;border:1px solid #FFFFFF;border-radius:6px}.mv-home-page .banner-box .swipers .slick-dots li.slick-active,.mv-home-page .banner-box .swipers .slick-dots li:hover{background:#FFFFFF}.mv-home-page .floor1{margin-top:20px}.mv-home-page .floor1 .cons{height:252px}.mv-home-page .floor1 .item{width:398px;height:252px;background:linear-gradient(155deg, #F6F6F6 0%, #E9F6FC 100%);border:1px solid #EDEFEF;cursor:pointer;transition:all .5s;padding:35px 20px}.mv-home-page .floor1 .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor1 .item:first-child{background:linear-gradient(155deg, #F6F6F6 0%, #FCF5E9 100%)}.mv-home-page .floor1 .item:last-child{background:linear-gradient(147deg, #F6F6F6 0%, #FCE9E9 100%)}.mv-home-page .floor1 .item img{width:182px;height:182px}.mv-home-page .floor1 .item .rt{width:158px;height:182px;padding:20px 0}.mv-home-page .floor1 .item .rt .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:40px}.mv-home-page .floor1 .item .rt .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px}.mv-home-page .floor1 .item .rt .prs{font-size:16px;color:#FF0006;line-height:18px;margin-top:12px}.mv-home-page .floor1 .floor1ad{display:block;height:118px;margin-top:20px}.mv-home-page .floor1 .floor1ad img{width:1226px;height:118px}.mv-home-page .floor2{margin-top:50px}.mv-home-page .floor2 .title{margin-bottom:30px}.mv-home-page .floor2 .title span{font-size:24px;color:#000000;line-height:31px}.mv-home-page .floor2 .title .more{font-size:16px;color:#888888}.mv-home-page .floor2 .title .more:hover{color:#FF9A00}.mv-home-page .floor2 .itembox{flex-wrap:wrap}.mv-home-page .floor2 .itembox .item{padding:34px 18px;width:233px;height:330px;background:#FFFFFF;transition:all .5s}.mv-home-page .floor2 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor2 .itembox .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-home-page .floor2 .itembox .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-home-page .floor2 .itembox .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-home-page .floor2 .itembox .item .prs{font-size:16px;color:#FF0006;line-height:18px}.mv-home-page .floor3{margin-top:50px;margin-bottom:65px}.mv-home-page .floor3 .title{margin-bottom:30px}.mv-home-page .floor3 .title span{font-size:24px;color:#000000;line-height:31px}.mv-home-page .floor3 .title .more{font-size:16px;color:#888888}.mv-home-page .floor3 .title .more:hover{color:#FF9A00}.mv-home-page .floor3 .itembox{flex-wrap:wrap}.mv-home-page .floor3 .itembox .item{width:233px;height:80px;transition:all .5s;margin-bottom:15px}.mv-home-page .floor3 .itembox .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-home-page .floor3 .itembox .item img{width:233px;height:80px;object-fit:contain}
\ No newline at end of file
import './index.min.css'
import HomeBanner from './components/HomeBanner';
import HomeFloor1 from './components/HomeFloor1';
import HomeFloor2 from './components/HomeFloor2';
import HomeFloor3 from './components/HomeFloor3';
import useRequest from '../../hooks/useRequest';
import type { ResponseTypeHome } from './types';
import {useEffect, useState } from 'react';
const Home = () => {
const [result,setResult]=useState<ResponseTypeHome>(null)
const {request:homeRequest} = useRequest<ResponseTypeHome>({manual:true})
useEffect(()=>{
if(sessionStorage.getItem('HOME_PAGE_DATAS')){
setResult(JSON.parse(sessionStorage.getItem('HOME_PAGE_DATAS')!))
return
}
homeRequest({url:'/api/home/getHomepageList'}).then(res=>{
if(res?.code===0){
setResult(res)
sessionStorage.setItem('HOME_PAGE_DATAS',JSON.stringify(res))
}
})
},[homeRequest])
return (
<>
<div className='indexPage'>
<div className='mv-home-page'>
<HomeBanner />
<HomeFloor1 {...result!} />
<HomeFloor2 {...result!} />
<HomeFloor3 {...result!} />
</div>
</div>
</>
)
}
export default Home
\ No newline at end of file
export type ResponseTypeHome = {
code: number|string,
data: {
on_sale_list?:Array<onSaleListType>,
recommend_brand_list?:Array<recommendBrandListType>,
recommend_goods_list?:Array<recommendGoodsListType>
}|null,
msg:string
}|null
export type onSaleListType = {
goods_images:string,
sku_id:string|number,
sku_name:string,
single_price:string,
brand_name:string
}
export type recommendBrandListType = {
brand_logo:string,
brand_name:string,
goods_brand_id:string|number
}
export type recommendGoodsListType = {
goods_images:string,
brand_name:string,
sku_id:string|number,
single_price:string|number,
sku_name:string
}
\ No newline at end of file
const FilterDate = (prop: { time: string }) => {
const { time } = prop;
const dateObject = new Date(time);
const year: number = dateObject.getFullYear();
const month: number = dateObject.getMonth() + 1;
const day: number = dateObject.getDate();
return (
<>
<span>{day}/</span>
<p>{month}<br />{year}</p>
</>
)
}
export default FilterDate
\ No newline at end of file
.mv-notice-page {
margin-bottom: 54px;
h1 {
font-weight: bold;
font-size : 20px;
color : #000000;
line-height: 26px;
height : 26px;
padding : 35px 0;
}
.itembox {
.item {
margin-bottom: 20px;
background : #fff;
min-height : 224px;
padding:34px 40px;
.date {
height:156px;
padding-right: 68px;
span {
font-size : 32px;
color : #000000;
line-height: 42px;
}
p {
font-size : 14px;
color : #808080;
line-height: 19px;
margin-left: 10px;
}
}
.sxc{
padding-left: 40px;
min-height: 156px;
border-left: 1px solid #E7E7E7;
width:990px;
.titleo{
font-size: 16px;
color: #000000;
line-height: 21px;
height: 21px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.htmlbox{
margin:20px 0px;
height:75px;
padding:7px 0;
overflow: hidden;
img{max-width: 990px;}
font-size: 14px;
color: #888888;
line-height: 30px;
&.auto{
height:auto;
color:#000000;
}
}
.ckmore{
font-size: 14px;
color: #FF9A00;
line-height: 19px;
cursor: pointer;
}
}
}
}
}
\ No newline at end of file
.mv-notice-page{margin-bottom:54px}.mv-notice-page h1{font-weight:bold;font-size:20px;color:#000000;line-height:26px;height:26px;padding:35px 0}.mv-notice-page .itembox .item{margin-bottom:20px;background:#fff;min-height:224px;padding:34px 40px}.mv-notice-page .itembox .item .date{height:156px;padding-right:68px}.mv-notice-page .itembox .item .date span{font-size:32px;color:#000000;line-height:42px}.mv-notice-page .itembox .item .date p{font-size:14px;color:#808080;line-height:19px;margin-left:10px}.mv-notice-page .itembox .item .sxc{padding-left:40px;min-height:156px;border-left:1px solid #E7E7E7;width:990px}.mv-notice-page .itembox .item .sxc .titleo{font-size:16px;color:#000000;line-height:21px;height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-notice-page .itembox .item .sxc .htmlbox{margin:20px 0px;height:75px;padding:7px 0;overflow:hidden;font-size:14px;color:#888888;line-height:30px}.mv-notice-page .itembox .item .sxc .htmlbox img{max-width:990px}.mv-notice-page .itembox .item .sxc .htmlbox.auto{height:auto;color:#000000}.mv-notice-page .itembox .item .sxc .ckmore{font-size:14px;color:#FF9A00;line-height:19px;cursor:pointer}
\ No newline at end of file
import './index.min.css'
import { useEffect, useState } from 'react';
import FilterDate from './FilterDate';
import useRequest from '../../hooks/useRequest';
import type { NoticeResponseType,listType } from './types'
import { Pagination } from 'antd';
const Notice = () => {
const [ntList, setNtList] = useState<listType>([])
const [page,setPage]=useState(1)
const [total,setTotal]=useState(0)
const { request:noticeRequest} = useRequest<NoticeResponseType>({manual:true})
useEffect(() => {
noticeRequest({url:'/api/article/articleList',params:{page:page,limit:10}}).then(res=>{
if(res?.code===0){
const list_=res.data.list||[]
list_.forEach(item=>{
item.isAuto=false
})
setTotal(res.data?.total)
setNtList(list_)
}
})
}, [noticeRequest,page])
const changeStatus=(article_id:number)=>{
const newList=[...ntList]
newList.forEach((item)=>{
if(item.article_id===article_id){
item.isAuto=!item.isAuto
}
})
setNtList(newList)
}
const onChange=(page:number)=>{
setPage(page)
}
return (
<>
<div className='mv-notice-page'>
<h1 className='w1226'>公告</h1>
<div className='itembox w1226'>
{
ntList.map((item, index) => {
return (
<div className='item row boxsiz' key={index+item.article_id}>
<div className='date row verCenter'>
<FilterDate time={item.create_time_cn}/>
</div>
<div className='sxc boxsiz'>
<div className='titleo'>{item.article_title}</div>
<div className={item.isAuto?'htmlbox boxsiz auto':'htmlbox boxsiz'} dangerouslySetInnerHTML={{__html: item.article_desc}}></div>
<div className='ckmore' onClick={()=>{changeStatus(item.article_id)}}>{item.isAuto?'收起':'查看详情'}</div>
</div>
</div>
)
})
}
<Pagination current={page} hideOnSinglePage={true} onChange={onChange} total={total} pageSize={10} showSizeChanger={false}/>
</div>
</div>
</>
)
}
export default Notice
\ No newline at end of file
export type NoticeResponseType = {
code: number,
data: {list:listType,total:number},
msg:string
}
export type listType = Array<{
article_desc: string,
article_title: string,
article_id: number,
cat_id:number
isAuto?: boolean,
create_time_cn:string
}>
.page-404{
background: #fff;
padding:80px 0;
img{
height:296px;
width:360px;
display: block;
margin:0 auto;
}
}
\ No newline at end of file
.page-404{background:#fff;padding:80px 0}.page-404 img{height:296px;width:360px;display:block;margin:0 auto}
\ No newline at end of file
import './index.min.css'
import BreadNav from '../../components/BreadNav';
const Page404 = () => {
return (
<>
<BreadNav><strong>404</strong></BreadNav>
<div className="page-404">
<img src={require('../../images/p404.png')} alt="" />
</div>
</>
)
}
export default Page404
\ No newline at end of file
export type ResponseType = {
success: boolean,
data: Array<{
shopId: string,
shopName: string,
cartList: Array<{
productId: string,
imgUrl: string,
weight: string,
title: string,
price: number,
count: number
}>
}>
}
\ No newline at end of file
.mv-search-page{
margin-bottom: 70px;
.shift-box{
padding:24px 30px;
background: #fff;
padding-bottom: 6px;
.shift-group{
border-bottom: 1px solid #E7E7E7;
margin-bottom: 18px;
span{
font-weight: bold;
font-size: 12px;
color: #888888;
padding-top: 2px;
}
&:last-child{border-bottom: 0px;margin-bottom: 0px;}
.item-box{
width:1000px;
flex-wrap: wrap;
min-height:40px;
&.overflowheight{
height:40px;
overflow: hidden;
}
.item{
height: 22px;
border: 1px solid rgba(0,0,0,0);
line-height: 20px;
box-sizing: border-box;
margin-left: 45px;
margin-bottom: 18px;
font-size: 12px;
color:#000;
cursor: pointer;
text-align: center;
padding:0 15px;
&.act{
background: #FFFBF5;
border: 1px solid #FF9A00;
}
}
}
.shitrankbox{
width:130px;
justify-content: flex-end;
}
.shitrank{
margin-left: 5px;
height: 22px;
width:58px;
border: 1px solid #B0B0B0;
box-sizing: border-box;
color:#919191;
font-size: 12px;
cursor: pointer;
&.shows{
display: flex;
}
&.hides{
display: none;
}
&:first-child{margin-left: 0px;}
i{
color:#919191;
font-size: 12px;
}
}
}
}
.databox{
padding-top: 24px;
min-height: 290px;
.data-group-supplier{
border: 1px solid #EDEFEF;
margin-bottom: 30px;
.search-list-datas{
.list-group-one-item:first-child{
.cons{
border-top: 0px;
}
}
}
.data-list-title{
padding:0 33px;
height:50px;
line-height: 50px;
font-size: 16px;
color: #000000;
background: #f6f6f6;
}
.data-list-more{
height:48px;
line-height: 48px;
color:#000;
font-size: 12px;
text-align: center;
background: #fff;
b{color:#FF9A00;cursor: pointer;}
}
}
}
}
\ No newline at end of file
.mv-search-page{margin-bottom:70px}.mv-search-page .shift-box{padding:24px 30px;background:#fff;padding-bottom:6px}.mv-search-page .shift-box .shift-group{border-bottom:1px solid #E7E7E7;margin-bottom:18px}.mv-search-page .shift-box .shift-group span{font-weight:bold;font-size:12px;color:#888888;padding-top:2px}.mv-search-page .shift-box .shift-group:last-child{border-bottom:0px;margin-bottom:0px}.mv-search-page .shift-box .shift-group .item-box{width:1000px;flex-wrap:wrap;min-height:40px}.mv-search-page .shift-box .shift-group .item-box.overflowheight{height:40px;overflow:hidden}.mv-search-page .shift-box .shift-group .item-box .item{height:22px;border:1px solid rgba(0,0,0,0);line-height:20px;box-sizing:border-box;margin-left:45px;margin-bottom:18px;font-size:12px;color:#000;cursor:pointer;text-align:center;padding:0 15px}.mv-search-page .shift-box .shift-group .item-box .item.act{background:#FFFBF5;border:1px solid #FF9A00}.mv-search-page .shift-box .shift-group .shitrankbox{width:130px;justify-content:flex-end}.mv-search-page .shift-box .shift-group .shitrank{margin-left:5px;height:22px;width:58px;border:1px solid #B0B0B0;box-sizing:border-box;color:#919191;font-size:12px;cursor:pointer}.mv-search-page .shift-box .shift-group .shitrank.shows{display:flex}.mv-search-page .shift-box .shift-group .shitrank.hides{display:none}.mv-search-page .shift-box .shift-group .shitrank:first-child{margin-left:0px}.mv-search-page .shift-box .shift-group .shitrank i{color:#919191;font-size:12px}.mv-search-page .databox{padding-top:24px;min-height:290px}.mv-search-page .databox .data-group-supplier{border:1px solid #EDEFEF;margin-bottom:30px}.mv-search-page .databox .data-group-supplier .search-list-datas .list-group-one-item:first-child .cons{border-top:0px}.mv-search-page .databox .data-group-supplier .data-list-title{padding:0 33px;height:50px;line-height:50px;font-size:16px;color:#000000;background:#f6f6f6}.mv-search-page .databox .data-group-supplier .data-list-more{height:48px;line-height:48px;color:#000;font-size:12px;text-align:center;background:#fff}.mv-search-page .databox .data-group-supplier .data-list-more b{color:#FF9A00;cursor:pointer}
\ No newline at end of file
import './index.min.css'
import { useEffect, useReducer, useRef, useState } from 'react';
import type { ListSortType } from '../../components/ListSort/types'
import type { dataListItemType } from '../../components/ListOneItem/types'
import BreadNav from '../../components/BreadNav';
import ListSort from '../../components/ListSort';
import ListOneItem from '../../components/ListOneItem';
import { useLocation } from 'react-router-dom';
import { brandsAndClasssReducer,supplierDataReducer } from './reducer';
import type { ResponseTypeSearch, supplierDataType } from './types'
import useRequest from '../../hooks/useRequest';
import ListNoData from '../../components/ListNoData';
const supplierIdS = ['', '24']
const Search = () => {
const requestCount = useRef(0)
const location = useLocation();
const params = new URLSearchParams(location.search);
const keyword = params.get('keyword');
const num = params.get('num');
const { request: getListRequest } = useRequest<ResponseTypeSearch>({ manual: true})
const initSupplierList = useRef<supplierDataType[]>([])//初始化数据
const [supplierList, dispatchSupplierList] = useReducer(supplierDataReducer,[])
useEffect(() => {
initSupplierList.current = []
requestCount.current = 0
supplierIdS.forEach(supplier_id => {
getListRequest({ url: '/api/search/goodsSearch', method: 'post', data: { keyword: keyword, num: num, supplier_id: supplier_id } }).then((res) => {
requestCount.current = requestCount.current + 1
if (res?.code === 0) {
initSupplierList.current = [...initSupplierList.current, ...(res.data || [])]
}
getInitData()
})
})
}, [getListRequest, keyword, num])
const getInitData = () => {
let datasg: dataListItemType[] = [];
initSupplierList.current.forEach(item => {
item.data.forEach(child => {
datasg.push(child)
})
})
dispatchBrands({ type: 'brandsInit', value: datasg })
dispatchclasss({ type: 'classsInit', value: datasg })
dispatchSupplierList({type:'init',value:JSON.parse(JSON.stringify(initSupplierList.current))})
if(requestCount.current>=supplierIdS.length){
}
}
const [sortObj, setSortObj] = useState<ListSortType>({
sortType: 1,
isStock: false,
stockSort: '',
priceSort: ''
})
const [brandsR, dispatchBrands] = useReducer(brandsAndClasssReducer, [])
const [classsR, dispatchclasss] = useReducer(brandsAndClasssReducer, [])
//品牌分类盒子 UI
const brandListRef = useRef<HTMLDivElement>(null);
const classListRef = useRef<HTMLDivElement>(null);
const [brandListAll, setBrandListAll] = useState(false)
const [classListAll, setClassListAll] = useState(false)
//品牌,分类,排序发生变化
useEffect(() => {
dispatchSupplierList({type:'change',value:JSON.parse(JSON.stringify(initSupplierList.current)),brandsR:brandsR,classsR:classsR,sortObj:sortObj})
}, [brandsR, classsR, sortObj])
const updateBrandAndClass = (type: number, id?: string) => {
if (type === 1) {
dispatchBrands({ type: 'brandsUpdate', value: id })
}
if (type === 2) {
dispatchclasss({ type: 'classsUpdate', value: id })
}
}
return (
<>
<BreadNav><strong>"{keyword}"的型号搜索结果</strong></BreadNav>
<div className='mv-search-page w1226' >
<div className='shift-box'>
<div className='shift-group row' >
<span>品牌:</span>
<div className={brandListAll ? 'item-box row' : 'item-box row overflowheight'} ref={brandListRef}>
{
brandsR.map(item => {
return (
<div key={item.id} onClick={() => { updateBrandAndClass(1, item.id) }} className={item.checked ? 'item act' : 'item'} >{item.value}</div>
)
})
}
</div>
<div className='row shitrankbox'>
<div className={brandsR.find(item => item.checked === true) ? 'more row verCenter rowCenter shitrank shows' : 'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(1) }}>清除条件</div>
<div className='more row verCenter rowCenter shitrank' onClick={() => { setBrandListAll(!brandListAll) }}>
{brandListAll ? (<>收起<i className='icon iconfont icon-xiangshang2'></i></>) : (<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</div>
</div>
</div>
<div className='shift-group row'>
<span>分类:</span>
<div className={classListAll ? 'item-box row' : 'item-box row overflowheight'} ref={classListRef}>
{
classsR.map(item => {
return (
<div onClick={() => { updateBrandAndClass(2, item.id) }} key={item.id} className={item.checked ? 'item act' : 'item'} >{item.value}</div>
)
})
}
</div>
<div className='row shitrankbox'>
<div className={classsR.find(item => item.checked === true) ? 'more row verCenter rowCenter shitrank shows' : 'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(2) }}>清除条件</div>
<div className='more row verCenter rowCenter shitrank' onClick={() => { setClassListAll(!classListAll) }}>
{classListAll ? (<>收起<i className='icon iconfont icon-xiangshang2'></i></>) : (<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</div>
</div>
</div>
</div>
<div className='databox'>
<ListSort sortObj={sortObj} setSortObj={setSortObj} />
{
supplierList.length>0?
supplierList.map((item, index) => {
return (
item.data.length>0&&
<div className='data-group-supplier' key={String(item.supplier_id) + index}>
<div className='data-list-title'>{item.supplier_name||'其他'}</div>
<div className='search-list-datas'>
{
item.data.map(child => {
return (
<ListOneItem key={child.goods_id} {...child} />
)
})
}
</div>
{/* <div className='data-list-more'>还有<b>32</b>个商品未显示,<b>点击加载更多</b></div> */}
</div>
)
})
:requestCount.current>=supplierIdS.length&&<ListNoData />
}
</div>
</div>
</>
)
}
export default Search
\ No newline at end of file
import type { BrandAndClassType, supplierDataType } from './types'
import type { ListSortType } from '../../components/ListSort/types'
export const brandsAndClasssReducer = (state: BrandAndClassType, action: any) => {
if (action.type === 'brandsInit' || action.type === 'classsInit') {
let newBrand: BrandAndClassType = []
const datasg = [...action.value]
datasg.forEach((item) => {
const id_ = action.type === 'brandsInit' ? String(item.brand_id) : String(item.class_id2)
const name_ = action.type === 'brandsInit' ? String(item.brand_name) : String(item.class_name)
newBrand = [...newBrand, { id: id_, value: name_, checked: false }]
})
const uniqueBrand = newBrand.reduce((acc: BrandAndClassType, current) => {
if (!acc.some(item => item.id === current.id)) {
acc.push(current);
}
return acc;
}, []);
return uniqueBrand
}
if (action.type === 'brandsUpdate' || action.type === 'classsUpdate') {
let newList = [...state]
if (!action.value) {
newList.forEach((item) => {
item.checked = false
})
} else {
const brandToUpdate = newList.find(item => item.id === action.value)
if (brandToUpdate) {
brandToUpdate.checked = !brandToUpdate.checked;
}
}
return newList
}
return state
}
export const supplierDataReducer = (state: Array<supplierDataType>, action: {type:string,value:Array<supplierDataType>,brandsR?:BrandAndClassType,classsR?:BrandAndClassType,sortObj?:ListSortType}) => {
switch (action.type) {
case 'init':
return [...action.value];
case 'change':
let initList=[...action.value]
const sorts_=action.sortObj
if(sorts_?.sortType===2){
initList.forEach(item=>{
item.data.sort((a, b) => {
const astock=sorts_?.stockSort!=='top'?(Number(a.stock)||0):(Number(b.stock)||0)
const bstock=sorts_?.stockSort!=='top'?(Number(b.stock)||0):(Number(a.stock)||0)
if (astock > bstock) {
return 1;
}
if (astock< bstock) {
return -1;
}
return 0;
})
})
}
if(sorts_?.sortType===3){
initList.forEach(item=>{
item.data.sort((a, b) => {
let aprice=0
if(a.ladder_price.length>0){
aprice=Number(a.ladder_price[0].price_cn)||0
}
let bprice=0
if(b.ladder_price.length>0){
bprice=Number(b.ladder_price[0].price_cn)||0
}
const aval=sorts_?.priceSort!=='top'?aprice:bprice
const bval=sorts_?.priceSort!=='top'?bprice:aprice
if (aval > bval) {
return 1;
}
if (aval< bval) {
return -1;
}
return 0;
})
})
}
if(sorts_?.isStock){
initList.forEach(item=>{
const data_=item.data.filter(itemChild=>
Number(itemChild.stock)>0
)
item.data=data_
})
}
let checkBrand=action.brandsR?.filter(item => item.checked).map(item => item.id)
let checkClass=action.classsR?.filter(item => item.checked).map(item => item.id)
if(checkBrand?.length===0){
checkBrand=action.brandsR?.map(item => item.id)
}
if(checkClass?.length===0){
checkClass=action.classsR?.map(item => item.id)
}
initList.forEach(item=>{
const data_=item.data.filter(itemChild=>
checkBrand?.indexOf(String(itemChild.brand_id))!==-1&&
checkClass?.indexOf(String(itemChild.class_id2))!==-1
)
item.data=data_
})
initList=initList.filter(item=>item.data.length>0)
return initList;
default:
return state
}
}
import type { dataListItemType } from '../../components/ListOneItem/types'
export type ResponseTypeSearch = {
code: number | string,
data:Array<supplierDataType>,
msg: string
}
export type supplierDataType= {
supplier_name: string,
supplier_id:string|number,
data:Array<dataListItemType>,
msg: string
}
export type BrandAndClassType = Array<{
id: string,
value: string,
checked: boolean
}>
const Templates=()=>{
return (
<>
Templates
</>
)
}
export default Templates
\ No newline at end of file
export type ResponseType = {
success: boolean,
data: Array<{
shopId: string,
shopName: string,
cartList: Array<{
productId: string,
imgUrl: string,
weight: string,
title: string,
price: number,
count: number
}>
}>
}
\ No newline at end of file
/// <reference types="react-scripts" />
/*全局样式*/
@charset "utf-8";
html,
body,
div,
iframe,
em,
img,
p,
a,
strong,
b,
i,
form,
label,
span,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ol,
ul,
li,
applet,
object,
blockquote,
big,
cite,
code,
del,
dfn,
abbr,
acronym,
address,
pre,
time,
mark,
audio,
video,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
nav,
section,
menu,
button,
input,
textarea {
margin : 0;
padding : 0;
border : 0;
font-size : 100%;
font : inherit;
vertical-align: baseline;
font-weight : normal;
list-style : none;
outline : none;
resize: none;
}
table,
tbody,
tfoot,
thead,
tr,
th,
td {
margin : 0;
padding : 0;
font-size: 100%;
font : inherit;
}
a {
text-decoration: none;
&:hover{
color:#FF9A00;
}
}
table {
border-color: #ccc !important;
}
body,
html,
button,
input {
font-family: Arial, helvetica, PingFangSC-Regular, PingFang SC, "微软雅黑";
}
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #808080; /* 修改字体颜色 */
//font-size: 14px; /* 修改字体大小 */
}
.fw{font-weight: bold;}
.clr:after {
visibility: hidden;
display : block;
font-size : 0;
content : " ";
clear : both;
height : 0
}
.clr {
display : block;
min-height: 1%;
}
.clr {
clear: both
}
.clr:after {
content: " ";
display: table;
clear : both
}
.fl {
float: left;
}
.fr {
float: right;
}
.fw {
font-weight: bold;
}
.ta-c {
text-align: center;
}
.ta-r {
text-align: right;
}
.ta-l {
text-align: left;
}
.flex {
display: flex;
}
.column {
display : flex;
flex-direction: column;
}
.row {
display : flex;
flex-direction: row;
}
.boxsiz {
-webkit-box-sizing: border-box;
box-sizing : border-box;
}
/* 两侧对齐 */
.bothSide {
justify-content: space-between;
}
/* 平均分布 */
.avarage {
justify-content: space-around;
}
/* 水平居中 */
.rowCenter {
justify-content: center;
}
/* 垂直居中 */
.verCenter {
align-items: center;
}
/**公共UI样式**/
body,html{
background: #fafafa;
font-size: 14px;
color:#333;
}
.w1226{
width:1226px;
margin:0 auto;
}
.ant-pagination{
display: flex;
justify-content: end;
.ant-pagination-item{
padding:0 7px;
}
.ant-pagination-options{
height: 25px;
min-width: 25px;
min-height: 25px;
box-sizing: border-box;
.ant-pagination-options-quick-jumper{
height: 25px;
min-width: 25px;
min-height: 25px;
box-sizing: border-box;
line-height: 25px;
}
input{
height: 25px;
min-width: 25px;
min-height: 25px;
box-sizing: border-box;
border-radius: 1px;
box-sizing: border-box;
}
}
.ant-pagination-item,.ant-pagination-prev,.ant-pagination-next,.ant-pagination-jump-next,.ant-pagination-jump-prev{
display: block;
box-sizing: border-box;
height: 25px;
min-width: 25px;
min-height: 25px;
background: #FBFBFB;
border-radius: 2px;
border: 1px solid #E8E8E8;
text-align: center;
line-height: 25px;
color:#616161;
position: relative;
transition: all 0.5s;
border-radius: 1px;
font-size: 12px;
a,button,span{padding:0px!important;border-radius: 0px!important;}
button{line-height: 23px;}
&.ant-pagination-item-active,&:hover{
background-color:none;
background: linear-gradient(180deg, #FDFDFD 0%, #E2E2E2 100%)!important;
border: 1px solid #A1A1A1!important;
color:#313131;
a{
color:#313131;
background: none;
}
}
}
}
@charset "utf-8";html,body,div,iframe,em,img,p,a,strong,b,i,form,label,span,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,applet,object,blockquote,big,cite,code,del,dfn,abbr,acronym,address,pre,time,mark,audio,video,article,aside,canvas,details,embed,figure,figcaption,footer,header,nav,section,menu,button,input,textarea{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-weight:normal;list-style:none;outline:none;resize:none}table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;font-size:100%;font:inherit}a{text-decoration:none}a:hover{color:#FF9A00}table{border-color:#ccc !important}body,html,button,input{font-family:Arial,helvetica,PingFangSC-Regular,PingFang SC,"微软雅黑"}input::-webkit-input-placeholder{color:#808080}.fw{font-weight:bold}.clr:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.clr{display:block;min-height:1%}.clr{clear:both}.clr:after{content:" ";display:table;clear:both}.fl{float:left}.fr{float:right}.fw{font-weight:bold}.ta-c{text-align:center}.ta-r{text-align:right}.ta-l{text-align:left}.flex{display:flex}.column{display:flex;flex-direction:column}.row{display:flex;flex-direction:row}.boxsiz{-webkit-box-sizing:border-box;box-sizing:border-box}.bothSide{justify-content:space-between}.avarage{justify-content:space-around}.rowCenter{justify-content:center}.verCenter{align-items:center}body,html{background:#fafafa;font-size:14px;color:#333}.w1226{width:1226px;margin:0 auto}.ant-pagination{display:flex;justify-content:end}.ant-pagination .ant-pagination-item{padding:0 7px}.ant-pagination .ant-pagination-options{height:25px;min-width:25px;min-height:25px;box-sizing:border-box}.ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper{height:25px;min-width:25px;min-height:25px;box-sizing:border-box;line-height:25px}.ant-pagination .ant-pagination-options input{height:25px;min-width:25px;min-height:25px;border-radius:1px;box-sizing:border-box}.ant-pagination .ant-pagination-item,.ant-pagination .ant-pagination-prev,.ant-pagination .ant-pagination-next,.ant-pagination .ant-pagination-jump-next,.ant-pagination .ant-pagination-jump-prev{display:block;box-sizing:border-box;height:25px;min-width:25px;min-height:25px;background:#FBFBFB;border-radius:2px;border:1px solid #E8E8E8;text-align:center;line-height:25px;color:#616161;position:relative;transition:all .5s;border-radius:1px;font-size:12px}.ant-pagination .ant-pagination-item a,.ant-pagination .ant-pagination-prev a,.ant-pagination .ant-pagination-next a,.ant-pagination .ant-pagination-jump-next a,.ant-pagination .ant-pagination-jump-prev a,.ant-pagination .ant-pagination-item button,.ant-pagination .ant-pagination-prev button,.ant-pagination .ant-pagination-next button,.ant-pagination .ant-pagination-jump-next button,.ant-pagination .ant-pagination-jump-prev button,.ant-pagination .ant-pagination-item span,.ant-pagination .ant-pagination-prev span,.ant-pagination .ant-pagination-next span,.ant-pagination .ant-pagination-jump-next span,.ant-pagination .ant-pagination-jump-prev span{padding:0px!important;border-radius:0px!important}.ant-pagination .ant-pagination-item button,.ant-pagination .ant-pagination-prev button,.ant-pagination .ant-pagination-next button,.ant-pagination .ant-pagination-jump-next button,.ant-pagination .ant-pagination-jump-prev button{line-height:23px}.ant-pagination .ant-pagination-item.ant-pagination-item-active,.ant-pagination .ant-pagination-prev.ant-pagination-item-active,.ant-pagination .ant-pagination-next.ant-pagination-item-active,.ant-pagination .ant-pagination-jump-next.ant-pagination-item-active,.ant-pagination .ant-pagination-jump-prev.ant-pagination-item-active,.ant-pagination .ant-pagination-item:hover,.ant-pagination .ant-pagination-prev:hover,.ant-pagination .ant-pagination-next:hover,.ant-pagination .ant-pagination-jump-next:hover,.ant-pagination .ant-pagination-jump-prev:hover{background-color:none;background:linear-gradient(180deg, #FDFDFD 0%, #E2E2E2 100%) !important;border:1px solid #A1A1A1 !important;color:#313131}.ant-pagination .ant-pagination-item.ant-pagination-item-active a,.ant-pagination .ant-pagination-prev.ant-pagination-item-active a,.ant-pagination .ant-pagination-next.ant-pagination-item-active a,.ant-pagination .ant-pagination-jump-next.ant-pagination-item-active a,.ant-pagination .ant-pagination-jump-prev.ant-pagination-item-active a,.ant-pagination .ant-pagination-item:hover a,.ant-pagination .ant-pagination-prev:hover a,.ant-pagination .ant-pagination-next:hover a,.ant-pagination .ant-pagination-jump-next:hover a,.ant-pagination .ant-pagination-jump-prev:hover a{color:#313131;background:none}
\ No newline at end of file
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4599756" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe728;</span>
<div class="name">B-复选框</div>
<div class="code-name">&amp;#xe728;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe693;</span>
<div class="name">email</div>
<div class="code-name">&amp;#xe693;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe694;</span>
<div class="name">phone</div>
<div class="code-name">&amp;#xe694;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe637;</span>
<div class="name">三角形</div>
<div class="code-name">&amp;#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">sousuo</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe76e;</span>
<div class="name">向上2</div>
<div class="code-name">&amp;#xe76e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe772;</span>
<div class="name">向下2</div>
<div class="code-name">&amp;#xe772;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe775;</span>
<div class="name">向右1</div>
<div class="code-name">&amp;#xe775;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb15;</span>
<div class="name">向左</div>
<div class="code-name">&amp;#xeb15;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
<li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1719816191916') format('woff2'),
url('iconfont.woff?t=1719816191916') format('woff'),
url('iconfont.ttf?t=1719816191916') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-B-fuxuankuang"></span>
<div class="name">
B-复选框
</div>
<div class="code-name">.icon-B-fuxuankuang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-email"></span>
<div class="name">
email
</div>
<div class="code-name">.icon-email
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-phone"></span>
<div class="name">
phone
</div>
<div class="code-name">.icon-phone
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sanjiaoxing"></span>
<div class="name">
三角形
</div>
<div class="code-name">.icon-sanjiaoxing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-iconfontsousuo"></span>
<div class="name">
sousuo
</div>
<div class="code-name">.icon-iconfontsousuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangshang2"></span>
<div class="name">
向上2
</div>
<div class="code-name">.icon-xiangshang2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangxia2"></span>
<div class="name">
向下2
</div>
<div class="code-name">.icon-xiangxia2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangyou1"></span>
<div class="name">
向右1
</div>
<div class="code-name">.icon-xiangyou1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangzuo"></span>
<div class="name">
向左
</div>
<div class="code-name">.icon-xiangzuo
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-B-fuxuankuang"></use>
</svg>
<div class="name">B-复选框</div>
<div class="code-name">#icon-B-fuxuankuang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-email"></use>
</svg>
<div class="name">email</div>
<div class="code-name">#icon-email</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-phone"></use>
</svg>
<div class="name">phone</div>
<div class="code-name">#icon-phone</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sanjiaoxing"></use>
</svg>
<div class="name">三角形</div>
<div class="code-name">#icon-sanjiaoxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-iconfontsousuo"></use>
</svg>
<div class="name">sousuo</div>
<div class="code-name">#icon-iconfontsousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangshang2"></use>
</svg>
<div class="name">向上2</div>
<div class="code-name">#icon-xiangshang2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangxia2"></use>
</svg>
<div class="name">向下2</div>
<div class="code-name">#icon-xiangxia2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangyou1"></use>
</svg>
<div class="name">向右1</div>
<div class="code-name">#icon-xiangyou1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangzuo"></use>
</svg>
<div class="name">向左</div>
<div class="code-name">#icon-xiangzuo</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
@font-face {
font-family: "iconfont"; /* Project id 4599756 */
src: url('iconfont.woff2?t=1719816191916') format('woff2'),
url('iconfont.woff?t=1719816191916') format('woff'),
url('iconfont.ttf?t=1719816191916') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-B-fuxuankuang:before {
content: "\e728";
}
.icon-email:before {
content: "\e693";
}
.icon-phone:before {
content: "\e694";
}
.icon-sanjiaoxing:before {
content: "\e637";
}
.icon-iconfontsousuo:before {
content: "\e610";
}
.icon-xiangshang2:before {
content: "\e76e";
}
.icon-xiangxia2:before {
content: "\e772";
}
.icon-xiangyou1:before {
content: "\e775";
}
.icon-xiangzuo:before {
content: "\eb15";
}
window._iconfont_svg_string_4599756='<svg><symbol id="icon-B-fuxuankuang" viewBox="0 0 1024 1024"><path d="M850.6 63.9H173.7c-60.1 0-109.4 49.2-109.4 109.3v676.9c0 60.1 49.2 109.4 109.4 109.4h676.9c60.2 0 109.4-49.2 109.4-109.4V173.3c-0.1-60.1-49.3-109.4-109.4-109.4z m-49.4 278L469.6 764.5c-12.5 16-31.6 25.4-51.8 25.7h-1c-19.9 0-38.8-8.8-51.6-24.2L224.3 596.9c-23.8-28.5-19.9-70.8 8.6-94.6 28.5-23.8 70.8-19.9 94.6 8.6l87.7 105.3L695.5 259c22.9-29.3 65.2-34.2 94.3-11.4 29.2 22.9 34.3 65.2 11.4 94.3z" fill="#383838" ></path></symbol><symbol id="icon-email" viewBox="0 0 1024 1024"><path d="M314.181818 616.913455l130.536727-93.277091-130.536727-93.277091-7.633454-5.445818L279.272727 405.410909v236.357818l27.275637-19.479272 7.633454-5.399273z m209.454546-79.825455l209.454545-149.597091 4.375273-3.118545 25.623273-18.269091A34.909091 34.909091 0 0 0 733.090909 349.090909h-418.909091a34.909091 34.909091 0 0 0-28.416 14.615273L314.181818 387.490909l209.454546 149.620364z m48.872727 7.982545l-48.872727 34.909091-48.872728-34.909091-160.581818 114.711273-7.633454 6.283637-20.992 17.175272c6.283636 9.053091 16.779636 14.941091 28.625454 14.941091h418.909091c12.8 0 23.994182-6.865455 30.045091-17.128727L733.090909 659.781818l-160.581818-114.711273z m160.581818-114.711272L602.530909 523.636364l130.56 93.277091 34.909091 24.901818V405.457455l-34.909091 24.92509z" ></path></symbol><symbol id="icon-phone" viewBox="0 0 1024 1024"><path d="M727.994182 670.696727a30.347636 30.347636 0 0 1 0 42.845091l-21.410909 21.410909c-15.848727 15.848727-36.677818 25.483636-61.905455 28.695273-6.283636 0.768-12.567273 1.163636-18.874182 1.163636-18.385455 0-38.190545-3.118545-59.182545-9.285818-56.948364-16.756364-116.829091-54.481455-168.610909-106.263273-51.758545-51.781818-89.530182-111.662545-106.263273-168.610909-8.331636-28.392727-11.077818-54.621091-8.122182-78.033454 3.211636-25.250909 12.846545-46.08 28.672-61.905455l21.434182-21.410909a30.347636 30.347636 0 0 1 42.845091 0l94.301091 94.254546a30.347636 30.347636 0 0 1 0 42.868363l-21.434182 21.410909c-12.125091 12.125091-0.069818 51.386182 34.280727 85.713455 34.350545 34.327273 73.565091 46.429091 85.713455 34.280727l21.410909-21.410909a30.347636 30.347636 0 0 1 42.868364 0l94.277818 94.254546z m30.138182-338.315636a84.992 84.992 0 0 0-21.154909-26.949818c-18.222545-15.616-42.333091-24.203636-67.886546-24.203637-25.553455 0-49.664 8.587636-67.886545 24.203637a84.992 84.992 0 0 0-21.178182 26.949818 75.473455 75.473455 0 0 0 3.141818 73.099636c4.654545 7.656727 10.402909 14.545455 17.128727 20.433455a141.754182 141.754182 0 0 1-21.969454 14.429091 12.101818 12.101818 0 0 0 5.911272 22.690909c27.205818 0 50.315636-4.654545 67.258182-13.498182 5.818182 0.907636 11.706182 1.373091 17.594182 1.373091 25.553455 0 49.664-8.610909 67.886546-24.203636 9.053091-7.773091 16.151273-16.826182 21.178181-26.973091a75.543273 75.543273 0 0 0 0-67.351273z" ></path></symbol><symbol id="icon-sanjiaoxing" viewBox="0 0 1024 1024"><path d="M1024 512L0 1024V0z" ></path></symbol><symbol id="icon-iconfontsousuo" viewBox="0 0 1024 1024"><path d="M455.494979 805.069193c-194.888903 0-353.441893-158.552792-353.441893-353.434928 0-194.881113 158.55299-353.433905 353.441893-353.433905S808.944036 256.753152 808.944036 451.634265C808.944036 646.515378 650.383882 805.069193 455.494979 805.069193M455.494979 185.194516c-146.920627 0-266.44426 119.526018-266.44426 266.439749 0 146.914754 119.523633 266.440772 266.44426 266.440772s266.4504-119.526018 266.4504-266.440772C721.945379 304.720534 602.415606 185.194516 455.494979 185.194516" fill="#272636" ></path><path d="M868.304189 917.954991c-13.70566 0-27.402111-5.228061-37.85865-15.678043L645.790086 717.636039c-20.905916-20.906104-20.905916-54.804077 0-75.714274 20.914103-20.899964 54.806268-20.899964 75.718324 0l184.654429 184.640908c20.90694 20.906104 20.90694 54.804077 0 75.714274C895.705277 912.72693 882.008826 917.954991 868.304189 917.954991" fill="#272636" ></path></symbol><symbol id="icon-xiangshang2" viewBox="0 0 1024 1024"><path d="M887.328477 617.152318 533.951458 267.007553c-0.512619-0.512619-1.216181-0.672598-1.759763-1.152533-0.127295-0.127295-0.159978-0.319957-0.287273-0.447252-12.576374-12.416396-32.831716-12.352748-45.280796 0.192662L136.511544 618.944765c-12.447359 12.576374-12.352748 32.800753 0.192662 45.248112 6.239161 6.175514 14.399785 9.280473 22.527725 9.280473 8.224271 0 16.479505-3.168606 22.720387-9.471415L509.792985 333.185325l332.480043 329.407768c6.239161 6.175514 14.368821 9.280473 22.527725 9.280473 8.255235 0 16.479505-3.168606 22.720387-9.471415C899.968499 649.85674 899.872168 629.599677 887.328477 617.152318z" fill="#575B66" ></path></symbol><symbol id="icon-xiangxia2" viewBox="0 0 1024 1024"><path d="M890.335385 330.911222c-12.576374-12.416396-32.800753-12.352748-45.248112 0.192662L517.248327 661.951458 184.831931 332.512727c-12.576374-12.447359-32.800753-12.352748-45.280796 0.192662-12.447359 12.576374-12.352748 32.831716 0.192662 45.280796l353.311652 350.112082c0.543583 0.543583 1.247144 0.672598 1.792447 1.183497 0.127295 0.127295 0.159978 0.287273 0.287273 0.416288 6.239161 6.175514 14.399785 9.280473 22.527725 9.280473 8.224271 0 16.479505-3.168606 22.720387-9.471415l350.112082-353.311652C902.975407 363.615643 902.880796 343.360301 890.335385 330.911222z" fill="#575B66" ></path></symbol><symbol id="icon-xiangyou1" viewBox="0 0 1024 1024"><path d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z" fill="#575B66" ></path></symbol><symbol id="icon-xiangzuo" viewBox="0 0 1024 1024"><path d="M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z" fill="#444444" ></path></symbol></svg>',function(o){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,n,l,c,a,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!o.__iconfont__svg__cssinject__){o.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=o._iconfont_svg_string_4599756,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),i()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(l=i,c=o.document,a=!1,m(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,d())})}function d(){a||(a=!0,l())}function m(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}d()}}(window);
\ No newline at end of file
{
"id": "4599756",
"name": "木卫1.0",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "7193656",
"name": "B-复选框",
"font_class": "B-fuxuankuang",
"unicode": "e728",
"unicode_decimal": 59176
},
{
"icon_id": "40897190",
"name": "email",
"font_class": "email",
"unicode": "e693",
"unicode_decimal": 59027
},
{
"icon_id": "40897191",
"name": "phone",
"font_class": "phone",
"unicode": "e694",
"unicode_decimal": 59028
},
{
"icon_id": "39418529",
"name": "三角形",
"font_class": "sanjiaoxing",
"unicode": "e637",
"unicode_decimal": 58935
},
{
"icon_id": "552278",
"name": "sousuo",
"font_class": "iconfontsousuo",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "577395",
"name": "向上2",
"font_class": "xiangshang2",
"unicode": "e76e",
"unicode_decimal": 59246
},
{
"icon_id": "577399",
"name": "向下2",
"font_class": "xiangxia2",
"unicode": "e772",
"unicode_decimal": 59250
},
{
"icon_id": "577402",
"name": "向右1",
"font_class": "xiangyou1",
"unicode": "e775",
"unicode_decimal": 59253
},
{
"icon_id": "5387613",
"name": "向左",
"font_class": "xiangzuo",
"unicode": "eb15",
"unicode_decimal": 60181
}
]
}
No preview for this file type
No preview for this file type
No preview for this file type
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
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 sign in to comment