admin/SafeLine
1
0
Fork 0
mirror of https://github.com/chaitin/SafeLine.git synced 2026-02-02 14:53:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(websit): mobile page style optimization

Browse Source
This commit is contained in:
lanlan
2023-12-12 17:20:50 +08:00
committed by xbingW
parent 6d1c328402
commit 88bfec45cd
6 changed files with 84 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
documents/src/css/custom.css
View File

@@ -16,6 +16,7 @@ a:hover {
:root {
--ifm-color-primary: #0fc6c2;
--ifm-breadcrumb-color-active: #0fc6c2;
--ifm-menu-color: #000;
--ifm-menu-color-active: #0fc6c2;
--ifm-link-hover-color: #0fc6c2;
--ifm-footer-link-hover-color: #0fc6c2;
@@ -34,12 +35,12 @@ aside.theme-doc-sidebar-container {
width: 240px !important;
}
.navbar__toggle.clean-btn svg {
/* .navbar__toggle.clean-btn svg {
color: white;
}
} */
@media (max-width: 996px) {
:root {
--ifm-menu-color: white;
--ifm-menu-color: #000;
}
}

75
website/src/components/NavBar.tsx
View File

@@ -1,8 +1,9 @@
import React, { useEffect, useState } from 'react';
import { AppBar, Drawer, Grid, Toolbar, Typography, Button, Box, Container, Link, List, ListItem, ListItemText, Stack } from '@mui/material';
import { AppBar, Drawer, Grid, Toolbar, Typography, Button, Box, Container, Link, List, ListItem, ListItemText, Stack, IconButton } from '@mui/material';
import Image from 'next/image';
import dynamic from 'next/dynamic';
import Icon from "@/components/Icon";
import CloseIcon from '@mui/icons-material/Close';
import usePopupState, { bindPopover, bindHover } from '@/components/Popover/usePopupState'
const navs = [
@@ -56,32 +57,7 @@ export default function NavBar() {
<Grid container justifyContent="space-around">
<Grid item xs={10} md={6} display="flex">
<Box display="flex" alignItems="center">
<Link href="/">
<Grid container flexDirection="row" display="flex" spacing={2} sx={{ marginTop: '0px', minWidth: "192px" }}>
<Box width={{ xs: "40px", md: "24px" }} height={{ xs: "43px", md: "26px" }} position="relative">
<Image
src="/images/safeline.svg"
alt="SafeLine Logo"
layout="responsive"
width={40}
height={43}
/>
</Box>
<Typography
variant="h6"
sx={{
ml: { xs: 2, md: 1 },
mr: { xs: 0, md: 7 },
fontSize: { xs: "24px", md: "16px" },
display: 'flex',
alignItems: 'center',
fontFamily: "AlimamaShuHeiTi-Bold",
}}
>
雷池 SafeLine
</Typography>
</Grid>
</Link>
<SafelineTitle />
<Box display={{ xs: 'none', md: 'flex' }} alignItems="center">
{navs.map((nav, index) => (
<Box component="span" key={index} mr={3.5}>
@@ -172,16 +148,24 @@ export default function NavBar() {
</AppBar>
<Drawer
anchor='right'
sx={{ width: 200 }}
sx={{ width: "100%" }}
variant="temporary"
open={open}
PaperProps={{
style: {
width: '260px',
width: '100%',
},
}}
onClose={() => setOpen(false)}
>
<Stack direction="row" justifyContent="space-between" pl={4} pr={0.5} py={1} sx={{ boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px" }}>
<Box>
<SafelineTitle />
</Box>
<IconButton onClick={() => setOpen(false)}>
<CloseIcon />
</IconButton>
</Stack>
<List>
{menus.map((menu) => (
<Link key={menu.label} href={menu.to} target={menu.target}>
@@ -191,7 +175,7 @@ export default function NavBar() {
</Link>
))}
</List>
<Box textAlign="center">
<Box ml={2}>
<Image
src="/images/wechat-230825.png"
alt="wechat"
@@ -203,3 +187,34 @@ export default function NavBar() {
</>
);
}
export const SafelineTitle: React.FC = () => {
return (
<Link href="/">
<Grid container flexDirection="row" display="flex" spacing={2} sx={{ marginTop: '0px', minWidth: "192px" }}>
<Box width={{ xs: "40px", md: "24px" }} height={{ xs: "43px", md: "26px" }} position="relative">
<Image
src="/images/safeline.svg"
alt="SafeLine Logo"
layout="responsive"
width={40}
height={43}
/>
</Box>
<Typography
variant="h6"
sx={{
ml: { xs: 2, md: 1 },
mr: { xs: 0, md: 7 },
fontSize: { xs: "24px", md: "16px" },
display: 'flex',
alignItems: 'center',
fontFamily: "AlimamaShuHeiTi-Bold",
}}
>
雷池 SafeLine
</Typography>
</Grid>
</Link>
);
};

2
website/src/components/home/Abilities.tsx
View File

@@ -69,7 +69,7 @@ const Abilities = () => {
<Container maxWidth="lg">
<Grid container alignItems="center">
<Grid item xs={12} md={6}>
<Typography variant="h2" mb={4.5} textAlign={{ xs: "center", md: "left" }} fontSize={{ sx: "32px", md: "48px" }}>
<Typography variant="h2" mb={4.5} textAlign={{ xs: "center", md: "left" }} fontSize={{ xs: "32px", md: "48px" }}>
多维能力拓展
</Typography>
<Grid container spacing={2}>

5
website/src/components/home/Features.tsx
View File

@@ -158,10 +158,7 @@ const FEATURE_LIST = [
</List>
</Grid>
<Grid item xs={12} md={6} mt={7}>
<Box
position={'relative'}
width={{ xs: "80%", md: "100%" }}
>
<Box position={'relative'}>
<Image
src="/images/feature3-bg.png"
alt=""

2
website/src/components/home/Version.tsx
View File

@@ -32,7 +32,7 @@ const Version = () => {
<Button
variant="outlined"
sx={{
width: { xs: "384px", md: "146px" },
width: { xs: "100%", sm: "384px", md: "146px" },
height: { xs: "72px", md: "50px" },
mt: 4,
backgroundColor: "common.white",

40
website/src/pages/index.tsx
View File

@@ -100,20 +100,20 @@ export default function Home({ total, starCount }: { total: number, starCount: n
quality={100}
// unoptimized={true}
/>
<Box pt={{ xs: 21, md: 26.5 }} className="relative">
<Box pt={{ xs: 21, md: 26.5 }} className="relative" display={{ xs: "none", sm: "block" }}>
<Box alignItems="center">
<Stack
direction="row"
sx={{
color: "#86909C",
letterSpacing: { xs: 0, sm: 4, md: 8 },
letterSpacing: { xs: 4, md: 8 },
}}
justifyContent="center"
>
<Typography
variant="h5"
sx={{
mr: { xs: 12, sm: 22, md: 36.5 },
mr: { xs: 22, md: 36.5 },
fontWeight: 400,
fontSize: { xs: "16px", md: "24px" },
}}
@@ -145,22 +145,45 @@ export default function Home({ total, starCount }: { total: number, starCount: n
<Typography
variant="h1"
sx={{
mr: { xs: 9.5, sm: 13.5, md: 15.5 },
fontSize: { xs: "32px", sm: "48px", md: "80px" },
mr: { xs: 13.5, md: 15.5 },
fontSize: { xs: "48px", md: "80px" },
}}
>
不让黑客
</Typography>
<Typography variant="h1" sx={{ fontSize: { xs: "32px", sm: "48px", md: "80px" }, }}>
<Typography variant="h1" sx={{ fontSize: { xs: "48px", md: "80px" }, }}>
越雷池一步
</Typography>
</Stack>
</Box>
</Box>
<Box pt={{ xs: 16 }} className="relative" display={{ xs: "block", sm: "none" }}>
<Stack alignItems="center">
<Typography
variant="h1"
sx={{
fontSize: "32px",
}}
>
不让黑客，越雷池一步
</Typography>
<Typography
variant="h5"
sx={{
fontWeight: 400,
mt: 2,
fontSize: "16px",
color: "#86909C",
}}
>
基于智能语义分析的，下一代 Web 应用防火墙
</Typography>
</Stack>
</Box>
<Box
sx={{
position: "absolute",
bottom: { xs: 520, sm: 472, md: 351 },
bottom: { xs: 436, sm: 472, md: 351 },
left: "50%",
transform: "translateX(-50%)",
}}
@@ -222,6 +245,7 @@ export default function Home({ total, starCount }: { total: number, starCount: n
xs={12}
sm={6}
mt={{ xs: 2, sm: 0 }}
pl={{ xs: 10, sm: 0 }}
sx={{ display: "flex", justifyContent: "center" }}
>
<Link
@@ -258,7 +282,7 @@ export default function Home({ total, starCount }: { total: number, starCount: n
<Grid
key={article.title}
item
xs={4}
xs={6}
sm={4}
display="flex"
justifyContent={{ xs: 'flex-start', sm: justifyContents[index % 3] }}