用react写一个后台管理系统的欢迎页面,要求企业logo中间,有欢迎使用巡检人管理系统的艺术字
时间: 2024-04-03 16:35:36 浏览: 13
好的,以下是一个用 React 编写的后台管理系统欢迎页面的示例代码:
```jsx
import React from 'react';
import logo from './logo.png';
import './WelcomePage.css';
function WelcomePage() {
return (
<div className="welcome-page">
<img src={logo} className="logo" alt="企业logo" />
<h1 className="welcome-text">
欢迎使用<span className="art-text">巡检人管理系统</span>
</h1>
</div>
);
}
export default WelcomePage;
```
在上面的代码中,我们通过 `import` 引入了企业logo图片,并在 JSX 中使用 `img` 标签将其展示出来。另外,我们还使用 `h1` 标签展示了欢迎文本,其中巡检人管理系统的艺术字使用了 `span` 标签,并设置了对应的样式。
在 `WelcomePage.css` 中,我们可以设置样式来美化页面:
```css
.welcome-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}
.logo {
width: 120px;
margin-bottom: 20px;
}
.welcome-text {
font-size: 32px;
font-weight: bold;
color: #333;
text-align: center;
line-height: 1.5;
}
.art-text {
font-size: 40px;
font-family: '宋体';
color: #f60;
}
```
在上面的代码中,我们通过设置 `display: flex` 和相关属性,使页面居中显示。另外,我们也设置了一些文本和图片的样式,包括字体、颜色、大小等。最终的效果如下图所示:
![后台管理系统欢迎页面示例](https://img-blog.csdnimg.cn/20211015163141205.png)