仿写《油漆模板》项目日志

无知小子.

于 2023-05-29 13:08:21 发布

阅读量436

点赞数

文章标签： react

本文链接：https://blog.csdn.net/admin6608/article/details/130926057

版权

利用React框架仿写《油漆模板》项目日志

文章目录

利用React框架仿写《油漆模板》项目日志

前序

原网站：

https://fkwhgtl02.jz.fkw.com/?previewDemo=true

在线预览项目地址：

http://39.101.72.168:6608/

在线预览本日志网页版：（加载时可能会比较慢,请耐心等待，毕竟我的云服务器带宽只有1M (＞﹏＜）

http://39.101.72.168:82/youQi/

项目源码分享地址：

链接：https://pan.baidu.com/s/1HlRU8G4sd6Q5JugnWwj07g
提取码：1ohs

linux服务器搭建：

http://39.101.72.168:83/environment/server/CentOS/

本项目利用react框架为基础开发，所用技术包括：Ant Design组件库、axios请求库、百度地图开放接口BMap、sass-CSS预处理器等技术，因本项目为纯静态前端项目，axios只进行了封装，并未使用。

此程序的每个页面都是由多个组件堆叠而成，所以在本日志中完成页面前将会先创建本页面所用到的组件。

第一天：

一、搭建项目

npx create-react-app you-qi

二、导入依赖

#导入AntD
npm add antd
#导入axios
npm install axios
#导入sass
npm install sass --save-dev
#导入react-bmapgl用于显示地图
npm install react-bmapgl --save
#导入router
npm install react-router-dom

导入地图依赖文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=14ZvFGaYcCZ5CumCQliNQTW83ZYCNwMi"></script>

三、配置依赖

I、axios封装

/*request.js*/
// 引入axios
import axios from "axios";

/**
 * 配置axios
 * @type {axios.AxiosInstance}
 */
const server = axios.create({
    baseURL: 'https://45.125.46.201:16698',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json',
    },
});

/**
 * 封装无token的get请求
 * @param url
 * @returns {Promise<unknown>}
 */
const get = (url) => {
    return new Promise((resolve, reject) => {
        server.get(url).then((r) => {
            resolve(r)
        }).catch((e) => {
            reject(e)
        });
    });
};

/**
 * 封装含有token的get请求
 * @param url
 * @param token
 * @returns {Promise<unknown>}
 */
