网站优化具体做哪些事情在线制作海报网站

当前位置： 首页 > news >正文

网站优化具体做哪些事情,在线制作海报网站,关于建设设计院公司网站的建议,自己 做网站目录 1.运行项目

1. 项目结构 ①项目顶部导航栏 ②项目左侧导航栏 ③主页面-路由切换区 本项目使用的是 reacttsscss 技术栈。 1.运行项目 在当前页面顶部下载本项目#xff0c;解压后使用编辑器打开#xff0c;然后再终端输入命令#xff1a; npm i 下载依赖后tsscss 技术栈。 1.运行项目 在当前页面顶部下载本项目解压后使用编辑器打开然后再终端输入命令 npm i 下载依赖后运行项目 npm run start 此时项目运行起来了可以再浏览器看到运行效果 2. 项目结构 在做自己的项目时对于这个项目目录我们只需要更改以下几个文件 src目录下的文件和App.tsx可以根据自己项目需要进行更改。 ①项目顶部导航栏 header.tsx: import logo from ../../assets/images/logo.svg; import ./header.scss;function Header() {return (div classNameheaderAllheader classNameheaderBoximg src{logo} altlogo classNameheaderImg /div classNameheaderText后台管理系统/divdiv classNamecirclezh/div/headerheader classNameheaderBoxPlaceholder/header/div); }export default Header;header.scss: .headerBox {width: 100vw;height: 56px;background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 9;min-width: 1140px;overflow: auto;.headerImg {width: 30px;height: 30px;position: absolute;top: 13px;left: 17px;}.headerText {font-size: 20px;position: absolute;top: 14px;left: 57px;font-weight: bold;}.navText {font-size: 16px;position: absolute;top: 16px;left: 218px;}.circle {width: 28px;height: 28px;line-height: 28px;border-radius: 50%;background-color: #19edcd;position: absolute;top: 14px;right: 14px;font-size: 12px;color: #FFF;text-align: center;} }.headerBoxPlaceholder {width: 100vw;height: 56px;box-shadow: 0px 4px 10px 0px rgba(78, 89, 105, 0.06); } ②项目左侧导航栏 leftNavigation.tsx 使用左侧导航图标使用svg方便切换状态时换色以及后期更改主题色。 import { ReactComponent as IconEducationGroup } from ../../assets/images/icon-education-group.svg; import { ReactComponent as IconEduGroup } from ../../assets/images/icon-edu-group.svg; import { ReactComponent as IconSet } from ../../assets/images/icon-set.svg; import Arrow from ../../assets/images/icon-arrow.png; import ./leftNavigation.scss; import { useState } from react;function LeftNavigation() {// 左侧导航一级按钮let navText [企业信息, 组织管理, 系统设置];// 二级导航按钮比如企业信息没有子级则二级导航为空数组let navTextChild [[], [组织架构, 部门设置], [日志设置, 通知设置]];// 当前选中的是哪个按钮0是一级按钮-1代表它没有子级选中的就是它本身const [currentBtn, setCurrentBtn] useState([0, -1]);// 如果存在子层级子层级展开还是合并0合并1展开const [childShow, setChildShow] useState([1, 1, 1, 1]);/*** 判断按钮背景颜色* param index 索引* param flag 标志* param indexChild 二级索引* returns 返回className/function changeBGColor(index: number, flag: string, indexChild?: number): string {if (flag one) {if (navTextChild[index].length 0) {if (currentBtn[0] index navTextChild[index].length 0) return first-order-tag bg-color}} else {if (navTextChild[index].length ! 0 currentBtn[0] index currentBtn[1] indexChild) return first-order-tag bg-color}return first-order-tag;}/** 点击导航按钮进行页面切换* param indexOne 一级索引* param indexTwo 二级索引/function changeNavClick(indexOne: number, indexTwo?: number): void {if (navTextChild[indexOne].length 0) { setCurrentBtn([indexOne, -1]) }if (indexTwo ! undefined navTextChild[indexOne].length ! 0) {setCurrentBtn([indexOne, indexTwo])}if (indexTwo undefined navTextChild[indexOne].length ! 0) {updateItem(indexOne, childShow[indexOne] 1 ? 0 : 1)}}/** 只更新数组中的一个数值数组[1]的值* param indexFlag 一级索引* param newValue 新的数值/function updateItem(indexFlag: number, newValue: number) {setChildShow(prevItems prevItems.map((item, index) {if (index indexFlag) {return newValue;}return item;}));}return (div classNameleftNavigationAlldiv classNameleftNavigationBox{navText.map((item, index) (div key{index}{/ 第一层级 /}div key{index} className{changeBGColor(index, one)} onClick{() changeNavClick(index)}div className{currentBtn[0] index ? navTextStyle-selected : navTextStyle} {item}/div{index 0 IconEducationGroup classNameicon-svg stroke{currentBtn[0] index ? #00B498 : #505553} /}{index 1 IconEduGroup classNameicon-svg stroke{currentBtn[0] index ? #00B498 : #505553} /}{index 2 IconSet classNameicon-svg stroke{currentBtn[0] index ? #00B498 : #505553} fill{currentBtn[0] index ? #00B498 : #505553} /}{navTextChild[index].length ! 0 img alt箭头 src{Arrow} className{childShow[index] 1 ? arrow : arrowHidden}/img}/div{/ 第二层级 /}div className{childShow[index] 1 ? showDiv : hiddenDiv}{navTextChild[index].length ! 0 navTextChild[index].map((itemChild, indexChild) (div key{indexChild} className{changeBGColor(index, two, indexChild)} onClick{() changeNavClick(index, indexChild)}div className{(currentBtn[1] indexChild currentBtn[0] index) ? navTextStyle-selected : navTextStyle} {itemChild}/div/div))}/div/div))}/div/div); }export default LeftNavigation;leftNavigation.scss .bg-color {background-color: #E8FAF8; }.showDiv {display: block; }.hiddenDiv {display: none; }.leftNavigationBox {z-index: 8;width: 200px;height: 100vh;min-height: 400px;background-color: #FFF;position: fixed;top: 0;left: 0;padding-top: 72px;padding-left: 8px;padding-right: 8px;box-sizing: border-box;.first-order-tag {width: 184px;height: 40px;// background-color: #E8FAF8;margin-bottom: 4px;border-radius: 6px;position: relative;cursor: pointer;:hover {background-color: #F2F5F4;}.arrow {width: 12px;height: 12px;position: absolute;right: 16px;top: 14px;transform: rotateZ(180deg);}.arrowHidden {width: 12px;height: 12px;position: absolute;right: 16px;top: 14px;// transform: rotateZ(180deg);}.icon-svg {width: 18px;height: 18px;position: absolute;left: 12px;top: 11px;}.navTextStyle {font-size: 14px;color: #505553;position: absolute;left: 42px;top: 9px;}.navTextStyle-selected {font-size: 14px;color: #00B498;position: absolute;left: 42px;top: 9px;}} } ③主页面-路由切换区 App.tsx: 所有路由写在这里然后再左侧导航栏进行切换。 import ./App.scss; import Header from ./pages/navigation/header; import LeftNavigation from ./pages/navigation/leftNavigation; import Home from ./pages/home; import { Route, Routes } from react-router-domfunction App() {return (div classNameAppHeader /LeftNavigation /{/ 2. 使用路由组件,渲染路由,并且传入路由配置 /}Routes{/ comopnent替换为 element */}Route path/ element{Home /}/Route/Routes/div); }export default App;home / index.tsx: import ./index.scss; function Home() {return (div classNamehomeBoxdiv classNamehomeBoxText应用主页/div/div); }export default Home;以上就是项目的主要内容可以将此项目当作基础框架进行二次开发。