pqc
/
new-demo
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大量页面修改美化

This commit is contained in:
pqcqaq 2024-10-19 13:31:13 +08:00
parent 29643f126e
commit f93ad7788c
9 changed files with 174 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/frontend/home/FrontendFooter.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from "react";
const FrontendFooter = () => {
return <h1>Footer</h1>;
}
export default FrontendFooter;

37
src/data/i18n.ts
View File

@ -116,6 +116,16 @@ const i18ns: I18n[] = [
"tips": "请选择模式"
}
},
{
id: "aa6631e469935d0fb5c556e96dcc4379",
namespace: "new-demo-p-frontend-home",
language: "zh-CN",
module: "new-demo",
position: "src/pages/frontend/home",
data: {
"pageTitle": "首页"
}
},
{
id: "fd2b72a085371d814256e3e315beba4b",
namespace: "new-demo-p-frontend-login",
@ -232,6 +242,18 @@ const i18ns: I18n[] = [
"labelsAll": "全部标签"
}
},
{
id: "4b10fe11458024730c7c9c6f4115f807",
namespace: "new-demo-c-frontend-home",
language: "zh-CN",
module: "new-demo",
position: "src/components/frontend/home",
data: {
"title": "标题包含",
"content": "内容包含",
"allessay": "全部文章"
}
},
{
id: "66807ab52114b7a250380d6a509aea19",
namespace: "new-demo-l-common",
@ -289,7 +311,8 @@ const i18ns: I18n[] = [
"enter": "请输入",
"change": "修改",
"finish": "完成",
"creator": "创建人"
"creator": "创建人",
"top": "置顶"
}
},
{
@ -1904,7 +1927,11 @@ const i18ns: I18n[] = [
"console": "控制台",
"logout": "退出",
"close": "关闭",
"login": "登录"
"login": "登录",
"searchPlaceholder": "搜索文章",
"title": "标题",
"content": "内容",
"search": "搜索"
}
},
{
@ -1957,7 +1984,11 @@ const i18ns: I18n[] = [
"console": "控制台",
"logout": "退出",
"close": "关闭",
"login": "登录"
"login": "登录",
"searchPlaceholder": "搜索文章",
"title": "标题",
"content": "内容",
"search": "搜索"
}
},
{

65
src/pages/frontend/essay/details/styles.module.less
View File

@ -1,5 +1,7 @@
.essay {
height: 100%;
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
.top {
position: relative;
@ -14,6 +16,7 @@
height: 100%;
// 短边缩放，左右可以留白
object-fit: contain;
z-index: 1;
}
.backgroundfilter {
@ -25,6 +28,7 @@
object-fit: cover;
// 模糊效果
filter: blur(10px);
z-index: 0;
}
.title {
@ -39,11 +43,28 @@
padding: 10px;
border-radius: 20px;
backdrop-filter: blur(5px);
z-index: 2;
}
.noCover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
font-weight: 600;
color: #ffffff;
mix-blend-mode: difference;
padding: 10px;
border-radius: 20px;
backdrop-filter: blur(5px);
filter: blur(2px);
}
}
.viewer {
width: 60%; // 设置宽度为60%，这样左右各留20%
min-width: 400px; // 最小宽度300px
margin-left: auto; // 自动左边距
margin-right: auto; // 自动右边距
padding: 20px;
@ -51,5 +72,47 @@
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
z-index: 3;
.btns {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
}
.blank {
flex: 1;
}
.footer {
background-color: #fff;
margin-top: 20px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
}
.scrollTopButton {
position: fixed;
bottom: 100px;
right: 60px;
background-color: #007bff;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s;
opacity: 0.7;
&:hover {
opacity: 1;
}
}

73
src/pages/frontend/essay/details/web.pc.tsx
View File

@ -1,8 +1,11 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { EntityDict } from '@project/oak-app-domain';
import { RowWithActions, WebComponentProps } from 'oak-frontend-base';
import Styles from './styles.module.less';
import MdViewer from '@project/components/common/byteMD/MdViewer';
import FrontendFooter from '@project/components/frontend/home/FrontendFooter';
import { Button } from 'antd';
import { VerticalAlignTopOutlined } from '@ant-design/icons';
const EssayDetails = (
props: WebComponentProps<
@ -16,30 +19,78 @@ const EssayDetails = (
>
) => {
const { item, cover } = props.data;
const [showScrollTop, setShowScrollTop] = useState(false);
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 300) {
setShowScrollTop(true);
} else {
setShowScrollTop(false);
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
return (
<div className={Styles.essay}>
{item && (
<>
<div className={Styles.top}>
<img
className={Styles.backgroundfilter}
src={cover}
alt={item.title}
></img>
<img
className={Styles.backgroundImage}
src={cover}
alt={item.title}
></img>
{cover ? (
<>
<img
className={Styles.backgroundfilter}
src={cover}
alt={item.title}
></img>
<img
className={Styles.backgroundImage}
src={cover}
alt={item.title}
></img>
</>
) : (
<div className={Styles.noCover}>{item.title}</div>
)}
<div className={Styles.title}>{item.title}</div>
</div>
{/* viewer */}
<div className={Styles.viewer}>
{/* 操作按钮，返回 */}
<div className={Styles.btns}>
<Button
className={Styles.back}
onClick={() => window.history.back()}
>
返回
</Button>
</div>
<MdViewer md={item.content!} />
</div>
<div className={Styles.blank}></div>
</>
)}
<div className={Styles.footer}>
<FrontendFooter />
</div>
{showScrollTop && (
<button
className={Styles.scrollTopButton}
onClick={scrollToTop}
>
<VerticalAlignTopOutlined />
</button>
)}
</div>
);
};

3
src/pages/frontend/home/locales/zh-CN.json Normal file
View File

@ -0,0 +1,3 @@
{
"pageTitle": "首页"
}

2
src/pages/frontend/home/styles.module.less
View File

@ -12,9 +12,7 @@
.content {
flex: 1;
padding: 20px;
background-color: #fff;
margin-top: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.footer {

3
src/pages/frontend/home/web.pc.tsx
View File

@ -4,6 +4,7 @@ import Styles from './styles.module.less';
import FrontendBody from '@project/components/frontend/home/FrontendBody';
import { useHomeContext } from '@project/components/frontend/home/context/homeContext';
import FrontendFooter from '@project/components/frontend/home/FrontendFooter';
const Home = () => {
const { setShowSeachInput } = useHomeContext();
@ -25,7 +26,7 @@ const Home = () => {
<FrontendBody />
</div>
<div className={Styles.footer}>
<h1>Footer</h1>
<FrontendFooter />
</div>
</div>
);

1
web/src/app/components/frontendHeader/web.pc.module.less
View File

@ -6,6 +6,7 @@
display: flex;
flex-direction: row;
align-items: center;
z-index: 100;
// header固定在最上方
position: fixed;

1
web/src/app/namespaces/frontend/styles.module.less
View File

@ -1,4 +1,5 @@
.body {
background-color: #f0f2f5;
padding-top: 60px;
min-height: calc(100vh - 60px);
}