const getToken = (url, token) => {
    return new Promise((resolve, reject) => {
        server.get(url, {
            headers: {Authorization: token}
        }).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};

/**
 * 封装post请求
 * @param url
 * @param token
 * @param data
 * @returns {Promise<unknown>}
 */
const post = (url, token, data) => {
    return new Promise((resolve, reject) => {
        server.post(url, data, {
            headers: {Authorization: token}
        }).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};

/**
 * 封装login请求
 * @param url
 * @param data
 * @returns {Promise<unknown>}
 */
const login = (url, data) => {
    return new Promise((resolve, reject) => {
        server.post(url, data).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};

/**
 * 封装put请求
 * @param url
 * @param token
 * @param data
 * @returns {Promise<unknown>}
 */
const put = (url, token, data) => {
    return new Promise((resolve, reject) => {
        server.put(url, data, {
            headers: {Authorization: token}
        }).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};


/**
 * 封装delete请求
 * @param url
 * @param token
 * @returns {Promise<unknown>}
 */
const del = (url, token) => {
    return new Promise((resolve, reject) => {
        server.delete(url, {
            headers: {Authorization: token}
        }).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};

// 将请求通过解构的方式抛出
export {get, getToken, post, login, put, del};

四、创建项目内的基础文件夹

pages：页面文件夹

components：组件文件夹

tools：工具文件夹，用来存储本项目中的数据文件

config：配置文件夹，用于存储项目依赖的配置文件

static：项目静态文件夹，用于存储项目的静态文件

router：网站路由配置文件夹

css：网站层叠样式表文件夹，用于存储层叠样式表

本项目的项目结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6DWWdlaW-1685336610404)(null)]

五、定义网页静态数据

在tools文件夹内创建datas.js文件用于存储静态数据，通过javaScript定义内部函数，进行抛出数据，以便后续使用

// 导航栏数据
export const getMenuList = () => {
    return [
        {
            name: "首页",
            href: "/",
            innerList: []
        },
        {
            name: "关于我们",
            href: "/about",
            innerList: [
                {
                    name: "公司简介",
                    href: "/companyProfile"
                },
                {
                    name: "联系我们",
                    href: "/contactUs"
                }
            ]
        },
        {
            name: "产品中心",
            href: "/goodsCenter",
            innerList: []
        },
        {
            name: "应用案例",
            href: "/applicationCases",
            innerList: []
        },
        {
            name: "新闻中心",
            href: "/newsCenter",
            innerList: []
        }
    ]
}
// 主页轮播图数据
export const getHomeBannerList = () => {
    return [{
        id: 0,
        imgUrl: "/static/img/AD0I5Z_5CRACGAAgluqn6AUo4OmdHzD6DjigBg1.jpg"
    }, {
        id: 1,
        imgUrl: "/static/img/AD0I5Z_5CRACGAAgluqn6AUo4OmdHzD6DjigBg2.jpg"
    }]
}
// 网站底部模块数据
export const getFooterMenu = () => {
    return {
        top: [{
            title: "客服QQ：",
            msg: "1105149059"
        },
            {
                title: "联系电话：",
                msg: "086-17865937390"
            },
            {
                title: "联系邮箱：",
                msg: "15506531157@163.com"
            }
        ],
        bottom: {
            itemTop: "©2019 网站模板-化工涂料 版权所有",
            itemBottom: "凡科建站提供技术支持\n |\n 管理登录"
        }
    }
}
// 关于我们下方模块数据
export const getAboutBottomList = () => {
    return [
        {
            id: 0,
            imgUrl: "/static/img/AD0I5Z_5CRAEGAAgnuqn6AUo5vfqoQQwZzhn.png.webp",
            title: "绿色环保",
            context: "以绿色环保涂料为主线，减少研发生产对环境的污染"
        }, {
            id: 1,
            imgUrl: "/static/img/AD0I5Z_5CRAEGAAgn_qn6AUoru_mATBlOGM.png.webp",
            title: "色彩稠度一致",
            context: "引进国外先进技术，解决不同批次的产品，产生色差、粘稠度不一致等问题"
        }, {
            id: 2,
            imgUrl: "/static/img/AD0I5Z_5CRAEGAAgn_qn6AUo9Z60lwEwXzhf.png.webp",
            title: "更新优化",
            context: "经验丰富的专业艺术漆研发队伍，每六个月研发一款新产品"
        }, {
            id: 3,
            imgUrl: "/static/img/AD0I5Z_5CRAEGAAgoeqn6AUoyYuu9QYwYzhk.png.webp",
            title: "产品定制",
            context: "为客户提供更贴 心更精准的产品定制，以满足不同客户不同的需求"
        },
    ]
}
// 案例展示内部轮播数据
export const getCaseShowBanner = () => {
    return [
        {
            id: 0,
            imgUrl: "/static/img/AD0I5Z_5CRACGAAgtvSn6AUorq343wUwvAU4kAM.jpg.webp"
        }, {
            id: 1,
            imgUrl: "/static/img/AD0I5Z_5CRACGAAgt-Sn6AUokMCUETC8BTiQAw.jpg.webp"
        }, {
            id: 2,
            imgUrl: "/static/img/AD0I5Z_5CRACGAAgt-Sn6AUow_ml8QIwvAU4kAM.jpg.webp"
        }
    ]
}
// 案例展示内部列表数据
export const getCaseShowList = () => {
    return [
        {
            id: 0,
            imgUrl: "/static/img/AD0I5Z_5CRAEGAAglOqn6AUoiKyT4QEwlgM4lgM.png.webp",
            title: "个性化艺术效果",
            msg: "主打产品干粉壁材是几种天然的材料通过创新工艺制造而成。可根据客户要求通过喷涂、辊涂、刮涂，进行个性化艺术造型处理，装饰效果与墙纸媲美。"
        }, {
            id: 1,
            imgUrl: "/static/img/AD0I5Z_5CRAEGAAglOqn6AUo6rXmowQwlQM4lgM.png.webp",
            title: "净化空气",
            msg: "产品本身做到有害物质外、通过苛刻的技术创新，分解甲醛，增加负离子含量，通过不断积累，每立方米空气中负离子净增加达93万个。"
        }, {
            id: 2,
            imgUrl: "/static/img/AD0I5Z_5CRAEGAAgleqn6AUokdyOwAIwlQM4lgM.png.webp",
            title: "优异环保和物理性能",
            msg: "产品特点是环保，是一款“零甲醛、零VOC、零有害物质”的环保型产品。同时耐擦洗及防霉等性能指标远超传统涂料、墙纸、硅藻泥的标准。"
        }
    ]
}
// 主页新闻模块数据
export const getHomeNewsList = () => {
    return [
        {
            id: 0,
            imgUrl: "/static/img/AD0I5Z_5CRACGAAg_-qr6AUon57ptwQwvQY4sAQ!700x700.jpg.webp",
            title: "中国涂料工业协会等发起绿色发展引导基金",
            date: "2019-06-19",
            context: "　　中国涂料工业协会与濮阳市人民政府“中涂合众涂料产业绿色发展(濮阳)引导基金合作签约仪式”26号在东莞举行。",
            tag: "企业动态",
            url: ""
        }, {
            id: 1,
            imgUrl: "/static/img/AD0I5Z_5CRACGAAg-Pqr6AUoqLOUqAEwvAY4sQQ!700x700.jpg.webp",
            title: "对不起！涂料产品也要开始涨价了！",
            date: "2019-06-19",
            context: "   进入10月份以来，有不少涂料企业开始承受不住原材料不断上涨的成本压力，陆续宣布对产品价格进行调整。",
            tag: "企业动态",
            url: ""
        }, {
            id: 2,
            imgUrl: "/static/img/AD0I5Z_5CRACGAAg-Pqr6AUoiP6AggQwvAY4sAQ!700x700.jpg.webp",
            title: "1-7月全国规模以上化工企业利润总额同比增长13.2%",
            date: "2019-06-19",
            context: "   1-7月份，全国规模以上工业企业实现利润总额35235.9亿元，同比增长6.9%，增速比1-6月份加快0.7个百分点。",
            tag: "企业动态",
            url: ""
        },
    ]
}
// 主页合作方logo数据
export const getHomeCompanyList = () => {
    return [
        {
            id: 0,
            imgUrl: "/static/img/footer1.png.webp"
        }, {
            id: 1,
            imgUrl: "/static/img/footer2.png.webp"
        }, {
            id: 2,
            imgUrl: "/static/img/footer3.png.webp"
        }, {
            id: 3,
            imgUrl: "/static/img/footer4.png.webp"
        }, {
            id: 4,
            imgUrl: "/static/img/footer5.png.webp"
        }, {
            id: 5,
            imgUrl: "/static/img/footer6.png.webp"
        }
    ]
}
// 企业实力数据
export const getOurNumberList = () => {
    return [
        {
            id: 0,
            top: "204",
            bottom: "环保涂料产品",
            topEnd: ""
        }, {
            id: 1,
            top: "1500",
            bottom: "生产研发基地面积",
            topEnd: "平方"
        }, {
            id: 2,
            top: "3000+",
            bottom: "合作加盟企业",
            topEnd: ""
        }, {
            id: 3,
            top: "50+",
            bottom: "专业研发人才",
            topEnd: ""
        },
    ]
}
// 联系我们表单规范数据
export const getFormList = () => {
    return [
        {
            id: 0,
            label: "姓名",
            name: "nikeName",
            placeholder: "请输入您的姓名",
            rules: [{required: true, message: '姓名不能为空！！！'}]
        }, {
            id: 1,
            label: "公司名称",
            name: "corporateName",
            placeholder: "请输入您的公司名称",
            rules: [{required: true, message: '公司名称不能为空！！！'}]
        }, {
            id: 2,
            label: "联系电话",
            name: "phone",
            placeholder: "请输入您的电话",
            rules: [{required: true, message: '联系电话不能为空！！！'}]
        }, {
            id: 3,
            label: "联系邮箱",
            name: "email",
            placeholder: "请输入您的邮箱地址",
            rules: [{required: true, message: '联系邮箱不能为空！！！'}]
        }, {
            id: 4,
            label: "留言",
            name: "message",
            placeholder: "请输入您的详细需求",
            rules: [{required: true, message: '留言不能为空！！！'}]
        }
    ]
}
// 产品展示数据
export const getProductList = () => {
    return [
        {
            id: 0,
            imgUrl: "/static/img/productI1.jpg",
            name: "进口金奖内墙面漆"
        }, {
            id: 1,
            imgUrl: "/static/img/productI2.jpg.webp",
            name: "进口外墙哑光面漆"
        }, {
            id: 2,
            imgUrl: "/static/img/productI3.jpg.webp",
            name: "净味色彩环保进口涂料"
        }, {
            id: 3,
            imgUrl: "/static/img/productI4.jpg.webp",
            name: "净味色彩环保涂料面漆"
        }, {
            id: 4,
            imgUrl: "/static/img/productI5.jpg.webp",
            name: "零VOC环保涂料底漆"
        }, {
            id: 5,
            imgUrl: "/static/img/productI6.jpg.webp",
            name: "零VOC抗菌环保涂料面漆"
        }, {
            id: 6,
            imgUrl: "/static/img/productI7.jpg.webp",
            name: "墙面涂料单桶"
        }, {
            id: 7,
            imgUrl: "/static/img/productI8.jpg.webp",
            name: "淳净内墙墙面乳胶漆"
        },
    ]
}
// 新闻中心下方列表数据
export const getNewBottomList = () => {
    return [
        {
            id: 0,
            title: "全球光学涂料产业 前景看好增速明显",
            msg: "市场研究机构Market Intel Reports日前发布一项研究报告显示,受汽车业、医疗业、军工业等领...",
            tag: "行业资讯",
            date: "2019-06-19"
        }, {
            id: 1,
            title: "艺术涂料行业瞄准中产消费市场",
            msg: "有业内人士指出，中国涂料市场已经开始饱和，内生增长的空间日益有限。因此，未来市场的主要增长不再依赖于扩张渗透，...",
            tag: "行业资讯",
            date: "2019-06-19"
        }, {
            id: 2,
            title: "装饰行业环保标准出台能终结家装污染吗？",
            msg: "购房、装修、入住，在健康意识不断被强化的当下，如何家装更环保、健康则成了人们关注的焦点问题之一。3月...",
            tag: "行业资讯",
            date: "2019-06-19"
        },
    ]
}

六、观察整个网站找出公共的组件

在components文件夹中创建com文件夹，

在css文件夹中创建com文件夹

I、创建网站头部导航栏模块

成品展示：

在components中的com文件夹中创建header.js文件

import '../../css/com/header.sass';
import {getMenuList} from "../../tools/datas";
import {Link} from "react-router-dom";
import {useLocation} from "react-router-dom";

export const Header = ({title}) => {
    const location = useLocation();
    const menuList = getMenuList();
    return (
        <>
            <div className={"header"}>
            <span className={"headerLeft"}>
                {title}
            </span>
                <div className={"headerRight"}>
                    <ul>
                        {menuList.map((item1, index1) => (
                            <li key={index1} className={location.pathname === item1.href ? "select" : ""}>
                                {!item1.innerList.length > 0 ?
                                    <Link className={location.pathname === item1.href ? "jump select" : "jump"}
                                          to={item1.href}>{item1.name}</Link> : <span>{item1.name}</span>
                                }
                                {item1.innerList.length > 0 ?
                                    <ul>
                                        {item1.innerList.map((item2, index2) => (
                                            <li key={index2}><Link
                                                className={location.pathname === item2.href ? "select" : "jump"}
                                                to={item2.href}>{item2.name}</Link>
                                            </li>
                                        ))}
                                    </ul> :
                                    ""
                                }
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
            <div className={"headerCon"}></div>
        </>
    )
}

在css中的com文件夹中创建header.sass文件

// header.sass
.header
  width: 100%
  height: 71px
  min-width: 1200px
  position: fixed
  top: 0
  left: 0
  display: flex
  flex-wrap: wrap
  align-items: center
  justify-content: space-around
  background: white
  z-index: 2
  box-shadow: 0 2px 5px #aaa
  text-align: center

  .headerLeft
    font-size: 30px
    color: #1e50ae

  .headerRight
    width: auto
    height: 100%
    font-size: 14px
    color: black

    ul
      width: auto
      height: 100%
      list-style: none
      padding: 0
      display: flex
      flex-wrap: wrap
      align-items: center
      justify-content: space-around

      .select
        color: #1e50ae
        border-color: #1e50ae

      li
        width: 80px
        height: 100%
        margin: 0 10px
        line-height: 71px
        background: white
        border-bottom: 2px solid #fff

        ul
          display: none
          padding-top: 10px
          height: auto
          width: 150%
          margin-left: -25%
          border-radius: 5px
          overflow: hidden
          li
            padding: 0
            margin: 0
            width: 100%
            height: 50px
            line-height: 50px
          li:nth-child(1)
            border-radius: 5px 5px 0 0
        span
          display: block
          width: 100%
          height: 100%

        .jump
          color: black
          text-decoration: none

        .select
          color: #1e50ae
          text-decoration: none
      li:hover
        border-color: #1e50ae
        ul
          display: block
          li
            border-color: white
          li:hover
            .jump
              color: #1e50ae

.headerCon
  width: 100%
  height: 75px

II、创建网站底部模块

成品展示：

在components中的com文件夹中创建footer.js文件

// footer.js
import "../../css/com/footer.sass";
import {getFooterMenu} from "../../tools/datas";

export const Footer = () => {
    const footerMenu = getFooterMenu();
    return (
        <div className={"footer"}>
            <div className="footerTop">
                {footerMenu.top.map((item, index) => (
                    <span key={index}>{item.title + item.msg}</span>
                ))}
            </div>
            <div className="footerBottom">
                <span>{footerMenu.bottom.itemTop}</span>
                <span>{footerMenu.bottom.itemBottom}</span>
            </div>
        </div>
    )
}

在css中的com文件夹中创建footer.sass文件

.footer
  width: 100%
  height: 180px
  background: #262626

  .footerTop
    width: 70%
    height: 92px
    font-size: 14px
    color: #666
    display: flex
    margin: 0 auto
    flex-wrap: wrap
    align-items: center
    justify-content: space-around
    border-bottom: 1px solid #333333

  .footerBottom
    height: calc(180px - 92px)
    font-size: 12px
    color: #999
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center

    span
      margin-top: 5px

III、创建页面中的页头图片模块

成品展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HXKE5P7q-1685336610311)(null)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5WCeqai8-1685336606579)(http://39.101.72.168:81/image/shixun/log/youQi/Snipaste_2023-05-27_23-04-56.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bfcvcxkq-1685336609917)(null)]

在components中的com文件夹中创建pageTop.js文件

import "../../css/com/pageTop.sass";
import {useEffect, useState} from "react";
export const PageTop = ({imgUrl}) => {
    const [bgImg,setBgImg] = useState("");
    useEffect(()=>{
        import("/public/static/img/"+imgUrl).then((r)=>{
            setBgImg(r.default)
        })
    },[imgUrl])
    return (
        <div className="pageTop" style={{
            backgroundImage: `url(${bgImg})`
        }}>
        </div>
    )
}

在css中的com文件夹中创建pageTop.sass文件

.pageTop
  background-size: 100% 100%
  width: 100%
  height: 348px

IV、创建网页内部标题模块

成品展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8j6GFax4-1685336609990)(null)]

在components中的com文件夹中创建titleBox.js文件

import "../../css/com/titleBox.sass";
export const TitleBox = ({title,titleEn}) => {
    return (
        <div className="titleBox">
            <span className={"title"}>{title}</span>
            <span className={"titleEn"}>{titleEn}</span>
        </div>
    )
}

在css中的com文件夹中创建titleBox.sass文件

.titleBox
  width: 100%
  display: flex
  flex-direction: column
  align-items: center
  justify-content: space-around
  margin-top: 100px

  .title
    font-size: 24px
    color: #1e50ae

  .titleEn
    font-size: 14px
    color: #888888
    margin-top: 10px

七、创建首页

在components文件夹中创建container文件夹

在css文件夹中创建container文件夹

在components > container文件夹中创建home文件夹

在css > container文件夹中创建home文件夹

I、创建主页轮播图模块

展示效果：

在components > container > home文件夹中创建banner.js

// home.js
import {Header} from "../components/com/header";
import {Footer} from "../components/com/footer";
import {getHomeBannerList} from "../tools/datas";
import {Banner} from "../components/container/home/banner";
import {About} from "../components/container/home/about";
import {CaseShow} from "../components/container/home/caseShow";
import {CaseShowList} from "../components/container/home/caseShowList";
import {Teams} from "../components/container/home/teams";
import {News} from "../components/container/home/news";
import {CompanyList} from "../components/container/home/companyList";

export const Home = ({history}) => {
    const homeBannerList = getHomeBannerList();
    return (
        <div id="home">
            <Header title={"油漆涂料模板"}/>
            <Banner bannerList={homeBannerList}/>
            <About />
            <CaseShow />
            <CaseShowList />
            <Teams />
            <News/>
            <CompanyList />
            <Footer/>
        </div>
    )
}

在css > container > home文件夹中创建banner.sass

.banner
  width: 100%
  height: auto

  .bannerItem
    width: 100%
    height: 100%

    img
      width: 100%

II、创建关于我们模块

关于我们模块一共分为两块，分为上方模块和下方模块

1、创建关于我们下方模块

展示效果：

在components > container > home文件夹中创建aboutBotttomItem.js

import "../../../css/container/home/aboutBottomItem.sass"

export const AboutBottomItem = ({imgUrl, title, context}) => {
    return (
        <div className="aboutBottomItem">
            <img src={imgUrl} alt=""/>
            <span className="aboutBottomItemTitle">{title}</span>
            <span>{context}</span>
        </div>
    )
}

在css > container > home文件夹中创建aboutBotttomItem.sass

.aboutBottomItem
  width: 20%
  height: 100%
  display: flex
  flex-direction: column
  align-items: center


  img
    width: 40px
    height: 40px
    margin-top: 30px

  span
    text-align: center
    color: rgb(136, 136, 136)
    line-height: 24px
    margin-top: 10px

  .aboutBottomItemTitle
    color: #333
    font-size: 18px

2、完成关于我们模块

展示效果：

在components > container > home文件夹中创建about.js

调用了com文件夹里的TitleBox组件

调用了components > container > home文件夹里的AboutBottomIttem组件

import "../../../css/container/home/about.sass"
import {AboutBottomItem} from "./aboutBottomItem";
import {getAboutBottomList} from "../../../tools/datas";
import {TitleBox} from "../../com/titleBox";

export const About = () => {
    const aboutBottomList = getAboutBottomList();
    return (
        <div className={"about"}>
            <div className="aboutTop">
                <TitleBox title={"关于我们"} titleEn={"ABOUT US"} />
                <div
                    className={"aboutMsg"}>公司是一家集研发、生产、销售为一体的科技型现代化企业，始建于2001年。经过十几年的发展，由当初的技术、销售全靠总部提供和扶持到今天具备独立自主研发能力和拥有众多知识产权专利、技术过硬、管理先进的高科技现代化企业。
                </div>
            </div>
            <div className="aboutBottom">
                {aboutBottomList.map((item, index) => (
                    <AboutBottomItem key={item.id} imgUrl={item.imgUrl} title={item.title} context={item.context}/>
                ))}
            </div>
        </div>
    )
}

在css > container > home文件夹中创建about.sass

.about
  width: 80%
  height: 606px
  display: flex
  flex-direction: column
  justify-content: space-around
  align-items: center
  margin: 0 auto

  .aboutTop
    width: 100%
    height: 300px
    display: flex
    flex-direction: column
    align-items: center
    justify-content: space-around
    border-bottom: 1px solid #f0f0f0

    .aboutMsg
      width: 70%
      height: auto
      text-align: center
      line-height: 36px
      font-size: 14px
      color: rgb(136, 136, 136)
      margin-top: 30px
      margin-bottom: 70px
  .aboutBottom
    width: 100%
    height: 225px
    display: flex
    flex-wrap: wrap
    align-items: center
    justify-content: space-around

III、创建案例展示模块

展示效果：

在components > container > home文件夹中创建caseShow.js

调用了components > container > home文件夹里的Banner组件

import "../../../css/container/home/caseShow.sass"
import {Link} from "react-router-dom";
import {Banner} from "./banner";
import {getCaseShowBanner} from "../../../tools/datas";

export const CaseShow = () => {
    const caseShowBannerList = getCaseShowBanner();
    return(
        <div className={"caseShow"}>
            <div className="caseShowLeft">
                <div className="caseShowTitle">
                    <span>案例展示</span>
                    <span>CASE SHOW</span>
                </div>
                <span>我们收集客户使用效果汇总，经过高分子专家不断精进创新，优化配方做更适合您产品。提供一对一使用技术指导。产品经过数万家企业、用户的使用，获得良好的评价。</span>
                <Link className={"moreBtn"} to={"/applicationCases"}>
                    <div className={"cover"}></div>
                    <span>MORE</span>
                </Link>
            </div>
            <div className="caseShowRight">
                <Banner bannerList={caseShowBannerList} />
            </div>
        </div>
    )
}

在css > container > home文件夹中创建caseShow.sass

.caseShow
  width: 100%
  height: 660px
  display: flex
  flex-wrap: wrap
  justify-content: space-around
  align-items: center
  background: url("../../../../public/static/img/AD0I5Z_5CRACGAAgnrao6AUoqe7H7QYw_g449AU.jpg.webp") no-repeat
  background-size: 100% 100%

  .caseShowLeft
    width: 40%
    height: 40%
    display: flex
    flex-direction: column
    position: relative

    span
      font-size: 14px
      color: #fff
      line-height: 36px

    .caseShowTitle
      display: flex
      flex-direction: column

      span
        margin-top: 10px

      span:nth-child(1)
        font-size: 24px

    .moreBtn
      width: 120px
      height: 40px
      text-decoration: none
      position: relative
      margin-top: 10px
      border: 1px solid #fff
      text-align: center
      line-height: 40px
      overflow: hidden
      color: #fff

      .cover
        width: 0
        height: 40px
        background: #ffffff50
        position: absolute
        top: 0
        left: 0
        transition: width 1s
    .moreBtn:hover>.cover
      width: 120px

  .caseShowRight
    width: 40%
    height: 50%

IV、创建案例列表模块

1、创建单个案例组件

展示效果：

在components > container > home文件夹中创建caseShowItem.js

import "../../../css/container/home/caseShowItem.sass"

export const CaseShowItem = ({imgUrl, title, msg}) => {
    return (
        <div className={"caseShowItem"}>
            <img src={imgUrl} alt=""/>
            <span className={"caseShowItemTitle"}>{title}</span>
            <span className={"caseShowItemMsg"}>{msg}</span>
        </div>
    )
}

在css > container > home文件夹中创建caseShowItem.sass

.caseShowItem
  width: 100%
  height: 100%
  display: flex
  flex-direction: column
  justify-content: space-around
  align-items: center
  img
    width: 208px
  .caseShowItemTitle
    font-size: 18px
    color: #333

  .caseShowItemMsg
    color: #888888
    font-size: 14px
    line-height: 30px
    text-align: center

2、完成案例列表模块

展示效果：

在components > container > home文件夹中创建caseShowList.js

调用了components > container > home文件夹里的CaseShowItem组件

import "../../../css/container/home/caseShowList.sass"
import {getCaseShowList} from "../../../tools/datas";
import {CaseShowItem} from "./caseShowItem";
export const CaseShowList = () => {
    const caseShowList = getCaseShowList();
    return(
        <div className={"caseShowList"}>
            {caseShowList.map((item,index)=>(
                <div className={"item"} key={item.id}>
                    <CaseShowItem imgUrl={item.imgUrl} title={item.title} msg={item.msg} />
                </div>
            ))}
        </div>
    )
}

在css > container > home文件夹中创建caseShowList.sass

.caseShowList
  width: 100%
  height: 563px
  background: url("../../../../public/static/img/AD0I5Z_5CRACGAAgnrao6AUo-smG4QYw_g44igU.jpg.webp") no-repeat
  background-size:  100% 100%
  display: flex
  flex-wrap: wrap
  justify-content: center

  .item
    width: 20%
    height: 70%
    margin: 0 25px

  .item:nth-child(2)
    margin-top: 30px

V、创建案例展示团队模块

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6FANK59E-1685336606583)(http://39.101.72.168:81/image/shixun/log/youQi/Snipaste_2023-05-28_01-01-38.png)]

在components > container > home文件夹中创建teams.js

import "../../../css/container/home/teams.sass";
export const Teams = () => {
    return(
        <div className={"teams"}>
            <div className={"teamLeft"}>
                <div className="teamTitleBox">
                    <span className={"teamTitle"}>案例展示</span>
                    <span>CASE SHOW</span>
                </div>
                <span>设有研发部门，经验丰富的专业研发队伍，引进国外先进技术，每六个月研发一款新产品，具有强大的自主创新、开发能力。</span>
            </div>
            <div className="teamIcon"><img src="/static/img/team1.png.webp" alt=""/></div>
            <div className="teamIcon"><img src="/static/img/team2.png.webp" alt=""/></div>
            <div className="teamIcon"><img src="/static/img/team3.png.webp" alt=""/></div>
        </div>
    )
}

在css > container > home文件夹中创建teams.sass

.teams
  width: 100%
  height: 420px
  display: flex
  flex-wrap: wrap
  align-items: center
  justify-content: space-between
  color: #fff

  .teamLeft,.teamIcon
    width: 25%
    height: 100%
    background: repeating-linear-gradient(45deg,#26282f,#444950) no-repeat
    overflow: hidden
    position: relative

    img
      width: 85%
      position: absolute
      bottom: 0
      left: 7.5%

  .teamLeft
    background: #375ea7
    padding: 40px
    display: flex
    flex-direction: column
    justify-content: center
    font-size: 14px
    line-height: 36px

    .teamTitleBox
      display: flex
      flex-direction: column
      justify-content: space-around
      margin-bottom: 30px
      .teamTitle
        font-size: 24px
        margin-bottom: 10px

第二天

一、继续创建主页所需组件,并完成首页

I、创建合作方图标列表

1、创建单个案例组件

展示效果：

在components > container > home文件夹中创建companyItem.js

import "../../../css/container/home/companyItem.sass";
export const CompanyItem = ({imgUrl}) => {
    return(
        <div className={"companyItem"}>
            <img src={imgUrl} alt=""/>
        </div>
    )
}

在css > container > home文件夹中创建companyItem.sass

.companyItem
  width: 15%
  height: auto
  overflow: hidden

  img
    width: 100%
    height: 100%
    transition: transform .5s

.companyItem:hover
  img
    transform: scale(1.1)

2、完成案例列表模块

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-07kBp5Db-1685336610058)(null)]

在components > container > home文件夹中创建companyList.js

调用了components > container > home文件夹里的CompanyItem组件

import "../../../css/container/home/companyList.sass";
import {getHomeCompanyList} from "../../../tools/datas";
import {CompanyItem} from "./companyItem";
export const CompanyList = () => {
    const companyList = getHomeCompanyList();
    return(
        <div className={"companyListBox"}>
            <div className="companyList">
                {companyList.map((item,index)=>(
                    <CompanyItem key={item.id} imgUrl={item.imgUrl} />
                ))}
            </div>
        </div>
    )
}

在css > container > home文件夹中创建companyList.sass

.companyListBox
  width: 100%
  min-width: 1100px
  height: 190px
  background: #f5f5f5

  .companyList
    width: 90%
    height: 100%
    margin: 0 auto
    display: flex
    flex-wrap: wrap
    align-items: center
    justify-content: space-around

II、完成首页

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-35dNcyqS-1685336606584)(http://39.101.72.168:81/image/shixun/log/youQi/2023-05-28_012022.png)]

在pages文件夹中创建home.js

调用了components > com文件夹里的Header、Footer组件

调用了components > container > home文件夹里的Banner、About、CaseShow、CaseShowList、Teams、News、CompanyList组件

import {Header} from "../components/com/header";
import {Footer} from "../components/com/footer";
import {getHomeBannerList} from "../tools/datas";
import {Banner} from "../components/container/home/banner";
import {About} from "../components/container/home/about";
import {CaseShow} from "../components/container/home/caseShow";
import {CaseShowList} from "../components/container/home/caseShowList";
import {Teams} from "../components/container/home/teams";
import {News} from "../components/container/home/news";
import {CompanyList} from "../components/container/home/companyList";

export const Home = ({history}) => {
    const homeBannerList = getHomeBannerList();
    return (
        <div id="home">
            <Header title={"油漆涂料模板"}/>
            <Banner bannerList={homeBannerList}/>
            <About />
            <CaseShow />
            <CaseShowList />
            <Teams />
            <News/>
            <CompanyList />
            <Footer/>
        </div>
    )
}

二、创建公司简介页面，并完成公司简介页面

在components > container文件夹中创建companyProfile文件夹

在css > container文件夹中创建companyProfile文件夹

I、创建企业实力数据列表模块

1、创建企业实力单个数据模块

展示效果：

在components > container > companyProfile文件夹中创建ourNumberItem.js

import "../../../css/container/companyProfile/ourNumberItem.sass";
export const OurNumberItem = ({top,bottom,topEnd}) =>{
    return(
        <div className="ourNumberItem">
            <span className={"top"}>{top}<span className={"topEnd"}>{topEnd}</span></span>
            <span className={"bottom"}>{bottom}</span>
        </div>
    )
}

在css > container > companyProfile文件夹中创建ourNumberItem.sass

.ourNumberItem
  width: 20%
  height: auto
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center

  .top
    font-size: 36px
    color: #1e50ae

    .topEnd
      font-size: 18px

  .bottom
    font-size: 14px
    color: #888888
    margin-top: 10px

2、完成企业实力列表模块

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YbZdGHAc-1685336610184)(null)]

在components > container > companyProfile文件夹中创建ourNumber.js

调用了components > container > companyProfile文件夹里的OurNumberItem组件

import "../../../css/container/companyProfile/ourNumber.sass";
import {getOurNumberList} from "../../../tools/datas";
import {OurNumberItem} from "./ourNumberItem";
export const OurNumber = () => {
    const ourNumberList = getOurNumberList();
    return (
        <div className="ourNumber">
            {ourNumberList.map((item, index) => (
                <OurNumberItem key={item.id} top={item.top} bottom={item.bottom} topEnd={item.topEnd}/>
            ))}
        </div>
    )
}

在css > container > companyProfile文件夹中创建ourNumber.sass

.ourNumber
  width: 1100px
  height: 130px
  margin: 0 auto
  display: flex
  flex-wrap: wrap
  align-items: center
  justify-content: space-around

II、创建企业实力模块

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5gDgYKpA-1685336606585)(http://39.101.72.168:81/image/shixun/log/youQi/Snipaste_2023-05-28_12-21-30.png)]

在components > container > companyProfile文件夹中创建ourBrand.js

调用了components > container > companyProfile文件夹里的OurNumber组件

import "../../../css/container/companyProfile/ourBrand.sass";
import {OurNumber} from "./ourNumber";
export const OurBrand = () => {
    return(
        <div className="ourBrand">
            <div className={"ourBrandTitleBox"}>
                <span className={"ourBrandTitle"}>企业实力</span>
                <span className={"ourBrandEn"}>OUR BRAND</span>
            </div>
            <div className="videoBox">
                <img src="/static/img/AD0I5Z_5CRACGAAgiauo6AUo0YzL6gUwsAk49AM.jpg.webp.webp" alt=""/>
            </div>
            <OurNumber />
        </div>
    )
}

在css > container > companyProfile文件夹中创建ourBrand.sass

.ourBrand
  width: 100%
  height: 800px
  display: flex
  flex-direction: column
  align-items: center
  justify-content: space-around
  background: url("../../../../public/static/img/AD0I5Z_5CRACGAAg2aio6AUokZX-3wUw_g44tAY.jpg.webp") no-repeat
  background-size: 100% 100%

  .ourBrandTitleBox
    width: 100%
    height: auto
    color: #fff
    display: flex
    flex-direction: column
    align-items: center
    justify-content: space-around
    margin-top: 100px

    .ourBrandTitle
      font-size: 24px

    .ourBrandEn
      font-size: 14px
      margin-top: 10px
      font-weight: bold

  .videoBox
    width: 930px
    height: 387px

    img
      width: 100%
      height: 100%

III、创建科研中心模块

1、创建科研中心内部图片展示组件

展示效果：

在components > container > companyProfile文件夹中创建researchImgList.js

import "../../../css/container/companyProfile/researchImgList.sass"
export const ResearchImgList = ({left,centerTop,centerBottom,right}) =>{
    return(
        <div className="researchImgList">
            <div className="left">
                <img src={left} alt=""/>
            </div>
            <div className="center">
                <img src={centerTop} alt=""/>
                <img src={centerBottom} alt=""/>
            </div>
            <div className="right">
                <img src={right} alt=""/>
            </div>
        </div>
    )
}

在css > container > companyProfile文件夹中创建researchImgList.sass

.researchImgList
  width: 80%
  height: 464px
  display: flex
  flex-wrap: wrap
  align-items: center
  justify-content: space-around

  .left
    width: 35%
    height: 100%

    img
      width: 100%
      height: 100%
  .center
    width: 30%
    height: 100%
    display: flex
    flex-direction: column
    align-items: center
    justify-content: space-between

    img
      width: 100%
      height: 47%

  .right
    width: 25%
    height: 100%

    img
      width: 100%
      height: 100%

2、完成科研中心模块

展示效果：

在components > container > companyProfile文件夹中创建researchCenter.js

调用了components > container > companyProfile文件夹里的ResearchImgList组件

import "../../../css/container/companyProfile/researchCenter.sass";
import {ResearchImgList} from "./researchImgList";
import {TitleBox} from "../../com/titleBox";

export const ResearchCenter = () => {
    return (
        <div className="researchCenter">
            <TitleBox title={"科研中心"} titleEn={"LABORATORY"} />
            <span className={"context"}>
                拥有七大生产基地和一个高新技术研发中心，是涂料行业生产研发高新企业集团之一。<br/>是国内具有开发、生产、销售化工涂料的大型民营高科技企业集团。
            </span>
            <ResearchImgList left={"/static/img/left.jpg.webp"} centerTop={"/static/img/centerTop.jpg.webp"} centerBottom={"/static/img/centerBottom.jpg.webp"} right={"/static/img/right.jpg.webp"} />
        </div>
    )
}

在css > container > companyProfile文件夹中创建researchCenter.sass

.researchCenter
  width: 100%
  height: 832px
  display: flex
  flex-direction: column
  align-items: center
  justify-content: space-around

  .context
    font-size: 14px
    line-height: 38px
    color: #888888

IV、完成公司简介页面

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q7lcN6KP-1685336610121)(null)]

在pages文件夹中创建companyProfile.js

调用了components > com文件夹里的Header、PageTop、Footer组件

调用了components > containeer > home文件夹里的About组件

调用了components > containeer > companyProfile文件夹里的OurBrand、ResearchCenter组件

import {Header} from "../components/com/header";
import {Footer} from "../components/com/footer";
import {About} from "../components/container/home/about";
import {OurBrand} from "../components/container/companyProfile/ourBrand";
import {ResearchCenter} from "../components/container/companyProfile/researchCenter";
import {PageTop} from "../components/com/pageTop";

export const CompanyProfile = () => {
    return (
        <>
            <Header title={"油漆涂料模板"}/>
            <PageTop imgUrl={"AD0I5Z_5CRACGAAg0qio6AUo0pjakQcw_g44wgM.jpg"} />
            <About/>
            <OurBrand/>
            <ResearchCenter/>
            <Footer/>
        </>
    )
}

三、创建联系我们页面，并完成联系我们页面

在components > container文件夹中创建contactUs文件夹

在css > container文件夹中创建contactUs文件夹

I、创建联系我们模块

1、创建联系我们右侧信息模块

展示效果：

在components > container > contactUs文件夹中创建linkUsRight.js

import "../../../css/container/contactUs/linkUsRight.sass";

export const LinkUsRight = ({topTitle,topQQ,topEmail,topPhone,topLoader}) => {
    return(
        <div className="linkUsRight">
            <div className="top">
                <span className={"title"}>{topTitle}</span>
                <span className={"qq"}>{topQQ}</span>
                <span className={"email"}>{topEmail}</span>
                <span className={"phone"}>{topPhone}</span>
                <span className={"loader"}>{topLoader}</span>
            </div>
            <div className="bottom">
                <span>
                    如对我们产品感兴趣或有任何疑问，<br/>欢迎联系我们或留言反馈，<br/>我们期待与您的合作！
                </span>
            </div>
        </div>
    )
}

在css > container > contactUs文件夹中创建linkUsRight.sass

.linkUsRight
  width: 30%
  height: 100%
  display: flex
  flex-direction: column
  justify-content: space-between

  .top
    width: 100%
    height: 60%
    display: flex
    flex-direction: column
    justify-content: space-around
    color: rgb(136,136,136)
    font-size: 14px
    line-height: 36px

    .title
      font-size: 18px
      color: #333

  .bottom
    color: rgb(136,136,136)
    font-size: 14px
    line-height: 36px

2、完成系我们模块

展示效果：

在components > container > contactUs文件夹中创建linkUs.js

调用了components > com文件夹里的TitleBox组件

调用了components > container > contactUs文件夹里的LinkUsRight组件

import "../../../css/container/contactUs/linkUs.sass";
import {TitleBox} from "../../com/titleBox";
import {Button, Form, Input} from "antd";
import {getFormList} from "../../../tools/datas";
import TextArea from "antd/es/input/TextArea";
import {LinkUsRight} from "./linkUsRight";

export const LinkUs = () => {
    const onFinish = (val) => {

    }
    const onFinishFailed = (val) => {

    }
    const formList = getFormList();
    return (
        <div className="linkUs">
            <TitleBox title={"联系我们"} titleEn={"CONTACT US"}/>
            <div className="MsgBox">
                <div className="formBox">
                    <Form
                        className={"form"}
                        name="basic"
                        layout="vertical"
                        labelCol={{span: 8}}
                        wrapperCol={{span: 16}}
                        initialValues={{remember: true}}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        {formList.map((item, index) => (
                            <Form.Item
                                className={"formItem"}
                                key={item.id}
                                label={item.label}
                                name={item.name}
                                rules={item.rules}
                            >
                                {item.id === 4 ? <TextArea rows={4} placeholder={item.placeholder} maxLength={500}/> :
                                    <Input placeholder={item.placeholder}/>}
                            </Form.Item>
                        ))}
                        <Form.Item className={"formItem"} wrapperCol={{offset: 8, span: 16}}>
                            <Button className={"formBtn"} type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <LinkUsRight topTitle={"业务咨询：130000000"} topQQ={"联系QQ：177488228"} topEmail={"联系邮箱：xxx@.co.m"} topPhone={"联系电话：020-000000 000-000000"} topLoader={"联系地址：XXX省XXX市XXX县XXX路XXX号"} />
            </div>
        </div>
    )
}

在css > container > contactUs文件夹中创建linkUs.sass

.linkUs
  width: 100%
  height: 679px
  display: flex
  flex-direction: column
  align-items: center
  justify-content: space-around

  .MsgBox
    width: 80%
    height: auto
    display: flex
    flex-wrap: wrap
    align-items: center
    justify-content: space-between

    .formBox
      width: 60%
      height: auto
      .form
        width: 100%
        height: auto
        display: flex
        flex-wrap: wrap
        align-items: center
        justify-content: space-around

        .formItem
          width: 45%
          margin-bottom: 40px
          display: flex
          .ant-row
            width: 100%
            .ant-col
              margin: 0
              flex: 1
              display: contents
              input
                height: 40px
                background: #f8f8f8

              textarea
                background: #f8f8f8

          .formBtn
            width: 100%
            height: 40px
          .ant-col
            margin: 0

II、创建地图模块

展示效果（展示的中心点是我所在的学校——淄博职业学院南校区）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-exLDgnkt-1685336606586)(http://39.101.72.168:81/image/shixun/log/youQi/Snipaste_2023-05-28_13-51-41.png)]

在components > container > contactUs文件夹中创建bMap.js

调用了window.BMap.Map('map')通过绑定id={"map"}的div进行显示地图

import "../../../css/container/contactUs/bmap.sass";
import {useEffect} from "react";
export const BMap = () => {
    useEffect(()=>{
        let bMap = new window.BMap.Map('map');
        bMap.centerAndZoom(new window.BMap.Point(117.933166,36.833957),17)
    })
    return(
        <div id={"map"}>

        </div>
    )
}

在css > container > contactUs文件夹中创建bmap.sass

#map
  width: 1100px
  height: 587px
  margin: 30px auto

III、完成联系我们页面

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-183UqVDt-1685336606586)(http://39.101.72.168:81/image/shixun/log/youQi/2023-05-28_135653.png)]

在pages文件夹中创建contactUs.js

调用了components > com文件夹里的Header、PageTop、Footer组件

调用了components > containeer > companyProfile文件夹里的LinkUs、BMap组件

import {Header} from "../components/com/header";
import {Footer} from "../components/com/footer";
import {LinkUs} from "../components/container/contactUs/linkUs";
import {BMap} from "../components/container/contactUs/bMap";
import {PageTop} from "../components/com/pageTop";

export const ContactUs = () => {
    return(
        <>
            <Header title={"油漆涂料模板"}/>
            <PageTop imgUrl={"AD0I5Z_5CRACGAAgqJmo6AUoxrff5gQw_g44wgM.jpg"} />
            <LinkUs />
            <BMap />
            <Footer />
        </>
    )
}

四、创建产品中心页面，并完成产品中心页面

在components > container文件夹中创建goodsCenter文件夹

在css > container文件夹中创建goodsCenter文件夹

I、创建产品列表模块

1、创建单个产品介绍模块

展示效果：

在components > container > goodsCenter文件夹中创建productItem.js

import "../../../css/container/goodsCenter/productItem.sass";

export const ProductItem = ({imgUrl,name}) => {
    return(
        <div className="productItem">
            <img src={imgUrl} alt=""/>
            <span>{name}</span>
        </div>
    )
}

在css > container > goodsCenter文件夹中创建productItem.sass

.productItem
  width: 20%
  height: 315px
  display: flex
  flex-direction: column
  align-items: center
  justify-content: space-around
  margin: 2.5%
  transition: box-shadow 1s

  img
    width: 90%
    height: 80%

  span
    font-size: 16px

.productItem:hover
  color: #1e50ae
  box-shadow: 0 0 10px #ccc

2、完成产品列表模块

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wziOu8Mh-1685336610249)(null)]

在components > container > goodsCenter文件夹中创建products.js

调用了components > com文件夹里的TitleBox组件

调用了components > container > goodsCenter文件夹里的ProductItem组件

import "../../../css/container/goodsCenter/products.sass";
import {TitleBox} from "../../com/titleBox";
import {getProductList} from "../../../tools/datas";
import {ProductItem} from "./productItem";

export const Products = () => {
    const productList = getProductList();
    return(
        <div className={"products"}>
            <TitleBox title={"产品展示"} titleEn={"PRODUCTS"} />
            <div className="productList">
                {productList.map((item,index)=>(
                    <ProductItem key={item.id} imgUrl={item.imgUrl} name={item.name} />
                ))}
            </div>
        </div>
    )
}

在css > container > goodsCenter文件夹中创建products.sass

.products
  width: 100%
  height: auto
  display: flex
  flex-direction: column
  align-items: center
  margin-bottom: 100px

  .productList
    width: 90%
    height: auto
    display: flex
    flex-wrap: wrap
    align-items: center

II、完成产品中心页面

展示效果：

在pages文件夹中创建goodsCenter.js

调用了components > com文件夹里的Header、PageTop、Footer组件

调用了components > containeer > goodsCenter文件夹里的Products组件

import {Header} from "../components/com/header";
import {Footer} from "../components/com/footer";
import {PageTop} from "../components/com/pageTop";
import {Products} from "../components/container/goodsCenter/products";

export const GoodsCenter = () => {
    return(
        <>
            <Header title={"油漆涂料模板"}/>
            <PageTop imgUrl={"AD0I5Z_5CRACGAAglJWo6AUo0v364wcw_goodsCenter.jpg"} />
            <Products />
            <Footer />
        </>
    )
}

五、创建应用案例页面，并完成产品页面

在components > container文件夹中创建applicationCase文件夹

在css > container文件夹中创建applicationCase文件夹

I、创建应用案例展示图片模块

展示效果：

在components > container > applicationCase文件夹中创建applicationImgList.js

调用了components > com文件夹里的TitleBox组件

import "../../../css/container/applicationCase/applicationImgList.sass";

export const ApplicationImgList = ({imgLT, imgRT, imgRB, imgLB}) => {
    return (
        <div className="applicationImgList">
            <div className="imgLT">
                <img src={imgLT} alt=""/>
            </div>
            <div className="imgRT">
                <img src={imgRT} alt=""/>
            </div>
            <div className="imgLB">
                <img src={imgLB} alt=""/>
            </div>
            <div className="imgRB">
                <img src={imgRB} alt=""/>
            </div>
        </div>
    )
}

在css > container > applicationCase文件夹中创建applicationImgList.sass

.applicationImgList
  width: calc(419px + 606px + 10px)
  height: calc( 231px * 2 + 20px )
  margin: 0 auto
  display: flex
  flex-wrap: wrap
  align-items: center

  .imgLT,.imgRT,.imgLB,.imgRB
    height: 231px
    overflow: hidden
    img
      width: 100%
      height: 100%
      transition: transform .5s

    img:hover
      transform: scale(1.1)

  .imgLT,.imgRB
    width: 419px

  .imgRT,.imgLB
    width: 606px

  .imgRT,.imgRB
    margin-left: 10px

II、创建应用案例和合作伙伴总体模块

展示效果：

在components > container > applicationCase文件夹中创建case.js

调用了components > com文件夹里的TitleBox组件

调用了components > container > home文件夹里的CompanyItem组件

调用了components > container > applicationCase文件夹里的ApplicationImgList组件

import "../../../css/container/applicationCase/case.sass";
import {TitleBox} from "../../com/titleBox";
import {getHomeCompanyList} from "../../../tools/datas";
import {CompanyItem} from "../home/companyItem";
import {ApplicationImgList} from "./applicationImgList";

export const Case = () => {
    const partnerList = getHomeCompanyList();
    return (
        <div className="case">
            <TitleBox title={"应用案例"} titleEn={"SHOW CASE"}/>
            <div className={"msg"}>
                <span>我们收集客户使用效果汇总，经过高分子专家不断精进创新，优化配方做更适合您产品。使用过程中，提供一对一使用技术指导，服务更加贴心。产品经过数万家企业、用户的使用，获得良好的评价。</span>
            </div>
            <ApplicationImgList imgLT={"/static/img/applicationImgLT.jpg.webp"}
                                imgRT={"/static/img/applicationImgRT.jpg.webp"}
                                imgLB={"/static/img/applicationImgLB.jpg.webp"}
                                imgRB={"/static/img/applicationImgRB.jpg.webp"}/>
            <TitleBox title={"合作伙伴"} titleEn={"PARTNERS"}/>
            <div className="partnerList">
                {partnerList.map((item, index) => (
                    <CompanyItem key={item.id} imgUrl={item.imgUrl}/>
                ))}
            </div>
        </div>
    )
}

在css > container > contactUs文件夹中创建case.sass

.case
  width: 100%
  height: auto
  display: flex
  flex-direction: column
  align-items: center
  justify-content: space-around
  margin: 70px auto 20px

  .msg
    width: 50%
    height: auto
    margin: 10px
    text-align: center
    span
      line-height: 36px
      color: rgb(136,136,136)
      text-align: center
      font-size: 14px

  .partnerList
    width: 100%
    min-width: 1100px
    height: 190px
    background: white
    display: flex
    align-items: center
    justify-content: space-around

III、完成应用案例页面

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UGDC9rhm-1685336606587)(http://39.101.72.168:81/image/shixun/log/youQi/2023-05-28_142119.png)]

在pages文件夹中创建applicationCases.js

调用了components > com文件夹里的Header、PageTop、Footer组件

调用了components > containeer > applicationCase文件夹里的Case组件

import {Header} from "../components/com/header";
import {Footer} from "../components/com/footer";
import {PageTop} from "../components/com/pageTop";
import {Case} from "../components/container/applicationCase/case";

export const ApplicationCases = () => {
    return(
        <>
            <Header title={"油漆涂料模板"}/>
            <PageTop imgUrl={"AD0I5Z_5CRACGAAgno6o6AUojs3x4Acw_g44wgM.jpg"}/>
            <Case />
            <Footer />
        </>
    )
}

第三天

一、创建新闻中心页面，并完成新闻中心页面

在components > container文件夹中创建newsCenter文件夹

在css > container文件夹中创建newsCenter文件夹

I、创建上部新闻展示列表

展示效果：

在components > container > newsCenter文件夹中创建newTopList.js

调用了components > container > newsCenter文件夹里的NewsItem组件

import "../../../css/container/newsCenter/newTopList.sass";
import {NewsItem} from "../home/newsItem";
import {getHomeNewsList} from "../../../tools/datas";

export const NewTopList = () =>{
    const homeNewsList = getHomeNewsList();
    return(
        <div className="newTopList">
            {homeNewsList.map((item,index)=>(
                <NewsItem key={item.id} newsItem={item}/>
            ))}
        </div>
    )
}

在css > container > newsCenter文件夹中创建newTopList.sass

.newTopList
  width: 80%
  height: 461px
  margin: 80px auto 20px
  display: flex
  flex-wrap: wrap
  align-items: center
  justify-content: space-around

II、创建下部新闻展示列表

1、创建单个新闻条目

展示效果：

在components > container > newsCenter文件夹中创建newBottomItem.js

import "../../../css/container/newsCenter/newBottomItem.sass";

export const NewBottomItem = ({title,msg,date,tag}) =>{
    return(
        <div className="newBottomItem">
            <div className="newBottomItemLeft">
                <span className={"title"}>{title}</span>
                <span className={"msg"}>{msg}</span>
                <span className={"tag"}>{tag}</span>
            </div>
            <div className="newBottomItemRight">
                <span className={"date"}>{date}</span>
            </div>
        </div>
    )
}

在css > container > newsCenter文件夹中创建newBottomItem.sass

.newBottomItem
  width: 80%
  height: 174px
  display: flex
  flex-wrap: wrap
  align-items: center
  justify-content: space-between
  border-bottom: 1px solid #ececec

  .newBottomItemLeft
    width: 80%
    height: 90%
    display: flex
    flex-direction: column
    justify-content: space-around
    padding-left: 30px
    .title
      font-size: 16px
      font-weight: 400
      line-height: 24px

    .msg
      font-size: 14px
      color: #666

    .tag
      width: 60px
      font-size: 12px
      text-align: center
      line-height: 26px
      color: #999
      border: 1px solid #e5e5e5
      border-radius: 5px
      padding: 0 5px 0 5px

  .newBottomItemRight
    width: 15%
    height: 100%
    text-align: center
    padding-top: 30px

    span
      width: 14px
      color: #999
      line-height: 24px

.newBottomItem:hover
  box-shadow: 0 0 10px #ccc

  .title
    color: #1e50ae

2、完成下部新闻展示列表

展示效果：

在components > container > applicationCase文件夹中创建case.js

调用了components > container > newsCenter文件夹里的NewBottomItem组件

import "../../../css/container/newsCenter/newBottomList.sass";
import {getNewBottomList} from "../../../tools/datas";
import {NewBottomItem} from "./newBottomItem";

export const NewBottomList = () =>{
    const newBottomList = getNewBottomList();
    return(
        <div className="newBottomList">
            {newBottomList.map((item,index)=>(
                <NewBottomItem key={item.id} title={item.title} msg={item.msg} date={item.date} tag={item.tag} />
            ))}
        </div>
    )
}

在css > container > newsCenter文件夹中创建newBottomList.sass

.newBottomList
  width: 100%
  height: auto
  display: flex
  flex-direction: column
  align-items: center
  margin: 50px auto 100px

III、完成新闻中心页面

展示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ghP9IXpH-1685336606588)(http://39.101.72.168:81/image/shixun/log/youQi/2023-05-28_144104.png)]

在pages文件夹中创建newsCenter.js

调用了components > com文件夹里的Header、PageTop、Footer组件

调用了components > containeer > newsCenter文件夹里的NewTopList、NewBottomList组件

import {Header} from "../components/com/header";
import {Footer} from "../components/com/footer";
import {PageTop} from "../components/com/pageTop";
import {NewTopList} from "../components/container/newsCenter/newTopList";
import {NewBottomList} from "../components/container/newsCenter/newBottomList";

export const NewsCenter = () => {
    return (
        <>
            <Header title={"油漆涂料模板"}/>
            <PageTop imgUrl={"AD0I5Z_5CRACGAAg0YSo6AUowIyajAUw_g44wQM.jpg"} />
            <NewTopList />
            <NewBottomList />
            <Footer/>
        </>
    )
}

二、打包程序，并在云服务器上发布

I、在WebStrom中使用`build`进行打包

1、找到webstorm的控制台，在控制台中运行以下命令

npm run build

2、在项目主文件夹里会出现bulid文件夹，内部有以static文件夹开头的文件，说明打包成功。（如果不想使用buid文件夹名，可以在package.json里的key=build的json串中进行设置打包文件夹名称，可以改为常用的dist等）

3、将打包好的build或dist文件夹进行压缩，最好为zip格式。

II、在服务器上发布

1、将压缩好的打包文件发送到服务器上，这里以CentOS7为服务器系统为例，并已搭建好了环境：

环境包括：宝塔面板，node.js环境，serve运行环境，搭建流程请查阅http://39.101.72.168:83/environment/server/CentOS/

通过ls和cd命令进入压缩文件所在目录，进入后执行以下命令

unzip build.zip 或 unzip dist.zip

进入宝塔面板，找到网站 —— Node项目 —— 添加Node项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JjYyRpHR-1685336610472)(null)]

