利用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
提取码:1ohslinux服务器搭建:
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
的魅力,加深了我对学习前端框架的兴趣,加油。