1、找到解压的buid或dist文件夹上级目录，如果解压后没有这两个文件夹，就会出现许多文件，新建一个buid或dist文件夹，将那些散文件放入其中。

2、在启动选项里输入serve -s build -l port或serve -s dist -l port，port为端口号

3、项目端口写上个步骤设置的port。

4、选择相对应的node版本

5、设置备注

6、进行提交。

最后，启动项目，并且在云服务器上将设置的端口防火墙关闭。

OVER，项目编写发布完成！！！

自我总结

在项目编写中，出现了一些错误：

我在第一天观察整个网站找出公共部分那一环节没有将所有的公共组件都创建出来，有一些是在创建首页下方的轮播图组件时才意识到是公共组件，以后写项目时将会注意。

在第二天在创建联系我们页面的创建地图模块时，我想用百度地图开放平台里提供的适配React的地铁图组件React-BMapGL，但是在index.html引入：

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

时无法引入BMapGL组件，并且控制台爆红，我在浏览器中搜索了很多，但是没有找到解决这些错误的方法，最后，我退而求此次的用了百度地图的js接口JavascriptAPIv3，通过最原始的js引入实现了地图的编写。我会继续学习React-BMapGL的使用，尽早掌握。

在项目快完成时，进行页面外框缩小和扩大寻找bug，在缩小到小于1350px的时候，在页面右边会出现白的的空间，后面找到了这个bug，然后进行了修复，原因如下：

1、在设置最小宽度时，companyList组件的最小宽度比最高父组件App的最小宽度还要大，修改之后就不会出现问题了。

// companyList.sass
.companyListBox
  width: 100%
  // min-width: 1350px
  min-width:1100px
  height: 190px
  background: #f5f5f5

  .companyList
    width: 90%
    height: 100%
    margin: 0 auto
    display: flex
    flex-wrap: wrap
    align-items: center
    justify-content: space-around
// App.sass
.App
  align-items: center
  min-width: 1200px

这个项目是我的真正意义上的第一个React项目，此项目让我学到了React项目的创建和开发，认识到了jsx的魅力，加深了我对学习前端框架的兴趣，加油。